⚡ 🔤

README.md

@@ -95,7 +95,8 @@ into existing projects.
 
 #### 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.
+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
 <!-- Example with IIFE build (creates a global DDE object) -->

docs/components/getLibraryUrl.html.js

@@ -70,3 +70,14 @@ styles.css`
 	}
 }
 `;
+
+import { el } from "deka-dom-el";
+import { ireland } from "./ireland.html.js";
+
+export function getLibraryUrl({ page_id }){
+	return el(ireland, {
+		src: new URL("./getLibraryUrl.js.js", import.meta.url),
+		exportName: "getLibraryUrl",
+		page_id,
+	});
+}

docs/components/scrollTop.html.js

@@ -37,3 +37,14 @@ styles.css`
 	}
 }
 `;
+
+import { el } from "deka-dom-el";
+import { ireland } from "./ireland.html.js";
+
+export function scrollTop(){
+	return el(ireland, {
+		src: new URL("./scrollTop.js.js", import.meta.url),
+		exportName: "scrollTop",
+		page_id: "*",
+	});
+}

docs/index.html.js

@@ -1,4 +1,4 @@
-import "./components/getLibraryUrl.css.js";
+import "./components/getLibraryUrl.html.js";
 import { t, T } from "./utils/index.js";
 export const info= {
 	href: "./",
@@ -12,7 +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";
+import { getLibraryUrl } from "./components/getLibraryUrl.html.js";
 /** @param {string} url */
 const fileURL= url=> new URL(url, import.meta.url);
 const references= {
@@ -110,11 +110,7 @@ export function page({ pkg, info }){
 		el("p").append(T`
 			Use the interactive selector below to choose your preferred format:
 		`),
-		el(ireland, {
+		el(getLibraryUrl, { page_id }),
-			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<el> in your project like this:

docs/layout/simplePage.html.js

@@ -3,10 +3,7 @@ import { el, simulateSlots } from "deka-dom-el";
 
 import { header } from "./head.html.js";
 import { prevNext } from "../components/pageUtils.html.js";
-import { ireland } from "../components/ireland.html.js";
+import { scrollTop } from "../components/scrollTop.html.js";
-import "../components/scrollTop.css.js";
-/** @param {string} url */
-const fileURL= url=> new URL(url, import.meta.url);
 
 /** @param {Pick<import("../types.d.ts").PageAttrs, "pkg" | "info">} attrs */
 export function simplePage({ pkg, info }){
@@ -33,6 +30,6 @@ export function simplePage({ pkg, info }){
 		),
 
 		// Scroll to top button
-		el(ireland, { src: fileURL("../components/scrollTop.js.js"), exportName: "scrollTop" })
+		el(scrollTop),
 	));
 }

docs/p03-events.html.js

@@ -165,9 +165,10 @@ export function page({ pkg, info }){
 
 				el("dt", t`on.disconnected(callback)`),
 				el("dd", t`Fires when the element is removed from the DOM`),
-				
+
 				el("dt", t`on.host(callback, host?)`),
-				el("dd", t`Fires when the host element is "ready" and allows applying properties based on the fully built template`),
+				el("dd", t`Fires when the host element is "ready" and allows applying properties based on the fully
+					built template`),
 			)
 		),
 		el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }),