jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-07-29 07:00:16 +02:00
Code Packages Releases Activity

🔤 ui p14

Browse Source
This commit is contained in:
Jan Andrle
2025-03-15 12:08:57 +01:00
parent d54b6a65ef
commit 6d550a50ef
3 changed files with 13 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/p14-converter.html.js
View File

@@ -9,7 +9,6 @@ export const info= {
import { el } from "deka-dom-el";
import { simplePage } from "./layout/simplePage.html.js";
import { h3 } from "./components/pageUtils.html.js";
import { code } from "./components/code.html.js";
import { converter } from "./components/converter.html.js";
/** @param {import("./types.d.ts").PageAttrs} attrs */
@@ -21,55 +20,6 @@ export function page({ pkg, info }){
transform existing HTML markup into dd<el> JavaScript code, making it easier to adopt dd<el> in your projects.
`),
el("div", { className: "callout" }).append(
el("h4", t`Features`),
el("ul").append(
el("li", t`Convert any HTML snippet to dd<el> code instantly`),
el("li", t`Choose between different output formats (append vs arrays, style handling)`),
el("li", t`Try pre-built examples or paste your own HTML`),
el("li", t`Copy results to clipboard with one click`)
)
),
el("h3", t`How to Use the Converter`),
el("ol").append(
el("li").append(T`
${el("strong", "Paste your HTML")} into the input box or select one of the example templates
`),
el("li").append(T`
${el("strong", "Configure options")} to match your preferred coding style:
${el("ul").append(
el("li", t`Convert inline styles to JavaScript objects`),
el("li", t`Transform data-attributes/aria-attributes`),
)}
`),
el("li").append(T`
${el("strong", "Click convert")} to generate dd<el> code
`),
el("li").append(T`
${el("strong", "Copy the result")} to your project
`)
),
// The actual converter component
el(converter, { page_id }),
el("h3", t`How the Converter Works`),
el("p").append(T`
The converter uses a three-step process:
`),
el("ol").append(
el("li").append(T`
${el("strong", "Parsing:")} The HTML is parsed into a structured AST (Abstract Syntax Tree)
`),
el("li").append(T`
${el("strong", "Transformation:")} Each HTML node is converted to its dd<el> equivalent
`),
el("li").append(T`
${el("strong", "Code Generation:")} The final JavaScript code is properly formatted and indented
`)
),
el("div", { className: "warning" }).append(
el("p").append(T`
While the converter handles most basic HTML patterns, complex attributes or specialized elements might
@@ -77,7 +27,10 @@ export function page({ pkg, info }){
`)
),
el("h3", t`Next Steps`),
// The actual converter component
el(converter, { page_id }),
el(h3, t`Next Steps`),
el("p").append(T`
After converting your HTML to dd<el>, you might want to:
`),
@@ -86,14 +39,15 @@ export function page({ pkg, info }){
Add signal bindings for dynamic content (see ${el("a", { href: "p04-signals.html",
textContent: "Signals section" })})
`),
el("li").append(T`
Organize your components with scopes (see ${el("a", { href: "p05-scopes.html",
textContent: "Scopes section" })})
`),
el("li").append(T`
Add event handlers for interactivity (see ${el("a", { href: "p03-events.html",
textContent: "Events section" })})
`)
`),
el("li").append(T`
Organize your components with components (see ${el("a", { href:
"p02-elements.html#h-using-components-to-build-ui-fragments", textContent: "Components section" })}
and ${el("a", { href: "p05-scopes.html", textContent: "Scopes section" })})
`),
)
);
}