@dom-expressions/babel-plugin-jsx 0.50.0-next.15 → 0.50.0-next.17

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # babel-plugin-jsx-dom-expressions
 
+## 0.50.0-next.17
+
+### Patch Changes
+
+- 203c9d5: Fix two option-handling bugs surfaced by the compiler parity sweep:
+  - `memoWrapper: false` no longer crashes when a conditional or logical expression is transformed (`transformCondition` registered an import under the falsy wrapper name). Conditions now compile memo-less: hoisted conditions keep a plain `var _c$ = () => !!cond` thunk and inline conditions collapse to an immediately-invoked thunk.
+  - `inlineStyles: false` no longer silently drops a literal `style` on a child element whose position otherwise allocates no element reference (e.g. `<svg><rect style="fill:red"/><g/></svg>` lost the style entirely). `detectExpressions` now accounts for the style-to-IIFE rewrite, so the element gets a reference and the style compiles to the expected effect.
+
+  The `effectWrapper`/`memoWrapper` config types now admit `false` alongside the import-name string.
+
+- bb7b2fd: Fix omitLastClosingTag corrupting templates when per-slot insertion markers follow the last static element. An element trailed by two or more dynamic slots now keeps its closing tag, so the trailing `<!>` placeholders parse as its siblings instead of being swallowed as children of the still-open element (which crashed the template walk with "Cannot read properties of null (reading 'nextSibling')").
+- 4686501: Fix hydration id drift for spread elements with dynamic children. The ssr generate's spread-element path (`ssrElement`) never applied the hole id `scope()` wrap that `transformChildren` applies on the template path — while the dom generate scope-wraps the matching insert accessor regardless of spread. For a shape like `<a {...props}>{children()}</a>`, the client reserved one hydration id for the hole and the server did not, so every hydration key allocated after the hole drifted and the following siblings were left unclaimed (duplicated DOM, "unclaimed server-rendered node" warnings). `createElement` now wraps dynamic, id-allocating children holes in `scope()` exactly like the template path.
+- 241ff76: Fix a spread element with dynamic props being left unclaimed on hydration. `mergeProps` with a function source creates a memo, which consumes a hydration child id. The ssr generate evaluated `mergeProps(...)` in `ssrElement`'s argument position — before the element's own hydration key was allocated — while the client claims the element (`getNextElement`) before applying the spread. The element's id shifted by one on the server and the client re-created it instead of claiming (later siblings re-synced, hiding the drift; a `<title>` rendered this way duplicated on every hydration). The ssr generate now defers the merge behind a thunk when hydratable and `ssrElement` allocates the hydration key before resolving function props, matching the client's allocation order.
+
+## 0.50.0-next.16
+
+### Patch Changes
+
+- 04849df: Preserve JS value semantics for wrapped `&&` conditions (#532). The dom generate's condition wrap used to emit `memo(() => !!left)() && right`, collapsing every falsy left value to `false` — visibly wrong for component props (`undefined` became `false`, breaking `== null` checks) and a hydration mismatch against the untransformed server output (`{0 && <div/>}` rendered "0" on the server, nothing on the client). `left && right` is exactly `left ? right : left`, so the wrap now emits `memo(() => !!left)() ? right : left`: branching still keys off the memoized truthiness (truthy-value churn never re-creates the right side) while the alternate returns the raw left, matching the server for free. Statically boolean lefts (comparisons, `!x`) keep the plain `memo(() => left)() && right` form — the memo's value is the expression's value, so it's already exact with no second evaluation. Ported identically to the Rust jsx-compiler.
+- 248f784: fix(compiler): key the hole `scope()` wrap off the transform's `dynamic` flag instead of the transformed expression shape. The dom generate simplifies `{sig()}` to the bare getter `sig`, which the old `isDeferredChildSlotExpression` predicate didn't count as deferred while the matching ssr arrow was — so the server scope-wrapped the hole and the client didn't, shifting every sibling hydration id after it. Bare getters are re-wrapped as `() => sig()` on the dom side so `scope()` doesn't tag the user's function.
+- c2a542b: Fix hydration key mismatches when async holes defer past eager siblings
+  (solidjs/solid#2801 bug 2). Dynamic element children that can allocate
+  hydration ids (conditionals, component-children access, call expressions)
+  are now compiled with their own id scope on both generates: the dom and ssr
+  generates wrap the hole expression in a new `scope()` runtime helper using a
+  shared predicate, so marking cannot desync.
+
+  On the client, `scope(fn)` tags the accessor and `insert()` makes the outer
+  render effect non-transparent (its own id scope) for tagged accessors; the
+  inner unwrapping effect stays transparent so content ids keep a fixed depth.
+  On the server, `scope` (framework-provided via rxcore as `ssrScope`) reserves
+  one id slot at registration and evaluates the hole — including async retries
+  — under that reserved id with a zeroed child counter, so retry timing can no
+  longer shift sibling ids. The ssr generate's `orderedInsert` sibling
+  thunk-wrapping is removed; it is superseded by hole scopes.
+
+  Hole content ids gain one nesting level (e.g. `_hk=10` instead of `_hk=1`)
+  identically on both sides. rxcore implementations must provide an `ssrScope`
+  export and honor a `scope: true` effect option (mapped to a non-transparent
+  render effect).
+
+- bb7470e: Give every dynamic child slot its own insertion marker when a parent hosts more than one (solidjs/solid#2830). Adjacent expression slots used to share a marker (`null` at the tail, a shared following sibling, or one reused `<!>` between text), which collapsed them into a single `$$SLOT` ownership region: a node migrating between adjacent slots was destroyed by the slot it left, arrays exchanging members could throw `NotFoundError`, and a slot emptied via `[]` refilled at the wrong position. Slots in multi-slot parents now ride the immediately following static sibling or get a dedicated `<!>` placeholder — the same per-slot geometry hydratable output has always produced, which is why these shapes already worked after hydration. Zero runtime changes; single-slot parents compile byte-identically to before.
+- 668264f: Universal JSX now passes compile-time static host props to `createElement(tag, staticProps)` so custom renderers can configure nodes before children are inserted. Dynamic props and elements with spreads continue to use the existing `setProp` / `spread` paths.
+
 ## 0.50.0-next.15
 
 ### Patch Changes

package/index.js

@@ -444,6 +444,34 @@ function toEventName(name) {
   return name.slice(2).toLowerCase();
 }
 
+// === Hole-scope predicates (shared by dom + ssr generates) ===
+//
+// A dynamic element child ("hole") whose evaluation can allocate hydration
+// ids (create hydratable elements, run components, register memos) gets its
+// own owner scope so server and client allocate identical ids regardless of
+// WHEN the hole evaluates (eager, deferred by async, or re-run). Both
+// generates must agree exactly on which holes qualify, so the predicates
+// live here.
+
+function canReturnHydratableChild(node) {
+  if (t__namespace.isTSNonNullExpression(node) || t__namespace.isTSAsExpression(node) || t__namespace.isTSSatisfiesExpression(node))
+  return canReturnHydratableChild(node.expression);
+  if (t__namespace.isJSXElement(node) || t__namespace.isJSXFragment(node) || t__namespace.isCallExpression(node)) return true;
+  if (t__namespace.isMemberExpression(node) || t__namespace.isOptionalMemberExpression(node)) {
+    return !node.computed && t__namespace.isIdentifier(node.property, { name: "children" });
+  }
+  if (t__namespace.isConditionalExpression(node)) {
+    return canReturnHydratableChild(node.consequent) || canReturnHydratableChild(node.alternate);
+  }
+  return t__namespace.isLogicalExpression(node) && canReturnHydratableChild(node.right);
+}
+
+function canChildSlotAllocateIds(node) {
+  if (node.isJSXElement() || node.isJSXFragment()) return true;
+  if (node.isJSXSpreadChild()) return true;
+  return node.isJSXExpressionContainer() && canReturnHydratableChild(node.node.expression);
+}
+
 function wrappedByText(list, startIndex) {
   let index = startIndex,
     wrapped;
@@ -467,6 +495,30 @@ function wrappedByText(list, startIndex) {
   return false;
 }
 
+const BOOLEAN_BINARY_OPS = new Set([
+"==",
+"!=",
+"===",
+"!==",
+"<",
+">",
+"<=",
+">=",
+"instanceof",
+"in"]
+);
+
+// Statically guaranteed to evaluate to a boolean: the memoized value IS the
+// expression's value (`false` is the only falsy boolean), so no `!!` coercion
+// is needed and the `&&` wrap can keep the logical form instead of the
+// value-preserving ternary (no second evaluation of the left).
+function isBooleanExpression(node) {
+  return (
+    t__namespace.isBinaryExpression(node) && BOOLEAN_BINARY_OPS.has(node.operator) ||
+    t__namespace.isUnaryExpression(node) && node.operator === "!");
+
+}
+
 
 
 
@@ -481,8 +533,12 @@ path,
 inline)
 {
   const config = getConfig(path);
-  const expr = path.node;
-  const memo = registerImportMethod(path, config.memoWrapper, undefined);
+  let expr = path.node;
+  // memoWrapper: false compiles memo-less — inline memos collapse to plain
+  // thunks and the hoisted declaration keeps its bare arrow.
+  const memo = config.memoWrapper ?
+  registerImportMethod(path, config.memoWrapper, undefined) :
+  undefined;
   let dTest,
     cond,
     id;
@@ -497,10 +553,12 @@ inline)
     dTest = isDynamic(path.get("test"), { checkMember: true });
     if (dTest) {
       cond = expr.test;
-      if (!t__namespace.isBinaryExpression(cond))
+      if (!isBooleanExpression(cond))
       cond = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", cond, true), true);
       id = inline ?
+      memo ?
       t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)]) :
+      t__namespace.arrowFunctionExpression([], cond) :
       path.scope.generateUidIdentifier("_c$");
       expr.test = t__namespace.callExpression(id, []);
       if (t__namespace.isConditionalExpression(expr.consequent) || t__namespace.isLogicalExpression(expr.consequent)) {
@@ -523,12 +581,32 @@ inline)
     }));
     if (dTest) {
       cond = nextPath.node.left;
-      if (!t__namespace.isBinaryExpression(cond))
-      cond = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", cond, true), true);
+      // `left && right` is exactly `left ? right : left`. Branch on the
+      // memoized truthiness (so truthy-value churn never re-creates the right
+      // side) but return the raw left in the alternate so the expression keeps
+      // JS value semantics — `0`/`""`/`undefined` flow through instead of
+      // collapsing to `false`, matching the untransformed ssr output (#532).
+      // Statically boolean lefts skip the ternary: the memo's value is the
+      // expression's value, so the logical form is already exact and the left
+      // never evaluates twice.
+      const boolLeft = isBooleanExpression(cond);
+      if (!boolLeft) cond = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", cond, true), true);
       id = inline ?
+      memo ?
       t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)]) :
+      t__namespace.arrowFunctionExpression([], cond) :
       path.scope.generateUidIdentifier("_c$");
-      nextPath.node.left = t__namespace.callExpression(id, []);
+      if (boolLeft) {
+        nextPath.node.left = t__namespace.callExpression(id, []);
+      } else {
+        const alternate = t__namespace.cloneNode(nextPath.node.left, true);
+        nextPath.replaceWith(
+          t__namespace.conditionalExpression(t__namespace.callExpression(id, []), nextPath.node.right, alternate)
+        );
+        // replaceWith swaps the node out of the tree; when the `&&` was the
+        // top-level expression the local reference is stale.
+        expr = path.node;
+      }
     }
   }
   if (dTest && !inline && cond && id) {
@@ -536,7 +614,7 @@ inline)
     t__namespace.variableDeclaration("var", [
     t__namespace.variableDeclarator(
       id,
-      config.memoWrapper ?
+      memo ?
       t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)]) :
       t__namespace.arrowFunctionExpression([], cond)
     )]
@@ -2136,9 +2214,35 @@ results)
   results.hasHydratableEvent = results.hasHydratableEvent || hasHydratableEvent;
 }
 
+// Children that compile to `insert()` calls and contribute no markup of their
+// own: dynamic expression containers, components, and spread children. Mirrors
+// the `!child.id && child.exprs.length` count in transformChildren.
+function countDynamicSlots(children) {
+  let count = 0;
+  for (const child of children) {
+    const node = child.node;
+    if (
+    t$1.isJSXText(node) ||
+    t$1.isJSXExpressionContainer(node) &&
+    getStaticExpression(child) !== false ||
+    t$1.isJSXElement(node) && !isComponent(getTagName(node)))
+
+    continue;
+    count++;
+  }
+  return count;
+}
+
 function findLastElement(children, hydratable) {
   let lastElement = -1,
     tagName;
+  // Counterpart of transformChildren's per-slot markers: with two or more
+  // dynamic slots under this parent (CSR only), a trailing dynamic child
+  // appends a dedicated `<!>` placeholder to the template, so an earlier
+  // element may not omit its closing tag — the still-open element would
+  // swallow the placeholder as a child while the generated
+  // firstChild/nextSibling walk expects it as a sibling.
+  const perSlotMarkers = !hydratable && countDynamicSlots(children) > 1;
   for (let i = children.length - 1; i >= 0; i--) {
     const node = children[i].node;
     if (
@@ -2152,6 +2256,9 @@ function findLastElement(children, hydratable) {
       lastElement = i;
       break;
     }
+    // This trailing dynamic slot will emit a per-slot placeholder after any
+    // preceding element's markup: nothing here may omit its closing tag.
+    if (perSlotMarkers) break;
   }
   return lastElement;
 }
@@ -2163,7 +2270,6 @@ config)
 {
   let tempPath = results.id && results.id.name || "",
     tagName = getTagName(path.node),
-    nextPlaceholder,
     childPostExprs = [],
     i = 0;
   const filteredChildren = filterChildren(path.get("children")),
@@ -2181,6 +2287,8 @@ config)
           skipId: !results.id || !detectExpressions(filteredChildren, index, config)
         });
         if (!transformed) return memo;
+        transformed.allocatesIds =
+        config.hydratable && canChildSlotAllocateIds(child);
         const i = memo.length;
         if (transformed.text && i && memo[i - 1].text) {
           memo[i - 1].template =
@@ -2193,6 +2301,13 @@ config)
       []
     );
 
+  // Dynamic slots under this parent (children compiled to `insert()` calls).
+  // With two or more, slots may not share an insertion marker: the marker is
+  // also the runtime's ownership tag ($$SLOT), and adoption only re-tags when
+  // the marker is truthy — shared or null markers let one slot's cleanup
+  // destroy a node that migrated to its neighbor (solidjs/solid#2830).
+  const dynamicSlots = childNodes.reduce((n, c) => c && !c.id && c.exprs.length ? n + 1 : n, 0);
+
   childNodes.forEach((child, index) => {
     if (!child) return;
     if (child.tagName && child.renderer !== "dom") {
@@ -2245,23 +2360,47 @@ config)
       results.isImportNode = results.isImportNode || child.isImportNode;
       results.isWrapped = results.isWrapped || child.isWrapped;
       tempPath = child.id.name;
-      nextPlaceholder = null;
       i++;
     } else if (child.exprs.length) {
       let insert = registerImportMethod(path, "insert", getRendererConfig(path, "dom").moduleName);
       const multi = checkLength(filteredChildren),
-        markers = config.hydratable && multi;
+        markers = config.hydratable && multi,
+        // CSR counterpart of the hydratable per-slot markers: when this parent
+        // hosts multiple dynamic slots, each gets its own truthy marker — the
+        // immediately following sibling when it has a reference, otherwise a
+        // dedicated `<!>` placeholder.
+        perSlot = !markers && dynamicSlots > 1;
+      // Mirror of the ssr generate's `scope()` wrap: deferred holes that can
+      // allocate hydration ids get their own owner scope (insert makes the
+      // outer render effect non-transparent for tagged accessors). Keyed off
+      // `dynamic` so both generates decide identically for the same source.
+      if (child.allocatesIds && child.dynamic) {
+        let expr = child.exprs[0];
+        // The shared transform simplifies `{sig()}` to the bare getter `sig`;
+        // rewrap so tagging the scope doesn't mutate the user's function.
+        if (!t$1.isFunction(expr) && !(t$1.isCallExpression(expr) && t$1.isFunction(expr.callee))) {
+          expr = t$1.arrowFunctionExpression([], t$1.callExpression(expr, []));
+        }
+        child.exprs[0] = t$1.callExpression(
+          registerImportMethod(path, "scope", getRendererConfig(path, "dom").moduleName),
+          [expr]
+        );
+      }
       // boxed by textNodes
-      if (markers || wrappedByText(childNodes, index)) {
+      if (markers || perSlot || wrappedByText(childNodes, index)) {
         let exprId;
         let contentId;
         if (markers) tempPath = createPlaceholder(path, results, tempPath, i++, "$")[0].name;
-        if (nextPlaceholder) {
-          exprId = nextPlaceholder;
-        } else {
+        // Ride the immediately following sibling's reference when it exists —
+        // unless the slot is boxed by text, where a placeholder is structurally
+        // required to keep the surrounding template text nodes from merging.
+        if (perSlot && !wrappedByText(childNodes, index)) {
+          exprId = childNodes[index + 1] && childNodes[index + 1].id || undefined;
+        }
+        if (!exprId) {
           [exprId, contentId] = createPlaceholder(path, results, tempPath, i++, markers ? "/" : "");
+          tempPath = exprId.name;
         }
-        if (!markers) nextPlaceholder = exprId;
         const args = contentId ?
         [
         results.id,
@@ -2275,7 +2414,6 @@ config)
         exprId];
 
         results.exprs.push(t$1.expressionStatement(t$1.callExpression(insert, args)));
-        tempPath = exprId.name;
       } else if (multi) {
         results.exprs.push(
           t$1.expressionStatement(
@@ -2293,7 +2431,7 @@ config)
           )
         );
       }
-    } else nextPlaceholder = null;
+    }
   });
   results.postExprs.unshift(...childPostExprs);
 }
