@fluixi/compiler 1.0.0-alpha.92 → 1.0.0-alpha.93

package/dist/lower/template.cjs

@@ -283,6 +283,7 @@ var INTRINSICS = {
   $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" },
+  $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", 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.
@@ -293,6 +294,19 @@ var INTRINSICS = {
   // dependency analysis must not guess at.
   $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
   $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
+  // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
+  // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
+  $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
+  $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
+  $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
+  $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
+  $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
+  $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
+  // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
+  // handle as far as reads go: the same accessor with `set` on it.
+  $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
   // An environment variable, public or server-only; the browser build refuses a secret.
   $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
 };
@@ -470,13 +484,16 @@ function emitComponent(name, props, children, used, templates, at) {
   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)}; }`
-  );
+  const bodies = normal.map((p) => [p.name, componentPropValue(p)]);
   if (children.length > 0) {
-    entries.push(`get children() { return ${emitChildren(children, used, templates)}; }`);
+    bodies.push(["children", emitChildren(children, used, templates)]);
+  }
+  let obj = `{ ${bodies.map(([name2, body]) => `get ${propKey(name2)}() { return ${body}; }`).join(", ")} }`;
+  if (bodies.some(([, body]) => /\bthis\b/.test(body))) {
+    const thunks = bodies.map(([name2, body]) => `${JSON.stringify(name2)}: () => ${body}`);
+    const getters = bodies.map(([name2]) => `get ${propKey(name2)}() { return _$t[${JSON.stringify(name2)}](); }`);
+    obj = `((_$t) => ({ ${getters.join(", ")} }))({ ${thunks.join(", ")} })`;
   }
-  let obj = `{ ${entries.join(", ")} }`;
   if (spreads.length > 0) {
     used.add("mergeProps");
     obj = `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
