Initial commit

2025-09-06 17:22:25 -04:00
commit dc96e8570c
27 changed files with 2248 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,140 @@
+# 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
+
+1. Grab the latest copy of the `fluent-dom-esm.js` file, either by [downloading it](./dist/fluent-dom-esm.js) or doing a `git clone` and pulling it out of the `dist` folder.
+2. Add the newly acquired file to your static site / progressive web app / over-engineered blog.
+3. Import it as an ESM module (`import $d from "./src/fluent-dom-esm.js"`).
+4. 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:
+
+1. `git clone` this project.
+2. `cd fluent-dom-esm`
+3. `yarn`
+4. `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:
+
+1. `git clone` this project.
+2. `cd fluent-dom-esm`
+3. `yarn`
+4. `yarn dev`
+5. Make your changes to `fluent-dom-esm.ts`.
+6. 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);
+
+```
+
+renders (with added spaces) as
+
+```
+<body>
+	<ul class="example-list" id="example-list">
+		<li id="fluentDom-example-list-item1">List Item 1</li>
+		<li id="fluentDom-example-list-item2">List Item 2</li>
+		<li id="fluentDom-example-list-item3">List Item 3</li>
+	</ul>
+</body>
+
+```
+
+## License
+
+Copyright &copy; 2025 Eric Woodward
+
+Based on [original source](https://glacius.tmont.com/articles/fluent-dom-manipulation-in-javascript), copyright &copy; 2009 Tommy Montgomery.
+
+```
+This program is free software. It comes without any warranty, to the
+extent permitted by applicable law. You can redistribute it and/or
+modify it under the terms of the Do What The Fuck You Want To Public
+License, Version 2, as published by Sam Hocevar.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
+
+ Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.
+
+```