eric/fluent-dom-esm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update to v2.2.0

Browse Source 
add library version getter
fix demo issues
This commit is contained in:
Eric Woodward
2025-09-13 01:55:41 -04:00
parent c10e8cd345
commit c9de0883eb
10 changed files with 151 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -54,7 +54,11 @@ If everything goes as expected, you should have a newly built `fluent-dom-esm.js
## Examples
All assume that `$d` is the default function from `fluent-dom-esm` (`import $d from './fluent-dom-esm.js'`);
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.

70
dist/demo.html vendored
View File

@@ -11,21 +11,27 @@
<script type="module">
import $d from "/fluent-dom-esm.js";
// Create new objects in memory with a simple, chainable interface
const $article = $d
.c("article")
.create("article")
.id("fde-article")
.cls("cool-article")
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
.app(
.className("cool-article")
.append(
$d
.c("p")
.s("background-color", "#db7c17")
.s("color", "var(--main-dark)")
.t("Why is it so cool?"),
.create("h1")
.className("cool-heading")
.text(`fluent-dom-esm v${$d.version()}`),
)
.append(
$d
.create("p")
.style("background-color", "#db7c17")
.style("color", "var(--main-dark)")
.text("Why is it so cool?"),
);
// Or if you prefer the shorter syntax...
const $ul = $d.c("ul").id("fluentDom-example-list");
[
"Remarkably simple syntax",
"Surprisingly powerful features",
@@ -35,10 +41,12 @@
$d
.c("li")
.id(`fluentDom-example-list-item${idx + 1}`)
.s("font-style", "italic")
.t(reason),
);
});
// HTMLElements an also be wrapped and combined with other in-memory objects
$d(document.body).app(
$article
.app($ul)
@@ -46,6 +54,14 @@
$d.c("em").t("Try it today!").style("color", "#c43a19"),
),
);
// Or pass in a querySelector value to wrap the first matching element
$d("#fluentDom-example-list").app(
$d
.c("li")
.id("fluentDom-example-list-itemExtra")
.t("More features coming soon"),
);
</script>
<script type="module">
@@ -56,23 +72,29 @@
.t(
`
\<script type="module">
import $d from "/src/fluent-dom-esm.ts";
import $d from "/fluent-dom-esm.ts";
// Create new objects in memory with a simple, chainable interface
const $article = $d
.c("article")
.create("article")
.id("fde-article")
.cls("cool-article")
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
.app(
.className("cool-article")
.append(
$d
.c("p")
.s("background-color", "#db7c17")
.s("color", "var(--main-dark)")
.t("Why is it so cool?"),
.create("h1")
.className("cool-heading")
.text("fluent-dom-esm"),
)
.append(
$d
.create("p")
.style("background-color", "#db7c17")
.style("color", "var(--main-dark)")
.text("Why is it so cool?"),
);
// Or if you prefer the shorter syntax
const $ul = $d.c("ul").id("fluentDom-example-list");
[
"Remarkably simple syntax",
"Surprisingly powerful features",
@@ -82,10 +104,12 @@
$d
.c("li")
.id(\`fluentDom-example-list-item$\{idx + 1}\`)
.s("font-style", "italic")
.t(reason),
);
});
// HTMLElements can also be wrapped and combined with other in-memory objects
$d(document.body).app(
$article
.app($ul)
@@ -94,6 +118,14 @@
),
);
// Or pass in a querySelector value to wrap the first matching element
$d("#fluentDom-example-list").app(
$d
.c("li")
.id("fluentDom-example-list-itemExtra")
.t("More features coming soon"),
);
<\/script>
`
.trim()

16
dist/fluent-dom-esm.js vendored
View File

@@ -4,22 +4,22 @@ const isHTMLElement = (value) => !!value.nodeType;
const isNumber = (value) => typeof value === "number";
const isString = (value) => typeof value === "string";
/**
* fluent-dom-esm v2.1.0
* fluent-dom-esm v2.2.0
*
* Fluent DOM Manipulation, adapted to ESM and cranked up to v2.1(.0).
*
* https://git.itsericwoodward.com/eric/fluent-dom-esm
*
* v2.1.0 Copyright (c) 2025 Eric Woodward
* v2.2.0 Copyright (c) 2025 Eric Woodward
* Original copyright (c) 2009 Tommy Montgomery (https://glacius.tmont.com/articles/fluent-dom-manipulation-in-javascript)
*
* Released under the WTFPL (Do What the Fuck You Want to Public License)
*
* @author Eric Woodward (v2.1.0 update)
* @author Eric Woodward (v2 update)
* @author Tommy Montgomery (original)
* @license http://sam.zoy.org/wtfpl/
*/
const APP_VERSION = "2.1.0";
const APP_VERSION = "2.2.0";
const fluentDomEsm = (function() {
const FluentDom = function(nodeOrQuerySelector) {
if (typeof nodeOrQuerySelector !== "string")
@@ -28,11 +28,14 @@ const fluentDomEsm = (function() {
f.querySelector(nodeOrQuerySelector);
return f;
};
FluentDom.create = FluentDom.c = function(tagName) {
FluentDom.c = FluentDom.create = function(tagName) {
const f = new FluentDomInternal();
f.create(tagName);
return f;
};
FluentDom.v = FluentDom.version = function() {
return APP_VERSION;
};
const FluentDomInternal = function(node) {
let root = node || null;
this.fluentDom = APP_VERSION;
@@ -146,6 +149,9 @@ const fluentDomEsm = (function() {
root.removeEventListener(...props);
return this;
};
this.v = this.version = function() {
return APP_VERSION;
};
};
return FluentDom;
})();

6
dist/fluent-dom-esm.types.d.ts vendored
View File

@@ -5,11 +5,11 @@ export interface FluentDomObject {
append: (obj: FluentDomObject | HTMLElement | string) => FluentDomObject;
attr: (name: string, value: string) => FluentDomObject;
c: (tagName: string) => FluentDomObject;
create: (tagName: string) => FluentDomObject;
className: (className: string) => FluentDomObject;
clear: () => FluentDomObject;
cls: (className: string) => FluentDomObject;
clr: () => FluentDomObject;
cls: (className: string) => FluentDomObject;
create: (tagName: string) => FluentDomObject;
h: (url: string) => FluentDomObject;
href: (url: string) => FluentDomObject;
html: (content: string) => FluentDomObject;
@@ -26,4 +26,6 @@ export interface FluentDomObject {
toDom: () => HTMLElement | null;
toHTMLElement: () => HTMLElement | null;
unlisten: (type: keyof HTMLElementEventMap, listener: () => {}, optionsOrUseCapture?: boolean | object) => FluentDomObject;
v: () => string;
version: () => string;
}

4
index.html
View File

@@ -20,7 +20,7 @@
$d
.create("h1")
.className("cool-heading")
.text("fluent-dom-esm"),
.text(`fluent-dom-esm v${$d.version()}`),
)
.append(
$d
@@ -72,7 +72,7 @@
.t(
`
\<script type="module">
import $d from "/src/fluent-dom-esm.ts";
import $d from "/fluent-dom-esm.ts";
// Create new objects in memory with a simple, chainable interface
const $article = $d

2
jsr.json
View File

@@ -1,5 +1,5 @@
{
"name": "@itsericwoodward/fluent-dom-esm",
"version": "2.1.0",
"version": "2.2.0",
"exports": "./src/fluent-dom-esm.ts"
}

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "fluent-dom-esm",
"version": "2.1.0",
"version": "2.2.0",
"description": "",
"license": "WTFPL",
"exports": {

70
public/demo.html
View File

@@ -11,21 +11,27 @@
<script type="module">
import $d from "/fluent-dom-esm.js";
// Create new objects in memory with a simple, chainable interface
const $article = $d
.c("article")
.create("article")
.id("fde-article")
.cls("cool-article")
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
.app(
.className("cool-article")
.append(
$d
.c("p")
.s("background-color", "#db7c17")
.s("color", "var(--main-dark)")
.t("Why is it so cool?"),
.create("h1")
.className("cool-heading")
.text(`fluent-dom-esm v${$d.version()}`),
)
.append(
$d
.create("p")
.style("background-color", "#db7c17")
.style("color", "var(--main-dark)")
.text("Why is it so cool?"),
);
// Or if you prefer the shorter syntax...
const $ul = $d.c("ul").id("fluentDom-example-list");
[
"Remarkably simple syntax",
"Surprisingly powerful features",
@@ -35,10 +41,12 @@
$d
.c("li")
.id(`fluentDom-example-list-item${idx + 1}`)
.s("font-style", "italic")
.t(reason),
);
});
// HTMLElements an also be wrapped and combined with other in-memory objects
$d(document.body).app(
$article
.app($ul)
@@ -46,6 +54,14 @@
$d.c("em").t("Try it today!").style("color", "#c43a19"),
),
);
// Or pass in a querySelector value to wrap the first matching element
$d("#fluentDom-example-list").app(
$d
.c("li")
.id("fluentDom-example-list-itemExtra")
.t("More features coming soon"),
);
</script>
<script type="module">
@@ -56,23 +72,29 @@
.t(
`
\<script type="module">
import $d from "/src/fluent-dom-esm.ts";
import $d from "/fluent-dom-esm.ts";
// Create new objects in memory with a simple, chainable interface
const $article = $d
.c("article")
.create("article")
.id("fde-article")
.cls("cool-article")
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
.app(
.className("cool-article")
.append(
$d
.c("p")
.s("background-color", "#db7c17")
.s("color", "var(--main-dark)")
.t("Why is it so cool?"),
.create("h1")
.className("cool-heading")
.text("fluent-dom-esm"),
)
.append(
$d
.create("p")
.style("background-color", "#db7c17")
.style("color", "var(--main-dark)")
.text("Why is it so cool?"),
);
// Or if you prefer the shorter syntax
const $ul = $d.c("ul").id("fluentDom-example-list");
[
"Remarkably simple syntax",
"Surprisingly powerful features",
@@ -82,10 +104,12 @@
$d
.c("li")
.id(\`fluentDom-example-list-item$\{idx + 1}\`)
.s("font-style", "italic")
.t(reason),
);
});
// HTMLElements can also be wrapped and combined with other in-memory objects
$d(document.body).app(
$article
.app($ul)
@@ -94,6 +118,14 @@
),
);
// Or pass in a querySelector value to wrap the first matching element
$d("#fluentDom-example-list").app(
$d
.c("li")
.id("fluentDom-example-list-itemExtra")
.t("More features coming soon"),
);
<\/script>
`
.trim()

24
src/fluent-dom-esm.ts
View File

@@ -1,16 +1,16 @@
/**
* fluent-dom-esm v2.1.0
* fluent-dom-esm v2.2.0
*
* Fluent DOM Manipulation, adapted to ESM and cranked up to v2.1(.0).
*
* https://git.itsericwoodward.com/eric/fluent-dom-esm
*
* v2.1.0 Copyright (c) 2025 Eric Woodward
* v2.2.0 Copyright (c) 2025 Eric Woodward
* Original copyright (c) 2009 Tommy Montgomery (https://glacius.tmont.com/articles/fluent-dom-manipulation-in-javascript)
*
* Released under the WTFPL (Do What the Fuck You Want to Public License)
*
* @author Eric Woodward (v2.1.0 update)
* @author Eric Woodward (v2 update)
* @author Tommy Montgomery (original)
* @license http://sam.zoy.org/wtfpl/
*/
@@ -24,7 +24,7 @@ import {
isString,
} from "./fluent-dom-esm.type-guards";
const APP_VERSION = "2.1.0";
const APP_VERSION = "2.2.0";
/**
* IIFE that creates the FluentDomObject as default export
@@ -45,12 +45,19 @@ export default (function () {
/**
* Creates a new HTML element which is wrapped in a FluentDomObject and returned
*/
FluentDom.create = FluentDom.c = function (tagName: string) {
FluentDom.c = FluentDom.create = function (tagName: string) {
const f = new (FluentDomInternal as any)();
f.create(tagName);
return f;
};
/**
* Returns library version
*/
FluentDom.v = FluentDom.version = function () {
return APP_VERSION;
};
/**
* The internal representation of the FluentDomObject
*/
@@ -260,6 +267,13 @@ export default (function () {
root.removeEventListener(...props);
return this;
};
/**
* Returns library version
*/
this.v = this.version = function () {
return APP_VERSION;
};
};
return FluentDom;

9
src/fluent-dom-esm.types.ts
View File

@@ -5,13 +5,13 @@ export interface FluentDomObject {
app: (obj: FluentDomObject | HTMLElement | string) => FluentDomObject;
append: (obj: FluentDomObject | HTMLElement | string) => FluentDomObject;
attr: (name: string, value: string) => FluentDomObject;
c: (tagName: string) => FluentDomObject;
create: (tagName: string) => FluentDomObject;
c: (tagName: string) => FluentDomObject;
className: (className: string) => FluentDomObject;
clear: () => FluentDomObject;
cls: (className: string) => FluentDomObject;
clr: () => FluentDomObject;
cls: (className: string) => FluentDomObject;
create: (tagName: string) => FluentDomObject;
h: (url: string) => FluentDomObject;
href: (url: string) => FluentDomObject;
@@ -51,4 +51,7 @@ export interface FluentDomObject {
listener: () => {},
optionsOrUseCapture?: boolean | object,
) => FluentDomObject;
v: () => string;
version: () => string;
}