feat: createSlot util

Author: tanhauhau

.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

src/compiler/compile/render_dom/index.ts

@@ -496,11 +496,6 @@ export default function dom(
 				constructor(options) {
 					super(${options.dev && `options`});
 					${should_add_css && b`if (!@_document.getElementById("${component.stylesheet.id}-style")) ${add_css}();`}
-					${component.slots.size > 0 && b`if (options.slots) {
-						options.props = options.props || {};
-						options.props.$$scope = {};
-						options.props.$$slots = @create_root_component_slots(options.slots);
-					}`}
 					@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
 					${options.dev && b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`}
 

src/runtime/internal/Component.ts

@@ -1,7 +1,7 @@
 import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler';
 import { current_component, set_current_component } from './lifecycle';
 import { blank_object, is_function, run, run_all, noop } from './utils';
-import { children, insert, detach } from './dom';
+import { children } from './dom';
 import { transition_in } from './transitions';
 
 interface Fragment {
@@ -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,
@@ -226,37 +229,3 @@ export class SvelteComponent {
 		// overridden by instance, if it has props
 	}
 }
-
-function create_root_component_slot_fn(elements) {
-	return function create_root_component_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 create_root_component_slots(slots) {
-	const root_component_slots = {};
-	for (const slot_name in slots) {
-		let elements = slots[slot_name];
-		if (!Array.isArray(elements)) {
-			elements = [elements];
-		}
-		root_component_slots[slot_name] = [create_root_component_slot_fn(elements)];
-	}
-	return root_component_slots;
-}

src/runtime/internal/utils.ts

@@ -127,4 +127,4 @@ export const has_prop = (obj, prop) => Object.prototype.hasOwnProperty.call(obj,
 
 export function action_destroyer(action_result) {
 	return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
-}
+}

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

@@ -2,7 +2,6 @@
 import {
 	SvelteComponent,
 	append,
-	create_root_component_slots,
 	create_slot,
 	detach,
 	element,
@@ -91,13 +90,6 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-
-		if (options.slots) {
-			options.props = options.props || {};
-			options.props.$$scope = {};
-			options.props.$$slots = create_root_component_slots(options.slots);
-		}
-
 		init(this, options, instance, create_fragment, safe_not_equal, {});
 	}
 }

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

@@ -1,3 +1,5 @@
+import { createSlot } from 'svelte/slot';
+
 export default {
 	options(window) {
 		const default_el = window.document.createElement('div');
@@ -11,12 +13,12 @@ export default {
 		const conditional_slot_el = window.document.createElement('div');
 		conditional_slot_el.innerHTML = 'conditional slot';
 		return {
-			slots: {
+			slots: createSlot({
 				default: default_el,
 				'my-slot': my_slot_els,
 				'another-slot-with-content': another_slot_el,
 				'conditional-slot': conditional_slot_el,
-			},
+			}),
 		};
 	},