From 347774af637535d56d9432c880166b8a30d47049 Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Thu, 23 Feb 2023 08:36:02 +0800
Subject: [PATCH] feat: dynamic $$slots

---
 src/compiler/compile/Component.ts             |  6 ++--
 test/runtime/samples/$$slot-dynamic/A.svelte  | 28 +++++++++++++++++
 .../runtime/samples/$$slot-dynamic/_config.js | 23 ++++++++++++++
 .../samples/$$slot-dynamic/main.svelte        | 30 +++++++++++++++++++
 .../Foo.svelte                                |  3 ++
 .../_config.js                                | 13 ++++++++
 .../main.svelte                               | 16 ++++++++++
 7 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 test/runtime/samples/$$slot-dynamic/A.svelte
 create mode 100644 test/runtime/samples/$$slot-dynamic/_config.js
 create mode 100644 test/runtime/samples/$$slot-dynamic/main.svelte
 create mode 100644 test/runtime/samples/component-conditional-slot-10-default/Foo.svelte
 create mode 100644 test/runtime/samples/component-conditional-slot-10-default/_config.js
 create mode 100644 test/runtime/samples/component-conditional-slot-10-default/main.svelte

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index c0d703892b61..e4b42e005c6a 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -219,7 +219,8 @@ export default class Component {
 			this.add_var(node, {
 				name,
 				injected: true,
-				referenced: true
+				referenced: true,
+				reassigned: name === '$$slots'
 			});
 		} else if (name[0] === '$') {
 			this.add_var(node, {
@@ -720,7 +721,8 @@ export default class Component {
 			} else if (is_reserved_keyword(name)) {
 				this.add_var(node, {
 					name,
-					injected: true
+					injected: true,
+					reassigned: name === '$$slots'
 				});
 			} else if (name[0] === '$') {
 				if (name === '$' || name[1] === '$') {
diff --git a/test/runtime/samples/$$slot-dynamic/A.svelte b/test/runtime/samples/$$slot-dynamic/A.svelte
new file mode 100644
index 000000000000..8b73875de244
--- /dev/null
+++ b/test/runtime/samples/$$slot-dynamic/A.svelte
@@ -0,0 +1,28 @@
+<script>
+	$: data = toString($$slots);
+	$: stringified = toString($$slots);
+
+	export function getData() {
+		return data;
+	}
+
+	function toString(data) {
+		const result = {};
+		const sortedKeys = Object.keys(data).sort();
+		sortedKeys.forEach(key => result[key] = data[key]);
+		return JSON.stringify(result);
+	}
+</script>
+
+<slot></slot>
+<slot name="a"></slot>
+
+$$slots: {toString($$slots)} {stringified}
+
+{#if $$slots.b}
+	<div>
+		<slot name="b"></slot>
+	</div>
+{:else}
+	Slot b is not available
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/$$slot-dynamic/_config.js b/test/runtime/samples/$$slot-dynamic/_config.js
new file mode 100644
index 000000000000..2a3cc2bc9c54
--- /dev/null
+++ b/test/runtime/samples/$$slot-dynamic/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<span>bye</span><span>default</span>
+		<span>hello a</span>
+		$$slots: {"a":true,"default":true} {"a":true,"default":true}
+		Slot b is not available
+	`,
+
+	async test({ assert, component, target }) {
+		assert.equal(component.getData(), '{"a":true,"default":true}');
+		
+		component.show_b = true;
+		assert.htmlEqual(target.innerHTML, `
+			<span>bye</span><span>default</span>
+			<span>hello a</span>
+			$$slots: {"a":true,"b":true,"default":true} {"a":true,"b":true,"default":true}
+			<div><span>hello b</span></div>
+		`);
+		assert.equal(component.getData(), '{"a":true,"b":true,"default":true}');
+
+		component.show_default = false;
+	}
+};
diff --git a/test/runtime/samples/$$slot-dynamic/main.svelte b/test/runtime/samples/$$slot-dynamic/main.svelte
new file mode 100644
index 000000000000..bcaeafd16749
--- /dev/null
+++ b/test/runtime/samples/$$slot-dynamic/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	import A from "./A.svelte";
+	let a;
+	export let show_default = true;
+	export let show_a = true;
+	export let show_b = false;
+
+	export function getData() {
+		return a.getData();
+	}
+</script>
+
+<A bind:this={a}>
+	{#if show_a}
+		<svelte:fragment slot="a">
+			<span>hello a</span>
+		</svelte:fragment>
+	{/if}
+	{#if show_default}
+		<svelte:fragment slot="default">
+			<span>bye</span>
+			<span>default</span>
+		</svelte:fragment>
+	{/if}
+	{#if show_b}
+		<svelte:fragment slot="b">
+			<span>hello b</span>
+		</svelte:fragment>
+	{/if}
+</A>
diff --git a/test/runtime/samples/component-conditional-slot-10-default/Foo.svelte b/test/runtime/samples/component-conditional-slot-10-default/Foo.svelte
new file mode 100644
index 000000000000..7ffa56838602
--- /dev/null
+++ b/test/runtime/samples/component-conditional-slot-10-default/Foo.svelte
@@ -0,0 +1,3 @@
+<div>
+  <slot>default fallback</slot>
+</div>
diff --git a/test/runtime/samples/component-conditional-slot-10-default/_config.js b/test/runtime/samples/component-conditional-slot-10-default/_config.js
new file mode 100644
index 000000000000..6a107285eac7
--- /dev/null
+++ b/test/runtime/samples/component-conditional-slot-10-default/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<div></div>
+		<div>default fallback</div>
+	`,
+	test({ assert, component, target }) {
+		component.condition = true;
+		assert.htmlEqual(target.innerHTML, `
+			<div>hello #1</div>
+			<div>hello #2</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-conditional-slot-10-default/main.svelte b/test/runtime/samples/component-conditional-slot-10-default/main.svelte
new file mode 100644
index 000000000000..a940df602c87
--- /dev/null
+++ b/test/runtime/samples/component-conditional-slot-10-default/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Foo from "./Foo.svelte";
+	export let condition = false;
+</script>
+
+<Foo>
+	{#if condition}
+		hello #1
+	{/if}
+</Foo>
+
+<Foo>
+	{#if condition}
+		<svelte:fragment slot="default">hello #2</svelte:fragment>
+	{/if}
+</Foo>