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

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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @solidjs/babel-plugin
 
+## 2.0.0-rc.17
+
+### Patch Changes
+
+- 3e72783: The removed Solid 1.x attribute forms are now compile errors on native elements in the `dom` and `ssr` generates (#4187). `on:`, `oncapture:`, `attr:`, `bool:`, `use:` and `classList` used to compile silently into literal attributes (`<div use:tip="() => {}">`, `classlist="[object Object]"`). Both compilers now reject them with the same message, which names the 2.0 replacement: a camelCase handler or a `ref` callback for `on:`, a plain attribute for `attr:`, a boolean value for `bool:`, a `ref` directive factory for `use:`, and an object or array `class` for `classList`. Components, the universal generate, `prop:` and the XML namespaces (`xlink:`, `xml:`, `xmlns:`) are unaffected. The check runs only at compile time and adds no runtime code.
+- 6cca8b5: Dev builds now warn with `UNCOMMITTED_INPUT_OVERWRITTEN` (#4186) when a stateful DOM property binding (`value`/`checked` on an input, `value` on a textarea, `value`/`selected` on an option, `muted` on media) is about to re-write the value it wrote last time over an edit the user never committed to the bound signal — e.g. `value={props.name} onChange={commit}` with no draft signal, when another dynamic attribute in the same template changes. Runtime behavior is unchanged: the write still happens, once per element and property the warning names the fix (write the signal from `onInput`, use `defaultValue`/`defaultChecked` for an uncontrolled element, or write a rejected edit back with `e.currentTarget.value = next`).
+
+  Production output is unchanged byte for byte. In dev DOM output both compilers write stateful properties through a new `setStatefulProperty(el, name, value)` helper instead of the inline `el.name = value`; hydratable output keeps `setProperty`, and `spread`/`assign` check in the runtime. The check lives only in `@solidjs/web`'s dev build; the production entry carries a plain `node[name] = value` stub that no production-compiled module imports, so it tree-shakes away.
+
+  The "Form inputs" section of the DOM RFC, the cheatsheet and the solid-2.0 skill now say that a change to any other dynamic attribute in the same template re-runs a stateful binding, link the new code, and drop `equals: false` as a way to reject input (it is what the warning reports); write the accepted value back with `e.currentTarget.value = next` instead.
+
+- 2ba1c4a: A valueless `prop:` attribute (`<el prop:active />`) now compiles as `prop:active={true}`, matching bare plain attributes, instead of being dropped silently (#4180).
+
+## 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

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

@@ -1654,6 +1654,23 @@ attributes,
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -1706,7 +1723,6 @@ const config = {
   memoWrapper: "memo",
   validate: true,
   inlineStyles: true,
-  serverComponents: false,
   hoistProps: true
 };
 
@@ -1717,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
+  };
 }
 
 /**
@@ -1731,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",
@@ -2233,11 +2321,6 @@ value,
       );
     }
 
-    const assignment = t$1.assignmentExpression(
-      "=",
-      t$1.memberExpression(elem, t$1.identifier(name)),
-      value
-    );
     if (
     (name === "value" || name === "defaultValue") && (
     tagName === "input" || tagName === "textarea") &&
@@ -2246,13 +2329,20 @@ value,
     {
       // 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)),
-        t$1.logicalExpression("??", value, t$1.stringLiteral(""))
+      value = t$1.logicalExpression("??", value, t$1.stringLiteral(""));
+    }
+    // Dev DOM output writes stateful properties (value/checked/selected/
+    // muted) through `setStatefulProperty` — the same `elem[name] = value`,
+    // preceded in the dev runtime by the UNCOMMITTED_INPUT_OVERWRITTEN check
+    // (#4186). Production output keeps the inline assignment, byte for byte.
+    if (config.dev && config.generate === "dom" && isStatefulDOMProperty(tagName, name)) {
+      return t$1.callExpression(registerImportMethod(path, "setStatefulProperty"), [
+      elem,
+      t$1.stringLiteral(name),
+      value]
       );
     }
-    return assignment;
+    return t$1.assignmentExpression("=", t$1.memberExpression(elem, t$1.identifier(name)), value);
   }
 
   const ns = name.indexOf(":") > -1 && Namespaces[name.split(":")[0]];
@@ -2498,6 +2588,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);
@@ -2548,13 +2640,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);
     }
   }
 
@@ -2600,6 +2695,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);
@@ -2782,7 +2879,9 @@ results)
     reservedNameSpace &&
     !t$1.isJSXExpressionContainer(value))
     {
-      node.value = value = t$1.jsxExpressionContainer(value || t$1.jsxEmptyExpression());
+      // A valueless `prop:x` means `prop:x={true}`, like a bare plain
+      // attribute (#4180).
+      node.value = value = t$1.jsxExpressionContainer(value || t$1.booleanLiteral(true));
     }
     if (
     t$1.isJSXExpressionContainer(value) && (
@@ -3008,7 +3107,11 @@ results)
           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(
@@ -3169,6 +3272,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 =
@@ -3252,14 +3359,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)));
       };
@@ -3559,7 +3663,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,
@@ -3775,20 +3886,18 @@ ownerId)
   // 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
   )] :
 
   [];
@@ -5159,13 +5268,6 @@ info)
   // 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
-  // reads into `_s:on:*` / `_s:ref` markers (and drops server-local
-  // functions). Evaluation is gated on the render context's claims flag so
-  // plain SSR never runs the expressions.
-  const claims = [];
 
   attributes.forEach((attribute) => {
     if (!t.isJSXAttribute(attribute.node)) return;
@@ -5196,23 +5298,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) {
@@ -5260,30 +5352,9 @@ info)
           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),
-          value.expression]
-          );
-          results.template.push("");
-          results.templateValues.push(
-            isDynamicValue ?
-            hoistExpression(path, results, t.arrowFunctionExpression([], attr), {
-              group: true
-            }) :
-            attr
-          );
-          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.
+          // 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(
@@ -5492,28 +5563,6 @@ info)
     results.template.push("");
     results.templateValues.push(hole);
   }
-  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("")
-    );
-    results.template.push("");
-    results.templateValues.push(hoistExpression(path, results, guarded));
-  }
   if (!hasChildren && children) {
     path.node.children.push(children);
   }
@@ -5639,7 +5688,7 @@ results,
 
 function createElement(
 path,
-{ topLevel, hydratable, serverComponents })
+{ topLevel, hydratable })
 {
   const tagName = getTagName(path.node),
     config = getConfig(path),
@@ -5692,22 +5741,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
@@ -5727,13 +5760,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 = [];
@@ -5779,28 +5825,7 @@ 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;
         // An anchor's link-relevant attributes stay a source, never baked
         // markup: `ssrElement` collects them from the walk for the render's
@@ -5869,76 +5894,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;
 }
 
 /**
@@ -6451,6 +6452,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
@@ -6585,6 +6590,63 @@ config)
   results.exprs.push(childNodes.length === 1 ? childNodes[0] : t__namespace.arrayExpression(childNodes));
 }
 
+/**
+ * Solid 1.x attribute forms that 2.0 removed (#4187). Left alone they
+ * compile into literal attributes (`<div use:tip="() => {}">`,
+ * `classlist="[object Object]"`) with no diagnostic, so on native elements
+ * of the web generates (`dom` / `ssr`) they are a compile error that names
+ * the 2.0 replacement. Components are untouched (their props are
+ * user-defined names with no compiler semantics), as is the universal
+ * generate (a custom renderer's `setProp` owns its own naming), and every
+ * other namespace — `prop:`, `xlink:`, `xml:`, `xmlns:`, `svg:`, … — still
+ * compiles as before. The message text is mirrored in the native compiler
+ * (`packages/compiler/src/shared/removed.rs`); keep the two in sync.
+ */
+function removedAttributeMessage(tagName, key) {
+  if (key === "classList") {
+    return (
+      `\`classList\` on <${tagName}> was removed in Solid 2.0. ` +
+      "Use `class` with an object or array instead: `class={{ active: isActive() }}` " +
+      'or `class={["base", { active: isActive() }]}`.');
+
+  }
+  const colon = key.indexOf(":");
+  if (colon < 0) return;
+  const namespace = key.slice(0, colon);
+  const name = key.slice(colon + 1);
+  const removed = `\`${key}\` on <${tagName}> uses the \`${namespace}:\` namespace, which was removed in Solid 2.0.`;
+  switch (namespace) {
+    case "on":
+    case "oncapture":
+      return (
+        `${removed} Use a camelCase handler such as \`onClick={handler}\` for Solid events, ` +
+        "or a `ref` callback that calls `addEventListener` for listener options or custom event names.");
+
+    case "attr":
+      return `${removed} Attributes are the default in 2.0: write \`${name}={value}\` (or \`prop:${name}\` to set a DOM property).`;
+    case "bool":
+      return `${removed} Boolean values add or remove the attribute in 2.0: write \`${name}={condition}\`.`;
+    case "use":
+      return (
+        `${removed} Use a \`ref\` directive factory instead: \`ref={${name}(options)}\`, ` +
+        `or \`ref={${name}}\` without options; arrays compose (\`ref={[a, b]}\`).`);
+
+  }
+}
+
+/** Throws a code-frame error at the first removed 1.x attribute form. */
+function assertNoRemovedAttributes(path, tagName) {
+  for (const attribute of path.get("openingElement").get("attributes")) {
+    if (!attribute.isJSXAttribute()) continue;
+    const name = attribute.node.name;
+    const key = t__namespace.isJSXNamespacedName(name) ?
+    `${name.namespace.name}:${name.name.name}` :
+    name.name;
+    const message = removedAttributeMessage(tagName, key);
+    if (message) throw attribute.buildCodeFrameError(message);
+  }
+}
+
 function isTransformConditionStatements(
 expr)
 {
@@ -6865,11 +6927,13 @@ info = {})
   );
 
   if (tagRenderer?.name === "dom" || getConfig(path).generate === "dom") {
+    assertNoRemovedAttributes(path, tagName);
     renameElementKey(path, false);
     return transformElement$2(path, info);
   }
 
   if (getConfig(path).generate === "ssr") {
+    assertNoRemovedAttributes(path, tagName);
     renameElementKey(path, true);
     return transformElement$1(path, info);
   }

package/package.json

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