@solidjs/babel-plugin 2.0.0-rc.13 → 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.4s
+created index.js in 2.1s

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @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
+
+- 59fb244: SSR `hoistProps` skips TypeScript type positions when collecting captures, so on authored TSX (types parsed, stripped later) a `typeof x` query or a type named like a value no longer captures that value, or forces the literal fallback when it is reassigned (#3828).
+- 3c1f809: Preserve `/* istanbul ignore … */` and `/* c8 ignore … */` block comments written as JSX children on the generated component `children` getter. Line comments are not carried.
+- 98b916d: Fix compiled SSR output that renders `style=""` or `class=""` for `null` and `undefined`. Babel and the native compiler now omit these attributes on elements without a spread.
+- 98d35b9: Fix computed keys in compiled SSR `style` objects (builds without `serverComponents`). A computed key's name got no `;`, so `style={{ color: "red", [k]: v }}` rendered `color:redtop:1px` and the browser dropped both declarations. Hydration keeps the server's inline style, so they stayed dropped. A nullish first value also no longer leaves a leading `;`. Both compilers now pass a multi-entry object to a new `ssrStyleProperties(name, value, …)` helper, which writes the separator only between the entries it writes; a single entry keeps `ssrStyleProperty`.
+- 4f67697: **Breaking:** only `on` followed by an uppercase letter (`onClick`, `onPointerDown`) is an event handler. Lowercase `on*` names (`onclick`, `onmouseover`) are plain attributes everywhere:
+  - Both compilers compile `onclick={expr}` like any other attribute (`setAttribute`, reactive when `expr` is dynamic) instead of binding a delegated or native event, and SSR renders it as an escaped attribute instead of dropping it. A leftover 1.x `on:click={fn}` is likewise a plain namespaced attribute (it previously compiled to `addEventListener(":click", fn)`).
+  - `@solidjs/web` `spread`/`assign` set lowercase `on*` keys as attributes, the server spread walk renders them, and `useHead` applies lowercase `on*` attributes (camelCase handler names stay skipped). `ssrAttribute` escapes a function value instead of interpolating its source raw.
+  - `@solidjs/html` and `@solidjs/h` elements wrap a function passed to a lowercase `on*` in a getter like any other attribute; only `onXxx` and `ref` are exempt.
+  - `@solidjs/html` components follow `@solidjs/h`'s rule: every zero-argument function prop, `onXxx` handlers and `ref` included, is a getter, so a component handler must declare its event argument (`onClick=${e => …}`).
+  - New dev-only check `LOWERCASE_EVENT_ATTRIBUTE` (added to the `DiagnosticCode` union): warns once per attribute name when a function is set on a lowercase `on*` (or `on:`) attribute, naming the camelCase handler to use.
+
+- 7513131: Preserve the source location of captured references in SSR props constructors so source maps point to the authored expression, including dynamic TSRX tags.
+
 ## 2.0.0-rc.13
 
 ## 2.0.0-rc.12

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: 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.
+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
 
@@ -329,7 +329,7 @@ const Parent = () => {
 
 ### on(eventName)
 
-CamelCase attributes such as `onClick` are event handlers. The compiler delegates events that bubble or compose, otherwise it uses Level 1 `on_____` properties.
+CamelCase attributes such as `onClick` are event handlers. The compiler delegates events that bubble or compose, otherwise it uses Level 1 `on_____` properties. Only `on` followed by an uppercase letter is an event: lowercase names such as `onclick` are plain attributes, compiled (and server-rendered) like any other attribute.
 
 Pass an array to bind a value: the second item is the first argument to the handler, the event is second.
 

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",
@@ -427,13 +442,38 @@ path)
 
 }
 
