# 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](https://git.itsericwoodward.com/eric/fluent-dom-esm/raw/branch/main/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!
### With JSR
This package can also be installed from [JSR](https://jsr.io/):
```
yarn add jsr:@itsericwoodward/fluent-dom-esm
```
### 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. If you want to go further down this path, I can't help you.
## 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 "@itsericwoodward/fluent-dom-esm";
```
- For more examples, see the `demo.html` file in the `dist` folder.
### Create a Paragraph
```
$d(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
```
The quick brown fox jumped over the lazy, sleeping dog.
```
### 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),
);
});
$d(document.body).app($ul);
```
renders (with added spaces) as
```
- List Item 1
- List Item 2
- List Item 3
```
### Access via QuerySelector
Given the [example list above](#create-a-list):
```
$d('#example-list')
.app($d
.c("li")
.id(`fluentDom-example-list-item4`)
.t("List Item 4")
);
```
renders (with added spaces) as
```
- List Item 1
- List Item 2
- List Item 3
- List Item 4
```
## License
Copyright © 2025 Eric Woodward
Based on [original source](https://glacius.tmont.com/articles/fluent-dom-manipulation-in-javascript), copyright © 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 following license:
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2004 Sam Hocevar
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.
```