Fix rvalue error when using arrow functions in {@const}

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

@@ -10,7 +10,7 @@ import Block from '../../render_dom/Block';
 import is_dynamic from '../../render_dom/wrappers/shared/is_dynamic';
 import { b } from 'code-red';
 import { invalidate } from '../../render_dom/invalidate';
-import { Node, FunctionExpression, Identifier } from 'estree';
+import { BaseNode, Node, BaseFunction, FunctionExpression, Identifier, Pattern, MemberExpression } from 'estree';
 import { INode } from '../interfaces';
 import { is_reserved_keyword } from '../../utils/reserved_keywords';
 import replace_object from '../../utils/replace_object';
@@ -254,11 +254,33 @@ export default class Expression {
 					const declaration = b`const ${id} = ${node}`;
 
 					if (owner.type === 'ConstTag') {
-						walk(node, {
+						const param_names_stack: string[][] = [];
+						const is_base_function = (node: BaseNode): node is BaseFunction => 'params' in node;
+						const is_member_expression = (node: BaseNode): node is MemberExpression => 'computed' in node;
+						const push_params = (params: Pattern[]) => {
+							const param_names: string[] = [];
+							params.forEach((param => {
+								walk(param, {
 									enter(node: Node) {
-								if (node.type === 'Identifier') {
+										if (node.type === 'Identifier') param_names.push(node.name);
+									}
+								});
+							}));
+							param_names_stack.push(param_names);
+						};
+						const is_context = (node: Identifier, parent: Node, key: string): boolean => {
+							if (key === 'params' || (key === 'property' && is_member_expression(parent) && !parent.computed)) return false;
+							return !param_names_stack.some((param_names) => param_names.includes(node.name));
+						};
+						walk(node, {
+							enter(node: Node, parent: Node, key: string) {
+								if (is_base_function(node)) push_params(node.params);
+								if (node.type === 'Identifier' && is_context(node, parent, key)) {
 									this.replace(block.renderer.reference(node, ctx));
 								}
+							},
+							leave(node: Node) {
+								if (is_base_function(node)) param_names_stack.pop();
 							}
 						});
 					} else if (dependencies.size === 0 && contextual_dependencies.size === 0) {

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

@@ -0,0 +1,29 @@
+export default {
+	html: `
+			<p>0</p>
+			<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+			<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+	`,
+	async test({ component, target, assert }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+			`
+		);
+
+		component.nums = [1, 2, 3];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2,1,2,3,3, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2,0,2,4,3, num: 2</p>
+				<p>bar: -100,0,100,1,-100,0,100,2,-100,0,100,3, num: 3</p>
+		`
+		);
+	}
+};

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

@@ -0,0 +1,26 @@
+<script>
+	export let nums = [1, 2];
+	let foos = [
+		{
+			nums: [1, 2, 3],
+		},
+		{
+			nums: [0, 2, 4],
+		},
+		{
+			nums: [-100, 0, 100],
+		},
+	];
+	let foo = 0;
+</script>
+
+<p>{foo}</p>
+{#each nums as num, index}
+	{@const bar = nums.map((num) => {
+		const func = (foos, num) => {
+			return [...foos.map((foo) => foo), num];
+		}
+		return func(foos[index].nums, num);
+	})}
+	<p>bar: {bar}, num: {num}</p>
+{/each}

test/runtime/samples/const-tag-each-duplicated-variable1/_config.js

@@ -0,0 +1,29 @@
+export default {
+	html: `
+		<p>bar: 1,2,3,0,2,4,-100,0,100, num: 1</p>
+		<p>bar: 1,2,3,0,2,4,-100,0,100, num: 2</p>
+		<p>bar: 1,2,3,0,2,4,-100,0,100, num: 3</p>
+	`,
+	async test({ component, target, assert }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			  <p>bar: 1,2,3,0,2,4,-100,0,100, num: 1</p>
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 2</p>
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 3</p>
+			`
+		);
+
+		component.nums = [1, 2, 3, 4];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 1</p>
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 2</p>
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 3</p>
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 4</p>
+		`
+		);
+	}
+};

test/runtime/samples/const-tag-each-duplicated-variable1/main.svelte

@@ -0,0 +1,19 @@
+<script>
+	export let nums = [1, 2, 3];
+	let foos = [
+		{
+			nums: [1, 2, 3],
+		},
+		{
+			nums: [0, 2, 4],
+		},
+		{
+			nums: [-100, 0, 100],
+		},
+	];
+</script>
+
+{#each nums as num}
+	{@const bar = foos.map((foos) => foos.nums)}
+	<p>bar: {bar}, num: {num}</p>
+{/each}

test/runtime/samples/const-tag-each-duplicated-variable2/_config.js

@@ -0,0 +1,32 @@
+export default {
+	html: `
+	    <p>foo: dummy-foo, num: dummy-num</p>
+		  <p>bar: 1,2,3,2,, num: 1</p>
+			<p>bar: 1,2,3,2,, num: 2</p>
+			<p>bar: 1,2,3,2,, num: 3</p>
+	`,
+	async test({ component, target, assert }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			  <p>foo: dummy-foo, num: dummy-num</p>
+			  <p>bar: 1,2,3,2,, num: 1</p>
+				<p>bar: 1,2,3,2,, num: 2</p>
+				<p>bar: 1,2,3,2,, num: 3</p>
+			`
+		);
+
+		component.nums = [1, 2, 3, 4];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			  <p>foo: dummy-foo, num: dummy-num</p>
+				<p>bar: 1,2,3,2,4,, num: 1</p>
+				<p>bar: 1,2,3,2,4,, num: 2</p>
+				<p>bar: 1,2,3,2,4,, num: 3</p>
+				<p>bar: 1,2,3,2,4,, num: 4</p>
+		`
+		);
+	}
+};

test/runtime/samples/const-tag-each-duplicated-variable2/main.svelte

@@ -0,0 +1,33 @@
+<script>
+	export let nums = [1, 2, 3];
+	let foos = [
+		{
+			nums: [1, 2, 3],
+		},
+		{
+			nums: [0, 2, 4],
+		},
+		{
+			nums: [-100, 0, 100],
+		},
+	];
+	let default_nums = [-1];
+	let foo = "dummy-foo";
+	let num = "dummy-num";
+</script>
+
+<p>foo: {foo}, num: {num}</p>
+{#each nums as num}
+	{@const bar = foos.map((foo) =>
+		foo.nums.filter((num) => {
+      if (Object.keys($$slots).length) {
+        return false;
+			} else if (Object.keys(foo).length) {
+				return nums.includes(num) || default_nums.includes(num);
+			} else {
+				return false;
+			}
+		}) || num
+	)}
+	<p>bar: {bar}, num: {num}</p>
+{/each}

test/runtime/samples/const-tag-each-duplicated-variable3/_config.js

@@ -0,0 +1,29 @@
+export default {
+	html: `
+			<p>0</p>
+			<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+			<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+	`,
+	async test({ component, target, assert }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+			`
+		);
+
+		component.nums = [1, 2, 3];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2,1,2,3,3, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2,0,2,4,3, num: 2</p>
+				<p>bar: -100,0,100,1,-100,0,100,2,-100,0,100,3, num: 3</p>
+		`
+		);
+	}
+};

test/runtime/samples/const-tag-each-duplicated-variable3/main.svelte

@@ -0,0 +1,25 @@
+<script>
+	export let nums = [1, 2];
+	let foos = [
+		{
+			nums: [1, 2, 3],
+		},
+		{
+			nums: [0, 2, 4],
+		},
+		{
+			nums: [-100, 0, 100],
+		},
+	];
+	let foo = 0;
+</script>
+
+<p>{foo}</p>
+{#each nums as num, index}
+	{@const bar = nums.map((num) => {
+		return (function (foos, num) {
+			return [...foos.map((foo) => foo), num];
+		})(foos[index].nums, num);
+	})}
+	<p>bar: {bar}, num: {num}</p>
+{/each}

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

@@ -0,0 +1,29 @@
+export default {
+	html: `
+			<p>0</p>
+			<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+			<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+	`,
+	async test({ component, target, assert }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+			`
+		);
+
+		component.nums = [1, 2, 3];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2,1,2,3,3, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2,0,2,4,3, num: 2</p>
+				<p>bar: -100,0,100,1,-100,0,100,2,-100,0,100,3, num: 3</p>
+		`
+		);
+	}
+};

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

@@ -0,0 +1,26 @@
+<script>
+	export let nums = [1, 2];
+	let foos = [
+		{
+			nums: [1, 2, 3],
+		},
+		{
+			nums: [0, 2, 4],
+		},
+		{
+			nums: [-100, 0, 100],
+		},
+	];
+	let foo = 0;
+</script>
+
+<p>{foo}</p>
+{#each nums as num, index}
+	{@const bar = nums.map((num) => {
+		function func(foos, num) {
+			return [...foos.map((foo) => foo), num];
+		}
+		return func(foos[index].nums, num);
+	})}
+	<p>bar: {bar}, num: {num}</p>
+{/each}