@fluixi/compiler 1.0.0-alpha.104 → 1.0.0-alpha.106

package/dist/transform/templates.cjs

@@ -949,10 +949,64 @@ function isHole(node) {
 function isTemplateChild(node) {
   return node.kind === "text" || node.kind === "element" && isTemplateElement(node);
 }
+var PROPERTY_BINDS = /* @__PURE__ */ new Set(["indeterminate"]);
+function disposition(prop) {
+  if (prop.kind === "spread") return null;
+  if (prop.name === "ref") return "ref";
+  if (prop.name === "use") return "use";
+  if (prop.kind === "event") return prop.event ? "event" : null;
+  if (prop.kind === "prop") return "property";
+  if (prop.kind !== "attr") return null;
+  const name = prop.name;
+  if (name.startsWith("on:")) return "nativeEvent";
+  if (name.startsWith("prop:")) return "property";
+  if (name.startsWith("attr:")) return "attr";
+  if (name.startsWith("bool:")) return "boolAttr";
+  if (name === "className" || name === "class") {
+    return isPlainLiteralAttr(prop) ? "serialize" : "class";
+  }
+  if (name === "classList") {
+    if (isPlainLiteralAttr(prop)) return "serialize";
+    return prop.reactive ? "classListDynamic" : "classList";
+  }
+  if (name === "style") {
+    if (isPlainLiteralAttr(prop)) return "serialize";
+    return prop.reactive ? "styleDynamic" : "style";
+  }
+  if (name.includes(":")) return null;
+  if (PROPERTY_ONLY.has(name)) return null;
+  if (PROPERTY_BINDS.has(name)) return "property";
+  if (prop.expr === void 0) return isPlainLiteralAttr(prop) ? "serialize" : null;
+  return "attr";
+}
+function effectiveProps(el) {
+  const order = [];
+  const byName = /* @__PURE__ */ new Map();
+  for (const prop of el.props) {
+    if (!byName.has(prop.name)) order.push(prop.name);
+    byName.set(prop.name, prop);
+  }
+  return order.map((name) => byName.get(name));
+}
+function propPlan(el) {
+  const custom = el.tag.includes("-");
+  const plan = { serialize: [], bindings: [] };
+  for (const prop of effectiveProps(el)) {
+    const kind = disposition(prop);
+    if (kind === null) return null;
+    if (kind === "serialize") {
+      plan.serialize.push(prop);
+      continue;
+    }
+    if (custom) return null;
+    plan.bindings.push({ prop, kind });
+  }
+  return plan;
+}
 function isTemplateElement(node) {
   if (node.svg) return false;
   if (isRawTextElement(node.tag)) return false;
-  if (!node.props.every((p) => isPlainLiteralAttr(p))) return false;
+  if (!propPlan(node)) return false;
   return node.children.every((c) => isTemplateChild(c) || isHole(c));
 }
 function containsHole(node) {
@@ -960,6 +1014,15 @@ function containsHole(node) {
   const children = node.children;
   return children ? children.some(containsHole) : false;
 }
+function containsBinding(node) {
+  if (node.kind !== "element") return false;
+  const plan = propPlan(node);
+  if (plan && plan.bindings.length > 0) return true;
+  return node.children.some(containsBinding);
+}
+function interesting(node) {
+  return containsHole(node) || containsBinding(node);
+}
 function addressable(el) {
   for (let i = 0; i < el.children.length; i++) {
     const child = el.children[i];
@@ -973,9 +1036,10 @@ function addressable(el) {
 function planPartialTemplate(root) {
   if (!isTemplateElement(root)) return null;
   if (!addressable(root)) return null;
-  if (!root.children.some(containsHole)) return null;
+  if (!interesting(root)) return null;
   const steps = [];
   const holes = [];
+  const bindings = [];
   let refCount = 0;
   const declare = (expr) => {
     const ref = `_n$${refCount++}`;
@@ -983,11 +1047,17 @@ function planPartialTemplate(root) {
     return ref;
   };
   walk8(root, "_el$");
-  return { html: serializeWithMarkers(root), tag: root.tag, steps, holes };
+  return { html: serializeWithMarkers(root), tag: root.tag, steps, holes, bindings };
   function walk8(el, elementRef) {
+    const plan = propPlan(el);
+    if (plan) {
+      for (const binding of plan.bindings) {
+        bindings.push({ ref: elementRef, prop: binding.prop, kind: binding.kind });
+      }
+    }
     let last = -1;
     el.children.forEach((child, i) => {
-      if (containsHole(child)) last = i;
+      if (interesting(child)) last = i;
     });
     let previous = null;
     for (let i = 0; i <= last; i++) {
@@ -1001,19 +1071,21 @@ function planPartialTemplate(root) {
         continue;
       }
       const ref = declare(expr);
-      if (child.kind === "element" && containsHole(child)) walk8(child, ref);
+      if (child.kind === "element" && interesting(child)) walk8(child, ref);
       previous = ref;
     }
   }
 }
 function serializeWithMarkers(el) {
-  return serializeStatic(withSentinels(el)).split(SENTINEL).join(HOLE_START + HOLE_END);
+  return serializeStatic(templateTree(el)).split(SENTINEL).join(HOLE_START + HOLE_END);
 }
-function withSentinels(el) {
+function templateTree(el) {
+  const plan = propPlan(el);
   return {
     ...el,
+    props: plan ? plan.serialize : [],
     children: el.children.map(
-      (child) => isHole(child) ? { kind: "text", value: SENTINEL } : child.kind === "element" ? withSentinels(child) : child
+      (child) => isHole(child) ? { kind: "text", value: SENTINEL } : child.kind === "element" ? templateTree(child) : child
     )
   };
 }
@@ -1644,6 +1716,55 @@ 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(${paren(`${mark}() => createComponent(${name}, ${obj})`, "value")})`;
 }
+function bindingTarget(binding) {
+  const name = binding.prop.name;
+  if (binding.kind === "boolAttr") return name.slice("bool:".length);
+  if (name.startsWith("prop:")) return name.slice("prop:".length);
+  if (name.startsWith("attr:")) return name.slice("attr:".length);
+  return htmlAttrName(name);
+}
+function bindingStatement(binding, used) {
+  const { ref, prop, kind } = binding;
+  const value = propValue(prop);
+  switch (kind) {
+    case "class":
+      used.add("setClassName");
+      return `setClassName(${ref}, ${value});`;
+    case "classList":
+      used.add("setClassList");
+      return `setClassList(${ref}, ${value}, []);`;
+    case "classListDynamic":
+      used.add("setDynamicClassList");
+      return `setDynamicClassList(${ref}, ${value});`;
+    case "style":
+      used.add("setStyle");
+      return `setStyle(${ref}, ${value}, []);`;
+    case "styleDynamic":
+      used.add("setDynamicStyle");
+      return `setDynamicStyle(${ref}, ${value});`;
+    case "attr":
+      used.add("setDynamicAttribute");
+      return `setDynamicAttribute(${ref}, ${JSON.stringify(bindingTarget(binding))}, ${value});`;
+    case "property":
+      used.add("setDynamicProperty");
+      return `setDynamicProperty(${ref}, ${JSON.stringify(bindingTarget(binding))}, ${value});`;
+    case "boolAttr":
+      used.add("setDynamicBoolAttribute");
+      return `setDynamicBoolAttribute(${ref}, ${JSON.stringify(bindingTarget(binding))}, ${value});`;
+    case "event":
+      used.add("addDelegatedEventListener");
+      return `addDelegatedEventListener(${ref}, ${JSON.stringify(prop.event.name)}, ${value});`;
+    case "nativeEvent":
+      used.add("addNativeEventListener");
+      return `addNativeEventListener(${ref}, ${JSON.stringify(prop.name.slice(3))}, ${value});`;
+    case "ref":
+      used.add("handleRef");
+      return `handleRef(${value}, ${ref});`;
+    case "use":
+      used.add("applyUse");
+      return `applyUse(${ref}, ${value});`;
+  }
+}
 function staticAttrAssignment(el, prop) {
   const name = htmlAttrName(prop.name);
   const value = prop.literal;
@@ -1694,6 +1815,7 @@ function emitNode(node, used, templates) {
             `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 binding of plan.bindings) lines.push(bindingStatement(binding, used));
           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}));`
@@ -3634,11 +3756,8 @@ function transformTemplates(code, id, options = {}) {
   const hoisted = /* @__PURE__ */ new Map();
   const edits = [...props.edits, ...intrinsics.edits, ...sources.edits, ...styles?.edits ?? []];
   for (const node of found) {
-    const nested = found.some(
-      (o) => o !== node && o.start <= node.start && o.end >= node.end && o.end - o.start > node.end - node.start
-    );
     if (isJsx(node)) {
-      edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceName, styles) });
+      edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, used, needs, hoisted, options, sourceName, styles) });
       continue;
     }
     const holes = node.quasi.expressions.map(
@@ -3665,7 +3784,7 @@ function transformTemplates(code, id, options = {}) {
       ...options.sourceLocations === true ? { sourceFile: sourceName, positionAt: positionsIn(code) } : {},
       // Same defaults as the plugin, so moving a build over is not a rendering change.
       templateClone: options.templateClone ?? true,
-      partialTemplates: nested ? false : options.partialTemplates ?? true,
+      partialTemplates: options.partialTemplates ?? true,
       svg: templateTags.get(node.tag.name) === "svg"
     });
     for (const symbol of result.imports) used.add(symbol);
@@ -3737,7 +3856,7 @@ function transformTemplates(code, id, options = {}) {
     ...styles?.references.length ? { styleReferences: styles.references } : {}
   };
 }
-function compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceFile, styles) {
+function compileJsx(code, node, edits, used, needs, hoisted, options, sourceFile, styles) {
   const ir = buildJsxIR(node, {
     code: (n) => slice(code, n.start, n.end, edits),
     used,
@@ -3762,7 +3881,7 @@ function compileJsx(code, node, edits, nested, used, needs, hoisted, options, so
   collapseStrategies(ir);
   const emitted = imperativeBackend.emit(ir, {
     templateClone: options.templateClone ?? true,
-    partialTemplates: nested ? false : options.partialTemplates ?? true
+    partialTemplates: options.partialTemplates ?? true
   });
   for (const symbol of emitted.imports) used.add(symbol);
   collectNeeds(ir, needs);

package/dist/transform/templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../src/transform/templates.ts"],"names":[],"mappings":"AASA,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAiB,KAAK,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,KAAK,EAAqB,cAAc,EAAU,MAAM,gBAAgB,CAAC;AAWhF,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAAgE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEzH,OAAO,EAAqC,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAkB,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAmBrL,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,wEAAwE;IACxE,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,8DAA8D;IAC9D,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,iFAAiF;IACjF,qBAAqB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC/C,+FAA+F;IAC/F,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,6FAA6F;IAC7F,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,8EAA8E;IAC9E,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;CACpC;AAoTD,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,OAAO,GAAE,gBAAqB,GAC7B,eAAe,GAAG,IAAI,CAuPxB"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../src/transform/templates.ts"],"names":[],"mappings":"AASA,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAiB,KAAK,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,KAAK,EAAqB,cAAc,EAAU,MAAM,gBAAgB,CAAC;AAWhF,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAAgE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEzH,OAAO,EAAqC,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAkB,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAmBrL,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,wEAAwE;IACxE,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,8DAA8D;IAC9D,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,iFAAiF;IACjF,qBAAqB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC/C,+FAA+F;IAC/F,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,6FAA6F;IAC7F,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,8EAA8E;IAC9E,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;CACpC;AAoTD,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,OAAO,GAAE,gBAAqB,GAC7B,eAAe,GAAG,IAAI,CAiPxB"}

package/dist/transform/templates.js

@@ -377,12 +377,8 @@ export function transformTemplates(code, id, options = {}) {
     const hoisted = new Map();
     const edits = [...props.edits, ...intrinsics.edits, ...sources.edits, ...(styles?.edits ?? [])];
     for (const node of found) {
-        // A root inside another root's hole is emitted without partial templates,
-        // matching what the plugin does for nested emits. Marker layout has to agree
-        // between server and client, so this is not the place to change it.
-        const nested = found.some((o) => o !== node && o.start <= node.start && o.end >= node.end && o.end - o.start > node.end - node.start);
         if (isJsx(node)) {
-            edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceName, styles) });
+            edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, used, needs, hoisted, options, sourceName, styles) });
             continue;
         }
         const holes = node.quasi.expressions.map((e) => bindHole(code, e, edits, options.sourceLocations === true));
@@ -411,7 +407,7 @@ export function transformTemplates(code, id, options = {}) {
                 : {}),
             // Same defaults as the plugin, so moving a build over is not a rendering change.
             templateClone: options.templateClone ?? true,
-            partialTemplates: nested ? false : options.partialTemplates ?? true,
+            partialTemplates: options.partialTemplates ?? true,
             svg: templateTags.get(node.tag.name) === 'svg',
         });
         for (const symbol of result.imports)
@@ -518,7 +514,7 @@ export function transformTemplates(code, id, options = {}) {
  * with anything already compiled inside them folded in, so nested JSX and nested
  * `` html`` `` both come along for free.
  */
-function compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceFile, styles) {
+function compileJsx(code, node, edits, used, needs, hoisted, options, sourceFile, styles) {
     const ir = buildJsxIR(node, {
         code: (n) => slice(code, n.start, n.end, edits),
         used,
@@ -544,7 +540,7 @@ function compileJsx(code, node, edits, nested, used, needs, hoisted, options, so
     collapseStrategies(ir);
     const emitted = imperativeBackend.emit(ir, {
         templateClone: options.templateClone ?? true,
-        partialTemplates: nested ? false : options.partialTemplates ?? true,
+        partialTemplates: options.partialTemplates ?? true,
     });
     for (const symbol of emitted.imports)
         used.add(symbol);

package/dist/transform/templates.mjs

@@ -1991,10 +1991,64 @@ function isHole(node) {
 function isTemplateChild(node) {
   return node.kind === "text" || node.kind === "element" && isTemplateElement(node);
 }
+var PROPERTY_BINDS = /* @__PURE__ */ new Set(["indeterminate"]);
+function disposition(prop) {
+  if (prop.kind === "spread") return null;
+  if (prop.name === "ref") return "ref";
+  if (prop.name === "use") return "use";
+  if (prop.kind === "event") return prop.event ? "event" : null;
+  if (prop.kind === "prop") return "property";
+  if (prop.kind !== "attr") return null;
+  const name = prop.name;
+  if (name.startsWith("on:")) return "nativeEvent";
+  if (name.startsWith("prop:")) return "property";
+  if (name.startsWith("attr:")) return "attr";
+  if (name.startsWith("bool:")) return "boolAttr";
+  if (name === "className" || name === "class") {
+    return isPlainLiteralAttr(prop) ? "serialize" : "class";
+  }
+  if (name === "classList") {
+    if (isPlainLiteralAttr(prop)) return "serialize";
+    return prop.reactive ? "classListDynamic" : "classList";
+  }
+  if (name === "style") {
+    if (isPlainLiteralAttr(prop)) return "serialize";
+    return prop.reactive ? "styleDynamic" : "style";
+  }
+  if (name.includes(":")) return null;
+  if (PROPERTY_ONLY.has(name)) return null;
+  if (PROPERTY_BINDS.has(name)) return "property";
+  if (prop.expr === void 0) return isPlainLiteralAttr(prop) ? "serialize" : null;
+  return "attr";
+}
+function effectiveProps(el) {
+  const order = [];
+  const byName = /* @__PURE__ */ new Map();
+  for (const prop of el.props) {
+    if (!byName.has(prop.name)) order.push(prop.name);
+    byName.set(prop.name, prop);
+  }
+  return order.map((name) => byName.get(name));
+}
+function propPlan(el) {
+  const custom = el.tag.includes("-");
+  const plan = { serialize: [], bindings: [] };
+  for (const prop of effectiveProps(el)) {
+    const kind = disposition(prop);
+    if (kind === null) return null;
+    if (kind === "serialize") {
+      plan.serialize.push(prop);
+      continue;
+    }
+    if (custom) return null;
+    plan.bindings.push({ prop, kind });
+  }
+  return plan;
+}
 function isTemplateElement(node) {
   if (node.svg) return false;
   if (isRawTextElement(node.tag)) return false;
-  if (!node.props.every((p) => isPlainLiteralAttr(p))) return false;
+  if (!propPlan(node)) return false;
   return node.children.every((c) => isTemplateChild(c) || isHole(c));
 }
 function containsHole(node) {
@@ -2002,6 +2056,15 @@ function containsHole(node) {
   const children = node.children;
   return children ? children.some(containsHole) : false;
 }
+function containsBinding(node) {
+  if (node.kind !== "element") return false;
+  const plan = propPlan(node);
+  if (plan && plan.bindings.length > 0) return true;
+  return node.children.some(containsBinding);
+}
+function interesting(node) {
+  return containsHole(node) || containsBinding(node);
+}
 function addressable(el) {
   for (let i = 0; i < el.children.length; i++) {
     const child = el.children[i];
@@ -2015,9 +2078,10 @@ function addressable(el) {
 function planPartialTemplate(root) {
   if (!isTemplateElement(root)) return null;
   if (!addressable(root)) return null;
-  if (!root.children.some(containsHole)) return null;
+  if (!interesting(root)) return null;
   const steps = [];
   const holes = [];
+  const bindings = [];
   let refCount = 0;
   const declare = (expr) => {
     const ref = `_n$${refCount++}`;
@@ -2025,11 +2089,17 @@ function planPartialTemplate(root) {
     return ref;
   };
   walk8(root, "_el$");
-  return { html: serializeWithMarkers(root), tag: root.tag, steps, holes };
+  return { html: serializeWithMarkers(root), tag: root.tag, steps, holes, bindings };
   function walk8(el, elementRef) {
+    const plan = propPlan(el);
+    if (plan) {
+      for (const binding of plan.bindings) {
+        bindings.push({ ref: elementRef, prop: binding.prop, kind: binding.kind });
+      }
+    }
     let last = -1;
     el.children.forEach((child, i) => {
-      if (containsHole(child)) last = i;
+      if (interesting(child)) last = i;
     });
     let previous = null;
     for (let i = 0; i <= last; i++) {
@@ -2043,19 +2113,21 @@ function planPartialTemplate(root) {
         continue;
       }
       const ref = declare(expr);
-      if (child.kind === "element" && containsHole(child)) walk8(child, ref);
+      if (child.kind === "element" && interesting(child)) walk8(child, ref);
       previous = ref;
     }
   }
 }
 function serializeWithMarkers(el) {
-  return serializeStatic(withSentinels(el)).split(SENTINEL).join(HOLE_START + HOLE_END);
+  return serializeStatic(templateTree(el)).split(SENTINEL).join(HOLE_START + HOLE_END);
 }
-function withSentinels(el) {
+function templateTree(el) {
+  const plan = propPlan(el);
   return {
     ...el,
+    props: plan ? plan.serialize : [],
     children: el.children.map(
-      (child) => isHole(child) ? { kind: "text", value: SENTINEL } : child.kind === "element" ? withSentinels(child) : child
+      (child) => isHole(child) ? { kind: "text", value: SENTINEL } : child.kind === "element" ? templateTree(child) : child
     )
   };
 }
@@ -2686,6 +2758,55 @@ 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(${paren(`${mark}() => createComponent(${name}, ${obj})`, "value")})`;
 }
+function bindingTarget(binding) {
+  const name = binding.prop.name;
+  if (binding.kind === "boolAttr") return name.slice("bool:".length);
+  if (name.startsWith("prop:")) return name.slice("prop:".length);
+  if (name.startsWith("attr:")) return name.slice("attr:".length);
+  return htmlAttrName(name);
+}
+function bindingStatement(binding, used) {
+  const { ref, prop, kind } = binding;
+  const value = propValue(prop);
+  switch (kind) {
+    case "class":
+      used.add("setClassName");
+      return `setClassName(${ref}, ${value});`;
+    case "classList":
+      used.add("setClassList");
+      return `setClassList(${ref}, ${value}, []);`;
+    case "classListDynamic":
+      used.add("setDynamicClassList");
+      return `setDynamicClassList(${ref}, ${value});`;
+    case "style":
+      used.add("setStyle");
+      return `setStyle(${ref}, ${value}, []);`;
+    case "styleDynamic":
+      used.add("setDynamicStyle");
+      return `setDynamicStyle(${ref}, ${value});`;
+    case "attr":
+      used.add("setDynamicAttribute");
+      return `setDynamicAttribute(${ref}, ${JSON.stringify(bindingTarget(binding))}, ${value});`;
+    case "property":
+      used.add("setDynamicProperty");
+      return `setDynamicProperty(${ref}, ${JSON.stringify(bindingTarget(binding))}, ${value});`;
+    case "boolAttr":
+      used.add("setDynamicBoolAttribute");
+      return `setDynamicBoolAttribute(${ref}, ${JSON.stringify(bindingTarget(binding))}, ${value});`;
+    case "event":
+      used.add("addDelegatedEventListener");
+      return `addDelegatedEventListener(${ref}, ${JSON.stringify(prop.event.name)}, ${value});`;
+    case "nativeEvent":
+      used.add("addNativeEventListener");
+      return `addNativeEventListener(${ref}, ${JSON.stringify(prop.name.slice(3))}, ${value});`;
+    case "ref":
+      used.add("handleRef");
+      return `handleRef(${value}, ${ref});`;
+    case "use":
+      used.add("applyUse");
+      return `applyUse(${ref}, ${value});`;
+  }
+}
 function staticAttrAssignment(el, prop) {
   const name = htmlAttrName(prop.name);
   const value = prop.literal;
@@ -2736,6 +2857,7 @@ function emitNode(node, used, templates) {
             `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 binding of plan.bindings) lines.push(bindingStatement(binding, used));
           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}));`
@@ -4677,11 +4799,8 @@ function transformTemplates(code, id, options = {}) {
   const hoisted = /* @__PURE__ */ new Map();
   const edits = [...props.edits, ...intrinsics.edits, ...sources.edits, ...styles?.edits ?? []];
   for (const node of found) {
-    const nested = found.some(
-      (o) => o !== node && o.start <= node.start && o.end >= node.end && o.end - o.start > node.end - node.start
-    );
     if (isJsx(node)) {
-      edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceName, styles) });
+      edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, used, needs, hoisted, options, sourceName, styles) });
       continue;
     }
     const holes = node.quasi.expressions.map(
@@ -4708,7 +4827,7 @@ function transformTemplates(code, id, options = {}) {
       ...options.sourceLocations === true ? { sourceFile: sourceName, positionAt: positionsIn(code) } : {},
       // Same defaults as the plugin, so moving a build over is not a rendering change.
       templateClone: options.templateClone ?? true,
-      partialTemplates: nested ? false : options.partialTemplates ?? true,
+      partialTemplates: options.partialTemplates ?? true,
       svg: templateTags.get(node.tag.name) === "svg"
     });
     for (const symbol of result.imports) used.add(symbol);
