@solidjs/babel-plugin 2.0.0-rc.3 → 2.0.0-rc.5

package/.turbo/turbo-build.log

@@ -7,4 +7,4 @@ src/shared/transform.ts -> src/ssr/element.ts -> src/shared/transform.ts
 src/shared/transform.ts -> src/universal/element.ts -> src/shared/transform.ts
 src/shared/transform.ts -> src/shared/component.ts -> src/shared/transform.ts
 src/shared/transform.ts -> src/shared/fragment.ts -> src/shared/transform.ts
-created index.js in 2.1s
+created index.js in 2.6s

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @solidjs/babel-plugin
 
+## 2.0.0-rc.5
+
+### Patch Changes
+
+- 320f1f5: Universal text is text (#3127). The DOM and SSR generators splice static
+  text into an HTML template that a parser later unescapes, so they escape
+  static values and keep JSX entities as written. The universal generator
+  hands strings straight to the host — `createTextNode`, `setProp` — with no
+  parser downstream, so the escaping rendered literally (`{"<b>"}` showed as
+  `&lt;b>`) and entities never decoded (`&lt;` showed as `&lt;`), leaving no
+  spelling that produced a literal `<` in static text under a custom
+  renderer. Universal-rendered element children now pass static values
+  through unescaped and decode JSX entities in text and string attributes,
+  matching what component children and fragment text always did. The flag
+  rides on the element, not the config, so `generate: "dynamic"` decides per
+  renderer. Applied to both compilers; the attribute half closed ten pinned
+  cross-mode parity divergences between them. Reported with the fix mapped
+  out by @antoinevanwel.
+- 5230666: Fix hydration ids drifting after a reactive lone spread (#3105). A lone spread now passes its accessor straight to `spread()` on the client — no `mergeProps`, no memo, no hydration id — matching the server's existing pass-through fast path. The runtime resolves a function props source inside its own tracking scopes.
+- e27dc29: `validate` now fails the compile instead of warning when a template's markup would be restructured by the browser's HTML parser (#3099). Once the validator fires the emitted positional walk is guaranteed not to match the browser-built DOM (crashed or silently misplaced bindings; desynced hydration under SSR), so warn-and-emit shipped certain breakage with the diagnostic buried in server logs. Errors now point at the offending JSX (code frame in Babel, line:col in the native compiler). `validate: false` remains the opt-out.
+
+## 2.0.0-rc.4
+
+### Patch Changes
+
+- 8d249c7: Patch-channel contract hardening from the stage-2 re-audit: ordinary `patchDriver` registrations unbind with their owner (entries no longer leak past unmount); merged transitions move their held-patch stash so no patch strands; the optimistic drain shares the normal drain's per-entry error isolation and boundary routing; accessor-bearing records are excluded at admission (scan-before-trust) and records that acquire accessors demote their patches to tracked effect fallbacks; writable projection arrays emit setter row ops at their fold-commit visibility moment; row-ops/slot registrations resolve chained backings to the ultimate owner; duplicate keys match occurrence-aware instead of first-wins; the production dev-token typo (`_DX_DEV_`) is fixed; `patchDriver: true` normalizes identically in Babel and the native loader, the option is typed in `TransformOptions`, and a `dom-patch` parity tier ratchets patch-mode output across both compilers (currently byte-identical on all fixtures).
+- b534733: Scope-wrap bare function children in hydratable mode. A function child (`<main>{() => <App/>}</main>`, including via the `children` attribute) is a deferred hole at runtime, but it never classified as `dynamic`, so neither generate reserved an id scope for it — its owner ids drifted across async retry passes on the server and desynced from the client (the #2900 hydration-id-parity class). Both compilers now treat syntactic function expressions as scope-eligible alongside dynamic values, emitting `_$scope(...)` in the ssr generate and around the matching insert accessor in the dom generate. The native compiler also unwraps TS casts in the allocate-ids predicate, matching Babel (fixes a scope-emission desync for `{call() as any}` children).
+
 ## 2.0.0-rc.3
 
 ### Minor Changes

package/index.js

@@ -2,8 +2,8 @@
 
 var SyntaxJSX = require('@babel/plugin-syntax-jsx');
 var t$2 = require('@babel/types');
-var helperModuleImports = require('@babel/helper-module-imports');
 var htmlEntities = require('html-entities');
+var helperModuleImports = require('@babel/helper-module-imports');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -478,6 +478,9 @@ 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;
+  // A function child is a deferred hole: whatever it returns renders inside
+  // the hole, so it can always mint hydratable content.
+  if (t__namespace.isFunction(node)) return true;
   if (t__namespace.isMemberExpression(node) || t__namespace.isOptionalMemberExpression(node)) {
     return !node.computed && t__namespace.isIdentifier(node.property, { name: "children" });
   }
@@ -493,6 +496,23 @@ function canChildSlotAllocateIds(node) {
   return node.isJSXExpressionContainer() && canReturnHydratableChild(node.node.expression);
 }
 
+// A syntactic function-expression hole (`{() => ...}` / `{function () {}}`,
+// TS casts unwrapped). Function children never classify as `dynamic` — the
+// literal reads nothing at template time — yet at runtime they are deferred
+// holes exactly like call-shaped values, so the scope gates treat them as
+// scope-eligible alongside `dynamic` (solidjs/solid#3068 follow-up).
+function isFunctionShapedHole(node) {
+  if (!node.isJSXExpressionContainer()) return false;
+  let expression = node.node.expression;
+  while (
+  t__namespace.isTSNonNullExpression(expression) ||
+  t__namespace.isTSAsExpression(expression) ||
+  t__namespace.isTSSatisfiesExpression(expression))
+
+  expression = expression.expression;
+  return t__namespace.isFunction(expression);
+}
+
 function wrappedByText(list, startIndex) {
   let index = startIndex,
     wrapped;
@@ -2408,6 +2428,8 @@ config)
         if (!transformed) return memo;
         transformed.allocatesIds =
         config.hydratable && canChildSlotAllocateIds(child);
+        transformed.functionHole =
+        isFunctionShapedHole(child);
         const i = memo.length;
         if (transformed.text && i && memo[i - 1].text) {
           memo[i - 1].template =
@@ -2493,7 +2515,12 @@ config)
       // 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) {
+      // Function children never classify as dynamic but are deferred holes
+      // all the same, so they take the scope too.
+      if (
+      child.allocatesIds && (
+      child.dynamic || child.functionHole))
+      {
         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.
@@ -2698,7 +2725,6 @@ attributes,
   const filteredAttributes = [];
   const spreadArgs = [];
   let runningObject = [];
-  let dynamicSpread = false;
   attributes.forEach((attribute) => {
     const node = attribute.node;
     const key =
@@ -2717,10 +2743,9 @@ attributes,
         runningObject = [];
       }
 
-      const s =
-      isDynamic(attribute.get("argument"), {
+      const s = isDynamic(attribute.get("argument"), {
         checkMember: true
-      }) && (dynamicSpread = true) ?
+      }) ?
       inlineCallExpression(node.argument) :
       node.argument;
 
@@ -2769,8 +2794,12 @@ attributes,
     spreadArgs.push(t$1.objectExpression(runningObject));
   }
 
+  // A lone spread — reactive included — passes straight through: spread()
+  // resolves a function source inside its own tracking scopes, and merging
+  // one source would mint a memo that consumes a hydration id the SSR fast
+  // path never allocates (#3105).
   const props =
-  spreadArgs.length === 1 && !dynamicSpread ?
+  spreadArgs.length === 1 ?
   spreadArgs[0] :
   t$1.callExpression(registerImportMethod(path, "mergeProps"), spreadArgs);
 
@@ -3064,7 +3093,11 @@ function registerTemplate(path, results) {
           templateWithClosingTags: results.templateWithClosingTags,
           isImportNode: results.isImportNode,
           isWrapped: results.isWrapped,
-          renderer: "dom"
+          renderer: "dom",
+          // templates dedupe on markup, so the FIRST site carries the blame
+          // for a validate failure (#3099) — good enough: every site with
+          // this markup has the same problem
+          path
         });
       }
     }
@@ -4270,9 +4303,11 @@ results,
       // 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.
+      // Keyed off `dynamic` so both generates decide identically. Function
+      // children never classify as dynamic but are deferred holes all the
+      // same, so they take the scope too.
       let expr = child.exprs[0];
-      if (allocatesIds && child.dynamic) {
+      if (allocatesIds && (child.dynamic || isFunctionShapedHole(node))) {
         expr = t.callExpression(registerImportMethod(path, "scope"), [expr]);
       }
 
@@ -4326,7 +4361,7 @@ path,
         // 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) {
+        if (child.exprs.length && allocatesIds && (child.dynamic || isFunctionShapedHole(path))) {
           child.exprs[0] = t.callExpression(registerImportMethod(path, "scope"), [
           child.exprs[0]]
           );
@@ -4812,7 +4847,15 @@ results)
         t__namespace.jsxExpressionContainer(value || t__namespace.booleanLiteral(true));
       }
     } else {
-      addStaticAttr(attribute, results, initProps, elem, key, value, hasSpread);
+      addStaticAttr(
+        attribute,
+        results,
+        initProps,
+        elem,
+        key,
+        decodedAttrValue(value),
+        hasSpread
+      );
     }
   });
   if (spreadExpr) results.exprs.push(spreadExpr);
