Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de 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)

Cerrado
  • ¿Algo no está bien?
#4,080 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
36.1k
Forks
1.1k
Merge medio
11 h 32 min
PR fusionados (30 d)
356

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de solidjs/solid

Todos los issues de solidjs/solid

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.