@@ -2382,6 +2520,15 @@ config)
         t$1.isJSXSpreadAttribute(attr) ||
         t$1.isJSXIdentifier(attr.name) &&
         ["textContent", "innerHTML", "innerText"].includes(attr.name.name) ||
+        // inlineStyles: false rewrites every style value into an IIFE
+        // expression, so even literal styles compile to dynamic
+        // bindings that need an element reference.
+        !config.inlineStyles &&
+        t$1.isJSXIdentifier(attr.name) &&
+        attr.name.name === "style" && (
+        t$1.isStringLiteral(attr.value) ||
+        t$1.isJSXExpressionContainer(attr.value) &&
+        !t$1.isJSXEmptyExpression(attr.value.expression)) ||
         t$1.isJSXNamespacedName(attr.name) && attr.name.namespace.name === "prop" ||
         t$1.isJSXExpressionContainer(attr.value) &&
         !(
@@ -2653,6 +2800,8 @@ function wrapDynamics$1(path, dynamics) {
   if (!dynamics.length) return;
   const config = getConfig(path);
 
+  // dynamics are only queued when effectWrapper is configured (element.ts
+  // guards every push), so the name is always a string here
   const effectWrapperId = registerImportMethod(path, config.effectWrapper, undefined);
 
   if (dynamics.length === 1) {
@@ -2782,7 +2931,6 @@ const t = t__namespace;
 
 
 
-
 
 
 function appendToTemplate(template, value) {
@@ -2961,8 +3109,7 @@ info = {})
       hoistExpression(
         path,
         results,
-        t.callExpression(registerImportMethod(path, "ssrHydrationKey"), []),
-        { }
+        t.callExpression(registerImportMethod(path, "ssrHydrationKey"), [])
       )
     );
   }
@@ -3505,29 +3652,6 @@ quasis)
   });
 }
 
