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

🔤 converter - convert also comments

This commit is contained in:
Jan Andrle 2025-03-14 21:02:48 +01:00
parent 2fcec0551c
commit 64566f17af
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
4 changed files with 30 additions and 19 deletions

View File

@ -164,7 +164,8 @@ function registerClientPart(page_id){
document.head.append(
el("script", {
src: "https://unpkg.com/@beforesemicolon/html-parser/dist/client.js",
// src: "https://unpkg.com/@beforesemicolon/html-parser/dist/client.js",
src: "https://cdn.jsdelivr.net/npm/@beforesemicolon/html-parser/dist/client.js",
type: "text/javascript",
charset: "utf-8",
defer: true

View File

@ -48,7 +48,8 @@ function convertHTMLtoDDE(html, options = {}) {
try {
const parsed = parse(html);
return nodeToDDE(parsed.children[0], options);
const content = parsed.children[0] || parsed.childNodes[0];
return !content ? "" : nodeToDDE(content, options);
} catch (error) {
console.error("Parsing error:", error);
return `// Error parsing HTML: ${error.message}`;
@ -64,10 +65,14 @@ const NODE_TYPE = {
// Convert a parsed node to dd<el> code
function nodeToDDE(node, options = {}, level = 0) {
const tab= options.indent === "-1" ? "\t" : " ".repeat(options.indent);
const indent = tab.repeat(level);
const nextIndent = tab.repeat(level + 1);
const { nodeType } = node;
// Handle text nodes
if (nodeType === NODE_TYPE.TEXT) {
const text = node.nodeValue;
const text = el("i", { innerText: node.nodeValue }).textContent;
if (!text.trim()) return null;
// Return as plain text or template string for longer text
@ -78,15 +83,15 @@ function nodeToDDE(node, options = {}, level = 0) {
// Handle comment nodes
if (nodeType === NODE_TYPE.COMMENT) {
return null; // TODO: Skip comments?
const text = node.nodeValue;
if (!text.trim()) return null;
return text.includes("\n")
? [ "/*", ...text.trim().split("\n").map(l=> tab+l), "*/" ]
: [ `// ${text}` ];
}
// 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";
@ -171,12 +176,14 @@ function nodeToDDE(node, options = {}, level = 0) {
// Process children
const children = [];
for (const child of node.childNodes) {
const childCode = nodeToDDE(child, options, level + 1);
if (childCode) children.push(childCode);
const childCode = nodeToDDE(child, options, level + 1);
if (!childCode) continue;
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}"`);
if(node.childNodes.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
@ -189,15 +196,16 @@ function nodeToDDE(node, options = {}, level = 0) {
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})`;
const chs= children.map(ch=>
Array.isArray(ch) ? ch.map(l=> nextIndent + l).join("\n") :
nextIndent + ch + ",");
result += `).append(\n${chs.join("\n")}\n${indent})`;
} else {
result += ")";
result += ")";
}
return result;

View File

@ -55,7 +55,10 @@ export function ireland({ src, exportName = "default", props = {} }) {
import(path)
.then(module => {
const component = module[exportName];
element.replaceWith(el(component, props, mark(id)));
const content= el(component, props, mark(id));
element.replaceWith(content);
content.querySelectorAll("input, textarea, button")
.forEach(el=> el.disabled= true);
})
.catch(console.error)
);

View File

@ -5,7 +5,6 @@ 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));