From b9ad98926592bd4ea688139c4f00b49b378e251f Mon Sep 17 00:00:00 2001 From: Anton Samoylov Date: Sun, 5 May 2019 09:19:43 +0400 Subject: [PATCH 1/3] add slots option to component constructor options object --- package-lock.json | 2 +- site/content/docs/03-run-time.md | 1 + src/compile/render-dom/index.ts | 12 +- src/internal/utils.js | 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 ++ 9 files changed, 232 insertions(+), 3 deletions(-) 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/package-lock.json b/package-lock.json index 7c7363db2ea0..3e1cb96d4036 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 dfb270dc979a..cbf65e24eee8 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 ce2f3a00464e..6020fe3f9e10 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 3ae62e375f81..9b0ebe8de1df 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 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 579dc665c6d5..310c4cbba2ec 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 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 81285112c9f99ae7ba618089cfef194864190f83 Mon Sep 17 00:00:00 2001 From: Anton Samoylov Date: Sat, 27 Jul 2019 17:37:34 +0400 Subject: [PATCH 2/3] 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 | 37 ------------------- .../samples/root-component-slot/expected.js | 18 +++++---- 3 files changed, 45 insertions(+), 46 deletions(-) diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 92e227e57cc6..cdae6b3191aa 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'; // eslint-disable-next-line @typescript-eslint/class-name-casing @@ -213,3 +213,37 @@ export class SvelteComponentDev extends SvelteComponent { }; } } + +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 645c3cc11dbc..08410ec33ad4 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; @@ -83,7 +81,6 @@ export function exclude_internal_props(props) { return result; } - export function once(fn) { let ran = false; return function(this: any, ...args) { @@ -92,37 +89,3 @@ export function once(fn) { fn.call(this, ...args); }; } - -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 index 1397300aceba..8571b53b98e5 100644 --- a/test/js/samples/root-component-slot/expected.js +++ b/test/js/samples/root-component-slot/expected.js @@ -11,11 +11,13 @@ 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 = () => ({}); +const get_slot1_slot_context = () => ({}); function create_fragment(ctx) { var div, t, current; @@ -60,7 +62,7 @@ function create_fragment(ctx) { 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)); + default_slot.p(get_slot_changes(default_slot_1, ctx, changed, null), get_slot_context(default_slot_1, ctx, null)); } if (slot1_slot && slot1_slot.p && changed.$$scope) { @@ -70,14 +72,14 @@ function create_fragment(ctx) { 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; }, From 26fe10f22628a546b1f71ed3a18e7692aa1a5705 Mon Sep 17 00:00:00 2001 From: Anton Samoylov Date: Mon, 9 Sep 2019 22:19:56 +0400 Subject: [PATCH 3/3] update root-component-slot test --- .../js/samples/root-component-slot/expected.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/test/js/samples/root-component-slot/expected.js b/test/js/samples/root-component-slot/expected.js index 8571b53b98e5..82c56b453f28 100644 --- a/test/js/samples/root-component-slot/expected.js +++ b/test/js/samples/root-component-slot/expected.js @@ -22,11 +22,11 @@ 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 default_slot_template = ctx.$$slots.default; + const default_slot = create_slot(default_slot_template, ctx, null); - const slot1_slot_1 = ctx.$$slots.slot1; - const slot1_slot = create_slot(slot1_slot_1, ctx, get_slot1_slot_context); + const slot1_slot_template = ctx.$$slots.slot1; + const slot1_slot = create_slot(slot1_slot_template, ctx, get_slot1_slot_context); return { c() { @@ -62,11 +62,17 @@ function create_fragment(ctx) { p(changed, ctx) { if (default_slot && default_slot.p && changed.$$scope) { - default_slot.p(get_slot_changes(default_slot_1, ctx, changed, null), get_slot_context(default_slot_1, ctx, null)); + default_slot.p( + get_slot_changes(default_slot_template, ctx, changed, null), + get_slot_context(default_slot_template, 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)); + slot1_slot.p( + get_slot_changes(slot1_slot_template, ctx, changed, get_slot1_slot_changes), + get_slot_context(slot1_slot_template, ctx, get_slot1_slot_context) + ); } },