[fix] fix crash when using arrow functions in {@const} (#7144)

Author: baseballyama

src/compiler/compile/nodes/shared/Expression.ts

@@ -253,7 +253,15 @@ export default class Expression {
 
 					const declaration = b`const ${id} = ${node}`;
 
-					if (dependencies.size === 0 && contextual_dependencies.size === 0) {
+					if (owner.type === 'ConstTag') {
+						walk(node, {
+							enter(node: Node) {
+								if (node.type === 'Identifier') {
+									this.replace(block.renderer.reference(node, ctx));
+								}
+							}
+						});
+					} else if (dependencies.size === 0 && contextual_dependencies.size === 0) {
 						// we can hoist this out of the component completely
 						component.fully_hoisted.push(declaration);
 

test/runtime/samples/const-tag-each-arrow/_config.js

@@ -0,0 +1,47 @@
+export default {
+	html: `
+			<p>#FF0000</p>
+			<p>#00FF00</p>
+			<p>#0000FF</p>
+	`,
+	async test({ component, target, assert }) {
+		component.constant = 20;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>#FF0000</p>
+			<p>#00FF00</p>
+			<p>#0000FF</p>
+		`);
+
+		component.tags = [
+			{
+				name: 'Red',
+				color: '#FF0000'
+			},
+			{
+				name: 'Green',
+				color: '#00FF00'
+			},
+			{
+				name: 'Blue',
+				color: '#0000FF'
+			},
+			{
+				name: 'Black',
+				color: '#000000'
+			},
+			{
+				name: 'White',
+				color: '#FFFFFF'
+			}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>#FF0000</p>
+			<p>#00FF00</p>
+			<p>#0000FF</p>
+			<p>#000000</p>
+			<p>#FFFFFF</p>
+		`);
+	}
+};

test/runtime/samples/const-tag-each-arrow/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	export let tags = [
+		{
+			name: 'Red',
+			color: '#FF0000'
+		},
+		{
+			name: 'Green',
+			color: '#00FF00'
+		},
+		{
+			name: 'Blue',
+			color: '#0000FF'
+		}
+	];
+</script>
+
+{#each tags as tag}
+	{@const tagColor = tags.find(t => t.name === tag.name).color}
+	<p>{tagColor}</p>
+{/each}