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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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

package/index.js

@@ -534,7 +534,11 @@ inline)
 {
   const config = getConfig(path);
   let expr = path.node;
-  const memo = registerImportMethod(path, config.memoWrapper, undefined);
+  // 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;
@@ -552,7 +556,9 @@ inline)
       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)) {
@@ -586,7 +592,9 @@ inline)
       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$");
       if (boolLeft) {
         nextPath.node.left = t__namespace.callExpression(id, []);
@@ -606,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)
     )]
@@ -2206,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 (
@@ -2222,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;
 }
@@ -2483,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) &&
         !(
@@ -2754,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) {
@@ -3690,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)
         );
@@ -3764,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];
     }
   }
 
@@ -3826,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];
@@ -4454,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.16",
+  "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.16"
+    "@dom-expressions/runtime": "0.50.0-next.17"
   },
   "gitHead": "eb463c653325e24824422cff6bfed0d35113ef33",
   "scripts": {