diff --git a/package-lock.json b/package-lock.json index 7c7363db2e..3e1cb96d40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.1.0", + "version": "3.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index dfb270dc97..cbf65e24ee 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -617,6 +617,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/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index ce2f3a0046..6020fe3f9e 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -468,11 +468,21 @@ export default function dom( } else { const superclass = options.dev ? 'SvelteComponentDev' : 'SvelteComponent'; + let slots_block = ''; + if (component.slots.size > 0) { + slots_block = '\n' + deindent` + if (options.slots) { + options.props = options.props || {}; + options.props.$$scope = {}; + options.props.$$slots = @create_root_component_slots(options.slots); + }`; + } + builder.add_block(deindent` class ${name} extends @${superclass} { constructor(options) { super(${options.dev && `options`}); - ${should_add_css && `if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`} + ${should_add_css && `if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`}${slots_block} @init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names}); ${dev_props_check} diff --git a/src/internal/utils.js b/src/internal/utils.js index 3ae62e375f..9b0ebe8de1 100644 --- a/src/internal/utils.js +++ b/src/internal/utils.js @@ -1,3 +1,5 @@ +import { insert, detach } from './dom'; + export function noop() {} export const identity = x => x; @@ -79,3 +81,37 @@ export function exclude_internal_props(props) { for (const k in props) if (k[0] !== '$') result[k] = props[k]; return result; } + +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/test/js/samples/root-component-slot/expected.js b/test/js/samples/root-component-slot/expected.js new file mode 100644 index 0000000000..1397300ace --- /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 0000000000..0507e5c658 --- /dev/null +++ b/test/js/samples/root-component-slot/input.svelte @@ -0,0 +1,4 @@ +