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

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 3.3s

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @solidjs/babel-plugin
 
+## 2.0.0-rc.16
+
+### Patch Changes
+
+- 4a99c84: `sourceNames` gains a `locations` kind (and the plugin a `root` option): component and binding labels carry a `file:line:col` for diagnostics. `createComponent(Home, props, "Home", "src/App.tsx:12:5")` points at the `<Home` opening element (DOM and SSR output); a binding's options gain `loc` after `name` — the attribute's start for an attribute effect (a merged effect points at the first attribute it lists), the hole's `{` for an insert — and a spread passes it after the tag (`spread(el, props, false, undefined, "div", "src/App.tsx:20:12")`). The path is relative to `root` (default: the working directory) with `/` separators; line and column are 1-based, so a dev server links the location straight to the source. Like the other kinds, `locations` follows `dev` when unset, `true` turns every kind on, and the object form picks; a location is only emitted beside its label, and never when Babel has no `filename` for the module.
+- 3f36f77: Server components: binding slots are removed. Client components in slots replace them: place a client component through a `Slot` (`<props.x />`) where the server's markup needs client behavior, or a form `action` for a mutation. Removed with them: the `BindingSlot`, `SlotOutput` and `SlotError` types, the lazy `@solidjs/web/frames/bind` entry and its `"bind"` tier, the `_s:*` position markers and the compiled `ssrClaim` hole, the effect of the `serverComponents` compiler option (`@solidjs/compiler` and `@solidjs/babel-plugin` still accept it, so existing build configs keep working, and ignore it), and the `BINDING_SLOT_POSITION` diagnostic code (`@solidjs/signals`' `DiagnosticCode`, `solid-js`'s `diagnostics.json`). Ordinary slots, their `slot:<id>` ranges and records, and `$key` are unchanged.
+- d0ba31c: SSR evaluates a `ref` expression beside a spread, as it already does without one, so a ref factory's owned setup (`ref={tooltip()}`) runs on the server too and the hydration ids after it line up. The ref itself is still never called on the server (#4081). Under `serverComponents` the same holds outside a server component's render, where a ref expression was never evaluated on either path; inside one the claim evaluates it, once.
+
+## 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/README.md

@@ -129,16 +129,24 @@ Development output. With `hydratable`, emits the hydration walk validation helpe
 
 ### sourceNames
 
-- Type: `boolean | { components?: boolean; bindings?: boolean }`
+- Type: `boolean | { components?: boolean; bindings?: boolean; locations?: boolean }`
 - Default: follows `dev` — every kind on when `dev: true`, off otherwise
 
 Names as written in source, carried into the output so the dev and observe runtimes can label the reactive graph — in diagnostic `ownerPath`s, attribution chains, and the Performance panel tracks — even after a minifier renames everything. Unset, the option follows `dev`; `true`/`false` sets every kind (`sourceNames: false` opts a dev build out); the object form picks, and each kind it leaves unspecified follows `dev`. The production runtimes ignore the names, and production output (`dev: false`) is byte-identical whether the option is set or not. `@solidjs/compiler`'s `transform()` takes the same option with the same shape and defaults.
 
 - `components`: emit the tag as written as a third `createComponent` argument — `<Home />` compiles to `createComponent(Home, props, "Home")`, `<Ui.Button />` to `"Ui.Button"` — so each component's owner reads `<Home>` even when a `lazy()`/HMR wrapper hides the function. Applies to DOM and SSR output; for SSR the compiler keeps the `createComponent` call it otherwise inlines to `Comp(props)`, so the server runtime labels the owner the same way (prod SSR output, without the option, is unchanged). Universal and dynamic output are unaffected.
 - `bindings`: every compiled binding effect is named by what it writes, as a trailing options argument the dev and observe runtimes read and production ignores. An attribute effect gets `<tag>.<attribute>` as written — `<span textContent={label()} />` compiles to `effect(() => label(), v => …, { name: "span.textContent" })`, `class:active` to `div.class:active`, a `style={{ color: c() }}` property to `div.style:color` — and a template's merged effect lists all of its bindings (`"button.class, span.textContent"`). A hole's insert is named for the parent it fills: `<div>{count()}</div>` compiles to `insert(el, count, undefined, undefined, { name: "div.children" })`; a static child (a component call, a literal) creates no effect and gets no name. A spread passes the tag as its trailing argument (`spread(el, props, false, undefined, "div")`), and the runtime labels its attribute effect `div.spread` and its children insert `div.children`. DOM output only.
