[2.0 rc.15 / next] SSR never evaluates a `ref` on an element that has a spread, so a directive factory's setup misaligns hydration ids

Start with the compiled SSR output in the issue: an element with a spread and a ref becomes an ssrElement call that drops the ref expression, while the no-spread case keeps _ref$. The repro is repro.sh in the gist, and the attributeExpressions hydratable SSR fixture on next shows the same drop. Done means the spread case evaluates the ref on the server and the spread mode in the repro updates its label to after with no hydration key miss.

Describe the bug

On the server, an element's ref expression is evaluated when the element has no spread (_ref$ = tooltip()), so the owned setup half of a two-phase directive factory runs on the server as it does on the client.

When the element also has a spread, both compilers emit ssrElement(tag, props, children, hydratable) and drop the ref expression entirely. The factory's setup then runs on the client but not on the server. If the setup creates a primitive (the documented titleDirective creates an effect), every hydration id after it in the component is off by one. The next element misses its key, the client creates a detached copy, and the server-rendered node never updates.

Compiled SSR output (@solidjs/compiler; @solidjs/babel-plugin emits the same):

// <div ref={[tooltip(), props.ref]} />
_v$ = _$ssrHydrationKey(), _ref$ = [tooltip(), props.ref], _$ssr(_tmpl$, _v$)

// <div {...rest} ref={[tooltip(), props.ref]} />
_$ssrElement("div", rest, undefined, true)

Repro, using the factory from documentation/solid-2.0/07-dom.md:

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

// The two-phase directive factory from the 2.0 docs (07-dom.md, "titleDirective").
function titleDirective(source: () => string) {
  let el: HTMLElement | undefined;
  createEffect(source, (value) => {
    if (el) el.title = value;
  });
  return (nextEl: HTMLElement) => {
    el = nextEl;
    el.title = source();
  };
}

export const [label, setLabel] = createSignal("before");
function Label() {
  return <span>{label()}</span>;
}

const rest = { class: "box" };

export function WithoutSpread() {
  return (
    <section>
      <div ref={titleDirective(() => "tip")} />
      <Label />
    </section>
  );
}

export function WithSpread() {
  return (
    <section>
      <div {...rest} ref={titleDirective(() => "tip")} />
      <Label />
    </section>
  );
}

// Workaround: create the factory in the component body, so the server runs its setup too.
export function WithSpreadHoisted() {
  const tip = titleDirective(() => "tip");
  return (
    <section>
      <div {...rest} ref={tip} />
      <Label />
    </section>
  );
}

Each component is rendered with renderToString, then hydrated, then setLabel("after") is called:

--- plain
server html:     <section _hk=0><div></div><!--$--><span _hk=2>before</span><!--/--></section>
after setLabel:  <section _hk="0"><div title="tip"></div><!--$--><span _hk="2">after</span><!--/--></section>
console:         (nothing)
--- spread
server html:     <section _hk=0><div class="box"></div><!--$--><span _hk=1>before</span><!--/--></section>
after setLabel:  <section _hk="0"><div class="box" title="tip"></div><!--$--><span _hk="1">before</span><!--/--></section>
console:         Hydration key miss for "2": no server-rendered element carries this key (template: <span>). A detached element was created instead; ...
--- hoisted
server html:     <section _hk=1><div class="box"></div><!--$--><span _hk=2>before</span><!--/--></section>
after setLabel:  <section _hk="1"><div class="box" title="tip"></div><!--$--><span _hk="2">after</span><!--/--></section>
console:         (nothing)

In the spread case the label keeps saying before.

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
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
for mode in plain spread hoisted; do
  bun server.ssr.ts $mode > server-$mode.html
  bun --conditions=browser --conditions=development client.dom.ts $mode
done

// 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 { WithoutSpread, WithSpread, WithSpreadHoisted } from "./app.ssr.ts";
const which = { plain: WithoutSpread, spread: WithSpread, hoisted: WithSpreadHoisted }[process.argv[2]!]!;
process.stdout.write(renderToString(() => which({})));

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

const mode = process.argv[2];
const html = readFileSync(`server-${mode}.html`, "utf8");
const root = document.createElement("div");
document.body.append(root);
(globalThis as any)._$HY = { events: [], completed: new WeakSet(), r: {}, fe() {} };
root.innerHTML = html;
const messages: string[] = [];
console.error = console.warn = (...a: unknown[]) => messages.push(String(a[0]).split("\n")[0]);
const Which = { plain: WithoutSpread, spread: WithSpread, hoisted: WithSpreadHoisted }[mode!]!;
hydrate(() => <Which />, root);
flush();
setLabel("after");
flush();
console.log(`--- ${mode}`);
console.log(`server html:     ${html}`);
console.log(`after setLabel:  ${root.innerHTML}`);
console.log(`console:         ${messages.length ? messages.join(" | ") : "(nothing)"}`);

1. Put the files above next to app.tsx.
2. bun install && bun run repro

Expected behavior

A ref expression should be evaluated on the server whether or not its element has a spread, as it already is without one. Then a factory's owned setup runs on both sides and hydration ids line up. In the spread case the label should update to after, as it does in the other two.

Screenshots or Videos

No response

Platform

• solid-js, @solidjs/web, @solidjs/compiler, @solidjs/babel-plugin 2.0.0-rc.15
• next at eb4e019: the hydratable SSR fixture attributeExpressions still compiles <li {...spread} class="row" data-kind="item" ref={link} /> to an ssrElement call with no ref, while <div ref={refFactory()} /> keeps _ref$4 = refFactory().
• Bun 1.4.3, Node 24.11.1, happy-dom 21.0.1, macOS

Additional context

There are two workarounds:

• Create the factory in the component body and pass the result: const tip = titleDirective(...), then <div {...rest} ref={tip} />. This is the hoisted case above.
• Keep primitives out of the factory's setup.

The spread-plus-ref shape is the default for parts in a headless component library, which is where I found this. A part spreads the caller's props and attaches its own behaviour with ref={[behaviour(), props.ref]}.

The serverComponents path already collects a spread element's named ref into a claim thunk (ad1ecc5). Plain SSR evaluates nothing.

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

Filed with Claude Code on behalf of @cevr.