what-compiler 0.13.4 → 0.13.6

package/src/babel-plugin.js

@@ -41,6 +41,20 @@ const SAFE_GLOBAL_CALLS = new Set([
   'console', 'RegExp',
 ]);
 
+// Built-in prototype methods that convert or copy a value. A zero-argument call
+// is otherwise assumed to be a signal read (see isPotentiallyReactive); these
+// names are the ones JavaScript itself defines, so they never are, and they are
+// common enough in JSX that wrapping them would be pure cost.
+const PURE_BUILTIN_METHODS = new Set([
+  'toString', 'toLocaleString', 'valueOf', 'toJSON',
+  'toUpperCase', 'toLowerCase', 'toLocaleUpperCase', 'toLocaleLowerCase',
+  'trim', 'trimStart', 'trimEnd',
+  'toFixed', 'toPrecision', 'toExponential',
+  'toISOString', 'toUTCString', 'toDateString', 'toTimeString',
+  'toLocaleDateString', 'toLocaleTimeString',
+  'slice', 'reverse', 'sort', 'flat', 'concat', 'join',
+]);
+
 // Known signal-creating functions
 const SIGNAL_CREATORS = new Set([
   'useSignal', 'signal', 'computed', 'useComputed', 'useState', 'useReducer',
@@ -57,6 +71,17 @@ const SERVER_ACTION_SOURCES = new Set([
   'what-server/actions',
 ]);
 
+// A bare specifier that resolves to this framework, entry point included:
+// 'what-framework', 'what-framework/render', 'what-core', 'what-core/render'.
+// Used to decide whether an imported binding is provably ours before the plugin
+// changes how a call to it is compiled.
+function isWhatModuleSource(source) {
+  return source === 'what-framework'
+    || source.startsWith('what-framework/')
+    || source === 'what-core'
+    || source.startsWith('what-core/');
+}
+
 function stableActionHash(value) {
   let hash = 0xcbf29ce484222325n;
   for (let i = 0; i < value.length; i++) {
@@ -242,6 +267,67 @@ export default function whatBabelPlugin({ types: t }) {
       t.isJSXElement(child) && t.isJSXIdentifier(child.openingElement.name, { name: 'Match' }));
   }
 
+  // --- The JSX handed straight to hydrate() ---
+  //
+  // hydrate() can only adopt the server's markup from an UNBUILT tree: a node
+  // that has already been built has its bindings wired to itself, so hydrateNode
+  // inserts it and lets the trim delete everything the server sent. The
+  // documented client entry, `hydrate(<App />, el)`, lowered to
+  // `_$createComponent(App, ...)`, which runs App and builds its DOM before
+  // hydrate() is even called — so every compiled app that hydrated threw its
+  // server render away and re-rendered from scratch, silently in production
+  // where the warning is stripped.
+  //
+  // Only the first argument is the tree; the second is the container. And only a
+  // binding that provably resolves to OUR hydrate qualifies, because rewriting a
+  // call to somebody else's `hydrate` would change what their code means.
+  function isHydrateRootArgument(path) {
+    // transformElementFineGrained is also called with a bare `{ node }` stand-in
+    // when it recurses into children, and a child is never the hydrate root.
+    const parent = path.parentPath;
+    if (!parent || typeof parent.isCallExpression !== 'function' || !parent.isCallExpression()) {
+      return false;
+    }
+    if (parent.node.arguments[0] !== path.node) return false;
+    return isWhatHydrateCallee(parent.node.callee, parent.scope);
+  }
+
+  // Resolve the callee through Babel's scope rather than by name, so a local
+  // `function hydrate()` or `const hydrate = ...` that shadows the import is left
+  // alone. getBinding returns the NEAREST binding, which is exactly the shadowing
+  // rule the language itself applies. An unresolved (global) `hydrate` is not
+  // ours either, so it stays untouched too.
+  function isWhatHydrateCallee(callee, scope) {
+    // `ns.hydrate(...)` after `import * as ns from 'what-framework'`.
+    if (t.isMemberExpression(callee) && !callee.computed
+        && t.isIdentifier(callee.property, { name: 'hydrate' })
+        && t.isIdentifier(callee.object)) {
+      return importedFrom(scope.getBinding(callee.object.name), t.isImportNamespaceSpecifier, null);
+    }
+    if (!t.isIdentifier(callee)) return false;
+    // `import { hydrate }` and `import { hydrate as boot }` alike: the binding
+    // remembers the name that was IMPORTED, which is the one that matters.
+    return importedFrom(scope.getBinding(callee.name), t.isImportSpecifier, 'hydrate');
+  }
+
+  // A binding is ours when it came from an import declaration of a What module
+  // through the expected specifier kind, optionally carrying a required imported
+  // name (`hydrate` for a named import, none for a namespace).
+  function importedFrom(binding, isSpecifier, importedName) {
+    if (!binding || binding.kind !== 'module' || !binding.path) return false;
+    const spec = binding.path.node;
+    if (!isSpecifier(spec)) return false;
+    if (importedName !== null) {
+      const imported = spec.imported;
+      const name = t.isIdentifier(imported) ? imported.name
+        : t.isStringLiteral(imported) ? imported.value
+        : null;
+      if (name !== importedName) return false;
+    }
+    const decl = binding.path.parent;
+    return t.isImportDeclaration(decl) && isWhatModuleSource(decl.source.value);
+  }
+
   // JSXMemberExpression -> MemberExpression callee for _$createComponent.
   function componentCallee(name) {
     if (t.isJSXMemberExpression(name)) {
@@ -331,6 +417,27 @@ export default function whatBabelPlugin({ types: t }) {
     return attrName;
   }
 
+  // Is this attribute overwritten by a later one naming the same DOM property?
+  //
+  // `<div id={a} id="b"/>` is legal JSX and means id="b": the last writer of a
+  // name wins, exactly as it does in the object literal the h() spelling
+  // builds. The template could not express that, because a repeated attribute
+  // in an HTML string keeps the FIRST value and a dynamic attribute is applied
+  // after the template regardless of where it was written. Dropping the
+  // shadowed one leaves a single writer per name, so written order decides.
+  //
+  // A later SPREAD never shadows: it overrides only the names it actually
+  // carries, which is not knowable here and is handled by ordering instead.
+  function isShadowedAttr(attributes, index) {
+    const name = normalizeAttrName(getAttrName(attributes[index]));
+    for (let i = index + 1; i < attributes.length; i += 1) {
+      const later = attributes[i];
+      if (t.isJSXSpreadAttribute(later)) continue;
+      if (normalizeAttrName(getAttrName(later)) === name) return true;
+    }
+    return false;
+  }
+
   // Safely extract attribute name, handling JSXNamespacedName (e.g., client:idle, bind:value)
   function getAttrName(attr) {
     if (t.isJSXNamespacedName(attr.name)) {
@@ -339,6 +446,20 @@ export default function whatBabelPlugin({ types: t }) {
     return typeof attr.name.name === 'string' ? attr.name.name : String(attr.name.name);
   }
 
+  // The key half of a prop in an emitted object literal. A JSX attribute name is
+  // frequently NOT a valid JavaScript identifier — `data-x`, `aria-label` and
+  // every namespaced name contain characters an identifier cannot — so anything
+  // that does not match has to be quoted.
+  //
+  // Shared rather than inlined because babel's builders do not validate: handing
+  // t.identifier() a name with a dash produces `{data-x: "1"}` in the output and
+  // no error anywhere, so the mistake surfaces as a parse failure in generated
+  // code. Two call sites had their own copy of this test and one of them was
+  // missing it entirely.
+  function propKey(name) {
+    return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name) ? t.identifier(name) : t.stringLiteral(name);
+  }
+
   // Handler-shaped attribute name, case-insensitive. Mirrors _isEventProp in
   // what-core's dom.js.
   function isEventAttrName(name) {
@@ -520,6 +641,16 @@ export default function whatBabelPlugin({ types: t }) {
   // backward compat (used in collectSignalNames calls)". Nothing called it;
   // every call site uses collectSignalNamesFromScope directly.
 
+  // `x.toUpperCase()` and friends, listed in PURE_BUILTIN_METHODS. Only the method
+  // name is checked: whether the RECEIVER is reactive is decided separately, so
+  // `user().name.trim()` stays reactive through its object.
+  function isPureBuiltinMethodCall(expr) {
+    return t.isMemberExpression(expr.callee)
+      && !expr.callee.computed
+      && t.isIdentifier(expr.callee.property)
+      && PURE_BUILTIN_METHODS.has(expr.callee.property.name);
+  }
+
   // Check if a call expression is a safe (non-reactive) global call
   function isSafeGlobalCall(expr) {
     if (!t.isCallExpression(expr)) return false;
@@ -599,6 +730,17 @@ export default function whatBabelPlugin({ types: t }) {
       if (isSafeGlobalCall(expr)) {
         return expr.arguments.some(arg => isPotentiallyReactive(arg, signalNames, importedIds));
       }
+      // Any other zero-argument call has the shape of an accessor read, so it
+      // is assumed to be one. `props.count()`, a plain parameter `count()` and
+      // `s()` from `const s = useThing()` are all opaque to the compiler: it
+      // knows only the names it watched being created. Assuming the narrow way
+      // round meant those three froze silently while the docs promised
+      // `{count()}` was reactive. Assuming this way round costs, when the call
+      // turns out to be constant, one effect that runs once and never again.
+      if (expr.arguments.length === 0 && !isPureBuiltinMethodCall(expr)) {
+        return true;
+      }
+
       // Unknown call — check if callee or args contain signal reads
       if (t.isIdentifier(expr.callee)) {
         // Could be a function that reads signals internally
@@ -819,6 +961,7 @@ export default function whatBabelPlugin({ types: t }) {
     if (!t.isArrowFunctionExpression(mapFn) && !t.isFunctionExpression(mapFn)) return null;
 
     // Get the map callback's return expression
+    /** @type {any} */
     let returnExpr = null;
     if (t.isArrowFunctionExpression(mapFn)) {
       if (t.isExpression(mapFn.body)) {
@@ -837,6 +980,7 @@ export default function whatBabelPlugin({ types: t }) {
     // Check if the return is JSX with a `key` prop
     if (!t.isJSXElement(returnExpr)) return null;
     const attrs = returnExpr.openingElement.attributes;
+    /** @type {any} */
     let keyAttr = null;
     for (const attr of attrs) {
       if (t.isJSXAttribute(attr) && getAttrName(attr) === 'key') {
@@ -983,6 +1127,37 @@ export default function whatBabelPlugin({ types: t }) {
     return t.isJSXExpressionContainer(attr.value);
   }
 
+  // The child slots a fragment contributes to its parent, flattened.
+  //
+  // A fragment renders no node of its own, so each of its children takes a
+  // sibling position in the parent exactly as if the fragment were not written.
+  // extractStaticHTML() and applyDynamicChildren() both read this list, so the
+  // markers baked into the template and the inserts emitted against them can
+  // never disagree about how many positions the fragment occupies.
+  //
+  // Nested fragments flatten too: `<><>a</>b</>` is two slots in the parent.
+  // Whitespace-only text and `{/* comment */}` contribute nothing, matching how
+  // the same children are treated directly under an element.
+  function fragmentSlots(fragmentNode, out = []) {
+    for (const child of fragmentNode.children) {
+      if (t.isJSXText(child)) {
+        const text = normalizeJsxText(child.value);
+        if (text) out.push({ kind: 'text', text });
+        continue;
+      }
+      if (t.isJSXFragment(child)) {
+        fragmentSlots(child, out);
+        continue;
+      }
+      if (t.isJSXExpressionContainer(child)) {
+        if (!t.isJSXEmptyExpression(child.expression)) out.push({ kind: 'expression', child });
+        continue;
+      }
+      if (t.isJSXElement(child)) out.push({ kind: 'element', child });
+    }
+    return out;
+  }
+
   // Extract static HTML from JSX element for template()
   function extractStaticHTML(node) {
     if (t.isJSXText(node)) {
@@ -1004,8 +1179,19 @@ export default function whatBabelPlugin({ types: t }) {
 
     let html = `<${tagName}`;
 
-    for (const attr of el.attributes) {
+    // A static attribute written AFTER a spread cannot be baked into the
+    // template. The template is applied first and the spread runs against the
+    // finished element, so baking would let the spread overwrite an attribute
+    // the author pinned after it: `<div {...{id:'a'}} id="b"/>` rendered id="a"
+    // while the h() spelling of the same tree renders id="b". Everything from
+    // the first spread onward is emitted as an ordered runtime set instead, in
+    // applyDynamicAttrs.
+    const firstSpread = el.attributes.findIndex(a => t.isJSXSpreadAttribute(a));
+
+    for (const [attrIndex, attr] of el.attributes.entries()) {
       if (t.isJSXSpreadAttribute(attr)) continue;
+      if (firstSpread !== -1 && attrIndex > firstSpread) continue;
+      if (isShadowedAttr(el.attributes, attrIndex)) continue;
       const name = getAttrName(attr);
       if (name === 'key') continue;
       // Case-insensitive: a static template is applied via innerHTML, so an
@@ -1055,11 +1241,14 @@ export default function whatBabelPlugin({ types: t }) {
           html += extractStaticHTML(child);
         }
       } else if (t.isJSXFragment(child)) {
-        // One marker for the whole fragment: its children all insert before it,
-        // in order, which puts them exactly where the fragment sits. Without
-        // this a fragment child occupied no position at all, so its content was
-        // appended to the end of the parent instead of staying in place.
-        html += '<!--$-->';
+        // One marker PER fragment slot, not one for the whole fragment. A
+        // fragment is not a DOM boundary, so its children are siblings of the
+        // fragment's siblings and each needs its own anchor to keep its place.
+        // With a single shared anchor the order held at mount and then broke on
+        // the first re-run: reconcileInsert re-places a reactive region before
+        // that anchor, which puts it after every sibling that had been inserted
+        // before the same anchor earlier.
+        html += '<!--$-->'.repeat(fragmentSlots(child).length);
       }
     }
 
@@ -1274,8 +1463,15 @@ export default function whatBabelPlugin({ types: t }) {
       );
     }
 
-    for (const attr of attributes) {
+    // Static attributes before the first spread are already in the template.
+    // Ones after it are not, because the template is applied before _$spread
+    // runs and would lose to it; they are set here instead, in source order, so
+    // the last write for a key wins exactly as it does in the h() call.
+    let seenSpread = false;
+
+    for (const [attrIndex, attr] of attributes.entries()) {
       if (t.isJSXSpreadAttribute(attr)) {
+        seenSpread = true;
         state.needsSpread = true;
         statements.push(
           t.expressionStatement(
@@ -1285,6 +1481,10 @@ export default function whatBabelPlugin({ types: t }) {
         continue;
       }
 
+      // A later attribute of the same name is the only writer that matters.
+      // Emitting this one too would apply it after the template and let it win.
+      if (isShadowedAttr(attributes, attrIndex)) continue;
+
       const attrName = getAttrName(attr);
 
       // Strip key prop — WhatFW has no virtual DOM, so key is meaningless (issue #6)
@@ -1484,6 +1684,19 @@ export default function whatBabelPlugin({ types: t }) {
           // Static expression (no signal calls) — set once
           statements.push(t.expressionStatement(buildSetPropCall(domName, expr)));
         }
+        continue;
+      }
+
+      // A literal attribute that follows a spread. Everything before the first
+      // spread is in the template; this one is not, so re-apply it here to
+      // restore the order the author wrote. A valueless attribute is `true` in
+      // JSX, which is what the h() spelling passes.
+      if (seenSpread) {
+        statements.push(
+          t.expressionStatement(
+            buildSetPropCall(normalizeAttrName(attrName), getAttributeValue(attr.value))
+          )
+        );
       }
     }
   }
@@ -1646,8 +1859,24 @@ export default function whatBabelPlugin({ types: t }) {
       }
 
       if (t.isJSXFragment(child)) {
-        entries.push({ type: 'fragment', child, childIndex });
-        childIndex++;
+        // Flattened: every slot the fragment contributes gets its own marker and
+        // its own entry, so it is handled exactly like a child written directly
+        // under this element. That is what keeps document order stable across
+        // re-runs, and it also means fragment children now get the treatments
+        // the old single-anchor branch reimplemented without: keyed .map()
+        // lowering, branch memoization and per-element dynamic attributes.
+        for (const slot of fragmentSlots(child)) {
+          if (slot.kind === 'text') {
+            entries.push({ type: 'fragmentText', text: slot.text, childIndex });
+          } else if (slot.kind === 'expression') {
+            entries.push({ type: 'expression', child: slot.child, childIndex });
+          } else {
+            // The template holds only a marker here, so the element is built at
+            // runtime and inserted before it, which is the 'component' slot shape.
+            entries.push({ type: 'component', child: slot.child, childIndex });
+          }
+          childIndex++;
+        }
       }
     }
 
@@ -1655,7 +1884,7 @@ export default function whatBabelPlugin({ types: t }) {
     // When there are multiple entries needing DOM refs and at least one _$insert(),
     // capture all markers upfront to avoid index shifting after DOM mutations.
     const entriesNeedingRef = entries.filter(e =>
-      e.type === 'expression' || e.type === 'component' || e.type === 'fragment' ||
+      e.type === 'expression' || e.type === 'component' || e.type === 'fragmentText' ||
       (e.type === 'static' && e.hasAnythingDynamic)
     );
     // Pre-capture whenever 2+ children need a DOM ref. Beyond preventing index
@@ -1837,96 +2066,18 @@ export default function whatBabelPlugin({ types: t }) {
         continue;
       }
 
-      if (entry.type === 'fragment') {
-        // A fragment child used to handle ONLY expression children, and to
-        // insert them with no anchor. Three things were wrong with that, all
-        // silent: text children were dropped, element children were dropped,
-        // and the expressions that did survive were appended to the end of the
-        // parent rather than placed where the fragment sits. So
-        // `<span><>a<b>c</b></>{x}</span>` rendered `<span>x</span>`.
-        //
-        // Every child now inserts before the fragment's own marker. Repeated
-        // insertBefore against one anchor appends in call order, so the
-        // fragment's children keep their order and the fragment keeps its place
-        // among its siblings.
-        //
-        // The marker is captured into a variable first. Each insert mutates the
-        // parent, so an inline `el.firstChild.nextSibling…` walk would resolve
-        // against a tree that the previous insert already shifted.
-        const idx = /** @type {number} */ (entry.childIndex);
-        let anchor = getMarker(idx);
-        if (!t.isIdentifier(anchor)) {
-          const anchorVar = state.nextVarId();
-          statements.push(
-            t.variableDeclaration('const', [
-              t.variableDeclarator(t.identifier(anchorVar), anchor)
+      if (entry.type === 'fragmentText') {
+        state.needsInsert = true;
+        statements.push(
+          t.expressionStatement(
+            t.callExpression(t.identifier('_$insert'), [
+              t.identifier(elId),
+              t.stringLiteral(entry.text),
+              getMarker(entry.childIndex),
             ])
-          );
-          anchor = t.identifier(anchorVar);
-        }
-        emitFragmentInserts(statements, elId, entry.child, anchor, state);
-      }
-    }
-
-    // Insert one fragment's children into `elId`, each before `anchor`.
-    // Recursive, because `<><>a</>b</>` is a fragment whose child is a fragment
-    // and both belong at the same position in the parent.
-    function emitFragmentInserts(statements, elId, fragmentNode, anchor, state) {
-      for (const fChild of fragmentNode.children) {
-        if (t.isJSXText(fChild)) {
-          const text = normalizeJsxText(fChild.value);
-          if (!text) continue;
-          state.needsInsert = true;
-          statements.push(
-            t.expressionStatement(
-              t.callExpression(t.identifier('_$insert'), [
-                t.identifier(elId),
-                t.stringLiteral(text),
-                anchor,
-              ])
-            )
-          );
-          continue;
-        }
-
-        if (t.isJSXFragment(fChild)) {
-          emitFragmentInserts(statements, elId, fChild, anchor, state);
-          continue;
-        }
-
-        if (t.isJSXElement(fChild)) {
-          state.needsInsert = true;
-          statements.push(
-            t.expressionStatement(
-              t.callExpression(t.identifier('_$insert'), [
-                t.identifier(elId),
-                transformElementFineGrained({ node: fChild }, state),
-                anchor,
-              ])
-            )
-          );
-          continue;
-        }
-
-        if (t.isJSXExpressionContainer(fChild) && !t.isJSXEmptyExpression(fChild.expression)) {
-          state.needsInsert = true;
-          let expr = fChild.expression;
-          // Unchanged from before this fix: a potentially reactive expression
-          // inside a fragment is wrapped in a thunk so insert() re-runs it.
-          if (isPotentiallyReactive(expr, state.signalNames, state.importedIdentifiers)) {
-            expr = memoizeBranchCondition(expr, statements, state); // (C1)
-            expr = t.arrowFunctionExpression([], expr);
-          }
-          statements.push(
-            t.expressionStatement(
-              t.callExpression(t.identifier('_$insert'), [
-                t.identifier(elId),
-                expr,
-                anchor,
-              ])
-            )
-          );
-        }
+          )
+        );
+        continue;
       }
     }
   }
@@ -1953,6 +2104,7 @@ export default function whatBabelPlugin({ types: t }) {
     const children = node.children;
 
     // Check for client: directive (islands)
+    /** @type {{ type: string, value?: any } | null} */
     let clientDirective = null;
     const filteredAttrs = [];
 
@@ -2002,7 +2154,17 @@ export default function whatBabelPlugin({ types: t }) {
         } else if (t.isJSXExpressionContainer(child)) {
           if (!t.isJSXEmptyExpression(child.expression)) {
             deferChildren = true;
-            transformedChildren.push(child.expression);
+            // The same lowering an element child and a fragment child get.
+            // Without it `<Box>{count()}</Box>` was evaluated once and never
+            // again, while `<div>{count()}</div>` right beside it stayed live —
+            // the auto-thunk docs/GOTCHAS.md section 2 promises for "any call
+            // with no arguments" reached every JSX position EXCEPT this one.
+            //
+            // Nothing about it is component-specific: a component's children
+            // are built into an array with no host element to _$insert into,
+            // which is exactly the situation lowerFragmentExprChild exists for,
+            // and it is where `.map()` picks up keyed reconciliation too.
+            transformedChildren.push(lowerFragmentExprChild(child.expression, state));
           }
         } else if (t.isJSXElement(child)) {
           // <For>/<Show>/<Switch> lower to an inserter or a thunk (already lazy).
@@ -2034,39 +2196,71 @@ export default function whatBabelPlugin({ types: t }) {
       state.needsCreateComponent = true;
       state.needsIsland = true;
 
-      const islandProps = [
+      // The directive's own machinery, kept apart from user data because it is
+      // always applied LAST: `component` comes from the tag and `mode` from the
+      // directive, so nothing a caller spreads in can reach either one.
+      const directiveProps = [
         t.objectProperty(t.identifier('component'), componentRef),
         t.objectProperty(t.identifier('mode'), t.stringLiteral(clientDirective.type)),
       ];
 
       if (clientDirective.value) {
-        islandProps.push(
+        directiveProps.push(
           t.objectProperty(t.identifier('mediaQuery'), t.stringLiteral(clientDirective.value))
         );
       }
 
-      let islandSpread = null;
+      // User props in source order — same rule, and the same reasons, as the
+      // regular component path below. An island IS a component, so
+      // `<Chart client:load {...a} {...b} />` has to mean `{ ...a, ...b }` for
+      // exactly the reason `<Chart {...a} {...b} />` does.
+      const islandParts = [];
+      let islandUserProps = [];
+      const flushIslandUserProps = () => {
+        if (islandUserProps.length > 0) {
+          islandParts.push(t.objectExpression(islandUserProps));
+          islandUserProps = [];
+        }
+      };
+
       for (const attr of filteredAttrs) {
         if (t.isJSXSpreadAttribute(attr)) {
           // A spread used to be dropped on the floor here, so
           // `<Chart client:visible {...config} />` lost every prop in `config`.
-          islandSpread = attr.argument;
+          // Then only the LAST spread was kept, which lost every key an earlier
+          // spread carried and the last one did not.
+          flushIslandUserProps();
+          islandParts.push(attr.argument);
           continue;
         }
         const attrName = getAttrName(attr);
         if (attrName === 'key') continue;
         const value = getAttributeValue(attr.value);
-        islandProps.push(t.objectProperty(t.identifier(attrName), value));
+        // `data-x` and `aria-label` are not identifiers. Emitting one as a bare
+        // key produced `{data-x: "1"}`, which is a SYNTAX ERROR: babel does not
+        // validate what its builders are handed, so the compiler exited 0 and
+        // wrote a file that no parser would accept. `<Chart client:load
+        // aria-label="..." />` is an ordinary thing to write, and it took the
+        // whole build down with an error pointing at generated output.
+        //
+        // The regular component branch below has always tested the name first;
+        // this branch is the copy that did not.
+        islandUserProps.push(t.objectProperty(propKey(attrName), value));
       }
 
-      // Spread first, explicit attributes second, so a written-out prop wins over
-      // the same key coming from the spread (JSX evaluation order).
-      const islandPropsExpr = islandSpread
-        ? t.callExpression(
-            t.memberExpression(t.identifier('Object'), t.identifier('assign')),
-            [t.objectExpression([]), islandSpread, t.objectExpression(islandProps)]
-          )
-        : t.objectExpression(islandProps);
+      let islandPropsExpr;
+      if (islandParts.length === 0) {
+        // No spread anywhere: one object literal, directive keys written last so
+        // they still win. This is the shape nearly every island has, and keeping
+        // it a literal keeps the emitted output byte-identical to before.
+        islandPropsExpr = t.objectExpression([...islandUserProps, ...directiveProps]);
+      } else {
+        flushIslandUserProps();
+        islandPropsExpr = t.callExpression(
+          t.memberExpression(t.identifier('Object'), t.identifier('assign')),
+          [t.objectExpression([]), ...islandParts, t.objectExpression(directiveProps)]
+        );
+      }
 
       return t.callExpression(
         t.identifier('_$createComponent'),
@@ -2074,17 +2268,51 @@ export default function whatBabelPlugin({ types: t }) {
       );
     }
 
-    // Regular component — use _$createComponent to instantiate, component runs once
-    state.needsCreateComponent = true;
-
-    const props = [];
-    let hasSpread = false;
-    let spreadExpr = null;
+    // Regular component — use _$createComponent to instantiate, component runs once.
+    // Unless this element IS the tree handed to hydrate(), in which case it has
+    // to arrive unbuilt: see isHydrateRootArgument.
+    //
+    // The root, and only the root. A host element lowers to a template clone, so
+    // "unbuilt" is not something the children of an arbitrary tree can inherit —
+    // <App><p>hi</p></App> would still build the <p>, and pushing the choice down
+    // through component children only would produce a tree that hydrates in
+    // patches. The root is the one position where the answer is unambiguous and
+    // it is where the documented entry point lives.
+    const isHydrateRoot = isHydrateRootArgument(path);
+    if (isHydrateRoot) state.needsComponentVNode = true;
+    else state.needsCreateComponent = true;
+
+    // Props resolve in SOURCE order. `<Box a {...s} b />` is one spelling of
+    // `{ a, ...s, b }`, which is what h(), the JSX runtime, every other JSX
+    // toolchain, and (since #65) this compiler's own ELEMENT path all produce.
+    // `parts` is that argument list: runs of explicit attributes, separated by
+    // the spreads written between them.
+    //
+    // Keeping a single `spreadExpr` and appending every explicit prop last, the
+    // way this used to, got both halves wrong. `<Box {...a} {...b} />` kept only
+    // `b`, so every key `a` carried and `b` did not vanished completely — data
+    // loss, not merely precedence — and an attribute written BEFORE a spread
+    // beat it, which no other JSX implementation does.
+    //
+    // The merge is a shallow copy, deliberately: a prop is reactive here when
+    // its VALUE is an accessor, and Object.assign copies that function through
+    // untouched. A lone non-literal spread is copied too, the same
+    // Object.assign path a multi-prop merge already used, so two
+    // `<Box {...reused}>` sites do not share one identity. createComponent
+    // (dom.js) copies again before the component sees the props.
+    const parts = [];
+    let props = [];
+    const flushProps = () => {
+      if (props.length > 0) {
+        parts.push(t.objectExpression(props));
+        props = [];
+      }
+    };
 
     for (const attr of filteredAttrs) {
       if (t.isJSXSpreadAttribute(attr)) {
-        hasSpread = true;
-        spreadExpr = attr.argument;
+        flushProps();
+        parts.push(attr.argument);
         continue;
       }
 
@@ -2151,35 +2379,32 @@ export default function whatBabelPlugin({ types: t }) {
 
       const value = getAttributeValue(attr.value);
 
-      props.push(
-        t.objectProperty(
-          /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(attrName)
-            ? t.identifier(attrName)
-            : t.stringLiteral(attrName),
-          value
-        )
-      );
+      props.push(t.objectProperty(propKey(attrName), value));
     }
 
+    flushProps();
+
     let propsExpr;
-    if (hasSpread) {
-      if (props.length > 0) {
-        propsExpr = t.callExpression(
-          t.memberExpression(t.identifier('Object'), t.identifier('assign')),
-          [t.objectExpression([]), spreadExpr, t.objectExpression(props)]
-        );
-      } else {
-        propsExpr = spreadExpr;
-      }
-    } else if (props.length > 0) {
-      propsExpr = t.objectExpression(props);
-    } else {
+    if (parts.length === 0) {
       propsExpr = t.nullLiteral();
+    } else if (parts.length === 1 && t.isObjectExpression(parts[0])) {
+      // A lone object literal (no spread, or an inline `{...}`) is already a
+      // fresh props object. A lone identifier/member/call spread is the
+      // CALLER'S object and must go through the copy below.
+      propsExpr = parts[0];
+    } else {
+      propsExpr = t.callExpression(
+        t.memberExpression(t.identifier('Object'), t.identifier('assign')),
+        [t.objectExpression([]), ...parts]
+      );
     }
 
     const childrenArg = transformComponentChildren();
 
-    return t.callExpression(t.identifier('_$createComponent'), [componentRef, propsExpr, childrenArg]);
+    return t.callExpression(
+      t.identifier(isHydrateRoot ? '_$componentVNode' : '_$createComponent'),
+      [componentRef, propsExpr, childrenArg]
+    );
   }
 
   function transformForFineGrained(path, state) {
@@ -3066,6 +3291,7 @@ export default function whatBabelPlugin({ types: t }) {
           state.needsSetChecked = false;
           state.needsH = false;
           state.needsCreateComponent = false;
+          state.needsComponentVNode = false;
           state.needsFragment = false;
           state.needsIsland = false;
           state.needsDelegation = false;
@@ -3112,11 +3338,7 @@ export default function whatBabelPlugin({ types: t }) {
           for (const node of path.node.body) {
             if (t.isImportDeclaration(node)) {
               const source = node.source.value;
-              const isWhatSource =
-                source === 'what-framework' ||
-                source.startsWith('what-framework/') ||
-                source === 'what-core' ||
-                source.startsWith('what-core/');
+              const isWhatSource = isWhatModuleSource(source);
               const isReactiveSource =
                 isWhatSource ||
                 source.startsWith('./') ||
@@ -3285,6 +3507,11 @@ export default function whatBabelPlugin({ types: t }) {
               t.importSpecifier(t.identifier('_$createComponent'), t.identifier('_$createComponent'))
             );
           }
+          if (state.needsComponentVNode) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier('_$componentVNode'), t.identifier('_$componentVNode'))
+            );
+          }
           if (state.needsDelegation) {
             fgSpecifiers.push(
               t.importSpecifier(t.identifier('_$delegateEvents'), t.identifier('delegateEvents'))
@@ -3310,6 +3537,7 @@ export default function whatBabelPlugin({ types: t }) {
           }
 
           if (fgSpecifiers.length > 0) {
+            /** @type {any} */
             let existingRenderImport = null;
             for (const node of path.node.body) {
               if (t.isImportDeclaration(node) && (
@@ -3400,6 +3628,7 @@ export default function whatBabelPlugin({ types: t }) {
 }
 
 function addCoreImports(path, t, coreSpecifiers) {
+  /** @type {any} */
   let existingImport = null;
   for (const node of path.node.body) {
     if (t.isImportDeclaration(node) && (