what-compiler 0.8.4 → 0.11.0

package/dist/babel-plugin.js

@@ -61,9 +61,56 @@ var SIGNAL_CREATORS = /* @__PURE__ */ new Set([
   "useQuery",
   "useInfiniteQuery"
 ]);
+function normalizeJsxText(value) {
+  if (!/[\r\n]/.test(value)) {
+    return value.replace(/\t/g, " ");
+  }
+  const lines = value.split(/\r\n|\n|\r/);
+  let lastNonEmpty = -1;
+  for (let i = 0; i < lines.length; i++) {
+    if (/[^ \t]/.test(lines[i])) lastNonEmpty = i;
+  }
+  if (lastNonEmpty === -1) return "";
+  let out = "";
+  for (let i = 0; i < lines.length; i++) {
+    let line = lines[i].replace(/\t/g, " ");
+    const isFirst = i === 0;
+    const isLast = i === lines.length - 1;
+    if (!isFirst) line = line.replace(/^ +/, "");
+    if (!isLast) line = line.replace(/ +$/, "");
+    if (!line) continue;
+    if (i !== lastNonEmpty) line += " ";
+    out += line;
+  }
+  return out;
+}
 function whatBabelPlugin({ types: t }) {
+  const _unknownModifierWarned = /* @__PURE__ */ new Set();
+  const _forInfoWarned = /* @__PURE__ */ new Set();
+  function hasEventModifiers(name, state) {
+    if (!name.includes("__")) return false;
+    if (!name.startsWith("on")) return false;
+    const parts = name.split("__");
+    const tail = parts.slice(1).filter((s) => s !== "");
+    if (tail.length === 0) return false;
+    if (true) {
+      const unknown = tail.filter((m) => !EVENT_MODIFIERS.has(m));
+      const filename = state && (state.filename || state.file && state.file.opts && state.file.opts.filename) || "<unknown>";
+      for (const m of unknown) {
+        const key = `${filename}::${m}`;
+        if (!_unknownModifierWarned.has(key)) {
+          _unknownModifierWarned.add(key);
+          console.warn(
+            `[what-compiler] Unknown event modifier "__${m}" in attribute "${name}" (${filename}). Known modifiers: ${[...EVENT_MODIFIERS].join(", ")}. Unknown segments are ignored.`
+          );
+        }
+      }
+    }
+    return true;
+  }
   function parseEventModifiers(name) {
-    const parts = name.split("|");
+    const delimiter = name.includes("|") ? "|" : "__";
+    const parts = name.split(delimiter);
     const eventName = parts[0];
     const modifiers = parts.slice(1).filter((m) => EVENT_MODIFIERS.has(m));
     return { eventName, modifiers };
@@ -193,22 +240,20 @@ function whatBabelPlugin({ types: t }) {
     }
     let scope = path.scope;
     while (scope) {
-      for (const [name, binding] of Object.entries(scope.bindings)) {
+      for (const binding of Object.values(scope.bindings)) {
         if (binding.path.isVariableDeclarator()) {
           extractFromDeclarator(binding.path.node);
         }
-        if (binding.path.isIdentifier() || binding.kind === "param") {
-          const fnPath = binding.scope.path;
-          if (fnPath && fnPath.node && fnPath.node.params) {
-            for (const param of fnPath.node.params) {
-              if (t.isObjectPattern(param)) {
-                for (const prop of param.properties) {
-                  if (t.isObjectProperty(prop) && t.isIdentifier(prop.value)) {
-                    signalNames.add(prop.value.name);
-                  } else if (t.isRestElement(prop) && t.isIdentifier(prop.argument)) {
-                    signalNames.add(prop.argument.name);
-                  }
-                }
+      }
+      const fnNode = scope.path && scope.path.node;
+      if (fnNode && fnNode.params) {
+        for (const param of fnNode.params) {
+          if (t.isObjectPattern(param)) {
+            for (const prop of param.properties) {
+              if (t.isObjectProperty(prop) && t.isIdentifier(prop.value)) {
+                signalNames.add(prop.value.name);
+              } else if (t.isRestElement(prop) && t.isIdentifier(prop.argument)) {
+                signalNames.add(prop.argument.name);
               }
             }
           }
@@ -276,7 +321,7 @@ function whatBabelPlugin({ types: t }) {
       return isPotentiallyReactive(expr.callee, signalNames, importedIds) || expr.arguments.some((arg) => isPotentiallyReactive(arg, signalNames, importedIds));
     }
     if (t.isIdentifier(expr)) {
-      return isSignalIdentifier(expr.name, signalNames);
+      return isSignalIdentifier(expr.name, signalNames) || importedIds && importedIds.has(expr.name);
     }
     if (t.isMemberExpression(expr)) {
       return isPotentiallyReactive(expr.object, signalNames, importedIds);
@@ -306,6 +351,93 @@ function whatBabelPlugin({ types: t }) {
     }
     return false;
   }
+  function tryLowerMapToMapArray(expr, state) {
+    let mapCall = expr;
+    let wrappedInArrow = false;
+    if (t.isArrowFunctionExpression(expr) && expr.params.length === 0) {
+      mapCall = expr.body;
+      wrappedInArrow = true;
+    }
+    if (t.isConditionalExpression(mapCall)) {
+      const loweredCon = tryLowerMapCall(mapCall.consequent, state);
+      const loweredAlt = tryLowerMapCall(mapCall.alternate, state);
+      if (loweredCon || loweredAlt) {
+        const result = t.conditionalExpression(
+          mapCall.test,
+          loweredCon || mapCall.consequent,
+          loweredAlt || mapCall.alternate
+        );
+        return wrappedInArrow ? t.arrowFunctionExpression([], result) : result;
+      }
+      return null;
+    }
+    if (t.isLogicalExpression(mapCall) && (mapCall.operator === "&&" || mapCall.operator === "||")) {
+      const loweredRight = tryLowerMapCall(mapCall.right, state);
+      if (loweredRight) {
+        const result = t.logicalExpression(mapCall.operator, mapCall.left, loweredRight);
+        return wrappedInArrow ? t.arrowFunctionExpression([], result) : result;
+      }
+      return null;
+    }
+    const lowered = tryLowerMapCall(mapCall, state);
+    return lowered;
+  }
+  function tryLowerMapCall(mapCall, state) {
+    if (!t.isCallExpression(mapCall)) return null;
+    if (!t.isMemberExpression(mapCall.callee)) return null;
+    if (!t.isIdentifier(mapCall.callee.property, { name: "map" })) return null;
+    if (mapCall.arguments.length < 1) return null;
+    const mapFn = mapCall.arguments[0];
+    if (!t.isArrowFunctionExpression(mapFn) && !t.isFunctionExpression(mapFn)) return null;
+    let returnExpr = null;
+    if (t.isArrowFunctionExpression(mapFn)) {
+      if (t.isExpression(mapFn.body)) {
+        returnExpr = mapFn.body;
+      } else if (t.isBlockStatement(mapFn.body)) {
+        const ret = mapFn.body.body.find((s) => t.isReturnStatement(s));
+        if (ret) returnExpr = ret.argument;
+      }
+    } else if (t.isFunctionExpression(mapFn)) {
+      const ret = mapFn.body.body.find((s) => t.isReturnStatement(s));
+      if (ret) returnExpr = ret.argument;
+    }
+    if (!returnExpr) return null;
+    if (!t.isJSXElement(returnExpr)) return null;
+    const attrs = returnExpr.openingElement.attributes;
+    let keyAttr = null;
+    for (const attr of attrs) {
+      if (t.isJSXAttribute(attr) && getAttrName(attr) === "key") {
+        keyAttr = attr;
+        break;
+      }
+    }
+    if (!keyAttr) {
+      if (true) {
+        const loc = returnExpr.loc;
+        const fileName = state.filename || state.file?.opts?.filename || "<unknown>";
+        const lineInfo = loc ? `:${loc.start.line}:${loc.start.column}` : "";
+        console.warn(
+          `[what-compiler] .map() returning JSX without a \`key\` prop at ${fileName}${lineInfo}. Without a key, the list cannot use keyed reconciliation \u2014 items are re-created on every update. Add key={...} to enable efficient updates.`
+        );
+      }
+      return null;
+    }
+    const keyValue = getAttributeValue(keyAttr.value);
+    if (!keyValue) return null;
+    returnExpr.openingElement.attributes = attrs.filter((a) => a !== keyAttr);
+    const sourceObj = mapCall.callee.object;
+    const source = t.arrowFunctionExpression([], sourceObj);
+    const itemParam = mapFn.params[0] ? t.cloneNode(mapFn.params[0], true) : t.identifier("_item");
+    const keyFn = t.arrowFunctionExpression([itemParam], t.cloneNode(keyValue, true));
+    return t.callExpression(t.identifier("_$mapArray"), [
+      source,
+      mapFn,
+      t.objectExpression([
+        t.objectProperty(t.identifier("key"), keyFn),
+        t.objectProperty(t.identifier("raw"), t.booleanLiteral(true))
+      ])
+    ]);
+  }
   function isStaticChild(child) {
     if (t.isJSXText(child)) return true;
     if (t.isJSXExpressionContainer(child)) return false;
@@ -329,7 +461,7 @@ function whatBabelPlugin({ types: t }) {
   }
   function extractStaticHTML(node) {
     if (t.isJSXText(node)) {
-      const text = node.value.replace(/\n\s+/g, " ").trim();
+      const text = normalizeJsxText(node.value);
       return text ? escapeHTML(text) : "";
     }
     if (t.isJSXExpressionContainer(node)) {
@@ -369,7 +501,7 @@ function whatBabelPlugin({ types: t }) {
     html += ">";
     for (const child of node.children) {
       if (t.isJSXText(child)) {
-        const text = child.value.replace(/\n\s+/g, " ").trim();
+        const text = normalizeJsxText(child.value);
         if (text) html += escapeHTML(text);
       } else if (t.isJSXExpressionContainer(child)) {
         if (!t.isJSXEmptyExpression(child.expression)) {
@@ -396,15 +528,15 @@ function whatBabelPlugin({ types: t }) {
     const { node } = path;
     const openingElement = node.openingElement;
     const tagName = openingElement.name.name;
-    if (isComponent(tagName)) {
-      return transformComponentFineGrained(path, state);
-    }
     if (tagName === "For") {
       return transformForFineGrained(path, state);
     }
     if (tagName === "Show") {
       return transformShowFineGrained(path, state);
     }
+    if (isComponent(tagName)) {
+      return transformComponentFineGrained(path, state);
+    }
     const attributes = openingElement.attributes;
     const children = node.children;
     const allChildrenStatic = children.every(isStaticChild);
@@ -441,7 +573,7 @@ function whatBabelPlugin({ types: t }) {
         t.variableDeclarator(t.identifier(elId), t.callExpression(t.identifier(tmplId), []))
       ])
     ];
-    applyDynamicAttrs(statements, elId, attributes, state);
+    applyDynamicAttrs(statements, elId, attributes, state, tagName);
     applyDynamicChildren(statements, elId, children, node, state);
     if (!state._pendingSetup) state._pendingSetup = [];
     state._pendingSetup.push(...statements);
@@ -469,7 +601,7 @@ function whatBabelPlugin({ types: t }) {
     const transformedChildren = [];
     for (const child of children) {
       if (t.isJSXText(child)) {
-        const text = child.value.replace(/\n\s+/g, " ").trim();
+        const text = normalizeJsxText(child.value);
         if (text) transformedChildren.push(t.stringLiteral(text));
       } else if (t.isJSXExpressionContainer(child)) {
         if (!t.isJSXEmptyExpression(child.expression)) {
@@ -484,8 +616,33 @@ function whatBabelPlugin({ types: t }) {
     const propsExpr = props.length > 0 ? t.objectExpression(props) : t.nullLiteral();
     return t.callExpression(t.identifier("h"), [t.stringLiteral(tagName), propsExpr, ...transformedChildren]);
   }
-  function applyDynamicAttrs(statements, elId, attributes, state) {
+  const VALUE_PROP_TAGS = /* @__PURE__ */ new Set(["input", "textarea", "select", "option"]);
+  function applyDynamicAttrs(statements, elId, attributes, state, tagName) {
     function buildSetPropCall(propName, valueExpr) {
+      if (propName === "class") {
+        state.needsSetClass = true;
+        return t.callExpression(t.identifier("_$setClass"), [t.identifier(elId), valueExpr]);
+      }
+      if (propName === "style") {
+        state.needsSetStyle = true;
+        return t.callExpression(t.identifier("_$setStyle"), [t.identifier(elId), valueExpr]);
+      }
+      if (propName === "value" && tagName && VALUE_PROP_TAGS.has(tagName)) {
+        state.needsSetValue = true;
+        return t.callExpression(t.identifier("_$setValue"), [t.identifier(elId), valueExpr]);
+      }
+      if (propName === "checked" && tagName === "input") {
+        state.needsSetChecked = true;
+        return t.callExpression(t.identifier("_$setChecked"), [t.identifier(elId), valueExpr]);
+      }
+      if (propName.startsWith("data-") || propName.startsWith("aria-")) {
+        state.needsSetAttr = true;
+        return t.callExpression(t.identifier("_$setAttr"), [
+          t.identifier(elId),
+          t.stringLiteral(propName),
+          valueExpr
+        ]);
+      }
       state.needsSetProp = true;
       return t.callExpression(t.identifier("_$setProp"), [
         t.identifier(elId),
@@ -493,6 +650,14 @@ function whatBabelPlugin({ types: t }) {
         valueExpr
       ]);
     }
+    let delegateInitEmitted = false;
+    function emitDelegateInit() {
+      if (delegateInitEmitted) return;
+      delegateInitEmitted = true;
+      statements.push(
+        t.expressionStatement(t.callExpression(t.identifier("_$delegate$"), []))
+      );
+    }
     for (const attr of attributes) {
       if (t.isJSXSpreadAttribute(attr)) {
         state.needsSpread = true;
@@ -526,20 +691,21 @@ function whatBabelPlugin({ types: t }) {
         );
         continue;
       }
-      if (attrName.startsWith("on") && !attrName.includes("|")) {
+      if (attrName.startsWith("on") && !attrName.includes("|") && !hasEventModifiers(attrName, state)) {
         const event = attrName.slice(2).toLowerCase();
         const handler = getAttributeValue(attr.value);
         if (DELEGATED_EVENTS.has(event)) {
           state.needsDelegation = true;
           if (!state.delegatedEvents) state.delegatedEvents = /* @__PURE__ */ new Set();
           state.delegatedEvents.add(event);
+          emitDelegateInit();
           statements.push(
             t.expressionStatement(
               t.assignmentExpression(
                 "=",
                 t.memberExpression(
                   t.identifier(elId),
-                  t.identifier(`__${event}`)
+                  t.identifier(`$$${event}`)
                 ),
                 handler
               )
@@ -557,7 +723,7 @@ function whatBabelPlugin({ types: t }) {
         }
         continue;
       }
-      if (attrName.startsWith("on") && attrName.includes("|")) {
+      if (attrName.startsWith("on") && (attrName.includes("|") || hasEventModifiers(attrName, state))) {
         const { eventName, modifiers } = parseEventModifiers(attrName);
         const handler = getAttributeValue(attr.value);
         const wrappedHandler = createEventHandler(handler, modifiers);
@@ -657,8 +823,9 @@ function whatBabelPlugin({ types: t }) {
         const domName = normalizeAttrName(attrName);
         if (isPotentiallyReactive(expr, state.signalNames, state.importedIdentifiers)) {
           state.needsEffect = true;
+          const valueExpr = t.isIdentifier(expr) && (isSignalIdentifier(expr.name, state.signalNames) || state.importedIdentifiers && state.importedIdentifiers.has(expr.name)) ? t.callExpression(expr, []) : expr;
           const effectCall = t.callExpression(t.identifier("_$effect"), [
-            t.arrowFunctionExpression([], buildSetPropCall(domName, expr))
+            t.arrowFunctionExpression([], buildSetPropCall(domName, valueExpr))
           ]);
           if (isUncertainReactive(expr, state.signalNames, state.importedIdentifiers)) {
             t.addComment(
@@ -675,12 +842,56 @@ function whatBabelPlugin({ types: t }) {
       }
     }
   }
+  function buildsDOM(node) {
+    if (!node || typeof node !== "object") return false;
+    if (Array.isArray(node)) return node.some(buildsDOM);
+    if (node.type === "JSXElement" || node.type === "JSXFragment") return true;
+    if (node.type === "CallExpression" && node.callee && node.callee.type === "Identifier" && (node.callee.name === "_$mapArray" || node.callee.name === "mapArray")) {
+      return true;
+    }
+    for (const key of Object.keys(node)) {
+      if (key === "loc" || key === "start" || key === "end" || key === "leadingComments" || key === "trailingComments" || key === "innerComments") continue;
+      const v = node[key];
+      if (v && typeof v === "object" && buildsDOM(v)) return true;
+    }
+    return false;
+  }
+  function memoizeBranchCondition(expr, statements, state) {
+    let testExpr = null;
+    let isTernary = false;
+    if (t.isConditionalExpression(expr)) {
+      testExpr = expr.test;
+      isTernary = true;
+    } else if (t.isLogicalExpression(expr) && (expr.operator === "&&" || expr.operator === "||")) {
+      testExpr = expr.left;
+    } else {
+      return expr;
+    }
+    if (!isPotentiallyReactive(testExpr, state.signalNames, state.importedIdentifiers)) return expr;
+    const branches = isTernary ? [expr.consequent, expr.alternate] : [expr.right];
+    if (!branches.some(buildsDOM)) return expr;
+    const condId = state.nextMemoId();
+    state.needsMemo = true;
+    const memoBody = isTernary ? t.unaryExpression("!", t.unaryExpression("!", testExpr)) : testExpr;
+    statements.push(
+      t.variableDeclaration("const", [
+        t.variableDeclarator(
+          t.identifier(condId),
+          t.callExpression(t.identifier("_$memo"), [
+            t.arrowFunctionExpression([], memoBody)
+          ])
+        )
+      ])
+    );
+    const condRead = t.callExpression(t.identifier(condId), []);
+    return isTernary ? t.conditionalExpression(condRead, expr.consequent, expr.alternate) : t.logicalExpression(expr.operator, condRead, expr.right);
+  }
   function applyDynamicChildren(statements, elId, children, parentNode, state) {
     const entries = [];
     let childIndex = 0;
     for (const child of children) {
       if (t.isJSXText(child)) {
-        const text = child.value.replace(/\n\s+/g, " ").trim();
+        const text = normalizeJsxText(child.value);
         if (text) childIndex++;
         continue;
       }
@@ -709,22 +920,31 @@ function whatBabelPlugin({ types: t }) {
     const entriesNeedingRef = entries.filter(
       (e) => e.type === "expression" || e.type === "component" || e.type === "static" && e.hasAnythingDynamic
     );
-    const hasDynamicInsert = entries.some((e) => e.type === "expression" || e.type === "component");
-    const needsPreCapture = entriesNeedingRef.length >= 2 && hasDynamicInsert;
+    const needsPreCapture = entriesNeedingRef.length >= 2;
     const markerVars = /* @__PURE__ */ new Map();
     if (needsPreCapture) {
+      let prevVar = null;
+      let prevIndex = 0;
       for (const entry of entriesNeedingRef) {
-        const varName = `_m$${entry.childIndex}`;
+        const idx = entry.childIndex;
         const markerVar = state.nextVarId();
-        markerVars.set(entry.childIndex, markerVar);
+        markerVars.set(idx, markerVar);
+        let init;
+        if (prevVar === null) {
+          init = buildChildAccess(elId, idx);
+        } else {
+          init = t.identifier(prevVar);
+          for (let i = prevIndex; i < idx; i++) {
+            init = t.memberExpression(init, t.identifier("nextSibling"));
+          }
+        }
         statements.push(
           t.variableDeclaration("const", [
-            t.variableDeclarator(
-              t.identifier(markerVar),
-              buildChildAccess(elId, entry.childIndex)
-            )
+            t.variableDeclarator(t.identifier(markerVar), init)
           ])
         );
+        prevVar = markerVar;
+        prevIndex = idx;
       }
     }
     function getMarker(idx) {
@@ -735,10 +955,48 @@ function whatBabelPlugin({ types: t }) {
     }
     for (const entry of entries) {
       if (entry.type === "expression") {
-        const expr = entry.child.expression;
+        let expr = entry.child.expression;
         const marker = getMarker(entry.childIndex);
         state.needsInsert = true;
+        let mapResult = tryLowerMapToMapArray(expr, state);
+        if (mapResult) {
+          state.needsMapArray = true;
+          const isBareMapArray = t.isCallExpression(mapResult) && t.isIdentifier(mapResult.callee) && (mapResult.callee.name === "_$mapArray" || mapResult.callee.name === "mapArray");
+          const isArrowAlready = t.isArrowFunctionExpression(mapResult);
+          if (isArrowAlready && t.isExpression(mapResult.body)) {
+            mapResult.body = memoizeBranchCondition(mapResult.body, statements, state);
+          } else if (!isBareMapArray && !isArrowAlready) {
+            mapResult = memoizeBranchCondition(mapResult, statements, state);
+          }
+          const insertArg = isBareMapArray || isArrowAlready ? mapResult : t.arrowFunctionExpression([], mapResult);
+          statements.push(
+            t.expressionStatement(
+              t.callExpression(t.identifier("_$insert"), [
+                t.identifier(elId),
+                insertArg,
+                marker
+              ])
+            )
+          );
+          continue;
+        }
+        const isMapArrayCall = t.isCallExpression(expr) && t.isIdentifier(expr.callee) && (expr.callee.name === "mapArray" || expr.callee.name === "_$mapArray");
+        if (isMapArrayCall) {
+          state.needsMapArray = true;
+          if (expr.callee.name === "mapArray") expr.callee.name = "_$mapArray";
+          statements.push(
+            t.expressionStatement(
+              t.callExpression(t.identifier("_$insert"), [
+                t.identifier(elId),
+                expr,
+                marker
+              ])
+            )
+          );
+          continue;
+        }
         if (isPotentiallyReactive(expr, state.signalNames, state.importedIdentifiers)) {
+          expr = memoizeBranchCondition(expr, statements, state);
           const insertCall = t.callExpression(t.identifier("_$insert"), [
             t.identifier(elId),
             t.arrowFunctionExpression([], expr),
@@ -796,7 +1054,7 @@ function whatBabelPlugin({ types: t }) {
             ])
           );
         }
-        applyDynamicAttrs(statements, childElRef, entry.child.openingElement.attributes, state);
+        applyDynamicAttrs(statements, childElRef, entry.child.openingElement.attributes, state, entry.child.openingElement.name.name);
         applyDynamicChildren(statements, childElRef, entry.child.children, entry.child, state);
         continue;
       }
@@ -804,8 +1062,9 @@ function whatBabelPlugin({ types: t }) {
         for (const fChild of entry.child.children) {
           if (t.isJSXExpressionContainer(fChild) && !t.isJSXEmptyExpression(fChild.expression)) {
             state.needsInsert = true;
-            const expr = fChild.expression;
+            let expr = fChild.expression;
             if (isPotentiallyReactive(expr, state.signalNames, state.importedIdentifiers)) {
+              expr = memoizeBranchCondition(expr, statements, state);
               statements.push(
                 t.expressionStatement(
                   t.callExpression(t.identifier("_$insert"), [
@@ -946,7 +1205,7 @@ function whatBabelPlugin({ types: t }) {
         }
         continue;
       }
-      if (attrName.startsWith("on") && attrName.includes("|")) {
+      if (attrName.startsWith("on") && (attrName.includes("|") || hasEventModifiers(attrName, state))) {
         const { eventName, modifiers } = parseEventModifiers(attrName);
         const handler = getAttributeValue(attr.value);
         const wrappedHandler = createEventHandler(handler, modifiers);
@@ -964,7 +1223,7 @@ function whatBabelPlugin({ types: t }) {
     const transformedChildren = [];
     for (const child of children) {
       if (t.isJSXText(child)) {
-        const text = child.value.replace(/\n\s+/g, " ").trim();
+        const text = normalizeJsxText(child.value);
         if (text) transformedChildren.push(t.stringLiteral(text));
       } else if (t.isJSXExpressionContainer(child)) {
         if (!t.isJSXEmptyExpression(child.expression)) {
@@ -998,10 +1257,24 @@ function whatBabelPlugin({ types: t }) {
     const { node } = path;
     const attributes = node.openingElement.attributes;
     const children = node.children;
+    if (true) {
+      const fileName = state.filename || state.file?.opts?.filename || "<unknown>";
+      if (!_forInfoWarned.has(fileName)) {
+        _forInfoWarned.add(fileName);
+        const loc = node.loc;
+        const lineInfo = loc ? `:${loc.start.line}:${loc.start.column}` : "";
+        console.info(
+          `[what-compiler] <For> at ${fileName}${lineInfo}: consider using .map() with a key prop instead. The compiler auto-lowers .map() to efficient keyed reconciliation. <For> is only needed for signal-wrapped item accessors (advanced).`
+        );
+      }
+    }
     let eachExpr = null;
+    let keyExpr = null;
     for (const attr of attributes) {
-      if (t.isJSXAttribute(attr) && getAttrName(attr) === "each") {
-        eachExpr = getAttributeValue(attr.value);
+      if (t.isJSXAttribute(attr)) {
+        const name = getAttrName(attr);
+        if (name === "each") eachExpr = getAttributeValue(attr.value);
+        else if (name === "key") keyExpr = getAttributeValue(attr.value);
       }
     }
     if (!eachExpr) {
@@ -1022,11 +1295,124 @@ function whatBabelPlugin({ types: t }) {
       return transformElementAsH(path, state);
     }
     state.needsMapArray = true;
-    return t.callExpression(t.identifier("_$mapArray"), [eachExpr, renderFn]);
+    const args = [eachExpr, renderFn];
+    if (keyExpr) {
+      args.push(t.objectExpression([
+        t.objectProperty(t.identifier("key"), keyExpr)
+      ]));
+    }
+    return t.callExpression(t.identifier("_$mapArray"), args);
   }
   function transformShowFineGrained(path, state) {
-    state.needsCreateComponent = true;
-    return transformComponentFineGrained(path, state);
+    const { node } = path;
+    const attributes = node.openingElement.attributes;
+    const children = node.children;
+    let whenExpr = null;
+    let fallbackExpr = null;
+    for (const attr of attributes) {
+      if (t.isJSXAttribute(attr)) {
+        const name = getAttrName(attr);
+        if (name === "when") whenExpr = getAttributeValue(attr.value);
+        else if (name === "fallback") fallbackExpr = getAttributeValue(attr.value);
+      }
+    }
+    if (!whenExpr) {
+      throw path.buildCodeFrameError(
+        '<Show> requires a "when" prop. Example: <Show when={isOpen} fallback={null}>...</Show>'
+      );
+    }
+    let contentExpr = null;
+    for (const child of children) {
+      if (t.isJSXExpressionContainer(child) && !t.isJSXEmptyExpression(child.expression)) {
+        contentExpr = child.expression;
+        break;
+      }
+    }
+    if (!contentExpr) {
+      const transformedChildren = [];
+      for (const child of children) {
+        if (t.isJSXText(child)) {
+          const text = normalizeJsxText(child.value);
+          if (text) transformedChildren.push(t.stringLiteral(text));
+        } else if (t.isJSXElement(child)) {
+          transformedChildren.push(transformElementFineGrained({ node: child }, state));
+        }
+      }
+      if (transformedChildren.length === 1) {
+        contentExpr = transformedChildren[0];
+      } else if (transformedChildren.length > 1) {
+        contentExpr = t.arrayExpression(transformedChildren);
+      } else {
+        contentExpr = t.nullLiteral();
+      }
+    }
+    let condition;
+    if (t.isCallExpression(whenExpr)) {
+      condition = whenExpr;
+    } else if (t.isArrowFunctionExpression(whenExpr) && t.isExpression(whenExpr.body)) {
+      condition = whenExpr.body;
+    } else if (t.isIdentifier(whenExpr) && (state.signalNames && isSignalIdentifier(whenExpr.name, state.signalNames) || state.importedIdentifiers && state.importedIdentifiers.has(whenExpr.name))) {
+      condition = t.callExpression(whenExpr, []);
+    } else {
+      condition = whenExpr;
+    }
+    const vId = path.scope ? path.scope.generateUidIdentifier("v") : t.identifier("_v");
+    const contentIsFn = t.isFunction(contentExpr);
+    const consequent = contentIsFn ? t.callExpression(contentExpr, [t.cloneNode(vId)]) : contentExpr;
+    const alternate = fallbackExpr || t.nullLiteral();
+    if (isPotentiallyReactive(condition, state.signalNames, state.importedIdentifiers)) {
+      const condId = state.nextMemoId();
+      state.needsMemo = true;
+      const memoBody = contentIsFn ? condition : t.unaryExpression("!", t.unaryExpression("!", condition));
+      if (!state._pendingSetup) state._pendingSetup = [];
+      state._pendingSetup.push(
+        t.variableDeclaration("const", [
+          t.variableDeclarator(
+            t.identifier(condId),
+            t.callExpression(t.identifier("_$memo"), [
+              t.arrowFunctionExpression([], memoBody)
+            ])
+          )
+        ])
+      );
+      condition = t.callExpression(t.identifier(condId), []);
+    }
+    return t.arrowFunctionExpression([], t.blockStatement([
+      t.variableDeclaration("const", [
+        t.variableDeclarator(vId, condition)
+      ]),
+      t.returnStatement(
+        t.conditionalExpression(t.cloneNode(vId), consequent, alternate)
+      )
+    ]));
+  }
+  function lowerFragmentExprChild(expr, state) {
+    if (!state._pendingSetup) state._pendingSetup = [];
+    const setup = state._pendingSetup;
+    const mapResult = tryLowerMapToMapArray(expr, state);
+    if (mapResult) {
+      state.needsMapArray = true;
+      const isBareMapArray = t.isCallExpression(mapResult) && t.isIdentifier(mapResult.callee) && (mapResult.callee.name === "_$mapArray" || mapResult.callee.name === "mapArray");
+      const isArrowAlready = t.isArrowFunctionExpression(mapResult);
+      if (isArrowAlready && t.isExpression(mapResult.body)) {
+        mapResult.body = memoizeBranchCondition(mapResult.body, setup, state);
+        return mapResult;
+      }
+      if (isBareMapArray) return mapResult;
+      const memoized = memoizeBranchCondition(mapResult, setup, state);
+      return t.arrowFunctionExpression([], memoized);
+    }
+    const isMapArrayCall = t.isCallExpression(expr) && t.isIdentifier(expr.callee) && (expr.callee.name === "mapArray" || expr.callee.name === "_$mapArray");
+    if (isMapArrayCall) {
+      state.needsMapArray = true;
+      if (expr.callee.name === "mapArray") expr.callee.name = "_$mapArray";
+      return expr;
+    }
+    if (isPotentiallyReactive(expr, state.signalNames, state.importedIdentifiers)) {
+      expr = memoizeBranchCondition(expr, setup, state);
+      return t.arrowFunctionExpression([], expr);
+    }
+    return expr;
   }
   function transformFragmentFineGrained(path, state) {
     const { node } = path;
@@ -1034,11 +1420,11 @@ function whatBabelPlugin({ types: t }) {
     const transformed = [];
     for (const child of children) {
       if (t.isJSXText(child)) {
-        const text = child.value.replace(/\n\s+/g, " ").trim();
+        const text = normalizeJsxText(child.value);
         if (text) transformed.push(t.stringLiteral(text));
       } else if (t.isJSXExpressionContainer(child)) {
         if (!t.isJSXEmptyExpression(child.expression)) {
-          transformed.push(child.expression);
+          transformed.push(lowerFragmentExprChild(child.expression, state));
         }
       } else if (t.isJSXElement(child)) {
         transformed.push(transformElementFineGrained({ node: child }, state));
@@ -1058,6 +1444,46 @@ function whatBabelPlugin({ types: t }) {
     state.templates.push({ id, html });
     return id;
   }
+  function transformJsxRoot(path, state, transform) {
+    const scope = path.scope;
+    let cache = state._signalNamesCache;
+    if (!cache) cache = state._signalNamesCache = /* @__PURE__ */ new WeakMap();
+    let names = cache.get(scope);
+    if (!names) {
+      names = collectSignalNamesFromScope(path);
+      cache.set(scope, names);
+    }
+    state.signalNames = names;
+    state._pendingSetup = [];
+    const transformed = transform(path, state);
+    const pending = state._pendingSetup;
+    state._pendingSetup = [];
+    if (pending.length > 0) {
+      let stmtPath = path;
+      let crossedFunctionBoundary = false;
+      while (stmtPath && !stmtPath.isStatement()) {
+        if (stmtPath.isArrowFunctionExpression() || stmtPath.isFunctionExpression()) {
+          crossedFunctionBoundary = true;
+        }
+        stmtPath = stmtPath.parentPath;
+      }
+      const inStatementList = stmtPath && stmtPath.isStatement() && (stmtPath.listKey === "body" || stmtPath.listKey === "consequent") && Array.isArray(stmtPath.container);
+      if (inStatementList && !crossedFunctionBoundary) {
+        stmtPath.insertBefore(pending);
+        path.replaceWith(transformed);
+      } else {
+        pending.push(t.returnStatement(transformed));
+        path.replaceWith(
+          t.callExpression(
+            t.arrowFunctionExpression([], t.blockStatement(pending)),
+            []
+          )
+        );
+      }
+    } else {
+      path.replaceWith(transformed);
+    }
+  }
   return {
     name: "what-jsx-transform",
     visitor: {
@@ -1069,6 +1495,12 @@ function whatBabelPlugin({ types: t }) {
           state.needsMapArray = false;
           state.needsSpread = false;
           state.needsSetProp = false;
+          state.needsMemo = false;
+          state.needsSetClass = false;
+          state.needsSetStyle = false;
+          state.needsSetAttr = false;
+          state.needsSetValue = false;
+          state.needsSetChecked = false;
           state.needsH = false;
           state.needsCreateComponent = false;
           state.needsFragment = false;
@@ -1079,8 +1511,10 @@ function whatBabelPlugin({ types: t }) {
           state.templateMap = /* @__PURE__ */ new Map();
           state.templateCount = 0;
           state._varCounter = 0;
+          state._memoCounter = 0;
           state._pendingSetup = [];
           state.nextVarId = () => `_el$${state._varCounter++}`;
+          state.nextMemoId = () => `_c$${state._memoCounter++}`;
           state.signalNames = /* @__PURE__ */ new Set();
           state.importedIdentifiers = /* @__PURE__ */ new Set();
           for (const node of path.node.body) {
@@ -1136,20 +1570,19 @@ function whatBabelPlugin({ types: t }) {
         },
         exit(path, state) {
           for (const tmpl of state.templates.reverse()) {
+            const tmplCall = t.callExpression(t.identifier("_$template"), [t.stringLiteral(tmpl.html)]);
+            t.addComment(tmplCall, "leading", " @__PURE__ ");
             path.unshiftContainer(
               "body",
               t.variableDeclaration("const", [
-                t.variableDeclarator(
-                  t.identifier(tmpl.id),
-                  t.callExpression(t.identifier("_$template"), [t.stringLiteral(tmpl.html)])
-                )
+                t.variableDeclarator(t.identifier(tmpl.id), tmplCall)
               ])
             );
           }
           const fgSpecifiers = [];
           if (state.needsTemplate) {
             fgSpecifiers.push(
-              t.importSpecifier(t.identifier("_$template"), t.identifier("template"))
+              t.importSpecifier(t.identifier("_$template"), t.identifier("_$template"))
             );
           }
           if (state.needsInsert) {
@@ -1177,6 +1610,36 @@ function whatBabelPlugin({ types: t }) {
               t.importSpecifier(t.identifier("_$setProp"), t.identifier("setProp"))
             );
           }
+          if (state.needsMemo) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$memo"), t.identifier("memo"))
+            );
+          }
+          if (state.needsSetClass) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$setClass"), t.identifier("setClass"))
+            );
+          }
+          if (state.needsSetStyle) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$setStyle"), t.identifier("setStyle"))
+            );
+          }
+          if (state.needsSetAttr) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$setAttr"), t.identifier("setAttr"))
+            );
+          }
+          if (state.needsSetValue) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$setValue"), t.identifier("setValue"))
+            );
+          }
+          if (state.needsSetChecked) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$setChecked"), t.identifier("setChecked"))
+            );
+          }
           if (state.needsCreateComponent) {
             fgSpecifiers.push(
               t.importSpecifier(t.identifier("_$createComponent"), t.identifier("_$createComponent"))
@@ -1234,47 +1697,36 @@ function whatBabelPlugin({ types: t }) {
             const eventArray = t.arrayExpression(
               [...state.delegatedEvents].map((e) => t.stringLiteral(e))
             );
-            path.pushContainer(
-              "body",
-              t.expressionStatement(
-                t.callExpression(t.identifier("_$delegateEvents"), [eventArray])
-              )
+            const helperFn = t.functionDeclaration(
+              t.identifier("_$delegate$"),
+              [],
+              t.blockStatement([
+                t.ifStatement(
+                  t.identifier("_$delegated$"),
+                  t.returnStatement()
+                ),
+                t.expressionStatement(
+                  t.assignmentExpression("=", t.identifier("_$delegated$"), t.booleanLiteral(true))
+                ),
+                t.expressionStatement(
+                  t.callExpression(t.identifier("_$delegateEvents"), [eventArray])
+                )
+              ])
             );
+            path.unshiftContainer("body", [
+              t.variableDeclaration("let", [
+                t.variableDeclarator(t.identifier("_$delegated$"), t.booleanLiteral(false))
+              ]),
+              helperFn
+            ]);
           }
         }
       },
       JSXElement(path, state) {
-        state.signalNames = collectSignalNamesFromScope(path);
-        state._pendingSetup = [];
-        const transformed = transformElementFineGrained(path, state);
-        const pending = state._pendingSetup;
-        state._pendingSetup = [];
-        if (pending.length > 0) {
-          let stmtPath = path;
-          while (stmtPath && !stmtPath.isStatement()) {
-            stmtPath = stmtPath.parentPath;
-          }
-          if (stmtPath && stmtPath.isStatement()) {
-            for (const stmt of pending) {
-              stmtPath.insertBefore(stmt);
-            }
-            path.replaceWith(transformed);
-          } else {
-            pending.push(t.returnStatement(transformed));
-            path.replaceWith(
-              t.callExpression(
-                t.arrowFunctionExpression([], t.blockStatement(pending)),
-                []
-              )
-            );
-          }
-        } else {
-          path.replaceWith(transformed);
-        }
+        transformJsxRoot(path, state, transformElementFineGrained);
       },
       JSXFragment(path, state) {
-        const transformed = transformFragmentFineGrained(path, state);
-        path.replaceWith(transformed);
+        transformJsxRoot(path, state, transformFragmentFineGrained);
       }
     }
   };