From 00859e70140e247783452d83f3cc91fa53047409 Mon Sep 17 00:00:00 2001 From: Anton Samoylov Date: Sun, 5 May 2019 09:19:43 +0400 Subject: [PATCH 1/6] add slots option to component constructor options object --- site/content/docs/03-run-time.md | 1 + src/compiler/compile/render_dom/index.ts | 5 + src/runtime/internal/utils.ts | 36 ++++++ .../samples/root-component-slot/expected.js | 118 ++++++++++++++++++ .../samples/root-component-slot/input.svelte | 4 + test/runtime/index.js | 3 +- .../samples/root-component-slot/_config.js | 48 +++++++ .../samples/root-component-slot/main.svelte | 11 ++ 8 files changed, 225 insertions(+), 1 deletion(-) create mode 100644 test/js/samples/root-component-slot/expected.js create mode 100644 test/js/samples/root-component-slot/input.svelte create mode 100644 test/runtime/samples/root-component-slot/_config.js create mode 100644 test/runtime/samples/root-component-slot/main.svelte diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index c75ec694d932..bfbb31ab79ec 100644 --- a/site/content/docs/03-run-time.md +++ b/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. diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index a7a55b884317..5a0114a9991b 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -496,6 +496,11 @@ 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/utils.ts b/src/runtime/internal/utils.ts index 4ba7e18c153a..7f212de4834c 100644 --- a/src/runtime/internal/utils.ts +++ b/src/runtime/internal/utils.ts @@ -1,3 +1,5 @@ +import { insert, detach } from './dom'; + export function noop() {} export const identity = x => x; @@ -127,4 +129,38 @@ 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; +} + +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; } \ No newline at end of file diff --git a/test/js/samples/root-component-slot/expected.js b/test/js/samples/root-component-slot/expected.js new file mode 100644 index 000000000000..1397300aceba --- /dev/null +++ b/test/js/samples/root-component-slot/expected.js @@ -0,0 +1,118 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + append, + create_root_component_slots, + create_slot, + detach, + element, + get_slot_changes, + get_slot_context, + init, + insert, + safe_not_equal, + space +} from "svelte/internal"; + +const get_slot1_slot_changes = ({}) => ({}); +const get_slot1_slot_context = ({}) => ({}); + +function create_fragment(ctx) { + var div, t, current; + + const default_slot_1 = ctx.$$slots.default; + const default_slot = create_slot(default_slot_1, ctx, null); + + const slot1_slot_1 = ctx.$$slots.slot1; + const slot1_slot = create_slot(slot1_slot_1, ctx, get_slot1_slot_context); + + return { + c() { + div = element("div"); + + if (default_slot) default_slot.c(); + t = space(); + + if (slot1_slot) slot1_slot.c(); + }, + + l(nodes) { + if (default_slot) default_slot.l(div_nodes); + + if (slot1_slot) slot1_slot.l(div_nodes); + }, + + 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(changed, ctx) { + if (default_slot && default_slot.p && changed.$$scope) { + default_slot.p(get_slot_changes(default_slot_1, ctx, changed,), get_slot_context(default_slot_1, ctx, null)); + } + + if (slot1_slot && slot1_slot.p && changed.$$scope) { + slot1_slot.p(get_slot_changes(slot1_slot_1, ctx, changed, get_slot1_slot_changes), get_slot_context(slot1_slot_1, ctx, get_slot1_slot_context)); + } + }, + + i(local) { + if (current) return; + if (default_slot && default_slot.i) default_slot.i(local); + if (slot1_slot && slot1_slot.i) slot1_slot.i(local); + current = true; + }, + + o(local) { + if (default_slot && default_slot.o) default_slot.o(local); + if (slot1_slot && slot1_slot.o) slot1_slot.o(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('$$scope', $$scope = $$props.$$scope); + }; + + return { $$slots, $$scope }; +} + +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, []); + } +} + +export default Component; diff --git a/test/js/samples/root-component-slot/input.svelte b/test/js/samples/root-component-slot/input.svelte new file mode 100644 index 000000000000..0507e5c658b8 --- /dev/null +++ b/test/js/samples/root-component-slot/input.svelte @@ -0,0 +1,4 @@ +
+ + +
diff --git a/test/runtime/index.js b/test/runtime/index.js index f070eb818551..c16cdecc0b08 100644 --- a/test/runtime/index.js +++ b/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); diff --git a/test/runtime/samples/root-component-slot/_config.js b/test/runtime/samples/root-component-slot/_config.js new file mode 100644 index 000000000000..d8f1b2ea3086 --- /dev/null +++ b/test/runtime/samples/root-component-slot/_config.js @@ -0,0 +1,48 @@ +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: { + 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:
default slot custom content
+ named slot:
first my slot element
second my slot element
+ slot with default content: default content + another slot with content: another slot + conditional slot:
conditional slot
+ conditional slot with content: default content`); + + component.is_slot_visible = false; + assert.htmlEqual(target.innerHTML, ` + default slot:
default slot custom content
+ named slot:
first my slot element
second my slot element
+ slot with default content: default content + another slot with content: another slot`); + + component.is_slot_visible = true; + assert.htmlEqual(target.innerHTML, ` + default slot:
default slot custom content
+ named slot:
first my slot element
second my slot element
+ slot with default content: default content + another slot with content: another slot + conditional slot:
conditional slot
+ conditional slot with content: default content`); + } +}; diff --git a/test/runtime/samples/root-component-slot/main.svelte b/test/runtime/samples/root-component-slot/main.svelte new file mode 100644 index 000000000000..3b1b010fce56 --- /dev/null +++ b/test/runtime/samples/root-component-slot/main.svelte @@ -0,0 +1,11 @@ +default slot: +named slot: +slot with default content: default content +another slot with content: default content +{#if is_slot_visible} + conditional slot: + conditional slot with content: default content +{/if} + From 188edd2464bb545584f49b2f9e72a318bcc3579b Mon Sep 17 00:00:00 2001 From: Anton Samoylov Date: Sat, 27 Jul 2019 17:37:34 +0400 Subject: [PATCH 2/6] fix test after merge, move create_root_component_slots from utils.ts to Component.ts --- src/runtime/internal/Component.ts | 36 +++++++++- src/runtime/internal/utils.ts | 36 ---------- .../samples/root-component-slot/expected.js | 69 ++++++++----------- 3 files changed, 63 insertions(+), 78 deletions(-) diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 10588a08046b..9fc44885415e 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 } from './dom'; +import { children, insert, detach } from './dom'; import { transition_in } from './transitions'; interface Fragment { @@ -226,3 +226,37 @@ 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 7f212de4834c..5791cbbe3030 100644 --- a/src/runtime/internal/utils.ts +++ b/src/runtime/internal/utils.ts @@ -1,5 +1,3 @@ -import { insert, detach } from './dom'; - export function noop() {} export const identity = x => x; @@ -130,37 +128,3 @@ 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; } - -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; -} \ No newline at end of file diff --git a/test/js/samples/root-component-slot/expected.js b/test/js/samples/root-component-slot/expected.js index 1397300aceba..de22b52083e9 100644 --- a/test/js/samples/root-component-slot/expected.js +++ b/test/js/samples/root-component-slot/expected.js @@ -11,37 +11,30 @@ import { init, insert, safe_not_equal, - space + space, + transition_in, + transition_out } from "svelte/internal"; -const get_slot1_slot_changes = ({}) => ({}); -const get_slot1_slot_context = ({}) => ({}); +const get_slot1_slot_changes = dirty => ({}); +const get_slot1_slot_context = ctx => ({}); function create_fragment(ctx) { - var div, t, current; - - const default_slot_1 = ctx.$$slots.default; - const default_slot = create_slot(default_slot_1, ctx, null); - - const slot1_slot_1 = ctx.$$slots.slot1; - const slot1_slot = create_slot(slot1_slot_1, ctx, get_slot1_slot_context); + 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(); }, - - l(nodes) { - if (default_slot) default_slot.l(div_nodes); - - if (slot1_slot) slot1_slot.l(div_nodes); - }, - m(target, anchor) { insert(target, div, anchor); @@ -57,37 +50,29 @@ function create_fragment(ctx) { current = true; }, - - p(changed, ctx) { - if (default_slot && default_slot.p && changed.$$scope) { - default_slot.p(get_slot_changes(default_slot_1, ctx, changed,), get_slot_context(default_slot_1, ctx, null)); + 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 && changed.$$scope) { - slot1_slot.p(get_slot_changes(slot1_slot_1, ctx, changed, get_slot1_slot_changes), get_slot_context(slot1_slot_1, ctx, get_slot1_slot_context)); + 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; - if (default_slot && default_slot.i) default_slot.i(local); - if (slot1_slot && slot1_slot.i) slot1_slot.i(local); + transition_in(default_slot, local); + transition_in(slot1_slot, local); current = true; }, - o(local) { - if (default_slot && default_slot.o) default_slot.o(local); - if (slot1_slot && slot1_slot.o) slot1_slot.o(local); + transition_out(default_slot, local); + transition_out(slot1_slot, local); current = false; }, - d(detaching) { - if (detaching) { - detach(div); - } - + if (detaching) detach(div); if (default_slot) default_slot.d(detaching); - if (slot1_slot) slot1_slot.d(detaching); } }; @@ -97,22 +82,24 @@ function instance($$self, $$props, $$invalidate) { let { $$slots = {}, $$scope } = $$props; $$self.$set = $$props => { - if ('$$scope' in $$props) $$invalidate('$$scope', $$scope = $$props.$$scope); + if ("$$scope" in $$props) $$invalidate(0, $$scope = $$props.$$scope); }; - return { $$slots, $$scope }; + return [$$scope, $$slots]; } 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, []); + + init(this, options, instance, create_fragment, safe_not_equal, {}); } } -export default Component; +export default Component; \ No newline at end of file From 969ad237b110e0bb4cce53bff88012771241709a Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Wed, 12 Feb 2020 23:55:00 +0800 Subject: [PATCH 3/6] 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, - }, + }), }; }, From 6ec1d4ebb29e817a0ed5f408eb104f7f82ecdb18 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Thu, 1 Oct 2020 08:57:40 +0800 Subject: [PATCH 4/6] Update src/runtime/slot/index.ts Co-authored-by: Luke Edwards --- src/runtime/slot/index.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/runtime/slot/index.ts b/src/runtime/slot/index.ts index f80e0543efdb..deef2f1bb59f 100644 --- a/src/runtime/slot/index.ts +++ b/src/runtime/slot/index.ts @@ -22,14 +22,11 @@ function create_root_slot_fn(elements) { }; } -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)]; +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])]; } - return root_slots; + return slots; } From f9cd7f784ad9b79e5f634c0d8e25acc5038888b4 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Thu, 1 Oct 2020 08:57:50 +0800 Subject: [PATCH 5/6] Update src/runtime/slot/index.ts Co-authored-by: Luke Edwards --- src/runtime/slot/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/runtime/slot/index.ts b/src/runtime/slot/index.ts index deef2f1bb59f..b2036c5cb604 100644 --- a/src/runtime/slot/index.ts +++ b/src/runtime/slot/index.ts @@ -1,7 +1,7 @@ import { noop, insert, detach } from 'svelte/internal'; function create_root_slot_fn(elements) { - return function create_root_slot() { + return function () { return { c: noop, From 4ed67ad54aab456ff67bce8c7687fecb7580d02e Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Thu, 1 Oct 2020 08:57:58 +0800 Subject: [PATCH 6/6] Update src/runtime/slot/index.ts Co-authored-by: Luke Edwards --- src/runtime/slot/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/runtime/slot/index.ts b/src/runtime/slot/index.ts index b2036c5cb604..37e526083bb5 100644 --- a/src/runtime/slot/index.ts +++ b/src/runtime/slot/index.ts @@ -13,7 +13,7 @@ function create_root_slot_fn(elements) { d: function destroy(detaching) { if (detaching) { - elements.forEach(element => detach(element)); + elements.forEach(detach); } },