svelte

Commit Graph

Author	SHA1	Message	Date
Kunpeng Xie	803f59b171	fix: avoid reinserting dynamic elements during hydration (#18855 ) Hydrating a `<svelte:element>` currently removes and reinserts the DOM node that was already claimed from the server-rendered HTML. This can restart CSS animations and disconnect/reconnect custom elements inside it. Keep claimed elements in place while preserving insertion for client-created elements and later tag changes. Capture the hydration state before rendering children, since empty or void elements can temporarily turn hydration off. Fixes #18852. ### Before submitting the PR, please make sure you do the following - [x] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs - [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`. - [x] This message body should clearly illustrate what problems it solves. - [x] Ideally, include a test that fails without this PR but passes with it. - [x] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`). ### Tests and linting - [x] Run the tests with `pnpm test` and lint the project with `pnpm lint` Validation: - The real Chromium regression fails on unchanged `636eaaaa`: hydration removes all four server-rendered dynamic elements. Client mounting and server rendering pass. - The regression checks node removals and custom-element connection callbacks for ordinary, empty, void, and custom dynamic elements, then changes the tags and removes/recreates an element. - A hydration mismatch regression verifies that different client/server child branches recover while retaining the outer element and its following sibling. - `pnpm test hydration runtime-browser`: 219 passed. - Full `CI=true pnpm test`: 34 test files passed, 7,790 tests passed, 55 existing skips. The real-browser suite ran with Chromium. - `pnpm check`: passed, including build, generated type checks, and treeshakeability checks. - `pnpm lint`: passed. AI assistance: This change and its tests were prepared with OpenAI Codex. The PR description is also AI-assisted. --------- Co-authored-by: paoloricciuti <ricciutipaolo@gmail.com>	2 weeks ago

Author

SHA1

Message

Date

Kunpeng Xie

803f59b171

fix: avoid reinserting dynamic elements during hydration (#18855 )

Hydrating a `<svelte:element>` currently removes and reinserts the DOM
node that was already claimed from the server-rendered HTML. This can
restart CSS animations and disconnect/reconnect custom elements inside
it.

Keep claimed elements in place while preserving insertion for
client-created elements and later tag changes. Capture the hydration
state before rendering children, since empty or void elements can
temporarily turn hydration off.

Fixes #18852.

### Before submitting the PR, please make sure you do the following

- [x] It's really useful if your PR references an issue where it is
discussed ahead of time. In many cases, features are absent for a
reason. For large changes, please create an RFC:
https://github.com/sveltejs/rfcs
- [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
- [x] This message body should clearly illustrate what problems it
solves.
- [x] Ideally, include a test that fails without this PR but passes with
it.
- [x] If this PR changes code within `packages/svelte/src`, add a
changeset (`npx changeset`).

### Tests and linting

- [x] Run the tests with `pnpm test` and lint the project with `pnpm
lint`

Validation:

- The real Chromium regression fails on unchanged `636eaaaa`: hydration
removes all four server-rendered dynamic elements. Client mounting and
server rendering pass.
- The regression checks node removals and custom-element connection
callbacks for ordinary, empty, void, and custom dynamic elements, then
changes the tags and removes/recreates an element.
- A hydration mismatch regression verifies that different client/server
child branches recover while retaining the outer element and its
following sibling.
- `pnpm test hydration runtime-browser`: 219 passed.
- Full `CI=true pnpm test`: 34 test files passed, 7,790 tests passed, 55
existing skips. The real-browser suite ran with Chromium.
- `pnpm check`: passed, including build, generated type checks, and
treeshakeability checks.
- `pnpm lint`: passed.

AI assistance: This change and its tests were prepared with OpenAI
Codex. The PR description is also AI-assisted.

---------

Co-authored-by: paoloricciuti <ricciutipaolo@gmail.com>

1 Commits (main)