1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-01 19:55:53 +02:00

🔤 cdn

This commit is contained in:
Jan Andrle 2025-03-14 14:54:38 +01:00
parent 3823b66003
commit 19b0e4666e
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
6 changed files with 174 additions and 48 deletions

View File

@ -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
<!-- Example with IIFE build (creates a global DDE object) -->
<script src="https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/iife-with-signals.min.js"></script>
<script type="module">
<script>
const { el, S } = DDE;
// Your code here
</script>
<!-- Or with ES modules -->
<script type="module">
import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.min.js";
// Your code here
</script>
```

View File

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

View File

@ -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%;
}
}
`;

View File

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

View File

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

View File

@ -101,13 +101,33 @@ 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:
There are multiple ways to include dd<el> 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<el> 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)
// <script src="https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/iife-with-signals.min.js"></script>
const { el, on } = DDE;
`, language: "js", page_id }),
),
el(h3, t`How to Use This Documentation`),
el("p").append(T`