Skip to content

Commit 03f0fd8

Browse files
tanhauhautanhauhau
committed
add validation and test
1 parent 01d699c commit 03f0fd8

File tree

70 files changed

+778
-106
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+778
-106
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -743,6 +743,11 @@ export default class Element extends Node {
743743
);
744744
}
745745
}
746+
747+
get slot_template_name() {
748+
// attribute.get_static_value
749+
return this.attributes.find(attribute => attribute.name === 'slot').get_static_value() as string;
750+
}
746751
}
747752

748753
function should_have_attribute(

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default class SlotTemplate extends Node {
1212
children: INode[];
1313
lets: Let[] = [];
1414
slot_attribute: Attribute;
15-
slot_name: string = 'default';
15+
slot_template_name: string = 'default';
1616

1717
constructor(component: Component, parent: INode, scope: TemplateScope, info: any) {
1818
super(component, parent, scope, info);
@@ -52,7 +52,7 @@ export default class SlotTemplate extends Node {
5252
message: `slot attribute value is missing`
5353
});
5454
}
55-
this.slot_name = this.slot_attribute.get_static_value() as string;
55+
this.slot_template_name = this.slot_attribute.get_static_value() as string;
5656
break;
5757
}
5858
throw new Error(`Invalid attribute "${node.name}" in <svelte:slot>`);
@@ -70,7 +70,7 @@ export default class SlotTemplate extends Node {
7070
if (this.parent.type !== 'InlineComponent') {
7171
this.component.error(this, {
7272
code: `invalid-slotted-content`,
73-
message: `Element with a slot='...' attribute must be a child of a component`
73+
message: `<svelte:slot> must be a child of a component`
7474
});
7575
}
7676
}

‎src/compiler/compile/nodes/shared/TemplateScope.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import ThenBlock from '../ThenBlock';
33
import CatchBlock from '../CatchBlock';
44
import InlineComponent from '../InlineComponent';
55
import Element from '../Element';
6+
import SlotTemplate from '../SlotTemplate';
67

7-
type NodeWithScope = EachBlock | ThenBlock | CatchBlock | InlineComponent | Element;
8+
type NodeWithScope = EachBlock | ThenBlock | CatchBlock | InlineComponent | Element | SlotTemplate;
89

