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

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()