1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-03 12:35:52 +02:00
This commit is contained in:
Jan Andrle 2025-03-14 20:43:30 +01:00
parent 7ed2856298
commit 2fcec0551c
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
7 changed files with 32 additions and 15 deletions

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

@ -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,
});
}

@ -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: "*",
});
}

@ -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, {
src: fileURL("./components/getLibraryUrl.js.js"),
exportName: "getLibraryUrl",
page_id,
}),
el(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:

@ -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 "../components/scrollTop.css.js";
/** @param {string} url */
const fileURL= url=> new URL(url, import.meta.url);
import { scrollTop } from "../components/scrollTop.html.js";
/** @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),
));
}

@ -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 }),