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

package/dist/frontend/babel/build-ir-html.mjs

@@ -162,10 +162,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) {
@@ -173,6 +227,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];
@@ -186,9 +249,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++}`;
@@ -196,11 +260,17 @@ function planPartialTemplate(root) {
     return ref;
   };
   walk(root, "_el$");
-  return { html: serializeWithMarkers(root), tag: root.tag, steps, holes };
+  return { html: serializeWithMarkers(root), tag: root.tag, steps, holes, bindings };
   function walk(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++) {
@@ -214,19 +284,21 @@ function planPartialTemplate(root) {
         continue;
       }
       const ref = declare(expr);
-      if (child.kind === "element" && containsHole(child)) walk(child, ref);
+      if (child.kind === "element" && interesting(child)) walk(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
     )
   };
 }
@@ -499,6 +571,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;
@@ -549,6 +670,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}));`
@@ -1807,7 +1929,7 @@ var generate = _generate.default ?? _generate;
 function gen(node) {
   return generate(node, { concise: true }).code;
 }
-function transformNestedJSX(node, used, onNested) {
+function transformNestedJSX(node, used, onNested, emit) {
   const clone = t.cloneNode(node, true);
   const file = t.file(t.program([t.expressionStatement(clone)]));
   let changed = false;
@@ -1820,9 +1942,12 @@ function transformNestedJSX(node, used, onNested) {
   traverse(file, {
     "JSXElement|JSXFragment"(path) {
       const jsx = path.node;
-      const nestedIR = buildIR(jsx, used, onNested);
+      const nestedIR = buildIR(jsx, used, onNested, emit);
       onNested?.(nestedIR);
-      const { code, imports, templates } = imperativeBackend.emit(nestedIR, {});
+      const { code, imports, templates } = imperativeBackend.emit(nestedIR, {
+        templateClone: emit?.templateClone,
+        partialTemplates: emit?.partialTemplates ?? true
+      });
       emitInto(path, inlineTemplates(code, templates), imports);
     },
     // Nested html templates compose: ${cond ? html`...` : html`...`},
@@ -1830,26 +1955,29 @@ function transformNestedJSX(node, used, onNested) {
     TaggedTemplateExpression(path) {
       const tag = path.node.tag;
       if (!t.isIdentifier(tag) || tag.name !== "html" && tag.name !== "svg") return;
-      const ir = buildIRFromHtml(path.node, used, { svg: tag.name === "svg", onNested });
+      const ir = buildIRFromHtml(path.node, used, { svg: tag.name === "svg", onNested, emit });
       onNested?.(ir);
-      const { code, imports, templates } = imperativeBackend.emit(ir, {});
+      const { code, imports, templates } = imperativeBackend.emit(ir, {
+        templateClone: emit?.templateClone,
+        partialTemplates: emit?.partialTemplates ?? true
+      });
       emitInto(path, inlineTemplates(code, templates), imports);
     }
   });
   return changed ? file.program.body[0].expression : node;
 }
-function genExpr(node, used, onNested) {
-  return gen(transformNestedJSX(node, used, onNested));
+function genExpr(node, used, onNested, emit) {
+  return gen(transformNestedJSX(node, used, onNested, emit));
 }
 function isReactiveExpr(node) {
   return isReactiveShape(shapeOf(node));
 }
-function buildIR(node, used = /* @__PURE__ */ new Set(), onNested) {
+function buildIR(node, used = /* @__PURE__ */ new Set(), onNested, emit) {
   const ir = buildJsxIR(node, {
     code: (n) => (
       // A member-expression tag (`<ns.Foo/>`) is not an Expression, so it cannot go
       // through the nested-JSX compile: it only ever needs printing.
-      n.type === "JSXMemberExpression" ? gen(n) : genExpr(n, used, onNested)
+      n.type === "JSXMemberExpression" ? gen(n) : genExpr(n, used, onNested, emit)
     ),
     used
   });
@@ -1861,16 +1989,16 @@ var generate2 = _generate2.default ?? _generate2;
 function gen2(node) {
   return generate2(node, { concise: true }).code;
 }
-function bindHole(expr, used, onNested) {
+function bindHole(expr, used, onNested, emit) {
   const hole = {
-    code: genExpr(expr, used, onNested),
+    code: genExpr(expr, used, onNested, emit),
     reactive: isReactiveExpr(expr)
   };
   if (t2.isArrowFunctionExpression(expr) && !t2.isBlockStatement(expr.body)) {
     const body = expr.body;
     hole.arrow = {
       params: expr.params.map((p) => gen2(p)),
-      body: genExpr(body, used, onNested),
+      body: genExpr(body, used, onNested, emit),
       bodyReactive: isReactiveExpr(body)
     };
   }
@@ -1879,7 +2007,7 @@ function bindHole(expr, used, onNested) {
 }
 function lowerHtmlTemplate(node, used, opts = {}) {
   const quasi = node.quasi;
-  const holes = quasi.expressions.map((e) => bindHole(e, used, opts.onNested));
+  const holes = quasi.expressions.map((e) => bindHole(e, used, opts.onNested, opts.emit));
   return lowerTemplate(buildPieces(quasi), holes, used, opts);
 }
 function buildPieces(quasi) {

package/dist/frontend/babel/build-ir.cjs

@@ -145,10 +145,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) {
@@ -156,6 +210,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];
@@ -169,9 +232,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++}`;
@@ -179,11 +243,17 @@ function planPartialTemplate(root) {
     return ref;
   };
   walk(root, "_el$");
-  return { html: serializeWithMarkers(root), tag: root.tag, steps, holes };
+  return { html: serializeWithMarkers(root), tag: root.tag, steps, holes, bindings };
   function walk(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++) {
@@ -197,19 +267,21 @@ function planPartialTemplate(root) {
         continue;
       }
       const ref = declare(expr);
-      if (child.kind === "element" && containsHole(child)) walk(child, ref);
+      if (child.kind === "element" && interesting(child)) walk(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
     )
   };
 }
@@ -482,6 +554,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;
@@ -532,6 +653,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}));`
@@ -1382,16 +1504,16 @@ var generate = import_generator.default.default ?? import_generator.default;
 function gen(node) {
   return generate(node, { concise: true }).code;
 }
-function bindHole(expr, used, onNested) {
+function bindHole(expr, used, onNested, emit) {
   const hole = {
-    code: genExpr(expr, used, onNested),
+    code: genExpr(expr, used, onNested, emit),
     reactive: isReactiveExpr(expr)
   };
   if (import_core.types.isArrowFunctionExpression(expr) && !import_core.types.isBlockStatement(expr.body)) {
     const body = expr.body;
     hole.arrow = {
       params: expr.params.map((p) => gen(p)),
-      body: genExpr(body, used, onNested),
+      body: genExpr(body, used, onNested, emit),
       bodyReactive: isReactiveExpr(body)
     };
   }
@@ -1400,7 +1522,7 @@ function bindHole(expr, used, onNested) {
 }
 function lowerHtmlTemplate(node, used, opts = {}) {
   const quasi = node.quasi;
-  const holes = quasi.expressions.map((e) => bindHole(e, used, opts.onNested));
+  const holes = quasi.expressions.map((e) => bindHole(e, used, opts.onNested, opts.emit));
   return lowerTemplate(buildPieces(quasi), holes, used, opts);
 }
 function buildPieces(quasi) {
@@ -1888,7 +2010,7 @@ var generate2 = import_generator2.default.default ?? import_generator2.default;
 function gen2(node) {
   return generate2(node, { concise: true }).code;
 }
-function transformNestedJSX(node, used, onNested) {
+function transformNestedJSX(node, used, onNested, emit) {
   const clone = import_core2.types.cloneNode(node, true);
   const file = import_core2.types.file(import_core2.types.program([import_core2.types.expressionStatement(clone)]));
   let changed = false;
@@ -1901,9 +2023,12 @@ function transformNestedJSX(node, used, onNested) {
   (0, import_core2.traverse)(file, {
     "JSXElement|JSXFragment"(path) {
       const jsx = path.node;
-      const nestedIR = buildIR(jsx, used, onNested);
+      const nestedIR = buildIR(jsx, used, onNested, emit);
       onNested?.(nestedIR);
-      const { code, imports, templates } = imperativeBackend.emit(nestedIR, {});
+      const { code, imports, templates } = imperativeBackend.emit(nestedIR, {
+        templateClone: emit?.templateClone,
+        partialTemplates: emit?.partialTemplates ?? true
+      });
       emitInto(path, inlineTemplates(code, templates), imports);
     },
     // Nested html templates compose: ${cond ? html`...` : html`...`},
@@ -1911,16 +2036,19 @@ function transformNestedJSX(node, used, onNested) {
     TaggedTemplateExpression(path) {
       const tag = path.node.tag;
       if (!import_core2.types.isIdentifier(tag) || tag.name !== "html" && tag.name !== "svg") return;
-      const ir = buildIRFromHtml(path.node, used, { svg: tag.name === "svg", onNested });
+      const ir = buildIRFromHtml(path.node, used, { svg: tag.name === "svg", onNested, emit });
       onNested?.(ir);
-      const { code, imports, templates } = imperativeBackend.emit(ir, {});
+      const { code, imports, templates } = imperativeBackend.emit(ir, {
+        templateClone: emit?.templateClone,
+        partialTemplates: emit?.partialTemplates ?? true
+      });
       emitInto(path, inlineTemplates(code, templates), imports);
     }
   });
   return changed ? file.program.body[0].expression : node;
 }
-function genExpr(node, used, onNested) {
-  return gen2(transformNestedJSX(node, used, onNested));
+function genExpr(node, used, onNested, emit) {
+  return gen2(transformNestedJSX(node, used, onNested, emit));
 }
 var SVG_TAGS2 = /* @__PURE__ */ new Set([
   "svg",
@@ -1939,12 +2067,12 @@ var SVG_TAGS2 = /* @__PURE__ */ new Set([
 function isReactiveExpr(node) {
   return isReactiveShape(shapeOf(node));
 }
-function buildIR(node, used = /* @__PURE__ */ new Set(), onNested) {
+function buildIR(node, used = /* @__PURE__ */ new Set(), onNested, emit) {
   const ir = buildJsxIR(node, {
     code: (n) => (
       // A member-expression tag (`<ns.Foo/>`) is not an Expression, so it cannot go
       // through the nested-JSX compile: it only ever needs printing.
-      n.type === "JSXMemberExpression" ? gen2(n) : genExpr(n, used, onNested)
+      n.type === "JSXMemberExpression" ? gen2(n) : genExpr(n, used, onNested, emit)
     ),
     used
   });

package/dist/frontend/babel/build-ir.d.cts

@@ -15,7 +15,7 @@
 import { types as t } from '@babel/core';
 import type { IRNode } from '../../ir/nodes.cjs';
 /** Stringify an expression, compiling any JSX nested inside it first. */
-export declare function genExpr(node: t.Expression, used: Set<string>, onNested?: NestedHook): string;
+export declare function genExpr(node: t.Expression, used: Set<string>, onNested?: NestedHook, emit?: NestedEmitOptions): string;
 /**
  * Called with the IR of JSX (or a template) found inside an expression.
  *
@@ -25,6 +25,15 @@ export declare function genExpr(node: t.Expression, used: Set<string>, onNested?
  * reference to `Input` that nothing imported.
  */
 export type NestedHook = (ir: IRNode) => void;
+/**
+ * Emit switches for JSX compiled inside an expression. The front-end passes its
+ * own, so a root inside a callback or a hole compiles the way a top-level root
+ * does; absent a front-end, partial templates stay on, as at the top level.
+ */
+export interface NestedEmitOptions {
+    partialTemplates?: boolean;
+    templateClone?: boolean;
+}
 export declare const SVG_TAGS: Set<string>;
 export declare function isReactiveExpr(node: t.Expression): boolean;
 /**
@@ -32,4 +41,4 @@ export declare function isReactiveExpr(node: t.Expression): boolean;
  * front-end supplies is how an expression becomes source, `genExpr`, which also
  * compiles any JSX or `` html`` `` nested inside it.
  */
-export declare function buildIR(node: t.JSXElement | t.JSXFragment, used?: Set<string>, onNested?: NestedHook): IRNode;
+export declare function buildIR(node: t.JSXElement | t.JSXFragment, used?: Set<string>, onNested?: NestedHook, emit?: NestedEmitOptions): IRNode;

package/dist/frontend/babel/build-ir.d.ts

@@ -15,7 +15,7 @@
 import { types as t } from '@babel/core';
 import type { IRNode } from '../../ir/nodes.js';
 /** Stringify an expression, compiling any JSX nested inside it first. */
-export declare function genExpr(node: t.Expression, used: Set<string>, onNested?: NestedHook): string;
+export declare function genExpr(node: t.Expression, used: Set<string>, onNested?: NestedHook, emit?: NestedEmitOptions): string;
 /**
  * Called with the IR of JSX (or a template) found inside an expression.
  *
@@ -25,6 +25,15 @@ export declare function genExpr(node: t.Expression, used: Set<string>, onNested?
  * reference to `Input` that nothing imported.
  */
 export type NestedHook = (ir: IRNode) => void;
+/**
+ * Emit switches for JSX compiled inside an expression. The front-end passes its
+ * own, so a root inside a callback or a hole compiles the way a top-level root
+ * does; absent a front-end, partial templates stay on, as at the top level.
+ */
+export interface NestedEmitOptions {
+    partialTemplates?: boolean;
+    templateClone?: boolean;
+}
 export declare const SVG_TAGS: Set<string>;
 export declare function isReactiveExpr(node: t.Expression): boolean;
 /**
@@ -32,5 +41,5 @@ export declare function isReactiveExpr(node: t.Expression): boolean;
  * front-end supplies is how an expression becomes source, `genExpr`, which also
  * compiles any JSX or `` html`` `` nested inside it.
  */
-export declare function buildIR(node: t.JSXElement | t.JSXFragment, used?: Set<string>, onNested?: NestedHook): IRNode;
+export declare function buildIR(node: t.JSXElement | t.JSXFragment, used?: Set<string>, onNested?: NestedHook, emit?: NestedEmitOptions): IRNode;
 //# sourceMappingURL=build-ir.d.ts.map

package/dist/frontend/babel/build-ir.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build-ir.d.ts","sourceRoot":"","sources":["../../../src/frontend/babel/build-ir.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,KAAK,IAAI,CAAC,EAAsB,MAAM,aAAa,CAAC;AAI7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAwDhD,yEAAyE;AACzE,wBAAgB,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAE5F;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;AAE9C,eAAO,MAAM,QAAQ,aAGnB,CAAC;AA2BH,wBAAgB,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,UAAU,GAAG,OAAO,CAE1D;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CACrB,IAAI,EAAE,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,WAAW,EAClC,IAAI,GAAE,GAAG,CAAC,MAAM,CAAa,EAC7B,QAAQ,CAAC,EAAE,UAAU,GACpB,MAAM,CAWR"}
+{"version":3,"file":"build-ir.d.ts","sourceRoot":"","sources":["../../../src/frontend/babel/build-ir.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,KAAK,IAAI,CAAC,EAAsB,MAAM,aAAa,CAAC;AAI7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AA8DhD,yEAAyE;AACzE,wBAAgB,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAEtH;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;AAE9C;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,aAGnB,CAAC;AA2BH,wBAAgB,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,UAAU,GAAG,OAAO,CAE1D;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CACrB,IAAI,EAAE,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,WAAW,EAClC,IAAI,GAAE,GAAG,CAAC,MAAM,CAAa,EAC7B,QAAQ,CAAC,EAAE,UAAU,EACrB,IAAI,CAAC,EAAE,iBAAiB,GACvB,MAAM,CAWR"}