fix: skip is_standalone optimisation for dynamic components (#12767)

* fix: skip `is_standalone` optimisation for dynamic components * changeset
sveltejs · Aug 8, 2024 · ec8a029 · ec8a029
1 parent 60148d3
commit ec8a029
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 0 deletions.
diff --git a/.changeset/nice-bottles-greet.md b/.changeset/nice-bottles-greet.md
@@ -0,0  1,5 @@
 ---
 'svelte': patch
 ---
 
 fix: skip `is_standalone` optimisation for dynamic components
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -283,6  283,7 @@ export function clean_nodes(
 			((first.type === 'RenderTag' && !first.metadata.dynamic) ||
 				(first.type === 'Component' &&
 					!state.options.hmr &&
 					!first.metadata.dynamic &&
 					!first.attributes.some(
 						(attribute) => attribute.type === 'Attribute' && attribute.name.startsWith('--')
 					))),

diff --git a/packages/svelte/tests/runtime-runes/samples/member-expression-component/Row.svelte b/packages/svelte/tests/runtime-runes/samples/member-expression-component/Row.svelte
@@ -0,0  1,5 @@
 <script>
 	let { id } = $props();
 </script>
 
 <span>{id}</span>
diff --git a/packages/svelte/tests/runtime-runes/samples/member-expression-component/_config.js b/packages/svelte/tests/runtime-runes/samples/member-expression-component/_config.js
@@ -0,0  1,16 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
 	html: `<button>flip</button> <span>0</span><span>1</span><span>2</span>`,
 
 	async test({ assert, target }) {
 		const button = target.querySelector('button');
 
 		flushSync(() => button?.click());
 		assert.htmlEqual(
 			target.innerHTML,
 			`<button>flip</button> <span>2</span><span>1</span><span>0</span>`
 		);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/member-expression-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/member-expression-component/main.svelte
@@ -0,0  1,13 @@
 <script>
 	import Row from './Row.svelte';
 
 	const items = $state([{ id: 0 }, { id: 1 }, { id: 2 }]);
 
 	const Table = { Row };
 </script>
 
 <button onclick={() => items.reverse()}> flip </button>
 
 {#each items as item (item.id)}
 	<Table.Row id={item.id} />
 {/each}