refactor and expose createSlot, slot to svelte top import

Author: truongsinh

package.json

@@ -51,10 +51,6 @@
       "import": "./store/index.mjs",
       "require": "./store/index.js"
     },
-    "./slot": {
-      "import": "./slot/index.mjs",
-      "require": "./slot/index.js"
-    },
     "./transition": {
       "import": "./transition/index.mjs",
       "require": "./transition/index.js"

src/runtime/index.ts

@@ -11,3 +11,5 @@ export {
 	createEventDispatcher,
 	SvelteComponentDev as SvelteComponent
 } from 'svelte/internal';
+
+export { createSlot, slot } from 'svelte/slot';

src/runtime/internal/Component.ts

@@ -4,20 +4,23 @@ import { blank_object, is_empty, is_function, run, run_all, noop } from './utils
 import { children, detach } from './dom';
 import { transition_in } from './transitions';
 
-interface Fragment {
-	key: string|null;
-	first: null;
+export interface FragmentMinimal {
 	/* create  */ c: () => void;
 	/* claim   */ l: (nodes: any) => void;
+	/* mount   */ m: (target: HTMLElement, anchor: HTMLElement) => void;
+	/* destroy */ d: (detaching: 0|1) => void;
+
+}
+interface Fragment extends FragmentMinimal {
+	key: string|null;
+	first: null;
 	/* hydrate */ h: () => void;
-	/* mount   */ m: (target: HTMLElement, anchor: any) => void;
 	/* update  */ p: (ctx: any, dirty: any) => void;
 	/* measure */ r: () => void;
 	/* fix     */ f: () => void;
 	/* animate */ a: () => void;
 	/* intro   */ i: (local: any) => void;
 	/* outro   */ o: (local: any) => void;
-	/* destroy */ d: (detaching: 0|1) => void;
 }
 interface T$$ {
 	dirty: number[];
@@ -96,7 +99,26 @@ function make_dirty(component: SvelteComponent, i) {
 	component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
 }
 
-export function init(component: SvelteComponent, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
+export type Props = Record<string, any>;
+
+export type SvelteSlotOptions = {
+	props?: Props;
+}
+
+export type SvelteComponentOptions = {
+	target: Element;
+	anchor?: Element;
+	hydrate?: boolean;
+	intro?: boolean;
+	slots?: unknown;
+} & SvelteSlotOptions;
+
+export type SvelteComponentOptionsPrivate = {
+	target?: Element;
+	$$inline?: boolean;
+} & SvelteComponentOptions;
+
+export function init(component: SvelteComponent, options: SvelteComponentOptions, instance, create_fragment, not_equal, props: Props, dirty = [-1]) {
 	const parent_component = current_component;
 	set_current_component(component);
 
@@ -167,11 +189,7 @@ export function init(component: SvelteComponent, options, instance, create_fragm
 	set_current_component(parent_component);
 }
 
-export const SvelteElement = (() => {
-	if (typeof HTMLElement !== 'function') {
-		return
-	}
-	return class extends HTMLElement {
+export class SvelteElement extends HTMLElement {
 		$$: T$$;
 		$$set?: ($$props: any) => void;
 		constructor() {
@@ -214,8 +232,7 @@ export const SvelteElement = (() => {
 				this.$$.skip_bound = false;
 			}
 		}
-	};
-})();
+	}
 
 export class SvelteComponent {
 	$$: T$$;

src/runtime/internal/dev.ts

@@ -1,5 +1,5 @@
 import { custom_event, append, insert, detach, listen, attr } from './dom';
-import { SvelteComponent } from './Component';
+import { SvelteComponent, Props, SvelteComponentOptions, SvelteComponentOptionsPrivate, SvelteSlotOptions} from './Component';
 
 export function dispatch_dev<T=any>(type: string, detail?: T) {
 	document.dispatchEvent(custom_event(type, { version: '__VERSION__', ...detail }));
@@ -97,7 +97,6 @@ export function validate_slots(name, slot, keys) {
 	}
 }
 
-type Props = Record<string, any>;
 export interface SvelteComponentDev {
 	$set(props?: Props): void;
 	$on<T = any>(event: string, callback: (event: CustomEvent<T>) => void): () => void;
@@ -106,15 +105,9 @@ export interface SvelteComponentDev {
 }
 
 export class SvelteComponentDev extends SvelteComponent {
-	constructor(options: {
-		target: Element;
-		anchor?: Element;
-		props?: Props;
-		hydrate?: boolean;
-		intro?: boolean;
-		$$inline?: boolean;
-    }) {
-		if (!options || (!options.target && !options.$$inline)) {
+	constructor(options: SvelteComponentOptions) {
+		const privateOptions: SvelteComponentOptionsPrivate = options;
+		if (!privateOptions || (!privateOptions.target && !privateOptions.$$inline)) {
 			throw new Error("'target' is a required option");
 		}
 

src/runtime/slot/index.ts

@@ -1,7 +1,8 @@
-import { noop, insert, detach } from 'svelte/internal';
+import { noop, insert, detach, FragmentMinimal, SvelteSlotOptions, SvelteComponentOptionsPrivate } from 'svelte/internal';
+import { SvelteComponent } from '..';
 
-function create_root_slot_fn(elements) {
-	return function () {
+function create_root_slot_fn(elements: Node[]) {
+	return function (): FragmentMinimal {
 		return {
 			c: noop,
 
@@ -22,11 +23,19 @@ function create_root_slot_fn(elements) {
 	};
 }
 
-export function createSlot(input) {
-	var key, tmp, slots={};
-	for (key in input) {
-		tmp = input[key];
-		slots[key] = [create_root_slot_fn(Array.isArray(tmp) ? tmp : [tmp])];
+export function createSlot(input: Record<string, Node | Node[]>) {
+	const slots: Record<string, ReturnType<typeof create_root_slot_fn>[]> = {};
+	for (const key in input) {
+		const nodeOrNodeList = input[key];
+		const nodeList = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
+		slots[key] = [create_root_slot_fn(nodeList)];
 	}
 	return slots;
 }
+
+export function slot(componentClass: typeof SvelteComponent, options: SvelteSlotOptions): Element[] {
+	const wrapper = document.createElement("div");
+	new componentClass({...options, target: wrapper} as SvelteComponentOptionsPrivate) as any;
+	// @TODO this is a workaround until src/compiler/compile/render_dom/Block.ts is extended to expose created HTML element
+	return Array.from(wrapper.children);;
+}

test/helpers.ts

@@ -61,6 +61,7 @@ global.navigator = window.navigator;
 global.getComputedStyle = window.getComputedStyle;
 global.requestAnimationFrame = null; // placeholder, filled in using set_raf
 global.window = window;
+global.HTMLElement = window.HTMLElement;
 
 // add missing ecmascript globals to window
 for (const key of Object.getOwnPropertyNames(global)) {

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

@@ -1,4 +1,4 @@
-import { createSlot } from 'svelte/slot';
+import { createSlot, slot } from 'svelte';
 
 export default {
 	options(window) {
@@ -12,39 +12,41 @@ export default {
 		const another_slot_el = window.document.createTextNode('another slot');
 		const conditional_slot_el = window.document.createElement('div');
 		conditional_slot_el.innerHTML = 'conditional slot';
+		const Nested = require(`./nested.svelte`).default;
 		return {
 			slots: createSlot({
 				default: default_el,
 				'my-slot': my_slot_els,
 				'another-slot-with-content': another_slot_el,
 				'conditional-slot': conditional_slot_el,
+				'slot-with-content-from-nested': slot(Nested),
 			}),
 		};
 	},
 
 	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`);
+		const expectedHtmlWhenSlotIsVisible = `
+		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
+		slot with content from nested: <div>this div is in nested.svelte</div><span>this span is in nested.svelte</span>
+		conditional slot: <div>conditional slot</div>
+		conditional slot with content: default content`;
+
+		assert.htmlEqual(target.innerHTML, expectedHtmlWhenSlotIsVisible);
 
 		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`);
+			another slot with content: another slot
+			slot with content from nested: <div>this div is in nested.svelte</div><span>this span is in nested.svelte</span>`);
 
 		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`);
+		assert.htmlEqual(target.innerHTML, expectedHtmlWhenSlotIsVisible);
+		// @TODO once src/compiler/compile/render_dom/Block.ts is extended to expose created HTML elements
+		// and nested component can be referenced directly, test mutating nested child props
 	}
 };

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

@@ -2,6 +2,7 @@ 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>
+slot with content from nested: <slot name="slot-with-content-from-nested">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>

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

@@ -0,0 +1,2 @@
+<div>this div is in nested.svelte</div>
+<span>this span is in nested.svelte</span>