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

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

@@ -268,6 +268,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.
@@ -278,6 +279,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" }
 };
@@ -455,13 +469,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})`;
@@ -543,7 +560,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} });`
           );
@@ -596,6 +614,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",
@@ -614,6 +897,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);
 }
@@ -668,10 +952,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);
@@ -685,7 +965,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":
@@ -713,13 +993,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 } : {}
     };
@@ -791,10 +1074,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) {
@@ -804,12 +1091,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);
@@ -826,33 +1113,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) {
@@ -892,15 +1169,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;
         }
@@ -920,18 +1195,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(", ")}]` });
@@ -1020,7 +1296,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") {
@@ -1033,7 +1309,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;
@@ -1214,6 +1490,22 @@ var DELEGATED2 = /* @__PURE__ */ new Set([
   "mouseup"
 ]);
 var isReactive = (node) => isReactiveShape(shapeOf(node));
+var CONTAINER2 = "container";
+function directive(node, name) {
+  if (node.type !== "JSXElement") return void 0;
+  const opening = node.openingElement;
+  if (opening.name.type !== "JSXIdentifier" || opening.name.name[0] !== opening.name.name[0].toLowerCase()) return void 0;
+  return opening.attributes.find((a) => a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && a.name.name === name);
+}
+function directiveExpr(attr) {
+  const v = attr.value;
+  return v?.type === "JSXExpressionContainer" && v.expression?.type !== "JSXEmptyExpression" ? v.expression : void 0;
+}
+function emitIR(ir, ctx) {
+  const { code, imports, templates } = imperativeBackend.emit(ir, {});
+  for (const s of imports) ctx.used.add(s);
+  return inlineTemplates(code, templates);
+}
 var posOf = (node, ctx) => {
   if (!ctx.sourceFile) return void 0;
   const at = node.loc?.start;
@@ -1291,9 +1583,12 @@ function attrExprCode(attr, ctx) {
   }
   return null;
 }
-function buildProps(attrs, ctx) {
+function buildProps(attrs, ctx, element = false) {
   const props = [];
   const usePairs = [];
+  const classEntries = [];
+  const styleEntries = [];
+  let styleAt;
   for (const a of attrs) {
     if (a.type === "JSXSpreadAttribute") {
       props.push({ name: "", kind: "spread", expr: ctx.code(a.argument) });
@@ -1309,6 +1604,27 @@ function buildProps(attrs, ctx) {
       usePairs.push(opts != null ? `[${dir}, () => ${paren(opts, "arrowBody")}]` : `[${dir}]`);
       continue;
     }
+    if (element && (ns === "class" || ns === "style")) {
+      const key = JSON.stringify(a.name.name.name);
+      const v = a.value;
+      let value;
+      if (v == null) value = "true";
+      else if (isString(v)) value = JSON.stringify(literalOf(v));
+      else if (v.type === "JSXExpressionContainer" && v.expression?.type !== "JSXEmptyExpression") {
+        value = keyValue(v.expression, ctx);
+        if (ns === "style") styleAt ??= posOf(v.expression, ctx);
+      } else continue;
+      (ns === "class" ? classEntries : styleEntries).push(`${key}: ${value}`);
+      continue;
+    }
+    if (element && a.name.type === "JSXIdentifier" && a.name.name === "style" && a.value?.type === "JSXExpressionContainer") {
+      const entries = objectEntries(a.value.expression, ctx);
+      if (entries) {
+        styleEntries.unshift(...entries);
+        styleAt = posOf(a.value.expression, ctx);
+        continue;
+      }
+    }
     if (ns === "oncapture") {
       const evt = a.name.name.name.toLowerCase();
       const h = attrExprCode(a, ctx) ?? "undefined";
@@ -1317,12 +1633,49 @@ function buildProps(attrs, ctx) {
     }
     props.push(buildAttr(a, ctx));
   }
+  if (classEntries.length > 0) props.push({ name: "classList", kind: "attr", expr: `{ ${classEntries.join(", ")} }`, reactive: false });
+  if (styleEntries.length > 0) {
+    const entries = `{ ${styleEntries.join(", ")} }`;
+    const base = props.findIndex((p) => p.name === "style" && p.kind === "attr");
+    if (base === -1) props.push({ name: "style", kind: "attr", expr: entries, reactive: false, ...styleAt ? { at: styleAt } : {} });
+    else {
+      const prop = props[base];
+      const value = prop.literal !== 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(", ")}]` });
   return props;
 }
+function keyValue(expr, ctx) {
+  const code = ctx.code(expr);
+  if (!isReactive(expr)) return code;
+  const accessor = `() => ${paren(code, "arrowBody")}`;
+  const at = posOf(expr, ctx);
+  return at ? markHole(accessor, at.line, at.column) : accessor;
+}
+function objectEntries(expr, ctx) {
+  if (expr?.type !== "ObjectExpression") return null;
+  const entries = [];
+  for (const p of expr.properties) {
+    if (p.type !== "ObjectProperty") return null;
+    const key = p.computed ? `[${ctx.code(p.key)}]` : p.key.type === "Identifier" ? JSON.stringify(p.key.name) : JSON.stringify(String(p.key.value));
+    entries.push(`${key}: ${keyValue(p.value, ctx)}`);
+  }
+  return entries;
+}
 function buildChildren(children, ctx) {
   const out = [];
-  for (const child of children) {
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (directive(child, "if")) {
+      let next = i + 1;
+      while (next < children.length && children[next].type === "JSXText" && !cleanTemplateText(children[next].value)) next++;
+      const fallback = directive(children[next], "else") ? children[next] : null;
+      out.push(buildIf(child, fallback, ctx));
+      if (fallback) i = next;
+      continue;
+    }
     if (child.type === "JSXText") {
       const text = cleanTemplateText(child.value);
       if (text) out.push({ kind: "text", value: text });
@@ -1338,6 +1691,7 @@ function buildChildren(children, ctx) {
         });
       }
     } else if (child.type === "JSXElement" || child.type === "JSXFragment") {
+      if (ctx.dropStyles?.has(child.start)) continue;
       out.push(buildNode(child, ctx));
     } else if (child.type === "JSXSpreadChild") {
       out.push({ kind: "expr", code: ctx.code(child.expression), reactive: false });
@@ -1359,19 +1713,72 @@ function readLoad(attrs) {
   }
   return void 0;
 }
+function buildIf(node, fallback, ctx) {
+  const cond = directiveExpr(directive(node, "if"));
+  const props = [
+    cond ? { name: "when", kind: "attr", expr: ctx.code(cond), reactive: isReactive(cond), at: posOf(cond, ctx) } : { name: "when", kind: "attr", literal: true }
+  ];
+  if (fallback) {
+    props.push({ name: "fallback", kind: "attr", expr: emitIR(buildElement(fallback, ctx, ["else"]), ctx), jsxElement: true });
+  }
+  return { kind: "component", name: "Show", props, children: [buildElement(node, ctx, ["if"])] };
+}
+function buildEach(node, ctx) {
+  const attr = directive(node, "each");
+  if (!attr) return null;
+  const list = directiveExpr(attr);
+  const props = [
+    list ? { name: "each", kind: "attr", expr: ctx.code(list), reactive: isReactive(list), at: posOf(list, ctx) } : { name: "each", kind: "attr", expr: "[]" }
+  ];
+  const key = directive(node, "key");
+  if (key) {
+    const keyExpr = directiveExpr(key);
+    const by = isString(key.value) ? `(item) => item[${JSON.stringify(literalOf(key.value))}]` : keyExpr ? ctx.code(keyExpr) : void 0;
+    if (by) props.push({ name: "by", kind: "attr", expr: by });
+  }
+  const content = node.children.filter((c) => !(c.type === "JSXText" && !cleanTemplateText(c.value)));
+  const only = content.length === 1 && content[0].type === "JSXExpressionContainer" ? content[0].expression : null;
+  let render;
+  if (only && (only.type === "ArrowFunctionExpression" || only.type === "FunctionExpression")) {
+    const fn = ctx.code(only);
+    const live = only.type === "ArrowFunctionExpression" && only.body.type !== "BlockStatement" && isReactive(only.body);
+    render = live ? `(...args) => () => (${fn})(...args)` : fn;
+  } else {
+    const built = buildChildren(node.children, ctx);
+    const ir = built.length === 1 ? built[0] : { kind: "fragment", children: built };
+    render = `() => ${paren(emitIR(ir, ctx), "arrowBody")}`;
+  }
+  return { kind: "component", name: "For", props, children: [{ kind: "expr", code: render, reactive: false }] };
+}
+function buildElement(node, ctx, handled) {
+  const skip = new Set(handled);
+  const directives = /* @__PURE__ */ new Set(["if", "else", "each", ...directive(node, "each") ? ["key"] : []]);
+  const attributes = node.openingElement.attributes.filter(
+    (a) => !(a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && (skip.has(a.name.name) || directives.has(a.name.name)))
+  );
+  const { tag } = tagInfo(node.openingElement.name, ctx);
+  const each = buildEach(node, ctx);
+  const children = each ? [each] : buildChildren(node.children, ctx);
+  if (tag === CONTAINER2) return children.length === 1 ? children[0] : { kind: "fragment", children };
+  const at = ctx.sourceFile && node.loc?.start ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column } : void 0;
+  const props = buildProps(attributes, ctx, true);
+  const scope = ctx.scopes?.find((s) => node.start >= s.start && node.end <= s.end);
+  if (scope) props.unshift({ name: "data-fx-s", kind: "attr", literal: scope.value });
+  return { kind: "element", tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...at ? { at } : {} };
+}
 function buildNode(node, ctx) {
   if (node.type === "JSXFragment") {
     return { kind: "fragment", children: buildChildren(node.children, ctx) };
   }
+  if (directive(node, "if")) return buildIf(node, null, ctx);
+  if (ctx.dropStyles?.has(node.start)) return { kind: "fragment", children: [] };
   const { tag, component } = tagInfo(node.openingElement.name, ctx);
+  if (!component) return buildElement(node, ctx, []);
   const props = buildProps(node.openingElement.attributes, ctx);
   const children = buildChildren(node.children, ctx);
   const at = ctx.sourceFile && node.loc?.start ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column } : void 0;
-  if (component) {
-    const load = readLoad(node.openingElement.attributes);
-    return { kind: "component", name: tag, props, children, ...load ? { load } : {}, ...at ? { at } : {} };
-  }
-  return { kind: "element", tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...at ? { at } : {} };
+  const load = readLoad(node.openingElement.attributes);
+  return { kind: "component", name: tag, props, children, ...load ? { load } : {}, ...at ? { at } : {} };
 }
 function buildJsxIR(node, ctx) {
   const ir = buildNode(node, ctx);