replace svelte:slot -> svelte:fragment

sveltejs · Jun 28, 2020 · 0e781fc · 0e781fc
1 parent 44407f6
commit 0e781fc
Show file tree

Hide file tree

Showing 23 changed files with 81 additions and 76 deletions.
diff --git a/src/compiler/compile/nodes/SlotTemplate.ts b/src/compiler/compile/nodes/SlotTemplate.ts
@@ -1,61 +1,66 @@
-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';
+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';
+	type: "SlotTemplate";
 	scope: TemplateScope;
 	children: INode[];
 	lets: Let[] = [];
 	slot_attribute: Attribute;
-	slot_template_name: string = 'default';
+	slot_template_name: string = "default";
 
-	constructor(component: Component, parent: INode, scope: TemplateScope, info: any) {
+	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');
+		const has_let = info.attributes.some((node) => node.type === "Let");
 		if (has_let) {
 			scope = scope.child();
 		}
 
-		info.attributes.forEach(node => {
+		info.attributes.forEach((node) => {
 			switch (node.type) {
-				case 'Let': {
+				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 => {
+					l.names.forEach((name) => {
 						scope.add(name, dependencies, this);
 					});
 					break;
 				}
-				case 'Attribute': {
-					if (node.name === 'slot') {
+				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`
+								message: `slot attribute cannot have a dynamic value`,
 							});
 						}
 						const value = this.slot_attribute.get_static_value();
-						if (typeof value === 'boolean') {
+						if (typeof value === "boolean") {
 							component.error(node, {
 								code: `invalid-slot-attribute`,
-								message: `slot attribute value is missing`
+								message: `slot attribute value is missing`,
 							});
 						}
-						this.slot_template_name = this.slot_attribute.get_static_value() as string;
+						this.slot_template_name = value;
 						break;
 					}
-					throw new Error(`Invalid attribute "${node.name}" in <svelte:slot>`);
+					throw new Error(`Invalid attribute "${node.name}" in <svelte:fragment>`);
 				}
 				default:
 					throw new Error(`Not implemented: ${node.type}`);
@@ -67,10 +72,10 @@ export default class SlotTemplate extends Node {
 	}
 
 	validate_slot_template_placement() {
-		if (this.parent.type !== 'InlineComponent') {
+		if (this.parent.type !== "InlineComponent") {
 			this.component.error(this, {
 				code: `invalid-slotted-content`,
-				message: `<svelte:slot> must be a child of a component`
+				message: `<svelte:fragment> must be a child of a component`,
 			});
 		}
 	}

diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts
@@ -18,7 +18,7 @@ const meta_tags = new Map([
 	['svelte:body', 'Body'],
 ]);
 
-const valid_meta_tags = Array.from(meta_tags.keys()).concat('svelte:self', 'svelte:component', 'svelte:slot');
+const valid_meta_tags = Array.from(meta_tags.keys()).concat('svelte:self', 'svelte:component', 'svelte:fragment');
 
 const specials = new Map([
 	[
@@ -39,7 +39,7 @@ const specials = new Map([
 
 const SELF = /^svelte:self(?=[\s/>])/;
 const COMPONENT = /^svelte:component(?=[\s/>])/;
-const SLOT = /^svelte:slot(?=[\s/>])/;
+const SLOT = /^svelte:fragment(?=[\s/>])/;
 
 function parent_is_head(stack) {
 	let i = stack.length;
@@ -108,7 +108,7 @@ 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 === 'svelte:slot' ? 'SlotTemplate'
+			: name === 'svelte:fragment' ? 'SlotTemplate'
 				: name === 'title' && parent_is_head(parser.stack) ? 'Title'
 					: name === 'slot' && !parser.customElement ? 'Slot' : 'Element';
 
@@ -261,7 +261,7 @@ function read_tag_name(parser: Parser) {
 
 	if (parser.read(COMPONENT)) return 'svelte:component';
 
-	if (parser.read(SLOT)) return 'svelte:slot';
+	if (parser.read(SLOT)) return 'svelte:fragment';
 
 	const name = parser.read_until(/(\s|\/|>)/);
 

diff --git a/test/parser/samples/error-svelte-selfdestructive/error.json b/test/parser/samples/error-svelte-selfdestructive/error.json
@@ -1,6 +1,6 @@
 {
 	"code": "invalid-tag-name",
-	"message": "Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self, svelte:component or svelte:slot",
+	"message": "Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self, svelte:component or svelte:fragment",
 	"pos": 10,
 	"start": {
 		"character": 10,

diff --git a/test/runtime/samples/component-slot-duplicate-error-2/main.svelte b/test/runtime/samples/component-slot-duplicate-error-2/main.svelte
@@ -3,6 +3,6 @@
 </script>
 
 <Nested>
-	<svelte:slot slot="foo">{value}</svelte:slot>
-	<svelte:slot slot="foo">{value}</svelte:slot>
+	<svelte:fragment slot="foo">{value}</svelte:fragment>
+	<svelte:fragment slot="foo">{value}</svelte:fragment>
 </Nested>
diff --git a/test/runtime/samples/component-slot-duplicate-error-3/main.svelte b/test/runtime/samples/component-slot-duplicate-error-3/main.svelte
@@ -3,6 +3,6 @@
 </script>
 
 <Nested>
-	<svelte:slot slot="foo">{value}</svelte:slot>
+	<svelte:fragment slot="foo">{value}</svelte:fragment>
 	<p slot="foo">{value}</p>
 </Nested>
diff --git a/test/runtime/samples/component-slot-duplicate-error-4/main.svelte b/test/runtime/samples/component-slot-duplicate-error-4/main.svelte
@@ -3,6 +3,6 @@
 </script>
 
 <Nested>
-	<svelte:slot slot="default">value</svelte:slot>
+	<svelte:fragment slot="default">value</svelte:fragment>
 	<p>value</p>
 </Nested>
diff --git a/test/runtime/samples/component-svelte-slot-2/main.svelte b/test/runtime/samples/component-svelte-slot-2/main.svelte
@@ -3,13 +3,13 @@
 </script>
 
 <Nested>
-	<svelte:slot slot="name">
+	<svelte:fragment slot="name">
 		<span>Hello</span>
-	</svelte:slot>
+	</svelte:fragment>
 </Nested>
 
 <Nested>
-	<svelte:slot slot="name">
+	<svelte:fragment slot="name">
 		<span>world</span>
-	</svelte:slot>
+	</svelte:fragment>
 </Nested>
diff --git a/test/runtime/samples/component-svelte-slot-let-aliased/main.svelte b/test/runtime/samples/component-svelte-slot-let-aliased/main.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <Nested {things} let:thing={x}>
-	<svelte:slot slot="main">
+	<svelte:fragment slot="main">
 		<span>{x}</span>
-	</svelte:slot>
+	</svelte:fragment>
 </Nested>
diff --git a/test/runtime/samples/component-svelte-slot-let-b/main.svelte b/test/runtime/samples/component-svelte-slot-let-b/main.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <Nested let:count>
-	<svelte:slot slot="main">
+	<svelte:fragment slot="main">
 		<span>{count}</span>
-	</svelte:slot>
+	</svelte:fragment>
 </Nested>
diff --git a/test/runtime/samples/component-svelte-slot-let-c/main.svelte b/test/runtime/samples/component-svelte-slot-let-c/main.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <Nested>
-	<svelte:slot slot="main" let:c let:count>
+	<svelte:fragment slot="main" let:c let:count>
 		<span>{c} ({count})</span>
-	</svelte:slot>
+	</svelte:fragment>
 </Nested>
diff --git a/test/runtime/samples/component-svelte-slot-let-d/main.svelte b/test/runtime/samples/component-svelte-slot-let-d/main.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <Nested>
-	<svelte:slot slot="main" let:foo={bar}>
+	<svelte:fragment slot="main" let:foo={bar}>
 		<p>{bar}</p>
-	</svelte:slot>
+	</svelte:fragment>
 </Nested>
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured-2/main.svelte b/test/runtime/samples/component-svelte-slot-let-destructured-2/main.svelte
@@ -5,29 +5,29 @@
 
 <div>
 	<Nested props={['hello', 'world']}>
-		<svelte:slot slot="main" let:value={pair} let:data={foo}>
+		<svelte:fragment slot="main" let:value={pair} let:data={foo}>
 			{pair[0]} {pair[1]} {c} {foo}
-		</svelte:slot>
+		</svelte:fragment>
 	</Nested>
 
 	<button on:click={() => { c += 1; }}>Increment</button>
 </div>
 
 <div>
 	<Nested props={['hello', 'world']}>
-		<svelte:slot slot="main" let:value={[a, b]} let:data={foo}>
+		<svelte:fragment slot="main" let:value={[a, b]} let:data={foo}>
 			{a} {b} {d} {foo}
-		</svelte:slot>
+		</svelte:fragment>
 	</Nested>
 
 	<button on:click={() => { d += 1; }}>Increment</button>
 </div>
 
 <div>
 	<Nested props={{ a: 'hello', b: 'world' }}>
-		<svelte:slot slot="main" let:value={{ a, b }} let:data={foo}>
+		<svelte:fragment slot="main" let:value={{ a, b }} let:data={foo}>
 			{a} {b} {e} {foo}
-		</svelte:slot>
+		</svelte:fragment>
 	</Nested>
 
 	<button on:click={() => { e += 1; }}>Increment</button>

diff --git a/test/runtime/samples/component-svelte-slot-let-destructured/main.svelte b/test/runtime/samples/component-svelte-slot-let-destructured/main.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <Nested {things}>
-	<svelte:slot slot="item" let:thing="{{ num }}">
+	<svelte:fragment slot="item" let:thing="{{ num }}">
 		<span>{num}</span>
-	</svelte:slot>
+	</svelte:fragment>
 </Nested>
diff --git a/test/runtime/samples/component-svelte-slot-let-e/A.svelte b/test/runtime/samples/component-svelte-slot-let-e/A.svelte
@@ -4,8 +4,8 @@
 </script>
 
 <B {x} let:reflected>
-	<svelte:slot slot="main">
+	<svelte:fragment slot="main">
 		<span>{reflected}</span>
 		<slot name="main" {reflected} />
-	</svelte:slot>
+	</svelte:fragment>
 </B>
diff --git a/test/runtime/samples/component-svelte-slot-let-e/main.svelte b/test/runtime/samples/component-svelte-slot-let-e/main.svelte
@@ -4,13 +4,13 @@
 </script>
 
 <A {x}>
-	<svelte:slot slot="main" let:reflected>
+	<svelte:fragment slot="main" let:reflected>
 		<span>{reflected}</span>
-	</svelte:slot>	
+	</svelte:fragment>	
 </A>
 
 <A {x} let:reflected>
-	<svelte:slot slot="main">
+	<svelte:fragment slot="main">
 		<span>{reflected}</span>
-	</svelte:slot>	
+	</svelte:fragment>	
 </A>
diff --git a/test/runtime/samples/component-svelte-slot-let-f/main.svelte b/test/runtime/samples/component-svelte-slot-let-f/main.svelte
@@ -5,13 +5,13 @@
 </script>
 
 <A {x}>
-	<svelte:slot slot="foo" let:reflected>
+	<svelte:fragment slot="foo" let:reflected>
 		<span 
 			on:click={() => y = reflected}
 			class={reflected}
 		>
 			{reflected}
 		</span>
-	</svelte:slot>
+	</svelte:fragment>
 </A>
 { y }
diff --git a/test/runtime/samples/component-svelte-slot-let-in-binding/main.svelte b/test/runtime/samples/component-svelte-slot-let-in-binding/main.svelte
@@ -5,9 +5,9 @@
 </script>
 
 <Nested items={letters}>
-	<svelte:slot slot="main" let:index>
+	<svelte:fragment slot="main" let:index>
 		<label>
 			{index + 1}: <input bind:value={letters[index]}>
 		</label>
-	</svelte:slot>
+	</svelte:fragment>
 </Nested>
diff --git a/test/runtime/samples/component-svelte-slot-let-in-slot/main.svelte b/test/runtime/samples/component-svelte-slot-let-in-slot/main.svelte
@@ -6,11 +6,11 @@
 </script>
 
 <Outer {prop}>
-	<svelte:slot slot="main" let:value>
+	<svelte:fragment slot="main" let:value>
 		<Inner>
-			<svelte:slot slot="main">
+			<svelte:fragment slot="main">
 				{value}
-			</svelte:slot>
+			</svelte:fragment>
 		</Inner>
-	</svelte:slot>
+	</svelte:fragment>
 </Outer>
diff --git a/test/runtime/samples/component-svelte-slot/main.svelte b/test/runtime/samples/component-svelte-slot/main.svelte
@@ -4,10 +4,10 @@
 	const a = 'a';
 </script>
 <Nested>
-	<svelte:slot slot="a">
+	<svelte:fragment slot="a">
 		content <span>{ a }</span>
-	</svelte:slot>
-	<svelte:slot slot="b">
+	</svelte:fragment>
+	<svelte:fragment slot="b">
 		<B name="world" />
-	</svelte:slot>
+	</svelte:fragment>
 </Nested>
diff --git a/test/validator/samples/svelte-slot-placement-2/errors.json b/test/validator/samples/svelte-slot-placement-2/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "invalid-slotted-content",
-		"message": "<svelte:slot> must be a child of a component",
+		"message": "<svelte:fragment> must be a child of a component",
 		"start": { "line": 5, "column": 0, "character": 59 },
 		"end": { "line": 7, "column": 14, "character": 104 },
 		"pos": 59

diff --git a/test/validator/samples/svelte-slot-placement-2/input.svelte b/test/validator/samples/svelte-slot-placement-2/input.svelte
@@ -2,6 +2,6 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<svelte:slot>
+<svelte:fragment>
 	<div>test</div>
-</svelte:slot>
+</svelte:fragment>