+- `locations`: where the JSX is written, beside each label the other two kinds emit, as `file:line:col` — the module path relative to [`root`](#root) with `/` separators, line and column 1-based (the stack-trace convention, so a dev server links `http://localhost:5173/src/App.tsx:18:3` to the right place). A component call gets it as a fourth argument: `<Home />` compiles to `createComponent(Home, props, "Home", "src/App.tsx:12:5")`, the location of `<Home`. A binding gets `loc` after `name` in its options: an attribute effect points at the attribute (`{ name: "div.class", loc: "src/App.tsx:14:7" }`; a merged effect at the first attribute it lists; a property split out of a `style={{…}}` / `class={{…}}` object at that object attribute), a hole's insert at its `{`, and a spread passes it after the tag (`spread(el, props, false, undefined, "div", "src/App.tsx:20:12")`), the first spread attribute's start. A location is only emitted where its label is, and only when Babel knows the module's `filename` (a file outside `root` gets a `../` path). The dev and observe runtimes print it in diagnostic reports; production ignores it.
 
 These are the JSX-level kinds — what a JSX compiler can see. Naming the primitives themselves (`createSignal(0, { name: "count" })`, `createCounter.value` inside a composed primitive) is not a JSX-transform feature and this plugin does not do it: it is `@solidjs/compiler`'s standalone `transformSourceNames` pass, which the build tool runs on every module — `.ts`, `.js`, and JSX files alike — independently of which JSX compiler handles the file. `@solidjs/vite-plugin` (its `solid: { sourceNames }` option, solid-vite-plugin #371) wires both: the JSX-level kinds through this option and primitive names through the standalone pass, for its dev and `observe` postures.
 
+### root
+
+- Type: `string`
+- Default: the working directory (Babel's `cwd`)
+
+Project root that `sourceNames.locations` makes the module path relative to — the build tool passes its project root so the location is a dev-server path. A relative `root` is resolved against the working directory.
+
 ### delegateEvents
 
 - Type: `boolean`
@@ -248,13 +256,6 @@ const template = <div>Hello</div>;
 
 Inline style attributes in templates when the value is a string or `Record<string, string>`. Disable for strong CSP configurations; styles are then set at runtime.
 
-### serverComponents
-
-- Type: `boolean`
-- Default: `false`
-
-SSR-only: keep attribute-slot positions on intrinsic elements bindable — `ref` / `onXxx` handlers 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
 
 - Type: `boolean`

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",
@@ -1639,6 +1654,23 @@ attributes,
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -1691,7 +1723,6 @@ const config = {
   memoWrapper: "memo",
   validate: true,
   inlineStyles: true,
-  serverComponents: false,
   hoistProps: true
 };
 
@@ -1702,8 +1733,12 @@ const config = {
  */
 function sourceNames(config) {
   const value = config.sourceNames ?? config.dev;
-  if (typeof value === "boolean") return { components: value, bindings: value };
-  return { components: value.components ?? config.dev, bindings: value.bindings ?? config.dev };
+  if (typeof value === "boolean") return { components: value, bindings: value, locations: value };
+  return {
+    components: value.components ?? config.dev,
+    bindings: value.bindings ?? config.dev,
+    locations: value.locations ?? config.dev
+  };
 }
 
 /**
@@ -1716,6 +1751,74 @@ function namesBindings(config) {
   return config.generate === "dom" && sourceNames(config).bindings;
 }
 
+/**
+ * The `sourceNames.locations` string for `node`: `<file>:<line>:<column>`,
+ * the file relative to `config.root` (default: Babel's `cwd`, the working
+ * directory) with posix separators, line and column both 1-based — the
+ * stack-trace / editor convention, so a browser links
+ * `http://localhost:5173/src/App.tsx:18:3` to the right place. Babel's
+ * `loc.start.column` is 0-based, so it is bumped by one here (the refresh
+ * pass's `location` keeps Babel's 0-based column; that is a different
+ * consumer). A file outside `root` yields a path starting with `..`, emitted
+ * as-is. `undefined` when the kind is off, when Babel was given no `filename`
+ * for the module, or when `node` is synthetic and carries no `loc`.
+ *
+ * `@solidjs/compiler` computes the same string with `relative_id` so both
+ * compilers print identical output.
+ */
+function sourceLocation(path, node) {
+  const config = getConfig(path);
+  if (!sourceNames(config).locations) return;
+  const start = node.loc?.start;
+  if (!start) return;
+  const opts = path.hub.file?.opts;
+  const filename = opts?.filename;
+  if (!filename) return;
+  const cwd = opts?.cwd ?? "";
+  const root = config.root ? resolve(cwd, config.root) : resolve(cwd, cwd);
+  return `${relative(root, resolve(cwd, filename))}:${start.line}:${start.column + 1}`;
+}
+
+/**
+ * A binding's `{ name, loc? }` options literal — `name` first, then `loc`
+ * only when there is one, so both JSX compilers print the same text.
+ */
+function bindingOptions(name, loc) {
+  const properties = [t__namespace.objectProperty(t__namespace.identifier("name"), t__namespace.stringLiteral(name))];
+  if (loc !== undefined)
+  properties.push(t__namespace.objectProperty(t__namespace.identifier("loc"), t__namespace.stringLiteral(loc)));
+  return t__namespace.objectExpression(properties);
+}
+
+// Path arithmetic without node's `path` (this plugin bundles for any host):
+// the same steps as `@solidjs/compiler`'s `relative_id` — resolve both paths
+// against `cwd`, fold `.`/`..`, drop the common prefix.
+
+/** `p` resolved against `base` (posix separators, `.`/`..` folded), as segments. */
+function resolve(base, p) {
+  const posix = p.replace(/\\/g, "/");
+  const absolute = /^(\/|[A-Za-z]:\/)/.test(posix);
+  const joined = absolute ? posix : `${base.replace(/\\/g, "/")}/${posix}`;
+  const segments = [];
+  for (const segment of joined.split("/")) {
+    if (segment === "." || segment === "" && segments.length) continue;
+    if (segment === "..") {
+      // Never past the root marker (`""` for `/…`, `C:` for a drive).
+      if (segments.length > 1) segments.pop();
+      continue;
+    }
+    segments.push(segment);
+  }
+  return segments;
+}
+
+/** `file` relative to `root`, both resolved: `..` per root segment left, then the file's rest. */
+function relative(root, file) {
+  let i = 0;
+  while (i < root.length && i < file.length && root[i] === file[i]) i++;
+  return [...root.slice(i).map(() => ".."), ...file.slice(i)].join("/");
+}
+
 const InlineElements = [
 "a",
 "abbr",
@@ -1841,6 +1944,7 @@ const t$1 = t__namespace;
 
 
 
+
 
 
 function isNamedAttribute(
@@ -1977,6 +2081,7 @@ info = {})
       declarations: [],
       exprs: [],
       dynamics: [],
+      claims: [],
       postExprs: [],
       isImportNode,
       isWrapped,
@@ -2054,13 +2159,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 +2187,6 @@ info = {})
       )
     );
   }
