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';
|
||||
|
||||
export default test({
|
||||
// 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.
|
||||
// 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 ...}
|
||||
skip: true
|
||||
server_props: {
|
||||
html: 'Server'
|
||||
},
|
||||
|
||||
props: {
|
||||
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