what-compiler 0.11.6 → 0.11.8

package/src/babel-plugin.js

@@ -47,6 +47,36 @@ const SIGNAL_CREATORS = new Set([
   'createResource', 'useSWR', 'useQuery', 'useInfiniteQuery',
 ]);
 
+// Control-flow tags the plugin lowers itself instead of emitting
+// _$createComponent, so their children never travel through a factory.
+const LOWERED_TAGS = new Set(['For', 'Show', 'Switch', 'Match']);
+
+const SERVER_ACTION_SOURCES = new Set([
+  'what-framework/server',
+  'what-server',
+  'what-server/actions',
+]);
+
+function stableActionHash(value) {
+  let hash = 0xcbf29ce484222325n;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= BigInt(value.charCodeAt(i));
+    hash = BigInt.asUintN(64, hash * 0x100000001b3n);
+  }
+  return hash.toString(36);
+}
+
+function normalizeActionFilename(filename, projectRoot) {
+  const clean = String(filename || '<unknown>')
+    .replace(/\\/g, '/')
+    .replace(/[?#].*$/, '');
+  const root = String(projectRoot || '')
+    .replace(/\\/g, '/')
+    .replace(/\/+$/, '');
+  if (root && clean.startsWith(`${root}/`)) return clean.slice(root.length + 1);
+  return clean.replace(/^\.\//, '');
+}
+
 // Normalize JSX text per React/Babel rules:
 //  - Split on newlines, treat tabs as spaces.
 //  - For interior lines: trim leading and trailing horizontal whitespace.
@@ -148,6 +178,105 @@ export default function whatBabelPlugin({ types: t }) {
     return /^[A-Z]/.test(name);
   }
 
+  // Dotted tags (<Ctx.Provider>, <Foo.Bar.Baz>) are always components.
+  function isComponentElement(el) {
+    const name = el.openingElement ? el.openingElement.name : el.name;
+    if (t.isJSXMemberExpression(name)) return true;
+    return t.isJSXIdentifier(name) && isComponent(name.name);
+  }
+
+  // A tag whose binding came from a package other than What. isWhatTag is the
+  // stronger claim: the binding came from What, so the tag is provably ours.
+  function isForeignTag(name, state) {
+    return !!(state.foreignImports && state.foreignImports.has(name));
+  }
+
+  function isWhatTag(name, state) {
+    return !!(state.whatImports && state.whatImports.has(name));
+  }
+
+  // Literal <Match> arms are proof enough that a <Switch> is What's, whoever it
+  // was imported from: a bare specifier can be a re-export of What's control
+  // flow just as a relative one can, and nobody writes <Match> arms against a
+  // third-party <Switch>. Unlike <Show> and <For>, <Switch> has no working
+  // runtime path, so guessing wrong here renders the fallback forever.
+  function hasLiteralMatchArms(node) {
+    return node.children.some((child) =>
+      t.isJSXElement(child) && t.isJSXIdentifier(child.openingElement.name, { name: 'Match' }));
+  }
+
+  // JSXMemberExpression -> MemberExpression callee for _$createComponent.
+  function componentCallee(name) {
+    if (t.isJSXMemberExpression(name)) {
+      return t.memberExpression(componentCallee(name.object), t.identifier(name.property.name));
+    }
+    return t.identifier(name.name);
+  }
+
+  // --- Forwarded children on a destructured parameter ---
+  // `function Wrap({ children }) { return <ErrorBoundary>{children}</ErrorBoundary>; }`
+  // realizes the subtree while the parameter list is destructured, which is
+  // before ErrorBoundary is entered, so the boundary never catches and a
+  // provider publishes its value too late for its own subtree. Rewriting the
+  // pattern to a props identifier moves the read into the deferred children
+  // factory, where the enclosing component is already on the stack. Only a
+  // binding whose every reference is a component-child forward qualifies: a
+  // component that inspects its children still needs them realized.
+  function deferForwardedChildren(fnPath) {
+    const params = fnPath.node.params;
+    if (params.length !== 1 || !t.isObjectPattern(params[0])) return;
+    const pattern = params[0];
+    let index = -1;
+    for (let i = 0; i < pattern.properties.length; i++) {
+      const prop = pattern.properties[i];
+      if (t.isRestElement(prop)) return;
+      if (t.isObjectProperty(prop) && !prop.computed &&
+          t.isIdentifier(prop.key, { name: 'children' })) {
+        // A duplicate key would leave the other one destructured in the body,
+        // which reads the getter and defeats the deferral.
+        if (index !== -1 || !t.isIdentifier(prop.value)) return;
+        index = i;
+      }
+    }
+    if (index === -1) return;
+
+    const binding = fnPath.scope.getBinding(pattern.properties[index].value.name);
+    if (!binding || binding.constantViolations.length > 0 || binding.referencePaths.length === 0) return;
+    const forwarded = binding.referencePaths.every((ref) => {
+      const container = ref.parentPath;
+      if (!container || !container.isJSXExpressionContainer()) return false;
+      const owner = container.parentPath;
+      if (!owner || !owner.isJSXElement() || !isComponentElement(owner.node)) return false;
+      const tag = owner.node.openingElement.name;
+      return !(t.isJSXIdentifier(tag) && LOWERED_TAGS.has(tag.name));
+    });
+    if (!forwarded) return;
+
+    const propsId = fnPath.scope.generateUidIdentifier('props');
+    if (pattern.typeAnnotation) propsId.typeAnnotation = pattern.typeAnnotation;
+    params[0] = propsId;
+    const remaining = pattern.properties.filter((_, i) => i !== index);
+    if (remaining.length > 0) {
+      if (!t.isBlockStatement(fnPath.node.body)) {
+        fnPath.node.body = t.blockStatement([t.returnStatement(fnPath.node.body)]);
+      }
+      const moved = t.objectPattern(remaining);
+      fnPath.node.body.body.unshift(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(moved, t.cloneNode(propsId)),
+        ])
+      );
+      // collectSignalNamesFromScope classifies a component's props by reading
+      // the parameter list, so the moved pattern has to stay visible to it or
+      // every sibling prop silently stops being treated as reactive.
+      fnPath.node._whatMovedProps = moved;
+    }
+    for (const ref of binding.referencePaths) {
+      ref.replaceWith(t.memberExpression(t.cloneNode(propsId), t.identifier('children')));
+    }
+    fnPath.scope.crawl();
+  }
+
   function isVoidHtmlElement(name) {
     return VOID_HTML_ELEMENTS.has(String(name).toLowerCase());
   }
@@ -173,6 +302,12 @@ export default function whatBabelPlugin({ types: t }) {
     return typeof attr.name.name === 'string' ? attr.name.name : String(attr.name.name);
   }
 
+  // Handler-shaped attribute name, case-insensitive. Mirrors _isEventProp in
+  // what-core's dom.js.
+  function isEventAttrName(name) {
+    return !!name && name.length > 2 && /^on/i.test(name);
+  }
+
   function createEventHandler(handler, modifiers) {
     if (modifiers.length === 0) return handler;
 
@@ -288,6 +423,17 @@ export default function whatBabelPlugin({ types: t }) {
       }
     }
 
+    function extractFromPattern(param) {
+      if (!t.isObjectPattern(param)) return;
+      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);
+        }
+      }
+    }
+
     // Walk up the scope chain using Babel's scope API.
     let scope = path.scope;
     while (scope) {
@@ -301,18 +447,13 @@ export default function whatBabelPlugin({ types: t }) {
       // scope — not once per binding. The old per-binding rescan made this
       // O(params × bindings) per scope per JSXElement. (AUDIT-2026-06-06 H2)
       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);
-              }
-            }
-          }
+      if (fnNode) {
+        if (fnNode.params) {
+          for (const param of fnNode.params) extractFromPattern(param);
         }
+        // deferForwardedChildren moved this pattern out of the parameter list;
+        // it is still the same props destructuring and classifies the same way.
+        if (fnNode._whatMovedProps) extractFromPattern(fnNode._whatMovedProps);
       }
       scope = scope.parent;
     }
