diff --git a/.changeset/thirty-steaks-dream.md b/.changeset/thirty-steaks-dream.md new file mode 100644 index 000000000000..a14677bad7d1 --- /dev/null +++ b/.changeset/thirty-steaks-dream.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ignore trailing comments when comparing nodes diff --git a/packages/svelte/src/compiler/compile/render_dom/invalidate.js b/packages/svelte/src/compiler/compile/render_dom/invalidate.js index 83423e952bc3..a007d1af7dbd 100644 --- a/packages/svelte/src/compiler/compile/render_dom/invalidate.js +++ b/packages/svelte/src/compiler/compile/render_dom/invalidate.js @@ -50,7 +50,7 @@ export function invalidate(renderer, scope, node, names, main_execution_context if ( node.type === 'AssignmentExpression' && node.operator === '=' && - nodes_match(node.left, node.right) && + nodes_match(node.left, node.right, ['trailingComments','leadingComments']) && tail.length === 0 ) { return get_invalidated(head, node); diff --git a/packages/svelte/src/compiler/utils/nodes_match.js b/packages/svelte/src/compiler/utils/nodes_match.js index ff841d5f02f7..2337416f0eed 100644 --- a/packages/svelte/src/compiler/utils/nodes_match.js +++ b/packages/svelte/src/compiler/utils/nodes_match.js @@ -1,4 +1,4 @@ -export function nodes_match(a, b) { +export function nodes_match(a, b, ignoreKeys=[]) { if (!!a !== !!b) return false; if (Array.isArray(a) !== Array.isArray(b)) return false; @@ -8,8 +8,8 @@ export function nodes_match(a, b) { return a.every((child, i) => nodes_match(child, b[i])); } - const a_keys = Object.keys(a).sort(); - const b_keys = Object.keys(b).sort(); + const a_keys = Object.keys(a).sort().filter(key => !ignoreKeys.includes(key)); + const b_keys = Object.keys(b).sort().filter(key => !ignoreKeys.includes(key)); if (a_keys.length !== b_keys.length) return false; diff --git a/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/SomeComponent.svelte b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/SomeComponent.svelte new file mode 100644 index 000000000000..5c7f400318a2 --- /dev/null +++ b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/SomeComponent.svelte @@ -0,0 +1,20 @@ + + + + +{objectPropCopy} +
{count}
diff --git a/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/_config.js b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/_config.js new file mode 100644 index 000000000000..d1b7d61dcc8d --- /dev/null +++ b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/_config.js @@ -0,0 +1,9 @@ +export default { + async test({ assert, target, window }) { + const incrementButton = target.querySelector('button'); + + assert.equal(target.querySelector('#render-count').innerHTML, '1'); + await incrementButton.dispatchEvent(new window.MouseEvent('click')); + assert.equal(target.querySelector('#render-count').innerHTML, '2'); + } +}; diff --git a/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/main.svelte b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/main.svelte new file mode 100644 index 000000000000..6d1985392a4d --- /dev/null +++ b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/main.svelte @@ -0,0 +1,8 @@ + + +