@solidjs/babel-plugin 2.0.0-rc.14 → 2.0.0-rc.15

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 3.2s
+created index.js in 2.1s

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @solidjs/babel-plugin
 
+## 2.0.0-rc.15
+
+### Patch Changes
+
+- 617d195: Emit element claims after the element's initial attributes are applied (#3923), at parity across both compilers.
+
+  A fully static `a[href]` / `form[action]` is claimed at the end of its creation statements (after static writes and refs). An element with dynamic bindings captures its owner at creation (`var _o$ = _$getOwner()`) and is claimed as the last statement of its binding effect's callback — `_$claimElement(_el$, _o$)` — in both the single-binding and the multi-binding shapes, so the claim observes the applied values on the first run whether that run is synchronous or lands from a held flush. An element carrying a spread emits no compiled claim: the `spread` runtime claims it after the first application.
+
+- ca15970: Non-hydratable client builds now remove the `value` attribute when a checkbox or radio input binds a nullish `value` or `defaultValue`, matching the runtime fix from #4009, so a checked box submits `"on"` instead of `""`. Both compilers route these bindings through `setProperty` when the input's static `type` is `checkbox` or `radio`, or when its `type` cannot be known at compile time (an expression, `prop:type`, `attr:type`). Text inputs, inputs without a `type`, and textareas still clear to `""` inline (#2957).
+- 43570f8: Reapply a select's bound value when its options arrive after the value was written.
+- 22f942d: SSR: a router can mark links in server HTML (#3878). Element claims never fire during SSR, so plain anchors arrived without `aria-current="page"` / `data-active` — late on hydrated pages, never on pages that do not hydrate. Both compilers now give every candidate `<a href>` in SSR output one hole after its attributes, `ssrLinkClaim(attrs)`, where a render's **link handler** writes the anchor's link state and `""` otherwise. A static anchor's hole is one eager call over a hoisted attributes object (no allocation per render); a dynamic anchor's joins the element's attribute group and reuses the raw value its `href` hole evaluated. Anchors the compiler can rule out — a static non-empty `target`, a `download`, a `rel` naming `external`, an author-written `aria-current`, an empty href or a non-HTTP scheme — get no hole at all. The hole creates no owner and takes no hydration id. A spread anchor's link attributes are collected by `ssrElement` from its winning sources (an anchor's trailing link attributes stay a source instead of baked tail markup).
+
+  New server API (`@experimental`): `setLinkClaim(handler)` sets the handler of the render the caller belongs to — found through the owner chain like `getHydrationWriter()`, so concurrent renders never share one — and returns `false` outside a render; `undefined` clears it. The handler, `(attrs) => string`, receives the anchor's link-relevant attributes (`href`, `target`, `rel`, `download`, `link`, `aria-current`, raw values as written) and returns its attribute markup. An author-written `aria-current` always wins. Server components inline in the document render under the page's handler; a server component's own frame stream has none unless its render sets one.
+
+  Trust marker: the first `setLinkClaim` of a render writes the `links` hydration record once (`_$HY.r.links = 1`, with the shell's hydration script on the document face, a data record on a frame stream). `hasServerLinkState()` (client; `false` on the server) reads it non-destructively, so a link consumer can tell "this page's anchors carry the server's link state" from "no handler ran" and trust the HTML at hydration instead of resolving every anchor's URL at claim. Without a handler the HTML and the hydration ids are byte-for-byte what they were.
+
 ## 2.0.0-rc.14
 
 ### Patch Changes

package/index.js

@@ -46,6 +46,21 @@ const ChildProperties = /*#__PURE__*/new Set([
 "children"]
 );
 
+// The attributes a link handler decides an anchor's link state on
+// (solidjs/solid#3878): the SSR compilers carry the ones present on a
+// candidate `<a href>` into its `ssrLinkClaim` hole, and `ssrElement`
+// collects the same set from a spread anchor's winning sources. `link` is
+// the explicit-links opt-in marker; `aria-current` is the author's, and
+// wins.
+const LinkAttributes = /*#__PURE__*/new Set([
+"href",
+"target",
+"rel",
+"download",
+"link",
+"aria-current"]
+);
+
 // list of Element events that will be delegated
 const DelegatedEvents = /*#__PURE__*/new Set([
 "beforeinput",
@@ -1841,6 +1856,7 @@ const t$1 = t__namespace;
 
 
 
+
 
 
 function isNamedAttribute(
@@ -1977,6 +1993,7 @@ info = {})
       declarations: [],
       exprs: [],
       dynamics: [],
+      claims: [],
       postExprs: [],
       isImportNode,
       isWrapped,
@@ -2054,13 +2071,25 @@ info = {})
   if (!info.skipId) {
     results.id = path.scope.generateUidIdentifier("el$");
   }
-  // Claim contract: a[href] / form[action] elements are claimed at creation
-  // so registered consumers (e.g. a router's link-state layer) see them.
-  // detectExpressions forces the id chain, so claim targets always have one.
-  // Emitted ahead of the attribute expressions — writes to the claimed
-  // attribute recheck through the runtime's setAttribute, so order stays
-  // correct either way, but "claim at creation" reads first.
-  if (results.id && isClaimTarget(path.node)) {
+  // Claim contract (#3923): a[href] / form[action] elements are claimed ONCE,
+  // after their initial attributes are applied, so registered consumers
+  // (e.g. a router's link-state layer) see the element they will manage.
+  // Decided before the attributes are lowered — processSpreads folds a
+  // spread's attributes away — and emitted after: a fully static element
+  // (attributes in the template, writes at creation) is claimed at creation,
+  // after those writes and its refs; an element with dynamic bindings at the
+  // tail of the template root's binding effect, whose first run applies
+  // them (wrapDynamics); a spread element by the spread runtime after the
+  // spread's first application — no compiled claim. detectExpressions forces
+  // the id chain, so claim targets always have one.
+  const claimTarget =
+  !!results.id &&
+  isClaimTarget(path.node) &&
+  !path.node.openingElement.attributes.some((attr) => t$1.isJSXSpreadAttribute(attr));
+  transformAttributes$1(path, results);
+  if (claimTarget) {
+    if (results.dynamics.length) results.claims.push(results.id);else
+
     results.exprs.push(
       t$1.expressionStatement(
         t$1.callExpression(
@@ -2070,7 +2099,6 @@ info = {})
       )
     );
   }
-  transformAttributes$1(path, results);
   if (config.contextToCustomElements && (tagName === "slot" || hasCustomElement)) {
     contextToCustomElement(path, results);
   }
@@ -2112,7 +2140,7 @@ path,
 elem,
 name,
 value,
-{ dynamic, prevId, tagName, styleProperty, classProperty } = {})
+{ dynamic, prevId, tagName, styleProperty, classProperty, checkableInput } = {})
 {
   // pull out namespace
   const config = getConfig(path);
@@ -2183,8 +2211,21 @@ value,
     // Locked/stateful DOM properties (value/checked/...) must go through the
     // runtime in hydratable builds so the hydration claim pass can adopt
     // pre-hydration user state instead of overwriting it (#3182). setProperty
-    // carries the select-microtask and input/textarea nullish special cases.
-    if (config.hydratable && (isLocked || namespace !== "prop")) {
+    // carries the select-value retry and input/textarea nullish special cases.
+    // `<select value>` always goes through it: a microtask only sees options
+    // inserted in the same turn, so options that arrive later never get
+    // selected (#3928). So does a non-literal value/defaultValue on an input
+    // that may be a checkbox or radio: a nullish value must remove the
+    // attribute so the checked box submits its native "on" (#4009, #4017),
+    // and setProperty already tests the live `type` for that.
+    if (
+    config.hydratable && (isLocked || namespace !== "prop") ||
+    name === "value" && tagName === "select" ||
+    checkableInput && (
+    name === "value" || name === "defaultValue") &&
+    !t$1.isStringLiteral(value) &&
+    !t$1.isNumericLiteral(value))
+    {
       return t$1.callExpression(registerImportMethod(path, "setProperty"), [
       elem,
       t$1.stringLiteral(name),
@@ -2197,24 +2238,14 @@ value,
       t$1.memberExpression(elem, t$1.identifier(name)),
       value
     );
-    // handle select/options... TODO: consider other ways in the future
-    // TODO: there may be a race condition here
-    if (name === "value" && tagName === "select") {
-      return t$1.logicalExpression(
-        "||",
-        t$1.callExpression(t$1.identifier("queueMicrotask"), [
-        t$1.arrowFunctionExpression([], assignment)]
-        ),
-        assignment
-      );
-    }
     if (
     (name === "value" || name === "defaultValue") && (
     tagName === "input" || tagName === "textarea") &&
     !t$1.isStringLiteral(value) &&
     !t$1.isNumericLiteral(value))
     {
-      // prevents undefined on input/textarea.value/defaultValue, fallback to empty string
+      // prevents undefined on text input/textarea.value/defaultValue, fallback
+      // to empty string (#2957)
       return t$1.assignmentExpression(
         "=",
         t$1.memberExpression(elem, t$1.identifier(name)),
@@ -2255,6 +2286,35 @@ handler)
   return t$1.isFunction(handler);
 }
 
+/**
+ * Whether an `<input>` may be a checkbox or radio, whose nullish
+ * value/defaultValue removes the `value` attribute (restoring the native "on"
+ * submission value) instead of clearing it to "" like a text field (#4017).
+ * Only a plain `type` written as a string literal is resolved here; a missing
+ * `type` is a text input. Anything else (an expression, `prop:type`,
+ * `attr:type`, a spread) is unknown and treated as possibly checkable, which
+ * stays correct because setProperty tests the live `type`. Mirrored by the
+ * native compiler's `input_may_be_checkable` (dom/attrs.rs).
+ */
+function inputMayBeCheckable(node) {
+  let checkable = false;
+  for (const attribute of node.openingElement.attributes) {
+    if (t$1.isJSXSpreadAttribute(attribute)) return true;
+    const name = attribute.name;
+    if (t$1.isJSXNamespacedName(name)) {
+      if (name.name.name === "type") return true;
+      continue;
+    }
+    if (name.name !== "type") continue;
+    let value = attribute.value;
+    if (t$1.isJSXExpressionContainer(value)) value = value.expression;
+    if (value == null) checkable = false;else
+    if (t$1.isStringLiteral(value)) checkable = /^(checkbox|radio)$/i.test(value.value);else
+    return true;
+  }
+  return checkable;
+}
+
 function transformAttributes$1(
 path,
 results)
@@ -2267,7 +2327,8 @@ results)
   const tagName = getTagName(path.node),
     hasChildren = path.node.children.length > 0,
     hasSpread = attributes.some((attribute) => t$1.isJSXSpreadAttribute(attribute.node)),
-    config = getConfig(path);
+    config = getConfig(path),
+    checkableInput = tagName === "input" && inputMayBeCheckable(path.node);
   const refs = [];
 
   // preprocess spreads
@@ -2945,6 +3006,7 @@ results)
           key,
           value: value.expression,
           tagName,
+          checkableInput,
           styleProperty: isStyleProperty,
           classProperty: isClassProperty
         });
@@ -2953,6 +3015,7 @@ results)
           t$1.expressionStatement(
             setAttr$1(attribute, elem, key, value.expression, {
               tagName,
+              checkableInput,
               styleProperty: isStyleProperty,
               classProperty: isClassProperty
             })
@@ -3001,7 +3064,10 @@ results)
       {
         results.exprs.push(
           t$1.expressionStatement(
-            setAttr$1(attribute, elem, key, staticValue, { tagName })
+            setAttr$1(attribute, elem, key, staticValue, {
+              tagName,
+              checkableInput
+            })
           )
         );
       } else {
@@ -3168,6 +3234,7 @@ config)
       results.declarations.push(...child.declarations);
       results.exprs.push(...child.exprs);
       results.dynamics.push(...child.dynamics);
+      if (child.claims) results.claims.push(...child.claims);
       childPostExprs.push(...(child.postExprs || []));
       results.hasHydratableEvent =
       results.hasHydratableEvent || child.hasHydratableEvent;
@@ -3512,6 +3579,23 @@ wrap)
 {
   const config = getConfig(path);
   if (result.id) {
+    // Claim targets with dynamic bindings are claimed at the tail of the
+    // binding effect's first run, under the owner the template is created
+    // with: the effect's callback runs ownerless when a held mount lands, so
+    // the owner is captured here, at creation, and handed to the claim.
+    let ownerId;
+    if (result.claims?.length) {
+      ownerId = path.scope.generateUidIdentifier("o$");
+      result.declarations.push(
+        t__namespace.variableDeclarator(
+          ownerId,
+          t__namespace.callExpression(
+            registerImportMethod(path, "getOwner", getRendererConfig(path, "dom").moduleName),
+            []
+          )
+        )
+      );
+    }
     registerTemplate(path, result);
     const decl = result.decl;
     if (
@@ -3520,7 +3604,7 @@ wrap)
     {
       return decl.declarations[0].init;
     } else {
-      const dynamicsStmt = wrapDynamics$1(path, result.dynamics);
+      const dynamicsStmt = wrapDynamics$1(path, result.dynamics, result.claims, ownerId);
       const stmts = [
       decl,
       ...result.exprs,
@@ -3662,13 +3746,31 @@ function wrapReadShallow(path, key, value) {
   );
 }
 
-function wrapDynamics$1(path, dynamics) {
+function wrapDynamics$1(
+path,
+dynamics,
+claims = [],
+ownerId)
+{
   if (!dynamics.length) return;
   const config = getConfig(path);
 
   // dynamics are only queued when effectWrapper is configured (element.ts
   // guards every push), so the name is always a string here
   const effectWrapperId = registerImportMethod(path, config.effectWrapper, undefined);
+  // The claim contract's mount claims for this root's claim targets with
+  // dynamic bindings (element.ts): the tail of the effect body, so the first
+  // run claims after it applied the initial attributes; `claimElement` is
+  // once-per-element, so reruns cost one check. `ownerId` is the owner
+  // captured at creation (createTemplate) the handlers run under.
+  const claimStatements = claims.map((id) =>
+  t__namespace.expressionStatement(
+    t__namespace.callExpression(
+      registerImportMethod(path, "claimElement", getRendererConfig(path, "dom").moduleName),
+      [id, ownerId]
+    )
+  )
+  );
   // `sourceNames.bindings`: the effect is named by what it writes — each
   // binding's `<tag>.<attribute>` as written (undoing the `prop:` the locked
   // DOM property pre-pass added to `value`, `checked`, …), the merged effect
@@ -3713,12 +3815,14 @@ function wrapDynamics$1(path, dynamics) {
         t__namespace.expressionStatement(
           setAttr$1(path, dynamics[0].elem, dynamics[0].key, newValue, {
             tagName: dynamics[0].tagName,
+            checkableInput: dynamics[0].checkableInput,
             dynamic: true,
             prevId: prevValue,
             styleProperty: dynamics[0].styleProperty,
             classProperty: dynamics[0].classProperty
           })
-        )]
+        ),
+        ...claimStatements]
         )
       ),
       ...label]
@@ -3732,7 +3836,9 @@ function wrapDynamics$1(path, dynamics) {
   const statements = [];
   const properties = [];
 
-  dynamics.forEach(({ elem, key, value, tagName, styleProperty, classProperty }, index) => {
+  dynamics.forEach((binding, index) => {
+    const { elem, key, tagName, styleProperty, classProperty, checkableInput } = binding;
+    let value = binding.value;
     const propIdent = t__namespace.identifier(getNumberedId(index));
     const propMember = t__namespace.memberExpression(prevId, propIdent);
     const optionalPropMember = t__namespace.optionalMemberExpression(prevId, propIdent, false, true);
@@ -3750,7 +3856,8 @@ function wrapDynamics$1(path, dynamics) {
           setAttr$1(path, elem, key, propIdent, {
             tagName,
             dynamic: true,
-            prevId: optionalPropMember
+            prevId: optionalPropMember,
+            checkableInput
           })
         )
       );
@@ -3770,7 +3877,8 @@ function wrapDynamics$1(path, dynamics) {
               tagName,
               dynamic: true,
               styleProperty,
-              classProperty
+              classProperty,
+              checkableInput
             })
           )
         )
@@ -3783,7 +3891,7 @@ function wrapDynamics$1(path, dynamics) {
     t__namespace.arrowFunctionExpression([], t__namespace.objectExpression(values)),
     t__namespace.arrowFunctionExpression(
       [t__namespace.objectPattern(properties.map((id) => t__namespace.objectProperty(id, id, false, true))), prevId],
-      t__namespace.blockStatement(statements)
+      t__namespace.blockStatement([...statements, ...claimStatements])
     ),
     ...label]
     )
@@ -3969,6 +4077,45 @@ function appendSkips(path, skips) {
   );
 }
 
+/**
+ * The link-attributes object of a static anchor's `ssrLinkClaim` hole
+ * (ssr/element.ts `transformAttributes`): `{ href: "/about" }`, the anchor's
+ * link-relevant attributes as the literals they were written as. Hoisted to
+ * the module like a template — one object per distinct attribute set,
+ * shared by every anchor that writes the same one — so the hole allocates
+ * nothing per render.
+ */
+function registerLinkAttrs(path, entries) {
+  const data = path.scope.getProgramParent().data;
+  const records = data.ssrLinkAttrs || (data.ssrLinkAttrs = []);
+  const key = entries.map(([name, value]) => `${name}=${value}`).join("\0");
+  const found = records.find((r) => r.key === key);
+  if (found) return found.id;
+  const id = path.scope.generateUidIdentifier("lk$");
+  records.push({
+    key,
+    id,
+    object: t__namespace.objectExpression(
+      entries.map(([name, value]) => t__namespace.objectProperty(linkAttrsKey(name), t__namespace.stringLiteral(value)))
+    )
+  });
+  return id;
+}
+
+/** The key of a link-attributes object property: `href`, or `"aria-current"`. */
+function linkAttrsKey(name) {
+  return t__namespace.isValidIdentifier(name) ? t__namespace.identifier(name) : t__namespace.stringLiteral(name);
+}
+
+function appendLinkAttrs(path, records) {
+  path.node.body.unshift(
+    t__namespace.variableDeclaration(
+      "var",
+      records.map((r) => t__namespace.variableDeclarator(r.id, r.object))
+    )
+  );
+}
+
 /**
  * Hoisted props shapes (SSR, #3511).
  *
@@ -4905,6 +5052,93 @@ function normalizeAttributes(path) {
   return attributes;
 }
 
+/**
+ * The compile-time value of a JSX attribute, as the SSR static branch sees
+ * it: `null` for a bare attribute (`<a link>`), the literal for a string /
+ * number / boolean (quoted or in a container), `undefined` when the value is
+ * an expression the compiler cannot see through (dynamic, or an empty
+ * container the attribute drops out for).
+ */
+function staticAttributeValue(
+value)
+{
+  if (value == null) return null;
+  if (t.isStringLiteral(value)) return value.value;
+  if (!t.isJSXExpressionContainer(value)) return undefined;
+  const expression = value.expression;
+  if (t.isStringLiteral(expression) || t.isNumericLiteral(expression)) return expression.value;
+  if (t.isBooleanLiteral(expression)) return expression.value;
+  return undefined;
+}
+
+// A URL scheme at the start of an href. `http:`/`https:` (and a
+// protocol-relative `//host`) may still be this origin — only the handler,
+// which knows the request, can say — so only another scheme rules an
+// anchor out at compile time.
+const HREF_SCHEME = /^([a-zA-Z][a-zA-Z0-9+.-]*):/;
+
+/**
+ * Whether an anchor (the template path's, no spread) gets the `ssrLinkClaim`
+ * hole (solidjs/solid#3878): it has an `href`, and nothing the compiler can
+ * see rules it out as the current page — the anchors a link handler would
+ * answer `""` for however the request looks. A static non-empty `target`,
+ * a `download`, a `rel` naming `external`, an author-written `aria-current`
+ * (hers to keep), an empty href or one with a non-HTTP scheme (`mailto:`,
+ * `tel:`, `javascript:` …) get no hole and no per-render call; a dynamic
+ * value in any of these positions is the handler's to judge at runtime.
+ * Mirrors the DOM transform's `isClaimTarget` (`a[href]`), narrowed.
+ */
+function isLinkClaimCandidate(attributes) {
+  let href = false;
+  for (const attribute of attributes) {
+    const node = attribute.node;
+    if (!t.isJSXAttribute(node) || !t.isJSXIdentifier(node.name)) continue;
+    const key = node.name.name;
+    if (!LinkAttributes.has(key)) continue;
+    if (t.isJSXExpressionContainer(node.value) && t.isJSXEmptyExpression(node.value.expression))
+    continue;
+    const value = staticAttributeValue(node.value);
+    if (key === "href") {
+      if (value === false) continue;
+      href = true;
+      if (value === undefined) continue;
+      // bare `href`, `href=""`, `href={true}`: an empty href is no link
+      if (value === null || value === true || value === "") return false;
+      const scheme = typeof value === "string" ? HREF_SCHEME.exec(value) : null;
+      if (scheme && scheme[1].toLowerCase() !== "http" && scheme[1].toLowerCase() !== "https")
+      return false;
+      continue;
+    }
+    // A dynamic value is the handler's to judge; `={false}` omits the attribute.
+    if (value === undefined || value === false) continue;
+    switch (key) {
+      case "target":
+        // A bare `target`, `target=""` or `target={true}` is the empty
+        // target — still a link.
+        if (value !== null && value !== true && value !== "") return false;
+        break;
+      case "rel":
+        if (typeof value === "string" && value.split(/\s+/).includes("external")) return false;
+        break;
+      case "download":
+      case "aria-current":
+        // Present in any form: a download, or the author's own current marker.
+        return false;
+      // `link`: the explicit-links opt-in marker — the handler reads it.
+    }
+  }
+  return href;
+}
+
+/**
+ * The attribute entries of a candidate anchor's `ssrLinkClaim` hole,
+ * collected by `transformAttributes` as it writes each attribute: a static
+ * value as the string it serializes to, a dynamic value as the function-local
+ * temp its attribute hole assigns (`_lv$N`), flagged when that hole is a
+ * thunk (`isDynamic`) so the link hole is one too and reads the temp after it.
+ */
+
+
 function transformAttributes(
 path,
 results,
@@ -4915,6 +5149,16 @@ info)
   const hasChildren = path.node.children.length > 0,
     attributes = normalizeAttributes(path);
   let children;
+  // Link claims (solidjs/solid#3878): a candidate anchor gets one hole after
+  // its attributes — `ssrLinkClaim(attrs)` — where a render's link handler
+  // writes the anchor's link state (`aria-current="page"`, `data-active`)
+  // into the server HTML, and `""` otherwise. `attrs` is the anchor's
+  // link-relevant attributes: a static anchor's are a hoisted object, so the
+  // hole is one eager call with no allocation per render; a dynamic one's
+  // join the element's attribute group and reuse the values its attribute
+  // holes evaluated. The hole never takes a hydration id.
+  const linkEntries =
+  tagName === "a" && isLinkClaimCandidate(attributes) ? [] : null;
   // 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
@@ -5000,6 +5244,22 @@ info)
           checkMember: true,
           checkTags: true
         });
+        // A candidate anchor's dynamic link attribute: the hole evaluates the
+        // raw value ONCE into a function-local temp (`_$escape(_lv$ = expr,
+        // true)`) that the link hole reads after it — the handler sees the
+        // value as written, not attribute-escaped. A template literal keeps
+        // its inline-quoted slot: the whole value is escaped at runtime
+        // instead of its parts, the same bytes (escaping is per character),
+        // and a template literal is never nullish.
+        let linkTemplate = false;
+        if (linkEntries !== null && LinkAttributes.has(key)) {
+          const expression = value.expression;
+          linkTemplate = t.isTemplateLiteral(expression);
+          const temp = path.scope.generateUidIdentifier("lv$");
+          path.scope.push({ id: temp, kind: "var" });
+          value.expression = t.assignmentExpression("=", temp, expression);
+          linkEntries.push([key, t.cloneNode(temp), !!isDynamicValue]);
+        }
         // Server components (principles §9.2.3) need a whole-attribute
         // serializer that can emit a position marker for a binding-slot
         // value. The ordinary class/style serializers cannot bind slots.