@@ -4780,7 +4899,7 @@ function transformTemplates(code, id, options = {}) {
     ...styles?.references.length ? { styleReferences: styles.references } : {}
   };
 }
-function compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceFile, styles) {
+function compileJsx(code, node, edits, used, needs, hoisted, options, sourceFile, styles) {
   const ir = buildJsxIR(node, {
     code: (n2) => slice(code, n2.start, n2.end, edits),
     used,
@@ -4805,7 +4924,7 @@ function compileJsx(code, node, edits, nested, used, needs, hoisted, options, so
   collapseStrategies(ir);
   const emitted = imperativeBackend.emit(ir, {
     templateClone: options.templateClone ?? true,
-    partialTemplates: nested ? false : options.partialTemplates ?? true
+    partialTemplates: options.partialTemplates ?? true
   });
   for (const symbol of emitted.imports) used.add(symbol);
   collectNeeds(ir, needs);

package/dist/{transform-VMK2URDB.mjs → transform-NO46NFQH.mjs}

@@ -1,9 +1,9 @@
-/*! @fluixi/compiler v1.0.0-alpha.104 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.106 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 import {
   applyTemplateStyles,
   collectStyles,
   finishShadowStyles
-} from "./chunk-ZDZKJQ5N.mjs";
+} from "./chunk-W7DYOMXJ.mjs";
 import {
   analyzeStatic,
   buildJsxIR,
@@ -19,7 +19,7 @@ import {
   resolveComponentSources,
   resolveReactiveBindings,
   shapeOf
-} from "./chunk-NUET3BJB.mjs";
+} from "./chunk-LCQHL2VQ.mjs";
 import {
   CORE_CONTROL_FLOW,
   DOM_CONTROL_FLOW,
@@ -29,12 +29,12 @@ import {
   isIntrinsicName,
   mayHaveIntrinsic,
   tagIntrinsics
-} from "./chunk-RBIYCE6M.mjs";
+} from "./chunk-TDN5MYWI.mjs";
 import {
   MagicString
-} from "./chunk-2O2YW5ZO.mjs";
-import "./chunk-FMQPBKTW.mjs";
-import "./chunk-NWF66YTU.mjs";
+} from "./chunk-LGUZRHYN.mjs";
+import "./chunk-JUFI6IR3.mjs";
+import "./chunk-4XEOMQ57.mjs";
 
 // src/transform/templates.ts
 import { parse as parse2 } from "@babel/parser";
@@ -767,11 +767,8 @@ function transformTemplates(code, id, options = {}) {
   const hoisted = /* @__PURE__ */ new Map();
   const edits = [...props.edits, ...intrinsics.edits, ...sources.edits, ...styles?.edits ?? []];
   for (const node of found) {
-    const nested = found.some(
-      (o) => o !== node && o.start <= node.start && o.end >= node.end && o.end - o.start > node.end - node.start
-    );
     if (isJsx(node)) {
-      edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceName, styles) });
+      edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, used, needs, hoisted, options, sourceName, styles) });
       continue;
     }
     const holes = node.quasi.expressions.map(
@@ -798,7 +795,7 @@ function transformTemplates(code, id, options = {}) {
       ...options.sourceLocations === true ? { sourceFile: sourceName, positionAt: positionsIn(code) } : {},
       // Same defaults as the plugin, so moving a build over is not a rendering change.
       templateClone: options.templateClone ?? true,
-      partialTemplates: nested ? false : options.partialTemplates ?? true,
+      partialTemplates: options.partialTemplates ?? true,
       svg: templateTags.get(node.tag.name) === "svg"
     });
     for (const symbol of result.imports) used.add(symbol);
@@ -870,7 +867,7 @@ function transformTemplates(code, id, options = {}) {
     ...styles?.references.length ? { styleReferences: styles.references } : {}
   };
 }
-function compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceFile, styles) {
+function compileJsx(code, node, edits, used, needs, hoisted, options, sourceFile, styles) {
   const ir = buildJsxIR(node, {
     code: (n) => slice(code, n.start, n.end, edits),
     used,
@@ -895,7 +892,7 @@ function compileJsx(code, node, edits, nested, used, needs, hoisted, options, so
   collapseStrategies(ir);
   const emitted = imperativeBackend.emit(ir, {
     templateClone: options.templateClone ?? true,
-    partialTemplates: nested ? false : options.partialTemplates ?? true
+    partialTemplates: options.partialTemplates ?? true
   });
   for (const symbol of emitted.imports) used.add(symbol);
   collectNeeds(ir, needs);