@solidjs/babel-plugin 2.0.0-rc.6 → 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 3.3s
+created index.js in 2.7s

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @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
+
+- ead7b1a: Keep hydration IDs aligned when an intrinsic element has a ref and one reactive spread.
+- b3586e8: Validate document-shell templates in the document context (#3259). The `validate` pass round-trips templates through a body-context fragment parse, which strips `<html>`/`<head>`/`<body>` wrappers no matter how well-formed the markup — so once #3099 made validate failures compile errors, a root component owning the document shell failed to compile in plain client mode, and merely importing it (the jsdom component-test configuration) was fatal. Shell-rooted templates now parse as a document and the shell element is compared back — the analogue of the synthetic `<table>` wrap for table partials, in both the Babel plugin and the native compiler. Genuine restructuring (an implied `<head>`, flow content in `<head>`, a `<p>` split in `<body>`) still errors. Since `<template>` parsing flattens shells, actually client-creating one now throws a descriptive dev-mode error from `template()` pointing at `hydrate()` — the failure moved from every import to the one broken act.
+- d601119: Remove the experimental patch channel and patch-mode list driver (always opt-in, never default). Graph-native regions own value delivery and the unified-For design owns list structure, so the channel's parallel delivery machinery is retired: `patch.ts`/`patch-driver.ts` deleted, the compiler-contract exports (`registerPatch`/`registerRowOps`/`registerSlotPatch`/`patchableRaw`, `patchDriver`/`rowProof`/`driveList`) removed, the `patchDriver` compiler option dropped from both compilers, the insert `$ll` seam stripped, and the write-side channel struct dieted to the single written-keys bound (`t.wk`) the core fold/notify paths actually use. Store-family app bundles reclaim up to ~900 B brotli; every measured tier shrinks.
+
 ## 2.0.0-rc.6
 
 ### 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

@@ -2821,170 +2821,6 @@ attributes,
 
 }
 
