mirror of https://github.com/sveltejs/svelte
chore: document `@html` and `<img src>` hydration change (#12373)
* chore: document `@html` and `<img src>` hydration change Also add a test for it closes #12333 * add a test * Update sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md Co-authored-by: Rich Harris <rich.harris@vercel.com> * lint * update example and wording * update test * since it turns out we already had a test, we can delete the new one * fix test --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/12397/head
parent
4e8d1c8c52
commit
42a7a0ecd8
@ -1,5 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
let { browser } = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{@html browser ? 'browser' : 'server'}
|
|
@ -0,0 +1,17 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
server_props: {
|
||||||
|
src: 'server.jpg'
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
src: 'client.jpg'
|
||||||
|
},
|
||||||
|
test(assert, target) {
|
||||||
|
// We deliberately don't slow down hydration just for supporting this edge case mismatch.
|
||||||
|
assert.htmlEqual(target.innerHTML, '<img src="server.jpg" alt="">');
|
||||||
|
},
|
||||||
|
errors: [
|
||||||
|
'The `src` attribute on `...<img src="server.jpg" alt="">` changed its value between server and client renders. The client value, `client.jpg`, will be ignored in favour of the server value'
|
||||||
|
]
|
||||||
|
});
|
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
let { src } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<img {src} alt="" />
|
@ -0,0 +1,15 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
test(assert, target) {
|
||||||
|
// This test case guards against a potential future bug where we could optimize html tags away for static content:
|
||||||
|
// Even if the {@html } block seems static, it should be preserved as such, because it could be dynamic originally
|
||||||
|
// (like {@html browser ? 'foo' : 'bar'} which is then different between client and server.
|
||||||
|
// Also see https://github.com/sveltejs/svelte/issues/8683 where this happened for Svelte 4.
|
||||||
|
assert.htmlEqual(target.innerHTML, 'Server');
|
||||||
|
},
|
||||||
|
|
||||||
|
errors: [
|
||||||
|
'The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value'
|
||||||
|
]
|
||||||
|
});
|
@ -0,0 +1 @@
|
|||||||
|
{@html '<p>Client</p> <span>has more nodes so if we would walk this because we think it is static we would get an error</span>'}
|
@ -0,0 +1 @@
|
|||||||
|
{@html 'Server'}
|
@ -1,10 +1,21 @@
|
|||||||
import { test } from '../../test';
|
import { test } from '../../test';
|
||||||
|
|
||||||
export default test({
|
export default test({
|
||||||
// Even if the {@html } block seems static, it should be preserved as such, because it could be dynamic originally
|
server_props: {
|
||||||
// (like {@html browser ? 'foo' : 'bar'} which is then different between client and server.
|
html: 'Server'
|
||||||
// Question is whether that's actually something someone would do in practise, and why, so it's probably better to not
|
},
|
||||||
// slow down hydration just for supporting this edge case - so far we've said no. If someone really needs this we could
|
|
||||||
// add something like {@html dynamic ...}
|
props: {
|
||||||
skip: true
|
html: 'Client'
|
||||||
|
},
|
||||||
|
|
||||||
|
test(assert, target) {
|
||||||
|
// We deliberately don't slow down hydration just for supporting this edge case mismatch.
|
||||||
|
// If someone really needs this and workarounds are insufficient we could add something like {@html dynamic ...}
|
||||||
|
assert.htmlEqual(target.innerHTML, 'Server');
|
||||||
|
},
|
||||||
|
|
||||||
|
errors: [
|
||||||
|
'The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value'
|
||||||
|
]
|
||||||
});
|
});
|
||||||
|
@ -1 +1,5 @@
|
|||||||
{@html '<p>foo</p>'}
|
<script>
|
||||||
|
let { html } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{@html html}
|
||||||
|
Loading…
Reference in new issue