@@ -558,7 +575,8 @@ function emitNode(node, used, templates) {
         } else {
           used.add("spread");
           const svgFlag = node.svg ? ", isSVG: true" : "";
-          const customFlag = node.tag.includes("-") ? ", isCustomElement: true" : "";
+          const accessors = node.props.filter((p) => p.kind !== "spread" && p.expr !== void 0 && p.reactive && p.name !== "ref").map((p) => p.name);
+          const customFlag = node.tag.includes("-") ? `, isCustomElement: true, accessors: ${JSON.stringify(accessors)}` : "";
           parts.push(
             `spread({ element: ${el}, props: ${emitProps(node.props, null, used)}${svgFlag}${customFlag} });`
           );
@@ -629,6 +647,7 @@ var DELEGATED = /* @__PURE__ */ new Set([
 function escapeTemplate(s) {
   return s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
 }
+var CONTAINER = "container";
 function capitalize(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
@@ -683,10 +702,6 @@ var Lowerer = class {
           if (hasElse) i = elseIdx;
           continue;
         }
-        if (child.attributes.some((a) => a.kind === "EachDirective")) {
-          out.push(this.lowerEach(child));
-          continue;
-        }
       }
       const node = this.lowerNode(child);
       if (node) out.push(node);
@@ -728,13 +743,16 @@ var Lowerer = class {
       node.props.unshift({ name: "component", kind: "attr", expr: `() => ${paren(this.hole(isAttr.value.hole).code, "arrowBody")}` });
       return node;
     }
+    const each = this.lowerEach(el);
+    const children = each ? [each] : this.lowerChildren(el.children);
+    if (el.tag === CONTAINER) return children.length === 1 ? children[0] : { kind: "fragment", children };
     const at = this.tagAt(el);
     return {
       kind: "element",
       tag: el.tag,
       svg: el.namespace === "svg",
       props: this.lowerAttributes(el.attributes),
-      children: this.lowerChildren(el.children),
+      children,
       static: false,
       ...at ? { at } : {}
     };
@@ -806,10 +824,14 @@ var Lowerer = class {
     const at = this.tagAt(el);
     return { kind: "component", name: "Show", props, children: [child], ...at ? { at } : {}, ...cond.at ? { bindAt: cond.at } : {} };
   }
-  /** `<el each=${items} key?>${item => …}</el>` → `<For each>{item => <el>…</el>}</For>`. */
+  /**
+   * `<el each=${items} key?>${item => …}</el>` → `<el><For each>{item => …}</For></el>`: the
+   * content is repeated per item. Content that is not a `${item => …}` arrow is repeated as
+   * it is. Null when the element has no `each`.
+   */
   lowerEach(el) {
     const eachDir = el.attributes.find((a) => a.kind === "EachDirective");
-    if (!eachDir || eachDir.kind !== "EachDirective") return this.lowerNode(el);
+    if (!eachDir || eachDir.kind !== "EachDirective") return null;
     const each = this.hole(eachDir.hole);
     const props = [{ name: "each", kind: "attr", expr: each.code, reactive: each.reactive, ...each.at ? { at: each.at } : {} }];
     if (eachDir.key) {
@@ -819,12 +841,12 @@ var Lowerer = class {
     const arrow = this.itemArrow(el);
     let childrenCode;
     if (arrow) {
-      const bodyIR = { kind: "expr", code: arrow.body, reactive: arrow.bodyReactive };
-      const repeated = this.rebuildWithChildren(el, [bodyIR]);
-      childrenCode = `(${arrow.params.join(", ")}) => ${paren(this.emit(repeated), "arrowBody")}`;
+      const body = arrow.bodyReactive ? `() => ${paren(arrow.body, "arrowBody")}` : paren(arrow.body, "arrowBody");
+      childrenCode = `(${arrow.params.join(", ")}) => ${body}`;
     } else {
-      const repeated = this.stripAndLower(el, (a) => a.kind === "EachDirective");
-      childrenCode = `() => ${paren(this.emit(repeated), "arrowBody")}`;
+      const content = this.lowerChildren(el.children);
+      const ir = content.length === 1 ? content[0] : { kind: "fragment", children: content };
+      childrenCode = `() => ${paren(this.emit(ir), "arrowBody")}`;
     }
     const children = [{ kind: "expr", code: childrenCode, reactive: false }];
     const at = this.tagAt(el);
@@ -841,25 +863,6 @@ var Lowerer = class {
     const clone = { ...el, attributes: el.attributes.filter((a) => !drop(a)) };
     return clone.kind === "Element" ? this.lowerElement(clone) : this.lowerComponent(clone);
   }
-  /** Same element (minus each/key) but with explicit IR children. */
-  rebuildWithChildren(el, children) {
-    const props = this.lowerAttributes(
-      el.attributes.filter((a) => a.kind !== "EachDirective")
-    );
-    if (el.kind === "Element") {
-      const at = this.tagAt(el);
-      return {
-        kind: "element",
-        tag: el.tag,
-        svg: el.namespace === "svg",
-        props,
-        children,
-        static: false,
-        ...at ? { at } : {}
-      };
-    }
-    return { kind: "component", name: el.tag, props, children };
-  }
   // --- attributes ---------------------------------------------------------
   lowerAttributes(attrs) {
     const props = [];

package/dist/lower/template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/lower/template.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAML,KAAK,KAAK,EAGX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAsB,MAAM,gBAAgB,CAAC;AAM/E;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,sFAAsF;IACtF,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAE,CAAC;IAClE,iFAAiF;IACjF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,YAAY,CAAC;CACnB;AAmhBD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,KAAK,EAAE,EACf,KAAK,EAAE,YAAY,EAAE,EACrB,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,EACjB,IAAI,GAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CAAO,GACnH,MAAM,CAGR"}
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/lower/template.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAML,KAAK,KAAK,EAGX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAsB,MAAM,gBAAgB,CAAC;AAM/E;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,sFAAsF;IACtF,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAE,CAAC;IAClE,iFAAiF;IACjF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,YAAY,CAAC;CACnB;AAwgBD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,KAAK,EAAE,EACf,KAAK,EAAE,YAAY,EAAE,EACrB,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,EACjB,IAAI,GAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CAAO,GACnH,MAAM,CAGR"}

package/dist/lower/template.js

@@ -19,6 +19,8 @@ const DELEGATED = new Set([
 function escapeTemplate(s) {
     return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
 }
+/** The tag that carries directives and renders only its content. Never a custom element: no dash. */
+const CONTAINER = 'container';
 function capitalize(s) {
     return s.charAt(0).toUpperCase() + s.slice(1);
 }
@@ -88,10 +90,6 @@ class Lowerer {
                         i = elseIdx;
                     continue;
                 }
-                if (child.attributes.some((a) => a.kind === 'EachDirective')) {
-                    out.push(this.lowerEach(child));
-                    continue;
-                }
             }
             const node = this.lowerNode(child);
             if (node)
@@ -137,13 +135,19 @@ class Lowerer {
             node.props.unshift({ name: 'component', kind: 'attr', expr: `() => ${paren(this.hole(isAttr.value.hole).code, 'arrowBody')}` });
             return node;
         }
+        // `each` repeats the element's content, never the element: `<ul each>` is one list.
+        const each = this.lowerEach(el);
+        const children = each ? [each] : this.lowerChildren(el.children);
+        // A `<container>` is only what it holds. It carries the directives and is never rendered.
+        if (el.tag === CONTAINER)
+            return children.length === 1 ? children[0] : { kind: 'fragment', children };
         const at = this.tagAt(el);
         return {
             kind: 'element',
             tag: el.tag,
             svg: el.namespace === 'svg',
             props: this.lowerAttributes(el.attributes),
-            children: this.lowerChildren(el.children),
+            children,
             static: false,
             ...(at ? { at } : {}),
         };
@@ -233,11 +237,15 @@ class Lowerer {
         const at = this.tagAt(el);
         return { kind: 'component', name: 'Show', props, children: [child], ...(at ? { at } : {}), ...(cond.at ? { bindAt: cond.at } : {}) };
     }
-    /** `<el each=${items} key?>${item => …}</el>` → `<For each>{item => <el>…</el>}</For>`. */
+    /**
+     * `<el each=${items} key?>${item => …}</el>` → `<el><For each>{item => …}</For></el>`: the
+     * content is repeated per item. Content that is not a `${item => …}` arrow is repeated as
+     * it is. Null when the element has no `each`.
+     */
     lowerEach(el) {
         const eachDir = el.attributes.find((a) => a.kind === 'EachDirective');
         if (!eachDir || eachDir.kind !== 'EachDirective')
-            return this.lowerNode(el);
+            return null;
         const each = this.hole(eachDir.hole);
         const props = [{ name: 'each', kind: 'attr', expr: each.code, reactive: each.reactive, ...(each.at ? { at: each.at } : {}) }];
         if (eachDir.key) {
@@ -248,17 +256,18 @@ class Lowerer {
                 : this.hole(eachDir.key.hole).code;
             props.push({ name: 'by', kind: 'attr', expr: by });
         }
-        // The element minus its each/key, repeated per item.
         const arrow = this.itemArrow(el);
         let childrenCode;
         if (arrow) {
-            const bodyIR = { kind: 'expr', code: arrow.body, reactive: arrow.bodyReactive };
-            const repeated = this.rebuildWithChildren(el, [bodyIR]);
-            childrenCode = `(${arrow.params.join(', ')}) => ${paren(this.emit(repeated), 'arrowBody')}`;
+            // A body that reads signals, `${(it) => it.label + count()}`, stays live: it is handed
+            // back as an accessor for the runtime to bind, as it was inside the repeated element.
+            const body = arrow.bodyReactive ? `() => ${paren(arrow.body, 'arrowBody')}` : paren(arrow.body, 'arrowBody');
+            childrenCode = `(${arrow.params.join(', ')}) => ${body}`;
         }
         else {
-            const repeated = this.stripAndLower(el, (a) => a.kind === 'EachDirective');
-            childrenCode = `() => ${paren(this.emit(repeated), 'arrowBody')}`;
+            const content = this.lowerChildren(el.children);
+            const ir = content.length === 1 ? content[0] : { kind: 'fragment', children: content };
+            childrenCode = `() => ${paren(this.emit(ir), 'arrowBody')}`;
         }
         const children = [{ kind: 'expr', code: childrenCode, reactive: false }];
         const at = this.tagAt(el);
@@ -276,23 +285,6 @@ class Lowerer {
         const clone = { ...el, attributes: el.attributes.filter((a) => !drop(a)) };
         return clone.kind === 'Element' ? this.lowerElement(clone) : this.lowerComponent(clone);
     }
-    /** Same element (minus each/key) but with explicit IR children. */
-    rebuildWithChildren(el, children) {
-        const props = this.lowerAttributes(el.attributes.filter((a) => a.kind !== 'EachDirective'));
-        if (el.kind === 'Element') {
-            const at = this.tagAt(el);
-            return {
-                kind: 'element',
-                tag: el.tag,
-                svg: el.namespace === 'svg',
-                props,
-                children,
-                static: false,
-                ...(at ? { at } : {}),
-            };
-        }
-        return { kind: 'component', name: el.tag, props, children };
-    }
     // --- attributes ---------------------------------------------------------
     lowerAttributes(attrs) {
         const props = [];

package/dist/lower/template.mjs

@@ -261,6 +261,7 @@ var INTRINSICS = {
   $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" },
+  $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", 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.
@@ -271,6 +272,19 @@ var INTRINSICS = {
   // dependency analysis must not guess at.
   $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
   $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
+  // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
+  // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
+  $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
+  $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
+  $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
+  $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
+  $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
+  $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
+  // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
+  // handle as far as reads go: the same accessor with `set` on it.
+  $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
   // An environment variable, public or server-only; the browser build refuses a secret.
   $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
 };
@@ -448,13 +462,16 @@ function emitComponent(name, props, children, used, templates, at) {
   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)}; }`
-  );
+  const bodies = normal.map((p) => [p.name, componentPropValue(p)]);
   if (children.length > 0) {
-    entries.push(`get children() { return ${emitChildren(children, used, templates)}; }`);
+    bodies.push(["children", emitChildren(children, used, templates)]);
+  }
+  let obj = `{ ${bodies.map(([name2, body]) => `get ${propKey(name2)}() { return ${body}; }`).join(", ")} }`;
+  if (bodies.some(([, body]) => /\bthis\b/.test(body))) {
+    const thunks = bodies.map(([name2, body]) => `${JSON.stringify(name2)}: () => ${body}`);
+    const getters = bodies.map(([name2]) => `get ${propKey(name2)}() { return _$t[${JSON.stringify(name2)}](); }`);
+    obj = `((_$t) => ({ ${getters.join(", ")} }))({ ${thunks.join(", ")} })`;
   }
-  let obj = `{ ${entries.join(", ")} }`;
   if (spreads.length > 0) {
     used.add("mergeProps");
     obj = `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
@@ -536,7 +553,8 @@ function emitNode(node, used, templates) {
         } else {
           used.add("spread");
           const svgFlag = node.svg ? ", isSVG: true" : "";
-          const customFlag = node.tag.includes("-") ? ", isCustomElement: true" : "";
+          const accessors = node.props.filter((p) => p.kind !== "spread" && p.expr !== void 0 && p.reactive && p.name !== "ref").map((p) => p.name);
+          const customFlag = node.tag.includes("-") ? `, isCustomElement: true, accessors: ${JSON.stringify(accessors)}` : "";
           parts.push(
             `spread({ element: ${el}, props: ${emitProps(node.props, null, used)}${svgFlag}${customFlag} });`
           );
@@ -607,6 +625,7 @@ var DELEGATED = /* @__PURE__ */ new Set([
 function escapeTemplate(s) {
   return s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
 }
+var CONTAINER = "container";
 function capitalize(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
@@ -661,10 +680,6 @@ var Lowerer = class {
           if (hasElse) i = elseIdx;
           continue;
         }
-        if (child.attributes.some((a) => a.kind === "EachDirective")) {
-          out.push(this.lowerEach(child));
-          continue;
-        }
       }
       const node = this.lowerNode(child);
       if (node) out.push(node);
@@ -706,13 +721,16 @@ var Lowerer = class {
       node.props.unshift({ name: "component", kind: "attr", expr: `() => ${paren(this.hole(isAttr.value.hole).code, "arrowBody")}` });
       return node;
     }
+    const each = this.lowerEach(el);
+    const children = each ? [each] : this.lowerChildren(el.children);
+    if (el.tag === CONTAINER) return children.length === 1 ? children[0] : { kind: "fragment", children };
     const at = this.tagAt(el);
     return {
       kind: "element",
       tag: el.tag,
       svg: el.namespace === "svg",
       props: this.lowerAttributes(el.attributes),
-      children: this.lowerChildren(el.children),
+      children,
       static: false,
       ...at ? { at } : {}
     };
@@ -784,10 +802,14 @@ var Lowerer = class {
     const at = this.tagAt(el);
     return { kind: "component", name: "Show", props, children: [child], ...at ? { at } : {}, ...cond.at ? { bindAt: cond.at } : {} };
   }
-  /** `<el each=${items} key?>${item => …}</el>` → `<For each>{item => <el>…</el>}</For>`. */
+  /**
+   * `<el each=${items} key?>${item => …}</el>` → `<el><For each>{item => …}</For></el>`: the
+   * content is repeated per item. Content that is not a `${item => …}` arrow is repeated as
+   * it is. Null when the element has no `each`.
+   */
   lowerEach(el) {
     const eachDir = el.attributes.find((a) => a.kind === "EachDirective");
-    if (!eachDir || eachDir.kind !== "EachDirective") return this.lowerNode(el);
+    if (!eachDir || eachDir.kind !== "EachDirective") return null;
     const each = this.hole(eachDir.hole);
     const props = [{ name: "each", kind: "attr", expr: each.code, reactive: each.reactive, ...each.at ? { at: each.at } : {} }];
     if (eachDir.key) {
@@ -797,12 +819,12 @@ var Lowerer = class {
     const arrow = this.itemArrow(el);
     let childrenCode;
     if (arrow) {
-      const bodyIR = { kind: "expr", code: arrow.body, reactive: arrow.bodyReactive };
-      const repeated = this.rebuildWithChildren(el, [bodyIR]);
-      childrenCode = `(${arrow.params.join(", ")}) => ${paren(this.emit(repeated), "arrowBody")}`;
+      const body = arrow.bodyReactive ? `() => ${paren(arrow.body, "arrowBody")}` : paren(arrow.body, "arrowBody");
+      childrenCode = `(${arrow.params.join(", ")}) => ${body}`;
     } else {
-      const repeated = this.stripAndLower(el, (a) => a.kind === "EachDirective");
-      childrenCode = `() => ${paren(this.emit(repeated), "arrowBody")}`;
+      const content = this.lowerChildren(el.children);
+      const ir = content.length === 1 ? content[0] : { kind: "fragment", children: content };
+      childrenCode = `() => ${paren(this.emit(ir), "arrowBody")}`;
     }
     const children = [{ kind: "expr", code: childrenCode, reactive: false }];
     const at = this.tagAt(el);
@@ -819,25 +841,6 @@ var Lowerer = class {
     const clone = { ...el, attributes: el.attributes.filter((a) => !drop(a)) };
     return clone.kind === "Element" ? this.lowerElement(clone) : this.lowerComponent(clone);
   }
-  /** Same element (minus each/key) but with explicit IR children. */
-  rebuildWithChildren(el, children) {
-    const props = this.lowerAttributes(
-      el.attributes.filter((a) => a.kind !== "EachDirective")
-    );
-    if (el.kind === "Element") {
-      const at = this.tagAt(el);
-      return {
-        kind: "element",
-        tag: el.tag,
-        svg: el.namespace === "svg",
-        props,
-        children,
-        static: false,
-        ...at ? { at } : {}
-      };
-    }
-    return { kind: "component", name: el.tag, props, children };
-  }
   // --- attributes ---------------------------------------------------------
   lowerAttributes(attrs) {
     const props = [];

package/dist/resolve/builtins.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/compiler v1.0.0-alpha.92 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.93 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/resolve/builtins.mjs

@@ -1,4 +1,4 @@
-/*! @fluixi/compiler v1.0.0-alpha.92 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.93 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 
 // src/resolve/builtins.ts
 var DOM_CONTROL_FLOW = [

package/dist/resolve/component-globals.cjs

@@ -124,6 +124,7 @@ var INTRINSICS = {
   $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" },
+  $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", 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.
@@ -134,6 +135,19 @@ var INTRINSICS = {
   // dependency analysis must not guess at.
   $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
   $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
+  // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
+  // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
+  $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
+  $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
+  $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
+  $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
+  $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
+  $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
+  // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
+  // handle as far as reads go: the same accessor with `set` on it.
+  $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
   // An environment variable, public or server-only; the browser build refuses a secret.
   $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
 };

package/dist/resolve/component-globals.mjs

@@ -98,6 +98,7 @@ var INTRINSICS = {
   $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" },
+  $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", 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.
@@ -108,6 +109,19 @@ var INTRINSICS = {
   // dependency analysis must not guess at.
   $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
   $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
+  // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
+  // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
+  $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
+  $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
+  $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
+  $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
+  $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
+  $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
+  // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
+  // handle as far as reads go: the same accessor with `set` on it.
+  $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
   // An environment variable, public or server-only; the browser build refuses a secret.
   $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
 };

package/dist/resolve/write-globals.cjs

@@ -128,6 +128,7 @@ var INTRINSICS = {
   $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" },
+  $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", 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.
@@ -138,6 +139,19 @@ var INTRINSICS = {
   // dependency analysis must not guess at.
   $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
   $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
+  // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
+  // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
+  $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
+  $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
+  $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
+  $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
+  $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
+  $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
+  // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
+  // handle as far as reads go: the same accessor with `set` on it.
+  $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
   // An environment variable, public or server-only; the browser build refuses a secret.
   $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
 };

package/dist/resolve/write-globals.mjs

@@ -102,6 +102,7 @@ var INTRINSICS = {
   $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" },
+  $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", 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.
@@ -112,6 +113,19 @@ var INTRINSICS = {
   // dependency analysis must not guess at.
   $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
   $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
+  // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
+  // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
+  $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
+  $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
+  $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
+  $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
+  $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
+  $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
+  // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
+  // handle as far as reads go: the same accessor with `set` on it.
+  $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
   // An environment variable, public or server-only; the browser build refuses a secret.
   $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
 };

package/dist/{server-fns-BBZRZUPP.mjs → server-fns-ZFRDIQ2X.mjs}

@@ -1,11 +1,11 @@
-/*! @fluixi/compiler v1.0.0-alpha.92 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.93 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 import {
   MagicString
-} from "./chunk-DWNWN5RH.mjs";
+} from "./chunk-R7PPFBCL.mjs";
 import {
   serverFnId
-} from "./chunk-QZ4CJPYP.mjs";
-import "./chunk-VOUI6XPV.mjs";
+} from "./chunk-56QSOVVL.mjs";
+import "./chunk-TJIH7TLX.mjs";
 
 // src/transform/server-fns.ts
 import { parse } from "@babel/parser";

package/dist/{server-functions-VEGLIFCE.mjs → server-functions-CTDXX67X.mjs}

@@ -1,8 +1,8 @@
-/*! @fluixi/compiler v1.0.0-alpha.92 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.93 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 import {
   serverFnId
-} from "./chunk-QZ4CJPYP.mjs";
-import "./chunk-VOUI6XPV.mjs";
+} from "./chunk-56QSOVVL.mjs";
+import "./chunk-TJIH7TLX.mjs";
 
 // src/frontend/babel/server-functions.ts
 import { transformSync } from "@babel/core";