-  transformAttributes$1(path, results);
   if (config.contextToCustomElements && (tagName === "slot" || hasCustomElement)) {
     contextToCustomElement(path, results);
   }
@@ -2112,7 +2228,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 +2299,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 +2326,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 +2374,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 +2415,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
@@ -2437,6 +2586,8 @@ results)
           t$1.jsxExpressionContainer(p.value)
         );
         newAttr._styleProperty = true;
+        // The split-out property is located at the `style` attribute it came from.
+        newAttr.loc = styleObjectAttribute.node.loc;
         path.
         get("openingElement").
         node.attributes.splice(Number(styleObjectAttribute.key) + ++i, 0, newAttr);
@@ -2487,13 +2638,16 @@ results)
     ))
     {
       classArrayAttribute.node.value = t$1.stringLiteral(staticClasses.join(" "));
+      const dynamicClassAttribute = t$1.jsxAttribute(
+        t$1.jsxIdentifier("class"),
+        t$1.jsxExpressionContainer(dynamicClassElement)
+      );
+      // `sourceNames.locations`: the split-out object locates at the array
+      // attribute it came from.
+      dynamicClassAttribute.loc = classArrayAttribute.node.loc;
       path.
       get("openingElement").
-      node.attributes.splice(
-        Number(classArrayAttribute.key) + 1,
-        0,
-        t$1.jsxAttribute(t$1.jsxIdentifier("class"), t$1.jsxExpressionContainer(dynamicClassElement))
-      );
+      node.attributes.splice(Number(classArrayAttribute.key) + 1, 0, dynamicClassAttribute);
     }
   }
 
@@ -2539,6 +2693,8 @@ results)
           t$1.jsxExpressionContainer(p.value)
         );
         newAttr._classProperty = true;
