[2.0 rc.15 / next] A ref still sees different attributes on client creation than on hydration: dynamic attributes, and refs passed through a spread (follow-up to #3685)

Start with spread() in packages/web/src/client.ts, where apply calls ref(() => r, node) before assign(node, newProps, ...), and with the compiled ref-then-effect order shown in the issue. Run repro.sh from the issue to compare the render and hydrate output. Done means the ref sees the same attributes on both paths for dynamic bindings and spread-carried refs, or the docs state the difference.

Describe the bug

#3685 (fixed by #3686) made an element's ref run after its attributes, so that a ref behaves the same on client creation as on hydration. Two common shapes still diverge on rc.15:

1. Dynamic attributes. Both compilers emit the ref call before the element's binding effects. On client creation a ref therefore sees no dynamic attribute, and its own write to a dynamic attribute is overwritten straight after. On hydration the server markup already has the attribute and the initial write is skipped, so the ref sees it and the ref's write survives. This is #3685 with a signal instead of a module constant.
2. A ref that reaches the element through a spread. In spread() (packages/web/src/client.ts), apply calls ref(() => r, node) before assign(node, newProps, ...). A ref passed inside the spread props, which is the usual shape for a component that forwards {...props}, runs before any of that spread's attributes are set. An inline ref beside a spread already runs after it (#3686), so <div {...attrs} ref={fn} /> and <Part ref={fn} {...attrs} /> (where Part returns <div {...props} />) disagree.

// app.tsx
import { createSignal } from "solid-js";

export const log: string[] = [];
const [title] = createSignal("from signal");
const read = (name: string) => (el: HTMLElement) =>
  log.push(`${name}: ref sees title=${JSON.stringify(el.getAttribute("title"))}`);

// A component that forwards everything, including the caller's ref, through a spread.
function Part(props: any) {
  return <div {...props} />;
}

export function App() {
  return (
    <>
      {/* 1. a ref reading a dynamic attribute */}
      <div title={title()} ref={read("dynamic attribute")} />
      {/* 2. a ref reading an attribute that reaches the element through a spread */}
      <Part title="static" ref={read("ref through a spread")} />
      {/* 3. a ref writing a dynamic attribute (the #3685 case, with a signal) */}
      <div id="write" title={title()} ref={(el) => el.setAttribute("title", "from ref")} />
    </>
  );
}

Output. render is render() into an empty container; hydrate is hydrate() over the renderToString() output.

server html: <div _hk=0 title="from signal"></div><div _hk=1 title="static"></div><div _hk=2 id="write" title="from signal"></div>
--- render
dynamic attribute: ref sees title=null
ref through a spread: ref sees title=null
#write final title="from signal"
--- hydrate
dynamic attribute: ref sees title="from signal"
ref through a spread: ref sees title="static"
#write final title="from ref"

DOM output for <div title={title()} ref={read} />. @solidjs/compiler and @solidjs/babel-plugin emit the same order:

var _el$ = _tmpl$();
var _ref$ = read;
typeof _ref$ === "function" || Array.isArray(_ref$) ? _$ref(() => _ref$, _el$) : read = _el$;
_$effect(() => title(), (_v$) => {
  _$setAttribute(_el$, "title", _v$);
});

Your Example Website or App

The complete repro is inline below. It needs only the Solid packages, plus happy-dom for the DOM.

Steps to Reproduce the Bug or Issue

{
  "private": true,
  "type": "module",
  "scripts": { "repro": "sh repro.sh" },
  "dependencies": {
    "@solidjs/compiler": "2.0.0-rc.15",
    "@solidjs/web": "2.0.0-rc.15",
    "solid-js": "2.0.0-rc.15"
  },
  "devDependencies": {
    "@happy-dom/global-registrator": "21.0.1",
    "happy-dom": "21.0.1"
  }
}

#!/bin/sh
# repro.sh: compile with @solidjs/compiler, render on the server, then compare client creation with hydration.
set -e
cd "$(dirname "$0")"
node compile.mjs app.tsx app.ssr.ts ssr true
node compile.mjs app.tsx app.dom.ts dom true
node compile.mjs server.tsx server.ssr.ts ssr true
node compile.mjs client.tsx client.dom.ts dom true
bun server.ssr.ts > server.html
echo "server html: $(cat server.html)"
bun --conditions=browser client.dom.ts render
bun --conditions=browser client.dom.ts hydrate

// compile.mjs
import { transform } from "@solidjs/compiler";
import { readFileSync, writeFileSync } from "node:fs";
const [input, output, generate = "dom", hydratable = "false"] = process.argv.slice(2);
const { code } = transform(readFileSync(input, "utf8"), { filename: input, generate, hydratable: hydratable === "true" });
writeFileSync(output, code);

// server.tsx
import { renderToString } from "@solidjs/web";
import { App } from "./app.ssr.ts";
process.stdout.write(renderToString(() => <App />));

// client.tsx
import { GlobalRegistrator } from "@happy-dom/global-registrator";
GlobalRegistrator.register();
const { readFileSync } = await import("node:fs");
const { render, hydrate } = await import("@solidjs/web");
const { flush } = await import("solid-js");
const { App, log } = await import("./app.dom.ts");

const mode = process.argv[2];
const root = document.createElement("div");
document.body.append(root);
if (mode === "hydrate") {
  (globalThis as any)._$HY = { events: [], completed: new WeakSet(), r: {}, fe() {} };
  root.innerHTML = readFileSync("server.html", "utf8");
  hydrate(() => <App />, root);
} else {
  render(() => <App />, root);
}
flush();
log.push(`#write final title=${JSON.stringify(document.getElementById("write")!.getAttribute("title"))}`);
console.log(`--- ${mode}\n${log.join("\n")}`);

1. Put the files above next to app.tsx.
2. bun install && bun run repro
3. Compare the render and hydrate blocks.

Expected behavior

The same result on both paths, which is what #3685 asked for: a ref runs after the element's initial attribute values are applied, including dynamic ones and those from a spread that carries the ref, and before its children.

For case 2 the change looks local: call ref after assign in spread's apply. Children are inserted separately, so the ref would still run before them.

If dynamic bindings are left out on purpose (for example, because their first apply can be held by a pending boundary), please document it in 07-dom.md. The docs should say that a ref sees only static attributes on client creation, and that hydration differs.

Screenshots or Videos

No response

Platform

• solid-js, @solidjs/web, @solidjs/compiler, @solidjs/babel-plugin 2.0.0-rc.15
• next at eb4e019: spread() still calls ref before assign, and no ref-ordering change has landed since rc.15.
• Bun 1.4.3, Node 24.11.1, happy-dom 21.0.1, macOS

Additional context

I found this while building a headless UI library. Parts forward the caller's ref with {...props}, and behaviours attached through refs read and write ARIA and data-* attributes. Those behaviours get different input depending on whether the part was hydrated or created on the client.

The workaround is to keep the ref callback to el => (node = el) and do the work in onSettled.

Runnable repro: https://gist.github.com/cevr/e8b441077fdd3870ecc7872b4ba4be12 (bun install && bun run repro)

Filed with Claude Code on behalf of @cevr.