From 6787855c527ce4ea8a8bf6a69c00a9c2216903b1 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Sat, 15 Apr 2023 23:29:59 -0400
Subject: [PATCH 01/11] Implemented dynamic slot name

---
 src/compiler/compile/nodes/Slot.ts            | 29 ++++++++++++++-----
 .../compile/render_dom/wrappers/Slot.ts       |  5 ++--
 .../compile/render_ssr/handlers/Slot.ts       |  6 ++--
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/compiler/compile/nodes/Slot.ts b/src/compiler/compile/nodes/Slot.ts
index c21a48f5d665..362a9276dbd8 100644
--- a/src/compiler/compile/nodes/Slot.ts
+++ b/src/compiler/compile/nodes/Slot.ts
@@ -3,7 +3,7 @@ import Attribute from './Attribute';
 import Component from '../Component';
 import TemplateScope from './shared/TemplateScope';
 import { INode } from './interfaces';
-import { TemplateNode } from '../../interfaces';
+import { TemplateNode, Attribute as AttributeNode } from '../../interfaces';
 import compiler_errors from '../compiler_errors';
 
 export default class Slot extends Element {
@@ -11,31 +11,44 @@ export default class Slot extends Element {
 	name: string;
 	children: INode[];
 	slot_name: string;
+	name_attribute: Attribute;
 	values: Map<string, Attribute> = new Map();
 
 	constructor(component: Component, parent: INode, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
 
-		info.attributes.forEach(attr => {
+		info.attributes.forEach((attr: AttributeNode) => {
 			if (attr.type !== 'Attribute' && attr.type !== 'Spread') {
 				return component.error(attr, compiler_errors.invalid_slot_directive);
 			}
-
+      
+			const new_attribute = new Attribute(component, this, scope, attr);
 			if (attr.name === 'name') {
-				if (attr.value.length !== 1 || attr.value[0].type !== 'Text') {
-					return component.error(attr, compiler_errors.dynamic_slot_name);
+				if (attr.value.length === 1 && attr.value[0].type === 'Text') {
+					this.slot_name = attr.value[0].data;
+				} else {
+					this.slot_name = component.get_unique_name('dynamic_slot_name').name;
 				}
 
-				this.slot_name = attr.value[0].data;
 				if (this.slot_name === 'default') {
 					return component.error(attr, compiler_errors.invalid_slot_name);
 				}
+
+        this.name_attribute = new_attribute;
 			}
 
-			this.values.set(attr.name, new Attribute(component, this, scope, attr));
+			this.values.set(attr.name, new_attribute);
 		});
 
-		if (!this.slot_name) this.slot_name = 'default';
+		if (!this.slot_name) {
+			// If there is no name attribute, pretend we do have a name attribute with value 'default'
+			this.slot_name = 'default';
+			this.name_attribute = new Attribute(component, this, scope, {
+				type: 'Attribute',
+				name: 'name',
+				value: [ { type: 'Text', data: 'default' } ]
+			} as AttributeNode);
+		}
 
 		if (this.slot_name === 'default') {
 			// if this is the default slot, add our dependencies to any
diff --git a/src/compiler/compile/render_dom/wrappers/Slot.ts b/src/compiler/compile/render_dom/wrappers/Slot.ts
index 0a589e339489..040909c73dbc 100644
--- a/src/compiler/compile/render_dom/wrappers/Slot.ts
+++ b/src/compiler/compile/render_dom/wrappers/Slot.ts
@@ -69,7 +69,7 @@ export default class SlotWrapper extends Wrapper {
 	) {
 		const { renderer } = this;
 
-		const { slot_name } = this.node;
+		const { slot_name, name_attribute } = this.node;
 
 		if (this.slot_block) {
 			block = this.slot_block;
@@ -128,8 +128,9 @@ export default class SlotWrapper extends Wrapper {
 		const slot_definition = block.get_unique_name(`${sanitize(slot_name)}_slot_template`);
 		const slot_or_fallback = has_fallback ? block.get_unique_name(`${sanitize(slot_name)}_slot_or_fallback`) : slot;
 
+		const slot_expression = name_attribute.get_value(block);
 		block.chunks.init.push(b`
-			const ${slot_definition} = ${renderer.reference('#slots')}.${slot_name};
+			const ${slot_definition} = ${renderer.reference('#slots')}[${slot_expression}];
 			const ${slot} = @create_slot(${slot_definition}, #ctx, ${renderer.reference('$$scope')}, ${get_slot_context_fn});
 			${has_fallback ? b`const ${slot_or_fallback} = ${slot} || ${this.fallback.name}(#ctx);` : null}
 		`);
diff --git a/src/compiler/compile/render_ssr/handlers/Slot.ts b/src/compiler/compile/render_ssr/handlers/Slot.ts
index f89b619c466d..137d9c8e6e40 100644
--- a/src/compiler/compile/render_ssr/handlers/Slot.ts
+++ b/src/compiler/compile/render_ssr/handlers/Slot.ts
@@ -2,6 +2,7 @@ import Renderer, { RenderOptions } from '../Renderer';
 import Slot from '../../nodes/Slot';
 import { x } from 'code-red';
 import get_slot_data from '../../utils/get_slot_data';
+import { get_attribute_value } from './shared/get_attribute_value';
 import { get_slot_scope } from './shared/get_slot_scope';
 
 export default function(node: Slot, renderer: Renderer, options: RenderOptions & {
@@ -19,9 +20,10 @@ export default function(node: Slot, renderer: Renderer, options: RenderOptions &
 	renderer.render(node.children, options);
 	const result = renderer.pop();
 
+	const slot_expression = get_attribute_value(node.name_attribute);
 	renderer.add_expression(x`
-		#slots.${node.slot_name}
-			? #slots.${node.slot_name}(${slot_data})
+		#slots[${slot_expression}]
+			? #slots[${slot_expression}](${slot_data})
 			: ${result}
 	`);
 

From 2f32f948ee3a436eb132ea902d85812c22e76be9 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Sat, 15 Apr 2023 23:41:35 -0400
Subject: [PATCH 02/11] Remove dynamic slot name error

---
 src/compiler/compile/compiler_errors.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index bad3911673fc..da0ad0defea8 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/src/compiler/compile/compiler_errors.ts
@@ -132,10 +132,6 @@ export default {
 		code: 'invalid-slot-directive',
 		message: '<slot> cannot have directives'
 	},
-	dynamic_slot_name: {
-		code: 'dynamic-slot-name',
-		message: '<slot> name cannot be dynamic'
-	},
 	invalid_slot_name: {
 		code: 'invalid-slot-name',
 		message: 'default is a reserved word — it cannot be used as a slot name'

From ae02d4720afb24af122bd18905c168a9ae60c94f Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Tue, 25 Apr 2023 13:56:35 -0400
Subject: [PATCH 03/11] Implement dynamic slot attribute

---
 src/compiler/compile/nodes/Element.ts         |  4 ---
 src/compiler/compile/nodes/SlotTemplate.ts    | 18 ++++++++-----
 .../wrappers/InlineComponent/index.ts         | 27 ++++++++++++-------
 .../render_dom/wrappers/SlotTemplate.ts       |  5 +---
 .../render_ssr/handlers/InlineComponent.ts    |  4 +--
 .../compile/render_ssr/handlers/Slot.ts       |  2 +-
 .../render_ssr/handlers/SlotTemplate.ts       |  3 ++-
 7 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 2410904d6301..9f3284cab947 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -529,10 +529,6 @@ export default class Element extends Node {
 			}
 
 			if (name === 'slot') {
-				if (!attribute.is_static) {
-					return component.error(attribute, compiler_errors.invalid_slot_attribute);
-				}
-
 				if (component.slot_outlets.has(name)) {
 					return component.error(attribute, compiler_errors.duplicate_slot_attribute(name));
 
diff --git a/src/compiler/compile/nodes/SlotTemplate.ts b/src/compiler/compile/nodes/SlotTemplate.ts
index 90299c8e3954..c9bee04e37af 100644
--- a/src/compiler/compile/nodes/SlotTemplate.ts
+++ b/src/compiler/compile/nodes/SlotTemplate.ts
@@ -16,6 +16,7 @@ export default class SlotTemplate extends Node {
 	const_tags: ConstTag[];
 	slot_attribute: Attribute;
 	slot_template_name: string = 'default';
+	is_static: boolean = true;
 
 	constructor(
 		component: Component,
@@ -44,14 +45,17 @@ export default class SlotTemplate extends Node {
 				case 'Attribute': {
 					if (node.name === 'slot') {
 						this.slot_attribute = new Attribute(component, this, scope, node);
-						if (!this.slot_attribute.is_static) {
-							return component.error(node, compiler_errors.invalid_slot_attribute);
+						if (this.slot_attribute.is_static) {
+							const value = this.slot_attribute.get_static_value();
+							if (typeof value === 'boolean') {
+								return component.error(node, compiler_errors.invalid_slot_attribute_value_missing);
+							}
+							this.slot_template_name = value as string;
+							this.is_static = true;
+						} else {
+							this.slot_template_name = component.get_unique_name('dynamic_slot_template').name;
+							this.is_static = false;
 						}
-						const value = this.slot_attribute.get_static_value();
-						if (typeof value === 'boolean') {
-							return component.error(node, compiler_errors.invalid_slot_attribute_value_missing);
-						}
-						this.slot_template_name = value as string;
 						break;
 					}
 					throw new Error(`Invalid attribute '${node.name}' in <svelte:fragment>`);
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index ab140a75c500..502690d2c5f2 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -29,7 +29,8 @@ const regex_invalid_variable_identifier_characters = /[^a-zA-Z_$]/g;
 
 export default class InlineComponentWrapper extends Wrapper {
 	var: Identifier;
-	slots: Map<string, SlotDefinition> = new Map();
+	slots: Map<SlotTemplate, SlotDefinition> = new Map();
+	staic_slot_names: Set<string> = new Set();
 	node: InlineComponent;
 	fragment: FragmentWrapper;
 	children: Array<Wrapper | FragmentWrapper> = [];
@@ -95,14 +96,20 @@ export default class InlineComponentWrapper extends Wrapper {
 		block.add_outro();
 	}
 
-	set_slot(name: string, slot_definition: SlotDefinition) {
-		if (this.slots.has(name)) {
-			if (name === 'default') {
-				throw new Error('Found elements without slot attribute when using slot="default"');
+	set_slot(slot: SlotTemplate, slot_definition: SlotDefinition) {
+		if (slot.is_static) {
+			const name = slot.slot_template_name;
+			if (this.staic_slot_names.has(name)) {
+				if (name === 'default') {
+					throw new Error('Found elements without slot attribute when using slot="default"');
+				}
+				throw new Error(`Duplicate slot name "${name}" in <${this.node.name}>`);
+			} else {
+				this.staic_slot_names.add(name);
 			}
-			throw new Error(`Duplicate slot name "${name}" in <${this.node.name}>`);
 		}
-		this.slots.set(name, slot_definition);
+
+		this.slots.set(slot, slot_definition);
 	}
 
 	warn_if_reactive() {
@@ -167,8 +174,10 @@ export default class InlineComponentWrapper extends Wrapper {
 		const initial_props = this.slots.size > 0
 			? [
 				p`$$slots: {
-					${Array.from(this.slots).map(([name, slot]) => {
-						return p`${name}: [${slot.block.name}, ${slot.get_context || null}, ${slot.get_changes || null}]`;
+					${Array.from(this.slots).map(([slot_template, slot]) => {
+						const { is_static, slot_template_name, slot_attribute } = slot_template;
+						const slot_expression = is_static ? { type: 'Literal', value: slot_template_name } : slot_attribute.get_value(block);
+						return p`[${slot_expression}]: [${slot.block.name}, ${slot.get_context || null}, ${slot.get_changes || null}]`;
 					})}
 				}`,
 				p`$$scope: {
diff --git a/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts b/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts
index a50f74fc04c8..e88582715766 100644
--- a/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts
+++ b/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts
@@ -52,10 +52,7 @@ export default class SlotTemplateWrapper extends Wrapper {
 			if (!seen.has(l.name.name)) lets.push(l);
 		});
 
-		this.parent.set_slot(
-			slot_template_name,
-			get_slot_definition(this.block, scope, lets)
-		);
+		this.parent.set_slot(this.node, get_slot_definition(this.block, scope, lets));
 
 		this.fragment = new FragmentWrapper(
 			renderer,
diff --git a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
index 73d31940e203..445db7d9a852 100644
--- a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
+++ b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
@@ -77,9 +77,9 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 			slot_scopes
 		}));
 
-		slot_scopes.forEach(({ input, output, statements }, name) => {
+		slot_scopes.forEach(({ input, output, statements }, slot_exp) => {
 			slot_fns.push(
-				p`${name}: (${input}) => { ${statements}; return ${output}; }`
+				p`[${slot_exp}]: (${input}) => { ${statements}; return ${output}; }`
 			);
 		});
 	}
diff --git a/src/compiler/compile/render_ssr/handlers/Slot.ts b/src/compiler/compile/render_ssr/handlers/Slot.ts
index 137d9c8e6e40..e92847f177fc 100644
--- a/src/compiler/compile/render_ssr/handlers/Slot.ts
+++ b/src/compiler/compile/render_ssr/handlers/Slot.ts
@@ -9,7 +9,7 @@ export default function(node: Slot, renderer: Renderer, options: RenderOptions &
 	slot_scopes: Map<any, any>;
 }) {
 	const slot_data = get_slot_data(node.values);
-	const slot = node.get_static_attribute_value('slot');
+	const slot = node.values.get('slot')?.get_value(null);
 	const nearest_inline_component = node.find_nearest(/InlineComponent/);
 
 	if (slot && nearest_inline_component) {
diff --git a/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts b/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
index 09f329330157..b09ead78dd74 100644
--- a/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
+++ b/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
@@ -29,7 +29,8 @@ export default function(node: SlotTemplate, renderer: Renderer, options: RenderO
 			throw new Error(`Duplicate slot name "${node.slot_template_name}" in <${parent_inline_component.name}>`);
 		}
 
-		options.slot_scopes.set(node.slot_template_name, {
+		const slot_expression = node.is_static ? { type: 'Literal', value: node.slot_template_name } : node.slot_attribute.get_value(null);
+		options.slot_scopes.set(slot_expression, {
 			input: get_slot_scope(node.lets),
 			output: slot_fragment_content,
 			statements: get_const_tags(node.const_tags)

From 8098b6bc7e06024a747599c04bc0026d6c55b201 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Tue, 25 Apr 2023 15:34:32 -0400
Subject: [PATCH 04/11] Simplify getting value of slot attribute

---
 src/compiler/compile/nodes/SlotTemplate.ts        | 15 +++++++++++++--
 .../render_dom/wrappers/InlineComponent/index.ts  |  4 ++--
 .../compile/render_ssr/handlers/SlotTemplate.ts   |  3 ++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/compiler/compile/nodes/SlotTemplate.ts b/src/compiler/compile/nodes/SlotTemplate.ts
index c9bee04e37af..12bb2194a686 100644
--- a/src/compiler/compile/nodes/SlotTemplate.ts
+++ b/src/compiler/compile/nodes/SlotTemplate.ts
@@ -7,6 +7,7 @@ import { INode } from './interfaces';
 import compiler_errors from '../compiler_errors';
 import get_const_tags from './shared/get_const_tags';
 import ConstTag from './ConstTag';
+import { Attribute as AttributeNode } from '../../interfaces';
 
 export default class SlotTemplate extends Node {
 	type: 'SlotTemplate';
@@ -15,8 +16,8 @@ export default class SlotTemplate extends Node {
 	lets: Let[] = [];
 	const_tags: ConstTag[];
 	slot_attribute: Attribute;
-	slot_template_name: string = 'default';
-	is_static: boolean = true;
+	is_static: boolean;
+	slot_template_name: string;
 
 	constructor(
 		component: Component,
@@ -65,6 +66,16 @@ export default class SlotTemplate extends Node {
 			}
 		});
 
+		if (!this.slot_template_name) {
+			this.slot_template_name = 'default';
+			this.is_static = false;
+			this.slot_attribute = new Attribute(component, this, scope, {
+				type: 'Attribute',
+				name: 'slot',
+				value: [ { type: 'Text', data: 'default' } ]
+			} as AttributeNode);
+		}
+
 		this.scope = scope;
 		([this.const_tags, this.children] = get_const_tags(info.children, component, this, this));
 	}
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index 502690d2c5f2..2621c366411a 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -175,8 +175,8 @@ export default class InlineComponentWrapper extends Wrapper {
 			? [
 				p`$$slots: {
 					${Array.from(this.slots).map(([slot_template, slot]) => {
-						const { is_static, slot_template_name, slot_attribute } = slot_template;
-						const slot_expression = is_static ? { type: 'Literal', value: slot_template_name } : slot_attribute.get_value(block);
+						const { slot_attribute } = slot_template;
+						const slot_expression = slot_attribute.get_value(block);
 						return p`[${slot_expression}]: [${slot.block.name}, ${slot.get_context || null}, ${slot.get_changes || null}]`;
 					})}
 				}`,
diff --git a/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts b/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
index b09ead78dd74..064b3cce2afe 100644
--- a/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
+++ b/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
@@ -4,6 +4,7 @@ import remove_whitespace_children from './utils/remove_whitespace_children';
 import { get_slot_scope } from './shared/get_slot_scope';
 import InlineComponent from '../../nodes/InlineComponent';
 import { get_const_tags } from './shared/get_const_tags';
+import { get_attribute_value } from './shared/get_attribute_value';
 
 export default function(node: SlotTemplate, renderer: Renderer, options: RenderOptions & {
 	slot_scopes: Map<any, any>;
@@ -29,7 +30,7 @@ export default function(node: SlotTemplate, renderer: Renderer, options: RenderO
 			throw new Error(`Duplicate slot name "${node.slot_template_name}" in <${parent_inline_component.name}>`);
 		}
 
-		const slot_expression = node.is_static ? { type: 'Literal', value: node.slot_template_name } : node.slot_attribute.get_value(null);
+		const slot_expression = get_attribute_value(node.slot_attribute);
 		options.slot_scopes.set(slot_expression, {
 			input: get_slot_scope(node.lets),
 			output: slot_fragment_content,

From 3972cecf5e46bf4e6612557e11b11ea795e5b3a6 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Tue, 25 Apr 2023 15:42:28 -0400
Subject: [PATCH 05/11] Add first test for dynamic slots

---
 .../samples/dynamic-slots-dev/Nested.svelte      | 13 +++++++++++++
 .../runtime/samples/dynamic-slots-dev/_config.js |  9 +++++++++
 .../samples/dynamic-slots-dev/main.svelte        | 16 ++++++++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 test/runtime/samples/dynamic-slots-dev/Nested.svelte
 create mode 100644 test/runtime/samples/dynamic-slots-dev/_config.js
 create mode 100644 test/runtime/samples/dynamic-slots-dev/main.svelte

diff --git a/test/runtime/samples/dynamic-slots-dev/Nested.svelte b/test/runtime/samples/dynamic-slots-dev/Nested.svelte
new file mode 100644
index 000000000000..0aed3e2ab27e
--- /dev/null
+++ b/test/runtime/samples/dynamic-slots-dev/Nested.svelte
@@ -0,0 +1,13 @@
+<script>
+  let slot = 'dynamic-slot';
+
+	const f = () => {
+		slot = 'thing';
+	}
+</script>
+
+<div>
+  <slot name={slot} />
+  <slot />
+  <slot name='static' />
+</div>
diff --git a/test/runtime/samples/dynamic-slots-dev/_config.js b/test/runtime/samples/dynamic-slots-dev/_config.js
new file mode 100644
index 000000000000..e391084e5914
--- /dev/null
+++ b/test/runtime/samples/dynamic-slots-dev/_config.js
@@ -0,0 +1,9 @@
+export default {
+  compileOptions: {
+    dev: true
+  },
+
+	html: '<div><p slot="dynamic-slot">Hello</p><p slot="default">Hello</p><p slot="static">Hello</p></div>',
+
+  warnings: ['<Nested> received an unexpected slot "dynamic-slot-again".']
+};
diff --git a/test/runtime/samples/dynamic-slots-dev/main.svelte b/test/runtime/samples/dynamic-slots-dev/main.svelte
new file mode 100644
index 000000000000..65dee9e1366a
--- /dev/null
+++ b/test/runtime/samples/dynamic-slots-dev/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Nested from './Nested.svelte';
+
+  let slot = 'dynamic-slot';
+
+  function y() {
+    slot = 'another-slot';
+  }
+</script>
+
+<Nested>
+	<p slot={slot}>Hello</p>
+	<p slot='default'>Hello</p>
+	<p slot='static'>Hello</p>
+  <p slot={`${slot}-again`}>Hello</p>
+</Nested>

From d2105a3de99eea97b441f72e2c4a700b39f004f5 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Tue, 25 Apr 2023 15:45:47 -0400
Subject: [PATCH 06/11] Fix issue where name is undefined for some reason

---
 .../compile/render_ssr/handlers/shared/get_attribute_value.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts b/src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts
index 1d365da673ad..18a4976d0512 100644
--- a/src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts
+++ b/src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts
@@ -23,7 +23,7 @@ export function get_attribute_value(attribute: Attribute): ESTreeExpression {
 	 * For value attribute of textarea, it will render as child node of `<textarea>` element.
 	 * Therefore, we need to escape as content (not attribute).
 	 */
-	const is_textarea_value = attribute.parent.name.toLowerCase() === 'textarea' && attribute.name.toLowerCase() === 'value';
+	const is_textarea_value = attribute.parent.name?.toLowerCase() === 'textarea' && attribute.name?.toLowerCase() === 'value';
 
 	return attribute.chunks
 		.map((chunk) => {

From 587c16866461b075a7fc14a291fb4e7f1405ef5f Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Tue, 25 Apr 2023 15:46:29 -0400
Subject: [PATCH 07/11] Allow dynamic slots in validate_slot array

---
 src/compiler/compile/render_dom/index.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 58b7a8317b29..d13d410db0a2 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -13,6 +13,7 @@ import { flatten } from '../../utils/flatten';
 import check_enable_sourcemap from '../utils/check_enable_sourcemap';
 import { push_array } from '../../utils/push_array';
 import { regex_backslashes } from '../../utils/patterns';
+import { get_attribute_value } from '../render_ssr/handlers/shared/get_attribute_value';
 
 export default function dom(
 	component: Component,
@@ -459,6 +460,11 @@ export default function dom(
 			}) as Expression)
 		};
 
+    const slot_list = {
+      type: 'ArrayExpression',
+      elements: [...component.slots.values()].map(slot => get_attribute_value(slot.name_attribute))
+    };
+
 		body.push(b`
 			function ${definition}(${args}) {
 				${injected.map(name => b`let ${name};`)}
@@ -472,11 +478,11 @@ export default function dom(
 				${resubscribable_reactive_store_unsubscribers}
 
 				${component.slots.size || component.compile_options.dev || uses_slots ? b`let { $$slots: #slots = {}, $$scope } = $$props;` : null}
-				${component.compile_options.dev && b`@validate_slots('${component.tag}', #slots, [${[...component.slots.keys()].map(key => `'${key}'`).join(',')}]);`}
 				${compute_slots}
 
 				${instance_javascript}
 
+				${component.compile_options.dev && b`@validate_slots('${component.tag}', #slots, ${slot_list});`}
 				${missing_props_check}
 				${unknown_props_check}
 

From 27a4e2f5e841f03d0389c56cd14187629f7956bc Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Tue, 25 Apr 2023 16:05:52 -0400
Subject: [PATCH 08/11] Remove errors

---
 src/compiler/compile/compiler_errors.ts              |  4 ----
 .../component-slot-dynamic-attribute/errors.json     | 12 ------------
 .../component-slot-dynamic-attribute/input.svelte    |  7 -------
 .../samples/component-slot-dynamic/errors.json       | 12 ------------
 .../samples/component-slot-dynamic/input.svelte      |  1 -
 5 files changed, 36 deletions(-)
 delete mode 100644 test/validator/samples/component-slot-dynamic-attribute/errors.json
 delete mode 100644 test/validator/samples/component-slot-dynamic-attribute/input.svelte
 delete mode 100644 test/validator/samples/component-slot-dynamic/errors.json
 delete mode 100644 test/validator/samples/component-slot-dynamic/input.svelte

diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index da0ad0defea8..02736a7a0778 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/src/compiler/compile/compiler_errors.ts
@@ -96,10 +96,6 @@ export default {
 		code: 'illegal-attribute',
 		message: `'${name}' is not a valid attribute name`
 	}),
-	invalid_slot_attribute: {
-		code: 'invalid-slot-attribute',
-		message: 'slot attribute cannot have a dynamic value'
-	},
 	duplicate_slot_attribute: (name: string) => ({
 		code: 'duplicate-slot-attribute',
 		message: `Duplicate '${name}' slot`
diff --git a/test/validator/samples/component-slot-dynamic-attribute/errors.json b/test/validator/samples/component-slot-dynamic-attribute/errors.json
deleted file mode 100644
index e99ab7bd5042..000000000000
--- a/test/validator/samples/component-slot-dynamic-attribute/errors.json
+++ /dev/null
@@ -1,12 +0,0 @@
-[{
-	"code": "invalid-slot-attribute",
-	"message": "slot attribute cannot have a dynamic value",
-	"start": {
-		"line": 6,
-		"column": 9
-	},
-	"end": {
-		"line": 6,
-		"column": 19
-	}
-}]
diff --git a/test/validator/samples/component-slot-dynamic-attribute/input.svelte b/test/validator/samples/component-slot-dynamic-attribute/input.svelte
deleted file mode 100644
index 1eb8b4f1f0cb..000000000000
--- a/test/validator/samples/component-slot-dynamic-attribute/input.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	import Nested from './Nested.svelte';
-</script>
-
-<Nested>
-	<button slot={foo}>click me</button>
-</Nested>
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-dynamic/errors.json b/test/validator/samples/component-slot-dynamic/errors.json
deleted file mode 100644
index a449d253ef74..000000000000
--- a/test/validator/samples/component-slot-dynamic/errors.json
+++ /dev/null
@@ -1,12 +0,0 @@
-[{
-	"code": "dynamic-slot-name",
-	"message": "<slot> name cannot be dynamic",
-	"start": {
-		"line": 1,
-		"column": 6
-	},
-	"end": {
-		"line": 1,
-		"column": 18
-	}
-}]
diff --git a/test/validator/samples/component-slot-dynamic/input.svelte b/test/validator/samples/component-slot-dynamic/input.svelte
deleted file mode 100644
index 74348a49db73..000000000000
--- a/test/validator/samples/component-slot-dynamic/input.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<slot name='{foo}'></slot>
\ No newline at end of file

From 72c7f7a2c90147b90762865c6750f887e3defa15 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Tue, 25 Apr 2023 16:46:33 -0400
Subject: [PATCH 09/11] Typo fixes

---
 src/compiler/compile/nodes/SlotTemplate.ts                  | 2 +-
 .../compile/render_dom/wrappers/InlineComponent/index.ts    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/compiler/compile/nodes/SlotTemplate.ts b/src/compiler/compile/nodes/SlotTemplate.ts
index 12bb2194a686..728da058e46b 100644
--- a/src/compiler/compile/nodes/SlotTemplate.ts
+++ b/src/compiler/compile/nodes/SlotTemplate.ts
@@ -68,7 +68,7 @@ export default class SlotTemplate extends Node {
 
 		if (!this.slot_template_name) {
 			this.slot_template_name = 'default';
-			this.is_static = false;
+			this.is_static = true;
 			this.slot_attribute = new Attribute(component, this, scope, {
 				type: 'Attribute',
 				name: 'slot',
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index 2621c366411a..369b28880cfd 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -30,7 +30,7 @@ const regex_invalid_variable_identifier_characters = /[^a-zA-Z_$]/g;
 export default class InlineComponentWrapper extends Wrapper {
 	var: Identifier;
 	slots: Map<SlotTemplate, SlotDefinition> = new Map();
-	staic_slot_names: Set<string> = new Set();
+	static_slot_names: Set<string> = new Set();
 	node: InlineComponent;
 	fragment: FragmentWrapper;
 	children: Array<Wrapper | FragmentWrapper> = [];
@@ -99,13 +99,13 @@ export default class InlineComponentWrapper extends Wrapper {
 	set_slot(slot: SlotTemplate, slot_definition: SlotDefinition) {
 		if (slot.is_static) {
 			const name = slot.slot_template_name;
-			if (this.staic_slot_names.has(name)) {
+			if (this.static_slot_names.has(name)) {
 				if (name === 'default') {
 					throw new Error('Found elements without slot attribute when using slot="default"');
 				}
 				throw new Error(`Duplicate slot name "${name}" in <${this.node.name}>`);
 			} else {
-				this.staic_slot_names.add(name);
+				this.static_slot_names.add(name);
 			}
 		}
 

From 0a37190ffe73b7df9fa656db9263af20a3c46532 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Tue, 25 Apr 2023 16:46:49 -0400
Subject: [PATCH 10/11] Update validate slot position js tests

---
 test/js/samples/capture-inject-state/expected.js              | 4 ++--
 test/js/samples/debug-empty/expected.js                       | 2 +-
 test/js/samples/debug-foo-bar-baz-things/expected.js          | 2 +-
 test/js/samples/debug-foo/expected.js                         | 2 +-
 test/js/samples/debug-hoisted/expected.js                     | 2 +-
 test/js/samples/dev-warning-missing-data-computed/expected.js | 2 +-
 test/js/samples/loop-protect/expected.js                      | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/test/js/samples/capture-inject-state/expected.js b/test/js/samples/capture-inject-state/expected.js
index 41f9b966b02b..d3e81b5f125a 100644
--- a/test/js/samples/capture-inject-state/expected.js
+++ b/test/js/samples/capture-inject-state/expected.js
@@ -106,13 +106,13 @@ function instance($$self, $$props, $$invalidate) {
 
 	$$self.$$.on_destroy.push(() => $$unsubscribe_prop());
 	let { $$slots: slots = {}, $$scope } = $$props;
-	validate_slots('Component', slots, []);
 	let { prop } = $$props;
 	validate_store(prop, 'prop');
 	$$subscribe_prop();
 	let { alias: realName } = $$props;
 	let local;
 	let shadowedByModule;
+	validate_slots('Component', slots, []);
 
 	$$self.$$.on_mount.push(function () {
 		if (prop === undefined && !('prop' in $$props || $$self.$$.bound[$$self.$$.props['prop']])) {
@@ -197,4 +197,4 @@ class Component extends SvelteComponentDev {
 }
 
 export default Component;
-export { moduleLiveBinding, moduleConstantProps };
+export { moduleLiveBinding, moduleConstantProps };
\ No newline at end of file
diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js
index ee304591cbf1..90de3953c32f 100644
--- a/test/js/samples/debug-empty/expected.js
+++ b/test/js/samples/debug-empty/expected.js
@@ -70,8 +70,8 @@ function create_fragment(ctx) {
 
 function instance($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
-	validate_slots('Component', slots, []);
 	let { name } = $$props;
+	validate_slots('Component', slots, []);
 
 	$$self.$$.on_mount.push(function () {
 		if (name === undefined && !('name' in $$props || $$self.$$.bound[$$self.$$.props['name']])) {
diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js
index 0b0a41abe234..1b8a3231947b 100644
--- a/test/js/samples/debug-foo-bar-baz-things/expected.js
+++ b/test/js/samples/debug-foo-bar-baz-things/expected.js
@@ -173,11 +173,11 @@ function create_fragment(ctx) {
 
 function instance($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
-	validate_slots('Component', slots, []);
 	let { things } = $$props;
 	let { foo } = $$props;
 	let { bar } = $$props;
 	let { baz } = $$props;
+	validate_slots('Component', slots, []);
 
 	$$self.$$.on_mount.push(function () {
 		if (things === undefined && !('things' in $$props || $$self.$$.bound[$$self.$$.props['things']])) {
diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js
index 637a229a979c..e9bc5b4a1442 100644
--- a/test/js/samples/debug-foo/expected.js
+++ b/test/js/samples/debug-foo/expected.js
@@ -167,9 +167,9 @@ function create_fragment(ctx) {
 
 function instance($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
-	validate_slots('Component', slots, []);
 	let { things } = $$props;
 	let { foo } = $$props;
+	validate_slots('Component', slots, []);
 
 	$$self.$$.on_mount.push(function () {
 		if (things === undefined && !('things' in $$props || $$self.$$.bound[$$self.$$.props['things']])) {
diff --git a/test/js/samples/debug-hoisted/expected.js b/test/js/samples/debug-hoisted/expected.js
index 9fc4f7cf4f4c..8245e6420ae0 100644
--- a/test/js/samples/debug-hoisted/expected.js
+++ b/test/js/samples/debug-hoisted/expected.js
@@ -50,9 +50,9 @@ function create_fragment(ctx) {
 
 function instance($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
-	validate_slots('Component', slots, []);
 	let obj = { x: 5 };
 	let kobzol = 5;
+	validate_slots('Component', slots, []);
 	const writable_props = [];
 
 	Object.keys($$props).forEach(key => {
diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js
index a94cf7b5f29e..6d47b9bb9c89 100644
--- a/test/js/samples/dev-warning-missing-data-computed/expected.js
+++ b/test/js/samples/dev-warning-missing-data-computed/expected.js
@@ -66,9 +66,9 @@ function create_fragment(ctx) {
 
 function instance($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
-	validate_slots('Component', slots, []);
 	let { foo } = $$props;
 	let bar;
+	validate_slots('Component', slots, []);
 
 	$$self.$$.on_mount.push(function () {
 		if (foo === undefined && !('foo' in $$props || $$self.$$.bound[$$self.$$.props['foo']])) {
diff --git a/test/js/samples/loop-protect/expected.js b/test/js/samples/loop-protect/expected.js
index 04033d0d9598..98b8133a9eaa 100644
--- a/test/js/samples/loop-protect/expected.js
+++ b/test/js/samples/loop-protect/expected.js
@@ -68,7 +68,6 @@ function foo() {
 
 function instance($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
-	validate_slots('Component', slots, []);
 	let node;
 
 	{
@@ -107,6 +106,7 @@ function instance($$self, $$props, $$invalidate) {
 		} while (true);
 	}
 
+	validate_slots('Component', slots, []);
 	const writable_props = [];
 
 	Object.keys($$props).forEach(key => {

From 728b13d834776cd00dd311d52bb7e996fdc49d24 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Sun, 30 Apr 2023 20:47:38 -0400
Subject: [PATCH 11/11] More tests

---
 test/runtime/samples/$$slot-dynamic/A.svelte  | 27 ++++++++++
 .../runtime/samples/$$slot-dynamic/_config.js | 15 ++++++
 .../samples/$$slot-dynamic/main.svelte        | 16 ++++++
 .../Foo.svelte                                |  8 +++
 .../_config.js                                | 53 +++++++++++++++++++
 .../main.svelte                               | 27 ++++++++++
 .../Component.svelte                          |  1 +
 .../_config.js                                | 15 ++++++
 .../main.svelte                               | 16 ++++++
 .../Component.svelte                          |  6 +++
 .../Forward.svelte                            | 10 ++++
 .../component-slot-dynamic-slot/_config.js    |  3 ++
 .../component-slot-dynamic-slot/main.svelte   | 12 +++++
 .../Inner.svelte                              |  1 +
 .../Outer.svelte                              |  5 ++
 .../_config.js                                | 25 +++++++++
 .../main.svelte                               | 11 ++++
 .../Nested.svelte                             |  9 ++++
 .../componet-dynamic-slot-fallback/_config.js | 12 +++++
 .../main.svelte                               |  7 +++
 .../dynamic-component-dynamic-slot/Bar.svelte |  3 ++
 .../dynamic-component-dynamic-slot/Baz.svelte |  1 +
 .../dynamic-component-dynamic-slot/Foo.svelte |  3 ++
 .../dynamic-component-dynamic-slot/_config.js | 35 ++++++++++++
 .../main.svelte                               | 35 ++++++++++++
 25 files changed, 356 insertions(+)
 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/await-then-catch-in-dynamic-slot/Foo.svelte
 create mode 100644 test/runtime/samples/await-then-catch-in-dynamic-slot/_config.js
 create mode 100644 test/runtime/samples/await-then-catch-in-dynamic-slot/main.svelte
 create mode 100644 test/runtime/samples/component-dynamic-slot-attribute-order/Component.svelte
 create mode 100644 test/runtime/samples/component-dynamic-slot-attribute-order/_config.js
 create mode 100644 test/runtime/samples/component-dynamic-slot-attribute-order/main.svelte
 create mode 100644 test/runtime/samples/component-slot-dynamic-slot/Component.svelte
 create mode 100644 test/runtime/samples/component-slot-dynamic-slot/Forward.svelte
 create mode 100644 test/runtime/samples/component-slot-dynamic-slot/_config.js
 create mode 100644 test/runtime/samples/component-slot-dynamic-slot/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-dynamic-slot/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-dynamic-slot/Outer.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-dynamic-slot/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-in-dynamic-slot/main.svelte
 create mode 100644 test/runtime/samples/componet-dynamic-slot-fallback/Nested.svelte
 create mode 100644 test/runtime/samples/componet-dynamic-slot-fallback/_config.js
 create mode 100644 test/runtime/samples/componet-dynamic-slot-fallback/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-dynamic-slot/Bar.svelte
 create mode 100644 test/runtime/samples/dynamic-component-dynamic-slot/Baz.svelte
 create mode 100644 test/runtime/samples/dynamic-component-dynamic-slot/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-component-dynamic-slot/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-dynamic-slot/main.svelte

diff --git a/test/runtime/samples/$$slot-dynamic/A.svelte b/test/runtime/samples/$$slot-dynamic/A.svelte
new file mode 100644
index 000000000000..6228fd9c1192
--- /dev/null
+++ b/test/runtime/samples/$$slot-dynamic/A.svelte
@@ -0,0 +1,27 @@
+<script>
+	function toString(data) {
+		const result = {};
+		const sortedKeys = Object.keys(data).sort();
+		sortedKeys.forEach(key => result[key] = data[key]);
+		return JSON.stringify(result);
+	}
+
+  const slot_1 = 'a'.repeat(5);
+  const slot_2 = 'ab'.repeat(2);
+</script>
+
+$$slots: {toString($$slots)}
+
+{#if $$slots[slot_1]}
+  <slot name={slot_1}></slot>
+{:else}
+  Slot aaaaa is not available
+{/if}
+
+{#if $$slots[slot_2]}
+	<div>
+		<slot name={slot_2}></slot>
+	</div>
+{:else}
+	Slot abab is not available
+{/if}
diff --git a/test/runtime/samples/$$slot-dynamic/_config.js b/test/runtime/samples/$$slot-dynamic/_config.js
new file mode 100644
index 000000000000..0473e45f03f0
--- /dev/null
+++ b/test/runtime/samples/$$slot-dynamic/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		$$slots: {"aaaaa":true}
+		<span slot="aaaaa">hello aaaaa</span>
+		Slot abab is not available
+
+		$$slots: {"abab":true}
+		Slot aaaaa is not available
+
+		<div><span slot="abab">hello abab</span></div>
+		$$slots: {"aaaaa":true,"abab":true}
+		<span slot="aaaaa">hello aaaaa</span>
+		<div><span slot="abab">hello abab</span></div>
+	`
+};
diff --git a/test/runtime/samples/$$slot-dynamic/main.svelte b/test/runtime/samples/$$slot-dynamic/main.svelte
new file mode 100644
index 000000000000..6b861e9fab1e
--- /dev/null
+++ b/test/runtime/samples/$$slot-dynamic/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import A from "./A.svelte";
+</script>
+
+<A>
+  <span slot="aaaaa">hello aaaaa</span>
+</A>
+
+<A>
+  <span slot="abab">hello abab</span>
+</A>
+
+<A>
+  <span slot="aaaaa">hello aaaaa</span>
+  <span slot="abab">hello abab</span>
+</A>
diff --git a/test/runtime/samples/await-then-catch-in-dynamic-slot/Foo.svelte b/test/runtime/samples/await-then-catch-in-dynamic-slot/Foo.svelte
new file mode 100644
index 000000000000..ab283a701580
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-in-dynamic-slot/Foo.svelte
@@ -0,0 +1,8 @@
+<script>
+  const states = ["pending", "then", "catch"];
+</script>
+{#each states as state} 
+  {#if $$slots[state]}
+    <slot name={state}></slot>
+  {/if}
+{/each}
diff --git a/test/runtime/samples/await-then-catch-in-dynamic-slot/_config.js b/test/runtime/samples/await-then-catch-in-dynamic-slot/_config.js
new file mode 100644
index 000000000000..77941f91be73
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-in-dynamic-slot/_config.js
@@ -0,0 +1,53 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		<p slot="pending">loading pending...</p>
+    <p>loading then...</p>
+    <p>loading catch...</p>
+	`,
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+          <p slot="pending">loading pending...</p>
+					<p>the value is 42</p>
+				`);
+
+				let reject;
+
+				thePromise = new Promise((f, r) => {
+					reject = r;
+				});
+
+				component.thePromise = thePromise;
+
+				assert.htmlEqual(target.innerHTML, `
+      		<p slot="pending">loading pending...</p>
+          <p>loading then...</p>
+          <p>loading catch...</p>
+	      `);
+
+				reject(new Error('something broke'));
+
+				return thePromise.catch(() => {});
+			})
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+      		<p slot="pending">loading pending...</p>
+					<p>oh no! something broke</p>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-then-catch-in-dynamic-slot/main.svelte b/test/runtime/samples/await-then-catch-in-dynamic-slot/main.svelte
new file mode 100644
index 000000000000..938f239b6ba5
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-in-dynamic-slot/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let thePromise;
+  const pending = 'pending';
+  const then = 'then';
+  const the_catch = 'catch';
+</script>
+
+<Foo>
+  <p slot={pending}>loading pending...</p>
+  <svelte:fragment slot={then}>
+	  {#await thePromise}
+	  	<p>loading then...</p>
+	  {:then theValue}
+	  	<p>the value is {theValue}</p>
+	  {/await}
+  </svelte:fragment>
+  <svelte:fragment slot={the_catch}>
+	  {#await thePromise}
+	  	<p>loading catch...</p>
+	  {:catch theError}
+	  	<p>oh no! {theError.message}</p>
+	  {/await}
+  </svelte:fragment>
+
+</Foo>
diff --git a/test/runtime/samples/component-dynamic-slot-attribute-order/Component.svelte b/test/runtime/samples/component-dynamic-slot-attribute-order/Component.svelte
new file mode 100644
index 000000000000..0f481a4042e1
--- /dev/null
+++ b/test/runtime/samples/component-dynamic-slot-attribute-order/Component.svelte
@@ -0,0 +1 @@
+<slot name={String(undefined)} />
diff --git a/test/runtime/samples/component-dynamic-slot-attribute-order/_config.js b/test/runtime/samples/component-dynamic-slot-attribute-order/_config.js
new file mode 100644
index 000000000000..3eae9fc2df2e
--- /dev/null
+++ b/test/runtime/samples/component-dynamic-slot-attribute-order/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<button>Disable</button>
+		<button slot="undefined">Button</button>
+		<button slot="undefined">Button</button>
+	`,
+	async test({ assert, target, window }) {
+		const [btn, btn1, btn2] = target.querySelectorAll('button');
+
+		await btn.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.equal(btn1.disabled, true);
+		assert.equal(btn2.disabled, true);
+	}
+};
diff --git a/test/runtime/samples/component-dynamic-slot-attribute-order/main.svelte b/test/runtime/samples/component-dynamic-slot-attribute-order/main.svelte
new file mode 100644
index 000000000000..c5857252e40e
--- /dev/null
+++ b/test/runtime/samples/component-dynamic-slot-attribute-order/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Component from './Component.svelte';
+
+	let disabled = false;
+  const undef = String(undefined);
+</script>
+
+<button on:click={() => disabled = !disabled}>Disable</button>
+
+<Component>
+	<button slot={undef} disabled={disabled}>Button</button>
+</Component>
+
+<Component>
+	<button disabled={disabled} slot={undef}>Button</button>
+</Component>
diff --git a/test/runtime/samples/component-slot-dynamic-slot/Component.svelte b/test/runtime/samples/component-slot-dynamic-slot/Component.svelte
new file mode 100644
index 000000000000..1ff1291a212d
--- /dev/null
+++ b/test/runtime/samples/component-slot-dynamic-slot/Component.svelte
@@ -0,0 +1,6 @@
+<script>
+  export let slot_name;
+</script>
+<div>
+	<slot name={slot_name} />
+</div>
diff --git a/test/runtime/samples/component-slot-dynamic-slot/Forward.svelte b/test/runtime/samples/component-slot-dynamic-slot/Forward.svelte
new file mode 100644
index 000000000000..2a8c083636ce
--- /dev/null
+++ b/test/runtime/samples/component-slot-dynamic-slot/Forward.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Component from './Component.svelte';
+  export let prop;
+  
+  const slot_name = 'test';
+</script>
+
+<Component {slot_name}>
+	<slot name={`${prop}-${prop}`} slot={slot_name} />
+</Component>
diff --git a/test/runtime/samples/component-slot-dynamic-slot/_config.js b/test/runtime/samples/component-slot-dynamic-slot/_config.js
new file mode 100644
index 000000000000..29d7d0cfd52b
--- /dev/null
+++ b/test/runtime/samples/component-slot-dynamic-slot/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div><span slot="prop-prop">lol</span></div>'
+};
diff --git a/test/runtime/samples/component-slot-dynamic-slot/main.svelte b/test/runtime/samples/component-slot-dynamic-slot/main.svelte
new file mode 100644
index 000000000000..56730da7e643
--- /dev/null
+++ b/test/runtime/samples/component-slot-dynamic-slot/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Forward from './Forward.svelte';
+
+  const name = 'prop';
+  const slot = `${name}-${name}`;
+</script>
+
+<Forward prop={name} >
+	<span {slot}>
+		lol
+	</span>
+</Forward>
diff --git a/test/runtime/samples/component-slot-let-in-dynamic-slot/Inner.svelte b/test/runtime/samples/component-slot-let-in-dynamic-slot/Inner.svelte
new file mode 100644
index 000000000000..d0ea817d547f
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-dynamic-slot/Inner.svelte
@@ -0,0 +1 @@
+<slot/>
diff --git a/test/runtime/samples/component-slot-let-in-dynamic-slot/Outer.svelte b/test/runtime/samples/component-slot-let-in-dynamic-slot/Outer.svelte
new file mode 100644
index 000000000000..56d6eaf345a6
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-dynamic-slot/Outer.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let prop
+</script>
+
+<slot name={prop} value={prop} />
diff --git a/test/runtime/samples/component-slot-let-in-dynamic-slot/_config.js b/test/runtime/samples/component-slot-let-in-dynamic-slot/_config.js
new file mode 100644
index 000000000000..96c43497dbde
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-dynamic-slot/_config.js
@@ -0,0 +1,25 @@
+let logs;
+function log(value) {
+	logs.push(value);
+}
+
+export default {
+	props: {
+		prop: 'a',
+		log
+	},
+	html: '<button></button>',
+	before_test() {
+		logs = [];
+	},
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.deepEqual(logs, ['a']);
+
+		component.prop = 'b';
+		await button.dispatchEvent(new window.MouseEvent('click'));
+		assert.deepEqual(logs, ['a', 'b']);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-in-dynamic-slot/main.svelte b/test/runtime/samples/component-slot-let-in-dynamic-slot/main.svelte
new file mode 100644
index 000000000000..96a4f8ad4d60
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-dynamic-slot/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Outer from './Outer.svelte'
+	import Inner from './Inner.svelte'
+
+	export let prop
+	export let log;
+</script>
+
+<Outer {prop} let:value>
+	<Inner slot={prop}><button on:click={() => { log(value); }} /></Inner>
+</Outer>
diff --git a/test/runtime/samples/componet-dynamic-slot-fallback/Nested.svelte b/test/runtime/samples/componet-dynamic-slot-fallback/Nested.svelte
new file mode 100644
index 000000000000..1a0f50cc131e
--- /dev/null
+++ b/test/runtime/samples/componet-dynamic-slot-fallback/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+  const slot_names = ['foo', 'bar', 'baz', 'spam', 'eggs'];
+</script>
+<div>
+	<slot><p class='default'>default fallback content</p></slot>
+  {#each slot_names as slot}
+	  <slot name={slot}><p class='default'>{slot} fallback content</p></slot>
+  {/each}
+</div>
diff --git a/test/runtime/samples/componet-dynamic-slot-fallback/_config.js b/test/runtime/samples/componet-dynamic-slot-fallback/_config.js
new file mode 100644
index 000000000000..c601c2fc0450
--- /dev/null
+++ b/test/runtime/samples/componet-dynamic-slot-fallback/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div>
+			<p class='default'>default fallback content</p>
+			<p class='default'>foo fallback content</p>
+			<p class='default'>bar fallback content</p>
+			<p slot='baz'>not fallback</p>
+			<p class='default'>spam fallback content</p>
+			<p class='default'>eggs fallback content</p>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/componet-dynamic-slot-fallback/main.svelte b/test/runtime/samples/componet-dynamic-slot-fallback/main.svelte
new file mode 100644
index 000000000000..64636129bc45
--- /dev/null
+++ b/test/runtime/samples/componet-dynamic-slot-fallback/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<p slot='baz'>not fallback</p>
+</Nested>
diff --git a/test/runtime/samples/dynamic-component-dynamic-slot/Bar.svelte b/test/runtime/samples/dynamic-component-dynamic-slot/Bar.svelte
new file mode 100644
index 000000000000..68ed89be8a91
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-dynamic-slot/Bar.svelte
@@ -0,0 +1,3 @@
+<h1>Bar</h1>
+<slot></slot>
+<slot name='bar'></slot>
diff --git a/test/runtime/samples/dynamic-component-dynamic-slot/Baz.svelte b/test/runtime/samples/dynamic-component-dynamic-slot/Baz.svelte
new file mode 100644
index 000000000000..9c7f92262c33
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-dynamic-slot/Baz.svelte
@@ -0,0 +1 @@
+<div>baz</div>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-dynamic-slot/Foo.svelte b/test/runtime/samples/dynamic-component-dynamic-slot/Foo.svelte
new file mode 100644
index 000000000000..30745bca030c
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-dynamic-slot/Foo.svelte
@@ -0,0 +1,3 @@
+<h1>Foo</h1>
+<slot name='foo'></slot>
+<slot></slot>
diff --git a/test/runtime/samples/dynamic-component-dynamic-slot/_config.js b/test/runtime/samples/dynamic-component-dynamic-slot/_config.js
new file mode 100644
index 000000000000..ae3dea5b4cd9
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-dynamic-slot/_config.js
@@ -0,0 +1,35 @@
+export default {
+	props: {
+		x: true
+	},
+
+	html: `
+		<h1>Foo</h1>
+		<div slot='foo'>what goes up must come down</div>
+		<p>element</p>
+		you're it
+		<p>neither foo nor bar</p>
+		text
+		<span>a</span>
+		<span>b</span>
+		<span>c</span>
+		<div>baz</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<h1>Bar</h1>
+			<p>element</p>
+			you're it
+			<p>neither foo nor bar</p>
+			text
+			<span>a</span>
+			<span>b</span>
+			<span>c</span>
+			<div>baz</div>
+			<div slot='bar'>what goes up must come down</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-dynamic-slot/main.svelte b/test/runtime/samples/dynamic-component-dynamic-slot/main.svelte
new file mode 100644
index 000000000000..bb0978e389e6
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-dynamic-slot/main.svelte
@@ -0,0 +1,35 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+	import Baz from './Baz.svelte';
+
+	export let x;
+	export let tag = 'you\'re it';
+	export let foo;
+	export let bar;
+	export let things = ['a', 'b', 'c'];
+</script>
+
+<svelte:component this="{ x ? Foo : Bar }" x='{x}'>
+	<p>element</p>
+
+	{tag}
+
+	{#if foo}
+		<p>foo</p>
+	{:else if bar}
+		<p>bar</p>
+	{:else}
+		<p>neither foo nor bar</p>
+	{/if}
+
+	text
+
+	{#each things as thing}
+		<span>{thing}</span>
+	{/each}
+
+	<Baz/>
+
+	<div slot={x ? 'foo' : 'bar'}>what goes up must come down</div>
+</svelte:component>