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

package/dist/frontend/babel/plugin.cjs

@@ -469,6 +469,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.
@@ -479,6 +480,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" }
 };
@@ -656,13 +670,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})`;
@@ -744,7 +761,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} });`
           );
@@ -822,6 +840,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);
 }
@@ -876,10 +895,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);
@@ -921,13 +936,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 } : {}
     };
@@ -999,10 +1017,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) {
@@ -1012,12 +1034,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);
@@ -1034,25 +1056,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 = [];
@@ -1464,6 +1467,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;
@@ -1572,7 +1591,16 @@ function buildProps(attrs, ctx) {
 }
 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 });
@@ -1609,19 +1637,68 @@ 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;
+  return { kind: "element", tag, svg: SVG_TAGS.has(tag), props: buildProps(attributes, ctx), 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);
   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);

package/dist/frontend/babel/plugin.mjs

@@ -435,6 +435,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.
@@ -445,6 +446,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" }
 };
@@ -622,13 +636,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})`;
@@ -710,7 +727,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} });`
           );
@@ -790,6 +808,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);
 }
@@ -844,10 +863,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);
@@ -889,13 +904,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 } : {}
     };
@@ -967,10 +985,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) {
@@ -980,12 +1002,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);
@@ -1002,25 +1024,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 = [];
@@ -1432,6 +1435,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;
@@ -1540,7 +1559,16 @@ function buildProps(attrs, ctx) {
 }
 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 });
@@ -1577,19 +1605,68 @@ 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;
+  return { kind: "element", tag, svg: SVG_TAGS.has(tag), props: buildProps(attributes, ctx), 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);
   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);