From a2b0223c4f97db042dc2b9651510b2f7b8a0be1c Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Fri, 14 Mar 2025 19:15:26 +0100 Subject: [PATCH] :abc: converter --- docs/components/converter.html.js | 174 ++++++++++++++ docs/components/converter.js.js | 375 ++++++++++++++++++++++++++++++ docs/components/ireland.html.js | 42 +++- docs/components/ireland.js.js | 1 + docs/p14-convertor.html.js | 99 ++++++++ 5 files changed, 687 insertions(+), 4 deletions(-) create mode 100644 docs/components/converter.html.js create mode 100644 docs/components/converter.js.js create mode 100644 docs/p14-convertor.html.js diff --git a/docs/components/converter.html.js b/docs/components/converter.html.js new file mode 100644 index 0000000..5afa57f --- /dev/null +++ b/docs/components/converter.html.js @@ -0,0 +1,174 @@ +import { styles } from "../ssr.js"; + +styles.css` +#html-to-dde-converter { + grid-column: full-main; + display: flex; + flex-direction: column; + gap: 1.5rem; + padding: 1.5rem; + border-radius: var(--border-radius); + background-color: var(--bg-sidebar); + box-shadow: var(--shadow); + border: 1px solid var(--border); +} + +#html-to-dde-converter h3 { + margin-top: 0; + color: var(--primary); +} + +#html-to-dde-converter .description { + color: var(--text-light); + font-size: 0.95rem; + margin-top: -1rem; +} + +#html-to-dde-converter .converter-form { + display: flex; + flex-direction: column; + gap: 1rem; +} + +#html-to-dde-converter .input-group, +#html-to-dde-converter .output-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#html-to-dde-converter [type="number"]{ + width: 3em; + font-variant-numeric: tabular-nums; + font-size: 1rem; +} + +#html-to-dde-converter label { + font-weight: 500; + display: flex; + justify-content: space-between; +} + +#html-to-dde-converter .options { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 0.5rem; +} + +#html-to-dde-converter .option-group { + display: flex; + align-items: center; + gap: 0.5rem; +} + +#html-to-dde-converter textarea { + font-family: var(--font-mono); + font-size: 0.9rem; + padding: 1rem; + border-radius: var(--border-radius); + border: 1px solid var(--border); + background-color: var(--bg); + color: var(--text); + min-height: 200px; + resize: vertical; +} + +#html-to-dde-converter textarea:focus { + outline: 2px solid var(--primary-light); + outline-offset: 1px; +} + +#html-to-dde-converter .button-group { + display: flex; + gap: 0.5rem; + justify-content: space-between; + align-items: center; +} + +#html-to-dde-converter button { + padding: 0.5rem 1rem; + border-radius: var(--border-radius); + border: none; + background-color: var(--primary); + color: var(--button-text); + font-weight: 500; + cursor: pointer; + transition: background-color 0.2s ease; +} + +#html-to-dde-converter button:hover { + background-color: var(--primary-dark); +} + +#html-to-dde-converter button.secondary { + background-color: transparent; + border: 1px solid var(--border); + color: var(--text); +} + +#html-to-dde-converter button.secondary:hover { + background-color: var(--bg); + border-color: var(--primary); +} + +#html-to-dde-converter .copy-button { + background-color: var(--secondary); +} + +#html-to-dde-converter .copy-button:hover { + background-color: var(--secondary-dark); +} + +#html-to-dde-converter .status { + font-size: 0.9rem; + color: var(--text-light); +} + +#html-to-dde-converter .error { + color: hsl(0, 100%, 60%); + font-size: 0.9rem; + margin-top: 0.5rem; +} + +/* Sample HTML examples list */ +#html-to-dde-converter .examples-list { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 0.5rem; +} + +#html-to-dde-converter .example-button { + font-size: 0.85rem; + padding: 0.25rem 0.5rem; +} +`; + +import { ireland } from "./ireland.html.js"; +import { el } from "deka-dom-el"; +const fileURL= url=> new URL(url, import.meta.url); + +export function converter({ page_id }){ + registerClientPart(page_id); + return el(ireland, { + src: fileURL("./converter.js.js"), + exportName: "converter", + page_id, + }); +} + +let is_registered= {}; +/** @param {string} page_id */ +function registerClientPart(page_id){ + if(is_registered[page_id]) return; + + document.head.append( + el("script", { + src: "https://unpkg.com/@beforesemicolon/html-parser/dist/client.js", + type: "text/javascript", + charset: "utf-8", + defer: true + }), + ); + is_registered[page_id]= true; +} diff --git a/docs/components/converter.js.js b/docs/components/converter.js.js new file mode 100644 index 0000000..a41654f --- /dev/null +++ b/docs/components/converter.js.js @@ -0,0 +1,375 @@ +import { el, on } from "deka-dom-el"; +import { S } from "deka-dom-el/signals"; +const { parse }= globalThis.BFS || { parse(){ return { children: [ "not implemented" ] } } }; +// Example HTML snippets +const examples = [ +{ + name: "Simple Component", + html: `
+ Card Image +

