From 19b0e4666e0072c19c7a8a898d7713339dc8f75b Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Fri, 14 Mar 2025 14:54:38 +0100 Subject: [PATCH] :zap: :abc: cdn --- README.md | 15 +++- docs/components/code.html.js | 2 +- docs/components/getLibraryUrl.css.js | 64 +++++++++++++++++ docs/components/getLibraryUrl.js.js | 103 ++++++++++++++++----------- docs/global.css.js | 16 ++++- docs/index.html.js | 22 +++++- 6 files changed, 174 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index fe1a787..701c34a 100644 --- a/README.md +++ b/README.md @@ -93,11 +93,22 @@ into existing projects. # npm install deka-dom-el ``` -#### Direct Script +#### CDN / Direct Script + +For CDN links and various build formats (ESM/IIFE, with/without signals, minified/unminified), see the [interactive format selector](https://jaandrle.github.io/deka-dom-el/) on the documentation site. + ```html + - + + + ``` diff --git a/docs/components/code.html.js b/docs/components/code.html.js index 7d2736f..6425412 100644 --- a/docs/components/code.html.js +++ b/docs/components/code.html.js @@ -184,7 +184,7 @@ import { el } from "deka-dom-el"; * @param {string} [attrs.className] * @param {URL} [attrs.src] Example code file path * @param {string} [attrs.content] Example code - * @param {"js"|"ts"|"html"|"css"} [attrs.language="js"] Language of the code + * @param {"js"|"ts"|"html"|"css"|"shell"} [attrs.language="js"] Language of the code * @param {string} [attrs.page_id] ID of the page, if setted it registers shiki * */ export function code({ id, src, content, language= "js", className= host.slice(1), page_id }){ diff --git a/docs/components/getLibraryUrl.css.js b/docs/components/getLibraryUrl.css.js index f39b195..4c23d59 100644 --- a/docs/components/getLibraryUrl.css.js +++ b/docs/components/getLibraryUrl.css.js @@ -4,5 +4,69 @@ styles.css` #library-url-form { display: flex; flex-flow: column nowrap; + gap: 1rem; + padding: 1.5rem; + border-radius: var(--border-radius); + background-color: var(--bg-sidebar); + box-shadow: var(--shadow); + border: 1px solid var(--border); + margin: 1.5rem 0; +} + +#library-url-form .selectors { + display: flex; + flex-flow: row wrap; + gap: 0.75rem; +} + +#library-url-form output { + display: flex; + flex-flow: column nowrap; + gap: 0.75rem; + margin-top: 0.5rem; +} + +#library-url-form output p { + font-weight: 500; + margin: 0.25rem 0; + color: var(--text-light); +} + +#library-url-form .url-title { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: -0.25rem; +} + +#library-url-form .url-title strong { + font-family: var(--font-mono); + font-size: 0.95rem; +} + +#library-url-form .url-title span { + color: var(--text-light); + font-size: 0.9rem; +} + +#library-url-form .code { + margin-bottom: 1rem; +} + +#library-url-form .info-text { + font-size: 0.9rem; + font-style: italic; + margin-top: 1rem; + color: var(--text-light); +} + +@media (max-width: 768px) { + #library-url-form .selectors { + flex-direction: column; + } + + #library-url-form select { + width: 100%; + } } `; diff --git a/docs/components/getLibraryUrl.js.js b/docs/components/getLibraryUrl.js.js index 25621d2..e89dca7 100644 --- a/docs/components/getLibraryUrl.js.js +++ b/docs/components/getLibraryUrl.js.js @@ -8,6 +8,13 @@ const url_base= { export function getLibraryUrl(){ const lib= S([ "esm", "-with-signals", ".min" ]); const url= S(()=> url_base.jsdeka+lib.get().join("")); + const urlLabel= S(() => { + const [format, signalsPart, minified] = lib.get(); + const formatText = format === "esm" ? "ES Module" : "IIFE"; + const signalsText = signalsPart ? " with signals" : ""; + const minText = minified ? " (minified)" : ""; + return `${formatText}${signalsText}${minText}`; + }) const onSubmit= on("submit", ev => { ev.preventDefault(); const form= new FormData(/** @type {HTMLFormElement} */ (ev.target)); @@ -20,56 +27,66 @@ export function getLibraryUrl(){ const onChangeSubmit= on("change", ev=> /** @type {HTMLSelectElement} */(ev.target).form.requestSubmit() ); - const onCopy= on("click", ev => { - const code= /** @type {HTMLDivElement} */ (ev.target).previousElementSibling; - navigator.clipboard.writeText(code.textContent); - }); return el("form", { id: "library-url-form" }, onSubmit).append( - el("select", { name: "module" }, onChangeSubmit).append( - el("option", { value: "esm", textContent: "ESM — modern JavaScript module" }, - isSelected(lib.get()[0])), - el("option", { value: "iife", textContent: "IIFE — legacy JavaScript with DDE global variable" }, - isSelected(lib.get()[0])), - ), - el("select", { name: "what" }, onChangeSubmit).append( - el("option", { value: "", textContent: "only DOM part" }, - isSelected(lib.get()[1])), - el("option", { value: "-with-signals", textContent: "DOM part and signals library" }, - isSelected(lib.get()[1])), - ), - el("select", { name: "minified" }, onChangeSubmit).append( - el("option", { value: "", textContent: "unminified" }, - isSelected(lib.get()[2])), - el("option", { value: ".min", textContent: "minified" }, - isSelected(lib.get()[2])), + el("h4", "Select your preferred library format:"), + el("div", { className: "selectors" }).append( + el("select", { name: "module" }, onChangeSubmit, + on.host(select => select.value = lib.get()[0]), + ).append( + el("option", { value: "esm", textContent: "ESM — modern JavaScript module" }), + el("option", { value: "iife", textContent: "IIFE — legacy JavaScript with DDE global variable" }), + ), + el("select", { name: "what" }, onChangeSubmit, + on.host(select => select.value = lib.get()[1]), + ).append( + el("option", { value: "", textContent: "DOM part only" }), + el("option", { value: "-with-signals", textContent: "DOM + signals" }), + ), + el("select", { name: "minified" }, onChangeSubmit, + on.host(select => select.value = lib.get()[2]), + ).append( + el("option", { value: "", textContent: "Unminified" }), + el("option", { value: ".min", textContent: "Minified" }), + ), ), el("output").append( - el("p", "Library URL:"), - el("div", { className: "code", dataJs: "done", tabIndex: 0 }).append( - el("code").append( - el("pre", S(()=> url.get()+".js")), - ), - el("button", { - className: "copy-button", - textContent: "Copy", - ariaLabel: "Copy code to clipboard", - }, onCopy), + el("div", { className: "url-title" }).append( + el("strong", "JavaScript:"), + el("span", urlLabel), ), - el("p", "Library type definition:"), - el("div", { className: "code", dataJs: "done", tabIndex: 0 }).append( - el("code").append( - el("pre", S(()=> url.get()+".d.ts")), - ), - el("button", { - className: "copy-button", - textContent: "Copy", - ariaLabel: "Copy code to clipboard", - }, onCopy), + el(code, { value: S(()=> url.get()+".js") }), + el("div", { className: "url-title" }).append( + el("strong", "TypeScript definition:") ), + el(code, { value: S(()=> url.get()+".d.ts") }), + el("p", { className: "info-text", + textContent: "Use the CDN URL in your HTML or import it in your JavaScript files." + }) ) ) } -function isSelected(value){ - return element=> element.selected= element.value===value; +/** @param {{ value: ddeSignal }} props */ +function code({ value }){ + /** @type {ddeSignal<"Copy"|"Copied!">} */ + const textContent= S("Copy"); + const onCopy= on("click", () => { + navigator.clipboard.writeText(value.get()); + + textContent.set("Copied!"); + setTimeout(() => { + textContent.set("Copy"); + }, 1500); + }); + return el("div", { className: "code", dataJs: "done", tabIndex: 0 }).append( + el("code").append( + el("pre", value), + ), + el("button", { + className: "copy-button", + textContent, + ariaLabel: "Copy code to clipboard", + }, onCopy) + ) + ; } diff --git a/docs/global.css.js b/docs/global.css.js index fc8a912..11241cd 100644 --- a/docs/global.css.js +++ b/docs/global.css.js @@ -86,7 +86,7 @@ html { } :focus-visible { - outline: 3px solid hsl(231, 48%, 70%); + outline: 3px solid var(--primary-light); outline-offset: 2px; } @@ -207,6 +207,20 @@ figure { max-width: 100%; } } +select { + padding: 0.5rem 0.75rem; + border-radius: var(--border-radius); + border: 1px solid var(--border); + background-color: var(--bg); + color: var(--text); + cursor: pointer; + font-size: 0.95rem; + font-family: var(--font-main); +} + +select:hover { + border-color: var(--primary); +} /* Layout */ body { diff --git a/docs/index.html.js b/docs/index.html.js index 06f71e9..ddb4cb5 100644 --- a/docs/index.html.js +++ b/docs/index.html.js @@ -101,13 +101,33 @@ export function page({ pkg, info }){ el(h3, t`Getting Started`), el("p").append(T` - To get builded dd to be used immediately in your browser, you can download the latest version from: + There are multiple ways to include dd in your project. You can use npm for a full development setup, + or directly include it from a CDN for quick prototyping. + `), + el("h4", "npm installation"), + el(code, { content: "npm install deka-dom-el # Coming soon", language: "shell", page_id }), + el("h4", "CDN / Direct Script Usage"), + el("p").append(T` + Use the interactive selector below to choose your preferred format: `), el(ireland, { src: fileURL("./components/getLibraryUrl.js.js"), exportName: "getLibraryUrl", page_id, }), + el("div", { className: "note" }).append( + el("p").append(T` + Based on your selection, you can use dd in your project like this: + `), + el(code, { content: ` + // ESM format (modern JavaScript with import/export) + import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.min.js"; + + // Or with IIFE format (creates a global DDE object) + // + const { el, on } = DDE; + `, language: "js", page_id }), + ), el(h3, t`How to Use This Documentation`), el("p").append(T`