@solidjs/babel-plugin 2.0.0-rc.11 → 2.0.0-rc.13

package/.turbo/turbo-build.log

@@ -7,4 +7,4 @@ src/shared/transform.ts -> src/dom/element.ts -> src/universal/element.ts -> src
 src/shared/transform.ts -> src/ssr/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 3s
+created index.js in 3.4s

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @solidjs/babel-plugin
 
+## 2.0.0-rc.13
+
+## 2.0.0-rc.12
+
+### Patch Changes
+
+- ad1ecc5: `serverComponents` (SSR): keep attribute-slot positions bindable on intrinsic elements. A dynamic `class` or `style` now compiles to a whole-attribute `_$ssrElementAttribute` hole instead of a value inside the template's quotes, so a server component's `class={{ selected: filters.all }}` can mark the class name a client attribute slot owns; `ref`/`on*` positions compile, as before, to one guarded `_$ssrClaim` hole per element, which now emits `_s:on:*`/`_s:ref` markers for slot reads (the `_bnd` behavior-claim marker is gone). A spread element compiles its named `ref`/`on*` (`<button {...rest} onClick={row.go} ref={row.el} />`, wherever they sit relative to the spreads) to the same claim map — `{ click: expr, ref: [a, b] }`, duplicate refs merged, a duplicate handler last-wins as on the template path — keyed by the index of the source each attribute sits before (`<b {...a} onClick={go} {...b}>` → `{ 1: { click: go } }`) and handed to `_$ssrElement` as a seventh argument, a thunk the runtime reads only inside a server component's render, so plain SSR never evaluates the expressions (they used to drop with no marker and no finding); the runtime settles each handler position in source order, as the client's `spread`/`merge()` do (the last source that has the key owns it, `undefined` included). A `ref` beside a lone spread goes through the sources loop under the option (a dynamic spread call is thunked there, as it is beside any other attribute). The event name is always the lowercased `on*` remainder (`onClick` → `click`); `on:`/`oncapture:` are not 2.0 syntaxes and are no longer special-cased. Both compilers share the `attributeSlots` server-components fixture; plain SSR output is unchanged.
+- 077c787: A `<textarea>` with a dynamic `value`/`defaultValue` no longer desyncs hydration ids for the siblings after it (#3691). The server folds the value into the textarea's text content, and that fold was taking the `_$scope` hydration-id reservation a dynamic child hole gets — but the client writes the value as a plain property effect that never allocates an id, so every component after the textarea hydrated one id off and its updates targeted detached DOM. The fold is now treated like the `innerHTML`/`textContent` redirects (#3015): opaque content, no id reservation, in both the Babel plugin and the native compiler.
+- c71486d: DOM output: an element's `ref` now runs after its attributes and spread are applied, and still before its children. A ref's own attribute writes now survive client creation the way they already survived hydration (#3685).
+
 ## 2.0.0-rc.11
 
 ## 2.0.0-rc.10

package/README.md

@@ -253,7 +253,7 @@ Inline style attributes in templates when the value is a string or `Record<strin
 - Type: `boolean`
 - Default: `false`
 
-SSR-only: emit behavior-claim (`_bnd`) markers for `ref` / `on*` on intrinsic elements.
+SSR-only: keep attribute-slot positions on intrinsic elements bindable — `ref` / `on*` compile to a guarded `ssrClaim` hole instead of dropping, and a dynamic `class` / `style` compiles to a whole-attribute `ssrElementAttribute` hole instead of a value inside template quotes.
 
 ### hoistProps
 

package/index.js

@@ -1047,6 +1047,13 @@ isSSR)
         child.extra = { raw: text, rawValue: text };
       } else {
         child = t__namespace.jsxExpressionContainer(value);
+        // The folded value is the textarea's text content on the server, but
+        // the client writes it as a plain `value` property effect that never
+        // allocates a hydration id. Flag it like the innerHTML/textContent
+        // redirects (#3015) so the SSR child pipeline skips the `_$scope` id
+        // reservation — otherwise the reservation shifts every keyed sibling
+        // after the textarea by one id (#3691).
+        child._childProperty = true;
       }
       path.node.children = [child];
       attr.remove();
@@ -2230,6 +2237,7 @@ results)
     hasChildren = path.node.children.length > 0,
     hasSpread = attributes.some((attribute) => t$1.isJSXSpreadAttribute(attribute.node)),
     config = getConfig(path);
+  const refs = [];
 
   // preprocess spreads
   if (hasSpread) {
@@ -2709,7 +2717,7 @@ results)
           binding.kind === "const" || binding.kind === "module");
         if (!isConstant && t$1.isLVal(value.expression)) {
           const refIdentifier = path.scope.generateUidIdentifier("_ref$");
-          results.exprs.unshift(
+          refs.push(
             t$1.variableDeclaration("var", [t$1.variableDeclarator(refIdentifier, value.expression)]),
             t$1.expressionStatement(
               t$1.conditionalExpression(
@@ -2738,7 +2746,7 @@ results)
         t$1.isFunction(value.expression) ||
         t$1.isArrayExpression(value.expression))
         {
-          results.exprs.unshift(
+          refs.push(
             t$1.expressionStatement(
               t$1.callExpression(
                 registerImportMethod(path, "ref", getRendererConfig(path, "dom").moduleName),
@@ -2748,7 +2756,7 @@ results)
           );
         } else {
           const refIdentifier = path.scope.generateUidIdentifier("_ref$");
-          results.exprs.unshift(
+          refs.push(
             t$1.variableDeclaration("var", [t$1.variableDeclarator(refIdentifier, value.expression)]),
             t$1.expressionStatement(
               t$1.logicalExpression(
@@ -2978,6 +2986,9 @@ results)
     path.node.children.push(children);
   }
   if (spreadExpr) results.exprs.push(...(Array.isArray(spreadExpr) ? spreadExpr : [spreadExpr]));
+  // Refs run after the element's attributes and spread are applied, so a ref's
+  // own writes survive client creation the way they survive hydration.
+  results.exprs.push(...refs);
 
   results.hasHydratableEvent = results.hasHydratableEvent || hasHydratableEvent;
 }
@@ -4852,10 +4863,12 @@ info)
   const hasChildren = path.node.children.length > 0,
     attributes = normalizeAttributes(path);
   let children;
-  // Server-components claims: ref/on* positions on server-rendered
-  // intrinsics collect here and emit as one guarded whole-attribute hole
-  // (` _bnd="..."` or "") after the loop. Evaluation is gated on the render
-  // context's claims flag so plain SSR never runs the expressions.
+  // Server-components handler positions: ref/on* expressions on
+  // server-rendered intrinsics collect here and emit as one guarded
+  // whole-attribute hole after the loop, where `ssrClaim` turns attribute-slot
+  // reads into `_s:on:*` / `_s:ref` markers (and drops server-local
+  // functions). Evaluation is gated on the render context's claims flag so
+  // plain SSR never runs the expressions.
   const claims = [];
 
   attributes.forEach((attribute) => {
@@ -4898,11 +4911,10 @@ info)
       }
       if (key.startsWith("prop:")) return;
       if (key.startsWith("on")) {
-        // Capture-phase variants can't ride delegation; v1 drops them as
-        // before. `on:x` keeps the raw name, `onXxx` lowercases — the same
-        // event-name derivation as the client runtime.
-        if (info.serverComponents && !key.startsWith("oncapture:")) {
-          const pos = key.startsWith("on:") ? key.slice(3) : key.slice(2).toLowerCase();
+        // `onXxx` lowercases to the event name — the client runtime's own
+        // derivation (`onClick` -> `click`); the position is bound under it.
+        if (info.serverComponents) {
+          const pos = key.slice(2).toLowerCase();
           if (pos) claims.push([pos, value.expression]);
         }
         return;
@@ -4938,6 +4950,30 @@ info)
           checkMember: true,
           checkTags: true
         });
+        // Server components (principles §9.2.3): a dynamic `class`/`style`
+        // is the one attribute shape the plain SSR output serializes INSIDE
+        // template quotes (`class="${ssrClassName(x)}"`), where an attribute-slot
+        // value read at that position — the whole value, or a name's
+        // condition in object form — would be stringified instead of
+        // bound. Under the option the whole attribute is a runtime hole,
+        // `ssrElementAttribute("class", x)`, whose helper emits the same
+        // bytes for a plain value and the position marker for a stand-in.
+        // Object literals stay objects (no inlining) for the same reason.
+        if (info.serverComponents && (key === "class" || key === "style")) {
+          const attr = t.callExpression(registerImportMethod(path, "ssrElementAttribute"), [
+          t.stringLiteral(key),
+          value.expression]
+          );
+          results.template.push("");
+          results.templateValues.push(
+            isDynamicValue ?
+            hoistExpression(path, results, t.arrowFunctionExpression([], attr), {
+              group: true
+            }) :
+            attr
+          );
+          return;
+        }
         let doEscape = true;
         let isBoolean =
         t.isBooleanLiteral(value) ||
@@ -5081,23 +5117,7 @@ info)
     }
   });
   if (claims.length) {
-    // Duplicate event keys were already last-wins-stripped above; `ref` is
-    // exempt from that pass (client semantics fire every ref), so multiple
-    // refs merge into an array value.
-    const byPos = new Map();
-    for (const [pos, expr] of claims) {
-      let list = byPos.get(pos);
-      if (!list) byPos.set(pos, list = []);
-      list.push(expr);
-    }
-    const map = t.objectExpression(
-      [...byPos].map(([pos, exprs]) =>
-      t.objectProperty(
-        t.stringLiteral(pos),
-        exprs.length === 1 ? exprs[0] : t.arrayExpression(exprs)
-      )
-      )
-    );
+    const map = claimMap(claims);
     // `_$sharedConfig.context && _$sharedConfig.context.claims
     //    ? _$ssrClaim({...}) : ""`
     // — the claims flag is only set inside a server component's render
@@ -5243,7 +5263,7 @@ results,
 
 function createElement(
 path,
-{ topLevel, hydratable })
+{ topLevel, hydratable, serverComponents })
 {
   const tagName = getTagName(path.node),
     config = getConfig(path),
@@ -5296,6 +5316,21 @@ path,
     const node = attribute.node;
     return !(t.isJSXAttribute(node) && t.isJSXIdentifier(node.name) && node.name.name === "ref");
   });
