From 969ad237b110e0bb4cce53bff88012771241709a Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Wed, 12 Feb 2020 23:55:00 +0800 Subject: [PATCH] feat: createSlot util --- .eslintrc.js | 1 + .gitignore | 1 + src/compiler/compile/render_dom/index.ts | 5 --- src/runtime/internal/Component.ts | 39 ++----------------- src/runtime/internal/utils.ts | 2 +- src/runtime/slot/index.ts | 35 +++++++++++++++++ .../samples/root-component-slot/expected.js | 8 ---- .../samples/root-component-slot/_config.js | 6 ++- 8 files changed, 46 insertions(+), 51 deletions(-) create mode 100644 src/runtime/slot/index.ts diff --git a/.eslintrc.js b/.eslintrc.js index 946a157e40c8..752db4472a2f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -66,6 +66,7 @@ module.exports = { 'svelte/internal', 'svelte/store', 'svelte/easing', + 'svelte/slot', 'estree' ], 'svelte3/compiler': require('./compiler') diff --git a/.gitignore b/.gitignore index 7a1424492996..a47ff9e59b1c 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,7 @@ node_modules /motion /transition /animate +/slot /scratch/ /coverage/ /coverage.lcov diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 5a0114a9991b..a7a55b884317 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/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 });`} diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 9fc44885415e..c553547bd548 100644 --- a/src/runtime/internal/Component.ts +++ b/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; -} diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts index 5791cbbe3030..4ba7e18c153a 100644 --- a/src/runtime/internal/utils.ts +++ b/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; -} +} \ No newline at end of file diff --git a/src/runtime/slot/index.ts b/src/runtime/slot/index.ts new file mode 100644 index 000000000000..f80e0543efdb --- /dev/null +++ b/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; +} diff --git a/test/js/samples/root-component-slot/expected.js b/test/js/samples/root-component-slot/expected.js index de22b52083e9..1b689aaff8a1 100644 --- a/test/js/samples/root-component-slot/expected.js +++ b/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, {}); } } diff --git a/test/runtime/samples/root-component-slot/_config.js b/test/runtime/samples/root-component-slot/_config.js index d8f1b2ea3086..7305b6d5af8e 100644 --- a/test/runtime/samples/root-component-slot/_config.js +++ b/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, - }, + }), }; },