+        // The split-out property is located at the `class` attribute it came from.
+        newAttr.loc = classListAttribute.node.loc;
         path.
         get("openingElement").
         node.attributes.splice(Number(classListAttribute.key) + ++i, 0, newAttr);
@@ -2945,14 +3101,20 @@ results)
           key,
           value: value.expression,
           tagName,
+          checkableInput,
           styleProperty: isStyleProperty,
-          classProperty: isClassProperty
+          classProperty: isClassProperty,
+          // `sourceNames.locations`: the attribute's start (for a property
+          // split out of a `style={{…}}` / `class={{…}}` object, the
+          // object attribute's start — see the pre-passes above).
+          loc: sourceLocation(attribute, attribute.node)
         });
       } else {
         results.exprs.push(
           t$1.expressionStatement(
             setAttr$1(attribute, elem, key, value.expression, {
               tagName,
+              checkableInput,
               styleProperty: isStyleProperty,
               classProperty: isClassProperty
             })
@@ -3001,7 +3163,10 @@ results)
       {
         results.exprs.push(
           t$1.expressionStatement(
-            setAttr$1(attribute, elem, key, staticValue, { tagName })
+            setAttr$1(attribute, elem, key, staticValue, {
+              tagName,
+              checkableInput
+            })
           )
         );
       } else {
@@ -3103,6 +3268,10 @@ config)
         if (!transformed) return memo;
         transformed.allocatesIds = allocatesIds;
         transformed.functionHole = functionHole;
+        // `sourceNames.locations`: where the hole is written, for its insert
+        // (a spread child `{...items()}` is a hole too).
+        if (child.isJSXExpressionContainer() || child.isJSXSpreadChild())
+        transformed.loc = sourceLocation(child, child.node);
         const i = memo.length;
         if (transformed.text && i && memo[i - 1].text) {
           memo[i - 1].template =
@@ -3168,6 +3337,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;
@@ -3185,14 +3355,11 @@ config)
       // is inserted directly and creates no effect to name.
       const accessorHole =
       child.dynamic || child.functionHole;
+      // `sourceNames.locations`: `loc` after `name`, the hole's `{` start.
       const emitInsert = (args) => {
         if (accessorHole && namesBindings(getConfig(path))) {
           while (args.length < 4) args.push(t$1.identifier("undefined"));
-          args.push(
-            t$1.objectExpression([
-            t$1.objectProperty(t$1.identifier("name"), t$1.stringLiteral(`${tagName}.children`))]
-            )
-          );
+          args.push(bindingOptions(`${tagName}.children`, child.loc));
         }
         results.exprs.push(t$1.expressionStatement(t$1.callExpression(insert, args)));
       };
@@ -3492,7 +3659,14 @@ attributes,
   // `sourceNames.bindings`: the tag as written rides as spread's trailing
   // argument (past the runtime-only `skip` slot); the runtime labels its
   // attribute effect `<tag>.spread` and its children insert `<tag>.children`.
-  if (namesBindings(config)) args.push(t$1.identifier("undefined"), t$1.stringLiteral(tagName));
+  // `sourceNames.locations`: the first spread attribute's start (`{...`)
+  // follows the name as one more string argument.
+  if (namesBindings(config)) {
+    args.push(t$1.identifier("undefined"), t$1.stringLiteral(tagName));
+    const spread = attributes.find((a) => t$1.isJSXSpreadAttribute(a.node));
+    const loc = spread && sourceLocation(spread, spread.node);
+    if (loc !== undefined) args.push(t$1.stringLiteral(loc));
+  }
 
   return [
   filteredAttributes,
@@ -3512,6 +3686,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 +3711,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,31 +3853,47 @@ 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
   // listing all of its bindings — as a trailing `{ name }` options argument.
+  // `sourceNames.locations` adds `loc` after it: the first binding's
+  // attribute start (a merged effect points at the first attribute it lists).
   const label = namesBindings(config) ?
   [
-  t__namespace.objectExpression([
-  t__namespace.objectProperty(
-    t__namespace.identifier("name"),
-    t__namespace.stringLiteral(
-      dynamics.
-      map(
-        (d) =>
-        `${d.tagName}.${isLockedDOMProperty(d.tagName, d.key) ? d.key.replace(/^prop:/, "") : d.key}`
-      ).
-      join(", ")
-    )
-  )]
+  bindingOptions(
+    dynamics.
+    map(
+      (d) =>
+      `${d.tagName}.${isLockedDOMProperty(d.tagName, d.key) ? d.key.replace(/^prop:/, "") : d.key}`
+    ).
+    join(", "),
+    dynamics.find((d) => d.loc !== undefined)?.loc
   )] :
 
   [];
@@ -3713,12 +3920,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 +3941,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 +3961,8 @@ function wrapDynamics$1(path, dynamics) {
           setAttr$1(path, elem, key, propIdent, {
             tagName,
             dynamic: true,
-            prevId: optionalPropMember
+            prevId: optionalPropMember,
+            checkableInput
           })
         )
       );
@@ -3770,7 +3982,8 @@ function wrapDynamics$1(path, dynamics) {
               tagName,
               dynamic: true,
               styleProperty,
-              classProperty
+              classProperty,
+              checkableInput
             })
           )
         )
