⚡ 🔤 lib download

docs/components/getLibraryUrl.css.js

@@ -0,0 +1,8 @@
+import { styles } from "../ssr.js";
+
+styles.css`
+#library-url-form {
+	display: flex;
+	flex-flow: column nowrap;
+}
+`;

docs/components/getLibraryUrl.js.js

@@ -0,0 +1,75 @@
+import { el, on } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+const url_base= {
+	jsdeka: "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/",
+};
+
+export function getLibraryUrl(){
+	const lib= S([ "esm", "-with-signals", ".min" ]);
+	const url= S(()=> url_base.jsdeka+lib.get().join(""));
+	const onSubmit= on("submit", ev => {
+		ev.preventDefault();
+		const form= new FormData(/** @type {HTMLFormElement} */ (ev.target));
+		lib.set([
+			"module",
+			"what",
+			"minified",
+		].map(name => /** @type {string} */(form.get(name))));
+	});
+	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("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("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),
+			),
+		)
+	)
+}
+function isSelected(value){
+	return element=> element.selected= element.value===value;
+}

docs/index.html.js

@@ -1,3 +1,4 @@
+import "./components/getLibraryUrl.css.js";
 import { t, T } from "./utils/index.js";
 export const info= {
 	href: "./",
@@ -11,6 +12,7 @@ import { simplePage } from "./layout/simplePage.html.js";
 import { h3 } from "./components/pageUtils.html.js";
 import { example } from "./components/example.html.js";
 import { code } from "./components/code.html.js";
+import { ireland } from "./components/ireland.html.js";
 /** @param {string} url */
 const fileURL= url=> new URL(url, import.meta.url);
 const references= {
@@ -97,6 +99,16 @@ export function page({ pkg, info }){
 			`)
 		),
 
+		el(h3, t`Getting Started`),
+		el("p").append(T`
+			To get builded dd<el> to be used immediately in your browser, you can download the latest version from:
+		`),
+		el(ireland, {
+			src: fileURL("./components/getLibraryUrl.js.js"),
+			exportName: "getLibraryUrl",
+			page_id,
+		}),
+
 		el(h3, t`How to Use This Documentation`),
 		el("p").append(T`
 			This guide will take you through dd<el>’s features step by step: