Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[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)

Aperta
  • Qualcosa non va?
#4,080 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
package.json, repro.sh, compile.mjs, server.tsx, client.tsx 
{
  "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.

Lingua principale
TypeScript
Stelle
36.1k
Fork
1.1k
Merge medio
10h 41m
PR unite (30g)
363

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di solidjs/solid

Tutte le issue di solidjs/solid

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.