@solidjs/babel-plugin 2.0.0-rc.7 → 2.0.0-rc.8

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 2s
+created index.js in 2.7s

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @solidjs/babel-plugin
 
+## 2.0.0-rc.8
+
+### Patch Changes
+
+- 01ac18c: Compiler `componentNames` option: component owner labels that survive minification. With the flag on, DOM output carries the tag as written in source as a third `createComponent` argument — `<Home />` compiles to `createComponent(Home, props, "Home")`, `<Ui.Button />` to `"Ui.Button"`, `<this.Row />` to `"this.Row"` — and the dev and observe runtimes label the component's owner with it (`<Home>` in diagnostic `ownerPath`s, attribution chains, and the devtools `_component.name`), falling back to `Comp.name` as before. Until now an observe-tier production bundle reported hot scopes and holds under whatever the minifier left of the function name (`<Xt> › <Kn>`), and a `lazy()` or HMR wrapper hid the tag name even in dev. Off by default and byte-identical output when off; SSR (which inlines the call) and universal output never emit it; the production `createComponent` ignores the argument. Both compilers implement it in parity (shared fixtures, cross-mode ratchet). `@solidjs/vite-plugin` enables it for the dev and `observe` postures.
+- 7d985b6: Fix SSR XSS: strings yielded by flow-control memos rendered unescaped
+
+  `<Show when={s}>{s}</Show>`, `<For>{v => v}</For>`, `<Dynamic component={() => s} />`,
+  `<Switch>/<Match>`, boundary fallbacks and any component that returns a string through a
+  memo rendered that string raw on the server. The server flow controls return memos for
+  hydration-id alignment; `escape()` passed functions through by identity, and the resolver
+  appended whatever they later produced without escaping.
+
+  One rule now: `escape(x)` at a hole covers everything reachable from `x` — strings, array
+  items, and what a function yields when the resolver calls it (a deferred-escape wrapper).
+  Finished `{ t }` nodes pass through. `Loading` escapes its content the way it already
+  escaped its fallback. The compilers stop wrapping fragment / mixed component children in
+  `_$escape` (they are values; escaping them too double-escaped through
+  `<Comp>{props.children}</Comp>`), and a single-expression fragment at a hole keeps the
+  hole's wrap. Live-hole tags ride the wrapper and `$slot` survives the array copy, so
+  frames behave as before.
+
+- ab4c40c: Object-valued `style` / `class` bindings are read in the TRACKED half of their effect. `style()` and `className()` enumerate their object in the effect's untracked commit phase, so a proxy value — a store sub-object (`style={state.style}`, `class={row.classes}`), merged props, anything arriving through a spread — was identity-reactive only: in-place key mutations never re-applied, and every leaf read tripped `STRICT_READ_UNTRACKED` in dev. Both compilers now wrap the compute value of a non-inline `style={expr}` / `class={expr}` in a new compiler primitive, `readShallow()`, and `spread()` applies it to those two keys as it copies. `readShallow` is an identity passthrough for strings, plain objects and proxy-free arrays (a fresh literal is already the compute's own — the common case pays a `typeof`); a proxy is copied with one `ownKeys` trap (its own trap keeps the key set tracked) plus one tracked read per key; arrays are re-mapped only when an element is a proxy. Inline literals are untouched — they already compile per property. Provably-string expressions (string/template literals, concatenation) and literal objects/arrays skip the wrap at compile time. New Tier-1 bench `style-class-object`: plain-object rows at parity; store-backed rows go from identity-only (and, in dev, ~97 ms per 500 elements of diagnostics) to per-key reactive at ~3.5 ms. Octane svg-dashboard (prod build, store-backed style/attrs through spread): mount at parity, style_spread_pulse −6%, select_toggle −7%.
+
+  `spread()` shares the same enumeration: its compute half copied the source with `for…in` + `hasOwn`, which on a proxy source (`merge()`/`omit()`, `{...props}` in a component, store records — nearly every spread) is an `ownKeys` trap plus two `getOwnPropertyDescriptor` traps per key, each allocating a descriptor and a getter closure. It now takes the key set from one `Reflect.ownKeys` trap (the trap keeps the key set tracked) and reads each string key once; plain sources use `Object.keys`, the exact own-enumerable set the old loop yielded. New Tier-1 bench `spread-enumerate` (500 elements, 8 keys): `merge(static, reactive)` 376 → 537 ops/s (+43%), store record 253 → 415 ops/s (+64%), plain object at parity.
+
 ## 2.0.0-rc.7
 
 ### Patch Changes

package/README.md

@@ -120,6 +120,20 @@ Source syntax frontend. `"auto"` routes `.tsrx` files through the TSRX frontend
 
 Emit hydratable markers.
 
+### dev
+
+- Type: `boolean`
+- Default: `false`
+
+Development output. With `hydratable`, emits the hydration walk validation helpers.
+
+### componentNames
+
+- Type: `boolean`
+- Default: `false`
+
+DOM output only. Emit the tag as written in source as a third `createComponent` argument — `<Home />` compiles to `createComponent(Home, props, "Home")`, `<Ui.Button />` to `"Ui.Button"` — so the dev and observe runtimes label each component's owner (`<Home>` in diagnostic `ownerPath`s and attribution chains) even after a minifier renames the function or a `lazy()`/HMR wrapper hides it. The production runtime ignores the argument; SSR and universal output are unaffected. `@solidjs/vite-plugin` turns this on for its dev and `observe` postures.
+
 ### delegateEvents
 
 - Type: `boolean`

package/index.js

@@ -2952,6 +2952,32 @@ function registerTemplate(path, results) {
   results.decl = t__namespace.variableDeclaration("var", results.declarations);
 }
 
+/** A non-inline object-valued `style` / `class` binding is read in the TRACKED
+ * half of its effect through `readShallow()`: `style()`/`className()` enumerate
+ * their object in the untracked commit phase, so a proxy value (a store
+ * sub-object, merged props) would be identity-reactive only. Skipped when the
+ * expression is provably a string or a fresh literal (`readShallow` would pass
+ * those through anyway; the call is what's saved). */
+function wrapReadShallow(path, key, value) {
+  if (key !== "class" && key !== "style") return value;
+  if (
+  t__namespace.isStringLiteral(value) ||
+  t__namespace.isTemplateLiteral(value) ||
+  t__namespace.isBinaryExpression(value) ||
+  t__namespace.isObjectExpression(value) ||
+  // a class array of literals cannot hold a proxy either
+  t__namespace.isArrayExpression(value) &&
+  value.elements.every(
+    (e) => t__namespace.isStringLiteral(e) || t__namespace.isTemplateLiteral(e) || t__namespace.isObjectExpression(e)
+  ))
+
+  return value;
+  return t__namespace.callExpression(
+    registerImportMethod(path, "readShallow", getRendererConfig(path, "dom").moduleName),
+    [value]
+  );
+}
+
 function wrapDynamics$1(path, dynamics) {
   if (!dynamics.length) return;
   const config = getConfig(path);
@@ -2975,7 +3001,7 @@ function wrapDynamics$1(path, dynamics) {
     const newValue = t__namespace.identifier("_v$");
     return t__namespace.expressionStatement(
       t__namespace.callExpression(effectWrapperId, [
-      wrapForEffect(dynamics[0].value),
+      wrapForEffect(wrapReadShallow(path, dynamics[0].key, dynamics[0].value)),
       t__namespace.arrowFunctionExpression(
         prevValue ? [newValue, prevValue] : [newValue],
         t__namespace.blockStatement([
@@ -3010,7 +3036,7 @@ function wrapDynamics$1(path, dynamics) {
     }
 
     properties.push(propIdent);
-    values.push(t__namespace.objectProperty(propIdent, value));
+    values.push(t__namespace.objectProperty(propIdent, wrapReadShallow(path, key, value)));
 
     if (key === "class" || key === "style" || isStatefulDOMProperty(tagName, key)) {
       statements.push(
@@ -3465,9 +3491,8 @@ escapeLiterals)
     expression.wontEscape = true;
     return expression;
   } else if (t.isJSXFragment(expression) && fragmentWillSelfEscape(expression)) {
-    // The fragment will later be transformed into a runtime value the
-    // `escape` helper passes through unchanged — either a memoized
-    // accessor function or an `_$ssr(...)` SSRNode object (see
+    // The fragment will later be transformed into an `_$ssr(...)` SSRNode
+    // object the `escape` helper passes through unchanged (see
     // `fragmentWillSelfEscape`). Wrapping it in another `_$escape(...)`
     // here would be a guaranteed no-op, so leave the fragment in place
     // and let the later traversal emit the inner form directly.
@@ -3495,23 +3520,16 @@ function escapeTemplateQuasis(expression, attr) {
 // Predicts whether a JSXFragment AST will compile to a single runtime
 // value for which the outer `_$escape(...)` wrap is a no-op. Must stay
 // conservative: any shape this returns `true` for must, when later
-// transformed, produce a self-escaping (or escape-immune) runtime value.
-// When in doubt, return false so the outer `_$escape` wrap is kept.
+// transformed, produce an escape-immune runtime value. When in doubt,
+// return false so the outer `_$escape` wrap is kept.
+//
+// The one recognized shape is `<><native /></>` — a single native
+// (non-component) JSXElement, whose `createTemplate` output is
+// `_$ssr(_tmpl$N, …)`: an SSRNode object `escape` passes through.
 //
-// Recognized single-significant-child shapes:
-//   A. `<>{memberOrCall}</>` — a `JSXExpressionContainer` whose
-//      expression matches the top-level subset of
-//      `isDynamic({ checkMember: true })` (member access, call, tagged
-//      template, optional variants, `in` checks). `createTemplate`
-//      emits `_$memo(() => _$escape(expr))`; the memo returns a
-//      function accessor at runtime and `escape(fn)` is a pass-through.
-//      Nested-dynamic shapes (conditional/logical carrying dynamic
-//      sub-expressions) are excluded — confirming them needs the full
-//      `isDynamic` traversal and a missed optimization costs only one
-//      runtime no-op call.
-//   B. `<><native /></>` — a single native (non-component) JSXElement.
-//      `createTemplate` emits `_$ssr(_tmpl$N, …)`, which returns an
-//      SSRNode object; `escape(object)` is a pass-through.
+// A single expression child (`<>{x()}</>`) is NOT immune: it compiles to a
+// memo the runtime's `escape` defers into (a function's yield is content
+// like any other), so the hole must keep its wrap.
 function fragmentWillSelfEscape(fragment) {
   let only = null;
   for (const c of fragment.children) {
@@ -3521,25 +3539,10 @@ function fragmentWillSelfEscape(fragment) {
     }
     if (t__namespace.isJSXExpressionContainer(c) && t__namespace.isJSXEmptyExpression(c.expression))
     continue;
-    if (only !== null) return false;
-    if (t__namespace.isJSXElement(c) || t__namespace.isJSXExpressionContainer(c)) only = c;else
-    return false;
-  }
-  if (!only) return false;
-  if (t__namespace.isJSXExpressionContainer(only)) {
-    const expr = only.expression;
-    if (t__namespace.isJSXEmptyExpression(expr)) return false;
-    return (
-      t.isCallExpression(expr) ||
-      t.isOptionalCallExpression(expr) ||
-      t.isTaggedTemplateExpression(expr) ||
-      t.isMemberExpression(expr) ||
-      t.isOptionalMemberExpression(expr) ||
-      t__namespace.isBinaryExpression(expr) && expr.operator === "in");
-
+    if (only !== null || !t__namespace.isJSXElement(c)) return false;
+    only = c;
   }
-  if (t__namespace.isJSXElement(only)) return !isComponent(getTagName(only));
-  return false;
+  return only !== null && !isComponent(getTagName(only));
 }
 
 function normalizeAttributes(path) {
@@ -4139,31 +4142,6 @@ path,
   return { exprs, template: "", declarations: [], dynamics: [], spreadElement: true };
 }
 
-// Wrap the *inner* value of a fragment-child accessor with `_$escape` so that
-// hostile string values returned from reactive accessors cannot be
-// concatenated raw into the SSR output. Element-child expressions already get
-// this treatment via `escapeExpression` in `ssr/element.js`; fragment
-// children reach SSR via a different code path and would otherwise skip the
-// escape step.
-//
-// `expr` is the first entry of `result.exprs` produced by `transformNode`
-// for a `JSXExpressionContainer`. It is either:
-//   - an arrow function `() => X` (default case)
-//   - a bare callee (`fnRef`, emitted when the expression is `fnRef()` with
-//     no args — see the JSXExpressionContainer branch in shared/transform.js)
-//   - the result of `transformCondition(..., inline=true)`, which also
-//     returns an arrow function
-// For arrows with an expression body we rewrite in place; for anything else
-// we conservatively wrap in a new arrow that calls and escapes.
-function wrapFragmentChildWithEscape(path, expr) {
-  const escape = registerImportMethod(path, "escape", undefined);
-  if (t__namespace.isArrowFunctionExpression(expr) && !t__namespace.isBlockStatement(expr.body)) {
-    expr.body = t__namespace.callExpression(escape, [expr.body]);
-    return expr;
-  }
-  return t__namespace.arrowFunctionExpression([], t__namespace.callExpression(escape, [t__namespace.callExpression(expr, [])]));
-}
-
 function createTemplate$1(
 path,
 result,
@@ -4171,19 +4149,16 @@ wrap)
 {
   if (!result.template) {
     // `wrap` is true for fragment children and for mixed component children.
-    // A sole component child (`wrap === false`) is a value passed to the
-    // callee — do not `_$escape` it here; the callee's insert/SSR sites
-    // escape when interpolating into HTML. Escaping both layers double-escapes.
+    // Both are VALUES — they flow to whatever hole eventually inserts them,
+    // and that hole's `_$escape` covers everything reachable from the value:
+    // strings, array items, and what a function (this memo) yields when the
+    // resolver calls it. Escaping here as well double-escapes through
+    // `<Comp>{props.children}</Comp>`. The memo exists for hydration-id
+    // alignment with the client, not for escaping.
     if (wrap && result.dynamic && getConfig(path).memoWrapper) {
-      // wontEscape is set on JSXElement children whose compiled form is
-      // already a safe SSR node (e.g. `_$ssr(...)` call). Wrapping those in
-      // escape would be a no-op at runtime but obscures intent — skip it.
-      const inner = result.wontEscape ?
-      result.exprs[0] :
-      wrapFragmentChildWithEscape(path, result.exprs[0]);
       return t__namespace.callExpression(
         registerImportMethod(path, getConfig(path).memoWrapper, undefined),
-        [inner]
+        [result.exprs[0]]
       );
     }
     return result.exprs[0];
@@ -4940,11 +4915,24 @@ node)
   return t__namespace.stringLiteral(`${node.namespace.name}:${node.name.name}`);
 }
 
+/**
+ * The tag as written in source (`Home`, `Ui.Button`, `this.Row`) — the label
+ * `componentNames` emits. Read before `convertComponentIdentifier` since that
+ * retypes the JSX identifier nodes in place.
+ */
+function jsxTagName(node) {
+  if (t__namespace.isJSXIdentifier(node)) return thisTagIdentifiers.has(node) ? "this" : node.name;
+  if (t__namespace.isJSXMemberExpression(node))
+  return `${jsxTagName(node.object)}.${jsxTagName(node.property)}`;
+  return `${node.namespace.name}:${node.name.name}`;
+}
+
 function transformComponent(
 path)
 {
   let exprs = [],
     config = getConfig(path),
+    tagName = jsxTagName(path.node.openingElement.name),
     tagId = convertComponentIdentifier(path.node.openingElement.name),
     props = [],
     runningObject = [],
@@ -5213,13 +5201,20 @@ path)
     props = [t__namespace.callExpression(registerImportMethod(path, "mergeProps"), props)];
   }
   const componentArgs = [tagId, props[0]];
+  // `componentNames` carries the source tag name into the call so the
+  // dev/observe runtimes can label the owner after minification renames the
+  // function. DOM output only: SSR inlines the call below and the universal
+  // renderer's `createComponent` is user code with a two-argument contract.
+  if (config.componentNames && config.generate === "dom") {
+    componentArgs.push(t__namespace.stringLiteral(tagName));
+  }
   // SSR's `createComponent` is literally `Comp(props || {})`. Since the
   // compiler always emits a real `props[0]` object expression above (see the
   // `props.push(t.objectExpression(runningObject))` line), the `|| {}` fallback
   // never fires in compiled output. Inline to a direct `Comp(props)` call to
   // drop one function-call frame per component invocation. (DOM/dev modes
   // keep the wrapper since it does real work — `untrack`, dev metadata.)
-  if (getConfig(path).generate === "ssr") {
+  if (config.generate === "ssr") {
     exprs.push(t__namespace.callExpression(tagId, [props[0]]));
   } else {
     exprs.push(t__namespace.callExpression(registerImportMethod(path, "createComponent"), componentArgs));
@@ -5411,6 +5406,13 @@ function getTargetFunctionParent(path, parent) {
   return current;
 }
 
+/**
+ * JSX tag identifiers `transformThis` rewrote from `this` to the `_self$`
+ * capture, so `componentNames` can label `<this.Row />` by its source text
+ * rather than the generated uid.
+ */
+const thisTagIdentifiers = new WeakSet();
+
 function transformThis(path) {
   const parent = path.scope.getFunctionParent();
   let thisId, inserted;
@@ -5431,7 +5433,9 @@ function transformThis(path) {
         const current = getTargetFunctionParent(path, parent);
         if (current === parent) {
           thisId || (thisId = path.scope.generateUidIdentifier("self$"));
-          source.replaceWith(t__namespace.jsxIdentifier(thisId.name));
+          const selfTag = t__namespace.jsxIdentifier(thisId.name);
+          thisTagIdentifiers.add(selfTag);
+          source.replaceWith(selfTag);
 
           if (path.node.closingElement) {
             path.node.closingElement.name = path.node.openingElement.name;
@@ -14264,6 +14268,7 @@ const config = {
   generate: "dom",
   hydratable: false,
   dev: false,
+  componentNames: false,
   delegateEvents: true,
   delegatedEvents: [],
   builtIns: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/babel-plugin",
   "description": "Babel compiler plugin for Solid templates",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.8",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -24,8 +24,7 @@
     "@babel/plugin-syntax-jsx": "^7.18.6",
     "@babel/types": "^7.20.7",
     "html-entities": "2.3.3",
-    "parse5": "^7.1.2",
-    "validate-html-nesting": "^1.2.1"
+    "parse5": "^7.1.2"
   },
   "peerDependencies": {
     "@babel/core": "^7.20.12",