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

package/dist/lower/jsx.mjs

@@ -305,6 +305,435 @@ function paren(code, position) {
   return topLevelComma(src) === false ? code : `(${code})`;
 }
 
+// src/analyze/intrinsics.ts
+var REACTIVE_MODULE = "@fluixi/reactive/signal";
+var INTRINSICS = {
+  $signal: { export: "signal", module: REACTIVE_MODULE, returns: "signal-handle" },
+  $memo: { export: "memo", module: REACTIVE_MODULE, returns: "memo-handle" },
+  $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.
+  $selector: { export: "createSelector", module: REACTIVE_MODULE, returns: "memo-accessor" },
+  $deferred: { export: "createDeferred", module: REACTIVE_MODULE, returns: "memo-accessor" },
+  // Not value constructors, but the compiler has to know them: they change what a read
+  // 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" },
+  // 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*\\(`);
+
+// src/transform/source-locations.ts
+var SOURCE_MARKER = "__fx_source";
+var HOLE_MARKER = "__fx_hole";
+var markHole = (accessor, line, column, name) => `(globalThis.${HOLE_MARKER} ?? ((f) => f))(${accessor},${line},${column}${name === void 0 ? "" : `,${JSON.stringify(name)}`})`;
+var PROPS_MARKER = "__fx_props";
+var markProps = (object, at) => `(globalThis.${PROPS_MARKER} ?? ((p) => p))(${object},${JSON.stringify(at)})`;
+
+// src/codegen/serialize-static.ts
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+var HTML_NAME = {
+  className: "class",
+  htmlFor: "for"
+};
+var PROPERTY_ONLY = /* @__PURE__ */ new Set([
+  "innerHTML",
+  "outerHTML",
+  "innerText",
+  "textContent",
+  "value",
+  "checked",
+  "selected",
+  "muted",
+  "defaultValue",
+  "defaultChecked",
+  "children",
+  "ref"
+]);
+var RAW_TEXT_ELEMENTS = /* @__PURE__ */ new Set(["script", "style", "textarea", "title"]);
+function isRawTextElement(tag) {
+  return RAW_TEXT_ELEMENTS.has(tag);
+}
+function htmlAttrName(name) {
+  return HTML_NAME[name] ?? name;
+}
+function isPlainLiteralAttr(prop) {
+  if (prop.kind !== "attr") return false;
+  if (prop.expr !== void 0) return false;
+  if (prop.name.includes(":")) return false;
+  return !PROPERTY_ONLY.has(prop.name);
+}
+function isSerializable(node) {
+  if (!node.static) return false;
+  if (isRawTextElement(node.tag)) return false;
+  for (const prop of node.props) {
+    if (!isPlainLiteralAttr(prop)) return false;
+  }
+  for (const child of node.children) {
+    if (child.kind === "text") continue;
+    if (child.kind === "element" && isSerializable(child)) continue;
+    return false;
+  }
+  return true;
+}
+function serializeStatic(node) {
+  const attrs = node.props.map(serializeProp).filter(Boolean).join("");
+  const open = `<${node.tag}${attrs}>`;
+  if (VOID_ELEMENTS.has(node.tag)) return open;
+  return `${open}${node.children.map(serializeChild).join("")}</${node.tag}>`;
+}
+function serializeChild(child) {
+  if (child.kind === "text") return escapeText(child.value);
+  if (child.kind !== "element") throw new Error(`serializeStatic: unexpected ${child.kind}`);
+  return serializeStatic(child);
+}
+function serializeProp(prop) {
+  const name = HTML_NAME[prop.name] ?? prop.name;
+  const value = prop.literal;
+  if (value === true || value === void 0) return ` ${name}`;
+  if (value === false || value === null) return "";
+  return ` ${name}="${escapeAttr(String(value))}"`;
+}
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function templatePositions(root) {
+  const pos = [];
+  let file;
+  const walk = (el) => {
+    file ??= el.at?.file;
+    pos.push(el.at?.line ?? 0, el.at?.column ?? 0);
+    for (const child of el.children) if (child.kind === "element") walk(child);
+  };
+  walk(root);
+  return file && pos.some((n) => n !== 0) ? { file, pos } : void 0;
+}
+
+// src/codegen/partial-template.ts
+var HOLE_START = "<!--fx-->";
+var HOLE_END = "<!--fx/-->";
+function isHole(node) {
+  return node.kind === "expr" || node.kind === "component" || node.kind === "control";
+}
+function isTemplateChild(node) {
+  return node.kind === "text" || node.kind === "element" && isTemplateElement(node);
+}
+function isTemplateElement(node) {
+  if (node.svg) return false;
+  if (isRawTextElement(node.tag)) return false;
+  if (!node.props.every((p) => isPlainLiteralAttr(p))) return false;
+  return node.children.every((c) => isTemplateChild(c) || isHole(c));
+}
+function containsHole(node) {
+  if (isHole(node)) return true;
+  const children = node.children;
+  return children ? children.some(containsHole) : false;
+}
+function addressable(el) {
+  for (let i = 0; i < el.children.length; i++) {
+    const child = el.children[i];
+    if (child.kind === "text") {
+      if (child.value === "") return false;
+      if (el.children[i + 1]?.kind === "text") return false;
+    }
+  }
+  return el.children.every((c) => c.kind !== "element" || addressable(c));
+}
+function planPartialTemplate(root) {
+  if (!isTemplateElement(root)) return null;
+  if (!addressable(root)) return null;
+  if (!root.children.some(containsHole)) return null;
+  const steps = [];
+  const holes = [];
+  let refCount = 0;
+  const declare = (expr) => {
+    const ref = `_n$${refCount++}`;
+    steps.push({ ref, expr });
+    return ref;
+  };
+  walk(root, "_el$");
+  return { html: serializeWithMarkers(root), tag: root.tag, steps, holes };
+  function walk(el, elementRef) {
+    let last = -1;
+    el.children.forEach((child, i) => {
+      if (containsHole(child)) last = i;
+    });
+    let previous = null;
+    for (let i = 0; i <= last; i++) {
+      const child = el.children[i];
+      const expr = previous ? `${previous}.nextSibling` : `${elementRef}.firstChild`;
+      if (isHole(child)) {
+        const startRef = declare(expr);
+        const endRef = declare(`holeEnd(${startRef})`);
+        holes.push({ parentRef: elementRef, startRef, endRef, node: child });
+        previous = endRef;
+        continue;
+      }
+      const ref = declare(expr);
+      if (child.kind === "element" && containsHole(child)) walk(child, ref);
+      previous = ref;
+    }
+  }
+}
+function serializeWithMarkers(el) {
+  return serializeStatic(withSentinels(el)).split(SENTINEL).join(HOLE_START + HOLE_END);
+}
+function withSentinels(el) {
+  return {
+    ...el,
+    children: el.children.map(
+      (child) => isHole(child) ? { kind: "text", value: SENTINEL } : child.kind === "element" ? withSentinels(child) : child
+    )
+  };
+}
+var SENTINEL = "\0fx-hole\0";
+
+// src/codegen/contract.ts
+var RUNTIME_CONTRACT_V1 = {
+  version: 1,
+  module: "@fluixi/dom",
+  symbols: [
+    "createNativeElement",
+    "insert",
+    "spread",
+    "setAttribute",
+    "delegateEvents",
+    "createComponent",
+    "createMemo",
+    "untrack",
+    "Show",
+    "For",
+    "Index",
+    "Switch",
+    "Match",
+    "Dynamic",
+    "ErrorBoundary"
+  ]
+};
+var RUNTIME_CONTRACT_V2 = {
+  version: 2,
+  module: "@fluixi/dom",
+  symbols: [...RUNTIME_CONTRACT_V1.symbols, "template", "cloneTemplate", "walk"]
+};
+
+// src/codegen/backends/imperative.ts
+var CONTROL_COMPONENT = {
+  show: "Show",
+  for: "For",
+  index: "Index",
+  switch: "Switch",
+  match: "Match",
+  dynamic: "Dynamic",
+  errorBoundary: "ErrorBoundary",
+  suspense: "Suspense"
+};
+function isIdent(name) {
+  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name);
+}
+function propKey(name) {
+  return isIdent(name) ? name : JSON.stringify(name);
+}
+function propValue(p) {
+  if (p.expr !== void 0) {
+    if (p.name === "ref" && p.at)
+      return markHole(paren(p.expr, "value"), p.at.line, p.at.column, p.expr);
+    if (!p.reactive) return paren(p.expr, "value");
+    const accessor = `() => ${paren(p.expr, "arrowBody")}`;
+    return p.at ? markHole(accessor, p.at.line, p.at.column, p.directive) : accessor;
+  }
+  return JSON.stringify(p.literal ?? true);
+}
+function componentPropValue(p) {
+  if (p.expr !== void 0) return paren(p.expr, "value");
+  return JSON.stringify(p.literal ?? true);
+}
+function emitProps(props, childrenExpr, used) {
+  const spreads = props.filter((p) => p.kind === "spread");
+  const normal = props.filter((p) => p.kind !== "spread");
+  const entries = normal.map((p) => `${propKey(p.name)}: ${propValue(p)}`);
+  if (childrenExpr != null) entries.push(`children: ${childrenExpr}`);
+  const obj = `{ ${entries.join(", ")} }`;
+  if (spreads.length > 0) {
+    used.add("mergeProps");
+    return `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
+  }
+  return obj;
+}
+function markBind(code, at) {
+  return at ? markHole(code, at.line, at.column) : code;
+}
+function emitChildren(children, used, templates) {
+  if (children.length === 1) return emitNode(children[0], used, templates);
+  return `[${children.map((c) => emitNode(c, used, templates)).join(", ")}]`;
+}
+function emitComponent(name, props, children, used, templates, at) {
+  used.add("createMemo");
+  used.add("createComponent");
+  const spreads = props.filter((p) => p.kind === "spread");
+  const normal = props.filter((p) => p.kind !== "spread");
+  const bodies = normal.map((p) => [p.name, componentPropValue(p)]);
+  if (children.length > 0) {
+    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(", ")} })`;
+  }
+  if (spreads.length > 0) {
+    used.add("mergeProps");
+    obj = `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
+  }
+  const propAt = {};
+  for (const p of normal) if (p.at) propAt[p.name] = [p.at.line, p.at.column];
+  if (Object.keys(propAt).length) obj = markProps(obj, propAt);
+  const mark = at ? `globalThis.${SOURCE_MARKER}?.(${JSON.stringify(at.file)},${at.line},${at.column},${JSON.stringify(name)}), ` : "";
+  return `createMemo(${paren(`${mark}() => createComponent(${name}, ${obj})`, "value")})`;
+}
+function staticAttrAssignment(el, prop) {
+  const name = htmlAttrName(prop.name);
+  const value = prop.literal;
+  if (value === true || value === void 0) return `${el}.setAttribute(${JSON.stringify(name)}, "");`;
+  if (value === false || value === null) return "";
+  return `${el}.setAttribute(${JSON.stringify(name)}, ${JSON.stringify(String(value))});`;
+}
+var partial = false;
+function emitNode(node, used, templates) {
+  switch (node.kind) {
+    case "text":
+      return JSON.stringify(node.value);
+    case "expr": {
+      if (!node.reactive) return paren(node.code, "value");
+      const accessor = `() => ${paren(node.code, "arrowBody")}`;
+      return node.at ? markHole(accessor, node.at.line, node.at.column) : accessor;
+    }
+    case "fragment":
+      if (node.children.length === 0) return "null";
+      return emitChildren(node.children, used, templates);
+    case "component":
+      return markBind(emitComponent(node.name, node.props, node.children, used, templates, node.at), node.bindAt ?? node.at);
+    case "control": {
+      const name = CONTROL_COMPONENT[node.control] ?? node.control;
+      used.add(name);
+      return markBind(emitComponent(name, node.props, node.children, used, templates), node.bindAt);
+    }
+    case "element": {
+      if (templates && node.static && !node.svg && isSerializable(node)) {
+        used.add("templateNode");
+        const id = `_tmpl$${templates.length}`;
+        templates.push({ id, html: serializeStatic(node), tag: node.tag, svg: false });
+        const at = templatePositions(node);
+        return at ? `templateNode(${id}, ${JSON.stringify(node.tag)}, false, false, ${JSON.stringify(at)})` : `templateNode(${id}, ${JSON.stringify(node.tag)})`;
+      }
+      if (templates && partial) {
+        const plan = planPartialTemplate(node);
+        if (plan) {
+          used.add("templateNode");
+          used.add("insert");
+          used.add("holeEnd");
+          used.add("holeContent");
+          used.add("holeScope");
+          const id = `_tmpl$${templates.length}`;
+          templates.push({ id, html: plan.html, tag: plan.tag, svg: false });
+          const at = templatePositions(node);
+          const lines = [
+            `const _el$ = templateNode(${id}, ${JSON.stringify(plan.tag)}, true${at ? `, false, ${JSON.stringify(at)}` : ""});`
+          ];
+          for (const step of plan.steps) lines.push(`const ${step.ref} = ${step.expr};`);
+          for (const hole of plan.holes) {
+            lines.push(
+              `insert(${hole.parentRef}, holeScope(${hole.startRef}, () => ${paren(emitNode(hole.node, used, templates), "arrowBody")}), ${hole.endRef}, holeContent(${hole.startRef}, ${hole.endRef}));`
+            );
+          }
+          lines.push("return _el$;");
+          return `(() => { ${lines.join(" ")} })()`;
+        }
+      }
+      used.add("createNativeElement");
+      const tag = JSON.stringify(node.tag);
+      const el = "_el$";
+      const parts = [];
+      const createArgs = node.at ? `${tag}, ${node.svg}, ${JSON.stringify(node.at)}` : node.svg ? `${tag}, true` : tag;
+      parts.push(`const ${el} = createNativeElement(${createArgs});`);
+      if (node.props.length > 0) {
+        if (!node.svg && node.props.every(isPlainLiteralAttr)) {
+          for (const p of node.props) parts.push(staticAttrAssignment(el, p));
+        } else {
+          used.add("spread");
+          const svgFlag = node.svg ? ", isSVG: 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} });`
+          );
+        }
+      }
+      for (const child of node.children) {
+        used.add("insert");
+        const childCode = emitNode(child, used, templates);
+        const isFn = child.kind === "expr" && child.reactive || child.kind === "component" || child.kind === "control";
+        parts.push(isFn ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
+      }
+      parts.push(`return ${el};`);
+      return `(() => { ${parts.join(" ")} })()`;
+    }
+  }
+}
+function inlineTemplates(code, templates) {
+  if (!templates || templates.length === 0) return code;
+  const byId = new Map(templates.map((t) => [t.id, JSON.stringify(t.html)]));
+  return code.replace(/_tmpl\$\d+/g, (id) => byId.get(id) ?? id);
+}
+var imperativeBackend = {
+  name: "imperative",
+  contract: RUNTIME_CONTRACT_V1,
+  emit(node, options) {
+    const used = /* @__PURE__ */ new Set();
+    const templates = options?.templateClone !== false ? [] : void 0;
+    partial = options?.partialTemplates === true;
+    const code = emitNode(node, used, templates);
+    return { code, imports: Array.from(used), templates };
+  }
+};
+
 // src/lower/jsx.ts
 var SVG_TAGS = /* @__PURE__ */ new Set([
   "svg",
@@ -336,6 +765,22 @@ var DELEGATED = /* @__PURE__ */ new Set([
   "mouseup"
 ]);
 var isReactive = (node) => isReactiveShape(shapeOf(node));
+var CONTAINER = "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;
@@ -413,9 +858,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) });
@@ -431,6 +879,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";
@@ -439,12 +908,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 });
@@ -460,6 +966,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 });
@@ -481,19 +988,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 === CONTAINER) 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);