+const coverageIgnoreCommentData = "solid.coverageIgnoreComments";
+
+function getCoverageIgnoreComments(path) {
+  return path.getData(coverageIgnoreCommentData);
+}
+
 // remove unnecessary JSX Text nodes
 function filterChildren(children) {
-  return children.filter(
-    ({ node: child }) =>
-    !(t__namespace.isJSXExpressionContainer(child) && t__namespace.isJSXEmptyExpression(child.expression)) && (
-    !t__namespace.isJSXText(child) || !/^[\r\n]\s*$/.test(child.extra?.raw ?? ""))
-  );
+  const filtered = [];
+  let pendingCoverageIgnoreComments = [];
+
+  for (const path of children) {
+    const child = path.node;
+    if (t__namespace.isJSXExpressionContainer(child) && t__namespace.isJSXEmptyExpression(child.expression)) {
+      pendingCoverageIgnoreComments.push(
+        ...(child.expression.innerComments?.filter(
+          (comment) =>
+          comment.type === "CommentBlock" && /^\s*(istanbul|c8)\s+ignore\b/.test(comment.value)
+        ) ?? [])
+      );
+      continue;
+    }
+    if (t__namespace.isJSXText(child) && /^[\r\n]\s*$/.test(child.extra?.raw ?? "")) {
+      continue;
+    }
+    if (pendingCoverageIgnoreComments.length) {
+      path.setData(coverageIgnoreCommentData, pendingCoverageIgnoreComments);
+      pendingCoverageIgnoreComments = [];
+    }
+    filtered.push(path);
+  }
+  return filtered;
 }
 
 function checkLength(children) {
@@ -461,6 +501,12 @@ function trimWhitespace(text) {
   return text.replace(/\s+/g, " ");
 }
 
+// Only `on` + an uppercase letter is an event handler. Lowercase `on*`
+// names (`onclick`) are plain attributes.
+function isEventName(name) {
+  return /^on[A-Z]/.test(name);
+}
+
 function toEventName(name) {
   return name.slice(2).toLowerCase();
 }
@@ -1810,6 +1856,7 @@ const t$1 = t__namespace;
 
 
 
+
 
 
 function isNamedAttribute(
@@ -1946,6 +1993,7 @@ info = {})
       declarations: [],
       exprs: [],
       dynamics: [],
+      claims: [],
       postExprs: [],
       isImportNode,
       isWrapped,
@@ -2023,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(
@@ -2039,7 +2099,6 @@ info = {})
       )
     );
   }
-  transformAttributes$1(path, results);
   if (config.contextToCustomElements && (tagName === "slot" || hasCustomElement)) {
     contextToCustomElement(path, results);
   }
@@ -2081,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);
@@ -2152,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),
@@ -2166,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)),
@@ -2224,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)
@@ -2236,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
@@ -2783,7 +2875,7 @@ results)
         }
       } else if (key === "children") {
         children = value;
-      } else if (key.startsWith("on")) {
+      } else if (isEventName(key)) {
         const ev = toEventName(key);
         if (
         config.delegateEvents && (
@@ -2914,6 +3006,7 @@ results)
           key,
           value: value.expression,
           tagName,
+          checkableInput,
           styleProperty: isStyleProperty,
           classProperty: isClassProperty
         });
@@ -2922,6 +3015,7 @@ results)
           t$1.expressionStatement(
             setAttr$1(attribute, elem, key, value.expression, {
               tagName,
+              checkableInput,
               styleProperty: isStyleProperty,
               classProperty: isClassProperty
             })
@@ -2970,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 {
@@ -3137,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;
@@ -3481,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 (
@@ -3489,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,
@@ -3631,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
@@ -3682,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]
@@ -3701,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);
@@ -3719,7 +3856,8 @@ function wrapDynamics$1(path, dynamics) {
           setAttr$1(path, elem, key, propIdent, {
             tagName,
             dynamic: true,
-            prevId: optionalPropMember
+            prevId: optionalPropMember,
+            checkableInput
           })
         )
       );
@@ -3739,7 +3877,8 @@ function wrapDynamics$1(path, dynamics) {
               tagName,
               dynamic: true,
               styleProperty,
-              classProperty
+              classProperty,
+              checkableInput
             })
           )
         )
@@ -3752,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]
     )
@@ -3938,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).
  *
