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

package/dist/index.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.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -328,6 +328,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.
@@ -338,9 +339,27 @@ 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" }
 };
+var TAG_INTRINSICS = {
+  $html: { export: "html", module: "@fluixi/core" },
+  $svg: { export: "svg", module: "@fluixi/core" },
+  $css: { export: "css", module: "@fluixi/core" }
+};
 var INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
 
 // src/transform/source-locations.ts
@@ -515,13 +534,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})`;
@@ -603,7 +625,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} });`
           );
@@ -656,6 +679,271 @@ function cleanTemplateText(value) {
   return out;
 }
 
+// src/lower/entities.ts
+var NAMED = {
+  quot: 34,
+  amp: 38,
+  apos: 39,
+  lt: 60,
+  gt: 62,
+  nbsp: 160,
+  iexcl: 161,
+  cent: 162,
+  pound: 163,
+  curren: 164,
+  yen: 165,
+  brvbar: 166,
+  sect: 167,
+  uml: 168,
+  copy: 169,
+  ordf: 170,
+  laquo: 171,
+  not: 172,
+  shy: 173,
+  reg: 174,
+  macr: 175,
+  deg: 176,
+  plusmn: 177,
+  sup2: 178,
+  sup3: 179,
+  acute: 180,
+  micro: 181,
+  para: 182,
+  middot: 183,
+  cedil: 184,
+  sup1: 185,
+  ordm: 186,
+  raquo: 187,
+  frac14: 188,
+  frac12: 189,
+  frac34: 190,
+  iquest: 191,
+  Agrave: 192,
+  Aacute: 193,
+  Acirc: 194,
+  Atilde: 195,
+  Auml: 196,
+  Aring: 197,
+  AElig: 198,
+  Ccedil: 199,
+  Egrave: 200,
+  Eacute: 201,
+  Ecirc: 202,
+  Euml: 203,
+  Igrave: 204,
+  Iacute: 205,
+  Icirc: 206,
+  Iuml: 207,
+  ETH: 208,
+  Ntilde: 209,
+  Ograve: 210,
+  Oacute: 211,
+  Ocirc: 212,
+  Otilde: 213,
+  Ouml: 214,
+  times: 215,
+  Oslash: 216,
+  Ugrave: 217,
+  Uacute: 218,
+  Ucirc: 219,
+  Uuml: 220,
+  Yacute: 221,
+  THORN: 222,
+  szlig: 223,
+  agrave: 224,
+  aacute: 225,
+  acirc: 226,
+  atilde: 227,
+  auml: 228,
+  aring: 229,
+  aelig: 230,
+  ccedil: 231,
+  egrave: 232,
+  eacute: 233,
+  ecirc: 234,
+  euml: 235,
+  igrave: 236,
+  iacute: 237,
+  icirc: 238,
+  iuml: 239,
+  eth: 240,
+  ntilde: 241,
+  ograve: 242,
+  oacute: 243,
+  ocirc: 244,
+  otilde: 245,
+  ouml: 246,
+  divide: 247,
+  oslash: 248,
+  ugrave: 249,
+  uacute: 250,
+  ucirc: 251,
+  uuml: 252,
+  yacute: 253,
+  thorn: 254,
+  yuml: 255,
+  OElig: 338,
+  oelig: 339,
+  Scaron: 352,
+  scaron: 353,
+  Yuml: 376,
+  fnof: 402,
+  circ: 710,
+  tilde: 732,
+  Alpha: 913,
+  Beta: 914,
+  Gamma: 915,
+  Delta: 916,
+  Epsilon: 917,
+  Zeta: 918,
+  Eta: 919,
+  Theta: 920,
+  Iota: 921,
+  Kappa: 922,
+  Lambda: 923,
+  Mu: 924,
+  Nu: 925,
+  Xi: 926,
+  Omicron: 927,
+  Pi: 928,
+  Rho: 929,
+  Sigma: 931,
+  Tau: 932,
+  Upsilon: 933,
+  Phi: 934,
+  Chi: 935,
+  Psi: 936,
+  Omega: 937,
+  alpha: 945,
+  beta: 946,
+  gamma: 947,
+  delta: 948,
+  epsilon: 949,
+  zeta: 950,
+  eta: 951,
+  theta: 952,
+  iota: 953,
+  kappa: 954,
+  lambda: 955,
+  mu: 956,
+  nu: 957,
+  xi: 958,
+  omicron: 959,
+  pi: 960,
+  rho: 961,
+  sigmaf: 962,
+  sigma: 963,
+  tau: 964,
+  upsilon: 965,
+  phi: 966,
+  chi: 967,
+  psi: 968,
+  omega: 969,
+  thetasym: 977,
+  upsih: 978,
+  piv: 982,
+  ensp: 8194,
+  emsp: 8195,
+  thinsp: 8201,
+  zwnj: 8204,
+  zwj: 8205,
+  lrm: 8206,
+  rlm: 8207,
+  ndash: 8211,
+  mdash: 8212,
+  lsquo: 8216,
+  rsquo: 8217,
+  sbquo: 8218,
+  ldquo: 8220,
+  rdquo: 8221,
+  bdquo: 8222,
+  dagger: 8224,
+  Dagger: 8225,
+  bull: 8226,
+  hellip: 8230,
+  permil: 8240,
+  prime: 8242,
+  Prime: 8243,
+  lsaquo: 8249,
+  rsaquo: 8250,
+  oline: 8254,
+  frasl: 8260,
+  euro: 8364,
+  image: 8465,
+  weierp: 8472,
+  real: 8476,
+  trade: 8482,
+  alefsym: 8501,
+  larr: 8592,
+  uarr: 8593,
+  rarr: 8594,
+  darr: 8595,
+  harr: 8596,
+  crarr: 8629,
+  lArr: 8656,
+  uArr: 8657,
+  rArr: 8658,
+  dArr: 8659,
+  hArr: 8660,
+  forall: 8704,
+  part: 8706,
+  exist: 8707,
+  empty: 8709,
+  nabla: 8711,
+  isin: 8712,
+  notin: 8713,
+  ni: 8715,
+  prod: 8719,
+  sum: 8721,
+  minus: 8722,
+  lowast: 8727,
+  radic: 8730,
+  prop: 8733,
+  infin: 8734,
+  ang: 8736,
+  and: 8743,
+  or: 8744,
+  cap: 8745,
+  cup: 8746,
+  int: 8747,
+  there4: 8756,
+  sim: 8764,
+  cong: 8773,
+  asymp: 8776,
+  ne: 8800,
+  equiv: 8801,
+  le: 8804,
+  ge: 8805,
+  sub: 8834,
+  sup: 8835,
+  nsub: 8836,
+  sube: 8838,
+  supe: 8839,
+  oplus: 8853,
+  otimes: 8855,
+  perp: 8869,
+  sdot: 8901,
+  lceil: 8968,
+  rceil: 8969,
+  lfloor: 8970,
+  rfloor: 8971,
+  lang: 9001,
+  rang: 9002,
+  loz: 9674,
+  spades: 9824,
+  clubs: 9827,
+  hearts: 9829,
+  diams: 9830
+};
+var REFERENCE = /&(?:#[xX]([0-9a-fA-F]{1,6})|#([0-9]{1,7})|([a-zA-Z][a-zA-Z0-9]{1,31}));/g;
+function decodeEntities(value) {
+  if (!value.includes("&")) return value;
+  return value.replace(REFERENCE, (match, hex, dec, name) => {
+    const code = hex ? parseInt(hex, 16) : dec ? parseInt(dec, 10) : Object.prototype.hasOwnProperty.call(NAMED, name) ? NAMED[name] : void 0;
+    return code !== void 0 && code <= 1114111 ? String.fromCodePoint(code) : match;
+  });
+}
+
 // src/lower/template.ts
 var DELEGATED = /* @__PURE__ */ new Set([
   "click",
@@ -674,6 +962,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);
 }
@@ -728,10 +1017,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);
@@ -745,7 +1030,7 @@ var Lowerer = class {
     switch (node.kind) {
       case "Text": {
         if (node.raw) return { kind: "text", value: node.value };
-        const cleaned = cleanTemplateText(node.value);
+        const cleaned = decodeEntities(cleanTemplateText(node.value));
         return cleaned ? { kind: "text", value: cleaned } : null;
       }
       case "Comment":
@@ -773,13 +1058,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),
+      props: this.lowerAttributes(el.attributes, true),
+      children,
       static: false,
       ...at ? { at } : {}
     };
@@ -851,10 +1139,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) {
@@ -864,12 +1156,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);
@@ -886,33 +1178,23 @@ 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) {
+  /**
+   * `element`: a DOM element, where each class:/style: value that moves is its own accessor.
+   * A component gets the object as before, rebuilt whole when any value moves.
+   */
+  lowerAttributes(attrs, element = false) {
+    let anyReactive = false;
+    const entry = (name, h) => {
+      anyReactive ||= h.reactive;
+      if (!element || !h.reactive) return `${JSON.stringify(name)}: ${h.code}`;
+      const accessor = `() => ${paren(h.code, "arrowBody")}`;
+      return `${JSON.stringify(name)}: ${h.at ? markHole(accessor, h.at.line, h.at.column) : accessor}`;
+    };
     const props = [];
     const classEntries = [];
-    let classReactive = false;
     let classAt;
     const styleEntries = [];
-    let styleReactive = false;
     let styleAt;
     const usePairs = [];
     for (const a of attrs) {
@@ -952,15 +1234,13 @@ var Lowerer = class {
           break;
         case "ClassDirective": {
           const h = this.hole(a.hole);
-          classEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
-          classReactive = classReactive || h.reactive;
+          classEntries.push(entry(a.name, h));
           classAt ??= h.at;
           break;
         }
         case "StyleDirective": {
           const h = this.hole(a.hole);
-          styleEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
-          styleReactive = styleReactive || h.reactive;
+          styleEntries.push(entry(a.name, h));
           styleAt ??= h.at;
           break;
         }
@@ -980,18 +1260,19 @@ var Lowerer = class {
         name: "classList",
         kind: "attr",
         expr: `{ ${classEntries.join(", ")} }`,
-        reactive: classReactive,
+        reactive: !element && anyReactive,
         ...classAt ? { at: classAt } : {}
       });
     }
     if (styleEntries.length > 0) {
-      props.push({
-        name: "style",
-        kind: "attr",
-        expr: `{ ${styleEntries.join(", ")} }`,
-        reactive: styleReactive,
-        ...styleAt ? { at: styleAt } : {}
-      });
+      const entries = `{ ${styleEntries.join(", ")} }`;
+      const base = props.findIndex((p) => p.name === "style");
+      if (base === -1) props.push({ name: "style", kind: "attr", expr: entries, reactive: !element && anyReactive, ...styleAt ? { at: styleAt } : {} });
+      else {
+        const prop = props[base];
+        const value = prop.expr === void 0 ? JSON.stringify(prop.literal) : prop.reactive ? `() => ${paren(prop.expr, "arrowBody")}` : prop.expr;
+        props[base] = { name: "style", kind: "attr", expr: `[${value}, ${entries}]`, reactive: false, ...prop.at ? { at: prop.at } : {} };
+      }
     }
     if (usePairs.length > 0) {
       props.push({ name: "use", kind: "attr", expr: `[${usePairs.join(", ")}]` });
@@ -1080,7 +1361,7 @@ var Lowerer = class {
       return base;
     }
     if (v.kind === "static") {
-      base.literal = v.value;
+      base.literal = decodeEntities(v.value);
       return base;
     }
     if (v.kind === "hole") {
@@ -1093,7 +1374,7 @@ var Lowerer = class {
     let reactive = false;
     let at;
     const body = v.parts.map((p) => {
-      if ("text" in p) return escapeTemplate(p.text);
+      if ("text" in p) return escapeTemplate(decodeEntities(p.text));
       const h = this.hole(p.hole);
       reactive = reactive || h.reactive;
       at ??= h.at;
@@ -1110,6 +1391,26 @@ function lowerTemplate(pieces, holes, used, opts = {}) {
   return new Lowerer(holes, used, opts.sourceFile, opts.positionAt).lowerRoot(root.children);
 }
 
+// src/transform/styles.ts
+var import_sourcemap_codec = require("@jridgewell/sourcemap-codec");
+var SCOPE_ATTR = "data-fx-s";
+function applyTemplateStyles(ir, t) {
+  const walk2 = (node) => {
+    const children = node.children;
+    if (children) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        const child = children[i];
+        if (child.kind === "element" && child.tag === "style" && t.owner) children.splice(i, 1);
+        else walk2(child);
+      }
+    }
+    if (t.scope && node.kind === "element" && node.tag !== "style" && node.props && !node.props.some((p) => p.name === SCOPE_ATTR)) {
+      node.props.unshift({ name: SCOPE_ATTR, kind: "attr", literal: t.scope });
+    }
+  };
+  walk2(ir);
+}
+
 // src/optimize/analyze-static.ts
 function propReason(prop) {
   switch (prop.kind) {
@@ -1385,6 +1686,7 @@ function compilePieces(pieces, holes, options = {}) {
     ...options.sourceFile ? { sourceFile: options.sourceFile } : {},
     ...options.positionAt ? { positionAt: options.positionAt } : {}
   });
+  if (options.templateStyles) applyTemplateStyles(ir, options.templateStyles);
   analyzeStatic(ir);
   resolveComponentSources(ir, {
     resolver: createComponentResolver(options.resolve ?? []),
@@ -1468,7 +1770,7 @@ function componentGlobals(rules, options = {}) {
       resolved.set(name, target);
     }
   }
-  const usableIntrinsics = intrinsics ? Object.entries(INTRINSICS).filter(([, i]) => {
+  const usableIntrinsics = intrinsics ? Object.entries({ ...INTRINSICS, ...TAG_INTRINSICS }).filter(([, i]) => {
     const pkg = packageOf(i.module);
     return !available || !pkg || available.has(pkg);
   }) : [];