diff --git a/.changeset/unlucky-laws-decide.md b/.changeset/unlucky-laws-decide.md new file mode 100644 index 000000000000..c5fd7c65d93f --- /dev/null +++ b/.changeset/unlucky-laws-decide.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure input elements and elements with `dir` attribute are marked as non-static diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js index 5bc3041ca453..f076d7c11ea9 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js @@ -144,6 +144,17 @@ function is_static_element(node, state) { return false; } + if (attribute.name === 'dir') { + return false; + } + + if ( + ['input', 'textarea'].includes(node.name) && + ['value', 'checked'].includes(attribute.name) + ) { + return false; + } + if (node.name === 'option' && attribute.name === 'value') { return false; } diff --git a/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/_config.js b/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/_config.js new file mode 100644 index 000000000000..e3c629aef989 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/_config.js @@ -0,0 +1,9 @@ +import { test } from '../../test'; + +export default test({ + test(assert, target) { + const p = target.querySelector('p'); + + assert.equal(p?.dir, 'rtl'); + } +}); diff --git a/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/main.svelte b/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/main.svelte new file mode 100644 index 000000000000..802edc0feeb6 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/main.svelte @@ -0,0 +1 @@ +

text

. diff --git a/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_config.js b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_config.js new file mode 100644 index 000000000000..31ec66fc8857 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_config.js @@ -0,0 +1,9 @@ +import { test } from '../../test'; + +export default test({ + test(assert, target) { + const input = target.querySelector('input'); + + assert.equal(input?.checked, true); + } +}); diff --git a/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_expected.html b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_expected.html new file mode 100644 index 000000000000..bcd53f878357 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_expected.html @@ -0,0 +1 @@ +. diff --git a/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/main.svelte b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/main.svelte new file mode 100644 index 000000000000..db3eae870f7c --- /dev/null +++ b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/main.svelte @@ -0,0 +1 @@ +.