@@ -4071,6 +4249,7 @@ function takeHoistedProps(program) {
 
 
 
+
 function keyName(node) {
   if (node.computed) return undefined;
   if (t__namespace.isIdentifier(node.key)) return node.key.name;
@@ -4089,6 +4268,20 @@ function insideRealFunction(path, stop) {
   return false;
 }
 
+/** Type positions are erased before the code runs: a name there (the `x` of
+ * `typeof x`, or a type that shares a value's name) is not a value the
+ * constructor can be handed. `TSType` covers `implements`/`extends` heritage. */
+function isTypePosition(path) {
+  return (
+    path.isTSType() ||
+    path.isTSTypeAnnotation() ||
+    path.isTSTypeParameterDeclaration() ||
+    path.isTSTypeParameterInstantiation() ||
+    path.isTSInterfaceDeclaration() ||
+    path.isTSTypeAliasDeclaration());
+
+}
+
 /** Is `binding` initialized by the time the site constructs its props? The
  * getter read it lazily; the constructor reads it now. A parameter or a
  * hoisted function always is. Otherwise the declaration must precede the
@@ -4174,6 +4367,10 @@ function hoistSite(p, state) {
           if (q.node.meta.name === "new" && !insideRealFunction(q, m)) fallback = true;
           return;
         }
+        if (isTypePosition(q)) {
+          q.skip();
+          return;
+        }
         if (!q.isIdentifier()) return;
         const name = q.node.name;
         let write = false;
@@ -4206,7 +4403,7 @@ function hoistSite(p, state) {
         }
         let capture = captures.get(binding);
         if (!capture) {
-          capture = { binding, name, index: captures.size };
+          capture = { binding, name, reference: q.node, index: captures.size };
           captures.set(binding, capture);
         }
         uses.add(binding);
@@ -4228,7 +4425,9 @@ function hoistSite(p, state) {
   for (const capture of captures.values()) {
     const param = scope.generateUidIdentifier("p");
     params.push(param);
-    args.push(t__namespace.identifier(capture.name));
+    const argument = t__namespace.identifier(capture.name);
+    argument.loc = capture.reference.loc;
+    args.push(argument);
     body.push(
       t__namespace.expressionStatement(
         t__namespace.assignmentExpression(
@@ -4853,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,
@@ -4863,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
@@ -4910,13 +5206,11 @@ info)
         return;
       }
       if (key.startsWith("prop:")) return;
-      if (key.startsWith("on")) {
+      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) {
-          const pos = key.slice(2).toLowerCase();
-          if (pos) claims.push([pos, value.expression]);
-        }
+        if (info.serverComponents)
+        claims.push([toEventName(key), value.expression]);
         return;
       }
       if (ChildProperties.has(key)) {
@@ -4950,15 +5244,27 @@ 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.
+        // 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.
+        // 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),
@@ -4974,6 +5280,36 @@ info)
           );
           return;
         }
+        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.
+          const id = path.scope.generateUidIdentifier("v$");
+          const attr = t.callExpression(
+            t.arrowFunctionExpression(
+              [id],
+              t.conditionalExpression(
+                t.binaryExpression("==", t.cloneNode(id), t.nullLiteral()),
+                t.stringLiteral(""),
+                t.callExpression(registerImportMethod(path, "ssrAttribute"), [
+                t.stringLiteral(key),
+                t.callExpression(
+                  registerImportMethod(path, key === "class" ? "ssrClassName" : "ssrStyle"),
+                  [t.cloneNode(id)]
+                )]
+                )
+              )
+            ),
+            [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) ||
@@ -4988,52 +5324,48 @@ info)
             if (value.expression.properties.length === 0) {
               return;
             }
-            const props = value.expression.properties.flatMap((p, i) => {
-              if (t.isSpreadElement(p) || t.isObjectMethod(p)) return [];
+            const entries = value.expression.properties.filter(
+              (p) => t.isObjectProperty(p)
+            );
+            // One entry is `ssrStyleProperty(name, value)`; several go to
+            // `ssrStyleProperties`, which writes the `;` only between the
+            // entries it writes, so a nullish one leaves no separator behind.
+            const helper = registerImportMethod(
+              path,
+              entries.length === 1 ? "ssrStyleProperty" : "ssrStyleProperties"
+            );
+            const args = entries.flatMap((p) => {
+              let name;
               if (p.computed) {
                 // Computed keys are user-controlled at runtime; wrap with
-                // `_$escape(..., true)` so ssrStyleProperty can stay a pure
-                // string concat helper (literal-key path is already safe).
-                const escape = registerImportMethod(path, "escape");
-                return t.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
-                t.binaryExpression(
+                // `_$escape(..., true)` so the style helpers can stay pure
+                // string concat (the literal-key path is already safe).
+                name = t.binaryExpression(
                   "+",
-                  t.callExpression(escape, [
+                  t.callExpression(registerImportMethod(path, "escape"), [
                   p.key,
                   t.booleanLiteral(true)]
                   ),
                   t.stringLiteral(":")
-                ),
-                escapeExpression(
-                  path,
-                  p.value,
-                  true,
-                  true
-                )]
+                );
+              } else {
+                name = t.stringLiteral(
+                  (t.isIdentifier(p.key) ?
+                  p.key.name :
+                  p.key.value) + ":"
                 );
               }
-              return t.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
-              t.stringLiteral(
-                (i ? ";" : "") + (
-                t.isIdentifier(p.key) ?
-                p.key.name :
-                p.key.value) +
-                ":"
-              ),
+              return [
+              name,
               escapeExpression(
                 path,
                 p.value,
                 true,
                 true
-              )]
-              );
-            });
+              )];
 
-            let res = props[0];
-            for (let i = 1; i < props.length; i++) {
-              res = t.binaryExpression("+", res, props[i]);
-            }
-            value.expression = res;
+            });
+            value.expression = t.callExpression(helper, args);
           } else {
             value.expression = t.callExpression(registerImportMethod(path, "ssrStyle"), [
             value.expression]
@@ -5069,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 &&
@@ -5098,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 ?
       "" :
@@ -5116,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
@@ -5403,12 +5779,11 @@ path,
           node.name.name;
 
         if (hasChildren && key === "children") return;
-        if (key === "ref" || key.startsWith("on")) {
+        if (key === "ref" || isEventName(key)) {
           if (serverComponents && t.isJSXExpressionContainer(value)) {
             const expression = value.expression;
-            const pos = key === "ref" ? "ref" : key.slice(2).toLowerCase();
+            const pos = key === "ref" ? "ref" : toEventName(key);
             if (
-            pos &&
             !(
             t.isJSXEmptyExpression(expression) ||
             t.isStringLiteral(expression) ||
@@ -5427,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")
@@ -6044,14 +6423,14 @@ path)
       t__namespace.isFunction(childResult[0]) ?
       childResult[0].body :
       childResult[0];
-      runningObject.push(
-        t__namespace.objectMethod(
-          "get",
-          t__namespace.identifier("children"),
-          [],
-          t__namespace.isExpression(body) ? t__namespace.blockStatement([t__namespace.returnStatement(body)]) : body
-        )
+      const getter = t__namespace.objectMethod(
+        "get",
+        t__namespace.identifier("children"),
+        [],
+        t__namespace.isExpression(body) ? t__namespace.blockStatement([t__namespace.returnStatement(body)]) : body
       );
+      if (childResult[2]?.length) getter.leadingComments = childResult[2];
+      runningObject.push(getter);
     } else runningObject.push(t__namespace.objectProperty(t__namespace.identifier("children"), childResult[0]));
   }
   if (runningObject.length || !props.length) props.push(propsLiteral(runningObject));
@@ -6112,9 +6491,11 @@ config)
   if (!filteredChildren.length) return;
   let dynamic = false;
   let pathNodes = [];
+  let coverageIgnoreComments;
 
   let transformedChildren = filteredChildren.reduce(
     (memo, path) => {
+      coverageIgnoreComments ||= getCoverageIgnoreComments(path);
       if (t__namespace.isJSXText(path.node)) {
         const v = htmlEntities.decode(trimWhitespace(path.node.extra?.raw ?? ""));
         if (v.length) {
@@ -6171,7 +6552,7 @@ config)
     transformedChildren = t__namespace.arrowFunctionExpression([], t__namespace.arrayExpression(transformedChildren));
     dynamic = true;
   }
-  return [transformedChildren, dynamic];
+  return [transformedChildren, dynamic, coverageIgnoreComments];
 }
 
 function transformFragmentChildren(
@@ -15094,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.13",
+  "version": "2.0.0-rc.15",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {