add slots option to component constructor options object

.eslintrc.js

@@ -66,6 +66,7 @@ module.exports = {
 			'svelte/internal',
 			'svelte/store',
 			'svelte/easing',
+			'svelte/slot',
 			'estree'
 		],
 		'svelte3/compiler': require('./compiler')

.gitignore

@@ -13,6 +13,7 @@ node_modules
 /motion
 /transition
 /animate
+/slot
 /scratch/
 /coverage/
 /coverage.lcov

site/content/docs/03-run-time.md

@@ -881,6 +881,7 @@ The following initialisation options can be provided:
 | `props` | `{}` | An object of properties to supply to the component
 | `hydrate` | `false` | See below
 | `intro` | `false` | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes
+| `slots` | `{}` | An object with keys - slot names, values - element or array of elements
 
 Existing children of `target` are left where they are.
 

src/runtime/internal/Component.ts

@@ -101,6 +101,9 @@ export function init(component, options, instance, create_fragment, not_equal, p
 	set_current_component(component);
 
 	const prop_values = options.props || {};
+	if (options.slots) {
+		prop_values.$$slots = options.slots;
+	}
 
 	const $$: T$$ = component.$$ = {
 		fragment: null,

src/runtime/slot/index.ts

@@ -0,0 +1,35 @@
+import { noop, insert, detach } from 'svelte/internal';
+
+function create_root_slot_fn(elements) {
+	return function create_root_slot() {
+		return {
+			c: noop,
+
+			m: function mount(target, anchor) {
+				elements.forEach(element => {
+					insert(target, element, anchor);
+				});
+			},
+
+			d: function destroy(detaching) {
+				if (detaching) {
+					elements.forEach(element => detach(element));
+				}
+			},
+
+			l: noop,
+		};
+	};
+}
+
+export function createSlot(slots) {
+	const root_slots = {};
+	for (const slot_name in slots) {
+		let elements = slots[slot_name];
+		if (!Array.isArray(elements)) {
+			elements = [elements];
+		}
+		root_slots[slot_name] = [create_root_slot_fn(elements)];
+	}
+	return root_slots;
+}

test/js/samples/root-component-slot/expected.js

@@ -0,0 +1,97 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	create_slot,
+	detach,
+	element,
+	get_slot_changes,
+	get_slot_context,
+	init,
+	insert,
+	safe_not_equal,
+	space,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+const get_slot1_slot_changes = dirty => ({});
+const get_slot1_slot_context = ctx => ({});
+
+function create_fragment(ctx) {
+	let div;
+	let t;
+	let current;
+	const default_slot_template = /*$$slots*/ ctx[1].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[0], null);
+	const slot1_slot_template = /*$$slots*/ ctx[1].slot1;
+	const slot1_slot = create_slot(slot1_slot_template, ctx, /*$$scope*/ ctx[0], get_slot1_slot_context);
+
+	return {
+		c() {
+			div = element("div");
+			if (default_slot) default_slot.c();
+			t = space();
+			if (slot1_slot) slot1_slot.c();
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			if (default_slot) {
+				default_slot.m(div, null);
+			}
+
+			append(div, t);
+
+			if (slot1_slot) {
+				slot1_slot.m(div, null);
+			}
+
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (default_slot && default_slot.p && dirty & /*$$scope*/ 1) {
+				default_slot.p(get_slot_context(default_slot_template, ctx, /*$$scope*/ ctx[0], null), get_slot_changes(default_slot_template, /*$$scope*/ ctx[0], dirty, null));
+			}
+
+			if (slot1_slot && slot1_slot.p && dirty & /*$$scope*/ 1) {
+				slot1_slot.p(get_slot_context(slot1_slot_template, ctx, /*$$scope*/ ctx[0], get_slot1_slot_context), get_slot_changes(slot1_slot_template, /*$$scope*/ ctx[0], dirty, get_slot1_slot_changes));
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(default_slot, local);
+			transition_in(slot1_slot, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot, local);
+			transition_out(slot1_slot, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (default_slot) default_slot.d(detaching);
+			if (slot1_slot) slot1_slot.d(detaching);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { $$slots = {}, $$scope } = $$props;
+
+	$$self.$set = $$props => {
+		if ("$$scope" in $$props) $$invalidate(0, $$scope = $$props.$$scope);
+	};
+
+	return [$$scope, $$slots];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;

test/js/samples/root-component-slot/input.svelte

@@ -0,0 +1,4 @@
+<div>
+	<slot />
+	<slot name="slot1" />
+</div>

test/runtime/index.js

@@ -159,12 +159,13 @@ describe("runtime", () => {
 						warnings.push(warning);
 					};
 
+					const configOptions = typeof config.options === 'function' ? config.options(window) : config.options;
 					const options = Object.assign({}, {
 						target,
 						hydrate,
 						props: config.props,
 						intro: config.intro
-					}, config.options || {});
+					}, configOptions || {});
 
 					const component = new SvelteComponent(options);
 

test/runtime/samples/root-component-slot/_config.js

@@ -0,0 +1,50 @@
+import { createSlot } from 'svelte/slot';
+
+export default {
+	options(window) {
+		const default_el = window.document.createElement('div');
+		default_el.innerHTML = 'default slot custom content';
+		const my_slot_el1 = window.document.createElement('div');
+		my_slot_el1.innerHTML = 'first my slot element';
+		const my_slot_el2 = window.document.createElement('div');
+		my_slot_el2.innerHTML = 'second my slot element';
+		const my_slot_els = [my_slot_el1, my_slot_el2];
+		const another_slot_el = window.document.createTextNode('another slot');
+		const conditional_slot_el = window.document.createElement('div');
+		conditional_slot_el.innerHTML = 'conditional slot';
+		return {
+			slots: createSlot({
+				default: default_el,
+				'my-slot': my_slot_els,
+				'another-slot-with-content': another_slot_el,
+				'conditional-slot': conditional_slot_el,
+			}),
+		};
+	},
+
+	test({ assert, component, target }) {
+		assert.htmlEqual(target.innerHTML, `
+			default slot: <div>default slot custom content</div>
+			named slot: <div>first my slot element</div><div>second my slot element</div>
+			slot with default content: default content
+			another slot with content: another slot
+			conditional slot: <div>conditional slot</div>
+			conditional slot with content: default content`);
+
+		component.is_slot_visible = false;
+		assert.htmlEqual(target.innerHTML, `
+			default slot: <div>default slot custom content</div>
+			named slot: <div>first my slot element</div><div>second my slot element</div>
+			slot with default content: default content
+			another slot with content: another slot`);
+
+		component.is_slot_visible = true;
+		assert.htmlEqual(target.innerHTML, `
+			default slot: <div>default slot custom content</div>
+			named slot: <div>first my slot element</div><div>second my slot element</div>
+			slot with default content: default content
+			another slot with content: another slot
+			conditional slot: <div>conditional slot</div>
+			conditional slot with content: default content`);
+	}
+};

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

@@ -0,0 +1,11 @@
+default slot: <slot />
+named slot: <slot name="my-slot" />
+slot with default content: <slot name="slot-with-content">default content</slot>
+another slot with content: <slot name="another-slot-with-content">default content</slot>
+{#if is_slot_visible}
+	conditional slot: <slot name="conditional-slot" />
+	conditional slot with content: <slot name="conditional-slot-with-content">default content</slot>
+{/if}
+<script>
+export let is_slot_visible = true;
+</script>