135 lines
3.9 KiB
Markdown
135 lines
3.9 KiB
Markdown
# 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!
|
|
|
|
### 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 './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 © 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 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.
|
|
```
|