-function canReturnHydratableChild(node) {
-  if (t.isTSNonNullExpression(node) || t.isTSAsExpression(node) || t.isTSSatisfiesExpression(node))
-  return canReturnHydratableChild(node.expression);
-  if (t.isJSXElement(node) || t.isJSXFragment(node) || t.isCallExpression(node)) return true;
-  if (t.isMemberExpression(node) || t.isOptionalMemberExpression(node)) {
-    return !node.computed && t.isIdentifier(node.property, { name: "children" });
-  }
-  if (t.isConditionalExpression(node)) {
-    return canReturnHydratableChild(node.consequent) || canReturnHydratableChild(node.alternate);
-  }
-  return t.isLogicalExpression(node) && canReturnHydratableChild(node.right);
-}
-
-function canChildSlotAllocateIds(node) {
-  if (node.isJSXElement() || node.isJSXFragment()) return true;
-  if (node.isJSXSpreadChild()) return true;
-  return node.isJSXExpressionContainer() && canReturnHydratableChild(node.node.expression);
-}
-
-function isDeferredChildSlotExpression(node) {
-  return t.isFunction(node) || t.isCallExpression(node) && t.isFunction(node.callee);
-}
-
 function transformChildren$1(
 path,
 results,
@@ -3538,14 +3662,13 @@ results,
   const filteredChildren = filterChildren(path.get("children"));
   const multi = checkLength(filteredChildren),
     markers = hydratable && multi;
-  let orderedInsert = false;
   filteredChildren.forEach((node) => {
     if (node.isJSXFragment()) {
       throw new Error(
         `Fragments can only be used top level in JSX. Not used under a <${tagName}>.`
       );
     }
-    const allocatesIds = canChildSlotAllocateIds(node);
+    const allocatesIds = hydratable && canChildSlotAllocateIds(node);
     const child = transformNode(node, { doNotEscape, parentResults: results });
     if (!child) return;
     appendToTemplate(results.template, child.template);
@@ -3570,14 +3693,14 @@ results,
       _groupableTextContent ?
       { group: true } :
       undefined;
-      const expr =
-      hydratable &&
-      orderedInsert &&
-      allocatesIds &&
-      !isDeferredChildSlotExpression(child.exprs[0]) ?
-      t.arrowFunctionExpression([], child.exprs[0]) :
-      child.exprs[0];
-      if (hydratable && allocatesIds && isDeferredChildSlotExpression(expr)) orderedInsert = true;
+      // Deferred holes that can allocate hydration ids evaluate under their
+      // own owner scope so retry timing can't skew sibling ids (mirrors the
+      // dom generate's `scope()` wrap around the matching insert accessor).
+      // Keyed off `dynamic` so both generates decide identically.
+      let expr = child.exprs[0];
+      if (allocatesIds && child.dynamic) {
+        expr = t.callExpression(registerImportMethod(path, "scope"), [expr]);
+      }
 
       // boxed by textNodes
       if (markers && !child.spreadElement) {
@@ -3615,12 +3738,25 @@ path,
             `Fragments can only be used top level in JSX. Not used under a <${tagName}>.`
           );
         }
+        const allocatesIds = hydratable && canChildSlotAllocateIds(path);
         const child = transformNode(path);
         if (!child) return memo;
         if (markers && child.exprs.length && !child.spreadElement)
         memo.push(t.stringLiteral("<!--$-->"));
         if (child.exprs.length && !doNotEscape && !child.spreadElement)
         child.exprs[0] = escapeExpression(path, child.exprs[0]);
+        // Deferred holes that can allocate hydration ids evaluate under their
+        // own owner scope, exactly like `transformChildren` does for the
+        // template path. Spread elements render through `ssrElement` instead
+        // of a template, but their children holes still need the wrap — the
+        // dom generate scope()s the matching insert accessor regardless of
+        // spread, so skipping it here desyncs every hydration id that follows
+        // the hole.
+        if (child.exprs.length && allocatesIds && child.dynamic) {
+          child.exprs[0] = t.callExpression(registerImportMethod(path, "scope"), [
+          child.exprs[0]]
+          );
+        }
         memo.push(
           getCreateTemplate(config, path, child)(path, child, false)
         );
@@ -3689,7 +3825,19 @@ path,
     if (runningObject.length || !props.length) props.push(t.objectExpression(runningObject));
 
     if (props.length > 1 || dynamicSpread) {
-      props = [t.callExpression(registerImportMethod(path, "mergeProps"), props)];
+      let merged = t.callExpression(
+        registerImportMethod(path, "mergeProps"),
+        props
+      );
+      // Defer the merge behind a thunk when hydratable: `mergeProps` with a
+      // function source creates a memo, which consumes a hydration child id.
+      // Evaluated in argument position it would run before `ssrElement`
+      // allocates the element's own id, while the client claims the element
+      // (getNextElement) before applying the spread — shifting the element's
+      // id by one and leaving it unclaimed. `ssrElement` resolves function
+      // props after allocating the hydration key, matching the client order.
+      if (hydratable) merged = t.arrowFunctionExpression([], merged);
+      props = [merged];
     }
   }
 
@@ -3751,8 +3899,9 @@ wrap)
       const inner = result.wontEscape ?
       result.exprs[0] :
       wrapFragmentChildWithEscape(path, result.exprs[0]);
-      return t__namespace.callExpression(registerImportMethod(path, getConfig(path).memoWrapper, undefined), [
-      inner]
+      return t__namespace.callExpression(
+        registerImportMethod(path, getConfig(path).memoWrapper, undefined),
+        [inner]
       );
     }
     return result.exprs[0];
@@ -3905,6 +4054,9 @@ info = {})
       renderer: "universal"
     };
 
+  const initProps = transformAttributes(path, results);
+  const createElementArgs = [t__namespace.stringLiteral(tagName)];
+  if (initProps.length) createElementArgs.push(t__namespace.objectExpression(initProps));
   results.declarations.push(
     t__namespace.variableDeclarator(
       results.id,
@@ -3914,12 +4066,10 @@ info = {})
           "createElement",
           getRendererConfig(path, "universal").moduleName
         ),
-        [t__namespace.stringLiteral(tagName)]
+        createElementArgs
       )
     )
   );
-
-  transformAttributes(path, results);
   transformChildren(path, results);
 
   return results;
@@ -3931,12 +4081,14 @@ results)
 {
   let children, spreadExpr;
   let attributes = path.get("openingElement").get("attributes");
+  const initProps = [];
   const elem = results.id,
     hasChildren = path.node.children.length > 0,
-    config = getConfig(path);
+    config = getConfig(path),
+    hasSpread = attributes.some((attribute) => t__namespace.isJSXSpreadAttribute(attribute.node));
 
   // preprocess spreads
-  if (attributes.some((attribute) => t__namespace.isJSXSpreadAttribute(attribute.node))) {
+  if (hasSpread) {
     [attributes, spreadExpr] = processSpreads(path, attributes, {
       elem,
       hasChildren,
@@ -4065,20 +4217,47 @@ results)
       {
         results.dynamics.push({ elem, key, value: value.expression });
       } else {
-        results.exprs.push(
-          t__namespace.expressionStatement(setAttr(attribute, elem, key, value.expression))
+        addStaticAttr(
+          attribute,
+          results,
+          initProps,
+          elem,
+          key,
+          value.expression,
+          hasSpread
         );
       }
     } else {
-      results.exprs.push(
-        t__namespace.expressionStatement(setAttr(attribute, elem, key, value))
-      );
+      addStaticAttr(attribute, results, initProps, elem, key, value, hasSpread);
     }
   });
   if (spreadExpr) results.exprs.push(spreadExpr);
   if (!hasChildren && children) {
     path.node.children.push(children);
   }
+  return initProps;
+}
+
+function addStaticAttr(
+path,
+results,
+initProps,
+elem,
+key,
+value,
+hasSpread)
+{
+  if (!value) value = t__namespace.booleanLiteral(true);
+  if (hasSpread) {
+    results.exprs.push(t__namespace.expressionStatement(setAttr(path, elem, key, value)));
+  } else {
+    initProps.push(
+      t__namespace.objectProperty(
+        t__namespace.isValidIdentifier(key) ? t__namespace.identifier(key) : t__namespace.stringLiteral(key),
+        value
+      )
+    );
+  }
 }
 
 function setAttr(
@@ -4349,6 +4528,8 @@ function wrapDynamics(path, dynamics) {
   if (!dynamics.length) return;
   const config = getConfig(path);
 
+  // dynamics are only queued when effectWrapper is configured (element.ts
+  // guards every push), so the name is always a string here
   const effectWrapperId = registerImportMethod(path, config.effectWrapper, undefined);
 
   if (dynamics.length === 1) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dom-expressions/babel-plugin-jsx",
   "description": "A JSX to DOM plugin that wraps expressions for fine grained change detection",
-  "version": "0.50.0-next.15",
+  "version": "0.50.0-next.17",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
     "@rollup/plugin-babel": "7.0.0",
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.28.0",
-    "@dom-expressions/runtime": "0.50.0-next.15"
+    "@dom-expressions/runtime": "0.50.0-next.17"
   },
   "gitHead": "eb463c653325e24824422cff6bfed0d35113ef33",
   "scripts": {