@thyn/core 0.0.343 → 0.0.346

package/dist/plugin/index.js

@@ -0,0 +1,1009 @@
+import * as acorn from "acorn";
+import * as acornwalk from "acorn-walk";
+import MagicString from "magic-string";
+import postcss from 'postcss';
+import selectorParser from 'postcss-selector-parser';
+import { parseHTML } from "./html-parser.js";
+import { escapeHtml, escapeTemplateLiteral, extractParts, splitScript } from "./utils.js";
+const esbuildModule = import("esbuild");
+async function scopeSelectors(css, scopeId) {
+    const result = await postcss([
+        {
+            postcssPlugin: 'postcss-scope-thyn',
+            Rule(rule) {
+                if (!rule.selector)
+                    return;
+                const processor = selectorParser((selectors) => {
+                    selectors.walkClasses(() => { }); // just to trigger full parse
+                    selectors.each((sel) => {
+                        sel.append(selectorParser.className({ value: scopeId }));
+                    });
+                });
+                rule.selector = processor.processSync(rule.selector);
+            },
+        },
+    ]).process(css, { from: undefined });
+    return result.css;
+}
+const DIRECTIVES = ["#for", "#if", "#then", "#else", "#else-if", "#props"];
+function isReactiveExpression(expr) {
+    const ast = acorn.parseExpressionAt(expr, 0, { ecmaVersion: 2022 });
+    if (["ArrowFunctionExpression", "FunctionExpression"].includes(ast.type)) {
+        return false;
+    }
+    let isReactive = false;
+    acornwalk.simple(ast, {
+        CallExpression(node) {
+            isReactive = true;
+        },
+    });
+    return isReactive;
+}
+const DOUBLE_QUOTE = "__THYN__DOUBLE_QUOTE__";
+const PLACEHOLDER_CHAR = "\uE000";
+function parseAttributes(el) {
+    const result = {};
+    for (const attr of el.attributes) {
+        let { name, value } = attr;
+        name = name.replace(/__thyn_attribute_(:?[a-z-]+)/g, (match, kebabName) => {
+            const camelCase = kebabName.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+            return camelCase;
+        });
+        if (name.startsWith(":")) {
+            if (name.startsWith(":on")) {
+                let pipes;
+                [name, ...pipes] = name.split(".");
+                for (const pipe of pipes) {
+                    if (pipe === "stop") {
+                        value = `(e) => { e.stopPropagation(); (${value})(e); }`;
+                    }
+                    else if (pipe === "prevent") {
+                        value = `(e) => { e.preventDefault(); (${value})(e); }`;
+                    }
+                    else if (pipe === "enter") {
+                        value = `(e) => { if (e.key === 'Enter') (${value})(e); }`;
+                    }
+                    else if (pipe === "ctrl") {
+                        value = `(e) => { if (e.ctrlKey) (${value})(e); }`;
+                    }
+                    else if (pipe === "meta") {
+                        value = `(e) => { if (e.metaKey) (${value})(e); }`;
+                    }
+                    else if (pipe === "alt") {
+                        value = `(e) => { if (e.altKey) (${value})(e); }`;
+                    }
+                    else if (pipe === "shift") {
+                        value = `(e) => { if (e.shiftKey) (${value})(e); }`;
+                    }
+                    else {
+                        throw new Error(`Unknown event modifier: ${pipe}`);
+                    }
+                }
+            }
+            const reactive = value && isReactiveExpression(value);
+            if (reactive && name !== ":#for" && name !== ":#if" &&
+                name !== ":#else-if" && name !== ":#else" && name !== ":#props") {
+                value = `() => ${value}`;
+                result[name.slice(1)] = { raw: value.replace(new RegExp(DOUBLE_QUOTE, "g"), '"') };
+            }
+            else {
+                result[name.slice(1)] = { raw: value.replace(new RegExp(DOUBLE_QUOTE, "g"), '"') };
+            }
+        }
+        else {
+            result[name] = { quoted: value };
+        }
+    }
+    return result;
+}
+function parseTextContent(text) {
+    text = text.trim();
+    // First, handle escaped braces by temporarily replacing them
+    const escapedOpenBrace = '\u0001'; // Use control character as placeholder
+    const escapedCloseBrace = '\u0002';
+    // Replace escaped braces with placeholders
+    text = text.replace(/\\(\{\{|\}\})/g, (match, braces) => {
+        return braces === '{{' ? escapedOpenBrace : escapedCloseBrace;
+    });
+    const regex = /\{\{([^}]+)\}\}/g;
+    let lastIndex = 0;
+    let match;
+    const parts = [];
+    let hasReactive = false;
+    let hasInterpolations = false;
+    while ((match = regex.exec(text)) !== null) {
+        const staticText = text.slice(lastIndex, match.index);
+        if (staticText) {
+            // Restore escaped braces in static text
+            const restoredText = staticText
+                .replace(new RegExp(escapedOpenBrace, 'g'), '{{')
+                .replace(new RegExp(escapedCloseBrace, 'g'), '}}');
+            parts.push(restoredText);
+        }
+        const expr = match[1].trim();
+        const isReactive = isReactiveExpression(expr);
+        hasReactive || (hasReactive = isReactive);
+        hasInterpolations = true;
+        parts.push({ expr, isReactive });
+        lastIndex = regex.lastIndex;
+    }
+    if (lastIndex < text.length) {
+        // Restore escaped braces in remaining text
+        const remainingText = text.slice(lastIndex)
+            .replace(new RegExp(escapedOpenBrace, 'g'), '{{')
+            .replace(new RegExp(escapedCloseBrace, 'g'), '}}');
+        parts.push(remainingText);
+    }
+    if (!hasInterpolations) {
+        // Restore escaped braces if no interpolations
+        const finalText = text
+            .replace(new RegExp(escapedOpenBrace, 'g'), '{{')
+            .replace(new RegExp(escapedCloseBrace, 'g'), '}}');
+        return {
+            code: `document.createTextNode(\`${escapeTemplateLiteral(finalText)}\`)`,
+            hasReactive: false,
+        };
+    }
+    const interpolated = parts.map((part) => {
+        if (typeof part === "string") {
+            return escapeTemplateLiteral(part);
+        }
+        return `$\{${part.expr}\}`;
+    }).join("");
+    if (hasReactive) {
+        let code = `__THYN__CORE__.createReactiveTextNode(() => \`${interpolated}\`)`;
+        if (parts.length === 1) {
+            const ast = acorn.parseExpressionAt(interpolated.slice(2, -1), 0, {
+                ecmaVersion: 2022,
+            });
+            if (ast.type === "CallExpression" && !ast.arguments.length) {
+                code = `__THYN__CORE__.createReactiveTextNode(${interpolated.slice(2, -1).replace(/\(\s*\)\s*$/, "")})`;
+            }
+        }
+        return {
+            code,
+            hasReactive,
+        };
+    }
+    if (parts.length === 1) {
+        return {
+            code: `document.createTextNode(${interpolated.slice(2, -1)})`,
+            hasReactive,
+        };
+    }
+    return {
+        code: `document.createTextNode(\`${interpolated}\`)`,
+        hasReactive,
+    };
+}
+function generateTextContentTemplate(text, parent, prevSibling) {
+    text = text.trim();
+    // First, handle escaped braces by temporarily replacing them
+    const escapedOpenBrace = '\u0001'; // Use control character as placeholder
+    const escapedCloseBrace = '\u0002';
+    // Replace escaped braces with placeholders
+    text = text.replace(/\\(\{\{|\}\})/g, (match, braces) => {
+        return braces === '{{' ? escapedOpenBrace : escapedCloseBrace;
+    });
+    const regex = /\{\{([^}]+)\}\}/g;
+    let lastIndex = 0;
+    let match;
+    const parts = [];
+    let hasReactive = false;
+    let hasInterpolations = false;
+    while ((match = regex.exec(text)) !== null) {
+        const staticText = text.slice(lastIndex, match.index);
+        if (staticText) {
+            // Restore escaped braces in static text
+            const restoredText = staticText
+                .replace(new RegExp(escapedOpenBrace, 'g'), '{{')
+                .replace(new RegExp(escapedCloseBrace, 'g'), '}}');
+            parts.push(restoredText);
+        }
+        const expr = match[1].trim();
+        const isReactive = isReactiveExpression(expr);
+        hasReactive || (hasReactive = isReactive);
+        hasInterpolations = true;
+        parts.push({ expr, isReactive });
+        lastIndex = regex.lastIndex;
+    }
+    if (lastIndex < text.length) {
+        // Restore escaped braces in remaining text
+        const remainingText = text.slice(lastIndex)
+            .replace(new RegExp(escapedOpenBrace, 'g'), '{{')
+            .replace(new RegExp(escapedCloseBrace, 'g'), '}}');
+        parts.push(remainingText);
+    }
+    const root = makeVariable();
+    if (!hasInterpolations) {
+        // Restore escaped braces if no interpolations
+        const finalText = text
+            .replace(new RegExp(escapedOpenBrace, 'g'), '{{')
+            .replace(new RegExp(escapedCloseBrace, 'g'), '}}');
+        return {
+            static: escapeHtml(finalText),
+            dynamic: "",
+            root: "",
+            staticRoot: root,
+        };
+    }
+    const interpolated = parts.map((part) => {
+        if (typeof part === "string") {
+            return escapeTemplateLiteral(part);
+        }
+        return `$\{${part.expr}\}`;
+    }).join("");
+    const textNode = prevSibling
+        ? `${prevSibling}.nextSibling`
+        : `${parent}.firstChild`;
+    if (hasReactive) {
+        let fn = `\`${interpolated}\``;
+        if (parts.length === 1) {
+            const ast = acorn.parseExpressionAt(interpolated.slice(2, -1), 0, {
+                ecmaVersion: 2022,
+            });
+            if (ast.type === "CallExpression" && !ast.arguments.length) {
+                fn = interpolated.slice(2, -1).replace(/\(\s*\)\s*$/, "") + "()";
+            }
+            else {
+                fn = interpolated.slice(2, -1);
+            }
+        }
+        // Use a space as placeholder for the text node
+        const stat = PLACEHOLDER_CHAR;
+        const dynamic = `__THYN__CORE__.staticEffect(() => {
+      ${textNode}.nodeValue = ${fn};
+    });\n`;
+        return {
+            static: stat,
+            dynamic,
+            root: "",
+            staticRoot: root,
+        };
+    }
+    if (parts.length === 1) {
+        return {
+            dynamic: `${textNode}.nodeValue = ${interpolated.slice(2, -1)};\n`,
+            static: PLACEHOLDER_CHAR,
+            root: "",
+            staticRoot: root,
+        };
+    }
+    return {
+        dynamic: `${textNode}.nodeValue = \`${interpolated}\`;\n`,
+        static: PLACEHOLDER_CHAR,
+        root: "",
+        staticRoot: root,
+    };
+}
+const NAMESPACE = "__THYN__";
+const HOIST_PREFIX = `${NAMESPACE}HOIST__`;
+function cloneIfNeeded(code) {
+    if (code.startsWith(HOIST_PREFIX)) {
+        return `${code}.cloneNode()`;
+    }
+    return code;
+}
+function createHoisting(code, hoist) {
+    const existing = hoist.find((h) => h.endsWith(` = ${code};`));
+    if (existing) {
+        return existing.slice(6, existing.indexOf(" = "));
+    }
+    const id = `${HOIST_PREFIX}${hoist.length}`;
+    hoist.push(`const ${id} = ${code};`);
+    return id;
+}
+function createObjectCode(obj) {
+    const keys = Object.keys(obj);
+    if (!keys.length)
+        return "null";
+    return `{${keys.map((k) => `'${k}': ${obj[k]}`).join(",")}}`;
+}
+let varId = 0;
+function makeVariable() {
+    return `${NAMESPACE}${varId++}`;
+}
+function makeTemplate(node, parent, prevSibling) {
+    if (node.nodeType === 3) {
+        const text = node.textContent;
+        return generateTextContentTemplate(text, parent, prevSibling);
+    }
+    const tag = node.tagName.toLowerCase();
+    const attrs = parseAttributes(node);
+    let statRoot = makeVariable();
+    let template = `<${tag}`;
+    if (!parent) {
+        statRoot = "__THYN__template";
+    }
+    let code = "";
+    let dynRoot = makeVariable();
+    const childNodes = Array.from(node.childNodes).filter((n) => n.nodeType !== 3 || n.textContent.trim());
+    const children = [];
+    let ps = undefined;
+    for (let i = 0; i < childNodes.length; i++) {
+        const cn = childNodes[i];
+        const ch = makeTemplate(cn, dynRoot, ps);
+        children.push(ch);
+        ps = ch.root || `${dynRoot}.childNodes[${i}]`;
+    }
+    if (!parent) {
+        code = `const ${dynRoot} = __THYN__template_generate();\n`;
+    }
+    else if (!prevSibling) {
+        code = `const ${dynRoot} = ${parent}.firstChild;\n`;
+    }
+    else {
+        code = `const ${dynRoot} = ${prevSibling}.nextSibling;\n`;
+    }
+    for (const [key, val] of Object.entries(attrs)) {
+        if (DIRECTIVES.includes(key))
+            continue;
+        if ("quoted" in val) {
+            if (key === "class") {
+                template += ` class="${escapeHtml(val.quoted)}"`;
+            }
+            else {
+                template += ` ${key}="${escapeHtml(val.quoted)}"`;
+            }
+        }
+    }
+    template += ">";
+    for (const [key, val] of Object.entries(attrs)) {
+        if (DIRECTIVES.includes(key))
+            continue;
+        if (!("raw" in val))
+            continue;
+        if (key.startsWith("on")) {
+            code += `${dynRoot}.${key} = ${val.raw};\n`;
+            continue;
+        }
+        const reactive = isReactiveExpression(val.raw.replace(/^\(\) => /, ""));
+        if (reactive) {
+            val.raw = val.raw.replace(/^\(\) => /, "");
+            if (key === "class") {
+                const prev = makeVariable();
+                code += `let ${prev};\n`;
+                code += `__THYN__CORE__.staticEffect(() => {
+            const val = ${val.raw};
+            if (val !== ${prev}) {
+              if (${prev} = val) ${dynRoot}.className = val;
+              else ${dynRoot}.removeAttribute("class");
+            }
+          });\n`;
+                continue;
+            }
+            if (key.includes("-")) {
+                const ran = makeVariable();
+                code += `let ${ran};\n`;
+                code += `__THYN__CORE__.staticEffect(() => {
+            const val = ${val.raw};
+            if (val === undefined) {
+              if (${ran} && ${dynRoot}.hasAttribute("${key}")) {
+                ${dynRoot}.removeAttribute("${key}");
+              }
+            } else {
+              ${dynRoot}.setAttribute("${key}", val);\n
+            }
+            ${ran} = true;
+          });\n`;
+            }
+            else {
+                const ran = makeVariable();
+                code += `let ${ran} = false;\n`;
+                code += `__THYN__CORE__.staticEffect(() => {
+          const val = ${val.raw};
+          if (val || ${ran}) {
+            ${dynRoot}.${key} = val;\n
+          }
+          ${ran} = true;
+        });\n`;
+            }
+            continue;
+        }
+        if (key === "class") {
+            code += `${dynRoot}.className = ${val.raw};\n`;
+            continue;
+        }
+        if (key.includes("-")) {
+            code += `${dynRoot}.setAttribute("${key}", ${val.raw});\n`;
+        }
+        else {
+            code += `${dynRoot}.${key} = ${val.raw};\n`;
+        }
+    }
+    if (children.length) {
+        for (let i = 0; i < children.length; i++) {
+            const ch = children[i];
+            if (ch.static) {
+                template += ch.static;
+            }
+            if (ch.dynamic) {
+                code += ch.dynamic;
+            }
+        }
+    }
+    template += `</${tag}>`;
+    return {
+        root: dynRoot,
+        staticRoot: statRoot,
+        static: template,
+        dynamic: code,
+    };
+}
+function walkConditionChain(nodes, i) {
+    const chain = [];
+    for (; i < nodes.length; i++) {
+        const node = nodes[i];
+        if (node.nodeType !== 1)
+            continue;
+        const el = node;
+        const attrs = parseAttributes(el);
+        if ("#if" in attrs || "#else-if" in attrs || "#else" in attrs) {
+            chain.push({ node, attrs });
+        }
+        else {
+            break;
+        }
+        if ("#else" in attrs)
+            break;
+    }
+    return chain;
+}
+function walk(node, hoist, siblings, index) {
+    if (node.nodeType === 3) {
+        const text = node.textContent;
+        if (!text.trim())
+            return null;
+        const result = parseTextContent(text);
+        return {
+            code: result.code,
+            isComponent: false,
+            hasReactive: result.hasReactive,
+        };
+    }
+    if (node.nodeType !== 1)
+        return null;
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    let isComponent = el.hasAttribute("__thyn_component");
+    const makeArg = isComponent
+        ? el.getAttribute("__thyn_component")
+        : `"${tag}"`;
+    el.removeAttribute("__thyn_component");
+    const attrs = parseAttributes(el);
+    if (isComponent)
+        el.setAttribute("__thyn_component", makeArg);
+    const children = [];
+    let skip = 0;
+    for (let i = 0; i < node.childNodes.length; i++) {
+        const result = walk(node.childNodes[i], hoist, node.childNodes, i);
+        if (result) {
+            if (skip) {
+                skip--;
+                continue;
+            }
+            children.push(result);
+            if ("skip" in result) {
+                skip = result.skip;
+            }
+        }
+    }
+    const hasReactiveChildren = children.some((c) => c.hasReactive);
+    const hasComponentChildren = children.some((c) => c.isComponent);
+    let hasReactive = hasReactiveChildren || hasComponentChildren;
+    if (tag === "slot") {
+        return {
+            code: `...$props.slot ?? ${children.map((c) => cloneIfNeeded(c.code)).join(", ") || "[]"}`,
+            isComponent: false,
+            hasReactive,
+        };
+    }
+    let code = "";
+    let hasOwnEffects = false;
+    if (isComponent) {
+        const props = {};
+        let propsDirective = null;
+        let propCount = 0;
+        for (const [key, val] of Object.entries(attrs)) {
+            if (["#for", "#if", "#then", "#else", "#else-if"].includes(key)) {
+                continue;
+            }
+            if (key === "#props") {
+                propsDirective = "raw" in val ? val.raw : JSON.stringify(val.quoted);
+                continue;
+            }
+            const value = "raw" in val ? val.raw : JSON.stringify(val.quoted);
+            props[key] = value;
+            propCount++;
+        }
+        if (children.length) {
+            props.slot = `[${children.map((c) => cloneIfNeeded(c.code)).join(", ")}]`;
+            propCount++;
+        }
+        let propsCode;
+        if (propsDirective) {
+            propsCode = propsDirective;
+        }
+        else {
+            propsCode = createObjectCode(props);
+        }
+        code = `__THYN__CORE__.${hasComponentChildren ? 'component' : 'fixedComponent'}(${makeArg}, ${propsCode})`;
+    }
+    else {
+        code = createHoisting(`document.createElement(${makeArg})`, hoist);
+        for (const [key, val] of Object.entries(attrs)) {
+            if (DIRECTIVES.includes(key))
+                continue;
+            if ("quoted" in val) {
+                if (key === "class" || key.includes("-")) {
+                    code = createHoisting(`__THYN__CORE__.setAttribute(${cloneIfNeeded(code)}, "${key}", "${val.quoted}")`, hoist);
+                }
+                else {
+                    code = createHoisting(`__THYN__CORE__.setProperty(${cloneIfNeeded(code)}, "${key}", "${val.quoted}")`, hoist);
+                }
+            }
+        }
+        for (const [key, val] of Object.entries(attrs)) {
+            if (DIRECTIVES.includes(key))
+                continue;
+            if (!("raw" in val))
+                continue;
+            if (key.startsWith("on")) {
+                code = `__THYN__CORE__.setProperty(${cloneIfNeeded(code)}, "${key}", ${val.raw})`;
+                continue;
+            }
+            const reactive = isReactiveExpression(val.raw.replace(/^\(\) => /, ""));
+            if (reactive) {
+                hasOwnEffects = true;
+                hasReactive = true;
+                if (key === "class" || key.includes("-")) {
+                    code = `__THYN__CORE__.setReactiveAttribute(${cloneIfNeeded(code)}, "${key}", ${val.raw})`;
+                }
+                else {
+                    code = `__THYN__CORE__.setReactiveProperty(${cloneIfNeeded(code)}, "${key}", ${val.raw})`;
+                }
+                continue;
+            }
+            if (key === "class" || key.includes("-")) {
+                code = `__THYN__CORE__.setAttribute(${cloneIfNeeded(code)}, "${key}", ${val.raw})`;
+            }
+            else {
+                code = `__THYN__CORE__.setProperty(${cloneIfNeeded(code)}, "${key}", ${val.raw})`;
+            }
+        }
+        if (children.length) {
+            code = `__THYN__CORE__.addChildren(${cloneIfNeeded(code)}, [${children.map((c) => cloneIfNeeded(c.code)).join(", ")}])`;
+        }
+        if (!hasOwnEffects && hasReactiveChildren) {
+            code = `__THYN__CORE__.markAsReactive(${cloneIfNeeded(code)})`;
+        }
+    }
+    if ("#for" in attrs && "raw" in attrs["#for"]) {
+        const isolated = siblings ? Array.from(siblings).filter((n) => n.nodeType !== 3 || n.textContent.trim()).length === 1 : true;
+        const forAttr = attrs["#for"].raw;
+        const [item, iterable] = forAttr.split(" in ").map((s) => s.trim());
+        code = `__THYN__CORE__.component(${hasComponentChildren
+            ? "__THYN__CORE__.list"
+            : (isolated ? "__THYN__CORE__.isolatedTerminalList" : "__THYN__CORE__.terminalList")}, {
+      items: () => ${iterable},
+      render: (${item}) => ${code},
+    })`;
+        isComponent = true;
+    }
+    if ("#if" in attrs) {
+        const chain = walkConditionChain(siblings, index);
+        const branches = [];
+        for (const entry of chain) {
+            const subEl = entry.node;
+            const subAttrs = entry.attrs;
+            subEl.removeAttribute(":#if");
+            subEl.removeAttribute(":#else-if");
+            subEl.removeAttribute(":#else");
+            const ch = walk(subEl, hoist);
+            if ("#if" in subAttrs || "#else-if" in subAttrs) {
+                const cond = subAttrs["#if"]?.raw ?? subAttrs["#else-if"].raw;
+                branches.push(`{ if: () => ${cond}, then: () => ${ch.code} }`);
+            }
+            else if ("#else" in subAttrs) {
+                branches.push(`{ then: () => ${ch.code} }`);
+            }
+        }
+        code = `__THYN__CORE__.component(__THYN__CORE__.show, [\n${branches.join(",\n")}\n])`;
+        return {
+            code,
+            isComponent: true,
+            hasReactive: true,
+            skip: chain.length - 1,
+        };
+    }
+    return {
+        code,
+        isComponent,
+        hasReactive: hasOwnEffects || isComponent || hasReactiveChildren,
+    };
+}
+function hasComponentChildren(node) {
+    if (node.nodeType === 3) {
+        return false;
+    }
+    if (node.nodeType !== 1)
+        return false;
+    const tag = node.tagName.toLowerCase();
+    if (tag === "slot")
+        return true;
+    let isComponent = node.hasAttribute("__thyn_component");
+    if (isComponent)
+        return true;
+    for (const attr of node.attributes) {
+        if ([":#for", ":#if", ":#else", ":#else-if"].includes(attr.name)) {
+            return true;
+        }
+    }
+    return Array.from(node.childNodes).some((n) => hasComponentChildren(n));
+}
+const COMPONENT_TAG_REGEX = /<\/?([A-Z][a-zA-Z0-9]*)(\s(?:[^"'<>\/]|"[^"]*"|'[^']*')*)?(\/?)>/g;
+function convertToColonBindings(html) {
+    let result = '';
+    let i = 0;
+    while (i < html.length) {
+        const start = html.indexOf('={', i);
+        if (start === -1) {
+            result += html.slice(i);
+            break;
+        }
+        // Check if we're inside escaped HTML (&lt; ... &gt;)
+        let beforeStart = html.slice(0, start);
+        let lastLt = beforeStart.lastIndexOf('<');
+        let lastAmpLt = beforeStart.lastIndexOf('&lt;');
+        // If the last &lt; is more recent than the last <, we're in escaped HTML
+        if (lastAmpLt > lastLt) {
+            result += html.slice(i, start + 2);
+            i = start + 2;
+            continue;
+        }
+        // Find the most recent < and > before our position
+        let lastTagOpen = beforeStart.lastIndexOf('<');
+        let lastTagClose = beforeStart.lastIndexOf('>');
+        // If there's no unclosed tag (last > is more recent than last <), skip
+        if (lastTagClose >= lastTagOpen) {
+            result += html.slice(i, start + 2);
+            i = start + 2;
+            continue;
+        }
+        // Find the attribute name by going backwards
+        let attrEnd = start - 1;
+        while (attrEnd >= 0 && /\s/.test(html[attrEnd]))
+            attrEnd--;
+        let attrStart = attrEnd;
+        // Updated to include dots in attribute names
+        while (attrStart >= 0 && /[a-zA-Z0-9_#.-]/.test(html[attrStart])) {
+            attrStart--;
+        }
+        attrStart++; // Move to first character of attribute name
+        if (attrStart > attrEnd) {
+            // No valid attribute name found
+            result += html.slice(i, start + 2);
+            i = start + 2;
+            continue;
+        }
+        const attrName = html.slice(attrStart, attrEnd + 1);
+        // Updated validation to allow dots in attribute names
+        if (!/^[#a-zA-Z_][\w\-\.]*$/.test(attrName)) {
+            result += html.slice(i, start + 2);
+            i = start + 2;
+            continue;
+        }
+        // Parse balanced {}
+        let braceCount = 1;
+        let j = start + 2;
+        while (j < html.length && braceCount > 0) {
+            if (html[j] === '{')
+                braceCount++;
+            else if (html[j] === '}')
+                braceCount--;
+            j++;
+        }
+        if (braceCount !== 0) {
+            // Unbalanced braces, treat as raw
+            result += html.slice(i, j);
+            i = j;
+            continue;
+        }
+        const jsExpr = html.slice(start + 2, j - 1).trim();
+        const prefix = attrName.startsWith('#') ? ':#' + attrName.slice(1) : ':' + attrName;
+        const beforeAttr = html.slice(i, attrStart);
+        result += beforeAttr + `${prefix}="${jsExpr.replace(/"/g, DOUBLE_QUOTE)}"`;
+        i = j;
+    }
+    return result;
+}
+function preprocessHTML(html) {
+    html = convertToColonBindings(html);
+    html = addComponentAttributes(html);
+    html = preserveCamelCaseAttributes(html);
+    return html;
+}
+function preserveCamelCaseAttributes(html) {
+    return html.replace(/<([^>]+)>/g, (match, tagContent) => {
+        const processedContent = tagContent.replace(/\s+(:?[a-z][a-zA-Z]*[A-Z][a-zA-Z]*)\s*=/g, (_attrMatch, attrName) => {
+            const kebabCase = attrName.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+            return ` __thyn_attribute_${kebabCase}=`;
+        });
+        return `<${processedContent}>`;
+    });
+}
+function addComponentAttributes(html) {
+    let processedHTML = html;
+    processedHTML = processedHTML.replace(COMPONENT_TAG_REGEX, (componentMatch, componentName, attributes, selfClose) => {
+        const isClosing = componentMatch.startsWith("</");
+        return isClosing
+            ? "</div>"
+            : selfClose
+                ? `<div${attributes || ""} __thyn_component="${componentName}"></div>`
+                : `<div${attributes || ""} __thyn_component="${componentName}">`;
+    });
+    return processedHTML;
+}
+function addScopeId(el, scopeId) {
+    el.classList.add(scopeId);
+    for (const child of el.children) {
+        addScopeId(child, scopeId);
+    }
+}
+function removeUnusedThynVars(code) {
+    const varDeclRE = /const (\__THYN__\d+) = ([^\n;]+);/g;
+    const varToExpr = new Map();
+    const exprDeps = new Map();
+    const allVars = new Set();
+    const directlyUsed = new Set();
+    // 1. Collect variable declarations
+    let match;
+    while ((match = varDeclRE.exec(code))) {
+        const name = match[1];
+        const expr = match[2];
+        varToExpr.set(name, expr);
+        allVars.add(name);
+        // Track dependencies (i.e., const a = b.c → b is a dependency)
+        const deps = new Set();
+        for (const dep of expr.match(/\__THYN__\d+/g) || []) {
+            deps.add(dep);
+        }
+        exprDeps.set(name, deps);
+    }
+    // 2. Detect any variable used outside its own declaration
+    for (const name of allVars) {
+        const usageRE = new RegExp(`\\b${name}\\b`, "g");
+        while ((match = usageRE.exec(code))) {
+            const idx = match.index;
+            const lineStart = code.lastIndexOf("\n", idx);
+            const line = code.slice(lineStart + 1, code.indexOf("\n", idx + 1));
+            if (!line.startsWith(`const ${name} =`)) {
+                directlyUsed.add(name);
+                break;
+            }
+        }
+    }
+    // 3. Add any variable that is `return`ed
+    const returnRE = /return (\__THYN__\d+);/g;
+    while ((match = returnRE.exec(code))) {
+        directlyUsed.add(match[1]);
+    }
+    // 4. Walk transitive dependency graph
+    const keep = new Set(directlyUsed);
+    const stack = [...directlyUsed];
+    while (stack.length) {
+        const current = stack.pop();
+        const deps = exprDeps.get(current);
+        if (!deps)
+            continue;
+        for (const dep of deps) {
+            if (!keep.has(dep)) {
+                keep.add(dep);
+                stack.push(dep);
+            }
+        }
+    }
+    // 5. Remove any declaration not in the keep set
+    const cleaned = code.replace(varDeclRE, (decl, name) => {
+        return keep.has(name) ? decl : "";
+    });
+    return cleaned;
+}
+async function transformHTMLtoJSX(html, style) {
+    const scopeId = `thyn-${(styleId++).toString(36)}`;
+    const processedHTML = preprocessHTML(html);
+    const template = parseHTML("<template>" + processedHTML + "</template>");
+    const rootElement = template.content.firstElementChild;
+    let scopedStyle = null;
+    if (style) {
+        addScopeId(rootElement, scopeId);
+        scopedStyle = await scopeSelectors(style, scopeId);
+    }
+    if (hasComponentChildren(rootElement)) {
+        const hoist = [];
+        const { code } = walk(rootElement, hoist);
+        const root = makeVariable();
+        return [root, `const ${root} = ${code};`, hoist, scopedStyle];
+    }
+    const { root, static: tmpl, dynamic } = makeTemplate(rootElement);
+    const hoist = [`
+  let __THYN__template;
+  function __THYN__template_generate() {
+    if (!__THYN__template) {
+      const t = document.createElement("template");
+      t.innerHTML = \`${escapeTemplateLiteral(tmpl)}\`;
+      const w = document.createTreeWalker(t.content, 4);
+      while(w.nextNode()) {
+        if (w.currentNode.nodeValue === "\\uE000") w.currentNode.nodeValue = "";
+      }
+      __THYN__template = t.content.firstChild;
+    }
+    return __THYN__template.cloneNode(true);
+  }`];
+    return [root, dynamic, hoist, scopedStyle];
+}
+async function transformTypeScript(code, id) {
+    try {
+        const esbuild = await esbuildModule;
+        const result = await esbuild.transform(code, {
+            loader: "ts",
+            target: "es2022",
+            format: "esm",
+            sourcemap: true,
+            sourcefile: id,
+        });
+        return {
+            code: result.code,
+            map: result.map,
+        };
+    }
+    catch (error) {
+        throw new Error(`TypeScript compilation failed for ${id}: ${error.message}`);
+    }
+}
+export async function transformSFC(source, id) {
+    const name = id.split("/").pop()?.replace(/\.thyn$/, "");
+    const { script, scriptLang, html, style } = extractParts(source);
+    const { imports, body } = splitScript(script);
+    const s = new MagicString("");
+    if (!imports.some((imp) => imp.includes("$signal"))) {
+        s.prepend("import { $signal } from '@thyn/core';\n");
+    }
+    if (!imports.some((imp) => imp.includes("$effect"))) {
+        s.prepend("import { $effect } from '@thyn/core';\n");
+    }
+    s.prepend("import * as __THYN__CORE__ from '@thyn/core';\n");
+    s.append(imports.join("\n") + "\n");
+    let [root, transformed, hoist, scopedStyle] = await transformHTMLtoJSX(html, style);
+    s.append(hoist.join("\n") + "\n");
+    s.append([
+        "",
+        `export default function ${name}($props) {`,
+        ...body.map((l) => "  " + l),
+        removeUnusedThynVars(`  ${transformed} return ${root};`),
+        `}`,
+    ].join("\n"));
+    let output = s.toString();
+    let sourceMap = s.generateMap({
+        source: id,
+        includeContent: true,
+        hires: true,
+    });
+    return { output, sourceMap, scopedStyle, scriptLang };
+}
+export async function compileSFC(source, id) {
+    let { scriptLang, output, sourceMap, scopedStyle } = await transformSFC(source, id);
+    if (scriptLang === "ts" || scriptLang === "typescript") {
+        const tsResult = await transformTypeScript(output, id);
+        output = tsResult.code;
+        if (tsResult.map) {
+            // @ts-expect-error
+            sourceMap = tsResult.map;
+        }
+    }
+    return {
+        js: output,
+        css: scopedStyle || null,
+        cssModuleId: scopedStyle ? `${id}.css` : null,
+        map: sourceMap,
+    };
+}
+async function compileThynScript(source, id) {
+    const s = new MagicString(source);
+    const { imports } = splitScript(source);
+    if (!imports.some((imp) => imp.includes("$signal"))) {
+        s.prepend("import { $signal } from '@thyn/core';\n");
+    }
+    if (!imports.some((imp) => imp.includes("$effect"))) {
+        s.prepend("import { $effect } from '@thyn/core';\n");
+    }
+    let output = s.toString();
+    let sourceMap = s.generateMap({
+        source: id,
+        includeContent: true,
+        hires: true,
+    });
+    if (id.endsWith(".thyn.ts")) {
+        const tsResult = await transformTypeScript(output, id);
+        output = tsResult.code;
+        if (tsResult.map) {
+            // @ts-expect-error
+            sourceMap = tsResult.map;
+        }
+    }
+    return {
+        code: output,
+        map: sourceMap,
+    };
+}
+let styleId = 0;
+export default function thyn() {
+    const collectedCSS = [];
+    let isDev = false;
+    return {
+        name: "thyn",
+        enforce: "pre",
+        configResolved(config) {
+            isDev = config.command === "serve";
+        },
+        buildStart() {
+            collectedCSS.length = 0;
+        },
+        async transform(code, id) {
+            if (id.endsWith(".thyn.js") || id.endsWith(".thyn.ts")) {
+                return await compileThynScript(code, id);
+            }
+            if (!id.endsWith(".thyn"))
+                return;
+            const { js, css, map } = await compileSFC(code, id);
+            let finalCode = js;
+            if (isDev && css) {
+                const escapedCSS = JSON.stringify(css);
+                finalCode += `\n
+      if (typeof document !== 'undefined') {
+        const style = document.createElement('style');
+        style.textContent = ${escapedCSS};
+        document.head.appendChild(style);
+      }`;
+            }
+            else if (css) {
+                collectedCSS.push(css);
+            }
+            return {
+                code: finalCode,
+                map,
+            };
+        },
+        transformIndexHtml(html) {
+            if (collectedCSS.length === 0)
+                return html;
+            const s = new MagicString(html);
+            const headCloseIndex = html.indexOf("</head>");
+            if (headCloseIndex !== -1) {
+                if (isDev) {
+                    const combinedCSS = collectedCSS.join("\n");
+                    s.appendLeft(headCloseIndex, `  <style>\n${combinedCSS}\n  </style>\n`);
+                }
+                else {
+                    s.appendLeft(headCloseIndex, '  <link rel="stylesheet" href="/main.css">\n');
+                }
+            }
+            return s.toString();
+        },
+        async generateBundle() {
+            if (isDev || collectedCSS.length === 0)
+                return;
+            const combinedCSS = collectedCSS.join("\n");
+            const esbuild = await esbuildModule;
+            const result = await esbuild.transform(combinedCSS, {
+                loader: "css",
+                minify: true,
+            });
+            this.emitFile({
+                type: "asset",
+                fileName: "main.css",
+                source: result.code,
+            });
+        },
+    };
+}