@fluixi/compiler 1.0.0-alpha.83 → 1.0.0-alpha.84

package/dist/codegen/backends/imperative.js

@@ -2,6 +2,7 @@ import { planPartialTemplate } from '../partial-template.js';
 import { isSerializable, serializeStatic, templatePositions, isPlainLiteralAttr, htmlAttrName, } from '../serialize-static.js';
 import { RUNTIME_CONTRACT_V1 } from '../contract.js';
 import { markHole, markProps, SOURCE_MARKER } from '../../transform/source-locations.js';
+import { paren } from '../../analyze/paren.js';
 /**
  * Imperative fine-grained backend — emits createNativeElement/insert/spread/
  * createComponent (RUNTIME_CONTRACT_V1), the runtime proven by the @fluixi/dom
@@ -38,12 +39,12 @@ function propValue(p) {
         // A ref is not reactive, but which variable ends up holding the element is worth
         // saying, so it carries its own text and position.
         if (p.name === 'ref' && p.at)
-            return markHole(`(${p.expr})`, p.at.line, p.at.column, p.expr);
+            return markHole(paren(p.expr, 'value'), p.at.line, p.at.column, p.expr);
         // Events and non-reactive expressions pass through; reactive ones become thunks
         // so the runtime (spread/insert) can wire a render effect.
         if (!p.reactive)
-            return `(${p.expr})`;
-        const accessor = `() => (${p.expr})`;
+            return paren(p.expr, 'value');
+        const accessor = `() => ${paren(p.expr, 'arrowBody')}`;
         // `at` is the gate: a production build carries no marker.
         return p.at ? markHole(accessor, p.at.line, p.at.column, p.directive) : accessor;
     }
@@ -58,8 +59,9 @@ function propValue(p) {
  * function instead of the value (e.g. `history.get is not a function`).
  */
 function componentPropValue(p) {
+    // Sits in a `return`, where a top-level comma would read as a sequence.
     if (p.expr !== undefined)
-        return `(${p.expr})`;
+        return paren(p.expr, 'value');
     return JSON.stringify(p.literal ?? true);
 }
 /** Build a props object literal (or mergeProps(...) when spreads are present). */
@@ -145,7 +147,9 @@ function emitComponent(name, props, children, used, templates, at) {
     const mark = at
         ? `globalThis.${SOURCE_MARKER}?.(${JSON.stringify(at.file)},${at.line},${at.column},${JSON.stringify(name)}), `
         : '';
-    return `createMemo((${mark}() => createComponent(${name}, ${obj})))`;
+    // The mark makes this a sequence, which has to stay wrapped to pass as one argument.
+    // Without one there is nothing to wrap, and a production build never has one.
+    return `createMemo(${paren(`${mark}() => createComponent(${name}, ${obj})`, 'value')})`;
 }
 /** `el.setAttribute("class", "card")` for a compile-time constant. */
 function staticAttrAssignment(el, prop) {
@@ -165,8 +169,8 @@ function emitNode(node, used, templates) {
             return JSON.stringify(node.value);
         case 'expr': {
             if (!node.reactive)
-                return `(${node.code})`;
-            const accessor = `() => (${node.code})`;
+                return paren(node.code, 'value');
+            const accessor = `() => ${paren(node.code, 'arrowBody')}`;
             return node.at ? markHole(accessor, node.at.line, node.at.column) : accessor;
         }
         case 'fragment':
@@ -229,7 +233,7 @@ function emitNode(node, used, templates) {
                         // `holeScope` places the hydration cursor at what the server rendered for
                         // this hole, so anything the content builds internally adopts too.
                         lines.push(`insert(${hole.parentRef}, holeScope(${hole.startRef}, () => ` +
-                            `(${emitNode(hole.node, used, templates)})), ` +
+                            `${paren(emitNode(hole.node, used, templates), 'arrowBody')}), ` +
                             `${hole.endRef}, holeContent(${hole.startRef}, ${hole.endRef}));`);
                     }
                     lines.push('return _el$;');

package/dist/codegen/backends/imperative.mjs

@@ -1 +1,519 @@
-var H=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]),k={className:"class",htmlFor:"for"},B=new Set(["innerHTML","outerHTML","innerText","textContent","value","checked","selected","muted","defaultValue","defaultChecked","children","ref"]),K=new Set(["script","style","textarea","title"]);function $(e){return K.has(e)}function C(e){return k[e]??e}function d(e){return e.kind!=="attr"||e.expr!==void 0||e.name.includes(":")?!1:!B.has(e.name)}function S(e){if(!e.static||$(e.tag))return!1;for(let t of e.props)if(!d(t))return!1;for(let t of e.children)if(t.kind!=="text"&&!(t.kind==="element"&&S(t)))return!1;return!0}function g(e){let t=e.props.map(z).filter(Boolean).join(""),n=`<${e.tag}${t}>`;return H.has(e.tag)?n:`${n}${e.children.map(U).join("")}</${e.tag}>`}function U(e){if(e.kind==="text")return G(e.value);if(e.kind!=="element")throw new Error(`serializeStatic: unexpected ${e.kind}`);return g(e)}function z(e){let t=k[e.name]??e.name,n=e.literal;return n===!0||n===void 0?` ${t}`:n===!1||n===null?"":` ${t}="${W(String(n))}"`}function W(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function G(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function x(e){let t=[],n,r=s=>{n??=s.at?.file,t.push(s.at?.line??0,s.at?.column??0);for(let o of s.children)o.kind==="element"&&r(o)};return r(e),n&&t.some(s=>s!==0)?{file:n,pos:t}:void 0}var Y="<!--fx-->",Z="<!--fx/-->";function R(e){return e.kind==="expr"||e.kind==="component"||e.kind==="control"}function q(e){return e.kind==="text"||e.kind==="element"&&O(e)}function O(e){return e.svg||$(e.tag)||!e.props.every(t=>d(t))?!1:e.children.every(t=>q(t)||R(t))}function y(e){if(R(e))return!0;let t=e.children;return t?t.some(y):!1}function P(e){for(let t=0;t<e.children.length;t++){let n=e.children[t];if(n.kind==="text"&&(n.value===""||e.children[t+1]?.kind==="text"))return!1}return e.children.every(t=>t.kind!=="element"||P(t))}function w(e){if(!O(e)||!P(e)||!e.children.some(y))return null;let t=[],n=[],r=0,s=p=>{let i=`_n$${r++}`;return t.push({ref:i,expr:p}),i};return o(e,"_el$"),{html:X(e),tag:e.tag,steps:t,holes:n};function o(p,i){let f=-1;p.children.forEach((u,a)=>{y(u)&&(f=a)});let l=null;for(let u=0;u<=f;u++){let a=p.children[u],c=l?`${l}.nextSibling`:`${i}.firstChild`;if(R(a)){let v=s(c),T=s(`holeEnd(${v})`);n.push({parentRef:i,startRef:v,endRef:T,node:a}),l=T;continue}let b=s(c);a.kind==="element"&&y(a)&&o(a,b),l=b}}}function X(e){return g(_(e)).split(A).join(Y+Z)}function _(e){return{...e,children:e.children.map(t=>R(t)?{kind:"text",value:A}:t.kind==="element"?_(t):t)}}var A="\0fx-hole\0";var I={version:1,module:"@fluixi/dom",symbols:["createNativeElement","insert","spread","setAttribute","delegateEvents","createComponent","createMemo","untrack","Show","For","Index","Switch","Match","Dynamic","ErrorBoundary"]},fe={version:2,module:"@fluixi/dom",symbols:[...I.symbols,"template","cloneTemplate","walk"]};var m="@fluixi/reactive/signal",E={$signal:{export:"signal",module:m,returns:"signal-handle"},$memo:{export:"memo",module:m,returns:"memo-handle"},$effect:{export:"effect",module:m,returns:"effect"},$store:{export:"store",module:"@fluixi/reactive/store",returns:"store-handle"},$resource:{export:"resource",module:m,returns:"resource-handle"},$selector:{export:"createSelector",module:m,returns:"memo-accessor"},$deferred:{export:"createDeferred",module:m,returns:"memo-accessor"},$untrack:{export:"untrack",module:m,returns:"plain"},$untrackStore:{export:"untrackStore",module:"@fluixi/reactive/store",returns:"plain"}};var pe=new RegExp(`\\$(?:${Object.keys(E).map(e=>e.slice(1)).join("|")})\\s*\\(`);var M="__fx_source";var Q="__fx_hole",N=(e,t,n,r)=>`(globalThis.${Q} ?? ((f) => f))(${e},${t},${n}${r===void 0?"":`,${JSON.stringify(r)}`})`,ee="__fx_props",D=(e,t)=>`(globalThis.${ee} ?? ((p) => p))(${e},${JSON.stringify(t)})`;var te={show:"Show",for:"For",index:"Index",switch:"Switch",match:"Match",dynamic:"Dynamic",errorBoundary:"ErrorBoundary",suspense:"Suspense"};function ne(e){return/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(e)}function L(e){return ne(e)?e:JSON.stringify(e)}function re(e){if(e.expr!==void 0){if(e.name==="ref"&&e.at)return N(`(${e.expr})`,e.at.line,e.at.column,e.expr);if(!e.reactive)return`(${e.expr})`;let t=`() => (${e.expr})`;return e.at?N(t,e.at.line,e.at.column,e.directive):t}return JSON.stringify(e.literal??!0)}function ie(e){return e.expr!==void 0?`(${e.expr})`:JSON.stringify(e.literal??!0)}function se(e,t,n){let r=e.filter(i=>i.kind==="spread"),o=e.filter(i=>i.kind!=="spread").map(i=>`${L(i.name)}: ${re(i)}`);t!=null&&o.push(`children: ${t}`);let p=`{ ${o.join(", ")} }`;return r.length>0?(n.add("mergeProps"),`mergeProps(${r.map(i=>i.expr).join(", ")}, ${p})`):p}function j(e,t){return t?N(e,t.line,t.column):e}function V(e,t,n){return e.length===1?h(e[0],t,n):`[${e.map(r=>h(r,t,n)).join(", ")}]`}function J(e,t,n,r,s,o){r.add("createMemo"),r.add("createComponent");let p=t.filter(c=>c.kind==="spread"),i=t.filter(c=>c.kind!=="spread"),f=i.map(c=>`get ${L(c.name)}() { return ${ie(c)}; }`);n.length>0&&f.push(`get children() { return ${V(n,r,s)}; }`);let l=`{ ${f.join(", ")} }`;p.length>0&&(r.add("mergeProps"),l=`mergeProps(${p.map(c=>c.expr).join(", ")}, ${l})`);let u={};for(let c of i)c.at&&(u[c.name]=[c.at.line,c.at.column]);return Object.keys(u).length&&(l=D(l,u)),`createMemo((${o?`globalThis.${M}?.(${JSON.stringify(o.file)},${o.line},${o.column},${JSON.stringify(e)}), `:""}() => createComponent(${e}, ${l})))`}function oe(e,t){let n=C(t.name),r=t.literal;return r===!0||r===void 0?`${e}.setAttribute(${JSON.stringify(n)}, "");`:r===!1||r===null?"":`${e}.setAttribute(${JSON.stringify(n)}, ${JSON.stringify(String(r))});`}var F=!1;function h(e,t,n){switch(e.kind){case"text":return JSON.stringify(e.value);case"expr":{if(!e.reactive)return`(${e.code})`;let r=`() => (${e.code})`;return e.at?N(r,e.at.line,e.at.column):r}case"fragment":return e.children.length===0?"null":V(e.children,t,n);case"component":return j(J(e.name,e.props,e.children,t,n,e.at),e.bindAt??e.at);case"control":{let r=te[e.control]??e.control;return t.add(r),j(J(r,e.props,e.children,t,n),e.bindAt)}case"element":{if(n&&e.static&&!e.svg&&S(e)){t.add("templateNode");let i=`_tmpl$${n.length}`;n.push({id:i,html:g(e),tag:e.tag,svg:!1});let f=x(e);return f?`templateNode(${i}, ${JSON.stringify(e.tag)}, false, false, ${JSON.stringify(f)})`:`templateNode(${i}, ${JSON.stringify(e.tag)})`}if(n&&F){let i=w(e);if(i){t.add("templateNode"),t.add("insert"),t.add("holeEnd"),t.add("holeContent"),t.add("holeScope");let f=`_tmpl$${n.length}`;n.push({id:f,html:i.html,tag:i.tag,svg:!1});let l=x(e),u=[`const _el$ = templateNode(${f}, ${JSON.stringify(i.tag)}, true${l?`, false, ${JSON.stringify(l)}`:""});`];for(let a of i.steps)u.push(`const ${a.ref} = ${a.expr};`);for(let a of i.holes)u.push(`insert(${a.parentRef}, holeScope(${a.startRef}, () => (${h(a.node,t,n)})), ${a.endRef}, holeContent(${a.startRef}, ${a.endRef}));`);return u.push("return _el$;"),`(() => { ${u.join(" ")} })()`}}t.add("createNativeElement");let r=JSON.stringify(e.tag),s="_el$",o=[],p=e.at?`${r}, ${e.svg}, ${JSON.stringify(e.at)}`:e.svg?`${r}, true`:r;if(o.push(`const ${s} = createNativeElement(${p});`),e.props.length>0)if(!e.svg&&e.props.every(d))for(let i of e.props)o.push(oe(s,i));else{t.add("spread");let i=e.svg?", isSVG: true":"";o.push(`spread({ element: ${s}, props: ${se(e.props,null,t)}${i} });`)}for(let i of e.children){t.add("insert");let f=h(i,t,n),l=i.kind==="expr"&&i.reactive||i.kind==="component"||i.kind==="control";o.push(l?`insert(${s}, ${f}, null);`:`insert(${s}, ${f});`)}return o.push(`return ${s};`),`(() => { ${o.join(" ")} })()`}}}function Te(e,t){if(!t||t.length===0)return e;let n=new Map(t.map(r=>[r.id,JSON.stringify(r.html)]));return e.replace(/_tmpl\$\d+/g,r=>n.get(r)??r)}var ke={name:"imperative",contract:I,emit(e,t){let n=new Set,r=t?.templateClone!==!1?[]:void 0;return F=t?.partialTemplates===!0,{code:h(e,n,r),imports:Array.from(n),templates:r}}};export{ke as imperativeBackend,Te as inlineTemplates};
+// src/codegen/serialize-static.ts
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+var HTML_NAME = {
+  className: "class",
+  htmlFor: "for"
+};
+var PROPERTY_ONLY = /* @__PURE__ */ new Set([
+  "innerHTML",
+  "outerHTML",
+  "innerText",
+  "textContent",
+  "value",
+  "checked",
+  "selected",
+  "muted",
+  "defaultValue",
+  "defaultChecked",
+  "children",
+  "ref"
+]);
+var RAW_TEXT_ELEMENTS = /* @__PURE__ */ new Set(["script", "style", "textarea", "title"]);
+function isRawTextElement(tag) {
+  return RAW_TEXT_ELEMENTS.has(tag);
+}
+function htmlAttrName(name) {
+  return HTML_NAME[name] ?? name;
+}
+function isPlainLiteralAttr(prop) {
+  if (prop.kind !== "attr") return false;
+  if (prop.expr !== void 0) return false;
+  if (prop.name.includes(":")) return false;
+  return !PROPERTY_ONLY.has(prop.name);
+}
+function isSerializable(node) {
+  if (!node.static) return false;
+  if (isRawTextElement(node.tag)) return false;
+  for (const prop of node.props) {
+    if (!isPlainLiteralAttr(prop)) return false;
+  }
+  for (const child of node.children) {
+    if (child.kind === "text") continue;
+    if (child.kind === "element" && isSerializable(child)) continue;
+    return false;
+  }
+  return true;
+}
+function serializeStatic(node) {
+  const attrs = node.props.map(serializeProp).filter(Boolean).join("");
+  const open = `<${node.tag}${attrs}>`;
+  if (VOID_ELEMENTS.has(node.tag)) return open;
+  return `${open}${node.children.map(serializeChild).join("")}</${node.tag}>`;
+}
+function serializeChild(child) {
+  if (child.kind === "text") return escapeText(child.value);
+  if (child.kind !== "element") throw new Error(`serializeStatic: unexpected ${child.kind}`);
+  return serializeStatic(child);
+}
+function serializeProp(prop) {
+  const name = HTML_NAME[prop.name] ?? prop.name;
+  const value = prop.literal;
+  if (value === true || value === void 0) return ` ${name}`;
+  if (value === false || value === null) return "";
+  return ` ${name}="${escapeAttr(String(value))}"`;
+}
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function templatePositions(root) {
+  const pos = [];
+  let file;
+  const walk = (el) => {
+    file ??= el.at?.file;
+    pos.push(el.at?.line ?? 0, el.at?.column ?? 0);
+    for (const child of el.children) if (child.kind === "element") walk(child);
+  };
+  walk(root);
+  return file && pos.some((n) => n !== 0) ? { file, pos } : void 0;
+}
+
+// src/codegen/partial-template.ts
+var HOLE_START = "<!--fx-->";
+var HOLE_END = "<!--fx/-->";
+function isHole(node) {
+  return node.kind === "expr" || node.kind === "component" || node.kind === "control";
+}
+function isTemplateChild(node) {
+  return node.kind === "text" || node.kind === "element" && isTemplateElement(node);
+}
+function isTemplateElement(node) {
+  if (node.svg) return false;
+  if (isRawTextElement(node.tag)) return false;
+  if (!node.props.every((p) => isPlainLiteralAttr(p))) return false;
+  return node.children.every((c) => isTemplateChild(c) || isHole(c));
+}
+function containsHole(node) {
+  if (isHole(node)) return true;
+  const children = node.children;
+  return children ? children.some(containsHole) : false;
+}
+function addressable(el) {
+  for (let i = 0; i < el.children.length; i++) {
+    const child = el.children[i];
+    if (child.kind === "text") {
+      if (child.value === "") return false;
+      if (el.children[i + 1]?.kind === "text") return false;
+    }
+  }
+  return el.children.every((c) => c.kind !== "element" || addressable(c));
+}
+function planPartialTemplate(root) {
+  if (!isTemplateElement(root)) return null;
+  if (!addressable(root)) return null;
+  if (!root.children.some(containsHole)) return null;
+  const steps = [];
+  const holes = [];
+  let refCount = 0;
+  const declare = (expr) => {
+    const ref = `_n$${refCount++}`;
+    steps.push({ ref, expr });
+    return ref;
+  };
+  walk(root, "_el$");
+  return { html: serializeWithMarkers(root), tag: root.tag, steps, holes };
+  function walk(el, elementRef) {
+    let last = -1;
+    el.children.forEach((child, i) => {
+      if (containsHole(child)) last = i;
+    });
+    let previous = null;
+    for (let i = 0; i <= last; i++) {
+      const child = el.children[i];
+      const expr = previous ? `${previous}.nextSibling` : `${elementRef}.firstChild`;
+      if (isHole(child)) {
+        const startRef = declare(expr);
+        const endRef = declare(`holeEnd(${startRef})`);
+        holes.push({ parentRef: elementRef, startRef, endRef, node: child });
+        previous = endRef;
+        continue;
+      }
+      const ref = declare(expr);
+      if (child.kind === "element" && containsHole(child)) walk(child, ref);
+      previous = ref;
+    }
+  }
+}
+function serializeWithMarkers(el) {
+  return serializeStatic(withSentinels(el)).split(SENTINEL).join(HOLE_START + HOLE_END);
+}
+function withSentinels(el) {
+  return {
+    ...el,
+    children: el.children.map(
+      (child) => isHole(child) ? { kind: "text", value: SENTINEL } : child.kind === "element" ? withSentinels(child) : child
+    )
+  };
+}
+var SENTINEL = "\0fx-hole\0";
+
+// src/codegen/contract.ts
+var RUNTIME_CONTRACT_V1 = {
+  version: 1,
+  module: "@fluixi/dom",
+  symbols: [
+    "createNativeElement",
+    "insert",
+    "spread",
+    "setAttribute",
+    "delegateEvents",
+    "createComponent",
+    "createMemo",
+    "untrack",
+    "Show",
+    "For",
+    "Index",
+    "Switch",
+    "Match",
+    "Dynamic",
+    "ErrorBoundary"
+  ]
+};
+var RUNTIME_CONTRACT_V2 = {
+  version: 2,
+  module: "@fluixi/dom",
+  symbols: [...RUNTIME_CONTRACT_V1.symbols, "template", "cloneTemplate", "walk"]
+};
+
+// src/analyze/intrinsics.ts
+var REACTIVE_MODULE = "@fluixi/reactive/signal";
+var INTRINSICS = {
+  $signal: { export: "signal", module: REACTIVE_MODULE, returns: "signal-handle" },
+  $memo: { export: "memo", module: REACTIVE_MODULE, returns: "memo-handle" },
+  $effect: { export: "effect", module: REACTIVE_MODULE, returns: "effect" },
+  $store: { export: "store", module: "@fluixi/reactive/store", returns: "store-handle" },
+  $resource: { export: "resource", module: REACTIVE_MODULE, returns: "resource-handle" },
+  // No short runtime form for these yet, so the intrinsic stands for the `create*`
+  // name. Still worth having — no import to write — and when a shorter form is
+  // designed, the change is this line rather than a compiler pass.
+  $selector: { export: "createSelector", module: REACTIVE_MODULE, returns: "memo-accessor" },
+  $deferred: { export: "createDeferred", module: REACTIVE_MODULE, returns: "memo-accessor" },
+  // Not value constructors, but the compiler has to know them: they change what a read
+  // does. `untrack` suppresses dependency collection, which is exactly the kind of thing
+  // dependency analysis must not guess at.
+  $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
+  $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" }
+};
+var INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
+
+// src/transform/source-locations.ts
+var SOURCE_MARKER = "__fx_source";
+var HOLE_MARKER = "__fx_hole";
+var markHole = (accessor, line, column, name) => `(globalThis.${HOLE_MARKER} ?? ((f) => f))(${accessor},${line},${column}${name === void 0 ? "" : `,${JSON.stringify(name)}`})`;
+var PROPS_MARKER = "__fx_props";
+var markProps = (object, at) => `(globalThis.${PROPS_MARKER} ?? ((p) => p))(${object},${JSON.stringify(at)})`;
+
+// src/analyze/paren.ts
+function skipQuoted(src, start) {
+  const quote = src[start];
+  for (let i = start + 1; i < src.length; i++) {
+    const c = src[i];
+    if (c === "\\") i++;
+    else if (c === quote) return i + 1;
+    else if (c === "\n") return -1;
+  }
+  return -1;
+}
+function skipTemplate(src, start) {
+  let i = start + 1;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === "\\") {
+      i += 2;
+    } else if (c === "`") {
+      return i + 1;
+    } else if (c === "$" && src[i + 1] === "{") {
+      let depth = 1;
+      i += 2;
+      while (i < src.length && depth > 0) {
+        const k = src[i];
+        if (k === "\\") i += 2;
+        else if (k === "`") {
+          const end = skipTemplate(src, i);
+          if (end < 0) return -1;
+          i = end;
+        } else if (k === '"' || k === "'") {
+          const end = skipQuoted(src, i);
+          if (end < 0) return -1;
+          i = end;
+        } else {
+          if (k === "{") depth++;
+          else if (k === "}") depth--;
+          i++;
+        }
+      }
+    } else {
+      i++;
+    }
+  }
+  return -1;
+}
+function skipRegex(src, start) {
+  let inClass = false;
+  for (let i = start + 1; i < src.length; i++) {
+    const c = src[i];
+    if (c === "\\") i++;
+    else if (c === "[") inClass = true;
+    else if (c === "]") inClass = false;
+    else if (c === "\n") return -1;
+    else if (c === "/" && !inClass) {
+      let end = i + 1;
+      while (end < src.length && /[a-z]/i.test(src[end])) end++;
+      return end;
+    }
+  }
+  return -1;
+}
+function divides(prev) {
+  return prev !== "" && /[A-Za-z0-9_$)\]]/.test(prev);
+}
+function topLevelComma(src) {
+  let depth = 0;
+  let prev = "";
+  let i = 0;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === '"' || c === "'") {
+      const end = skipQuoted(src, i);
+      if (end < 0) return null;
+      i = end;
+      prev = c;
+    } else if (c === "`") {
+      const end = skipTemplate(src, i);
+      if (end < 0) return null;
+      i = end;
+      prev = c;
+    } else if (c === "/" && src[i + 1] === "/") {
+      return null;
+    } else if (c === "/" && src[i + 1] === "*") {
+      const end = src.indexOf("*/", i + 2);
+      if (end < 0) return null;
+      i = end + 2;
+    } else if (c === "/" && !divides(prev)) {
+      const end = skipRegex(src, i);
+      if (end < 0) return null;
+      i = end;
+      prev = "/";
+    } else {
+      if (c === "(" || c === "[" || c === "{") depth++;
+      else if (c === ")" || c === "]" || c === "}") {
+        depth--;
+        if (depth < 0) return null;
+      } else if (c === "," && depth === 0) return true;
+      if (!/\s/.test(c)) prev = c;
+      i++;
+    }
+  }
+  return depth === 0 ? false : null;
+}
+function paren(code, position) {
+  const src = code.trim();
+  if (src === "") return `(${code})`;
+  if (position === "arrowBody" && src[0] === "{") return `(${code})`;
+  return topLevelComma(src) === false ? code : `(${code})`;
+}
+
+// src/codegen/backends/imperative.ts
+var CONTROL_COMPONENT = {
+  show: "Show",
+  for: "For",
+  index: "Index",
+  switch: "Switch",
+  match: "Match",
+  dynamic: "Dynamic",
+  errorBoundary: "ErrorBoundary",
+  suspense: "Suspense"
+};
+function isIdent(name) {
+  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name);
+}
+function propKey(name) {
+  return isIdent(name) ? name : JSON.stringify(name);
+}
+function propValue(p) {
+  if (p.expr !== void 0) {
+    if (p.name === "ref" && p.at)
+      return markHole(paren(p.expr, "value"), p.at.line, p.at.column, p.expr);
+    if (!p.reactive) return paren(p.expr, "value");
+    const accessor = `() => ${paren(p.expr, "arrowBody")}`;
+    return p.at ? markHole(accessor, p.at.line, p.at.column, p.directive) : accessor;
+  }
+  return JSON.stringify(p.literal ?? true);
+}
+function componentPropValue(p) {
+  if (p.expr !== void 0) return paren(p.expr, "value");
+  return JSON.stringify(p.literal ?? true);
+}
+function emitProps(props, childrenExpr, used) {
+  const spreads = props.filter((p) => p.kind === "spread");
+  const normal = props.filter((p) => p.kind !== "spread");
+  const entries = normal.map((p) => `${propKey(p.name)}: ${propValue(p)}`);
+  if (childrenExpr != null) entries.push(`children: ${childrenExpr}`);
+  const obj = `{ ${entries.join(", ")} }`;
+  if (spreads.length > 0) {
+    used.add("mergeProps");
+    return `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
+  }
+  return obj;
+}
+function markBind(code, at) {
+  return at ? markHole(code, at.line, at.column) : code;
+}
+function emitChildren(children, used, templates) {
+  if (children.length === 1) return emitNode(children[0], used, templates);
+  return `[${children.map((c) => emitNode(c, used, templates)).join(", ")}]`;
+}
+function emitComponent(name, props, children, used, templates, at) {
+  used.add("createMemo");
+  used.add("createComponent");
+  const spreads = props.filter((p) => p.kind === "spread");
+  const normal = props.filter((p) => p.kind !== "spread");
+  const entries = normal.map(
+    (p) => `get ${propKey(p.name)}() { return ${componentPropValue(p)}; }`
+  );
+  if (children.length > 0) {
+    entries.push(`get children() { return ${emitChildren(children, used, templates)}; }`);
+  }
+  let obj = `{ ${entries.join(", ")} }`;
+  if (spreads.length > 0) {
+    used.add("mergeProps");
+    obj = `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
+  }
+  const propAt = {};
+  for (const p of normal) if (p.at) propAt[p.name] = [p.at.line, p.at.column];
+  if (Object.keys(propAt).length) obj = markProps(obj, propAt);
+  const mark = at ? `globalThis.${SOURCE_MARKER}?.(${JSON.stringify(at.file)},${at.line},${at.column},${JSON.stringify(name)}), ` : "";
+  return `createMemo(${paren(`${mark}() => createComponent(${name}, ${obj})`, "value")})`;
+}
+function staticAttrAssignment(el, prop) {
+  const name = htmlAttrName(prop.name);
+  const value = prop.literal;
+  if (value === true || value === void 0) return `${el}.setAttribute(${JSON.stringify(name)}, "");`;
+  if (value === false || value === null) return "";
+  return `${el}.setAttribute(${JSON.stringify(name)}, ${JSON.stringify(String(value))});`;
+}
+var partial = false;
+function emitNode(node, used, templates) {
+  switch (node.kind) {
+    case "text":
+      return JSON.stringify(node.value);
+    case "expr": {
+      if (!node.reactive) return paren(node.code, "value");
+      const accessor = `() => ${paren(node.code, "arrowBody")}`;
+      return node.at ? markHole(accessor, node.at.line, node.at.column) : accessor;
+    }
+    case "fragment":
+      if (node.children.length === 0) return "null";
+      return emitChildren(node.children, used, templates);
+    case "component":
+      return markBind(emitComponent(node.name, node.props, node.children, used, templates, node.at), node.bindAt ?? node.at);
+    case "control": {
+      const name = CONTROL_COMPONENT[node.control] ?? node.control;
+      used.add(name);
+      return markBind(emitComponent(name, node.props, node.children, used, templates), node.bindAt);
+    }
+    case "element": {
+      if (templates && node.static && !node.svg && isSerializable(node)) {
+        used.add("templateNode");
+        const id = `_tmpl$${templates.length}`;
+        templates.push({ id, html: serializeStatic(node), tag: node.tag, svg: false });
+        const at = templatePositions(node);
+        return at ? `templateNode(${id}, ${JSON.stringify(node.tag)}, false, false, ${JSON.stringify(at)})` : `templateNode(${id}, ${JSON.stringify(node.tag)})`;
+      }
+      if (templates && partial) {
+        const plan = planPartialTemplate(node);
+        if (plan) {
+          used.add("templateNode");
+          used.add("insert");
+          used.add("holeEnd");
+          used.add("holeContent");
+          used.add("holeScope");
+          const id = `_tmpl$${templates.length}`;
+          templates.push({ id, html: plan.html, tag: plan.tag, svg: false });
+          const at = templatePositions(node);
+          const lines = [
+            `const _el$ = templateNode(${id}, ${JSON.stringify(plan.tag)}, true${at ? `, false, ${JSON.stringify(at)}` : ""});`
+          ];
+          for (const step of plan.steps) lines.push(`const ${step.ref} = ${step.expr};`);
+          for (const hole of plan.holes) {
+            lines.push(
+              `insert(${hole.parentRef}, holeScope(${hole.startRef}, () => ${paren(emitNode(hole.node, used, templates), "arrowBody")}), ${hole.endRef}, holeContent(${hole.startRef}, ${hole.endRef}));`
+            );
+          }
+          lines.push("return _el$;");
+          return `(() => { ${lines.join(" ")} })()`;
+        }
+      }
+      used.add("createNativeElement");
+      const tag = JSON.stringify(node.tag);
+      const el = "_el$";
+      const parts = [];
+      const createArgs = node.at ? `${tag}, ${node.svg}, ${JSON.stringify(node.at)}` : node.svg ? `${tag}, true` : tag;
+      parts.push(`const ${el} = createNativeElement(${createArgs});`);
+      if (node.props.length > 0) {
+        if (!node.svg && node.props.every(isPlainLiteralAttr)) {
+          for (const p of node.props) parts.push(staticAttrAssignment(el, p));
+        } else {
+          used.add("spread");
+          const svgFlag = node.svg ? ", isSVG: true" : "";
+          parts.push(`spread({ element: ${el}, props: ${emitProps(node.props, null, used)}${svgFlag} });`);
+        }
+      }
+      for (const child of node.children) {
+        used.add("insert");
+        const childCode = emitNode(child, used, templates);
+        const isFn = child.kind === "expr" && child.reactive || child.kind === "component" || child.kind === "control";
+        parts.push(isFn ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
+      }
+      parts.push(`return ${el};`);
+      return `(() => { ${parts.join(" ")} })()`;
+    }
+  }
+}
+function inlineTemplates(code, templates) {
+  if (!templates || templates.length === 0) return code;
+  const byId = new Map(templates.map((t) => [t.id, JSON.stringify(t.html)]));
+  return code.replace(/_tmpl\$\d+/g, (id) => byId.get(id) ?? id);
+}
+var imperativeBackend = {
+  name: "imperative",
+  contract: RUNTIME_CONTRACT_V1,
+  emit(node, options) {
+    const used = /* @__PURE__ */ new Set();
+    const templates = options?.templateClone !== false ? [] : void 0;
+    partial = options?.partialTemplates === true;
+    const code = emitNode(node, used, templates);
+    return { code, imports: Array.from(used), templates };
+  }
+};
+export {
+  imperativeBackend,
+  inlineTemplates
+};

package/dist/codegen/contract.cjs

@@ -1 +1,52 @@
-"use strict";var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var c=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},u=(t,e,n,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of i(e))!l.call(t,o)&&o!==n&&r(t,o,{get:()=>e[o],enumerable:!(m=a(e,o))||m.enumerable});return t};var d=t=>u(r({},"__esModule",{value:!0}),t);var p={};c(p,{RUNTIME_CONTRACT_V1:()=>s,RUNTIME_CONTRACT_V2:()=>C});module.exports=d(p);var s={version:1,module:"@fluixi/dom",symbols:["createNativeElement","insert","spread","setAttribute","delegateEvents","createComponent","createMemo","untrack","Show","For","Index","Switch","Match","Dynamic","ErrorBoundary"]},C={version:2,module:"@fluixi/dom",symbols:[...s.symbols,"template","cloneTemplate","walk"]};
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/codegen/contract.ts
+var contract_exports = {};
+__export(contract_exports, {
+  RUNTIME_CONTRACT_V1: () => RUNTIME_CONTRACT_V1,
+  RUNTIME_CONTRACT_V2: () => RUNTIME_CONTRACT_V2
+});
+module.exports = __toCommonJS(contract_exports);
+var RUNTIME_CONTRACT_V1 = {
+  version: 1,
+  module: "@fluixi/dom",
+  symbols: [
+    "createNativeElement",
+    "insert",
+    "spread",
+    "setAttribute",
+    "delegateEvents",
+    "createComponent",
+    "createMemo",
+    "untrack",
+    "Show",
+    "For",
+    "Index",
+    "Switch",
+    "Match",
+    "Dynamic",
+    "ErrorBoundary"
+  ]
+};
+var RUNTIME_CONTRACT_V2 = {
+  version: 2,
+  module: "@fluixi/dom",
+  symbols: [...RUNTIME_CONTRACT_V1.symbols, "template", "cloneTemplate", "walk"]
+};

package/dist/codegen/contract.d.cts

@@ -0,0 +1,24 @@
+/**
+ * The RuntimeContract is the exact set of runtime symbols a codegen backend may
+ * emit, paired with the module they import from and a version number. Backend
+ * and runtime evolve in lockstep: adding a primitive bumps the version, so old
+ * and new backends/runtimes can coexist during a migration.
+ */
+export interface RuntimeContract {
+    version: number;
+    /** module the emitted symbols are imported from */
+    module: string;
+    symbols: readonly string[];
+}
+/**
+ * v1 — the imperative fine-grained runtime, locked by the @fluixi/dom contract
+ * tests (createNativeElement/insert/spread/delegateEvents/createComponent + the
+ * control-flow components).
+ */
+export declare const RUNTIME_CONTRACT_V1: RuntimeContract;
+/**
+ * v2 — adds the Solid-style (but ours) template-clone primitives. A future
+ * template-clone backend targets this contract; the runtime gains template()/
+ * cloneTemplate()/walk() at the same time.
+ */
+export declare const RUNTIME_CONTRACT_V2: RuntimeContract;