fluent-dom-esm

A remarkably simple but surprisingly powerful DOM element creation library with an easy-to-use syntax inspired by the classic JS libraries of yesterday.

When you don't need a whole framework (or JSX), but also don't want to spend all day typing document.createElement or document.getElementById, fluent-dom-esm may just be the thing you need.

Installation

Grab the latest copy of the fluent-dom-esm.js file, either by downloading it or doing a git clone and pulling it out of the dist folder.
Add the newly acquired file to your static site / progressive web app / over-engineered blog.
Import it as an ESM module (import $d from "./src/fluent-dom-esm.js").
Profit!

Occasionally Asked Questions

How can I use this in Node? You can't, AFAIK. It requires access to the HTML Document object from the browser.
How can I minify or bundle this? You shouldn't, IMHO. JavaScript is meant to be read by humans AND machines.

Building / Modifying

The source exists as a couple of TypeScript files which are "bundled" into a traditional JS file (along with TS definitions).

Building

To build new versions of the fluent-dom-esm.js file:

git clone this project.
cd fluent-dom-esm
yarn
yarn build

If everything goes as expected, you should have a newly built fluent-dom-esm.js file in the dist folder.

Modifying

To edit the source of the fluent-dom-esm.js file:

git clone this project.
cd fluent-dom-esm
yarn
yarn dev
Make your changes to fluent-dom-esm.ts.
When you're happy with it, do a yarn build.

If everything goes as expected, you should have a newly built fluent-dom-esm.js file in the dist folder with your changes.

Examples

All assume that $d is the default function from fluent-dom-esm (import $d from './fluent-dom-esm.js');

For more examples, see the demo.html file in the dist folder.

Create a Paragraph

$(document.body).app($d
	.c("p")
	.s("background-color", "yellow")
	.s("color", "black")
	.t("The quick brown fox jumped over the lazy, sleeping dog.")
);

renders (with added spaces) as

<body>
	<p style="background-color: yellow; color: black;">
		The quick brown fox jumped over the lazy, sleeping dog.
	</p>
</body>

Create a List

const $ul = $d
		.c("ul")
		.id("example-list")
		.cls("example-list");
	[
		"List Item 1",
		"List Item 2",
		"List Item 3",
	].forEach((reason, idx) => {
		$ul.app(
			$d
				.c("li")
				.id(`fluentDom-example-list-item${idx + 1}`)
				.t(reason),
		);
	});

$(document.body).app($ul);