expose which slots are present in $$slots (#4602)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Expose object of which slots have received content in `$$slots` ([#2106](https://github.com/sveltejs/svelte/issues/2106))
 * Add types to `createEventDispatcher` ([#5211](https://github.com/sveltejs/svelte/issues/5211))
 * In SSR mode, do not automatically declare variables for reactive assignments to member expressions ([#5247](https://github.com/sveltejs/svelte/issues/5247))
 * Include selector in message of `unused-css-selector` warning ([#5252](https://github.com/sveltejs/svelte/issues/5252))

src/compiler/compile/render_dom/Renderer.ts

@@ -60,7 +60,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.size > 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`;
@@ -409,13 +418,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.size > 0 && b`const $$binding_groups = [${[...renderer.binding_groups.keys()].map(_ => x`[]`)}];`}
 
 				${component.partly_hoisted}

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

@@ -125,7 +125,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}
-			? $$slots.${node.slot_name}(${slot_data})
+			? #slots.${node.slot_name}(${slot_data})
 			: ${result}
 	`);
 }

src/compiler/compile/render_ssr/index.ts

@@ -34,6 +34,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 }) => {
@@ -118,6 +121,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);
@@ -144,7 +148,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

@@ -128,6 +128,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/js/samples/capture-inject-state/expected.js

@@ -103,6 +103,8 @@ function instance($$self, $$props, $$invalidate) {
 		$$subscribe_prop = () => ($$unsubscribe_prop(), $$unsubscribe_prop = subscribe(prop, $$value => $$invalidate(2, $prop = $$value)), prop);
 
 	$$self.$$.on_destroy.push(() => $$unsubscribe_prop());
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots("Component", slots, []);
 	let { prop } = $$props;
 	validate_store(prop, "prop");
 	$$subscribe_prop();
@@ -115,9 +117,6 @@ function instance($$self, $$props, $$invalidate) {
 		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
-	let { $$slots = {}, $$scope } = $$props;
-	validate_slots("Component", $$slots, []);
-
 	$$self.$$set = $$props => {
 		if ("prop" in $$props) $$subscribe_prop($$invalidate(0, prop = $$props.prop));
 		if ("alias" in $$props) $$invalidate(1, realName = $$props.alias);

test/js/samples/debug-empty/expected.js

@@ -69,6 +69,8 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots("Component", slots, []);
 	let { name } = $$props;
 	const writable_props = ["name"];
 
@@ -76,9 +78,6 @@ function instance($$self, $$props, $$invalidate) {
 		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
-	let { $$slots = {}, $$scope } = $$props;
-	validate_slots("Component", $$slots, []);
-
 	$$self.$$set = $$props => {
 		if ("name" in $$props) $$invalidate(0, name = $$props.name);
 	};

test/js/samples/debug-foo-bar-baz-things/expected.js

@@ -170,6 +170,8 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots("Component", slots, []);
 	let { things } = $$props;
 	let { foo } = $$props;
 	let { bar } = $$props;
@@ -180,9 +182,6 @@ function instance($$self, $$props, $$invalidate) {
 		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
-	let { $$slots = {}, $$scope } = $$props;
-	validate_slots("Component", $$slots, []);
-
 	$$self.$$set = $$props => {
 		if ("things" in $$props) $$invalidate(0, things = $$props.things);
 		if ("foo" in $$props) $$invalidate(1, foo = $$props.foo);

test/js/samples/debug-foo/expected.js

@@ -164,6 +164,8 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots("Component", slots, []);
 	let { things } = $$props;
 	let { foo } = $$props;
 	const writable_props = ["things", "foo"];
@@ -172,9 +174,6 @@ function instance($$self, $$props, $$invalidate) {
 		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
-	let { $$slots = {}, $$scope } = $$props;
-	validate_slots("Component", $$slots, []);
-
 	$$self.$$set = $$props => {
 		if ("things" in $$props) $$invalidate(0, things = $$props.things);
 		if ("foo" in $$props) $$invalidate(1, foo = $$props.foo);

test/js/samples/debug-hoisted/expected.js

@@ -49,6 +49,8 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots("Component", slots, []);
 	let obj = { x: 5 };
 	let kobzol = 5;
 	const writable_props = [];
@@ -57,8 +59,6 @@ function instance($$self, $$props, $$invalidate) {
 		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
-	let { $$slots = {}, $$scope } = $$props;
-	validate_slots("Component", $$slots, []);
 	$$self.$capture_state = () => ({ obj, kobzol });
 
 	$$self.$inject_state = $$props => {

test/js/samples/debug-no-dependencies/expected.js

@@ -136,14 +136,14 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots("Component", slots, []);
 	const writable_props = [];
 
 	Object.keys($$props).forEach(key => {
 		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
-	let { $$slots = {}, $$scope } = $$props;
-	validate_slots("Component", $$slots, []);
 	return [];
 }
 

test/js/samples/debug-ssr-foo/expected.js

@@ -1,7 +1,7 @@
 /* generated by Svelte vX.Y.Z */
 import { create_ssr_component, debug, each, escape } from "svelte/internal";
 
-const Component = create_ssr_component(($$result, $$props, $$bindings, $$slots) => {
+const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
 	let { things } = $$props;
 	let { foo } = $$props;
 	if ($$props.things === void 0 && $$bindings.things && things !== void 0) $$bindings.things(things);

test/js/samples/dev-warning-missing-data-computed/expected.js

@@ -65,6 +65,8 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots("Component", slots, []);
 	let { foo } = $$props;
 	let bar;
 	const writable_props = ["foo"];
@@ -73,9 +75,6 @@ function instance($$self, $$props, $$invalidate) {
 		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
-	let { $$slots = {}, $$scope } = $$props;
-	validate_slots("Component", $$slots, []);
-
 	$$self.$$set = $$props => {
 		if ("foo" in $$props) $$invalidate(0, foo = $$props.foo);
 	};

test/js/samples/loop-protect/expected.js

@@ -67,6 +67,8 @@ function foo() {
 }
 
 function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots("Component", slots, []);
 	let node;
 
 	{
@@ -111,9 +113,6 @@ function instance($$self, $$props, $$invalidate) {
 		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console_1.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
-	let { $$slots = {}, $$scope } = $$props;
-	validate_slots("Component", $$slots, []);
-
 	function div_binding($$value) {
 		binding_callbacks[$$value ? "unshift" : "push"](() => {
 			node = $$value;

test/js/samples/ssr-no-oncreate-etc/expected.js

@@ -15,7 +15,7 @@ function swipe(node, callback) {
 	
 } // TODO implement
 
-const Component = create_ssr_component(($$result, $$props, $$bindings, $$slots) => {
+const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
 	onMount(() => {
 		console.log("onMount");
 	});

test/js/samples/ssr-preserve-comments/expected.js

@@ -1,7 +1,7 @@
 /* generated by Svelte vX.Y.Z */
 import { create_ssr_component } from "svelte/internal";
 
-const Component = create_ssr_component(($$result, $$props, $$bindings, $$slots) => {
+const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
 	return `<div>content</div>
 
 <div>more content</div>`;

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>