Card Title

+

This is a simple card component

+ +
` +}, +{ + name: "Navigation", + html: `` +}, +{ + name: "Form", + html: `
+
+ + +
+
+ + +
+
+ + +
+ +
` +} +]; + +// Convert HTML to dd code +function convertHTMLtoDDE(html, options = {}) { + + try { + const parsed = parse(html); + return nodeToDDE(parsed.children[0], options); + } catch (error) { + console.error("Parsing error:", error); + return `// Error parsing HTML: ${error.message}`; + } +} + +// Node types based on standard DOM nodeType values +const NODE_TYPE = { + ELEMENT: 1, // Standard element node (equivalent to node.type === "element") + TEXT: 3, // Text node (equivalent to node.type === "text") + COMMENT: 8 // Comment node (equivalent to node.type === "comment") +}; + +// Convert a parsed node to dd code +function nodeToDDE(node, options = {}, level = 0) { + const { nodeType } = node; + // Handle text nodes + if (nodeType === NODE_TYPE.TEXT) { + const text = node.nodeValue; + if (!text.trim()) return null; + + // Return as plain text or template string for longer text + return text.includes("\n") || text.includes('"') + ? `\`${text}\`` + : `"${text}"`; + } + + // Handle comment nodes + if (nodeType === NODE_TYPE.COMMENT) { + return null; // TODO: Skip comments? + } + + // For element nodes + if (nodeType === NODE_TYPE.ELEMENT) { + const tab= options.indent === "-1" ? "\t" : " ".repeat(options.indent); + const indent = tab.repeat(level); + const nextIndent = tab.repeat(level + 1); + + // Special case for SVG elements + const isNS = node.tagName === "svg"; + const elFunction = isNS ? "elNS" : "el"; + + // Get tag name + let tagStr = `"${node.tagName}"`; + + // Process attributes + const attrs = []; + const sets = { + aria: {}, + data: {}, + } + + for (const { name: key, value } of node.attributes) { + // Handle class attribute + if (key === "class") { + attrs.push(`className: "${value}"`); + continue; + } + + // Handle style attribute + if (key === "style") { + if (options.styleAsObject) { + // Convert inline style to object + const styleObj = {}; + value.split(";").forEach(part => { + const [propRaw, valueRaw] = part.split(":"); + if (propRaw && valueRaw) { + const prop = propRaw.trim(); + const propCamel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase()); + styleObj[propCamel] = valueRaw.trim(); + } + }); + + if (Object.keys(styleObj).length > 0) { + const styleStr = JSON.stringify(styleObj).replace(/"([^"]+)":/g, "$1:"); + attrs.push(`style: ${styleStr}`); + } + } else { + // Keep as string + attrs.push(`style: "${value}"`); + } + continue; + } + + // Handle boolean attributes + if (value === "" || value === key) { + attrs.push(`${key}: true`); + continue; + } + + // Handle data/aria attributes + if (key.startsWith("data-") || key.startsWith("aria-")) { + const keyName = key.startsWith("aria-") ? "aria" : "data"; + const keyCamel = key.slice(keyName.length + 1).replace(/-([a-z])/g, (_, c) => c.toUpperCase()); + sets[keyName][keyCamel] = value; + continue; + } + + // Regular attributes + const keyRegular = key==="for" + ? "htmlFor" + : key.startsWith("on") + ? `"=${key}"` + : key.replace(/-([a-z])/g, (_, c) => c.toUpperCase()); + attrs.push(`${keyRegular}: "${value}"`); + } + + // Process sets + for (const [name, set] of Object.entries(sets)) { + if(options.dataAttrsAsCamel) + for (const [key, value] of Object.entries(set)) + attrs.push(`${name}${key[0].toUpperCase() + key.substring(1)}: "${value}"`); + else { + const setStr= Object.entries(set).map(([key, value]) => `${key}: "${value}"`).join(","); + if (setStr !== "") + attrs.push(`${name}set: { ${setStr} }`); + } + } + + // Process children + const children = []; + for (const child of node.childNodes) { + const childCode = nodeToDDE(child, options, level + 1); + if (childCode) children.push(childCode); + } + if(children.length===1 && node.childNodes[0].nodeType===NODE_TYPE.TEXT){ + const textContent= children.pop().slice(1, -1); + attrs.unshift(`textContent: "${textContent}"`); + } + + // Build the element creation code + let result = `${elFunction}("${node.tagName.toLowerCase()}"`; + + // Add attributes if any + if (attrs.length > 0) { + const tooLong= attrs.join(``).length+result.length > 55; + if(options.expaned || tooLong || attrs.length > 3) + result += `, {\n${nextIndent}${attrs.join(`,\n${nextIndent}`)},\n${indent}}`; + else + result += `, { ${attrs.join(", ")} }`; + } else if (children.length > 0) { + result += ", null"; + } + + // Add children if any + if (children.length > 0) { + result += `).append(\n${nextIndent}${children.join(`,\n${nextIndent}`)},\n${indent})`; + } else { + result += ")"; + } + + return result; + } + + return null; +} + +export function converter() { + // State for the converter + const htmlInput = S(examples[0].html); + const error = S(""); + + const status = S(""); + const showStatus= msg => { + status.set(msg); + // Clear status after 3 seconds + setTimeout(() => status.set(""), 3000); + }; + + // Options state + const options = { + styleAsObject: { + title: "Convert style to object", + value: S(true), + }, + dataAttrsAsCamel: { + title: "dataKey/ariaKey (or dataset/ariaset)", + value: S(true), + }, + indent: { + title: "Indentation (-1 for tabs)", + value: S("-1"), + type: "number", + }, + expaned: { + title: "Force multiline", + value: S(false), + } + }; + const getOptions = ()=> Object.fromEntries(Object.entries(options) + .map(([key, option]) => ([ + key, + option.value.get() + ])) + ); + + // Update the dd output when input or options change + const ddeOutput = S(() => { + try { + const result = convertHTMLtoDDE(htmlInput.get(), getOptions()); + error.set(""); + return result; + } catch (err) { + error.set(`Error: ${err.message}`); + return ""; + } + }); + + // Event handlers + const onConvert = on("submit", e => { + e.preventDefault(); + htmlInput.set(htmlInput.get(), true); + showStatus("Converted!"); + }); + + const onCopy = on("click", async () => { + if (!ddeOutput.get()) return; + + try { + await navigator.clipboard.writeText(ddeOutput.get()); + showStatus("Copied to clipboard!"); + } catch (err) { + error.set(`Could not copy: ${err.message}`); + } + }); + const onClear = on("click", () => { + htmlInput.set(""); + showStatus("Input cleared"); + }); + const onExampleLoad = (example) => on("click", () => { + htmlInput.set(example.html); + showStatus(`Loaded "${example.name}" example`); + }); + + const optionsElements = () => Object.entries(options) + .map(([key, option]) => + el("label", { className: "option-group" }).append( + option.type==="number" + ? el("input", { + type: option.type || "checkbox", + name: key, + value: option.value.get(), + max: 10, + }, on("change", e => option.value.set(e.target.value))) + : el("input", { + type: option.type || "checkbox", + name: key, + checked: option.value.get(), + }, on("change", e => option.value.set(e.target.checked))), + option.title, + ) + ); + const exampleButtons = examples.map(example => + el("button", { + type: "button", + className: "secondary example-button" + }, onExampleLoad(example)).append(example.name) + ); + + return el("div", { id: "html-to-dde-converter" }).append( + el("h3", "HTML to dd Converter"), + el("p", { className: "description" }).append( + "Convert HTML markup to dd JavaScript code. Paste your HTML below or choose from an example." + ), + + el("form", { className: "converter-form" }, onConvert).append( + el("div", { className: "options" }).append(...optionsElements()), + + el("div", { className: "examples-list" }).append( + el("label", "Examples: "), + ...exampleButtons + ), + + el("div", { className: "editor-container" }).append( + el("div", { className: "input-group" }).append( + el("label", { htmlFor: "html-input" }).append( + "HTML Input", + el("div", { className: "button-group" }).append( + el("button", { + type: "button", + className: "secondary", + title: "Clear input" + }, onClear).append("Clear") + ) + ), + el("textarea", { + id: "html-input", + spellcheck: false, + value: htmlInput, + placeholder: "Paste your HTML here or choose an example", + oninput: e => htmlInput.set(e.target.value) + }) + ), + + el("div", { className: "output-group" }).append( + el("label", { htmlFor: "dde-output" }).append( + "dd Output", + el("div", { className: "button-group" }).append( + el("button", { + type: "button", + className: "copy-button", + title: "Copy to clipboard", + disabled: S(() => !ddeOutput.get()) + }, onCopy).append("Copy") + ) + ), + el("textarea", { + id: "dde-output", + readonly: true, + spellcheck: false, + placeholder: "The converted dd code will appear here", + value: S(() => ddeOutput.get() || "// Convert HTML to see results here") + }) + ) + ), + + el("div", { className: "button-group" }).append( + S.el(error, error => !error ? el() : el("div", { className: "error" }).append(error)), + el("div", { className: "status", textContent: status }), + el("button", { type: "submit" }).append("Convert") + ) + ) + ); +} diff --git a/docs/components/ireland.html.js b/docs/components/ireland.html.js index 8387664..f6bcf6b 100644 --- a/docs/components/ireland.html.js +++ b/docs/components/ireland.html.js @@ -1,3 +1,33 @@ +import { styles } from "../ssr.js"; +styles.css` +[data-dde-mark] { + opacity: .5; + filter: grayscale(); + + @media (prefers-reduced-motion: no-preference) { + animation: fadein 2s infinite ease forwards;; + } + + position: relative; + &::after { + content: "Loading Ireland…"; + background-color: rgba(0, 0, 0, .5); + color: white; + font-weight: bold; + border-radius: 5px; + padding: 5px 10px; + position: absolute; + top: 3%; + left: 50%; + transform: translateX(-50%); + } +} +@keyframes fadein { + from { opacity: .5; } + to { opacity: .85; } +} +`; + import { el, queue } from "deka-dom-el"; import { addEventListener, registerClientFile } from "../ssr.js"; import { relative } from "node:path"; @@ -21,10 +51,14 @@ export function ireland({ src, exportName = "default", props = {} }) { const path= "./"+relative(dir, src.pathname); const id = "ireland-" + generateComponentId(src); const element = el.mark({ type: "later", name: ireland.name }); - queue(import(path).then(module => { - const component = module[exportName]; - element.replaceWith(el(component, props, mark(id))); - })); + queue( + import(path) + .then(module => { + const component = module[exportName]; + element.replaceWith(el(component, props, mark(id))); + }) + .catch(console.error) + ); if(!componentsRegistry.size) addEventListener("oneachrender", registerClientPart); diff --git a/docs/components/ireland.js.js b/docs/components/ireland.js.js index b552395..7dbd39d 100644 --- a/docs/components/ireland.js.js +++ b/docs/components/ireland.js.js @@ -5,6 +5,7 @@ export function loadIrelands(store) { document.body.querySelectorAll("[data-dde-mark]").forEach(ireland => { const { ddeMark }= ireland.dataset; if(!store.has(ddeMark)) return; + ireland.querySelectorAll("input").forEach(input => input.disabled = true); const { path, exportName, props }= store.get(ddeMark); import("./"+path).then(module => { ireland.replaceWith(el(module[exportName], props)); diff --git a/docs/p14-convertor.html.js b/docs/p14-convertor.html.js new file mode 100644 index 0000000..cda9d6f --- /dev/null +++ b/docs/p14-convertor.html.js @@ -0,0 +1,99 @@ +import "./components/converter.html.js"; +import { T, t } from "./utils/index.js"; +export const info= { + title: t`Convert to dd`, + fullTitle: t`HTML to dd Converter`, + description: t`Convert your HTML markup to dd JavaScript code with our interactive tool`, +}; + +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 */ +export function page({ pkg, info }){ + const page_id= info.id; + return el(simplePage, { info, pkg }).append( + el("p").append(T` + Transitioning from HTML to dd is simple with our interactive converter. This tool helps you quickly + transform existing HTML markup into dd JavaScript code, making it easier to adopt dd in your projects. + `), + + el("div", { className: "callout" }).append( + el("h4", t`Features`), + el("ul").append( + el("li", t`Convert any HTML snippet to dd 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 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 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 + need manual adjustments. Always review the generated code before using it in production. + `) + ), + + el("h3", t`Next Steps`), + el("p").append(T` + After converting your HTML to dd, you might want to: + `), + el("ul").append( + el("li").append(T` + 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" })}) + `) + ) + ); +}