From 2d06e7208fbfe2a9ae7e092841f781969d59d2e8 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <lhtan93@gmail.com>
Date: Sat, 25 Jul 2020 00:35:01 +0800
Subject: [PATCH] slot as a sugar syntax

---
 .../compile/nodes/DefaultSlotTemplate.ts      | 28 +++++++++
 src/compiler/compile/nodes/Element.ts         |  3 +-
 src/compiler/compile/nodes/InlineComponent.ts | 59 ++++++++++++++++---
 src/compiler/compile/nodes/interfaces.ts      |  2 +
 .../render_dom/wrappers/Element/index.ts      |  1 -
 .../wrappers/InlineComponent/index.ts         | 50 ++--------------
 .../compile/render_ssr/handlers/Element.ts    | 30 +---------
 .../render_ssr/handlers/InlineComponent.ts    | 27 ++-------
 .../render_ssr/handlers/SlotTemplate.ts       | 31 ++++++++--
 test/runtime/index.js                         |  8 +--
 .../Hello.svelte                              |  5 ++
 .../Nested.svelte                             |  1 +
 .../_config.js                                |  7 +++
 .../main.svelte                               | 10 ++++
 .../Hello.svelte                              |  1 +
 .../Nested.svelte                             |  1 +
 .../World.svelte                              |  1 +
 .../_config.js                                |  6 ++
 .../main.svelte                               | 13 ++++
 .../component-slot-component-named/Bar.svelte |  1 +
 .../component-slot-component-named/Foo.svelte |  1 +
 .../Nested.svelte                             |  5 ++
 .../component-slot-component-named/_config.js |  9 +++
 .../main.svelte                               | 12 ++++
 .../component-svelte-slot-nested/Child.svelte | 15 +++++
 .../Nested.svelte                             |  1 +
 .../component-svelte-slot-nested/_config.js   |  6 ++
 .../component-svelte-slot-nested/main.svelte  | 12 ++++
 test/validator/samples/prop-slot/errors.json  | 15 -----
 test/validator/samples/prop-slot/input.svelte |  5 --
 .../svelte-slot-placement-2/errors.json       |  2 +-
 .../samples/svelte-slot-placement/errors.json |  2 +-
 32 files changed, 232 insertions(+), 138 deletions(-)
 create mode 100644 src/compiler/compile/nodes/DefaultSlotTemplate.ts
 create mode 100644 test/runtime/samples/component-slot-component-named-b/Hello.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-b/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-b/_config.js
 create mode 100644 test/runtime/samples/component-slot-component-named-b/main.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-c/Hello.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-c/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-c/World.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-c/_config.js
 create mode 100644 test/runtime/samples/component-slot-component-named-c/main.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named/Bar.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named/Foo.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named/_config.js
 create mode 100644 test/runtime/samples/component-slot-component-named/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-nested/Child.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-nested/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-nested/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-nested/main.svelte
 delete mode 100644 test/validator/samples/prop-slot/errors.json
 delete mode 100644 test/validator/samples/prop-slot/input.svelte

diff --git a/src/compiler/compile/nodes/DefaultSlotTemplate.ts b/src/compiler/compile/nodes/DefaultSlotTemplate.ts
new file mode 100644
index 000000000000..9686ad6223d4
--- /dev/null
+++ b/src/compiler/compile/nodes/DefaultSlotTemplate.ts
@@ -0,0 +1,28 @@
+import Component from "../Component";
+import TemplateScope from "./shared/TemplateScope";
+import Node from "./shared/Node";
+import Let from "./Let";
+import { INode } from "./interfaces";
+
+export default class DefaultSlotTemplate extends Node {
+	type: "SlotTemplate";
+	scope: TemplateScope;
+	children: INode[];
+	lets: Let[] = [];
+	slot_template_name = "default";
+
+	constructor(
+		component: Component,
+		parent: INode,
+		scope: TemplateScope,
+		info: any,
+		lets: Let[],
+		children: INode[],
+	) {
+		super(component, parent, scope, info);
+		this.type = 'SlotTemplate';
+		this.children = children;
+		this.scope = scope;
+		this.lets = lets;
+	}
+}
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index d5ecbe44dadc..8acd969a709b 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -409,7 +409,7 @@ export default class Element extends Node {
 					component.slot_outlets.add(name);
 				}
 
