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 @@ +
+ + +
diff --git a/test/runtime/index.js b/test/runtime/index.js index 579dc665c6..310c4cbba2 100644 --- a/test/runtime/index.js +++ b/test/runtime/index.js @@ -134,12 +134,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 0000000000..d8f1b2ea30 --- /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 0000000000..3b1b010fce --- /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} +