implement <svelte:slot>

Author: tanhauhau

src/compiler/compile/nodes/SlotTemplate.ts

@@ -0,0 +1,77 @@
+import map_children from './shared/map_children';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import Node from './shared/Node';
+import Let from './Let';
+import Attribute from './Attribute';
+import { INode } from './interfaces';
+
+export default class SlotTemplate extends Node {
+	type: 'SlotTemplate';
+	scope: TemplateScope;
+	children: INode[];
+	lets: Let[] = [];
+	slot_attribute: Attribute;
+	slot_name: string = 'default';
+
+	constructor(component: Component, parent: INode, scope: TemplateScope, info: any) {
+		super(component, parent, scope, info);
+
+		this.validate_slot_template_placement();
+
+		const has_let = info.attributes.some(node => node.type === 'Let');
+		if (has_let) {
+			scope = scope.child();
+		}
+
+		info.attributes.forEach(node => {
+			switch (node.type) {
+				case 'Let': {
+					const l = new Let(component, this, scope, node);
+					this.lets.push(l);
+					const dependencies = new Set([l.name.name]);
+
+					l.names.forEach(name => {
+						scope.add(name, dependencies, this);
+					});
+					break;
+				}
+				case 'Attribute': {
+					if (node.name === 'slot') {
+						this.slot_attribute = new Attribute(component, this, scope, node);
+						if (!this.slot_attribute.is_static) {
+							component.error(node, {
+								code: `invalid-slot-attribute`,
+								message: `slot attribute cannot have a dynamic value`
+							});
+						}
+						const value = this.slot_attribute.get_static_value();
+						if (typeof value === 'boolean') {
+							component.error(node, {
+								code: `invalid-slot-attribute`,
+								message: `slot attribute value is missing`
+							});
+						}
+						this.slot_name = this.slot_attribute.get_static_value() as string;
+						break;
+					}
+					throw new Error(`Invalid attribute "${node.name}" in <svelte:slot>`);
+				}
+				default:
+					throw new Error(`Not implemented: ${node.type}`);
+			}
+		});
+
+		this.scope = scope;
+		this.children = map_children(component, this, this.scope, info.children);
+	}
+
+	validate_slot_template_placement() {
+		if (this.parent.type !== 'InlineComponent') {
+			this.component.error(this, {
+				code: `invalid-slotted-content`,
+				message: `Element with a slot='...' attribute must be a child of a component`
+			});
+		}
+	}
+}

src/compiler/compile/nodes/Text.ts

@@ -29,7 +29,7 @@ export default class Text extends Node {
 	should_skip() {
 		if (/\S/.test(this.data)) return false;
 
-		const parent_element = this.find_nearest(/(?:Element|InlineComponent|Head)/);
+		const parent_element = this.find_nearest(/(?:Element|InlineComponent|SlotTemplate|Head)/);
 		if (!parent_element) return false;
 
 		if (parent_element.type === 'Head') return true;

src/compiler/compile/nodes/interfaces.ts

@@ -24,6 +24,7 @@ import Options from './Options';
 import PendingBlock from './PendingBlock';
 import RawMustacheTag from './RawMustacheTag';
 import Slot from './Slot';
+import SlotTemplate from './SlotTemplate';
 import Text from './Text';
 import ThenBlock from './ThenBlock';
 import Title from './Title';
@@ -56,6 +57,7 @@ export type INode = Action
 | PendingBlock
 | RawMustacheTag
 | Slot
+| SlotTemplate
 | Tag
 | Text
 | ThenBlock

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

@@ -11,6 +11,7 @@ import Options from '../Options';
 import RawMustacheTag from '../RawMustacheTag';
 import DebugTag from '../DebugTag';
 import Slot from '../Slot';
+import SlotTemplate from '../SlotTemplate';
 import Text from '../Text';
 import Title from '../Title';
 import Window from '../Window';
@@ -33,6 +34,7 @@ function get_constructor(type) {
 		case 'RawMustacheTag': return RawMustacheTag;
 		case 'DebugTag': return DebugTag;
 		case 'Slot': return Slot;
+		case 'SlotTemplate': return SlotTemplate;
 		case 'Text': return Text;
 		case 'Title': return Title;
 		case 'Window': return Window;

src/compiler/compile/render_dom/wrappers/Fragment.ts

@@ -10,6 +10,7 @@ import InlineComponent from './InlineComponent/index';
 import MustacheTag from './MustacheTag';
 import RawMustacheTag from './RawMustacheTag';
 import Slot from './Slot';
+import SlotTemplate from './SlotTemplate';
 import Text from './Text';
 import Title from './Title';
 import Window from './Window';
@@ -34,6 +35,7 @@ const wrappers = {
 	Options: null,
 	RawMustacheTag,
 	Slot,
+	SlotTemplate,
 	Text,
 	Title,
 	Window

src/compiler/compile/render_dom/wrappers/SlotTemplate.ts

@@ -0,0 +1,66 @@
+import Wrapper from "./shared/Wrapper";
+import Renderer from "../Renderer";
+import Block from "../Block";
+import SlotTemplate from "../../nodes/SlotTemplate";
+import FragmentWrapper from "./Fragment";
+import create_debugging_comment from "./shared/create_debugging_comment";
+import { get_slot_definition } from './shared/get_slot_definition';
+import { x } from "code-red";
+import { sanitize } from "../../../utils/names";
+import { Identifier } from "estree";
+import InlineComponentWrapper from "./InlineComponent";
+
+export default class SlotWrapper extends Wrapper {
+	node: SlotTemplate;
+	fragment: FragmentWrapper;
+	block: Block;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: SlotTemplate,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+
+		const { scope, lets, slot_name } = this.node;
+
+		this.block = block.child({
+			comment: create_debugging_comment(node, this.renderer.component),
+			name: this.renderer.component.get_unique_name(
+				`create_${sanitize(slot_name)}_slot`
+			),
+			type: "slot"
+		});
+		this.renderer.blocks.push(this.block);
+
+		if (this.parent.node.type === "InlineComponent") {
+			const component = (this.parent as unknown) as InlineComponentWrapper;
+			const seen = new Set(lets.map(l => l.name.name));
+			component.node.lets.forEach(l => {
+				if (!seen.has(l.name.name)) lets.push(l);
+			});
+
+			component.slots.set(
+				slot_name,
+				get_slot_definition(this.block, scope, lets)
+			);
+		}
+
+		this.fragment = new FragmentWrapper(renderer, this.block, node.children, this, strip_whitespace, next_sibling);
+
+
+		this.block.parent.add_dependencies(this.block.dependencies);
+
+		// appalling hack, copied from ElementWrapper
+		const index = this.block.parent.wrappers.indexOf(this);
+		this.block.parent.wrappers.splice(index, 1);
+		this.block.wrappers.push(this);
+	}
+
+	render() {
+		this.fragment.render(this.block, null, x`#nodes` as Identifier);
+	}
+}

src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts

@@ -15,7 +15,7 @@ export default function create_debugging_comment(
 
 	let d;
 
-	if (node.type === 'InlineComponent' || node.type === 'Element') {
+	if (node.type === 'InlineComponent' || node.type === 'Element' || node.type === 'SlotTemplate') {
 		if (node.children.length) {
 			d = node.children[0].start;
 			while (source[d - 1] !== '>') d -= 1;

src/compiler/compile/render_ssr/Renderer.ts

@@ -8,6 +8,7 @@ import HtmlTag from './handlers/HtmlTag';
 import IfBlock from './handlers/IfBlock';
 import InlineComponent from './handlers/InlineComponent';
 import Slot from './handlers/Slot';
+import SlotTemplate from './handlers/SlotTemplate';
 import Tag from './handlers/Tag';
 import Text from './handlers/Text';
 import Title from './handlers/Title';
@@ -34,6 +35,7 @@ const handlers: Record<string, Handler> = {
 	Options: noop,
 	RawMustacheTag: HtmlTag,
 	Slot,
+	SlotTemplate,
 	Text,
 	Title,
 	Window: noop

src/compiler/compile/render_ssr/handlers/SlotTemplate.ts

@@ -0,0 +1,26 @@
+import Renderer, { RenderOptions } from '../Renderer';
+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';
+
+export default function(node: SlotTemplate, 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);
+
+	renderer.push();
+	renderer.render(children, options);
+
+	const lets = node.lets;
+	const seen = new Set(lets.map(l => l.name.name));
+	parent_inline_component.lets.forEach(l => {
+		if (!seen.has(l.name.name)) lets.push(l);
+	});
+
+	options.slot_scopes.set(node.slot_name, {
+		input: get_slot_scope(node.lets),
+		output: renderer.pop()
+	});
+}

src/compiler/parse/state/tag.ts

@@ -15,10 +15,10 @@ const meta_tags = new Map([
 	['svelte:head', 'Head'],
 	['svelte:options', 'Options'],
 	['svelte:window', 'Window'],
-	['svelte:body', 'Body']
+	['svelte:body', 'Body'],
 ]);
 
-const valid_meta_tags = Array.from(meta_tags.keys()).concat('svelte:self', 'svelte:component');
+const valid_meta_tags = Array.from(meta_tags.keys()).concat('svelte:self', 'svelte:component', 'svelte:slot');
 
 const specials = new Map([
 	[
@@ -39,6 +39,7 @@ const specials = new Map([
 
 const SELF = /^svelte:self(?=[\s/>])/;
 const COMPONENT = /^svelte:component(?=[\s/>])/;
+const SLOT = /^svelte:slot(?=[\s/>])/;
 
 function parent_is_head(stack) {
 	let i = stack.length;
@@ -107,8 +108,9 @@ export default function tag(parser: Parser) {
 	const type = meta_tags.has(name)
 		? meta_tags.get(name)
 		: (/[A-Z]/.test(name[0]) || name === 'svelte:self' || name === 'svelte:component') ? 'InlineComponent'
-			: name === 'title' && parent_is_head(parser.stack) ? 'Title'
-				: name === 'slot' && !parser.customElement ? 'Slot' : 'Element';
+			: name === 'svelte:slot' ? 'SlotTemplate'
+				: name === 'title' && parent_is_head(parser.stack) ? 'Title'
+					: name === 'slot' && !parser.customElement ? 'Slot' : 'Element';
 
 	const element: TemplateNode = {
 		start,
@@ -259,6 +261,8 @@ function read_tag_name(parser: Parser) {
 
 	if (parser.read(COMPONENT)) return 'svelte:component';
 
+	if (parser.read(SLOT)) return 'svelte:slot';
+
 	const name = parser.read_until(/(\s|\/|>)/);
 
 	if (meta_tags.has(name)) return name;

test/runtime/samples/component-svelte-slot/B.svelte

@@ -0,0 +1,6 @@
+<script>
+  export let name;
+</script>
+
+<div>Hello</div>
+<div>{name}</div>

test/runtime/samples/component-svelte-slot/Nested.svelte

@@ -0,0 +1,2 @@
+<div>a: <slot name="a"></slot></div>
+<div>b: <slot name="b"></slot></div>

test/runtime/samples/component-svelte-slot/_config.js

@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div>a: content <span>a</span></div>
+		<div>b: <div>Hello</div><div>world</div></div>
+	`
+};

test/runtime/samples/component-svelte-slot/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	import Nested from "./Nested.svelte";
+	import B from './B.svelte';
+	const a = 'a';
+</script>
+<Nested>
+	<svelte:slot slot="a">
+		content <span>{ a }</span>
+	</svelte:slot>
+	<svelte:slot slot="b">
+		<B name="world" />
+	</svelte:slot>
+	<svelte:slot slot="c">
+	</svelte:slot>
+</Nested>