@@ -3783,7 +3996,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 +4182,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 +5157,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,13 +5254,16 @@ info)
   const hasChildren = path.node.children.length > 0,
     attributes = normalizeAttributes(path);
   let children;
-  // 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 = [];
+  // 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;
 
   attributes.forEach((attribute) => {
     if (!t.isJSXAttribute(attribute.node)) return;
@@ -4952,23 +5294,13 @@ info)
     {
       if (t.isJSXEmptyExpression(value.expression)) return;
       if (key === "ref") {
-        if (info.serverComponents) {
-          claims.push(["ref", value.expression]);
-          return;
-        }
         results.declarations.push(
           t.variableDeclarator(path.scope.generateUidIdentifier("_ref$"), value.expression)
         );
         return;
       }
       if (key.startsWith("prop:")) return;
-      if (isEventName(key)) {
-        // `onXxx` lowercases to the event name — the client runtime's own
-        // derivation (`onClick` -> `click`); the position is bound under it.
-        if (info.serverComponents)
-        claims.push([toEventName(key), value.expression]);
-        return;
-      }
+      if (isEventName(key)) return;
       if (ChildProperties.has(key)) {
         if (key === "children" && VoidElements.has(tagName)) return;
         if (info.hydratable && key === "textContent" && value && value.expression) {
@@ -5000,30 +5332,25 @@ info)
           checkMember: true,
           checkTags: true
         });
-        // 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.
-        // Object literals stay objects (no inlining) so a slot used as a
-        // property's value can also emit its marker.
-        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;
+        // 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]);
         }
         if ((key === "class" || key === "style") && !t.isObjectExpression(value.expression)) {
-          // The whole attribute must be absent for nullish values. Keep the
-          // ordinary serializers: ssrElementAttribute would also bind slots
-          // without serverComponents. Capture the value once before testing it.
+          // The whole attribute must be absent for nullish values. Capture the
+          // value once before testing it.
           const id = path.scope.generateUidIdentifier("v$");
           const attr = t.callExpression(
             t.arrowFunctionExpression(
@@ -5141,7 +5468,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 +5497,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,27 +5525,39 @@ info)
       );
     }
   });
-  if (claims.length) {
-    const map = claimMap(claims);
-    // `_$sharedConfig.context && _$sharedConfig.context.claims
-    //    ? _$ssrClaim({...}) : ""`
-    // — the claims flag is only set inside a server component's render
-    // scope (and cleared inside suppressed fill windows), so ordinary SSR
-    // pays the property reads and never evaluates the expressions.
-    const sharedConfigId = registerImportMethod(path, "sharedConfig");
-    const contextRead = () =>
-    t.memberExpression(t.cloneNode(sharedConfigId), t.identifier("context"));
-    const guarded = t.conditionalExpression(
-      t.logicalExpression(
-        "&&",
-        contextRead(),
-        t.memberExpression(contextRead(), t.identifier("claims"))
-      ),
-      t.callExpression(registerImportMethod(path, "ssrClaim"), [map]),
-      t.stringLiteral("")
-    );
+  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(hoistExpression(path, results, guarded));
+    results.templateValues.push(hole);
   }
   if (!hasChildren && children) {
     path.node.children.push(children);
@@ -5335,7 +5684,7 @@ results,
 
 function createElement(
 path,
-{ topLevel, hydratable, serverComponents })
+{ topLevel, hydratable })
 {
   const tagName = getTagName(path.node),
     config = getConfig(path),
@@ -5388,22 +5737,6 @@ 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
   // later source can override them, so they go to `ssrElement` as its
@@ -5423,13 +5756,26 @@ path,
   // keys.
   const tail = [];
   const skipKeys = [];
-  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))
-  {
+  // Plain SSR evaluates a named `ref` expression without calling the ref, as
+  // the template path does (`_ref$ = expr`), so a ref factory's owned setup
+  // (`ref={tooltip()}`) runs on both sides and the hydration ids after it
+  // line up (#4081). The client evaluates it after applying the spread and
+  // before the children; `ssrElement` calls the `attrs` thunk at that point.
+  // Only an expression that calls something can run setup: `ref={el}` and
+  // `ref={props.ref}` stay out of the thunk.
+  const refs = [];
+  for (const attribute of attributes) {
+    const node = attribute.node;
+    if (
+    t.isJSXAttribute(node) &&
+    t.isJSXIdentifier(node.name, { name: "ref" }) &&
+    t.isJSXExpressionContainer(node.value) &&
+    !t.isJSXEmptyExpression(node.value.expression) &&
+    callsOutsideFunctions(node.value.expression))
+
+    refs.push(node.value.expression);
+  }
+  if (propAttributes.length === 1 && t.isJSXSpreadAttribute(propAttributes[0].node)) {
     props = [propAttributes[0].node.argument];
   } else {
     props = [];
@@ -5475,30 +5821,13 @@ path,
           node.name.name;
 
         if (hasChildren && key === "children") return;
-        if (key === "ref" || isEventName(key)) {
-          if (serverComponents && t.isJSXExpressionContainer(value)) {
-            const expression = value.expression;
-            const pos = key === "ref" ? "ref" : toEventName(key);
-            if (
-            !(
-            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 === "ref" || isEventName(key)) 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")
@@ -5561,76 +5890,52 @@ path,
   // set) and attribute string — a literal when every part is static, else a
   // thunk concatenating the parts in source order. A `false` static bakes to
   // no markup but still skips its key.
-  if (skipKeys.length) {
+  if (skipKeys.length || refs.length) {
     let markup;
-    if (tail.every((part) => typeof part === "string")) markup = t.stringLiteral(tail.join(""));else
-    {
+    if (tail.every((part) => typeof part === "string")) {
+      markup = t.stringLiteral(tail.join(""));
+      // The refs run after the tail's (static) markup and return it.
+      if (refs.length)
+      markup = t.arrowFunctionExpression([], t.sequenceExpression([...refs, markup]));
+    } else {
       let concat;
       for (const part of tail) {
         const expr = typeof part === "string" ? t.stringLiteral(part) : part;
         concat = concat ? t.binaryExpression("+", concat, expr) : expr;
       }
+      // The tail's getters run first, as the client applies them with the
+      // spread before it evaluates the ref: `markup + (ref, "")`.
+      if (refs.length)
+      concat = t.binaryExpression(
+        "+",
+        concat,
+        t.sequenceExpression([...refs, t.stringLiteral("")])
+      );
       markup = t.arrowFunctionExpression([], concat);
     }
-    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)));
+    args.push(skipKeys.length ? registerSkip(path, skipKeys) : t.identifier("undefined"), markup);
   }
   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)))
-  );
-}
+/** Does evaluating `node` call anything? A function's body does not run. */
+function callsOutsideFunctions(node) {
+  if (
+  t.isCallExpression(node) ||
+  t.isOptionalCallExpression(node) ||
+  t.isNewExpression(node) ||
+  t.isTaggedTemplateExpression(node))
 
-/**
- * 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)
-    )
-    )
-  );
+  return true;
+  if (t.isFunction(node)) return false;
+  for (const key of t.VISITOR_KEYS[node.type] ?? []) {
+    const child = node[key];
+    if (Array.isArray(child)) {
+      for (const c of child) if (c && callsOutsideFunctions(c)) return true;
+    } else if (child && typeof child.type === "string" && callsOutsideFunctions(child)) return true;
+  }
+  return false;
 }
 
 /**
@@ -6143,6 +6448,10 @@ path)
   sourceNames(config).components && (config.generate === "dom" || config.generate === "ssr");
   if (labelled) {
     componentArgs.push(t__namespace.stringLiteral(tagName));
+    // `sourceNames.locations`: the opening element's start (`<Home`) as a
+    // fourth argument, `file:line:col`, so a diagnostic can point at the JSX.
+    const loc = sourceLocation(path, path.node.openingElement);
+    if (loc !== undefined) componentArgs.push(t__namespace.stringLiteral(loc));
   }
   // SSR's prod `createComponent` is literally `Comp(props || {})`. Since the
   // compiler always emits a real `props[0]` object expression above (see the
@@ -15167,8 +15476,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.16",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {