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

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # babel-plugin-jsx-dom-expressions
 
+## 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,7 +533,7 @@ path,
 inline)
 {
   const config = getConfig(path);
-  const expr = path.node;
+  let expr = path.node;
   const memo = registerImportMethod(path, config.memoWrapper, undefined);
   let dTest,
     cond,
@@ -497,7 +549,7 @@ 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 ?
       t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)]) :
@@ -523,12 +575,30 @@ 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 ?
       t__namespace.callExpression(memo, [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) {
@@ -2163,7 +2233,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 +2250,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 +2264,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 +2323,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 +2377,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 +2394,7 @@ config)
           )
         );
       }
-    } else nextPlaceholder = null;
+    }
   });
   results.postExprs.unshift(...childPostExprs);
 }
@@ -2782,7 +2883,6 @@ const t = t__namespace;
 
 
 
-
 
 
 function appendToTemplate(template, value) {
@@ -2961,8 +3061,7 @@ info = {})
       hoistExpression(
         path,
         results,
-        t.callExpression(registerImportMethod(path, "ssrHydrationKey"), []),
-        { }
+        t.callExpression(registerImportMethod(path, "ssrHydrationKey"), [])
       )
     );
   }
@@ -3505,29 +3604,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 +3614,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 +3645,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) {
@@ -3905,6 +3980,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 +3992,10 @@ info = {})
           "createElement",
           getRendererConfig(path, "universal").moduleName
         ),
-        [t__namespace.stringLiteral(tagName)]
+        createElementArgs
       )
     )
   );
-
-  transformAttributes(path, results);
   transformChildren(path, results);
 
   return results;
@@ -3931,12 +4007,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 +4143,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(

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.16",
   "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.16"
   },
   "gitHead": "eb463c653325e24824422cff6bfed0d35113ef33",
   "scripts": {