@solidjs/babel-plugin 2.0.0-rc.4 → 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.9s
+created index.js in 2.6s

package/CHANGELOG.md

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

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);
@@ -2725,7 +2725,6 @@ attributes,
   const filteredAttributes = [];
   const spreadArgs = [];
   let runningObject = [];
-  let dynamicSpread = false;
   attributes.forEach((attribute) => {
     const node = attribute.node;
     const key =
@@ -2744,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;
 
@@ -2796,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);
 
@@ -3091,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
         });
       }
     }
@@ -4841,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);
@@ -4851,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,
@@ -4893,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;
@@ -5061,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)
           )
         );
       }
@@ -5795,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 = {
@@ -14474,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);
           }
         }
       }

package/package.json

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