Skip to content

Commit df4a942

Browse files
tanhauhautanhauhau
committed
replace svelte:slot -> svelte:fragment
1 parent 9e4479a commit df4a942

File tree

23 files changed

+81
-76
lines changed

23 files changed

+81
-76
lines changed

‎src/compiler/compile/nodes/SlotTemplate.ts

+28-23
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,66 @@
1-
import map_children from './shared/map_children';
2-
import Component from '../Component';
3-
import TemplateScope from './shared/TemplateScope';
4-
import Node from './shared/Node';
5-
import Let from './Let';
6-
import Attribute from './Attribute';
7-
import { INode } from './interfaces';
1+
import map_children from "./shared/map_children";
2+
import Component from "../Component";
3+
import TemplateScope from "./shared/TemplateScope";
4+
import Node from "./shared/Node";
5+
import Let from "./Let";
6+
import Attribute from "./Attribute";
7+
import { INode } from "./interfaces";
88

99
export default class SlotTemplate extends Node {
10-
type: 'SlotTemplate';
10+
type: "SlotTemplate";
1111
scope: TemplateScope;
1212
children: INode[];
1313
lets: Let[] = [];
1414
slot_attribute: Attribute;
15-
slot_template_name: string = 'default';
15+
slot_template_name: string = "default";
1616

17-
constructor(component: Component, parent: INode, scope: TemplateScope, info: any) {
17+
constructor(
18+
component: Component,
19+
parent: INode,
20+
scope: TemplateScope,
21+
info: any
22+
) {
1823
super(component, parent, scope, info);
1924

2025
this.validate_slot_template_placement();
2126

22-
const has_let = info.attributes.some(node => node.type === 'Let');
27+
const has_let = info.attributes.some((node) => node.type === "Let");
2328
if (has_let) {
2429
scope = scope.child();
2530
}
2631

27-
info.attributes.forEach(node => {
32+
info.attributes.forEach((node) => {
2833
switch (node.type) {
29-
case 'Let': {
34+
case "Let": {
3035
const l = new Let(component, this, scope, node);
3136
this.lets.push(l);
3237
const dependencies = new Set([l.name.name]);
3338

34-
l.names.forEach(name => {
39+
l.names.forEach((name) => {
3540
scope.add(name, dependencies, this);
3641
});
3742
break;
3843
}
39-
case 'Attribute': {
40-
if (node.name === 'slot') {
44+
case "Attribute": {
45+
if (node.name === "slot") {
4146
this.slot_attribute = new Attribute(component, this, scope, node);
4247
if (!this.slot_attribute.is_static) {
4348
component.error(node, {
4449
code: `invalid-slot-attribute`,
45-
message: `slot attribute cannot have a dynamic value`
50+
message: `slot attribute cannot have a dynamic value`,
4651
});
4752
}
4853
const value = this.slot_attribute.get_static_value();
49-
if (typeof value === 'boolean') {
54+
if (typeof value === "boolean") {
5055
component.error(node, {
5156
code: `invalid-slot-attribute`,
52-
message: `slot attribute value is missing`
57+
message: `slot attribute value is missing`,
5358
});
5459
}
55-
this.slot_template_name = this.slot_attribute.get_static_value() as string;
60+
this.slot_template_name = value as string;
5661
break;
5762
}
58-
throw new Error(`Invalid attribute "${node.name}" in <svelte:slot>`);
63+
throw new Error(`Invalid attribute "${node.name}" in <svelte:fragment>`);
5964
}
6065
default:
6166
throw new Error(`Not implemented: ${node.type}`);
@@ -67,10 +72,10 @@ export default class SlotTemplate extends Node {
6772
}
6873

6974
validate_slot_template_placement() {
70-
if (this.parent.type !== 'InlineComponent') {
75+
if (this.parent.type !== "InlineComponent") {
7176
this.component.error(this, {
7277
code: `invalid-slotted-content`,
73-
message: `<svelte:slot> must be a child of a component`
78+
message: `<svelte:fragment> must be a child of a component`,
7479
});
7580
}
7681
}

‎src/compiler/parse/state/tag.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const meta_tags = new Map([
1818
['svelte:body', 'Body'],
1919
]);
2020

21-
const valid_meta_tags = Array.from(meta_tags.keys()).concat('svelte:self', 'svelte:component', 'svelte:slot');
21+
const valid_meta_tags = Array.from(meta_tags.keys()).concat('svelte:self', 'svelte:component', 'svelte:fragment');
2222

2323
const specials = new Map([
2424
[
@@ -39,7 +39,7 @@ const specials = new Map([
3939

4040
const SELF = /^svelte:self(?=[\s/>])/;
4141
const COMPONENT = /^svelte:component(?=[\s/>])/;
42-
const SLOT = /^svelte:slot(?=[\s/>])/;
42+
const SLOT = /^svelte:fragment(?=[\s/>])/;
4343

4444
function parent_is_head(stack) {
4545
let i = stack.length;
@@ -108,7 +108,7 @@ export default function tag(parser: Parser) {
108108
const type = meta_tags.has(name)
109109
? meta_tags.get(name)
110110
: (/[A-Z]/.test(name[0]) || name === 'svelte:self' || name === 'svelte:component') ? 'InlineComponent'
111-
: name === 'svelte:slot' ? 'SlotTemplate'
111+
: name === 'svelte:fragment' ? 'SlotTemplate'
112112
: name === 'title' && parent_is_head(parser.stack) ? 'Title'
113113
: name === 'slot' && !parser.customElement ? 'Slot' : 'Element';
114114

@@ -274,7 +274,7 @@ function read_tag_name(parser: Parser) {
274274

275275
if (parser.read(COMPONENT)) return 'svelte:component';
276276

277-
if (parser.read(SLOT)) return 'svelte:slot';
277+
if (parser.read(SLOT)) return 'svelte:fragment';
278278

279279
const name = parser.read_until(/(\s|\/|>)/);
280280

‎test/parser/samples/error-svelte-selfdestructive/error.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"code": "invalid-tag-name",
3-
"message": "Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self, svelte:component or svelte:slot",
3+
"message": "Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self, svelte:component or svelte:fragment",
44
"pos": 10,
55
"start": {
66
"character": 10,

‎test/runtime/samples/component-slot-duplicate-error-2/main.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
</script>
44

55
<Nested>
6-
<svelte:slot slot="foo">{value}</svelte:slot>
7-
<svelte:slot slot="foo">{value}</svelte:slot>
6+
<svelte:fragment slot="foo">{value}</svelte:fragment>
7+
<svelte:fragment slot="foo">{value}</svelte:fragment>
88
</Nested>

‎test/runtime/samples/component-slot-duplicate-error-3/main.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
</script>
44

55
<Nested>
6-
<svelte:slot slot="foo">{value}</svelte:slot>
6+
<svelte:fragment slot="foo">{value}</svelte:fragment>
77
<p slot="foo">{value}</p>
88
</Nested>

‎test/runtime/samples/component-slot-duplicate-error-4/main.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
</script>
44

55
<Nested>
6-
<svelte:slot slot="default">value</svelte:slot>
6+
<svelte:fragment slot="default">value</svelte:fragment>
77
<p>value</p>
88
</Nested>

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
</script>
44

55
<Nested>
6-
<svelte:slot slot="name">
6+
<svelte:fragment slot="name">
77
<span>Hello</span>
8-
</svelte:slot>
8+
</svelte:fragment>
99
</Nested>
1010

1111
<Nested>
12-
<svelte:slot slot="name">
12+
<svelte:fragment slot="name">
1313
<span>world</span>
14-
</svelte:slot>
14+
</svelte:fragment>
1515
</Nested>

‎test/runtime/samples/component-svelte-slot-let-aliased/main.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</script>
66

77
<Nested {things} let:thing={x}>
8-
<svelte:slot slot="main">
8+
<svelte:fragment slot="main">
99
<span>{x}</span>
10-
</svelte:slot>
10+
</svelte:fragment>
1111
</Nested>

‎test/runtime/samples/component-svelte-slot-let-b/main.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</script>
44

55
<Nested let:count>
6-
<svelte:slot slot="main">
6+
<svelte:fragment slot="main">
77
<span>{count}</span>
8-
</svelte:slot>
8+
</svelte:fragment>
99
</Nested>

‎test/runtime/samples/component-svelte-slot-let-c/main.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</script>
44

55
<Nested>
6-
<svelte:slot slot="main" let:c let:count>
6+
<svelte:fragment slot="main" let:c let:count>
77
<span>{c} ({count})</span>
8-
</svelte:slot>
8+
</svelte:fragment>
99
</Nested>

‎test/runtime/samples/component-svelte-slot-let-d/main.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</script>
44

55
<Nested>
6-
<svelte:slot slot="main" let:foo={bar}>
6+
<svelte:fragment slot="main" let:foo={bar}>
77
<p>{bar}</p>
8-
</svelte:slot>
8+
</svelte:fragment>
99
</Nested>

‎test/runtime/samples/component-svelte-slot-let-destructured-2/main.svelte

+6-6
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,29 @@
55

66
<div>
77
<Nested props={['hello', 'world']}>
8-
<svelte:slot slot="main" let:value={pair} let:data={foo}>
8+
<svelte:fragment slot="main" let:value={pair} let:data={foo}>
99
{pair[0]} {pair[1]} {c} {foo}
10-
</svelte:slot>
10+
</svelte:fragment>
1111
</Nested>
1212

1313
<button on:click={() => { c += 1; }}>Increment</button>
1414
</div>
1515

1616
<div>
1717
<Nested props={['hello', 'world']}>
18-
<svelte:slot slot="main" let:value={[a, b]} let:data={foo}>
18+
<svelte:fragment slot="main" let:value={[a, b]} let:data={foo}>
1919
{a} {b} {d} {foo}
20-
</svelte:slot>
20+
</svelte:fragment>
2121
</Nested>
2222

2323
<button on:click={() => { d += 1; }}>Increment</button>
2424
</div>
2525

2626
<div>
2727
<Nested props={{ a: 'hello', b: 'world' }}>
28-
<svelte:slot slot="main" let:value={{ a, b }} let:data={foo}>
28+
<svelte:fragment slot="main" let:value={{ a, b }} let:data={foo}>
2929
{a} {b} {e} {foo}
30-
</svelte:slot>
30+
</svelte:fragment>
3131
</Nested>
3232

3333
<button on:click={() => { e += 1; }}>Increment</button>

‎test/runtime/samples/component-svelte-slot-let-destructured/main.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</script>
66

77
<Nested {things}>
8-
<svelte:slot slot="item" let:thing="{{ num }}">
8+
<svelte:fragment slot="item" let:thing="{{ num }}">
99
<span>{num}</span>
10-
</svelte:slot>
10+
</svelte:fragment>
1111
</Nested>

‎test/runtime/samples/component-svelte-slot-let-e/A.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
</script>
55

66
<B {x} let:reflected>
7-
<svelte:slot slot="main">
7+
<svelte:fragment slot="main">
88
<span>{reflected}</span>
99
<slot name="main" {reflected} />
10-
</svelte:slot>
10+
</svelte:fragment>
1111
</B>

‎test/runtime/samples/component-svelte-slot-let-e/main.svelte

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
</script>
55

66
<A {x}>
7-
<svelte:slot slot="main" let:reflected>
7+
<svelte:fragment slot="main" let:reflected>
88
<span>{reflected}</span>
9-
</svelte:slot>
9+
</svelte:fragment>
1010
</A>
1111

1212
<A {x} let:reflected>
13-
<svelte:slot slot="main">
13+
<svelte:fragment slot="main">
1414
<span>{reflected}</span>
15-
</svelte:slot>
15+
</svelte:fragment>
1616
</A>

‎test/runtime/samples/component-svelte-slot-let-f/main.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
</script>
66

77
<A {x}>
8-
<svelte:slot slot="foo" let:reflected>
8+
<svelte:fragment slot="foo" let:reflected>
99
<span
1010
on:click={() => y = reflected}
1111
class={reflected}
1212
>
1313
{reflected}
1414
</span>
15-
</svelte:slot>
15+
</svelte:fragment>
1616
</A>
1717
{ y }

‎test/runtime/samples/component-svelte-slot-let-in-binding/main.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
</script>
66

77
<Nested items={letters}>
8-
<svelte:slot slot="main" let:index>
8+
<svelte:fragment slot="main" let:index>
99
<label>
1010
{index + 1}: <input bind:value={letters[index]}>
1111
</label>
12-
</svelte:slot>
12+
</svelte:fragment>
1313
</Nested>

‎test/runtime/samples/component-svelte-slot-let-in-slot/main.svelte

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
</script>
77

88
<Outer {prop}>
9-
<svelte:slot slot="main" let:value>
9+
<svelte:fragment slot="main" let:value>
1010
<Inner>
11-
<svelte:slot slot="main">
11+
<svelte:fragment slot="main">
1212
{value}
13-
</svelte:slot>
13+
</svelte:fragment>
1414
</Inner>
15-
</svelte:slot>
15+
</svelte:fragment>
1616
</Outer>

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
const a = 'a';
55
</script>
66
<Nested>
7-
<svelte:slot slot="a">
7+
<svelte:fragment slot="a">
88
content <span>{ a }</span>
9-
</svelte:slot>
10-
<svelte:slot slot="b">
9+
</svelte:fragment>
10+
<svelte:fragment slot="b">
1111
<B name="world" />
12-
</svelte:slot>
12+
</svelte:fragment>
1313
</Nested>

‎test/validator/samples/svelte-slot-placement-2/errors.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
[
22
{
33
"code": "invalid-slotted-content",
4-
"message": "<svelte:slot> must be a child of a component",
4+
"message": "<svelte:fragment> must be a child of a component",
55
"start": { "line": 5, "column": 0, "character": 59 },
66
"end": { "line": 7, "column": 14, "character": 104 },
77
"pos": 59

‎test/validator/samples/svelte-slot-placement-2/input.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
import Nested from './Nested.svelte';
33
</script>
44

5-
<svelte:slot>
5+
<svelte:fragment>
66
<div>test</div>
7-
</svelte:slot>
7+
</svelte:fragment>

0 commit comments

Comments
 (0)