@@ -5141,7 +5401,7 @@ info)
         );
         const expression = value.expression;
 
-        if (!(doEscape || isBoolean) || t.isLiteral(expression)) {
+        if (!(doEscape || isBoolean) || t.isLiteral(expression) || linkTemplate) {
           if (isBoolean) {
             t.isBooleanLiteral(expression) &&
             expression.value === true &&
@@ -5170,6 +5430,16 @@ info)
       const isBoolean = !!booleanLiteral;
       if (booleanLiteral && !booleanLiteral.value) return;
       appendToTemplate(results.template, ` ${key}`);
+      // A candidate anchor's static link attribute travels as the string the
+      // attribute carries: a bare attribute's is `""`.
+      if (linkEntries !== null && LinkAttributes.has(key))
+      linkEntries.push([
+      key,
+      !staticValue || isBoolean ?
+      "" :
+      String(staticValue.value),
+      false]
+      );
       if (!staticValue) return;
       let text = isBoolean ?
       "" :
@@ -5188,6 +5458,40 @@ info)
       );
     }
   });
+  if (linkEntries !== null) {
+    const ssrLinkClaim = registerImportMethod(path, "ssrLinkClaim");
+    let hole;
+    if (linkEntries.every(([, value]) => typeof value === "string")) {
+      // Every link attribute static: `_$ssrLinkClaim(_lk$N)` over the hoisted
+      // object, evaluated in argument position like a hydration key.
+      hole = t.callExpression(ssrLinkClaim, [
+      registerLinkAttrs(
+        path,
+        linkEntries.map(([key, value]) => [key, value])
+      )]
+      );
+    } else {
+      // `_$ssrLinkClaim({ href: _lv$, rel: "noopener" })`, built per render.
+      // A thunk when any captured attribute hole is one — it must run after
+      // them — and groupable, so it joins the element's attribute group.
+      hole = t.callExpression(ssrLinkClaim, [
+      t.objectExpression(
+        linkEntries.map(([key, value]) =>
+        t.objectProperty(
+          linkAttrsKey(key),
+          typeof value === "string" ? t.stringLiteral(value) : value
+        )
+        )
+      )]
+      );
+      if (linkEntries.some(([,, dynamic]) => dynamic))
+      hole = hoistExpression(path, results, t.arrowFunctionExpression([], hole), {
+        group: true
+      });
+    }
+    results.template.push("");
+    results.templateValues.push(hole);
+  }
   if (claims.length) {
     const map = claimMap(claims);
     // `_$sharedConfig.context && _$sharedConfig.context.claims
@@ -5498,7 +5802,11 @@ path,
           return;
         }
         if (key.startsWith("prop:")) return;
-        if (i > lastSpread) {
+        // An anchor's link-relevant attributes stay a source, never baked
+        // markup: `ssrElement` collects them from the walk for the render's
+        // link handler (solidjs/solid#3878), and a baked tail is invisible to
+        // it.
+        if (i > lastSpread && !(tagName === "a" && LinkAttributes.has(key))) {
           const part = tailAttribute(path, tagName, key, node);
           if (part !== undefined) {
             if (typeof part === "string" && typeof tail[tail.length - 1] === "string")
@@ -15167,8 +15475,10 @@ var postprocess = (path, state) => {
     if (hoisted) path.node.body.unshift(...hoisted);
   }
   // Spread-element skip predicates sit between the templates and the hoisted
-  // props shapes (unshifted after them, before the templates unshift).
+  // props shapes (unshifted after them, before the templates unshift); the
+  // static anchors' link-attributes objects right after the templates.
   if (data.ssrSkips?.length) appendSkips(path, data.ssrSkips);
+  if (data.ssrLinkAttrs?.length) appendLinkAttrs(path, data.ssrLinkAttrs);
 
   if (data.events) {
     path.node.body.push(

package/package.json

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