what-compiler 0.8.4 → 0.11.0

package/dist/vite-plugin.js

@@ -65,9 +65,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 };
@@ -197,22 +244,20 @@ function whatBabelPlugin({ types: t }) {
     }
     let scope = path3.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);
               }
             }
           }
@@ -280,7 +325,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);
@@ -310,6 +355,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;
@@ -333,7 +465,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)) {
@@ -373,7 +505,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)) {
@@ -400,15 +532,15 @@ function whatBabelPlugin({ types: t }) {
     const { node } = path3;
     const openingElement = node.openingElement;
     const tagName = openingElement.name.name;
-    if (isComponent(tagName)) {
-      return transformComponentFineGrained(path3, state);
-    }
     if (tagName === "For") {
       return transformForFineGrained(path3, state);
     }
     if (tagName === "Show") {
       return transformShowFineGrained(path3, state);
     }
+    if (isComponent(tagName)) {
+      return transformComponentFineGrained(path3, state);
+    }
     const attributes = openingElement.attributes;
     const children = node.children;
     const allChildrenStatic = children.every(isStaticChild);
@@ -445,7 +577,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);
@@ -473,7 +605,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)) {
@@ -488,8 +620,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),
@@ -497,6 +654,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;
@@ -530,20 +695,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
               )
@@ -561,7 +727,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);
@@ -661,8 +827,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(
@@ -679,12 +846,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;
       }
@@ -713,22 +924,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) {
@@ -739,10 +959,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),
@@ -800,7 +1058,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;
       }
@@ -808,8 +1066,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"), [
@@ -950,7 +1209,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);
@@ -968,7 +1227,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)) {
@@ -1002,10 +1261,24 @@ function whatBabelPlugin({ types: t }) {
     const { node } = path3;
     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) {
@@ -1026,11 +1299,124 @@ function whatBabelPlugin({ types: t }) {
       return transformElementAsH(path3, 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(path3, state) {
-    state.needsCreateComponent = true;
-    return transformComponentFineGrained(path3, state);
+    const { node } = path3;
+    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 path3.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 = path3.scope ? path3.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(path3, state) {
     const { node } = path3;
@@ -1038,11 +1424,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));
@@ -1062,6 +1448,46 @@ function whatBabelPlugin({ types: t }) {
     state.templates.push({ id, html });
     return id;
   }
+  function transformJsxRoot(path3, state, transform) {
+    const scope = path3.scope;
+    let cache = state._signalNamesCache;
+    if (!cache) cache = state._signalNamesCache = /* @__PURE__ */ new WeakMap();
+    let names = cache.get(scope);
+    if (!names) {
+      names = collectSignalNamesFromScope(path3);
+      cache.set(scope, names);
+    }
+    state.signalNames = names;
+    state._pendingSetup = [];
+    const transformed = transform(path3, state);
+    const pending = state._pendingSetup;
+    state._pendingSetup = [];
+    if (pending.length > 0) {
+      let stmtPath = path3;
+      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);
+        path3.replaceWith(transformed);
+      } else {
+        pending.push(t.returnStatement(transformed));
+        path3.replaceWith(
+          t.callExpression(
+            t.arrowFunctionExpression([], t.blockStatement(pending)),
+            []
+          )
+        );
+      }
+    } else {
+      path3.replaceWith(transformed);
+    }
+  }
   return {
     name: "what-jsx-transform",
     visitor: {
@@ -1073,6 +1499,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;
@@ -1083,8 +1515,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 path3.node.body) {
@@ -1140,20 +1574,19 @@ function whatBabelPlugin({ types: t }) {
         },
         exit(path3, state) {
           for (const tmpl of state.templates.reverse()) {
+            const tmplCall = t.callExpression(t.identifier("_$template"), [t.stringLiteral(tmpl.html)]);
+            t.addComment(tmplCall, "leading", " @__PURE__ ");
             path3.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) {
@@ -1181,6 +1614,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"))
@@ -1238,47 +1701,36 @@ function whatBabelPlugin({ types: t }) {
             const eventArray = t.arrayExpression(
               [...state.delegatedEvents].map((e) => t.stringLiteral(e))
             );
-            path3.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])
+                )
+              ])
             );
+            path3.unshiftContainer("body", [
+              t.variableDeclaration("let", [
+                t.variableDeclarator(t.identifier("_$delegated$"), t.booleanLiteral(false))
+              ]),
+              helperFn
+            ]);
           }
         }
       },
       JSXElement(path3, state) {
-        state.signalNames = collectSignalNamesFromScope(path3);
-        state._pendingSetup = [];
-        const transformed = transformElementFineGrained(path3, state);
-        const pending = state._pendingSetup;
-        state._pendingSetup = [];
-        if (pending.length > 0) {
-          let stmtPath = path3;
-          while (stmtPath && !stmtPath.isStatement()) {
-            stmtPath = stmtPath.parentPath;
-          }
-          if (stmtPath && stmtPath.isStatement()) {
-            for (const stmt of pending) {
-              stmtPath.insertBefore(stmt);
-            }
-            path3.replaceWith(transformed);
-          } else {
-            pending.push(t.returnStatement(transformed));
-            path3.replaceWith(
-              t.callExpression(
-                t.arrowFunctionExpression([], t.blockStatement(pending)),
-                []
-              )
-            );
-          }
-        } else {
-          path3.replaceWith(transformed);
-        }
+        transformJsxRoot(path3, state, transformElementFineGrained);
       },
       JSXFragment(path3, state) {
-        const transformed = transformFragmentFineGrained(path3, state);
-        path3.replaceWith(transformed);
+        transformJsxRoot(path3, state, transformFragmentFineGrained);
       }
     }
   };