910
export default class TemplateScope {
1011
names: Set<string>;
@@ -40,7 +41,7 @@ export default class TemplateScope {
4041

4142
is_let(name: string) {
4243
const owner = this.get_owner(name);
43-
return owner && (owner.type === 'Element' || owner.type === 'InlineComponent');
44+
return owner && (owner.type === 'Element' || owner.type === 'InlineComponent' || owner.type === 'SlotTemplate');
4445
}
4546

4647
is_await(name: string) {

‎src/compiler/compile/render_dom/wrappers/Element/index.ts

Lines changed: 1 addition & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Renderer from '../../Renderer';
22
import Element from '../../../nodes/Element';
33
import Wrapper from '../shared/Wrapper';
44
import Block from '../../Block';
5-
import { is_void, sanitize } from '../../../../utils/names';
5+
import { is_void } from '../../../../utils/names';
66
import FragmentWrapper from '../Fragment';
77
import { escape_html, string_literal } from '../../../utils/stringify';
88
import TextWrapper from '../Text';
@@ -14,12 +14,9 @@ import AttributeWrapper from './Attribute';
1414
import StyleAttributeWrapper from './StyleAttribute';
1515
import { dimensions } from '../../../../utils/patterns';
1616
import Binding from './Binding';
17-
import InlineComponentWrapper from '../InlineComponent';
1817
import add_to_set from '../../../utils/add_to_set';
1918
import { add_event_handler } from '../shared/add_event_handlers';
2019
import { add_action } from '../shared/add_actions';
21-
import create_debugging_comment from '../shared/create_debugging_comment';
22-
import { get_slot_definition } from '../shared/get_slot_definition';
2320
import bind_this from '../shared/bind_this';
2421
import { is_head } from '../shared/is_head';
2522
import { Identifier } from 'estree';
@@ -169,49 +166,6 @@ export default class ElementWrapper extends Wrapper {
169166
}
170167

171168
this.attributes = this.node.attributes.map(attribute => {
172-
if (attribute.name === 'slot') {
173-
// TODO make separate subclass for this?
174-
let owner = this.parent;
175-
while (owner) {
176-
if (owner.node.type === 'InlineComponent') {
177-
break;
178-
}
179-
180-
if (owner.node.type === 'Element' && /-/.test(owner.node.name)) {
181-
break;
182-
}
183-
184-
owner = owner.parent;
185-
}
186-
187-
if (owner && owner.node.type === 'InlineComponent') {
188-
const name = attribute.get_static_value() as string;
189-
190-
if (!(owner as unknown as InlineComponentWrapper).slots.has(name)) {
191-
const child_block = block.child({
192-
comment: create_debugging_comment(node, this.renderer.component),
193-
name: this.renderer.component.get_unique_name(`create_${sanitize(name)}_slot`),
194-
type: 'slot'
195-
});
196-
197-
const { scope, lets } = this.node;
198-
const seen = new Set(lets.map(l => l.name.name));
199-
200-
(owner as unknown as InlineComponentWrapper).node.lets.forEach(l => {
201-
if (!seen.has(l.name.name)) lets.push(l);
202-
});
203-
204-
(owner as unknown as InlineComponentWrapper).slots.set(
205-
name,
206-
get_slot_definition(child_block, scope, lets)
207-
);
208-
this.renderer.blocks.push(child_block);
209-
}
210-
211-
this.slot_block = (owner as unknown as InlineComponentWrapper).slots.get(name).block;
212-
block = this.slot_block;
213-
}
214-
}
215169
if (attribute.name === 'style') {
216170
return new StyleAttributeWrapper(this, block, attribute);
217171
}
@@ -263,26 +217,13 @@ export default class ElementWrapper extends Wrapper {
263217
}
264218

265219
this.fragment = new FragmentWrapper(renderer, block, node.children, this, strip_whitespace, next_sibling);
266-
267-
if (this.slot_block) {
268-
block.parent.add_dependencies(block.dependencies);
269-
270-
// appalling hack
271-
const index = block.parent.wrappers.indexOf(this);
272-
block.parent.wrappers.splice(index, 1);
273-
block.wrappers.push(this);
274-
}
275220
}
276221

277222
render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
278223
const { renderer } = this;
279224

280225
if (this.node.name === 'noscript') return;
281226

282-
if (this.slot_block) {
283-
block = this.slot_block;
284-
}
285-
286227
const node = this.var;
287228
const nodes = parent_nodes && block.get_unique_name(`${this.var.name}_nodes`); // if we're in unclaimable territory, i.e. <head>, parent_nodes is null
288229
const children = x`@children(${this.node.name === 'template' ? x`${node}.content` : node})`;

‎src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Renderer from '../../Renderer';
33
import Block from '../../Block';
44
import InlineComponent from '../../../nodes/InlineComponent';
55
import FragmentWrapper from '../Fragment';
6+
import SlotTemplateWrapper from '../SlotTemplate';
67
import { sanitize } from '../../../../utils/names';
78
import add_to_set from '../../../utils/add_to_set';
89
import { b, x, p } from 'code-red';
@@ -18,11 +19,15 @@ import { Node, Identifier, ObjectExpression } from 'estree';
1819
import EventHandler from '../Element/EventHandler';
1920
import { extract_names } from 'periscopic';
2021

22+
type SlotDefinition = { block: Block; scope: TemplateScope; get_context?: Node; get_changes?: Node };
23+
2124
export default class InlineComponentWrapper extends Wrapper {
2225
var: Identifier;
23-
slots: Map<string, { block: Block; scope: TemplateScope; get_context?: Node; get_changes?: Node }> = new Map();
26+
slots: Map<string, SlotDefinition> = new Map();
2427
node: InlineComponent;
2528
fragment: FragmentWrapper;
29+
children: Array<Wrapper | FragmentWrapper> = [];
30+
default_slot_block: Block;
2631

2732
constructor(
2833
renderer: Renderer,
@@ -80,16 +85,35 @@ export default class InlineComponentWrapper extends Wrapper {
8085
});
8186
});
8287

88+
const children = this.node.children.slice();
89+
for (let i=children.length - 1; i>=0;) {
90+
const child = children[i];
91+
if (child.type === 'SlotTemplate' || (child.type === 'Element' && child.attributes.find(attribute => attribute.name === 'slot'))) {
92+
const slot_template = new SlotTemplateWrapper(renderer, block, this, child, strip_whitespace, next_sibling);
93+
this.children.push(slot_template);
94+
children.splice(i, 1);
95+
continue;
96+
}
97+
98+
i--;
99+
}
100+
101+
if (this.slots.has('default') && children.filter(node => !(node.type === 'Text' && node.data.trim() === ''))) {
102+
throw new Error('Found elements without slot attribute when using slot="default"');
103+
}
104+
83105
const default_slot = block.child({
84106
comment: create_debugging_comment(node, renderer.component),
85107
name: renderer.component.get_unique_name(`create_default_slot`),
86108
type: 'slot'
87109
});
88110

89111
this.renderer.blocks.push(default_slot);
112+
this.default_slot_block = default_slot;
90113

91114
this.slots.set('default', get_slot_definition(default_slot, this.node.scope, this.node.lets));
92-
this.fragment = new FragmentWrapper(renderer, default_slot, node.children, this, strip_whitespace, next_sibling);
115+
const fragment = new FragmentWrapper(renderer, default_slot, children, this, strip_whitespace, next_sibling);
116+
this.children.push(fragment);
93117

94118
const dependencies: Set<string> = new Set();
95119

@@ -106,6 +130,13 @@ export default class InlineComponentWrapper extends Wrapper {
106130
block.add_outro();
107131
}
108132

133+
set_slot(name: string, slot_definition: SlotDefinition) {
134+
if (this.slots.has(name)) {
135+
throw new Error(`Duplicate slot name "${name}" in <${this.node.name}>`);
136+
}
137+
this.slots.set(name, slot_definition);
138+
}
139+
109140
warn_if_reactive() {
110141
const { name } = this.node;
111142
const variable = this.renderer.component.var_lookup.get(name);
@@ -138,14 +169,10 @@ export default class InlineComponentWrapper extends Wrapper {
138169
const statements: Array<Node | Node[]> = [];
139170
const updates: Array<Node | Node[]> = [];
140171

141-
if (this.fragment) {
172+
this.children.forEach((child) => {
142173
this.renderer.add_to_context('$$scope', true);
143-
const default_slot = this.slots.get('default');
144-
145-
this.fragment.nodes.forEach((child) => {
146-
child.render(default_slot.block, null, x`#nodes` as unknown as Identifier);
147-
});
148-
}
174+
child.render(this.default_slot_block, null, x`#nodes` as Identifier);
175+
});
149176

150177
let props;
151178
const name_changes = block.get_unique_name(`${name.name}_changes`);
@@ -196,7 +223,7 @@ export default class InlineComponentWrapper extends Wrapper {
196223
component_opts.properties.push(p`$$inline: true`);
197224
}
198225

199-
const fragment_dependencies = new Set(this.fragment ? ['$$scope'] : []);
226+
const fragment_dependencies = new Set(this.slots.size ? ['$$scope'] : []);
200227
this.slots.forEach(slot => {
201228
slot.block.dependencies.forEach(name => {
202229
const is_let = slot.scope.is_let(name);

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

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,77 @@
11
import Wrapper from "./shared/Wrapper";
22
import Renderer from "../Renderer";
33
import Block from "../Block";
4-
import SlotTemplate from "../../nodes/SlotTemplate";
54
import FragmentWrapper from "./Fragment";
65
import create_debugging_comment from "./shared/create_debugging_comment";
7-
import { get_slot_definition } from './shared/get_slot_definition';
6+
import { get_slot_definition } from "./shared/get_slot_definition";
87
import { x } from "code-red";
98
import { sanitize } from "../../../utils/names";
109
import { Identifier } from "estree";
1110
import InlineComponentWrapper from "./InlineComponent";
11+
import { extract_names } from "periscopic";
12+
import { INode } from "../../nodes/interfaces";
13+
import Let from "../../nodes/Let";
14+
import TemplateScope from "../../nodes/shared/TemplateScope";
1215

13-
export default class SlotWrapper extends Wrapper {
14-
node: SlotTemplate;
16+
type NodeWithLets = INode & {
17+
scope: TemplateScope;
18+
lets: Let[];
19+
slot_template_name: string;
20+
};
21+
22+
export default class SlotTemplateWrapper extends Wrapper {
23+
node: NodeWithLets;
1524
fragment: FragmentWrapper;
1625
block: Block;
26+
parent: InlineComponentWrapper;
1727

1828
constructor(
1929
renderer: Renderer,
2030
block: Block,
2131
parent: Wrapper,
22-
node: SlotTemplate,
32+
node: NodeWithLets,
2333
strip_whitespace: boolean,
2434
next_sibling: Wrapper
2535
) {
2636
super(renderer, block, parent, node);
2737

28-
const { scope, lets, slot_name } = this.node;
38+
const { scope, lets, slot_template_name } = this.node;
39+
40+
lets.forEach(l => {
41+
extract_names(l.value || l.name).forEach(name => {
42+
renderer.add_to_context(name, true);
43+
});
44+
});
2945

3046
this.block = block.child({
31-
comment: create_debugging_comment(node, this.renderer.component),
47+
comment: create_debugging_comment(this.node, this.renderer.component),
3248
name: this.renderer.component.get_unique_name(
33-
`create_${sanitize(slot_name)}_slot`
49+
`create_${sanitize(slot_template_name)}_slot`
3450
),
3551
type: "slot"
3652
});
3753
this.renderer.blocks.push(this.block);
3854

39-
if (this.parent.node.type === "InlineComponent") {
40-
const component = (this.parent as unknown) as InlineComponentWrapper;
41-
const seen = new Set(lets.map(l => l.name.name));
42-
component.node.lets.forEach(l => {
43-
if (!seen.has(l.name.name)) lets.push(l);
44-
});
45-
46-
component.slots.set(
47-
slot_name,
48-
get_slot_definition(this.block, scope, lets)
49-
);
50-
}
55+
const seen = new Set(lets.map(l => l.name.name));
56+
this.parent.node.lets.forEach(l => {
57+
if (!seen.has(l.name.name)) lets.push(l);
58+
});
5159

52-
this.fragment = new FragmentWrapper(renderer, this.block, node.children, this, strip_whitespace, next_sibling);
60+
this.parent.set_slot(
61+
slot_template_name,
62+
get_slot_definition(this.block, scope, lets)
63+
);
5364

65+
this.fragment = new FragmentWrapper(
66+
renderer,
67+
this.block,
68+
node.type === "SlotTemplate" ? node.children : [node],
69+
this,
70+
strip_whitespace,
71+
next_sibling
72+
);
5473

5574
this.block.parent.add_dependencies(this.block.dependencies);
56-
57-
// appalling hack, copied from ElementWrapper
58-
const index = this.block.parent.wrappers.indexOf(this);
59-
this.block.parent.wrappers.splice(index, 1);
60-
this.block.wrappers.push(this);
6175
}
6276

6377
render() {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function(node: SlotTemplate, renderer: Renderer, options: RenderO
1919
if (!seen.has(l.name.name)) lets.push(l);
2020
});
2121

22-
options.slot_scopes.set(node.slot_name, {
22+
options.slot_scopes.set(node.slot_template_name, {
2323
input: get_slot_scope(node.lets),
2424
output: renderer.pop()
2525
});

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

Lines changed: 1 addition & 1 deletion
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 or svelte:component",
3+
"message": "Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self, svelte:component or svelte:slot",
44
"pos": 10,
55
"start": {
66
"character": 10,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<slot value="Hi" />

‎test/runtime/samples/component-slot-duplicate-error-2/_config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
error: 'Duplicate slot name "foo" in <Nested>'
3+
};

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script>
2+
import Nested from './Nested.svelte';
3+
</script>
4+
5+
<Nested>
6+
<svelte:slot slot="foo">{value}</svelte:slot>
7+
<svelte:slot slot="foo">{value}</svelte:slot>
8+
</Nested>

0 commit comments

Comments
 (0)