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 ## 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. - 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"> <script type="module">
import $d from "/fluent-dom-esm.js"; import $d from "/fluent-dom-esm.js";
// Create new objects in memory with a simple, chainable interface
const $article = $d const $article = $d
.c("article") .create("article")
.id("fde-article") .id("fde-article")
.cls("cool-article") .className("cool-article")
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm")) .append(
.app(
$d $d
.c("p") .create("h1")
.s("background-color", "#db7c17") .className("cool-heading")
.s("color", "var(--main-dark)") .text(`fluent-dom-esm v${$d.version()}`),
.t("Why is it so cool?"), )
.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"); const $ul = $d.c("ul").id("fluentDom-example-list");
[ [
"Remarkably simple syntax", "Remarkably simple syntax",
"Surprisingly powerful features", "Surprisingly powerful features",
@@ -35,10 +41,12 @@
$d $d
.c("li") .c("li")
.id(`fluentDom-example-list-item${idx + 1}`) .id(`fluentDom-example-list-item${idx + 1}`)
.s("font-style", "italic")
.t(reason), .t(reason),
); );
}); });
// HTMLElements an also be wrapped and combined with other in-memory objects
$d(document.body).app( $d(document.body).app(
$article $article
.app($ul) .app($ul)
@@ -46,6 +54,14 @@
$d.c("em").t("Try it today!").style("color", "#c43a19"), $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>
<script type="module"> <script type="module">
@@ -56,23 +72,29 @@
.t( .t(
` `
\<script type="module"> \<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 const $article = $d
.c("article") .create("article")
.id("fde-article") .id("fde-article")
.cls("cool-article") .className("cool-article")
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm")) .append(
.app(
$d $d
.c("p") .create("h1")
.s("background-color", "#db7c17") .className("cool-heading")
.s("color", "var(--main-dark)") .text("fluent-dom-esm"),
.t("Why is it so cool?"), )
.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"); const $ul = $d.c("ul").id("fluentDom-example-list");
[ [
"Remarkably simple syntax", "Remarkably simple syntax",
"Surprisingly powerful features", "Surprisingly powerful features",
@@ -82,10 +104,12 @@
$d $d
.c("li") .c("li")
.id(\`fluentDom-example-list-item$\{idx + 1}\`) .id(\`fluentDom-example-list-item$\{idx + 1}\`)
.s("font-style", "italic")
.t(reason), .t(reason),
); );
}); });
// HTMLElements can also be wrapped and combined with other in-memory objects
$d(document.body).app( $d(document.body).app(
$article $article
.app($ul) .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> <\/script>
` `
.trim() .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 isNumber = (value) => typeof value === "number";
const isString = (value) => typeof value === "string"; 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). * Fluent DOM Manipulation, adapted to ESM and cranked up to v2.1(.0).
* *
* https://git.itsericwoodward.com/eric/fluent-dom-esm * 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) * 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) * 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) * @author Tommy Montgomery (original)
* @license http://sam.zoy.org/wtfpl/ * @license http://sam.zoy.org/wtfpl/
*/ */
const APP_VERSION = "2.1.0"; const APP_VERSION = "2.2.0";
const fluentDomEsm = (function() { const fluentDomEsm = (function() {
const FluentDom = function(nodeOrQuerySelector) { const FluentDom = function(nodeOrQuerySelector) {
if (typeof nodeOrQuerySelector !== "string") if (typeof nodeOrQuerySelector !== "string")
@@ -28,11 +28,14 @@ const fluentDomEsm = (function() {
f.querySelector(nodeOrQuerySelector); f.querySelector(nodeOrQuerySelector);
return f; return f;
}; };
FluentDom.create = FluentDom.c = function(tagName) { FluentDom.c = FluentDom.create = function(tagName) {
const f = new FluentDomInternal(); const f = new FluentDomInternal();
f.create(tagName); f.create(tagName);
return f; return f;
}; };
FluentDom.v = FluentDom.version = function() {
return APP_VERSION;
};
const FluentDomInternal = function(node) { const FluentDomInternal = function(node) {
let root = node || null; let root = node || null;
this.fluentDom = APP_VERSION; this.fluentDom = APP_VERSION;
@@ -146,6 +149,9 @@ const fluentDomEsm = (function() {
root.removeEventListener(...props); root.removeEventListener(...props);
return this; return this;
}; };
this.v = this.version = function() {
return APP_VERSION;
};
}; };
return FluentDom; 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; append: (obj: FluentDomObject | HTMLElement | string) => FluentDomObject;
attr: (name: string, value: string) => FluentDomObject; attr: (name: string, value: string) => FluentDomObject;
c: (tagName: string) => FluentDomObject; c: (tagName: string) => FluentDomObject;
create: (tagName: string) => FluentDomObject;
className: (className: string) => FluentDomObject; className: (className: string) => FluentDomObject;
clear: () => FluentDomObject; clear: () => FluentDomObject;
cls: (className: string) => FluentDomObject;
clr: () => FluentDomObject; clr: () => FluentDomObject;
cls: (className: string) => FluentDomObject;
create: (tagName: string) => FluentDomObject;
h: (url: string) => FluentDomObject; h: (url: string) => FluentDomObject;
href: (url: string) => FluentDomObject; href: (url: string) => FluentDomObject;
html: (content: string) => FluentDomObject; html: (content: string) => FluentDomObject;
@@ -26,4 +26,6 @@ export interface FluentDomObject {
toDom: () => HTMLElement | null; toDom: () => HTMLElement | null;
toHTMLElement: () => HTMLElement | null; toHTMLElement: () => HTMLElement | null;
unlisten: (type: keyof HTMLElementEventMap, listener: () => {}, optionsOrUseCapture?: boolean | object) => FluentDomObject; unlisten: (type: keyof HTMLElementEventMap, listener: () => {}, optionsOrUseCapture?: boolean | object) => FluentDomObject;
v: () => string;
version: () => string;
} }

4
index.html
View File

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

2
jsr.json
View File

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

2
package.json
View File

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

70
public/demo.html
View File

@@ -11,21 +11,27 @@
<script type="module"> <script type="module">
import $d from "/fluent-dom-esm.js"; import $d from "/fluent-dom-esm.js";
// Create new objects in memory with a simple, chainable interface
const $article = $d const $article = $d
.c("article") .create("article")
.id("fde-article") .id("fde-article")
.cls("cool-article") .className("cool-article")
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm")) .append(
.app(
$d $d
.c("p") .create("h1")
.s("background-color", "#db7c17") .className("cool-heading")
.s("color", "var(--main-dark)") .text(`fluent-dom-esm v${$d.version()}`),
.t("Why is it so cool?"), )
.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"); const $ul = $d.c("ul").id("fluentDom-example-list");
[ [
"Remarkably simple syntax", "Remarkably simple syntax",
"Surprisingly powerful features", "Surprisingly powerful features",
@@ -35,10 +41,12 @@
$d $d
.c("li") .c("li")
.id(`fluentDom-example-list-item${idx + 1}`) .id(`fluentDom-example-list-item${idx + 1}`)
.s("font-style", "italic")
.t(reason), .t(reason),
); );
}); });
// HTMLElements an also be wrapped and combined with other in-memory objects
$d(document.body).app( $d(document.body).app(
$article $article
.app($ul) .app($ul)
@@ -46,6 +54,14 @@
$d.c("em").t("Try it today!").style("color", "#c43a19"), $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>
<script type="module"> <script type="module">
@@ -56,23 +72,29 @@
.t( .t(
` `
\<script type="module"> \<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 const $article = $d
.c("article") .create("article")
.id("fde-article") .id("fde-article")
.cls("cool-article") .className("cool-article")
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm")) .append(
.app(
$d $d
.c("p") .create("h1")
.s("background-color", "#db7c17") .className("cool-heading")
.s("color", "var(--main-dark)") .text("fluent-dom-esm"),
.t("Why is it so cool?"), )
.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"); const $ul = $d.c("ul").id("fluentDom-example-list");
[ [
"Remarkably simple syntax", "Remarkably simple syntax",
"Surprisingly powerful features", "Surprisingly powerful features",
@@ -82,10 +104,12 @@
$d $d
.c("li") .c("li")
.id(\`fluentDom-example-list-item$\{idx + 1}\`) .id(\`fluentDom-example-list-item$\{idx + 1}\`)
.s("font-style", "italic")
.t(reason), .t(reason),
); );
}); });
// HTMLElements can also be wrapped and combined with other in-memory objects
$d(document.body).app( $d(document.body).app(
$article $article
.app($ul) .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> <\/script>
` `
.trim() .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). * Fluent DOM Manipulation, adapted to ESM and cranked up to v2.1(.0).
* *
* https://git.itsericwoodward.com/eric/fluent-dom-esm * 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) * 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) * 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) * @author Tommy Montgomery (original)
* @license http://sam.zoy.org/wtfpl/ * @license http://sam.zoy.org/wtfpl/
*/ */
@@ -24,7 +24,7 @@ import {
isString, isString,
} from "./fluent-dom-esm.type-guards"; } 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 * 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 * 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)(); const f = new (FluentDomInternal as any)();
f.create(tagName); f.create(tagName);
return f; return f;
}; };
/**
* Returns library version
*/
FluentDom.v = FluentDom.version = function () {
return APP_VERSION;
};
/** /**
* The internal representation of the FluentDomObject * The internal representation of the FluentDomObject
*/ */
@@ -260,6 +267,13 @@ export default (function () {
root.removeEventListener(...props); root.removeEventListener(...props);
return this; return this;
}; };
/**
* Returns library version
*/
this.v = this.version = function () {
return APP_VERSION;
};
}; };
return FluentDom; return FluentDom;

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

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