Skip to content

Commit 1c84568

Browse files
Rich-HarrisRich-Harris
authored
fix: remove outer hydration markers (#16800)
1 parent e5a75ae commit 1c84568

File tree

35 files changed

+59
-58
lines changed

35 files changed

+59
-58
lines changed

‎.changeset/six-files-speak.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: remove outer hydration markers

‎packages/svelte/src/internal/client/render.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -120,19 +120,9 @@ export function hydrate(component, options) {
120120

121121
set_hydrating(true);
122122
set_hydrate_node(/** @type {Comment} */ (anchor));
123-
hydrate_next();
124123

125124
const instance = _mount(component, { ...options, anchor });
126125

127-
if (
128-
hydrate_node === null ||
129-
hydrate_node.nodeType !== COMMENT_NODE ||
130-
/** @type {Comment} */ (hydrate_node).data !== HYDRATION_END
131-
) {
132-
w.hydration_mismatch();
133-
throw HYDRATION_ERROR;
134-
}
135-
136126
set_hydrating(false);
137127

138128
return /** @type {Exports} */ (instance);
@@ -247,6 +237,15 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
247237

248238
if (hydrating) {
249239
/** @type {Effect} */ (active_effect).nodes_end = hydrate_node;
240+
241+
if (
242+
hydrate_node === null ||
243+
hydrate_node.nodeType !== COMMENT_NODE ||
244+
/** @type {Comment} */ (hydrate_node).data !== HYDRATION_END
245+
) {
246+
w.hydration_mismatch();
247+
throw HYDRATION_ERROR;
248+
}
250249
}
251250

252251
if (context) {

‎packages/svelte/src/internal/server/renderer.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -516,8 +516,7 @@ export class Renderer {
516516
}
517517

518518
let head = content.head + renderer.global.get_title();
519-
520-
const body = BLOCK_OPEN + content.body + BLOCK_CLOSE; // this inserts a fake boundary so hydration matches
519+
let body = content.body;
521520

522521
for (const { hash, code } of renderer.global.css) {
523522
head += `<style id="${hash}">${code}</style>`;

‎packages/svelte/src/internal/server/renderer.test.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ test('collects synchronous body content by default', () => {
1414

1515
const { head, body } = Renderer.render(component as unknown as Component);
1616
expect(head).toBe('');
17-
expect(body).toBe('<!--[--><!--[-->abc<!--]--><!--]-->');
17+
expect(body).toBe('<!--[-->abc<!--]-->');
1818
});
1919

2020
test('child type switches content area (head vs body)', () => {
@@ -28,7 +28,7 @@ test('child type switches content area (head vs body)', () => {
2828

2929
const { head, body } = Renderer.render(component as unknown as Component);
3030
expect(head).toBe('<title>T</title>');
31-
expect(body).toBe('<!--[--><!--[-->ab<!--]--><!--]-->');
31+
expect(body).toBe('<!--[-->ab<!--]-->');
3232
});
3333

3434
test('child inherits parent type when not specified', () => {
@@ -42,7 +42,7 @@ test('child inherits parent type when not specified', () => {
4242
};
4343

4444
const { head, body } = Renderer.render(component as unknown as Component);
45-
expect(body).toBe('<!--[--><!--[--><!--]--><!--]-->');
45+
expect(body).toBe('<!--[--><!--]-->');
4646
expect(head).toBe('<meta name="x"/><style>/* css */</style>');
4747
});
4848

@@ -101,7 +101,7 @@ test('compact synchronously aggregates a range and can transform into head/body'
101101

102102
const { head, body } = Renderer.render(component as unknown as Component);
103103
expect(head).toBe('<h>H</h>');
104-
expect(body).toBe('<!--[--><!--[-->abdc<!--]--><!--]-->');
104+
expect(body).toBe('<!--[-->abdc<!--]-->');
105105
});
106106

107107
test('local state is shallow-copied to children', () => {
@@ -216,7 +216,7 @@ describe('async', () => {
216216

217217
const result = await Renderer.render(component as unknown as Component);
218218
expect(result.head).toBe('');
219-
expect(result.body).toBe('<!--[--><!--[-->123<!--]--><!--]-->');
219+
expect(result.body).toBe('<!--[-->123<!--]-->');
220220
expect(() => result.html).toThrow('html_deprecated');
221221
});
222222

@@ -239,7 +239,7 @@ describe('async', () => {
239239

240240
const { body, head } = await Renderer.render(component as unknown as Component);
241241
expect(head).toBe('');
242-
expect(body).toBe('<!--[--><!--[-->axb<!--]--><!--]-->');
242+
expect(body).toBe('<!--[-->axb<!--]-->');
243243
});
244244

245245
test('push accepts async functions in async context', async () => {
@@ -254,7 +254,7 @@ describe('async', () => {
254254

255255
const { head, body } = await Renderer.render(component as unknown as Component);
256256
expect(head).toBe('');
257-
expect(body).toBe('<!--[--><!--[-->abc<!--]--><!--]-->');
257+
expect(body).toBe('<!--[-->abc<!--]-->');
258258
});
259259

260260
test('push handles async functions with different timing', async () => {
@@ -272,7 +272,7 @@ describe('async', () => {
272272

273273
const { head, body } = await Renderer.render(component as unknown as Component);
274274
expect(head).toBe('');
275-
expect(body).toBe('<!--[--><!--[-->fastslowsync<!--]--><!--]-->');
275+
expect(body).toBe('<!--[-->fastslowsync<!--]-->');
276276
});
277277

278278
test('push async functions work with head content type', async () => {
@@ -286,7 +286,7 @@ describe('async', () => {
286286
};
287287

288288
const { head, body } = await Renderer.render(component as unknown as Component);
289-
expect(body).toBe('<!--[--><!--[--><!--]--><!--]-->');
289+
expect(body).toBe('<!--[--><!--]-->');
290290
expect(head).toBe('<title>Async Title</title>');
291291
});
292292

@@ -305,7 +305,7 @@ describe('async', () => {
305305

306306
const { head, body } = await Renderer.render(component as unknown as Component);
307307
expect(head).toBe('');
308-
expect(body).toBe('<!--[--><!--[-->start-async-child--end<!--]--><!--]-->');
308+
expect(body).toBe('<!--[-->start-async-child--end<!--]-->');
309309
});
310310

311311
test('push async functions work with compact operations', async () => {
@@ -324,7 +324,7 @@ describe('async', () => {
324324

325325
const { head, body } = await Renderer.render(component as unknown as Component);
326326
expect(head).toBe('');
327-
expect(body).toBe('<!--[--><!--[-->ABC<!--]--><!--]-->');
327+
expect(body).toBe('<!--[-->ABC<!--]-->');
328328
});
329329

330330
test('push async functions are not supported in sync context', () => {

‎packages/svelte/tests/hydration/samples/binding-input/_expected.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!--[--><!--[--><input> <p>Hello world!</p><!--]--><!--]-->
1+
<!--[--><input> <p>Hello world!</p><!--]-->

‎packages/svelte/tests/hydration/samples/dynamic-text-changed/_expected.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!--[--><!--[--><h1>Hello everybody!</h1><!--]--><!--]-->
1+
<!--[--><h1>Hello everybody!</h1><!--]-->

‎packages/svelte/tests/hydration/samples/each-block-0-on-server-more-on-client/_expected.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!--[--><!--[--><ul><!--[--><li>a</li><!--]--></ul> <ul><!--[--><li>a</li><!--]--></ul> <ul><!--[--><li>a</li><!--]--></ul> <!--[--><li>a</li> <li>a</li><!--]--> <!--[--><li>a</li> <li>a</li><!--]--> <!--[--><li>a</li> <li>a</li><!--]--><!--]--><!--]-->
1+
<!--[--><ul><!--[--><li>a</li><!--]--></ul> <ul><!--[--><li>a</li><!--]--></ul> <ul><!--[--><li>a</li><!--]--></ul> <!--[--><li>a</li> <li>a</li><!--]--> <!--[--><li>a</li> <li>a</li><!--]--> <!--[--><li>a</li> <li>a</li><!--]--><!--]-->

‎packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_expected.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!--[--><!--[--><!--[!--><p>a</p><!--]--> <!--[--><p>empty</p><!--]--><!--]--><!--]-->
1+
<!--[--><!--[!--><p>a</p><!--]--> <!--[--><p>empty</p><!--]--><!--]-->

‎packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_expected.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!--[--><!--[--><ul><!--[--><li>a</li><!--]--></ul> <ul><!--[--><li>a</li><!--]--></ul> <ul><!--[--><li>a</li><!--]--></ul> <!--[--><li>a</li> <li>a</li><!--]--> <!--[--><li>a</li> <li>a</li><!--]--> <!--[--><li>a</li> <li>a</li><!--]--><!--]--><!--]-->
1+
<!--[--><ul><!--[--><li>a</li><!--]--></ul> <ul><!--[--><li>a</li><!--]--></ul> <ul><!--[--><li>a</li><!--]--></ul> <!--[--><li>a</li> <li>a</li><!--]--> <!--[--><li>a</li> <li>a</li><!--]--> <!--[--><li>a</li> <li>a</li><!--]--><!--]-->

‎packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_expected.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!--[--><!--[--><ul><!--[--><li>a</li><li>b</li><!--]--></ul> <ul><!--[--><li>a</li><li>b</li><!--]--></ul> <ul><!--[--><li>a</li><li>b</li><!--]--></ul> <!--[--><li>a</li> <li>a</li><li>b</li> <li>b</li><!--]--> <!--[--><li>a</li> <li>a</li><li>b</li> <li>b</li><!--]--> <!--[--><li>a</li> <li>a</li><li>b</li> <li>b</li><!--]--><!--]--><!--]-->
1+
<!--[--><ul><!--[--><li>a</li><li>b</li><!--]--></ul> <ul><!--[--><li>a</li><li>b</li><!--]--></ul> <ul><!--[--><li>a</li><li>b</li><!--]--></ul> <!--[--><li>a</li> <li>a</li><li>b</li> <li>b</li><!--]--> <!--[--><li>a</li> <li>a</li><li>b</li> <li>b</li><!--]--> <!--[--><li>a</li> <li>a</li><li>b</li> <li>b</li><!--]--><!--]-->

0 commit comments

Comments
 (0)