From 00859e70140e247783452d83f3cc91fa53047409 Mon Sep 17 00:00:00 2001 From: Anton Samoylov Date: Sun, 5 May 2019 09:19:43 +0400 Subject: [PATCH] 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} +