@frontiers-labs/argon 0.4.0

package/dist/codegen/client.js

@@ -0,0 +1,964 @@
+// CSR backend: ModuleIR → a self-contained ES module defining custom elements.
+//
+// Components compile to classes; everything else in the source module is kept
+// verbatim so helper functions and constants survive untouched. Binding
+// expressions are printed from the IR; opaque code (event handlers, CSR-only
+// values) passes through a reference-rewriting transform instead.
+import * as ts from "typescript";
+import { attrPositions, bindingDependencies, isMarkup, localDependencies, markupValue, referencedNames, visitExpr, } from "../ir.js";
+import { ArgonCompileError } from "../diagnostics.js";
+import { MARKER_RE } from "../template.js";
+import { serialize } from "../html.js";
+import { isBooleanAttr } from "../html-attrs.js";
+const TARGETS = {
+    es2020: ts.ScriptTarget.ES2020,
+    es2022: ts.ScriptTarget.ES2022,
+    esnext: ts.ScriptTarget.ESNext,
+};
+export function compileClient(module, opts = {}) {
+    return compileClientCore(module, opts).code;
+}
+// Full result including the source map (used by the CLI to write .js.map).
+export function compileClientCore(module, opts = {}) {
+    if (module.components.length === 0) {
+        throw new ArgonCompileError([{
+                code: "ARGON001",
+                target: "all",
+                message: "No Argon component found.",
+                span: { start: 0, end: 0 },
+                hint: "Export a capitalized multi-word function returning Component with a TSX template.",
+            }], module.source);
+    }
+    const jsxDiagnostics = collectJsxOpaque(module);
+    if (jsxDiagnostics.length > 0)
+        throw new ArgonCompileError(jsxDiagnostics, module.source);
+    const edits = [];
+    for (const im of module.imports) {
+        if (im.isArgon)
+            edits.push({ start: im.span.start, end: im.span.end, text: "" });
+    }
+    for (const decl of module.decls) {
+        // Helpers containing JSX can't pass through verbatim; re-emit from IR.
+        if (decl.kind === "fn" && decl.hasJsx) {
+            edits.push({ start: decl.span.start, end: decl.span.end, text: printFnDecl(decl) });
+        }
+    }
+    for (const component of module.components) {
+        edits.push({ start: component.span.start, end: component.span.end, text: generateClass(component, !!opts.compat03) });
+    }
+    edits.sort((a, b) => b.start - a.start);
+    let out = module.sourceText;
+    for (const e of edits)
+        out = out.slice(0, e.start) + e.text + out.slice(e.end);
+    const transpiled = ts.transpileModule(out, {
+        fileName: opts.fileName,
+        compilerOptions: {
+            target: TARGETS[opts.target ?? "es2022"],
+            module: ts.ModuleKind.ESNext,
+            sourceMap: !!opts.sourceMap,
+            inlineSources: !!opts.sourceMap,
+        },
+        transformers: { before: [stripTags] },
+    });
+    const composedImports = module.composedImports.map(spec => `import ${JSON.stringify(spec)};\n`).join("");
+    // Drop tsc's sourceMappingURL (it derives the wrong extension from the .tsx
+    // input); the caller appends the correct `<name>.js.map` reference.
+    const body = transpiled.outputText.replace(/\n?\/\/# sourceMappingURL=[^\n]*\n?$/, "");
+    const code = "// Generated by Argon compiler — do not edit by hand.\n// CSR output: browser-only hydration and reactive updates. SSR data evaluation stays out of this file.\n\n" +
+        composedImports +
+        body.trimStart();
+    return { code, map: transpiled.sourceMapText };
+}
+// JSX compiles only in template value positions, where lowering turns it into
+// string templates. Opaque code containing JSX (event handlers, module
+// helpers, untyped consts) would pass through verbatim and break the emitted
+// module, so it is rejected up front with a usable location.
+function collectJsxOpaque(module) {
+    const diagnostics = [];
+    const flag = (span) => {
+        diagnostics.push({
+            code: "ARGON121",
+            target: "csr",
+            message: "JSX is only supported in template value positions; this code is emitted verbatim and cannot contain JSX.",
+            span,
+            hint: "Build the markup as a template-literal string here, or move it into the component template.",
+        });
+    };
+    const checkExpr = (expr) => {
+        visitExpr(expr, e => {
+            if (e.kind === "opaque" && e.hasJsx)
+                flag(e.diagnostic.span);
+        });
+    };
+    for (const decl of module.decls) {
+        if (decl.kind === "opaque" && decl.hasJsx)
+            flag(decl.diagnostic.span);
+        if (decl.kind === "table" && decl.hasJsx)
+            flag(decl.span);
+    }
+    for (const component of module.components) {
+        for (const prop of component.props) {
+            if (prop.default)
+                checkExpr(prop.default);
+        }
+        for (const stmt of component.setup) {
+            if (stmt.kind === "opaque" && stmt.hasJsx)
+                flag(stmt.diagnostic.span);
+            else if (stmt.kind === "hook" && stmt.hasJsx)
+                flag(stmt.span);
+            else if (stmt.kind === "let")
+                checkExpr(stmt.init);
+        }
+        for (const expr of component.template.exprs)
+            checkExpr(expr);
+    }
+    return diagnostics;
+}
+// The `css` tag exists in the source only for typing; an untagged template
+// literal yields the same string. Dropping it keeps each output a clean ES
+// module with no injected module-scope globals (bundler/minifier safe).
+const stripTags = ctx => {
+    const visit = (node) => {
+        if (ts.isTaggedTemplateExpression(node) &&
+            ts.isIdentifier(node.tag) &&
+            node.tag.text === "css") {
+            return ts.visitNode(node.template, visit);
+        }
+        return ts.visitEachChild(node, visit, ctx);
+    };
+    return sf => ts.visitNode(sf, visit);
+};
+// ── Naming ───────────────────────────────────────────────────────────────────
+function cap(name) {
+    return name.charAt(0).toUpperCase() + name.slice(1);
+}
+function kebab(name) {
+    return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+// ── Opaque code: rewrite prop/state references ───────────────────────────────
+//
+// Replace bare prop/state references with private fields and state mutations
+// with setter calls, leaving property names and unrelated identifiers
+// untouched. `kind` controls printing: statements keep trailing semicolons,
+// expressions must not have one (they land inside `${...}` and call sites).
+function rewriteRefs(text, refs, states, kind) {
+    if (refs.size === 0 && states.size === 0)
+        return text.trim();
+    const sf = ts.createSourceFile("_.ts", text, ts.ScriptTarget.Latest, true);
+    const transformer = ctx => {
+        const visit = (node) => {
+            if (ts.isBinaryExpression(node) &&
+                ts.isIdentifier(node.left) &&
+                states.has(node.left.text)) {
+                const op = node.operatorToken.kind;
+                const setter = ctx.factory.createPropertyAccessExpression(ctx.factory.createThis(), ctx.factory.createPrivateIdentifier("#set" + cap(node.left.text)));
+                if (op === ts.SyntaxKind.EqualsToken) {
+                    return ctx.factory.createCallExpression(setter, undefined, [
+                        ts.visitNode(node.right, visit),
+                    ]);
+                }
+                const binaryOps = {
+                    [ts.SyntaxKind.PlusEqualsToken]: ts.SyntaxKind.PlusToken,
+                    [ts.SyntaxKind.MinusEqualsToken]: ts.SyntaxKind.MinusToken,
+                    [ts.SyntaxKind.AsteriskEqualsToken]: ts.SyntaxKind.AsteriskToken,
+                    [ts.SyntaxKind.SlashEqualsToken]: ts.SyntaxKind.SlashToken,
+                };
+                const binaryOp = binaryOps[op];
+                if (binaryOp) {
+                    return ctx.factory.createCallExpression(setter, undefined, [
+                        ctx.factory.createBinaryExpression(ctx.factory.createPropertyAccessExpression(ctx.factory.createThis(), ctx.factory.createPrivateIdentifier("#" + node.left.text)), binaryOp, ts.visitNode(node.right, visit)),
+                    ]);
+                }
+            }
+            if ((ts.isPrefixUnaryExpression(node) || ts.isPostfixUnaryExpression(node)) &&
+                ts.isIdentifier(node.operand) &&
+                states.has(node.operand.text) &&
+                (node.operator === ts.SyntaxKind.PlusPlusToken || node.operator === ts.SyntaxKind.MinusMinusToken)) {
+                return ctx.factory.createCallExpression(ctx.factory.createPropertyAccessExpression(ctx.factory.createThis(), ctx.factory.createPrivateIdentifier("#set" + cap(node.operand.text))), undefined, [ctx.factory.createBinaryExpression(ctx.factory.createPropertyAccessExpression(ctx.factory.createThis(), ctx.factory.createPrivateIdentifier("#" + node.operand.text)), node.operator === ts.SyntaxKind.PlusPlusToken ? ts.SyntaxKind.PlusToken : ts.SyntaxKind.MinusToken, ctx.factory.createNumericLiteral(1))]);
+            }
+            if (ts.isIdentifier(node) &&
+                refs.has(node.text) &&
+                !(ts.isPropertyAccessExpression(node.parent) && node.parent.name === node) &&
+                !(ts.isPropertyAssignment(node.parent) && node.parent.name === node) &&
+                !(ts.isBindingElement(node.parent) && node.parent.name === node)) {
+                return ctx.factory.createPropertyAccessExpression(ctx.factory.createThis(), ctx.factory.createPrivateIdentifier("#" + node.text));
+            }
+            return ts.visitEachChild(node, visit, ctx);
+        };
+        return sf => ts.visitNode(sf, visit);
+    };
+    const out = ts.transform(sf, [transformer]).transformed[0];
+    const printer = ts.createPrinter({ removeComments: false });
+    if (kind === "stmts")
+        return printer.printFile(out).trim();
+    const stmt = out.statements[0];
+    const expr = ts.isExpressionStatement(stmt) ? stmt.expression : stmt;
+    return printer.printNode(ts.EmitHint.Unspecified, expr, out);
+}
+function printExpr(e, opaque, attrEnc = "esc") {
+    const p = (x) => printExpr(x, opaque, attrEnc);
+    const po = (x) => x.kind === "binary" || x.kind === "cond" || x.kind === "unary" || x.kind === "exists" ? `(${p(x)})` : p(x);
+    switch (e.kind) {
+        case "str": return JSON.stringify(e.value);
+        case "num": return e.text;
+        case "bool": return String(e.value);
+        case "ref": return e.space === "prop" || e.space === "state" ? `this.#${e.name}` : e.name;
+        case "member": return `${po(e.object)}.${e.name}`;
+        case "length": return `${po(e.object)}.length`;
+        case "index": return `${po(e.object)}[${p(e.index)}]`;
+        case "lookup": return `${e.table}[${p(e.key)}]`;
+        // Loose null check: absent props are undefined, hydrated optional struct
+        // fields arrive as JSON null.
+        case "exists": return `${po(e.object)} ${e.present ? "!=" : "=="} null`;
+        // The guard guarantees presence; read the raw value.
+        case "unwrap": return p(e.object);
+        case "unary": return `${e.op}${po(e.operand)}`;
+        case "binary": return `${po(e.left)} ${e.op === "==" ? "===" : e.op === "!=" ? "!==" : e.op} ${po(e.right)}`;
+        case "cond": return `${po(e.cond)} ? ${po(e.whenTrue)} : ${po(e.whenFalse)}`;
+        case "template": {
+            let out = "`" + escapeTemplate(e.quasis[0]);
+            e.parts.forEach((part, i) => {
+                out += "${" + p(part) + "}" + escapeTemplate(e.quasis[i + 1]);
+            });
+            return out + "`";
+        }
+        case "call": return `${e.fn}(${e.args.map(p).join(", ")})`;
+        case "map": {
+            const item = typeof e.item === "string" ? e.item : `[${e.item.join(", ")}]`;
+            const params = e.indexVar ? `(${item}, ${e.indexVar})` : `(${item})`;
+            const body = e.body.stmts.length > 0
+                ? `{ ${e.body.stmts.map(s => printStmt(s, opaque, undefined, attrEnc)).join(" ")} return ${p(e.body.result)}; }`
+                : po(e.body.result);
+            return `${po(e.array)}.map(${params} => ${body})`;
+        }
+        case "join": return `${po(e.array)}.join(${JSON.stringify(e.sep)})`;
+        case "minmax": return `Math.${e.op}(...${po(e.array)})`;
+        case "math": return `Math.${e.fn}(${e.args.map(p).join(", ")})`;
+        // Every whitelisted string method is a native JS method of the same name.
+        case "strmethod": return `${po(e.object)}.${e.method}(${e.args.map(p).join(", ")})`;
+        // Array methods are native too; predicate methods take the arrow back.
+        case "arrmethod":
+            return e.param && e.body
+                ? `${po(e.object)}.${e.method}(${e.param} => ${p(e.body)})`
+                : `${po(e.object)}.${e.method}(${e.args.map(p).join(", ")})`;
+        case "toFixed": return `${po(e.value)}.toFixed(${e.digits})`;
+        case "arr": return `[${e.elems.map(p).join(", ")}]`;
+        case "obj": return `{ ${e.fields.map(f => `${f.name}: ${p(f.value)}`).join(", ")} }`;
+        // The child element hydrates itself from the data-* attributes around
+        // this marker; only the server inlines shadow DOM here.
+        case "construct": return `""`;
+        case "propattr": return `this.${attrEnc === "raw" ? "#attrRaw" : "#attrEsc"}(${p(e.value)})`;
+        // Raw markup (unsafeHtml): the inner value is interpolated as-is. Text
+        // escaping is applied at the text-render site, which skips markup values.
+        case "raw": return p(e.inner);
+        case "opaque": return opaque(e.text);
+    }
+}
+// Module helpers containing JSX are re-emitted from the IR (their original
+// text would leave raw JSX in the output module).
+function printFnDecl(decl) {
+    const verbatim = text => text;
+    const body = decl.body.map(s => "  " + printStmt(s, verbatim)).join("\n");
+    return `function ${decl.name}(${decl.params.map(p => p.name).join(", ")}) {\n${body}\n}`;
+}
+function printStmt(stmt, opaque, opaqueStmt, attrEnc = "esc") {
+    if (stmt.kind === "let") {
+        const target = stmt.tuple ? `[${stmt.names.join(", ")}]` : stmt.names[0];
+        return `const ${target} = ${printExpr(stmt.init, opaque, attrEnc)};`;
+    }
+    if (stmt.kind === "return")
+        return `return ${printExpr(stmt.value, opaque, attrEnc)};`;
+    if (stmt.kind === "if") {
+        const body = (stmts) => stmts.map(s => printStmt(s, opaque, opaqueStmt, attrEnc)).join(" ");
+        const els = stmt.else ? ` else { ${body(stmt.else)} }` : "";
+        return `if (${printExpr(stmt.cond, opaque, attrEnc)}) { ${body(stmt.then)} }${els}`;
+    }
+    if (stmt.kind === "opaque")
+        return (opaqueStmt ?? opaque)(stmt.text);
+    // Hooks and ref declarations are emitted by the class generator, not here.
+    return "";
+}
+function escapeTemplate(text) {
+    return text.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+}
+// ── Typed attribute coercion ─────────────────────────────────────────────────
+//
+// Attribute and dataset values arrive as strings; constructor props arrive as
+// real values. The setter normalizes both based on the declared prop type.
+function coerce(type, value) {
+    // Absence (null/undefined) is handled by the setter before coercion runs.
+    if (type.kind === "option")
+        type = type.inner;
+    switch (type.kind) {
+        case "number": return `Number(${value})`;
+        case "boolean": return `typeof ${value} === 'string' ? ${value} !== 'false' : Boolean(${value})`;
+        case "array":
+        case "fixed":
+        case "tuple":
+        case "struct":
+            return `typeof ${value} === 'string' ? JSON.parse(${value}) : ${value}`;
+        default: return value;
+    }
+}
+// ── Class generation ─────────────────────────────────────────────────────────
+function generateClass(component, compat03 = false) {
+    const props = new Set(component.props.map(p => p.name));
+    const states = new Set(component.states.map(s => s.name));
+    const refs = new Set([...props, ...states, ...component.refs]);
+    const template = component.template;
+    const opaqueExpr = text => rewriteRefs(text, refs, states, "expr");
+    const opaqueStmt = text => rewriteRefs(text, refs, states, "stmts");
+    const print = (e) => printExpr(e, opaqueExpr);
+    // ── Escape-by-default text rendering (mirrors the Rust backend) ──
+    //
+    // Setup locals whose value is markup (a JSX string) read raw; every other
+    // string interpolated into text position is HTML-escaped so it can't inject
+    // markup. `unsafeHtml(...)` opts a trusted string out via a `raw` node.
+    const markupLocals = new Set();
+    for (const stmt of component.setup) {
+        if (stmt.kind === "let" && !stmt.tuple && markupValue(stmt.init, markupLocals))
+            markupLocals.add(stmt.names[0]);
+    }
+    // Classify each template marker by position: bound boolean attribute
+    // (present-or-absent), other attribute value (attribute-escaped), or text.
+    const attrOf = new Map();
+    const boolAttr = new Set();
+    // 0.3 compat renders markers verbatim: no attribute/text split, no boolean
+    // collapse, no escaping.
+    if (!compat03) {
+        for (const b of template.attrBindings) {
+            for (const idx of b.exprIndices)
+                attrOf.set(idx, b.attr);
+            if (isBooleanAttr(b.attr) && b.exprIndices.length === 1 && b.value.replace(MARKER_RE, "") === "") {
+                boolAttr.add(b.exprIndices[0]);
+            }
+        }
+    }
+    let usesEscText = false;
+    let usesEscAttr = false;
+    const po = (e) => e.kind === "binary" || e.kind === "cond" || e.kind === "unary" || e.kind === "exists" ? `(${print(e)})` : print(e);
+    const textExpr = (e) => {
+        if (compat03)
+            return print(e); // 0.3: verbatim text, no escaping
+        if (markupValue(e, markupLocals))
+            return markupExpr(e);
+        if (e.type.kind === "string") {
+            usesEscText = true;
+            return `this.#escText(${print(e)})`;
+        }
+        return print(e);
+    };
+    const markupExpr = (e) => {
+        switch (e.kind) {
+            case "str": return JSON.stringify(e.value);
+            case "raw": return print(e.inner);
+            case "construct": return `""`;
+            case "template": {
+                const inAttr = attrPositions(e.quasis);
+                let out = "`" + escapeTemplate(e.quasis[0]);
+                e.parts.forEach((part, i) => {
+                    // Attribute-position parts attribute-escape; text-position parts
+                    // text-escape; a composed child's prop value self-encodes.
+                    const rendered = part.kind === "propattr" ? print(part) : inAttr[i] ? attrExpr(part) : textExpr(part);
+                    out += "${" + rendered + "}" + escapeTemplate(e.quasis[i + 1]);
+                });
+                return out + "`";
+            }
+            // Each branch renders by its own kind: markup raw, a plain string escaped.
+            case "cond": {
+                const branch = (b) => (isMarkup(b) ? markupExpr(b) : textExpr(b));
+                return `${po(e.cond)} ? ${branch(e.whenTrue)} : ${branch(e.whenFalse)}`;
+            }
+            case "join":
+                return e.array.kind === "map" ? `${printMapText(e.array)}.join(${JSON.stringify(e.sep)})` : print(e);
+            default: return print(e);
+        }
+    };
+    // A map whose items are markup: render each item's result through textExpr so
+    // interpolated scalar parts are escaped while the markup passes through.
+    const printMapText = (m, result = textExpr) => {
+        const item = typeof m.item === "string" ? m.item : `[${m.item.join(", ")}]`;
+        const params = m.indexVar ? `(${item}, ${m.indexVar})` : `(${item})`;
+        const pre = m.body.stmts.map(s => printStmt(s, opaqueExpr, undefined, "esc")).join(" ");
+        const body = m.body.stmts.length > 0 ? `{ ${pre} return ${result(m.body.result)}; }` : result(m.body.result);
+        return `${po(m.array)}.map(${params} => ${body})`;
+    };
+    const attrExpr = (e) => {
+        // A composed child's prop value already encodes and escapes itself.
+        if (e.kind === "propattr")
+            return print(e);
+        if (e.type.kind === "number" || e.type.kind === "boolean")
+            return print(e);
+        if (e.type.kind === "string") {
+            usesEscAttr = true;
+            return `this.#escAttr(${print(e)})`;
+        }
+        return print(e);
+    };
+    // Render one template marker in its classified position.
+    const renderMarker = (idx) => {
+        const e = template.exprs[idx];
+        if (compat03)
+            return print(e);
+        if (boolAttr.has(idx))
+            return `${po(e)} ? ' ${attrOf.get(idx)}' : ''`;
+        if (attrOf.has(idx))
+            return attrExpr(e);
+        return textExpr(e);
+    };
+    const setupStmts = component.setup.filter(s => (s.kind === "let" && !s.isState) || s.kind === "opaque");
+    // Markup stored in a local escapes its interpolated parts, so reading it raw
+    // later cannot inject unescaped values.
+    const printSetupStmt = (s) => s.kind === "let" && !s.tuple && isMarkup(s.init)
+        ? `const ${s.names[0]} = ${markupExpr(s.init)};`
+        : printStmt(s, opaqueExpr, opaqueStmt);
+    const prelude = setupStmts
+        .map(printSetupStmt)
+        .join("\n    ");
+    // Reactive dependencies per binding, flowing through setup locals. Refs are
+    // rewritten like props/states but never change, so they are not tracked.
+    const tracked = new Set([...props, ...states]);
+    const locals = localDependencies(component, tracked);
+    const condition = (exprIndices) => {
+        const deps = bindingDependencies(component, exprIndices, tracked, locals);
+        return ["prop === undefined", ...[...deps].map(d => `prop === '${d}'`)].join(" || ");
+    };
+    // ── Setup gating for #updateBindings ──
+    //
+    // A setup local only needs recomputing when a binding that reads it
+    // (directly or through other locals) is about to update. usedBy maps each
+    // local to the union of those bindings' dependency sets; locals reached
+    // from opaque setup statements always run, since opaque code is
+    // re-executed unconditionally.
+    const localNames = new Set();
+    for (const s of setupStmts)
+        if (s.kind === "let")
+            for (const n of s.names)
+                localNames.add(n);
+    const directLocalRefs = new Map();
+    for (const s of setupStmts) {
+        if (s.kind !== "let")
+            continue;
+        const refsOfInit = new Set([...referencedNames(s.init)].filter(n => localNames.has(n)));
+        for (const n of s.names)
+            directLocalRefs.set(n, refsOfInit);
+    }
+    const localsOf = (names) => {
+        const out = new Set();
+        const stack = [...names].filter(n => localNames.has(n));
+        while (stack.length > 0) {
+            const name = stack.pop();
+            if (out.has(name))
+                continue;
+            out.add(name);
+            for (const r of directLocalRefs.get(name) ?? [])
+                if (!out.has(r))
+                    stack.push(r);
+        }
+        return out;
+    };
+    const usedBy = new Map();
+    const noteBinding = (exprIndices) => {
+        const deps = bindingDependencies(component, exprIndices, tracked, locals);
+        const names = new Set();
+        for (const i of exprIndices)
+            for (const n of referencedNames(template.exprs[i]))
+                names.add(n);
+        for (const local of localsOf(names)) {
+            const set = usedBy.get(local) ?? new Set();
+            for (const d of deps)
+                set.add(d);
+            usedBy.set(local, set);
+        }
+    };
+    for (const b of template.textBindings)
+        noteBinding(b.exprIndices);
+    for (const b of template.attrBindings)
+        noteBinding(b.exprIndices);
+    const alwaysNeeded = localsOf(setupStmts.flatMap(s => (s.kind === "opaque" ? s.freeIds : [])));
+    const updatePrelude = setupStmts
+        .map(stmt => {
+        if (stmt.kind !== "let")
+            return printSetupStmt(stmt);
+        if (stmt.names.some(n => alwaysNeeded.has(n)))
+            return printSetupStmt(stmt);
+        // Markup locals recompute unconditionally with escaped parts.
+        if (!stmt.tuple && isMarkup(stmt.init))
+            return printSetupStmt(stmt);
+        const deps = new Set();
+        for (const n of stmt.names)
+            for (const d of usedBy.get(n) ?? [])
+                deps.add(d);
+        if ([...tracked].every(t => deps.has(t)))
+            return printSetupStmt(stmt);
+        const cond = ["prop === undefined", ...[...deps].map(d => `prop === '${d}'`)].join(" || ");
+        const target = stmt.tuple ? `[${stmt.names.join(", ")}]` : stmt.names[0];
+        return `const ${target} = (${cond}) ? (${printExpr(stmt.init, opaqueExpr)}) : ${stmt.tuple ? "[]" : "undefined"};`;
+    })
+        .join("\n    ");
+    // Text-binding updates re-render into innerHTML, so scalar values escape like
+    // the initial render; attribute-binding updates go through setAttribute (mode
+    // "raw"), which needs no HTML escaping.
+    const markers = (value, mode = "text") => {
+        const body = escapeTemplate(value);
+        return "`" + body.replace(MARKER_RE, (_m, i) => {
+            const e = template.exprs[Number(i)];
+            // Attribute updates interpolate verbatim (setAttribute); text updates
+            // escape (textExpr, which is itself verbatim under 0.3 compat).
+            const code = mode === "raw" ? printExpr(e, opaqueExpr, "raw") : textExpr(e);
+            return "${" + code + "}";
+        }) + "`";
+    };
+    const NUL = String.fromCharCode(0);
+    const renderBody = (() => {
+        // Collapse a bound boolean attribute to a whole-chunk marker so it renders
+        // as the bare attribute or nothing.
+        let html = serialize(template.nodes).replace(new RegExp(`\\s([a-zA-Z][a-zA-Z0-9-]*)="${NUL}(\\d+)${NUL}"`, "g"), (m, _n, idx) => (boolAttr.has(Number(idx)) ? `${NUL}${idx}${NUL}` : m));
+        return escapeTemplate(html).replace(MARKER_RE, (_m, i) => "${" + renderMarker(Number(i)) + "}");
+    })();
+    // A text binding that is exactly one `arr.map(...).join('')` expression
+    // renders a homogeneous item list; those reconcile per item instead of
+    // re-parsing the whole fragment. Items carrying `key={...}` reconcile by
+    // identity, so reorders and splices move nodes instead of re-rendering.
+    const listInfoOf = (b) => {
+        if (b.exprIndices.length !== 1)
+            return undefined;
+        if (b.value.replace(MARKER_RE, "") !== "")
+            return undefined;
+        const e = template.exprs[b.exprIndices[0]];
+        if (e.kind !== "join" || e.sep !== "" || e.array.kind !== "map")
+            return undefined;
+        const result = e.array.body.result;
+        return { map: e.array, key: result.kind === "template" ? result.key : undefined };
+    };
+    const listBindings = new Set(template.textBindings.filter(b => listInfoOf(b)).map(b => b.id));
+    const hasKeyedList = template.textBindings.some(b => listInfoOf(b)?.key);
+    const hasPlainList = template.textBindings.some(b => {
+        const info = listInfoOf(b);
+        return info !== undefined && info.key === undefined;
+    });
+    // `__argonNext` holds the freshly rendered string so unchanged bindings can
+    // skip DOM work; the name is reserved and must not collide with user locals.
+    const updateStatements = [
+        ...template.textBindings.map(b => {
+            const info = listInfoOf(b);
+            if (info && info.key) {
+                // Each item renders to a [key, html] pair; the reconciler matches by
+                // key so reordered items move their existing nodes.
+                const pair = (r) => `[${print(info.key)}, ${textExpr(r)}]`;
+                return `    if (${condition(b.exprIndices)}) {
+      this.#reconcileKeyedList(${b.id}, this.#textStart${b.id}, this.#textEnd${b.id}, ${printMapText(info.map, pair)});
+    }`;
+            }
+            if (info) {
+                return `    if (${condition(b.exprIndices)}) {
+      this.#reconcileList(${b.id}, this.#textStart${b.id}, this.#textEnd${b.id}, ${printMapText(info.map)});
+    }`;
+            }
+            return `    if (${condition(b.exprIndices)}) {
+      const __argonNext = ${markers(b.value)};
+      if (__argonNext !== this.#textLast${b.id}) {
+        this.#textLast${b.id} = __argonNext;
+        this.#replaceRange(this.#textStart${b.id}, this.#textEnd${b.id}, __argonNext);
+      }
+    }`;
+        }),
+        ...template.attrBindings.map((b, i) => {
+            // A bound boolean attribute toggles present/absent instead of taking a
+            // literal "true"/"false" value.
+            if (b.exprIndices.length === 1 && boolAttr.has(b.exprIndices[0])) {
+                return `    if ((${condition(b.exprIndices)}) && this.#attr${b.id}) {
+      this.#attr${b.id}.toggleAttribute('${b.attr}', !!(${print(template.exprs[b.exprIndices[0]])}));
+    }`;
+            }
+            return `    if ((${condition(b.exprIndices)}) && this.#attr${b.id}) {
+      const __argonNext = ${markers(b.value, "raw")};
+      if (__argonNext !== this.#attrLast${i}) {
+        this.#attrLast${i} = __argonNext;
+        this.#attr${b.id}.setAttribute('${b.attr}', __argonNext);
+      }
+    }`;
+        }),
+    ].join("\n");
+    const propField = (p) => p.default !== undefined ? `#${p.name} = ${print(p.default)};` : `#${p.name};`;
+    // States initialize in #initState — after props are populated — so
+    // `state(somePropValue)` captures the real initial prop.
+    const stateField = (s) => `#${s.name};`;
+    const stateInits = component.states
+        .map(s => `    this.#${s.name} = ${print(s.initial)};`)
+        .join("\n");
+    const accessors = [
+        ...component.props.map(p => propAccessors(p, print)),
+        ...component.states.map(stateSetter),
+    ].join("\n\n");
+    const ctorAssigns = component.props
+        .map(p => `      this.${p.name} = props.${p.name};`)
+        .join("\n");
+    const ssrReads = component.props
+        .map(p => `    if (!this.#${p.name}Set) this.${p.name} = this.dataset.${p.name};`)
+        .join("\n");
+    const observed = component.props.flatMap(p => [p.name.toLowerCase(), `data-${kebab(p.name)}`]);
+    const attrCases = component.props
+        .map(p => `      case '${p.name.toLowerCase()}':
+      case 'data-${kebab(p.name)}':
+        this.${p.name} = newValue;
+        break;`)
+        .join("\n");
+    const attrChanged = component.props.length === 0 ? "" : `
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+${attrCases}
+    }
+  }`;
+    const textCases = template.textBindings
+        .map(b => `        case 'argon-text:${b.id}':
+          this.#textStart${b.id} = marker;
+          break;
+        case '/argon-text:${b.id}':
+          this.#textEnd${b.id} = marker;
+          break;`)
+        .join("\n");
+    const walker = template.textBindings.length > 0
+        ? `    const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+    let marker;
+    while ((marker = walker.nextNode())) {
+      switch (marker.nodeValue) {
+${textCases}
+      }
+    }
+`
+        : "";
+    const attrIds = [...new Set(template.attrBindings.map(b => b.id))];
+    const attrQueries = attrIds
+        .map(id => `    this.#attr${id} = root.querySelector('[data-argon-bind="${id}"]');`)
+        .join("\n");
+    const wiring = template.events
+        .map(b => {
+        const handler = print(template.exprs[b.exprIndex]);
+        return `    scope.querySelectorAll('[data-argon="${b.id}"]').forEach(el => el.addEventListener('${b.event}', ${handler}));`;
+    })
+        .join("\n");
+    const textFields = template.textBindings.map(b => `  #textStart${b.id};
+  #textEnd${b.id};${listBindings.has(b.id) ? "" : `
+  #textLast${b.id};`}`).join("\n");
+    const attrFields = attrIds.map(id => `  #attr${id};`).join("\n");
+    const attrMemoFields = template.attrBindings.map((_b, i) => `  #attrLast${i};`).join("\n");
+    const listsField = listBindings.size > 0 ? "  #lists = {};" : "";
+    // ── Refs and lifecycle hooks ──
+    //
+    // A ref resolves lazily against the live shadow DOM, so it stays correct
+    // even when its element sits inside a re-rendered fragment. Mount callbacks
+    // run on connect; their returned cleanups (and effect cleanups) run on
+    // disconnect, and everything re-arms if the element is re-inserted.
+    const refFields = component.refs
+        .map(name => `  #${name} = (() => { const self = this; return { get current() { return self.#root ? self.#root.querySelector('[data-argon-ref="${name}"]') : null; } }; })();`)
+        .join("\n");
+    // Composed-component prop encoding: JSON for structs/arrays, String for
+    // scalars; #attrEsc additionally escapes for HTML-parsed contexts.
+    let usesPropAttr = false;
+    const notePropAttr = (e) => visitExpr(e, x => {
+        if (x.kind === "propattr")
+            usesPropAttr = true;
+    });
+    for (const e of template.exprs)
+        notePropAttr(e);
+    for (const s of setupStmts) {
+        if (s.kind === "let")
+            notePropAttr(s.init);
+    }
+    const attrHelpers = !usesPropAttr
+        ? ""
+        : `  #attrRaw(v) {
+    return typeof v === 'object' ? JSON.stringify(v) : String(v);
+  }
+
+  #attrEsc(v) {
+    return this.#attrRaw(v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
+  }
+
+`;
+    // Text/attribute escaping for interpolated values, matching the Rust
+    // backend's argon_escape_text / argon_escape_attr so SSR and CSR agree.
+    const escHelpers = [
+        usesEscText
+            ? `  #escText(v) {
+    return String(v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }`
+            : "",
+        usesEscAttr
+            ? `  #escAttr(v) {
+    return String(v).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+  }`
+            : "",
+    ].filter(Boolean).join("\n\n");
+    const hooksOf = (hook) => component.setup.filter((s) => s.kind === "hook" && s.hook === hook);
+    const mounts = hooksOf("mount");
+    const effects = hooksOf("effect");
+    const hasHooks = mounts.length > 0 || effects.length > 0;
+    const hookFields = hasHooks
+        ? `  #hooksLive = false;${mounts.length > 0 ? "\n  #cleanups = [];" : ""}`
+        : "";
+    const effectMethods = effects
+        .map((e, i) => `  #effect${i}Cleanup;
+  #effect${i}() {
+    if (this.#effect${i}Cleanup) this.#effect${i}Cleanup();
+    const cleanup = (${opaqueExpr(e.text)})();
+    this.#effect${i}Cleanup = typeof cleanup === 'function' ? cleanup : undefined;
+  }`)
+        .join("\n\n");
+    // Effects re-run after the DOM update for any tracked name they read.
+    const effectTriggers = effects
+        .map((e, i) => {
+        const deps = [...new Set(e.freeIds.filter(n => tracked.has(n)))];
+        if (deps.length === 0)
+            return "";
+        return `    if (this.#hooksLive && (${deps.map(d => `prop === '${d}'`).join(" || ")})) this.#effect${i}();`;
+    })
+        .filter(Boolean)
+        .join("\n");
+    const mountRuns = mounts
+        .map(m => `    {
+      const cleanup = (${opaqueExpr(m.text)})();
+      if (typeof cleanup === 'function') this.#cleanups.push(cleanup);
+    }`)
+        .join("\n");
+    const effectRuns = effects.map((_e, i) => `    this.#effect${i}();`).join("\n");
+    const hookConnect = hasHooks
+        ? `
+    if (this.#hooksLive) return;
+    this.#hooksLive = true;
+${[mountRuns, effectRuns].filter(Boolean).join("\n")}`
+        : "";
+    const effectCleanups = effects
+        .map((_e, i) => `    if (this.#effect${i}Cleanup) { this.#effect${i}Cleanup(); this.#effect${i}Cleanup = undefined; }`)
+        .join("\n");
+    const disconnected = !hasHooks ? "" : `
+
+  disconnectedCallback() {
+    this.#hooksLive = false;
+${[mounts.length > 0 ? "    for (const cleanup of this.#cleanups.splice(0)) cleanup();" : "", effectCleanups].filter(Boolean).join("\n")}
+  }`;
+    const bindingFields = [textFields, attrFields, attrMemoFields, listsField, refFields, hookFields].filter(Boolean).join("\n");
+    // Keyed list patching: items are matched by key, so reordered or spliced
+    // items move their existing DOM nodes; only items whose rendered HTML
+    // changed (or that are genuinely new) are re-parsed.
+    const reconcileKeyedList = !hasKeyedList ? "" : `
+  #reconcileKeyedList(id, start, end, items) {
+    if (!start || !end) return;
+    let list = this.#lists[id];
+    if (!list) {
+      let node = start.nextSibling;
+      while (node && node !== end) { const next = node.nextSibling; node.remove(); node = next; }
+      list = this.#lists[id] = { keys: [], htmls: [], nodes: [] };
+    }
+    // nodes[i] = [marker comment, ...content nodes]; owned by the reconciler,
+    // so item DOM never needs re-walking between updates.
+    const oldKeys = list.keys, oldHtmls = list.htmls, oldNodes = list.nodes;
+    const oldIndex = new Map();
+    for (let i = 0; i < oldKeys.length; i++) oldIndex.set(oldKeys[i], i);
+    const used = new Array(oldKeys.length).fill(false);
+    const parse = (html) => {
+      const template = document.createElement('template');
+      template.innerHTML = html;
+      this.#wireEvents(template.content);
+      return template.content;
+    };
+    const keys = [], htmls = [], nodes = [];
+    let p = 0;
+    for (const [key, value] of items) {
+      const html = String(value);
+      while (p < oldKeys.length && used[p]) p++;
+      const anchor = p < oldKeys.length ? oldNodes[p][0] : end;
+      const i = oldIndex.get(key);
+      if (i === undefined || used[i]) {
+        const mark = document.createComment('argon-item');
+        const content = parse(html);
+        const fresh = [mark, ...content.childNodes];
+        anchor.before(mark, content);
+        nodes.push(fresh);
+      } else {
+        used[i] = true;
+        if (i === p) p++;
+        else anchor.before(...oldNodes[i]);
+        if (oldHtmls[i] !== html) {
+          for (let k = 1; k < oldNodes[i].length; k++) oldNodes[i][k].remove();
+          const content = parse(html);
+          const fresh = [oldNodes[i][0], ...content.childNodes];
+          oldNodes[i][0].after(content);
+          nodes.push(fresh);
+        } else {
+          nodes.push(oldNodes[i]);
+        }
+      }
+      keys.push(key);
+      htmls.push(html);
+    }
+    for (let i = 0; i < oldNodes.length; i++) {
+      if (!used[i]) for (const n of oldNodes[i]) n.remove();
+    }
+    list.keys = keys;
+    list.htmls = htmls;
+    list.nodes = nodes;
+  }
+`;
+    // Per-item list patching: each item's rendered HTML is cached, and a
+    // comment marker delimits its DOM nodes. Only items whose HTML changed are
+    // re-parsed and swapped in; the rest keep their nodes (and listeners).
+    const reconcileList = !hasPlainList ? "" : `
+  #reconcileList(id, start, end, items) {
+    if (!start || !end) return;
+    let list = this.#lists[id];
+    if (!list) {
+      let node = start.nextSibling;
+      while (node && node !== end) { const next = node.nextSibling; node.remove(); node = next; }
+      list = this.#lists[id] = { htmls: [], marks: [] };
+    }
+    const { htmls, marks } = list;
+    if (items.length < htmls.length) {
+      let node = marks[items.length];
+      while (node && node !== end) { const next = node.nextSibling; node.remove(); node = next; }
+      htmls.length = items.length;
+      marks.length = items.length;
+    }
+    for (let i = 0; i < items.length; i++) {
+      const html = String(items[i]);
+      if (i < htmls.length) {
+        if (htmls[i] === html) continue;
+        const stop = i + 1 < marks.length ? marks[i + 1] : end;
+        let node = marks[i].nextSibling;
+        while (node && node !== stop) { const next = node.nextSibling; node.remove(); node = next; }
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        this.#wireEvents(template.content);
+        stop.before(template.content);
+        htmls[i] = html;
+      } else {
+        const mark = document.createComment('argon-item');
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        this.#wireEvents(template.content);
+        end.before(mark, template.content);
+        marks.push(mark);
+        htmls.push(html);
+      }
+    }
+  }
+`;
+    const hydrate = `${ssrReads}${ssrReads ? "\n" : ""}    this.#initState();
+    const shadow = this.shadowRoot;
+    const root = shadow ?? this.attachShadow({ mode: 'open' });
+    if (!shadow) root.innerHTML = this.#render();
+    this.#mount(root);`;
+    const connected = hasHooks
+        ? `  connectedCallback() {
+    if (!this.#isCSR && !this.#bindingsMounted) {
+${hydrate}
+    }${hookConnect}
+  }${disconnected}`
+        : `  connectedCallback() {
+    if (this.#isCSR || this.#bindingsMounted) return;
+${hydrate}
+  }`;
+    return `export class ${component.className} extends HTMLElement {
+  static observedAttributes = ${JSON.stringify(observed)};
+
+  ${[...component.props.map(propField), ...component.states.map(stateField)].join("\n  ")}
+  ${component.props.map(p => `#${p.name}Set = false;`).join("\n  ")}
+${bindingFields ? bindingFields + "\n" : ""}  #root;
+  #bindingsMounted = false;
+  #isCSR = false;
+
+${accessors}
+
+  constructor(props) {
+    super();
+    if (props !== undefined) {
+      this.#isCSR = true;
+${ctorAssigns}
+      this.#initState();
+      const shadow = this.attachShadow({ mode: 'open' });
+      shadow.innerHTML = this.#render();
+      this.#mount(shadow);
+    }
+  }
+
+${connected}
+${attrChanged}
+
+  #initState() {
+${stateInits}
+  }
+
+  #render() {
+    ${prelude}
+    return \`${renderBody}\`;
+  }
+
+  #mount(root) {
+    this.#root = root;
+${walker}${attrQueries}${attrQueries ? "\n" : ""}    this.#bindingsMounted = true;
+    this.#updateBindings();
+    this.#wireEvents(root);
+    this.setAttribute('hydrated', '');
+  }
+
+  #replaceRange(start, end, value) {
+    if (!start || !end) return;
+    const html = String(value);
+    const sole = start.nextSibling;
+    if (sole && sole !== end && sole.nextSibling === end && sole.nodeType === 3 && !/[<&]/.test(html)) {
+      sole.data = html;
+      return;
+    }
+    let node = start.nextSibling;
+    while (node && node !== end) {
+      const next = node.nextSibling;
+      node.remove();
+      node = next;
+    }
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    this.#wireEvents(template.content);
+    end.before(template.content);
+  }
+${reconcileList}${reconcileKeyedList}${attrHelpers}${escHelpers ? escHelpers + "\n\n" : ""}${effectMethods ? effectMethods + "\n\n" : ""}
+  #updateBindings(prop) {
+    if (!this.#bindingsMounted) return;
+    ${updatePrelude}
+${updateStatements}${effectTriggers ? "\n" + effectTriggers : ""}
+  }
+
+  #wireEvents(scope) {
+    const root = this.#root;
+${wiring}
+  }
+}
+
+customElements.define('${component.tagName}', ${component.className});`;
+}
+function propAccessors(prop, print) {
+    const fallback = prop.default !== undefined ? `value ?? ${print(prop.default)}` : "value";
+    const next = coerce(prop.type, "raw");
+    return `  get ${prop.name}() {
+    return this.#${prop.name};
+  }
+
+  set ${prop.name}(value) {
+    const raw = ${fallback};
+    const next = raw == null ? raw : ${next};
+    if (Object.is(this.#${prop.name}, next)) return;
+    this.#${prop.name} = next;
+    this.#${prop.name}Set = true;
+    this.#updateBindings('${prop.name}');
+  }`;
+}
+function stateSetter(state) {
+    const setter = "#set" + cap(state.name);
+    return `  ${setter}(value) {
+    if (Object.is(this.#${state.name}, value)) return;
+    this.#${state.name} = value;
+    this.#updateBindings('${state.name}');
+  }`;
+}
+//# sourceMappingURL=client.js.map