Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem 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)

Đã đóng
  • Có gì không ổn?
#4,080 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
36.1k
Fork
1.1k
Merge trung bình
11 giờ 49 phút
Pull request đã merge (30 ngày)
346

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của solidjs/solid

Tất cả issue của solidjs/solid

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.