feat provide $$slots

Author: tanhauhau

src/compiler/compile/render_dom/Renderer.ts

@@ -59,7 +59,7 @@ export default class Renderer {
 
 		if (component.slots.size > 0) {
 			this.add_to_context('$$scope');
-			this.add_to_context('$$slots');
+			this.add_to_context('#slots');
 		}
 
 		if (this.binding_groups.length > 0) {

src/compiler/compile/render_dom/index.ts

@@ -70,6 +70,15 @@ export default function dom(
 		);
 	}
 
+	const uses_slots = component.var_lookup.has('$$slots');
+	let compute_slots;
+	if (uses_slots) {
+		compute_slots = b`
+			const $$slots = @compute_slots(#slots);
+		`;
+	}
+
+
 	const uses_props = component.var_lookup.has('$$props');
 	const uses_rest = component.var_lookup.has('$$restProps');
 	const $$props = uses_props || uses_rest ? `$$new_props` : `$$props`;
@@ -420,13 +429,14 @@ export default function dom(
 
 				${resubscribable_reactive_store_unsubscribers}
 
+				${component.slots.size || component.compile_options.dev || uses_slots ? b`let { $$slots: #slots = {}, $$scope } = $$props;` : null}
+				${component.compile_options.dev && b`@validate_slots('${component.tag}', #slots, [${[...component.slots.keys()].map(key => `'${key}'`).join(',')}]);`}
+				${compute_slots}
+
 				${instance_javascript}
 
 				${unknown_props_check}
 
-				${component.slots.size || component.compile_options.dev ? b`let { $$slots = {}, $$scope } = $$props;` : null}
-				${component.compile_options.dev && b`@validate_slots('${component.tag}', $$slots, [${[...component.slots.keys()].map(key => `'${key}'`).join(',')}]);`}
-
 				${renderer.binding_groups.length > 0 && b`const $$binding_groups = [${renderer.binding_groups.map(_ => x`[]`)}];`}
 
 				${component.partly_hoisted}

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

@@ -128,7 +128,7 @@ export default class SlotWrapper extends Wrapper {
 		const slot_or_fallback = has_fallback ? block.get_unique_name(`${sanitize(slot_name)}_slot_or_fallback`) : slot;
 
 		block.chunks.init.push(b`
-			const ${slot_definition} = ${renderer.reference('$$slots')}.${slot_name};
+			const ${slot_definition} = ${renderer.reference('#slots')}.${slot_name};
 			const ${slot} = @create_slot(${slot_definition}, #ctx, ${renderer.reference('$$scope')}, ${get_slot_context_fn});
 			${has_fallback ? b`const ${slot_or_fallback} = ${slot} || ${this.fallback.name}(#ctx);` : null}
 		`);

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

@@ -11,8 +11,8 @@ export default function(node: Slot, renderer: Renderer, options: RenderOptions)
 	const result = renderer.pop();
 
 	renderer.add_expression(x`
-		$$slots.${node.slot_name}
-			? $$slots.${node.slot_name}(${slot_data})
+		#slots.${node.slot_name}
+			? #slots.${node.slot_name}(${slot_data})
 			: ${result}
 	`);
 }

src/compiler/compile/render_ssr/index.ts

@@ -35,6 +35,9 @@ export default function ssr(
 	const props = component.vars.filter(variable => !variable.module && variable.export_name);
 	const rest = uses_rest ? b`let $$restProps = @compute_rest_props($$props, [${props.map(prop => `"${prop.export_name}"`).join(',')}]);` : null;
 
+	const uses_slots = component.var_lookup.has('$$slots');
+	const slots = uses_slots ? b`let $$slots = @compute_slots(#slots);` : null;
+
 	const reactive_stores = component.vars.filter(variable => variable.name[0] === '$' && variable.name[1] !== '$');
 	const reactive_store_values = reactive_stores
 		.map(({ name }) => {
@@ -135,6 +138,7 @@ export default function ssr(
 
 	const blocks = [
 		rest,
+		slots,
 		...reactive_stores.map(({ name }) => {
 			const store_name = name.slice(1);
 			const store = component.var_lookup.get(store_name);
@@ -161,7 +165,7 @@ export default function ssr(
 
 		${component.fully_hoisted}
 
-		const ${name} = @create_ssr_component(($$result, $$props, $$bindings, $$slots) => {
+		const ${name} = @create_ssr_component(($$result, $$props, $$bindings, #slots) => {
 			${blocks}
 		});
 	`;

src/compiler/compile/utils/reserved_keywords.ts

@@ -1,4 +1,4 @@
-export const reserved_keywords = new Set(["$$props", "$$restProps"]);
+export const reserved_keywords = new Set(["$$props", "$$restProps", "$$slots"]);
 
 export function is_reserved_keyword(name) {
 	return reserved_keywords.has(name);

src/runtime/internal/utils.ts

@@ -116,6 +116,14 @@ export function compute_rest_props(props, keys) {
 	return rest;
 }
 
+export function compute_slots(slots) {
+	const result = {};
+	for (const key in slots) {
+		result[key] = true;
+	}
+	return result;
+}
+
 export function once(fn) {
 	let ran = false;
 	return function(this: any, ...args) {

test/runtime/samples/$$slot/A.svelte

@@ -0,0 +1,31 @@
+<script>
+	let data = '';
+
+	if ($$slots.b) {
+		data = 'foo';
+	}
+
+	export function getData() {
+		return data;
+	}
+
+	function toString(data) {
+		const result = {};
+		const sortedKeys = Object.keys(data).sort();
+		sortedKeys.forEach(key => result[key] = data[key]);
+		return JSON.stringify(result);
+	}
+</script>
+
+<slot></slot>
+<slot name="a"></slot>
+
+$$slots: {toString($$slots)}
+
+{#if $$slots.b}
+	<div>
+		<slot name="b"></slot>
+	</div>
+{:else}
+	Slot b is not available
+{/if}

test/runtime/samples/$$slot/_config.js

@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<span>bye</span><span>world</span>
+		<span slot="a">hello world</span>
+		$$slots: {"a":true,"default":true}
+		Slot b is not available
+
+		<span>bye world</span>
+		<span slot="a">hello world</span>
+		$$slots: {"a":true,"b":true,"default":true}
+		<div><span slot="b">hello world</span></div>
+	`,
+
+	async test({ assert, target, component }) {
+		assert.equal(component.getA(), '');
+		assert.equal(component.getB(), 'foo');
+	}
+};

test/runtime/samples/$$slot/main.svelte

@@ -0,0 +1,23 @@
+<script>
+	import A from "./A.svelte";
+	let a, b;
+
+	export function getA() {
+		return a.getData();
+	}
+	export function getB() {
+		return b.getData();
+	}
+</script>
+
+<A bind:this={a}>
+  <span slot="a">hello world</span>
+  <span>bye</span>
+  <span>world</span>
+</A>
+
+<A bind:this={b}>
+  <span slot="a">hello world</span>
+  <span slot="b">hello world</span>
+  <span>bye world</span>
+</A>