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

Initial commit

Browse Source
This commit is contained in:
Eric Woodward
2025-09-06 17:22:25 -04:00
commit dc96e8570c
27 changed files with 2248 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
index.html Normal file
View File

@@ -0,0 +1,170 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fluent-dom-esm Demo</title>
<link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
<script type="module">
import $d from "/src/fluent-dom-esm.ts";
const $article = $d
.c("article")
.id("fde-article")
.cls("cool-article")
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
.app(
$d
.c("p")
.s("background-color", "#db7c17")
.s("color", "var(--main-dark)")
.t("Why is it so cool?"),
);
const $ul = $d.c("ul").id("fluentDom-example-list");
[
"Remarkably simple syntax",
"Surprisingly powerful features",
"Easy to use and remember",
].forEach((reason, idx) => {
$ul.app(
$d
.c("li")
.id(`fluentDom-example-list-item${idx + 1}`)
.t(reason),
);
});
$d(document.body).app(
$article
.app($ul)
.app(
$d.c("em").t("Try it today!").style("color", "#c43a19"),
),
);
</script>
<script type="module">
import $d from "/src/fluent-dom-esm.ts";
const preDom = $d
.c("pre")
.t(
`
\<script type="module">
import $d from "/src/fluent-dom-esm.ts";
const $article = $d
.c("article")
.id("fde-article")
.cls("cool-article")
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
.app(
$d
.c("p")
.s("background-color", "#db7c17")
.s("color", "var(--main-dark)")
.t("Why is it so cool?"),
);
const $ul = $d.c("ul").id("fluentDom-example-list");
[
"Remarkably simple syntax",
"Surprisingly powerful features",
"Easy to use and remember",
].forEach((reason, idx) => {
$ul.app(
$d
.c("li")
.id(\`fluentDom-example-list-item$\{idx + 1}\`)
.t(reason),
);
});
$d(document.body).app(
$article
.app($ul)
.app(
$d.c("em").t("Try it today!").style("color", "#c43a19"),
),
);
<\/script>
`
.trim()
.split("\n")
.map((val) => {
return val.replace(" ", "");
})
.join("\n"),
)
.toDom();
preDom.innerHTML = preDom.innerHTML
// strRegEx must be applied first to prevent false positives
.replace(/\"[^"]+\"/g, (val) =>
val !== '"module"'
? `<span class="code-str">${val}</span>`
: val,
)
.replace(
/\`[^`]+\`/g,
(val) => `<span class="code-str">${val}</span>`,
)
.replace(/\.\w+/g, (val) =>
val !== ".ts"
? `<span class="code-func">${val}</span>`
: val,
)
.replace(/(\$\w+)/g, '<span class="code-dom">$1</span>')
.replace("document", '<span class="code-var">document</span>')
.replaceAll("reason", '<span class="code-var">reason</span>')
.replace("idx", '<span class="code-var">idx</span>')
.replace(
/&lt;\/?script[^&]*&gt;/g,
(val) => `<span class="code-cmd">${val}</span>`,
);
const themeToggleButton = $d
.c("button")
.cls("themeToggle-button")
.id("themeToggle-button")
// .t("☀︎ / ☾")
.listen("click", () => {
document.body.classList.toggle("invertedTheme");
})
.html(
`
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
width="1em"
height="1em"
class="themeToggle-svgIndicator"
fill="currentColor"
viewBox="0 0 32 32"
>
<path
d="M16 .5C7.4.5.5 7.4.5 16S7.4 31.5 16 31.5 31.5 24.6 31.5 16 24.6.5
16 .5zm0 28.1V3.4C23 3.4 28.6 9 28.6 16S23 28.6 16 28.6z"
/>
</svg>
`.trim(),
);
$d(document.body)
.app(
$d
.c("figure")
.app($d.c("figcaption").t("Source"))
.app(preDom),
)
.app(themeToggleButton);
</script>
</body>
</html>