@@ -602,8 +743,7 @@ export default function whatBabelPlugin({ types: t }) {
     if (t.isJSXExpressionContainer(child)) return false;
     if (t.isJSXElement(child)) {
       const el = child.openingElement;
-      const tagName = el.name.name;
-      if (isComponent(tagName)) return false;
+      if (isComponentElement(child)) return false;
       for (const attr of el.attributes) {
         if (t.isJSXSpreadAttribute(attr)) return false;
         const value = attr.value;
@@ -638,7 +778,7 @@ export default function whatBabelPlugin({ types: t }) {
     const el = node.openingElement;
     const tagName = el.name.name;
 
-    if (isComponent(tagName)) return '';
+    if (isComponentElement(node)) return '';
 
     let html = `<${tagName}`;
 
@@ -646,7 +786,11 @@ export default function whatBabelPlugin({ types: t }) {
       if (t.isJSXSpreadAttribute(attr)) continue;
       const name = getAttrName(attr);
       if (name === 'key') continue;
-      if (name.startsWith('on') || name.startsWith('bind:') || name.includes('|')) continue;
+      // Case-insensitive: a static template is applied via innerHTML, so an
+      // `ONCLICK="alert(1)"` baked into the string becomes a live handler.
+      // Lowercase handlers are compiled separately; uppercase ones are dropped,
+      // matching how the runtime and SSR paths treat them.
+      if (isEventAttrName(name) || name.startsWith('bind:') || name.includes('|')) continue;
 
       let domName = name;
       if (name === 'className') domName = 'class';
@@ -683,7 +827,7 @@ export default function whatBabelPlugin({ types: t }) {
           html += '<!--$-->';
         }
       } else if (t.isJSXElement(child)) {
-        if (isComponent(child.openingElement.name.name)) {
+        if (isComponentElement(child)) {
           html += '<!--$-->';
         } else {
           html += extractStaticHTML(child);
@@ -709,15 +853,23 @@ export default function whatBabelPlugin({ types: t }) {
     const openingElement = node.openingElement;
     const tagName = openingElement.name.name;
 
-    // Control flow components — check before generic isComponent since they start uppercase
-    if (tagName === 'For') {
-      return transformForFineGrained(path, state);
+    // Control flow components, checked before generic isComponent since they start uppercase.
+    // A tag imported from somewhere other than What is that package's component,
+    // whatever it is called, so it goes to the component path untouched, unless
+    // its own arms prove otherwise.
+    if (!isForeignTag(tagName, state)) {
+      if (tagName === 'For') {
+        return transformForFineGrained(path, state);
+      }
+      if (tagName === 'Show') {
+        return transformShowFineGrained(path, state);
+      }
     }
-    if (tagName === 'Show') {
-      return transformShowFineGrained(path, state);
+    if (tagName === 'Switch' && (!isForeignTag(tagName, state) || hasLiteralMatchArms(node))) {
+      return transformSwitchFineGrained(path, state);
     }
 
-    if (isComponent(tagName)) {
+    if (isComponentElement(node)) {
       return transformComponentFineGrained(path, state);
     }
 
@@ -1219,7 +1371,7 @@ export default function whatBabelPlugin({ types: t }) {
 
       if (t.isJSXElement(child)) {
         const childTag = child.openingElement.name.name;
-        if (isComponent(childTag) || childTag === 'For' || childTag === 'Show') {
+        if (isComponentElement(child) || childTag === 'For' || childTag === 'Show') {
           entries.push({ type: 'component', child, childIndex });
           childIndex++;
         } else {
@@ -1472,7 +1624,7 @@ export default function whatBabelPlugin({ types: t }) {
   function transformComponentFineGrained(path, state) {
     const { node } = path;
     const openingElement = node.openingElement;
-    const componentName = openingElement.name.name;
+    const componentRef = componentCallee(openingElement.name);
     const attributes = openingElement.attributes;
     const children = node.children;
 
@@ -1507,7 +1659,7 @@ export default function whatBabelPlugin({ types: t }) {
       state.needsIsland = true;
 
       const islandProps = [
-        t.objectProperty(t.identifier('component'), t.identifier(componentName)),
+        t.objectProperty(t.identifier('component'), componentRef),
         t.objectProperty(t.identifier('mode'), t.stringLiteral(clientDirective.type)),
       ];
 
@@ -1617,19 +1769,34 @@ export default function whatBabelPlugin({ types: t }) {
       );
     }
 
-    // Transform children
+    // Transform children.
+    // Element children build their DOM at the call site, i.e. before the parent
+    // component ever runs, so a <Provider> publishes its context value too late
+    // for its own subtree. Collect the element setup and emit it behind a
+    // zero-arg factory instead; the runtime calls the factory while the parent
+    // is on the component stack. An expression child is deferred for the same
+    // reason: it is the shape a wrapper forwards its own children through, and
+    // reading it while the argument list is built happens before the component
+    // it is being handed to has run. Text children have nothing to defer.
+    const setupMark = state._pendingSetup ? state._pendingSetup.length : 0;
     const transformedChildren = [];
+    let deferChildren = false;
     for (const child of children) {
       if (t.isJSXText(child)) {
         const text = normalizeJsxText(child.value);
         if (text) transformedChildren.push(t.stringLiteral(text));
       } else if (t.isJSXExpressionContainer(child)) {
         if (!t.isJSXEmptyExpression(child.expression)) {
+          deferChildren = true;
           transformedChildren.push(child.expression);
         }
       } else if (t.isJSXElement(child)) {
+        // <For>/<Show>/<Switch> lower to an inserter or a thunk (already lazy).
+        const childTag = child.openingElement.name.name;
+        if (childTag !== 'For' && childTag !== 'Show' && childTag !== 'Switch') deferChildren = true;
         transformedChildren.push(transformElementFineGrained({ node: child }, state));
       } else if (t.isJSXFragment(child)) {
+        deferChildren = true;
         transformedChildren.push(transformFragmentFineGrained({ node: child }, state));
       }
     }
@@ -1650,11 +1817,20 @@ export default function whatBabelPlugin({ types: t }) {
       propsExpr = t.nullLiteral();
     }
 
-    const childrenArray = transformedChildren.length > 0
-      ? t.arrayExpression(transformedChildren)
-      : t.arrayExpression([]);
+    let childrenArg = t.arrayExpression(transformedChildren);
+    if (deferChildren) {
+      // Hoisted element setup emitted while transforming these children belongs
+      // inside the factory, not before the enclosing statement.
+      const setup = state._pendingSetup ? state._pendingSetup.splice(setupMark) : [];
+      childrenArg = t.arrowFunctionExpression(
+        [],
+        setup.length > 0
+          ? t.blockStatement([...setup, t.returnStatement(childrenArg)])
+          : childrenArg
+      );
+    }
 
-    return t.callExpression(t.identifier('_$createComponent'), [t.identifier(componentName), propsExpr, childrenArray]);
+    return t.callExpression(t.identifier('_$createComponent'), [componentRef, propsExpr, childrenArg]);
   }
 
   function transformForFineGrained(path, state) {
@@ -1785,32 +1961,7 @@ export default function whatBabelPlugin({ types: t }) {
     //   () => { const _v = <condition>; return _v ? <consequent> : <alternate>; }
     // Hoisting into a local prevents double-evaluation of the `when` signal
     // (the consequent's render callback also needs the resolved value).
-    //
-    // `whenExpr` shape determines how we form the condition:
-    //   - call expression          → use as-is              <Show when={cond()}>
-    //   - arrow w/ expression body → use the body            <Show when={() => x > 5}>
-    //   - identifier that looks like a signal/import        <Show when={isOpen}>
-    //                              → invoke it as accessor:  isOpen()
-    //   - anything else (member, literal, logical, etc.)    <Show when={user.isAdmin}>
-    //                              → use the raw expression. Do NOT invoke —
-    //                                non-functions would throw at runtime.
-    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 {
-      // Plain boolean expression — member access, literal, logical, etc.
-      condition = whenExpr;
-    }
+    let condition = buildWhenCondition(whenExpr, state);
 
     const vId = path.scope
       ? path.scope.generateUidIdentifier('v')
@@ -1861,6 +2012,183 @@ export default function whatBabelPlugin({ types: t }) {
     ]));
   }
 
+  // A `when` prop's shape determines how the condition is formed:
+  //   - call expression          → use as-is              when={cond()}
+  //   - arrow w/ expression body → use the body           when={() => x > 5}
+  //   - identifier that looks like a signal/import        when={isOpen}
+  //                              → invoke it as accessor: isOpen()
+  //   - anything else (member, literal, logical, etc.)    when={user.isAdmin}
+  //                              → use the raw expression. Do NOT invoke it:
+  //                                non-functions would throw at runtime.
+  function buildWhenCondition(whenExpr, state) {
+    if (t.isCallExpression(whenExpr)) return whenExpr;
+    if (t.isArrowFunctionExpression(whenExpr) && t.isExpression(whenExpr.body)) return whenExpr.body;
+    if (
+      t.isIdentifier(whenExpr) &&
+      (
+        (state.signalNames && isSignalIdentifier(whenExpr.name, state.signalNames)) ||
+        (state.importedIdentifiers && state.importedIdentifiers.has(whenExpr.name))
+      )
+    ) {
+      return t.callExpression(whenExpr, []);
+    }
+    return whenExpr;
+  }
+
+  function collectControlFlowContent(children, state) {
+    const parts = [];
+    for (const child of children) {
+      if (t.isJSXText(child)) {
+        const text = normalizeJsxText(child.value);
+        if (text) parts.push(t.stringLiteral(text));
+      } else if (t.isJSXExpressionContainer(child)) {
+        if (!t.isJSXEmptyExpression(child.expression)) parts.push(child.expression);
+      } else if (t.isJSXElement(child)) {
+        parts.push(transformElementFineGrained({ node: child }, state));
+      } else if (t.isJSXFragment(child)) {
+        parts.push(transformFragmentFineGrained({ node: child }, state));
+      }
+    }
+    if (parts.length === 0) return t.nullLiteral();
+    if (parts.length === 1) return parts[0];
+    return t.arrayExpression(parts);
+  }
+
+  function transformSwitchFineGrained(path, state) {
+    // <Switch fallback={alt}><Match when={a}>A</Match><Match when={b}>B</Match></Switch>
+    // → () => a ? A : b ? B : alt
+    //
+    // Same reactive-thunk shape <Show> lowers to, for the same reason: the
+    // component runs once, so the arm has to be picked inside a thunk that
+    // insert() re-evaluates. The runtime Switch matches on Match marker vnodes,
+    // which _$createComponent never produces (calling Match instead recurses),
+    // so compiled JSX has no working runtime path.
+    //
+    // A <Switch> is provably What's when either its binding was imported from
+    // What or it has literal <Match> arms; anything else with the same tag name
+    // is somebody else's component and goes to the component path untouched.
+    // Once it is provably ours, a shape whose arms cannot be read statically has
+    // nowhere to go, since the runtime component would render its fallback and
+    // nothing else forever. Fail that build rather than emit a silent blank.
+    const { node } = path;
+
+    // A <Switch> that got here on its arms alone came from the same foreign
+    // specifier its arms did, so its <Match> is ours by the same reasoning.
+    const armsProveIt = isForeignTag(node.openingElement.name.name, state);
+    const isMatch = (child) =>
+      t.isJSXElement(child) && t.isJSXIdentifier(child.openingElement.name, { name: 'Match' }) &&
+      (armsProveIt || !isForeignTag('Match', state));
+    if (!node.children.some(isMatch) && !isWhatTag(node.openingElement.name.name, state)) {
+      return transformComponentFineGrained(path, state);
+    }
+
+    const unsupported = (why) => {
+      const message =
+        `<Switch> ${why}. The compiler needs to read its arms statically. ` +
+        'Write them out: <Switch fallback={...}><Match when={a}>…</Match><Match when={b}>…</Match></Switch>';
+      throw path.buildCodeFrameError
+        ? path.buildCodeFrameError(message)
+        : new Error(`[what-compiler] ${message}`);
+    };
+
+    let fallbackExpr = null;
+    for (const attr of node.openingElement.attributes) {
+      if (t.isJSXSpreadAttribute(attr)) unsupported('cannot take a spread attribute');
+      if (getAttrName(attr) === 'fallback') fallbackExpr = getAttributeValue(attr.value);
+    }
+
+    const arms = [];
+    for (const child of node.children) {
+      if (t.isJSXText(child)) {
+        if (normalizeJsxText(child.value)) unsupported('cannot mix text with its <Match> arms');
+        continue;
+      }
+      if (t.isJSXExpressionContainer(child)) {
+        if (t.isJSXEmptyExpression(child.expression)) continue;
+        unsupported('cannot read its arms from an expression child');
+      }
+      if (!isMatch(child)) {
+        unsupported('cannot mix other elements with its <Match> arms');
+      }
+      arms.push(child);
+    }
+
+    if (arms.length === 0) unsupported('has no <Match> arms');
+
+    if (!state._pendingSetup) state._pendingSetup = [];
+    const branches = [];
+
+    for (const arm of arms) {
+      let whenExpr = null;
+      for (const attr of arm.openingElement.attributes) {
+        if (t.isJSXAttribute(attr) && getAttrName(attr) === 'when') whenExpr = getAttributeValue(attr.value);
+      }
+      if (!whenExpr) {
+        unsupported('has a <Match> with no "when" prop');
+      }
+
+      // An arm's element setup belongs inside the arm. Hoisting it next to the
+      // thunk, the way a lone element does, would build every arm's DOM on the
+      // way to picking one.
+      const setupMark = state._pendingSetup.length;
+      let content = collectControlFlowContent(arm.children, state);
+      const setup = state._pendingSetup.splice(setupMark);
+      if (setup.length > 0) {
+        content = t.callExpression(
+          t.arrowFunctionExpression([], t.blockStatement([...setup, t.returnStatement(content)])),
+          []
+        );
+      }
+
+      branches.push([buildWhenCondition(whenExpr, state), content]);
+    }
+
+    const anyReactive = branches.some(([condition]) =>
+      isPotentiallyReactive(condition, state.signalNames, state.importedIdentifiers));
+
+    const fallback = fallbackExpr || t.nullLiteral();
+
+    if (!anyReactive) {
+      let expr = fallback;
+      for (let i = branches.length - 1; i >= 0; i--) {
+        expr = t.conditionalExpression(branches[i][0], branches[i][1], expr);
+      }
+      return t.arrowFunctionExpression([], expr);
+    }
+
+    // ONE memo over the whole chain, not one per arm. _$memo evaluates its body
+    // immediately, so a memo per arm would evaluate every arm's `when` up front,
+    // while the runtime Switch stops at the first match. A single memo that
+    // resolves to the winning arm's index keeps that short-circuit (`when` props
+    // after the first truthy one are never read) and still gates re-rendering on
+    // the selected arm actually changing.
+    let selector = t.numericLiteral(-1);
+    for (let i = branches.length - 1; i >= 0; i--) {
+      selector = t.conditionalExpression(branches[i][0], t.numericLiteral(i), selector);
+    }
+
+    const armId = state.nextMemoId();
+    state.needsMemo = true;
+    state._pendingSetup.push(
+      t.variableDeclaration('const', [
+        t.variableDeclarator(
+          t.identifier(armId),
+          t.callExpression(t.identifier('_$memo'), [t.arrowFunctionExpression([], selector)])
+        )
+      ])
+    );
+
+    let expr = fallback;
+    for (let i = branches.length - 1; i >= 0; i--) {
+      expr = t.conditionalExpression(
+        t.binaryExpression('===', t.callExpression(t.identifier(armId), []), t.numericLiteral(i)),
+        branches[i][1],
+        expr
+      );
+    }
+    return t.arrowFunctionExpression([], expr);
+  }
+
   // A fragment-as-root returns an array (or single value) that the runtime
   // mounts element-by-element (createDOM / insert). Unlike the element-child
   // path there's no host element to _$insert into with a marker, so reactive
@@ -2042,6 +2370,114 @@ export default function whatBabelPlugin({ types: t }) {
     }
   }
 
+  function actionBindingName(callPath) {
+    const parent = callPath.parentPath;
+    if (parent?.isVariableDeclarator() && t.isIdentifier(parent.node.id)) {
+      return parent.node.id.name;
+    }
+    if (parent?.isAssignmentExpression() && t.isIdentifier(parent.node.left)) {
+      return parent.node.left.name;
+    }
+    if (parent?.isExportDefaultDeclaration()) return 'default';
+    if (parent?.isObjectProperty() && !parent.node.computed) {
+      if (t.isIdentifier(parent.node.key)) return parent.node.key.name;
+      if (t.isStringLiteral(parent.node.key)) return parent.node.key.value;
+    }
+    return null;
+  }
+
+  function isServerActionCall(callPath, state) {
+    const callee = callPath.node.callee;
+    if (t.isIdentifier(callee)) return state.serverActionBindings.has(callee.name);
+    return t.isMemberExpression(callee)
+      && !callee.computed
+      && t.isIdentifier(callee.object)
+      && t.isIdentifier(callee.property, { name: 'action' })
+      && state.serverActionNamespaces.has(callee.object.name);
+  }
+
+  function staticActionId(optionsNode) {
+    if (!t.isObjectExpression(optionsNode)) return { property: null, value: null };
+    for (const property of optionsNode.properties) {
+      if (!t.isObjectProperty(property)) continue;
+      const key = t.isIdentifier(property.key) && !property.computed ? property.key.name
+        : t.isStringLiteral(property.key) ? property.key.value
+          : null;
+      if (key !== 'id') continue;
+      if (t.isStringLiteral(property.value)) return { property, value: property.value.value };
+      if (t.isTemplateLiteral(property.value) && property.value.expressions.length === 0) {
+        return { property, value: property.value.quasis[0]?.value.cooked || '' };
+      }
+      return { property, value: null };
+    }
+    return { property: null, value: null };
+  }
+
+  function registerActionId(callPath, state, id, bindingName, relativeFilename) {
+    const loc = callPath.node.loc?.start || { line: 0, column: 0 };
+    const source = `${relativeFilename}:${loc.line}:${loc.column + 1}`;
+    const key = `${relativeFilename}#${bindingName}`;
+    const existing = state.serverActionIds.get(id);
+    if (existing) {
+      throw callPath.buildCodeFrameError(
+        `Duplicate server action ID "${id}". ` +
+        `First declared by "${existing.bindingName}" at ${existing.source}; ` +
+        `conflicts with "${bindingName}" at ${source}.`
+      );
+    }
+    const metadata = { id, key, bindingName, filename: relativeFilename, source, loc };
+    state.serverActionIds.set(id, metadata);
+    if (typeof state.opts?.onActionId === 'function') {
+      try {
+        state.opts.onActionId(metadata);
+      } catch (error) {
+        throw callPath.buildCodeFrameError(error instanceof Error ? error.message : String(error));
+      }
+    }
+  }
+
+  function transformServerAction(callPath, state) {
+    if (!isServerActionCall(callPath, state)) return;
+
+    const bindingName = actionBindingName(callPath);
+    if (!bindingName) {
+      if (!state.opts?.production) {
+        console.warn(
+          `[what-compiler] Could not derive a stable server action ID at ` +
+          `${state.serverActionFilename}:${callPath.node.loc?.start.line || 0}. ` +
+          'Assign action(...) to a named local or export, or pass { id } explicitly.'
+        );
+      }
+      return;
+    }
+
+    const optionsNode = callPath.node.arguments[1];
+    const explicit = staticActionId(optionsNode);
+    if (explicit.property) {
+      if (explicit.value !== null) {
+        registerActionId(callPath, state, explicit.value, bindingName, state.serverActionFilename);
+      }
+      return;
+    }
+
+    const id = `wa1_${stableActionHash(`${state.serverActionFilename}#${bindingName}`)}`;
+    registerActionId(callPath, state, id, bindingName, state.serverActionFilename);
+    const idProperty = t.objectProperty(t.identifier('id'), t.stringLiteral(id));
+
+    if (!optionsNode) {
+      callPath.node.arguments.push(t.objectExpression([idProperty]));
+    } else if (t.isObjectExpression(optionsNode)) {
+      optionsNode.properties.unshift(idProperty);
+    } else {
+      // Put the generated default before the caller's dynamic options so a
+      // runtime `options.id` remains authoritative.
+      callPath.node.arguments[1] = t.objectExpression([
+        idProperty,
+        t.spreadElement(optionsNode),
+      ]);
+    }
+  }
+
   // =====================================================
   // Plugin entry
   // =====================================================
@@ -2080,6 +2516,14 @@ export default function whatBabelPlugin({ types: t }) {
           state.nextVarId = () => `_el$${state._varCounter++}`;
           state.nextMemoId = () => `_c$${state._memoCounter++}`;
 
+          state.serverActionBindings = new Set();
+          state.serverActionNamespaces = new Set();
+          state.serverActionIds = new Map();
+          state.serverActionFilename = normalizeActionFilename(
+            state.file?.opts?.filename,
+            state.opts?.projectRoot || state.file?.opts?.cwd
+          );
+
           // Collect signal names for smart reactivity detection
           state.signalNames = new Set();
 
@@ -2089,14 +2533,22 @@ export default function whatBabelPlugin({ types: t }) {
           // (user stores), or functions matching use*/create* naming conventions.
           // This prevents over-wrapping of utility imports (lodash, etc.).
           state.importedIdentifiers = new Set();
+          // <Switch>, <Show>, <For> and <Match> are dispatched on the bare tag
+          // name, and Ant Design, Headless UI and MUI all ship a <Switch>.
+          // Recording which package a tag was imported from tells What's own
+          // control flow apart from a third party's by provenance instead.
+          state.whatImports = new Set();
+          state.foreignImports = new Set();
           for (const node of path.node.body) {
             if (t.isImportDeclaration(node)) {
               const source = node.source.value;
-              const isReactiveSource =
+              const isWhatSource =
                 source === 'what-framework' ||
                 source.startsWith('what-framework/') ||
                 source === 'what-core' ||
-                source.startsWith('what-core/') ||
+                source.startsWith('what-core/');
+              const isReactiveSource =
+                isWhatSource ||
                 source.startsWith('./') ||
                 source.startsWith('../');
 
@@ -2116,12 +2568,34 @@ export default function whatBabelPlugin({ types: t }) {
                   if (isReactiveSource || /^(use|create)[A-Z]/.test(localName)) {
                     state.importedIdentifiers.add(localName);
                   }
+                  // A relative import can be a re-export of What's own control
+                  // flow, so only a bare package specifier counts as foreign.
+                  if (isWhatSource) state.whatImports.add(localName);
+                  else if (!source.startsWith('.')) state.foreignImports.add(localName);
+                }
+
+                if (SERVER_ACTION_SOURCES.has(source)) {
+                  if (
+                    t.isImportSpecifier(spec)
+                    && t.isIdentifier(spec.imported, { name: 'action' })
+                    && t.isIdentifier(spec.local)
+                  ) {
+                    state.serverActionBindings.add(spec.local.name);
+                  } else if (t.isImportNamespaceSpecifier(spec) && t.isIdentifier(spec.local)) {
+                    state.serverActionNamespaces.add(spec.local.name);
+                  }
                 }
               }
             }
           }
 
           path.traverse({
+            Function(fnPath) {
+              deferForwardedChildren(fnPath);
+            },
+            CallExpression(callPath) {
+              transformServerAction(callPath, state);
+            },
             VariableDeclarator(declPath) {
               const init = declPath.node.init;
               if (!init || !t.isCallExpression(init)) return;