From e8b0a0d0ca3b20571326a74cebe783f6bede4184 Mon Sep 17 00:00:00 2001 From: Nguyen Tran Date: Sun, 9 Jul 2023 21:32:27 -0400 Subject: [PATCH 1/4] svelte:component evaluates props once --- .../wrappers/InlineComponent/index.js | 6 +---- .../Comp1.svelte | 5 ++++ .../Comp2.svelte | 5 ++++ .../_config.js | 26 +++++++++++++++++++ .../main.svelte | 12 +++++++++ 5 files changed, 49 insertions(+), 5 deletions(-) create mode 100644 packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/Comp1.svelte create mode 100644 packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/Comp2.svelte create mode 100644 packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/_config.js create mode 100644 packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/main.svelte diff --git a/packages/svelte/src/compiler/compile/render_dom/wrappers/InlineComponent/index.js b/packages/svelte/src/compiler/compile/render_dom/wrappers/InlineComponent/index.js index 3544a759dd1e..ef7e5432d47e 100644 --- a/packages/svelte/src/compiler/compile/render_dom/wrappers/InlineComponent/index.js +++ b/packages/svelte/src/compiler/compile/render_dom/wrappers/InlineComponent/index.js @@ -436,11 +436,6 @@ export default class InlineComponentWrapper extends Wrapper { b`if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});` ); } - if (updates.length) { - block.chunks.update.push(b` - ${updates} - `); - } const tmp_anchor = this.get_or_create_anchor(block, parent_node, parent_nodes); const anchor = has_css_custom_properties ? 'null' : tmp_anchor; const update_mount_node = has_css_custom_properties @@ -481,6 +476,7 @@ export default class InlineComponentWrapper extends Wrapper { ${name} = null; } } else if (${switch_value}) { + ${updates} ${updates.length > 0 && b`${name}.$set(${name_changes});`} } `); diff --git a/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/Comp1.svelte b/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/Comp1.svelte new file mode 100644 index 000000000000..d4fe28a8a370 --- /dev/null +++ b/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/Comp1.svelte @@ -0,0 +1,5 @@ + + +

value(1) = {value}

diff --git a/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/Comp2.svelte b/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/Comp2.svelte new file mode 100644 index 000000000000..07d41f3d8464 --- /dev/null +++ b/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/Comp2.svelte @@ -0,0 +1,5 @@ + + +

value(2) = {value}

diff --git a/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/_config.js b/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/_config.js new file mode 100644 index 000000000000..cf0217174efd --- /dev/null +++ b/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/_config.js @@ -0,0 +1,26 @@ +export default { + html: ` +

value(1) = 1

+ + `, + + async test({ assert, component, window, target }) { + const button = target.querySelector('button'); + await button.dispatchEvent(new window.Event('click')); + assert.htmlEqual( + target.innerHTML, ` +

value(2) = 2

+ + ` + ); + assert.equal(component.n, 2); + await button.dispatchEvent(new window.Event('click')); + assert.htmlEqual( + target.innerHTML, ` +

value(1) = 3

+ + ` + ); + assert.equal(component.n, 3); + } +}; diff --git a/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/main.svelte b/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/main.svelte new file mode 100644 index 000000000000..3a5805b3e546 --- /dev/null +++ b/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/main.svelte @@ -0,0 +1,12 @@ + + + + + + From b321c219af64dc21ba31bffe045379300d9881ec Mon Sep 17 00:00:00 2001 From: Nguyen Tran Date: Sun, 9 Jul 2023 21:39:43 -0400 Subject: [PATCH 2/4] Prettier formatting --- .../samples/dynamic-component-evals-props-once/_config.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/_config.js b/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/_config.js index cf0217174efd..a8c94dbb8a6b 100644 --- a/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/_config.js +++ b/packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/_config.js @@ -8,7 +8,8 @@ export default { const button = target.querySelector('button'); await button.dispatchEvent(new window.Event('click')); assert.htmlEqual( - target.innerHTML, ` + target.innerHTML, + `

value(2) = 2

` @@ -16,7 +17,8 @@ export default { assert.equal(component.n, 2); await button.dispatchEvent(new window.Event('click')); assert.htmlEqual( - target.innerHTML, ` + target.innerHTML, + `

value(1) = 3

` From 65e48a317b21dbaca831541cd36635efb469a2a9 Mon Sep 17 00:00:00 2001 From: Nguyen Tran Date: Mon, 10 Jul 2023 08:20:01 -0400 Subject: [PATCH 3/4] Add changeset --- .changeset/clever-ghosts-laugh.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/clever-ghosts-laugh.md diff --git a/.changeset/clever-ghosts-laugh.md b/.changeset/clever-ghosts-laugh.md new file mode 100644 index 000000000000..42372f1361ea --- /dev/null +++ b/.changeset/clever-ghosts-laugh.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +svelte:component evaluates props once From 0b46053ff261a10d0e9300a93d71434ae616278d Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Mon, 10 Jul 2023 17:55:45 +0200 Subject: [PATCH 4/4] Update .changeset/clever-ghosts-laugh.md --- .changeset/clever-ghosts-laugh.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/clever-ghosts-laugh.md b/.changeset/clever-ghosts-laugh.md index 42372f1361ea..3de871ba799c 100644 --- a/.changeset/clever-ghosts-laugh.md +++ b/.changeset/clever-ghosts-laugh.md @@ -2,4 +2,4 @@ 'svelte': patch --- -svelte:component evaluates props once +fix: ensure `svelte:component` evaluates props once