-/**
- * Patch-mode eligibility + emission (DESIGN-PATCH-CHANNEL.md, PR-C).
- *
- * A template scope qualifies for patch mode when EVERY dynamic binding's
- * value is a pure expression over member reads of ONE stable subject
- * identifier (Tier 1: bare member chains; Tier 2: ternary/binary/logical/
- * template-literal/unary compositions of Tier-1 reads and literals).
- * Anything else — calls, assignments, functions, foreign identifiers —
- * disqualifies the SCOPE (per-binding islands remain future work; v1 is
- * all-or-nothing per template scope, matching the fixture shape).
- *
- * Emission (dual driver, shared body):
- *
- *   _$patchDriver(subject, (_n$, _p$, _f$) => {
- *     let _v$;
- *     if (_f$ || (_v$ = <expr(_n$)>) !== <expr(_p$)>) <setAttr(..., _v$)>;
- *     ...
- *   });
- *
- * The runtime driver registers on the store's patch channel when the
- * subject is a patchable record, else falls back to a tracked force-mode
- * effect running the same body (reads through the subject track; force
- * short-circuits every compare, so `prev` is never dereferenced there).
- * Semantics are therefore IDENTICAL either way; patch mode only changes
- * who dispatches.
- */
-
-// Node types allowed inside an eligible binding expression (Tier 1+2).
-function isEligibleExpr(node, subject) {
-  switch (node.type) {
-    case "Identifier":
-      return node.name === subject || node.name === "undefined";
-    case "MemberExpression":{
-        const m = node;
-        if (m.computed) {
-          if (!t__namespace.isStringLiteral(m.property) && !t__namespace.isNumericLiteral(m.property)) return false;
-        } else if (!t__namespace.isIdentifier(m.property)) {
-          return false;
-        }
-        return isEligibleExpr(m.object, subject);
-      }
-    case "StringLiteral":
-    case "NumericLiteral":
-    case "BooleanLiteral":
-    case "NullLiteral":
-    case "BigIntLiteral":
-      return true;
-    case "ConditionalExpression":{
-        const c = node;
-        return (
-          isEligibleExpr(c.test, subject) &&
-          isEligibleExpr(c.consequent, subject) &&
-          isEligibleExpr(c.alternate, subject));
-
-      }
-    case "BinaryExpression":{
-        const b = node;
-        if (b.operator === "in" || b.operator === "instanceof") return false;
-        return isEligibleExpr(b.left, subject) && isEligibleExpr(b.right, subject);
-      }
-    case "LogicalExpression":{
-        const l = node;
-        return isEligibleExpr(l.left, subject) && isEligibleExpr(l.right, subject);
-      }
-    case "UnaryExpression":{
-        const u = node;
-        if (u.operator === "delete" || u.operator === "throw") return false;
-        return isEligibleExpr(u.argument, subject);
-      }
-    case "TemplateLiteral":
-      return node.expressions.every((e) =>
-      t__namespace.isExpression(e) ? isEligibleExpr(e, subject) : false
-      );
-    case "ParenthesizedExpression":
-      return isEligibleExpr(node.expression, subject);
-    default:
-      return false;
-  }
-}
-
-/** Find the single subject: the root identifier of the FIRST member chain
- * encountered. Every other read must root at the same name. */
-function findSubject(node) {
-  switch (node.type) {
-    case "MemberExpression":
-      return findSubject(node.object);
-    case "Identifier":
-      return node.name === "undefined" ? null : node.name;
-    case "ConditionalExpression":
-      return (
-        findSubject(node.test) ??
-        findSubject(node.consequent) ??
-        findSubject(node.alternate));
-
-    case "BinaryExpression":
-    case "LogicalExpression":
-      return (
-        findSubject(node.left) ?? findSubject(node.right));
-
-    case "UnaryExpression":
-      return findSubject(node.argument);
-    case "TemplateLiteral":{
-        for (const e of node.expressions) {
-          const s = findSubject(e);
-          if (s) return s;
-        }
-        return null;
-      }
-    case "ParenthesizedExpression":
-      return findSubject(node.expression);
-    default:
-      return null;
-  }
-}
-
-
-
-
-
-/** Analyze a template scope's dynamic binding values. Returns the subject
- * when EVERY value is an eligible pure expression over it, else null. */
-function analyzePatchEligibility(values) {
-  if (values.length === 0) return null;
-  let subject = null;
-  for (const v of values) {
-    const s = findSubject(v);
-    if (s === null) return null; // static-only binding: no dispatch source
-    if (subject === null) subject = s;else
-    if (subject !== s) return null; // multi-subject: Q3 territory, bail in v1
-  }
-  if (subject === null) return null;
-  for (const v of values) {
-    if (!isEligibleExpr(v, subject)) return null;
-  }
-  return { subject };
-}
-
-/** Clone `expr` substituting the subject identifier with `replacement`.
- * Safe because eligibility rejected functions/shadowing constructs. */
-function substituteSubject(
-expr,
-subject,
-replacement)
-{
-  const clone = t__namespace.cloneNode(expr, true);
-  const rewrite = (node) => {
-    if (t__namespace.isIdentifier(node) && node.name === subject) return t__namespace.cloneNode(replacement);
-    for (const key of Object.keys(node)) {
-      const value = node[key];
-      if (Array.isArray(value)) {
-        for (let i = 0; i < value.length; i++) {
-          if (value[i] && typeof value[i].type === "string") value[i] = rewrite(value[i]);
-        }
-      } else if (value && typeof value.type === "string") {
-        // Never rewrite non-computed member PROPERTY positions.
-        if (t__namespace.isMemberExpression(node) && key === "property" && !node.computed) continue;
-        node[key] = rewrite(value);
-      }
-    }
-    return node;
-  };
-  return rewrite(clone);
-}
-
 function createTemplate$2(
 path,
 result,
@@ -2998,16 +2834,9 @@ wrap)
     !(result.exprs.length || result.dynamics.length || result.postExprs?.length) &&
     decl.declarations.length === 1)
     {
-      // Static single-root template: a candidate row function returning it is
-      // trivially pure (no reactive work at all).
-      if (config.patchDriver) recordPureRow(path, result, null);
       return decl.declarations[0].init;
     } else {
-      const patched = config.patchDriver ? wrapPatchMode(path, result.dynamics) : undefined;
-      const dynamicsStmt = patched ? patched.stmt : wrapDynamics$1(path, result.dynamics);
-      if (config.patchDriver && (result.dynamics.length === 0 || patched)) {
-        recordPureRow(path, result, patched ? patched.subject : null);
-      }
+      const dynamicsStmt = wrapDynamics$1(path, result.dynamics);
       const stmts = [
       decl,
       ...result.exprs,
@@ -3123,177 +2952,30 @@ function registerTemplate(path, results) {
   results.decl = t__namespace.variableDeclaration("var", results.declarations);
 }
 
-/**
- * Row-proof analysis (DESIGN-PATCH-CHANNEL §3c). A function qualifies as a
- * PURE ROW — buildable with no per-row owner, so the patch-mode list driver
- * may engage — when ALL of:
- *
- *  - it is a single-parameter function (plain Identifier param, not
- *    destructured; not async/generator) whose body is exactly this compiled
- *    template: an expression body, or a block whose ONLY statement returns
- *    it (checked before the flat-statement emission inserts our own);
- *  - the template has a single root element (`result.id` — fragments never
- *    reach here) and emitted NO reactive or owned work: dynamics either
- *    absent or all landed in ONE patchDriver body, and `result.exprs` holds
- *    only inert DOM wiring (member-target assignments like `_el$.$$click =
- *    fn` / `_el$.style.cssText = v`, and `_el$.addEventListener(...)`) —
- *    any `insert`/`createComponent`/`memo`/`use`/ref/spread emission is a
- *    call or conditional shape and fails the walk (default-deny);
- *  - the patch subject IS the row parameter. A pure template patching an
- *    OUTER subject would register once per created row on a long-lived
- *    record with no per-row disposal — the foreign-subject leak the runtime
- *    probe never caught.
- *
- * Handler/attribute VALUE expressions may be arbitrary user code: stamped
- * rows are only ever built for real mounts (never speculatively), so their
- * evaluation timing is identical to the classic path. Event handlers are
- * not reactive bindings — values evaluate exactly once at build — so the
- * only ownership divergence is a factory creating owned work in value
- * position (`onClick={makeHandler(row)}` calling onCleanup), which is not
- * a supported pattern (owned work belongs in effects/refs; ruled
- * non-responsibility). Denying evaluation-position calls would cost
- * legitimate currying to guard it; instead the runtime dev-asserts that a
- * stamped row's build attaches nothing to the list owner.
- *
- * Qualifying functions are recorded and wrapped with `rowProof` at program
- * exit (postprocess) — the stamp travels with the function object, so
- * extracted row functions prove at their DEFINITION site and work across
- * modules, which the runtime probe could never see.
- */
-function recordPureRow(path, result, subject) {
-  const parent = path.parentPath;
-  if (!parent) return;
-  let fn;
+/** 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.isArrowFunctionExpression(parent.node) || t__namespace.isFunctionExpression(parent.node)) &&
-  parent.node.body === path.node)
-  {
-    fn = parent.node;
-  } else if (
-  t__namespace.isReturnStatement(parent.node) &&
-  parent.node.argument === path.node &&
-  parent.parentPath &&
-  t__namespace.isBlockStatement(parent.parentPath.node) &&
-  parent.parentPath.node.body.length === 1 &&
-  parent.parentPath.parentPath && (
-  t__namespace.isArrowFunctionExpression(parent.parentPath.parentPath.node) ||
-  t__namespace.isFunctionExpression(parent.parentPath.parentPath.node)) &&
-  parent.parentPath.parentPath.node.body === parent.parentPath.node)
-  {
-    fn = parent.parentPath.parentPath.node;
-  }
-  if (!fn || fn.async || fn.generator) return;
-  if (fn.params.length !== 1 || !t__namespace.isIdentifier(fn.params[0])) return;
-  const param = fn.params[0].name;
-  if (subject !== null && subject !== param) return;
-
-  const isLocalMemberTarget = (n) => {
-    if (!t__namespace.isMemberExpression(n) || n.computed) return false;
-    let obj = n.object;
-    while (t__namespace.isMemberExpression(obj) && !obj.computed) obj = obj.object;
-    return t__namespace.isIdentifier(obj);
-  };
-  for (const stmt of result.exprs) {
-    if (!t__namespace.isExpressionStatement(stmt)) return;
-    const e = stmt.expression;
-    if (t__namespace.isAssignmentExpression(e) && e.operator === "=" && isLocalMemberTarget(e.left)) continue;
-    if (
-    t__namespace.isCallExpression(e) &&
-    t__namespace.isMemberExpression(e.callee) &&
-    !e.callee.computed &&
-    t__namespace.isIdentifier(e.callee.property) &&
-    e.callee.property.name === "addEventListener")
-
-    continue;
-    return;
-  }
-  if (result.postExprs?.length) {
-    const data = path.scope.getProgramParent().data;
-    const moduleName = getRendererConfig(path, "dom").moduleName;
-    const rheUid = data.imports?.get(`${moduleName}:runHydrationEvents`);
-    for (const stmt of result.postExprs) {
-      if (
-      !t__namespace.isExpressionStatement(stmt) ||
-      !t__namespace.isCallExpression(stmt.expression) ||
-      !t__namespace.isIdentifier(stmt.expression.callee) ||
-      !rheUid ||
-      stmt.expression.callee.name !== rheUid.name)
-
-      return;
-    }
-  }
-
-  const data = path.scope.getProgramParent().data;
-  (data.pureRows || (data.pureRows = new Set())).add(fn);
-}
+  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)
+  ))
 
-/** Patch-mode emission (shared/patch.ts): one compiled body doing inline
- * compares + setAttr writes, handed to the runtime driver which registers
- * on the store patch channel (patchable subject) or falls back to a
- * tracked force-mode effect running the SAME body. Returns undefined when
- * the scope is ineligible — caller falls through to the effect shapes.
- * The subject rides along for row-proof analysis (recordPureRow). */
-function wrapPatchMode(
-path,
-dynamics)
-{
-  const config = getConfig(path);
-  if (dynamics.length === 0) return;
-  const eligibility = analyzePatchEligibility(dynamics.map((d) => d.value));
-  if (!eligibility) return;
-  const subject = eligibility.subject;
-  // The subject must be a stable local binding (not reassigned): row params
-  // and const destructures qualify; anything else falls back to effects.
-  const binding = path.scope.getBinding(subject);
-  if (!binding || !binding.constant) return;
-  // Fixed `$`-suffixed locals, matching wrapDynamics' `_v$`/`_p$` convention
-  // (and byte-parity with the Oxc compiler's emission): substitution only
-  // rewrites subject references, so nothing else in an eligible expression
-  // can collide with these.
-  const nId = t__namespace.identifier("_n$");
-  const pId = t__namespace.identifier("_p$");
-  const fId = t__namespace.identifier("_f$");
-  const stmts = [];
-  let vIndex = 0;
-  for (const d of dynamics) {
-    let value = d.value;
-    if (d.classProperty && !t__namespace.isBooleanLiteral(value) && !t__namespace.isUnaryExpression(value)) {
-      value = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", value));
-    }
-    const vId = t__namespace.identifier(++vIndex === 1 ? "_v$" : `_v$${vIndex}`);
-    stmts.push(
-      t__namespace.variableDeclaration("const", [
-      t__namespace.variableDeclarator(vId, substituteSubject(value, subject, nId))]
-      )
-    );
-    stmts.push(
-      t__namespace.ifStatement(
-        t__namespace.logicalExpression(
-          "||",
-          t__namespace.cloneNode(fId),
-          t__namespace.binaryExpression("!==", t__namespace.cloneNode(vId), substituteSubject(value, subject, pId))
-        ),
-        t__namespace.expressionStatement(
-          setAttr$2(path, d.elem, d.key, t__namespace.cloneNode(vId), {
-            tagName: d.tagName,
-            dynamic: true,
-            styleProperty: d.styleProperty,
-            classProperty: d.classProperty
-          })
-        )
-      )
-    );
-  }
-  const driverId = registerImportMethod(path, config.patchDriver, undefined);
-  return {
-    stmt: t__namespace.expressionStatement(
-      t__namespace.callExpression(driverId, [
-      t__namespace.identifier(subject),
-      t__namespace.arrowFunctionExpression([nId, pId, fId], t__namespace.blockStatement(stmts))]
-      )
-    ),
-    subject
-  };
+  return value;
+  return t__namespace.callExpression(
+    registerImportMethod(path, "readShallow", getRendererConfig(path, "dom").moduleName),
+    [value]
+  );
 }
 
 function wrapDynamics$1(path, dynamics) {
@@ -3319,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([
@@ -3354,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(
@@ -3809,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.
@@ -3839,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) {
@@ -3865,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) {
@@ -4382,9 +4041,15 @@ path,
       return memo;
     }, []);
 
+  // The DOM transform handles `ref` outside its spread prop sources.
+  const propAttributes = attributes.filter((attribute) => {
+    const node = attribute.node;
+    return !(t.isJSXAttribute(node) && t.isJSXIdentifier(node.name) && node.name.name === "ref");
+  });
+
   let props;
-  if (attributes.length === 1 && t.isJSXSpreadAttribute(attributes[0].node)) {
-    props = [attributes[0].node.argument];
+  if (propAttributes.length === 1 && t.isJSXSpreadAttribute(propAttributes[0].node)) {
+    props = [propAttributes[0].node.argument];
   } else {
     props = [];
     let runningObject = [],
@@ -4477,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,
@@ -4509,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];
@@ -5278,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 = [],
@@ -5551,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));
@@ -5749,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;
@@ -5769,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;
@@ -14283,6 +13949,29 @@ function serialize(node, options) {
   }
   return serializeChildNodes(node, opts);
 }
+/**
+ * Serializes an AST element node to an HTML string, including the element node.
+ *
+ * @example
+ *
+ * ```js
+ * const parse5 = require('parse5');
+ *
+ * const document = parse5.parseFragment('<div>Hello, <b>world</b>!</div>');
+ *
+ * // Serializes the <div> element.
+ * const str = parse5.serializeOuter(document.childNodes[0]);
+ *
+ * console.log(str); //> '<div>Hello, <b>world</b>!</div>'
+ * ```
+ *
+ * @param node Node to serialize.
+ * @param options Serialization options.
+ */
+function serializeOuter(node, options) {
+  const opts = { ...defaultOpts, ...options };
+  return serializeNode(node, opts);
+}
 function serializeChildNodes(parentNode, options) {
   let html = '';
   // Get container of the child nodes
@@ -14416,6 +14105,29 @@ function innerHTML(htmlFragment) {
   return serialize(parsedFragment);
 }
 
+/**
+ * A document shell (`<html>`/`<head>`/`<body>` root) can never round-trip a
+ * body-context fragment parse — the parser strips those wrappers no matter
+ * how well-formed the markup is — so it is parsed as a DOCUMENT instead and
+ * the shell element serialized back out (#3259). The same "used in the right
+ * place" assumption the synthetic `<table>` makes for table partials: a
+ * shell template is hydrated against a real document, not client-created.
+ * Restructuring inside the shell still mismatches — an implied `<head>`,
+ * flow content hoisted out of `<head>`, a `<p>` split in `<body>` — so the
+ * #3099 guarantee holds for markup a browser would actually rebuild.
+ */
+function documentShell(html, tag) {
+  const document = parse(html);
+  const htmlElement = document.childNodes.find(
+    (node) => node.tagName === "html"
+  );
+  const shell =
+  tag === "html" ?
+  htmlElement :
+  htmlElement.childNodes.find((node) => node.tagName === tag);
+  return serializeOuter(shell);
+}
+
 /**
  * Returns an object with information when the markup is invalid
  *
@@ -14486,7 +14198,8 @@ function isInvalidMarkup(html) {
   }
 
   /** Parse HTML. `browser` is a string with the supposed resulting html of a real `innerHTML` call */
-  const browser = innerHTML(html);
+  const shell = /^<(html|head|body)>/.exec(html);
+  const browser = shell ? documentShell(html, shell[1]) : innerHTML(html);
 
   if (html.toLowerCase() !== browser.toLowerCase()) {
     return {
@@ -14547,31 +14260,6 @@ var postprocess = (path, state) => {
     domTemplates.length > 0 && appendTemplates$1(path, domTemplates);
     ssrTemplates.length > 0 && appendTemplates(path, ssrTemplates);
   }
-
-  // Compile-time row proofs (DESIGN-PATCH-CHANNEL §3c): wrap each function
-  // recorded by recordPureRow with the runtime's `rowProof` marker so the
-  // patch-mode list driver can engage on proven-pure rows — admission is
-  // decided here, statically; there is no runtime purity probe. The stamp
-  // travels with the function object, so extracted row functions qualify at
-  // their definition site.
-  if (data.pureRows?.size) {
-    const rowProofId = registerImportMethod(
-      path,
-      "rowProof",
-      getRendererConfig(path, "dom").moduleName
-    );
-    const pureRows = data.pureRows;
-    path.traverse({
-      "ArrowFunctionExpression|FunctionExpression"(fnPath) {
-        if (!pureRows.has(fnPath.node)) return;
-        pureRows.delete(fnPath.node);
-        fnPath.replaceWith(
-          t__namespace.callExpression(t__namespace.cloneNode(rowProofId), [fnPath.node])
-        );
-        fnPath.skip();
-      }
-    });
-  }
 };
 
 const config = {
@@ -14580,6 +14268,7 @@ const config = {
   generate: "dom",
   hydratable: false,
   dev: false,
+  componentNames: false,
   delegateEvents: true,
   delegatedEvents: [],
   builtIns: [
@@ -14603,7 +14292,6 @@ const config = {
   contextToCustomElements: true,
   staticMarker: "@static",
   effectWrapper: "effect",
-  patchDriver: false,
   memoWrapper: "memo",
   validate: true,
   inlineStyles: true,
@@ -14619,9 +14307,6 @@ var preprocess = (path, state) => {
     delete file.ast.tsrxStyle;
   }
   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.6",
+  "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",