@@ -4822,6 +4865,18 @@ results)
   return initProps;
 }
 
+// A JSX string attribute prints its `extra.raw` — the source text, entities
+// included — so `normal="Search…"` reached the host's setProp as the
+// six raw characters (#3127, same class as text children). The parser
+// already decoded the entities into `.value` (that decoded form is what the
+// DOM generator's template parser produces and what component props receive);
+// rebuild the literal so the host gets the decoded string. Only for the
+// attribute's own StringLiteral: an expression container's string is a JS
+// string, where `…` is six literal characters by JS semantics.
+function decodedAttrValue(value) {
+  return t__namespace.isStringLiteral(value) ? t__namespace.stringLiteral(value.value) : value;
+}
+
 function addStaticAttr(
 path,
 results,
@@ -4864,8 +4919,11 @@ value,
 function transformChildren(path, results) {
   const filteredChildren = filterChildren(path.get("children")),
     multi = checkLength(filteredChildren),
-    childNodes = filteredChildren.
-    map((path) => transformNode(path)).
+    childNodes = filteredChildren
+    // `universal: true`: this text feeds the host's createTextNode, so the
+    // shared text branch must not HTML-escape it and must decode entities
+    // (#3127) — element-scoped because dynamic mode mixes renderers.
+    .map((path) => transformNode(path, { universal: true })).
     reduce((memo, child) => {
       if (!child) return memo;
       const i = memo.length;
@@ -5032,7 +5090,7 @@ attributes,
             t__namespace.stringLiteral(key),
             isContainer ?
             node.value.expression :
-            node.value || t__namespace.booleanLiteral(true)
+            decodedAttrValue(node.value) || t__namespace.booleanLiteral(true)
           )
         );
       }
@@ -5766,11 +5824,23 @@ info = {})
   t__namespace.isJSXText(node) ||
   (staticValue = getStaticExpression(path)) !== false)
   {
+    // Universal text is text (#3127): the DOM and SSR generators splice this
+    // string into an HTML template that a parser later unescapes, so static
+    // values are escaped and JSXText keeps its source entities. Universal
+    // text goes straight to the host's `createTextNode` with no parser
+    // downstream — what is written here is what renders — so static values
+    // pass through unescaped and JSX entities decode, exactly as text
+    // reaching a component child already did (component.ts, fragment.ts).
+    // `info.universal` marks children of a universal-rendered element, which
+    // in `generate: "dynamic"` is a per-element fact, not a config-wide one.
+    const universal = info.universal || config.generate === "universal";
     const text =
     staticValue !== undefined ?
-    info.doNotEscape ?
+    info.doNotEscape || universal ?
     String(staticValue) :
     escapeHTML(String(staticValue)) :
+    universal ?
+    htmlEntities.decode(trimWhitespace(node.extra?.raw ?? "")) :
     trimWhitespace(node.extra?.raw ?? "");
     if (!text.length) return null;
     const results = {
@@ -14445,13 +14515,22 @@ var postprocess = (path, state) => {
         if (typeof html === "string") {
           const result = isInvalidMarkup(html);
           if (result) {
+            // A compile ERROR, not a warning (#3099): once the validator has
+            // fired, the emitted template is guaranteed not to match its own
+            // positional walk — the browser rebuilds the DOM, and the walk
+            // binds against nodes that moved (crash or silent wrong-node
+            // bindings; under SSR the restructuring desyncs hydration too).
+            // Warn-and-emit put this diagnostic in server stdout while the
+            // browser failed with an unrelated-looking runtime crash. The
+            // error throws from the template's registration site, so
+            // bundlers surface it at the right file and line. `validate:
+            // false` remains the opt-out.
             const message =
-            "\nThe HTML provided is malformed and will yield unexpected output when evaluated by a browser.\n";
-            console.warn(message);
-            console.warn("User HTML:\n", result.html);
-            console.warn("Browser HTML:\n", result.browser);
-            console.warn("Original HTML:\n", html);
-            // throw path.buildCodeFrameError();
+            "The HTML provided is malformed and will yield unexpected output when evaluated by a browser.\n" +
+            `User HTML:\n ${result.html}\n` +
+            `Browser HTML:\n ${result.browser}\n` +
+            `Original HTML:\n ${html}`;
+            throw (template.path ?? path).buildCodeFrameError(message);
           }
         }
       }
@@ -14526,6 +14605,9 @@ const config = {
 var preprocess = (path, state) => {
   const file = path.hub.file;
   const merged = file.metadata.config = Object.assign({}, config, state.opts);
+  // Boolean opt-in parity with the native loader: `patchDriver: true` means
+  // the default import name (downstream code uses the value AS the name).
+  if (merged.patchDriver === true) merged.patchDriver = "patchDriver";
   const lib = merged.requireImportSource;
   if (lib) {
     const comments = file.ast.comments ?? [];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/babel-plugin",
   "description": "Babel compiler plugin for Solid templates",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.5",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {