@fluixi/compiler 1.0.0-alpha.91 → 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.
@@ -292,7 +293,22 @@ var INTRINSICS = {
   // does. `untrack` suppresses dependency collection, which is exactly the kind of thing
   // dependency analysis must not guess at.
   $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
-  $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" }
+  $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" }
 };
 var INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
 
@@ -468,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})`;
@@ -556,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} });`
           );
@@ -627,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);
 }
@@ -681,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);
@@ -726,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 } : {}
     };
@@ -804,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) {
@@ -817,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);
@@ -839,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.
@@ -270,7 +271,22 @@ var INTRINSICS = {
   // does. `untrack` suppresses dependency collection, which is exactly the kind of thing
   // dependency analysis must not guess at.
   $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
-  $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" }
+  $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" }
 };
 var INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
 
@@ -446,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})`;
@@ -534,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} });`
           );
@@ -605,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);
 }
@@ -659,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);
@@ -704,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 } : {}
     };
@@ -782,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) {
@@ -795,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);
@@ -817,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.91 | (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.91 | (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.
@@ -133,7 +134,22 @@ var INTRINSICS = {
   // does. `untrack` suppresses dependency collection, which is exactly the kind of thing
   // dependency analysis must not guess at.
   $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
-  $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" }
+  $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" }
 };
 var INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
 
@@ -175,7 +191,8 @@ function componentGlobals(rules, options = {}) {
     builtins = true,
     intrinsics = true,
     generator = "@fluixi/compiler",
-    specifier = (module2) => module2
+    specifier = (module2) => module2,
+    candidates = []
   } = options;
   const all = [...rules];
   if (builtins) {
@@ -187,7 +204,8 @@ function componentGlobals(rules, options = {}) {
   const shadowedByDom = [];
   const unavailable = [];
   const resolved = /* @__PURE__ */ new Map();
-  for (const name of [...resolver.names()].sort()) {
+  const names = /* @__PURE__ */ new Set([...resolver.names(), ...[...candidates].filter((n) => /^[A-Za-z_$][\w$]*$/.test(n))]);
+  for (const name of [...names].sort()) {
     const target = resolver.resolve(name);
     if (!target) continue;
     const pkg = packageOf(target.module);
@@ -198,7 +216,11 @@ function componentGlobals(rules, options = {}) {
       resolved.set(name, target);
     }
   }
-  const intrinsicModules = intrinsics ? [...new Set(Object.values(INTRINSICS).map((i) => i.module))] : [];
+  const usableIntrinsics = intrinsics ? Object.entries(INTRINSICS).filter(([, i]) => {
+    const pkg = packageOf(i.module);
+    return !available || !pkg || available.has(pkg);
+  }) : [];
+  const intrinsicModules = [...new Set(usableIntrinsics.map(([, i]) => i.module))];
   const modules = [
     .../* @__PURE__ */ new Set([...declared.map((name) => resolved.get(name).module), ...intrinsicModules])
   ].sort();
@@ -218,15 +240,18 @@ function componentGlobals(rules, options = {}) {
     return `//   import { ${n} } from '${module2 ? specifier(module2) : ""}';
 `;
   }).join("") : "";
-  const intrinsicLines = intrinsics ? Object.entries(INTRINSICS).map(
+  const intrinsicLines = usableIntrinsics.map(
     ([name, intrinsic]) => `  const ${name}: typeof ${namespaceAlias(intrinsic.module)}.${intrinsic.export};`
-  ) : [];
+  );
   const patternRules = rules.filter((rule) => "match" in rule).length;
-  const patternNote = patternRules > 0 ? `//
+  const patternNote = patternRules === 0 ? "" : options.candidates ? `//
+// ${patternRules} pattern rule${patternRules === 1 ? "" : "s"}: declared for the files the module path
+// points at. A name with no such file still resolves at build time; declare it by hand.
+` : `//
 // ${patternRules} pattern rule${patternRules === 1 ? "" : "s"} cannot be declared:
 // a pattern matches unboundedly many names, so there is no list to emit. Those
 // tags still resolve at build time; declare them by hand if the editor needs them.
-` : "";
+`;
   const source = `// GENERATED by ${generator}, do not edit.
 //
 // The components \`resolve\` supplies without an import. This describes what the

package/dist/resolve/component-globals.d.cts

@@ -46,6 +46,14 @@ export interface ComponentGlobalsOptions {
      * "Cannot find name '$signal'" for code that builds correctly.
      */
     intrinsics?: boolean;
+    /**
+     * Names to try against the pattern rules.
+     *
+     * A pattern has no name list of its own, but the files it points at do: the caller lists
+     * them (the generator stays off the filesystem) and each name the resolver answers is
+     * declared like any other.
+     */
+    candidates?: Iterable<string>;
     /** Attribution written into the header. */
     generator?: string;
     /**

package/dist/resolve/component-globals.d.ts

@@ -46,6 +46,14 @@ export interface ComponentGlobalsOptions {
      * "Cannot find name '$signal'" for code that builds correctly.
      */
     intrinsics?: boolean;
+    /**
+     * Names to try against the pattern rules.
+     *
+     * A pattern has no name list of its own, but the files it points at do: the caller lists
+     * them (the generator stays off the filesystem) and each name the resolver answers is
+     * declared like any other.
+     */
+    candidates?: Iterable<string>;
     /** Attribution written into the header. */
     generator?: string;
     /**

package/dist/resolve/component-globals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-globals.d.ts","sourceRoot":"","sources":["../../src/resolve/component-globals.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,yBAAyB,CAAC;AAmCjC,MAAM,WAAW,uBAAuB;IACtC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC7B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC;AAED,MAAM,WAAW,sBAAsB;IACrC,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,0DAA0D;IAC1D,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,qEAAqE;IACrE,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB;;;;;;OAMG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAgBD,0FAA0F;AAC1F,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,qBAAqB,EAAE,EACvC,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CA2GxB"}
+{"version":3,"file":"component-globals.d.ts","sourceRoot":"","sources":["../../src/resolve/component-globals.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,yBAAyB,CAAC;AAmCjC,MAAM,WAAW,uBAAuB;IACtC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC7B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC9B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC;AAED,MAAM,WAAW,sBAAsB;IACrC,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,0DAA0D;IAC1D,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,qEAAqE;IACrE,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB;;;;;;OAMG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAgBD,0FAA0F;AAC1F,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,qBAAqB,EAAE,EACvC,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CAoHxB"}

package/dist/resolve/component-globals.js

@@ -65,7 +65,7 @@ function namespaceAlias(module) {
 }
 /** Build the ambient `.d.ts` for the components a project's `resolve` config supplies. */
 export function componentGlobals(rules, options = {}) {
-    const { available: availableList, builtins = true, intrinsics = true, generator = '@fluixi/compiler', specifier = (module) => module, } = options;
+    const { available: availableList, builtins = true, intrinsics = true, generator = '@fluixi/compiler', specifier = (module) => module, candidates = [], } = options;
     const all = [...rules];
     if (builtins) {
         // Appended, so an explicit rule for the same name still wins, the resolver is
@@ -78,9 +78,9 @@ export function componentGlobals(rules, options = {}) {
     const shadowedByDom = [];
     const unavailable = [];
     const resolved = new Map();
-    for (const name of [...resolver.names()].sort()) {
+    const names = new Set([...resolver.names(), ...[...candidates].filter((n) => /^[A-Za-z_$][\w$]*$/.test(n))]);
+    for (const name of [...names].sort()) {
         const target = resolver.resolve(name);
-        /* c8 ignore next */
         if (!target)
             continue;
         const pkg = packageOf(target.module);
@@ -97,7 +97,15 @@ export function componentGlobals(rules, options = {}) {
     // '$signal'" for code that compiles. tsc doesn't load language-service plugins, so an
     // ambient declaration is the only thing that answers for both the editor and the
     // command line.
-    const intrinsicModules = intrinsics ? [...new Set(Object.values(INTRINSICS).map((i) => i.module))] : [];
+    // Only the intrinsics whose package the project has: `$env` comes from `@fluixi/start`, and
+    // an app without it would otherwise get a declaration that fails to resolve.
+    const usableIntrinsics = intrinsics
+        ? Object.entries(INTRINSICS).filter(([, i]) => {
+            const pkg = packageOf(i.module);
+            return !available || !pkg || available.has(pkg);
+        })
+        : [];
+    const intrinsicModules = [...new Set(usableIntrinsics.map(([, i]) => i.module))];
     const modules = [
         ...new Set([...declared.map((name) => resolved.get(name).module), ...intrinsicModules]),
     ].sort();
@@ -130,15 +138,16 @@ export function componentGlobals(rules, options = {}) {
     // `typeof ns.signal` rather than an alias: the intrinsic is a global that stands for
     // the runtime call, so it takes the runtime's signature without claiming to be that
     // symbol: go-to-definition on `$signal` should land on what it compiles to.
-    const intrinsicLines = intrinsics
-        ? Object.entries(INTRINSICS).map(([name, intrinsic]) => `  const ${name}: typeof ${namespaceAlias(intrinsic.module)}.${intrinsic.export};`)
-        : [];
+    const intrinsicLines = usableIntrinsics.map(([name, intrinsic]) => `  const ${name}: typeof ${namespaceAlias(intrinsic.module)}.${intrinsic.export};`);
     const patternRules = rules.filter((rule) => 'match' in rule).length;
-    const patternNote = patternRules > 0
-        ? `//\n// ${patternRules} pattern rule${patternRules === 1 ? '' : 's'} cannot be declared:\n` +
-            `// a pattern matches unboundedly many names, so there is no list to emit. Those\n` +
-            `// tags still resolve at build time; declare them by hand if the editor needs them.\n`
-        : '';
+    const patternNote = patternRules === 0
+        ? ''
+        : options.candidates
+            ? `//\n// ${patternRules} pattern rule${patternRules === 1 ? '' : 's'}: declared for the files the module path\n` +
+                `// points at. A name with no such file still resolves at build time; declare it by hand.\n`
+            : `//\n// ${patternRules} pattern rule${patternRules === 1 ? '' : 's'} cannot be declared:\n` +
+                `// a pattern matches unboundedly many names, so there is no list to emit. Those\n` +
+                `// tags still resolve at build time; declare them by hand if the editor needs them.\n`;
     const source = `// GENERATED by ${generator}, do not edit.\n` +
         `//\n` +
         `// The components \`resolve\` supplies without an import. This describes what the\n` +