natxocc/sigpro
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

reconvert sigpro/ui

Browse Source
This commit is contained in:
Natxo
2026-05-12 23:57:32 +02:00
parent 1800b16940
commit 2a482f2340
26 changed files with 960 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
docs/convert.js
View File

@@ -1,6 +1,6 @@
// src/convert.js
import { $ } from "./sigpro.js";
function html2sigpro(h) {
function html2sigpro(h, advanced = false) {
const B = new Set(["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "defer", "disabled", "formnovalidate", "hidden", "ismap", "itemscope", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "selected", "truespeed"]), esc = (v) => v.replace(/"/g, "\\\""), bP = (el) => {
let a = [...el.attributes].map(({ name: n, value: v }) => /^on/i.test(n) ? `${n}: (e) => { ${v.replace(/\s+/g, " ").trim()} }` : B.has(n.toLowerCase()) && (!v || v == n) ? `${n}: true` : `${n}: "${esc(v)}"`);
return a.length ? `{ ${a.join(", ")} }` : "";
@@ -11,12 +11,48 @@ function html2sigpro(h) {
return t.trim() ? `${s}"${esc(t)}"` : "";
}
if (n.nodeType == 1) {
let t = n.tagName.toLowerCase(), p = bP(n), c = [...n.childNodes].map((i) => cN(i, d + 1)).filter(Boolean);
if (!c.length)
let t = n.tagName.toLowerCase();
let classes = [];
let otherAttrs = [];
if (advanced) {
const classAttribute = Array.from(n.attributes).find((attr) => attr.name === "class");
if (classAttribute) {
classes = classAttribute.value.trim().split(/\s+/).filter((c2) => c2);
}
otherAttrs = [...n.attributes].filter((attr) => attr.name !== "class");
}
let p = "";
if (advanced && classes.length > 0) {
const classChain = classes.map((c2) => `.${c2.replace(/-/g, "_")}`).join("");
if (otherAttrs.length > 0) {
const otherProps = otherAttrs.map(({ name: n2, value: v }) => /^on/i.test(n2) ? `${n2}: (e) => { ${v.replace(/\s+/g, " ").trim()} }` : B.has(n2.toLowerCase()) && (!v || v == n2) ? `${n2}: true` : `${n2}: "${esc(v)}"`);
p = `${classChain}({ ${otherProps.join(", ")} })`;
} else {
p = classChain;
}
} else {
p = bP(n);
}
let c = [...n.childNodes].map((i) => cN(i, d + 1)).filter(Boolean);
if (!c.length) {
if (advanced && classes.length > 0 && otherAttrs.length === 0) {
return `${s}${t}${p}`;
}
return `${s}${t}(${p})`;
}
if (c.length == 1 && !c[0].includes(`
`))
`)) {
if (advanced && classes.length > 0 && otherAttrs.length === 0 && !p.includes("{")) {
return `${s}${t}${p}(${c[0].trim()})`;
}
return `${s}${t}(${p ? p + ", " : ""}${c[0].trim()})`;
}
if (advanced && classes.length > 0 && otherAttrs.length === 0 && !p.includes("{")) {
return `${s}${t}${p}([
${c.join(`,
`)}
${s}])`;
}
return `${s}${t}(${p ? p + ", " : ""}[
${c.join(`,
`)}
@@ -34,13 +70,16 @@ var converter = () => {
const setInH = (v) => inH(v);
const outS = $("");
const setOutS = (v) => outS(v);
const advanced = $(false);
const setAdvanced = (v) => advanced(v);
const cnv = () => {
try {
setOutS(html2sigpro(inH()));
setOutS(html2sigpro(inH(), advanced()));
} catch (e) {
setOutS("Error: " + e.message);
}
}, txS = "width:100%;height:200px;padding:10px;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:14px;box-sizing:border-box;resize:vertical", btS = "padding:8px 16px;border:none;border-radius:4px;cursor:pointer;margin-right:8px;font-size:14px";
};
const txS = "width:100%;height:200px;padding:10px;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:14px;box-sizing:border-box;resize:vertical", btS = "padding:8px 16px;border:none;border-radius:4px;cursor:pointer;margin-right:8px;font-size:14px";
return div({ style: "max-width:900px;margin:20px auto;font-family:sans-serif" }, [
h1("HTML → SigPro"),
label({ style: "display:block;font-weight:700" }, "HTML:"),
@@ -53,12 +92,20 @@ var converter = () => {
cnv();
}
}),
div({ style: "margin:10px 0" }, [
div({ style: "margin:10px 0;display:flex;align-items:center;gap:10px" }, [
button({ style: btS + ";background:#3b82f6;color:#fff", onclick: cnv }, "Convert"),
button({ style: btS + ";background:#d1d5db", onclick: () => {
setInH("");
setOutS("");
} }, "Clear")
setAdvanced(false);
} }, "Clear"),
label({ style: "display:flex;align-items:center;gap:5px;cursor:pointer" }, [
input({ type: "checkbox", checked: advanced, onchange: (e) => {
setAdvanced(e.target.checked);
cnv();
} }),
span("Advanced (dot notation for classes)")
])
]),
div({ style: "display:flex;justify-content:space-between;align-items:center;margin-bottom:5px" }, [
span({ style: "font-weight:700" }, "Out:"),