+  // Server components (principles §9.2.3): the named `ref`/`on*` attributes
+  // of a spread element are handler positions like a template element's,
+  // and compile to the same claim map — `{ click: expr, ref: [a, b] }`,
+  // duplicate refs merged, a duplicate handler last-wins as the template
+  // path strips it — keyed by the index of the source each attribute sits
+  // before (`<b {...a} onClick={go} {...b}>` → `{ 1: { click: go } }`, the
+  // spreads being sources 0 and 2), and handed to `ssrElement` as a thunk
+  // it reads only inside a server component's render (the gate the template
+  // path's `ssrClaim` guard reads), so plain SSR never evaluates the
+  // expressions. The runtime settles each handler position in source order,
+  // as the client's `spread(el, [a, { onClick: go }, b])` does — a spread at
+  // that index or later that HAS the key owns it — and merges every ref.
+  // Plain SSR output is unchanged (dropped, as a server element has no
+  // handlers to run).
+  const claims = [];
 
   let props;
   // Attributes written AFTER the last spread are markup, not a source: no
@@ -5316,7 +5351,13 @@ path,
   // keys.
   const tail = [];
   const skipKeys = [];
-  if (propAttributes.length === 1 && t.isJSXSpreadAttribute(propAttributes[0].node)) {
+  if (
+  propAttributes.length === 1 &&
+  t.isJSXSpreadAttribute(propAttributes[0].node) &&
+  // A `ref` beside the lone spread is a claim under `serverComponents`;
+  // the loop below places it.
+  !(serverComponents && attributes.length > 1))
+  {
     props = [propAttributes[0].node.argument];
   } else {
     props = [];
@@ -5362,8 +5403,30 @@ path,
           node.name.name;
 
         if (hasChildren && key === "children") return;
-        if (key === "ref") return;
-        if (key.startsWith("prop:") || key.startsWith("on")) return;
+        if (key === "ref" || key.startsWith("on")) {
+          if (serverComponents && t.isJSXExpressionContainer(value)) {
+            const expression = value.expression;
+            const pos = key === "ref" ? "ref" : key.slice(2).toLowerCase();
+            if (
+            pos &&
+            !(
+            t.isJSXEmptyExpression(expression) ||
+            t.isStringLiteral(expression) ||
+            t.isNumericLiteral(expression) ||
+            t.isBooleanLiteral(expression)))
+
+            {
+              // The index of the source this attribute sits before: the
+              // sources pushed so far, plus the running literal if it will
+              // be pushed ahead of the next spread. The literal never
+              // carries a handler key, so a spread's index is either below
+              // this or at/after it — never ambiguous.
+              claims.push([props.length + (runningObject.length ? 1 : 0), pos, expression]);
+            }
+          }
+          return;
+        }
+        if (key.startsWith("prop:")) return;
         if (i > lastSpread) {
           const part = tailAttribute(path, tagName, key, node);
           if (part !== undefined) {
@@ -5440,10 +5503,65 @@ path,
     }
     args.push(registerSkip(path, skipKeys), markup);
   }
+  if (claims.length) {
+    if (!skipKeys.length) args.push(t.identifier("undefined"), t.identifier("undefined"));
+    args.push(t.arrowFunctionExpression([], claimSegments(claims)));
+  }
   const exprs = [t.callExpression(registerImportMethod(path, "ssrElement"), args)];
   return { exprs, template: "", declarations: [], dynamics: [], spreadElement: true };
 }
 
+/**
+ * A spread element's claim map by source index (`createElement`): `{ 1: {
+ * click: go }, 3: { ref: el } }`. A handler position keeps its LAST named
+ * attribute only — the template path's duplicate strip, applied here to the
+ * claims (a later attribute wins whatever sits between, so the earlier one
+ * is never read on either side); refs merge within a segment as `claimMap`
+ * merges them, and across segments at the runtime.
+ */
+function claimSegments(
+claims)
+{
+  const lastHandler = new Map();
+  claims.forEach(([, pos], i) => {
+    if (pos !== "ref") lastHandler.set(pos, i);
+  });
+  const segments = new Map();
+  claims.forEach(([index, pos, expr], i) => {
+    if (pos !== "ref" && lastHandler.get(pos) !== i) return;
+    let list = segments.get(index);
+    if (!list) segments.set(index, list = []);
+    list.push([pos, expr]);
+  });
+  return t.objectExpression(
+    [...segments].map(([index, list]) => t.objectProperty(t.numericLiteral(index), claimMap(list)))
+  );
+}
+
+/**
+ * The compiled claim map of an element's handler positions, `{ click: expr,
+ * ref: [a, b] }`: duplicate event keys were last-wins-stripped by the
+ * template path's duplicate strip (or `claimSegments`); `ref` is exempt from
+ * that pass (client semantics fire every ref), so multiple refs merge into
+ * an array value.
+ */
+function claimMap(claims) {
+  const byPos = new Map();
+  for (const [pos, expr] of claims) {
+    let list = byPos.get(pos);
+    if (!list) byPos.set(pos, list = []);
+    list.push(expr);
+  }
+  return t.objectExpression(
+    [...byPos].map(([pos, exprs]) =>
+    t.objectProperty(
+      t.stringLiteral(pos),
+      exprs.length === 1 ? exprs[0] : t.arrayExpression(exprs)
+    )
+    )
+  );
+}
+
 /**
  * What an attribute after an element's last spread contributes to
  * `ssrElement`'s attribute string. A static is written as the template path

package/package.json

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