@@ -1417,6 +1869,13 @@ function extractPageConfig(source) {
     return { mode: "client" };
   }
 }
+function detectPageExports(source) {
+  return {
+    hasLoader: /export\s+(?:async\s+)?(?:const|let|var|function)\s+loader\b/.test(source),
+    hasGetStaticPaths: /export\s+(?:async\s+)?(?:const|let|var|function)\s+getStaticPaths\b/.test(source),
+    hasPageConfig: /export\s+const\s+page\b/.test(source)
+  };
+}
 function generateRoutesModule(pagesDir, rootDir) {
   const { pages, layouts, apiRoutes } = scanPages(pagesDir);
   const imports = [];
@@ -1433,9 +1892,11 @@ function generateRoutesModule(pagesDir, rootDir) {
     const relPath = toImportPath(page.filePath, rootDir);
     imports.push(`import ${varName} from '${relPath}';`);
     let pageConfig = { mode: "client" };
+    let detected = { hasLoader: false, hasGetStaticPaths: false, hasPageConfig: false };
     try {
       const source = fs.readFileSync(page.filePath, "utf-8");
       pageConfig = extractPageConfig(source);
+      detected = detectPageExports(source);
     } catch {
     }
     const layoutVar = findLayout(page.routePath, layoutMap);
@@ -1443,7 +1904,8 @@ function generateRoutesModule(pagesDir, rootDir) {
       path: page.routePath,
       component: varName,
       mode: pageConfig.mode || "client",
-      layout: layoutVar || null
+      layout: layoutVar || null,
+      hasLoader: detected.hasLoader
     };
     routeEntries.push(entry);
   });
@@ -1465,7 +1927,7 @@ function generateRoutesModule(pagesDir, rootDir) {
     "",
     "export const routes = [",
     ...routeEntries.map(
-      (r) => `  { path: '${r.path}', component: ${r.component}, mode: '${r.mode}'${r.layout ? `, layout: ${r.layout}` : ""} },`
+      (r) => `  { path: '${r.path}', component: ${r.component}, mode: '${r.mode}'${r.layout ? `, layout: ${r.layout}` : ""}${r.hasLoader ? ", hasLoader: true" : ""} },`
     ),
     "];",
     "",
@@ -1913,7 +2375,12 @@ function whatVitePlugin(options = {}) {
     // Pages directory (relative to project root)
     pages = "src/pages",
     // HMR: enabled by default in dev, disabled in production
-    hot = !production
+    hot = !production,
+    // Resolve the `production` exports condition (dist/*.min.js — pre-minified,
+    // dev warnings compiled out) during `vite build`. Set to false to build
+    // against package sources instead — needed e.g. in a monorepo where
+    // workspace-linked dist/ output may be stale or absent. See config() below.
+    prodBundles = true
   } = options;
   let rootDir = "";
   let pagesDir = "";
@@ -1968,6 +2435,13 @@ function whatVitePlugin(options = {}) {
         const result = transformSync(code, {
           filename: id,
           sourceMaps,
+          // Hermetic transform (SPRINT v0.11 C7): never load the project's
+          // babel.config.js/.babelrc. A user's React preset or unrelated
+          // plugins corrupting What's JSX output is a debugging nightmare —
+          // and scanning the disk for config files on every transform is
+          // wasted I/O in dev.
+          configFile: false,
+          babelrc: false,
           plugins: [
             [whatBabelPlugin, { production }]
           ],
@@ -2011,15 +2485,43 @@ function whatVitePlugin(options = {}) {
       return;
     },
     // Configure for development
-    config(config, { mode }) {
+    config(config, { mode, command }) {
+      const useProdCondition = command === "build" && mode === "production" && prodBundles;
       return {
+        ...useProdCondition ? { resolve: { conditions: ["production"] } } : {},
         esbuild: {
           // Preserve JSX so our babel plugin handles it -- don't let esbuild transform it
           jsx: "preserve"
         },
         optimizeDeps: {
-          // Pre-bundle the framework
-          include: ["what-framework"]
+          // Exclude framework packages from Vite's dependency pre-bundling.
+          //
+          // Bug class this prevents — "dual module instance":
+          //   The compiler emits `import { ... } from 'what-framework/render'`
+          //   (a subpath resolved to the source file). Meanwhile user code
+          //   imports `'what-framework'` (the package entry). If Vite
+          //   pre-bundles `'what-framework'` into an esbuild chunk under
+          //   node_modules/.vite, those two import paths resolve to two
+          //   *different* module instances. Module-scoped state — the
+          //   `componentStack` used by createComponent, effect ownership,
+          //   the signal subscriber registry — is duplicated, so a signal
+          //   created in user code never notifies effects created via the
+          //   compiler-emitted path, and `getCurrentComponent()` returns
+          //   undefined inside components mounted through compiler output.
+          //
+          // Why `exclude` is the right knob:
+          //   `include` would force pre-bundling of the package entry, which
+          //   does not resolve the subpath import the compiler emits — so the
+          //   split persists. Using `exclude` tells Vite to skip the optimizer
+          //   for these packages and serve them via the normal module graph,
+          //   where both the package entry and the `/render` subpath share
+          //   a single ESM module record.
+          //
+          // Regression symptom if this is removed:
+          //   Components mount but lifecycle hooks (onMount, onCleanup) and
+          //   shared store state silently no-op; effects don't re-run on
+          //   signal writes from user code; SSR/CSR hydration mismatches.
+          exclude: ["what-framework", "what-core", "what-compiler", "what-router"]
         }
       };
     }