-				if (!(parent.type === 'InlineComponent' || within_custom_element(parent))) {
+				if (!(parent.type === 'SlotTemplate' || within_custom_element(parent))) {
 					component.error(attribute, {
 						code: `invalid-slotted-content`,
 						message: `Element with a slot='...' attribute must be a child of a component or a descendant of a custom element`,
@@ -809,7 +809,6 @@ export default class Element extends Node {
 	}
 
 	get slot_template_name() {
-		// attribute.get_static_value
 		return this.attributes.find(attribute => attribute.name === 'slot').get_static_value() as string;
 	}
 }
diff --git a/src/compiler/compile/nodes/InlineComponent.ts b/src/compiler/compile/nodes/InlineComponent.ts
index 0bd1c9a6a712..a3e16af45e9e 100644
--- a/src/compiler/compile/nodes/InlineComponent.ts
+++ b/src/compiler/compile/nodes/InlineComponent.ts
@@ -45,12 +45,6 @@ export default class InlineComponent extends Node {
 					});
 
 				case 'Attribute':
-					if (node.name === 'slot') {
-						component.error(node, {
-							code: `invalid-prop`,
-							message: `'slot' is reserved for future use in named slots`
-						});
-					}
 					// fallthrough
 				case 'Spread':
 					this.attributes.push(new Attribute(component, this, scope, node));
@@ -111,6 +105,57 @@ export default class InlineComponent extends Node {
 			});
 		});
 
-		this.children = map_children(component, this, this.scope, info.children);
+		const children = [];
+		for (let i=info.children.length - 1; i >= 0; i--) {
+			const child = info.children[i];
+			if (child.type === 'SlotTemplate') {
+				children.push(child);
+				info.children.splice(i, 1);
+			} else if ((child.type === 'Element' || child.type === 'InlineComponent') && child.attributes.find(attribute => attribute.name === 'slot')) {
+				const slot_template = {
+					start: child.start,
+					end: child.end,
+					type: 'SlotTemplate',
+					name: 'svelte:fragment',
+					attributes: [],
+					children: [child],
+				};
+
+				// transfer attributes
+				for (let i=child.attributes.length - 1; i >= 0; i--) {
+					const attribute = child.attributes[i];
+					if (attribute.type === 'Let') {
+						slot_template.attributes.push(attribute);
+						child.attributes.splice(i, 1);
+					} else if (attribute.type === 'Attribute' && attribute.name === 'slot') {
+						slot_template.attributes.push(attribute);
+					}
+				}
+		
+				children.push(slot_template);
+				info.children.splice(i, 1);
+			}
+		}
+
+		if (info.children.some(node => not_whitespace_text(node))) {
+			children.push({ 
+				start: info.start,
+				end: info.end,
+				type: 'SlotTemplate', 
+				name: 'svelte:fragment',
+				attributes: [],
+				children: info.children
+			});
+		}
+
+		this.children = map_children(component, this, this.scope, children);
+	}
+
+	get slot_template_name() {
+		return this.attributes.find(attribute => attribute.name === 'slot').get_static_value() as string;
 	}
 }
+
+function not_whitespace_text(node) {
+	return !(node.type === 'Text' && /^\s+$/.test(node.data));
+}
\ No newline at end of file
diff --git a/src/compiler/compile/nodes/interfaces.ts b/src/compiler/compile/nodes/interfaces.ts
index 9a38fe8032f5..8bbd1e97aade 100644
--- a/src/compiler/compile/nodes/interfaces.ts
+++ b/src/compiler/compile/nodes/interfaces.ts
@@ -25,6 +25,7 @@ import PendingBlock from './PendingBlock';
 import RawMustacheTag from './RawMustacheTag';
 import Slot from './Slot';
 import SlotTemplate from './SlotTemplate';
+import DefaultSlotTemplate from './DefaultSlotTemplate';
 import Text from './Text';
 import ThenBlock from './ThenBlock';
 import Title from './Title';
@@ -58,6 +59,7 @@ export type INode = Action
 | RawMustacheTag
 | Slot
 | SlotTemplate
+| DefaultSlotTemplate
 | Tag
 | Text
 | ThenBlock
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index ff3992cf07d9..42c37e77016f 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -140,7 +140,6 @@ export default class ElementWrapper extends Wrapper {
 	event_handlers: EventHandler[];
 	class_dependencies: string[];
 
-	slot_block: Block;
 	select_binding_dependencies?: Set<string>;
 
 	var: any;
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index 57980728d3bc..3374493bdb05 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -9,8 +9,6 @@ import { sanitize } from '../../../../utils/names';
 import add_to_set from '../../../utils/add_to_set';
 import { b, x, p } from 'code-red';
 import Attribute from '../../../nodes/Attribute';
-import create_debugging_comment from '../shared/create_debugging_comment';
-import { get_slot_definition } from '../shared/get_slot_definition';
 import TemplateScope from '../../../nodes/shared/TemplateScope';
 import is_dynamic from '../shared/is_dynamic';
 import bind_this from '../shared/bind_this';
@@ -18,6 +16,7 @@ import { Node, Identifier, ObjectExpression } from 'estree';
 import EventHandler from '../Element/EventHandler';
 import { extract_names } from 'periscopic';
 import mark_each_block_bindings from '../shared/mark_each_block_bindings';
+import SlotTemplate from '../../../nodes/SlotTemplate';
 
 type SlotDefinition = { block: Block; scope: TemplateScope; get_context?: Node; get_changes?: Node };
 
@@ -27,7 +26,6 @@ export default class InlineComponentWrapper extends Wrapper {
 	node: InlineComponent;
 	fragment: FragmentWrapper;
 	children: Array<Wrapper | FragmentWrapper> = [];
-	default_slot_block: Block;
 
 	constructor(
 		renderer: Renderer,
@@ -80,46 +78,7 @@ export default class InlineComponentWrapper extends Wrapper {
 				});
 			});
 
-			const children = this.node.children.slice();
-			for (let i=children.length - 1; i>=0;) {
-				const child = children[i];
-				if (child.type === 'SlotTemplate' || (child.type === 'Element' && child.attributes.find(attribute => attribute.name === 'slot'))) {
-					const slot_template = new SlotTemplateWrapper(renderer, block, this, child, strip_whitespace, next_sibling);
-					this.children.push(slot_template);
-					children.splice(i, 1);
-					continue;
-				}
-
-				i--;
-			}
-
-			if (this.slots.has('default') && children.filter(node => !(node.type === 'Text' && node.data.trim() === ''))) {
-				throw new Error('Found elements without slot attribute when using slot="default"');
-			}
-
-			const default_slot = block.child({
-				comment: create_debugging_comment(node, renderer.component),
-				name: renderer.component.get_unique_name(`create_default_slot`),
-				type: 'slot'
-			});
-
-			this.renderer.blocks.push(default_slot);
-			this.default_slot_block = default_slot;
-
-			this.slots.set('default', get_slot_definition(default_slot, this.node.scope, this.node.lets));
-			const fragment = new FragmentWrapper(renderer, default_slot, children, this, strip_whitespace, next_sibling);
-			this.children.push(fragment);
-
-			const dependencies: Set<string> = new Set();
-
-			// TODO is this filtering necessary? (I *think* so)
-			default_slot.dependencies.forEach(name => {
-				if (!this.node.scope.is_let(name)) {
-					dependencies.add(name);
-				}
-			});
-
-			block.add_dependencies(dependencies);
+			this.children = this.node.children.map(child => new SlotTemplateWrapper(renderer, block, this, child as SlotTemplate, strip_whitespace, next_sibling));
 		}
 
 		block.add_outro();
@@ -127,6 +86,9 @@ export default class InlineComponentWrapper extends Wrapper {
 
 	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"');
+			}
 			throw new Error(`Duplicate slot name "${name}" in <${this.node.name}>`);
 		}
 		this.slots.set(name, slot_definition);
@@ -167,7 +129,7 @@ export default class InlineComponentWrapper extends Wrapper {
 
 		this.children.forEach((child) => {
 			this.renderer.add_to_context('$$scope', true);
-			child.render(this.default_slot_block, null, x`#nodes` as Identifier);
+			child.render(block, null, x`#nodes` as Identifier);
 		});
 
 		let props;
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index ad5c421bc421..9d33c9ea7acb 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -1,6 +1,5 @@
 import { is_void } from '../../../utils/names';
 import { get_attribute_value, get_class_attribute_value } from './shared/get_attribute_value';
-import { get_slot_scope } from './shared/get_slot_scope';
 import { boolean_attributes } from './shared/boolean_attributes';
 import Renderer, { RenderOptions } from '../Renderer';
 import Element from '../../nodes/Element';
@@ -8,9 +7,7 @@ import { x } from 'code-red';
 import Expression from '../../nodes/shared/Expression';
 import remove_whitespace_children from './utils/remove_whitespace_children';
 
-export default function(node: Element, renderer: Renderer, options: RenderOptions & {
-	slot_scopes: Map<any, any>;
-}) {
+export default function(node: Element, renderer: Renderer, options: RenderOptions) {
 
 	const children = remove_whitespace_children(node.children, node.next);
 
@@ -23,13 +20,6 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 		node.attributes.some((attribute) => attribute.name === 'contenteditable')
 	);
 
-	const slot = node.get_static_attribute_value('slot');
-	const nearest_inline_component = node.find_nearest(/InlineComponent/);
-
-	if (slot && nearest_inline_component) {
-		renderer.push();
-	}
-
 	renderer.add_string(`<${node.name}`);
 
 	const class_expression_list = node.classes.map(class_directive => {
@@ -148,24 +138,6 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 		if (!is_void(node.name)) {
 			renderer.add_string(`</${node.name}>`);
 		}
-	} else if (slot && nearest_inline_component) {
-		renderer.render(children, options);
-
-		if (!is_void(node.name)) {
-			renderer.add_string(`</${node.name}>`);
-		}
-
-		const lets = node.lets;
-		const seen = new Set(lets.map(l => l.name.name));
-
-		nearest_inline_component.lets.forEach(l => {
-			if (!seen.has(l.name.name)) lets.push(l);
-		});
-
-		options.slot_scopes.set(slot, {
-			input: get_slot_scope(node.lets),
-			output: renderer.pop()
-		});
 	} else {
 		renderer.render(children, options);
 
diff --git a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
index 37f05a941c42..c4116e659105 100644
--- a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
+++ b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
@@ -1,8 +1,6 @@
 import { string_literal } from '../../utils/stringify';
 import Renderer, { RenderOptions } from '../Renderer';
-import { get_slot_scope } from './shared/get_slot_scope';
 import InlineComponent from '../../nodes/InlineComponent';
-import remove_whitespace_children from './utils/remove_whitespace_children';
 import { p, x } from 'code-red';
 
 function get_prop_value(attribute) {
@@ -68,28 +66,19 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 
 	const slot_fns = [];
 
-	const children = remove_whitespace_children(node.children, node.next);
+	const children = node.children;
 
 	if (children.length) {
 		const slot_scopes = new Map();
 
-		renderer.push();
-
 		renderer.render(children, Object.assign({}, options, {
 			slot_scopes
 		}));
 
-		slot_scopes.set('default', {
-			input: get_slot_scope(node.lets),
-			output: renderer.pop()
-		});
-
 		slot_scopes.forEach(({ input, output }, name) => {
-			if (!is_empty_template_literal(output)) {
-				slot_fns.push(
-					p`${name}: (${input}) => ${output}`
-				);
-			}
+			slot_fns.push(
+				p`${name}: (${input}) => ${output}`
+			);
 		});
 	}
 
@@ -99,11 +88,3 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 
 	renderer.add_expression(x`@validate_component(${expression}, "${node.name}").$$render($$result, ${props}, ${bindings}, ${slots})`);
 }
-
-function is_empty_template_literal(template_literal) {
-	return (
-		template_literal.expressions.length === 0 &&
-		template_literal.quasis.length === 1 &&
-		template_literal.quasis[0].value.raw === ""
-	);
-}
\ No newline at end of file
diff --git a/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts b/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
index 71680494a511..34cabfff5f6f 100644
--- a/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
+++ b/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
@@ -3,12 +3,13 @@ import SlotTemplate from '../../nodes/SlotTemplate';
 import remove_whitespace_children from './utils/remove_whitespace_children';
 import { get_slot_scope } from './shared/get_slot_scope';
 import InlineComponent from '../../nodes/InlineComponent';
+import Element from '../../nodes/Element';
 
-export default function(node: SlotTemplate, renderer: Renderer, options: RenderOptions & {
+export default function(node: SlotTemplate | Element | InlineComponent, renderer: Renderer, options: RenderOptions & {
 	slot_scopes: Map<any, any>;
 }) {
 	const parent_inline_component = node.parent as InlineComponent;
-	const children = remove_whitespace_children(node.children, node.next);
+	const children = remove_whitespace_children(node instanceof SlotTemplate ? node.children : [node], node.next);
 
 	renderer.push();
 	renderer.render(children, options);
@@ -19,8 +20,26 @@ export default function(node: SlotTemplate, renderer: Renderer, options: RenderO
 		if (!seen.has(l.name.name)) lets.push(l);
 	});
 
-	options.slot_scopes.set(node.slot_template_name, {
-		input: get_slot_scope(node.lets),
-		output: renderer.pop()
-	});
+	const slot_fragment_content = renderer.pop();
+	if (!is_empty_template_literal(slot_fragment_content)) {
+		if (options.slot_scopes.has(node.slot_template_name)) {
+			if (node.slot_template_name === 'default') {
+				throw new Error('Found elements without slot attribute when using slot="default"');
+			}
+			throw new Error(`Duplicate slot name "${node.slot_template_name}" in <${parent_inline_component.name}>`);
+		}
+
+		options.slot_scopes.set(node.slot_template_name, {
+			input: get_slot_scope(node.lets),
+			output: slot_fragment_content
+		});
+	}
 }
+
+function is_empty_template_literal(template_literal) {
+	return (
+		template_literal.expressions.length === 0 &&
+		template_literal.quasis.length === 1 &&
+		template_literal.quasis[0].value.raw === ""
+	);
+}
\ No newline at end of file
diff --git a/test/runtime/index.js b/test/runtime/index.js
index 65157196c9d7..c59dc92b7ed8 100644
--- a/test/runtime/index.js
+++ b/test/runtime/index.js
@@ -7,7 +7,7 @@ import * as glob from 'tiny-glob/sync.js';
 import { clear_loops, flush, set_now, set_raf } from "../../internal";
 
 import {
-	showOutput,
+	// showOutput,
 	loadConfig,
 	loadSvelte,
 	cleanRequireCache,
@@ -142,7 +142,7 @@ describe("runtime", () => {
 						mod = require(`./samples/${dir}/main.svelte`);
 						SvelteComponent = mod.default;
 					} catch (err) {
-						showOutput(cwd, compileOptions, compile); // eslint-disable-line no-console
+						// showOutput(cwd, compileOptions, compile); // eslint-disable-line no-console
 						throw err;
 					}
 
@@ -223,7 +223,7 @@ describe("runtime", () => {
 					}
 				}).catch(err => {
 					failed.add(dir);
-					showOutput(cwd, compileOptions, compile); // eslint-disable-line no-console
+					// showOutput(cwd, compileOptions, compile); // eslint-disable-line no-console
 					throw err;
 				})
 				.catch(err => {
@@ -233,7 +233,7 @@ describe("runtime", () => {
 				})
 				.then(() => {
 					if (config.show) {
-						showOutput(cwd, compileOptions, compile);
+						// showOutput(cwd, compileOptions, compile);
 					}
 
 					flush();
diff --git a/test/runtime/samples/component-slot-component-named-b/Hello.svelte b/test/runtime/samples/component-slot-component-named-b/Hello.svelte
new file mode 100644
index 000000000000..ba726f62c986
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-b/Hello.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let name;
+</script>
+
+<span>Hello {name}</span>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-b/Nested.svelte b/test/runtime/samples/component-slot-component-named-b/Nested.svelte
new file mode 100644
index 000000000000..a94392ce5d82
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-b/Nested.svelte
@@ -0,0 +1 @@
+<slot name="name"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-b/_config.js b/test/runtime/samples/component-slot-component-named-b/_config.js
new file mode 100644
index 000000000000..2b4af715c253
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-b/_config.js
@@ -0,0 +1,7 @@
+export default {
+	preserveIdentifiers: true,
+
+	html: `
+		<span>Hello world</span>
+	`
+};
diff --git a/test/runtime/samples/component-slot-component-named-b/main.svelte b/test/runtime/samples/component-slot-component-named-b/main.svelte
new file mode 100644
index 000000000000..494a50a86ce7
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-b/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+	import Hello from './Hello.svelte';
+
+	let name = 'world';
+</script>
+
+<Nested>
+	<Hello slot="name" {name} />
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-c/Hello.svelte b/test/runtime/samples/component-slot-component-named-c/Hello.svelte
new file mode 100644
index 000000000000..28a2bb436a09
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-c/Hello.svelte
@@ -0,0 +1 @@
+<span>Hello</span>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-c/Nested.svelte b/test/runtime/samples/component-slot-component-named-c/Nested.svelte
new file mode 100644
index 000000000000..a94392ce5d82
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-c/Nested.svelte
@@ -0,0 +1 @@
+<slot name="name"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-c/World.svelte b/test/runtime/samples/component-slot-component-named-c/World.svelte
new file mode 100644
index 000000000000..680e6dff5b12
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-c/World.svelte
@@ -0,0 +1 @@
+<span>world</span>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-c/_config.js b/test/runtime/samples/component-slot-component-named-c/_config.js
new file mode 100644
index 000000000000..9dfed6ff531e
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-c/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<span>Hello</span>
+		<span>world</span>
+	`
+};
diff --git a/test/runtime/samples/component-slot-component-named-c/main.svelte b/test/runtime/samples/component-slot-component-named-c/main.svelte
new file mode 100644
index 000000000000..4bf657d9cb80
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-c/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Nested from './Nested.svelte';
+	import Hello from './Hello.svelte';
+	import World from './World.svelte';
+</script>
+
+<Nested>
+	<Hello slot="name" />
+</Nested>
+
+<Nested>
+	<World slot="name" />
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named/Bar.svelte b/test/runtime/samples/component-slot-component-named/Bar.svelte
new file mode 100644
index 000000000000..8124337d72c2
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named/Bar.svelte
@@ -0,0 +1 @@
+<p>bar</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named/Foo.svelte b/test/runtime/samples/component-slot-component-named/Foo.svelte
new file mode 100644
index 000000000000..998ea4094d49
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named/Foo.svelte
@@ -0,0 +1 @@
+<p>foo</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named/Nested.svelte b/test/runtime/samples/component-slot-component-named/Nested.svelte
new file mode 100644
index 000000000000..665555820a3d
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named/Nested.svelte
@@ -0,0 +1,5 @@
+<div>
+	<slot/>
+	<slot name='bar'/>
+	<slot name='foo'/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named/_config.js b/test/runtime/samples/component-slot-component-named/_config.js
new file mode 100644
index 000000000000..bb0bcff09709
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<div>
+			Hello
+			<p>bar</p>
+			<p>foo</p>
+		</div>
+	`,
+};
diff --git a/test/runtime/samples/component-slot-component-named/main.svelte b/test/runtime/samples/component-slot-component-named/main.svelte
new file mode 100644
index 000000000000..c16f005d5d0f
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Nested from './Nested.svelte';
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+</script>
+
+<Nested>
+	Hello
+
+	<Foo slot='foo' />
+	<Bar slot='bar' />
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-nested/Child.svelte b/test/runtime/samples/component-svelte-slot-nested/Child.svelte
new file mode 100644
index 000000000000..3f87a7dbf252
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-nested/Child.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<svelte:fragment slot="name">
+		<slot />
+	</svelte:fragment>
+</Nested>
+
+<Nested>
+	<svelte:fragment slot="name">
+		<slot name="b" />
+	</svelte:fragment>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-nested/Nested.svelte b/test/runtime/samples/component-svelte-slot-nested/Nested.svelte
new file mode 100644
index 000000000000..a94392ce5d82
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-nested/Nested.svelte
@@ -0,0 +1 @@
+<slot name="name"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-nested/_config.js b/test/runtime/samples/component-svelte-slot-nested/_config.js
new file mode 100644
index 000000000000..eecd155e1f48
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-nested/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		Default
+		<p>B slot</p>
+	`
+};
diff --git a/test/runtime/samples/component-svelte-slot-nested/main.svelte b/test/runtime/samples/component-svelte-slot-nested/main.svelte
new file mode 100644
index 000000000000..e5b3e2f84afb
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-nested/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child>
+	<svelte:fragment>
+		Default
+	</svelte:fragment>
+	<svelte:fragment slot="b">
+		<p>B slot</p>
+	</svelte:fragment>
+</Child>
diff --git a/test/validator/samples/prop-slot/errors.json b/test/validator/samples/prop-slot/errors.json
deleted file mode 100644
index 4fbfa3935c56..000000000000
--- a/test/validator/samples/prop-slot/errors.json
+++ /dev/null
@@ -1,15 +0,0 @@
-[{
-	"code": "invalid-prop",
-	"message": "'slot' is reserved for future use in named slots",
-	"start": {
-		"line": 5,
-		"column": 8,
-		"character": 67
-	},
-	"end": {
-		"line": 5,
-		"column": 18,
-		"character": 77
-	},
-	"pos": 67
-}]
diff --git a/test/validator/samples/prop-slot/input.svelte b/test/validator/samples/prop-slot/input.svelte
deleted file mode 100644
index 816c656aa063..000000000000
--- a/test/validator/samples/prop-slot/input.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import Widget from './Widget.svelte';
-</script>
-
-<Widget slot='foo'/>
diff --git a/test/validator/samples/svelte-slot-placement-2/errors.json b/test/validator/samples/svelte-slot-placement-2/errors.json
index 6a35d97f66ec..5659b35e7d5e 100644
--- a/test/validator/samples/svelte-slot-placement-2/errors.json
+++ b/test/validator/samples/svelte-slot-placement-2/errors.json
@@ -3,7 +3,7 @@
 		"code": "invalid-slotted-content",
 		"message": "<svelte:fragment> must be a child of a component",
 		"start": { "line": 5, "column": 0, "character": 59 },
-		"end": { "line": 7, "column": 14, "character": 104 },
+		"end": { "line": 7, "column": 18, "character": 112 },
 		"pos": 59
 	}
 ]
diff --git a/test/validator/samples/svelte-slot-placement/errors.json b/test/validator/samples/svelte-slot-placement/errors.json
index 9e960a263c69..ce825243f04e 100644
--- a/test/validator/samples/svelte-slot-placement/errors.json
+++ b/test/validator/samples/svelte-slot-placement/errors.json
@@ -3,7 +3,7 @@
 		"code": "invalid-slotted-content",
 		"message": "<svelte:fragment> must be a child of a component",
 		"start": { "line": 7, "column": 2, "character": 77 },
-		"end": { "line": 9, "column": 16, "character": 126 },
+		"end": { "line": 9, "column": 20, "character": 134 },
 		"pos": 77
 	}
 ]