From 370e117eea4628890e4d68618199fcbe5b845e13 Mon Sep 17 00:00:00 2001 From: Cameron Stitt Date: Sun, 30 Jun 2019 08:14:45 +1000 Subject: [PATCH 1/3] 3128: Test to show nested slots fails --- test/custom-elements/index.js | 5 +++-- .../samples/nested-slots/Block.svelte | 3 +++ .../samples/nested-slots/main.svelte | 7 +++++++ test/custom-elements/samples/nested-slots/test.js | 13 +++++++++++++ 4 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 test/custom-elements/samples/nested-slots/Block.svelte create mode 100644 test/custom-elements/samples/nested-slots/main.svelte create mode 100644 test/custom-elements/samples/nested-slots/test.js diff --git a/test/custom-elements/index.js b/test/custom-elements/index.js index 9255d33c0ef4..d6468844bfc1 100644 --- a/test/custom-elements/index.js +++ b/test/custom-elements/index.js @@ -105,8 +105,9 @@ describe('custom-elements', function() { const page = await browser.newPage(); - page.on('console', (type, ...args) => { - console[type](...args); + page.on('console', msg => { + for (let i = 0; i < msg.args().length; ++i) + console[msg.type()](`${i}: ${msg.args()[i]}`); }); try { diff --git a/test/custom-elements/samples/nested-slots/Block.svelte b/test/custom-elements/samples/nested-slots/Block.svelte new file mode 100644 index 000000000000..159e9f4de9de --- /dev/null +++ b/test/custom-elements/samples/nested-slots/Block.svelte @@ -0,0 +1,3 @@ + + +
\ No newline at end of file diff --git a/test/custom-elements/samples/nested-slots/main.svelte b/test/custom-elements/samples/nested-slots/main.svelte new file mode 100644 index 000000000000..db765d9781ef --- /dev/null +++ b/test/custom-elements/samples/nested-slots/main.svelte @@ -0,0 +1,7 @@ + + + + +Name diff --git a/test/custom-elements/samples/nested-slots/test.js b/test/custom-elements/samples/nested-slots/test.js new file mode 100644 index 000000000000..669011961120 --- /dev/null +++ b/test/custom-elements/samples/nested-slots/test.js @@ -0,0 +1,13 @@ +import * as assert from 'assert'; +import './main.svelte'; + +export default async function (target) { + target.innerHTML = ''; + const el = target.querySelector('my-app'); + + const block = el.shadowRoot.children[0]; + + const [slot] = block.children; + + assert.equal(slot.assignedNodes().length, 1); +} \ No newline at end of file From 0c397ae7c2ce29a2e1c419be8e1651ada5a1fdbf Mon Sep 17 00:00:00 2001 From: Cameron Stitt Date: Mon, 12 Aug 2019 10:42:51 +1000 Subject: [PATCH 2/3] Make passed 23673slots render through slotted option --- src/compiler/compile/render_dom/index.ts | 12 +++++++++--- .../render_dom/wrappers/InlineComponent/index.ts | 12 +++++++++--- src/runtime/internal/Component.ts | 7 ++++++- test/custom-elements/samples/nested-slots/test.js | 6 ++++-- test/js/samples/css-shadow-dom-keyframes/expected.js | 11 ++++++++++- 5 files changed, 38 insertions(+), 10 deletions(-) diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 9fdaa0cbaaa0..8d4d24c38b4f 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -460,15 +460,21 @@ export default function dom( ${dev_props_check} if (options) { + this.$$.slotted = {}; + if (options.target) { @insert(options.target, this, options.anchor); } - ${(props.length > 0 || uses_props) && deindent` if (options.props) { + for (const key in options.props.$$slots) { + this.$$.slotted[key] = options.props.$$slots[key][0](); + this.$$.slotted[key].c(); + } + ${(props.length > 0 || uses_props) && deindent` this.$set(options.props); - @flush(); - }`} + @flush();`} + } } } diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts index 9cff40ecbb50..38a0f94e1488 100644 --- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts +++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts @@ -449,9 +449,15 @@ export default class InlineComponentWrapper extends Wrapper { ); } - block.builders.mount.add_line( - `@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : 'anchor'});` - ); + if (component.compile_options.customElement) { + block.builders.mount.add_line( + `@insert(${ parent_node || '#target'}, ${name}, ${parent_node ? 'null' : 'anchor'});` + ) + } else { + block.builders.mount.add_line( + `@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : 'anchor'});` + ); + } block.builders.intro.add_block(deindent` @transition_in(${name}.$$.fragment, #local); diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 9221a683b851..929dc381b092 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -146,7 +146,7 @@ if (typeof HTMLElement !== 'undefined') { // @ts-ignore todo: improve typings for (const key in this.$$.slotted) { // @ts-ignore todo: improve typings - this.appendChild(this.$$.slotted[key]); + this.$$.slotted[key].m(this, null); } } @@ -155,6 +155,11 @@ if (typeof HTMLElement !== 'undefined') { } $destroy() { + // @ts-ignore todo: improve typings + for (const key in this.$$.slotted) { + // @ts-ignore todo: improve typings + this.$$.slotted[key].d(); + } destroy_component(this, 1); this.$destroy = noop; } diff --git a/test/custom-elements/samples/nested-slots/test.js b/test/custom-elements/samples/nested-slots/test.js index 669011961120..bea990b68140 100644 --- a/test/custom-elements/samples/nested-slots/test.js +++ b/test/custom-elements/samples/nested-slots/test.js @@ -7,7 +7,9 @@ export default async function (target) { const block = el.shadowRoot.children[0]; - const [slot] = block.children; + const h1 = block.shadowRoot.children[0]; + + const [slot] = h1.children; assert.equal(slot.assignedNodes().length, 1); -} \ No newline at end of file +} diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index 9f70b8ec66b2..497c1e49b6f5 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -44,13 +44,22 @@ class Component extends SvelteElement { init(this, { target: this.shadowRoot }, null, create_fragment, safe_not_equal, []); if (options) { + this.$$.slotted = {}; + if (options.target) { insert(options.target, this, options.anchor); } + + if (options.props) { + for (const key in options.props.$$slots) { + this.$$.slotted[key] = options.props.$$slots[key][0](); + this.$$.slotted[key].c(); + } + } } } } customElements.define("custom-element", Component); -export default Component; \ No newline at end of file +export default Component; From 063e7ced16f739f1d187717367e37b613b2252f3 Mon Sep 17 00:00:00 2001 From: Cameron Stitt Date: Mon, 12 Aug 2019 15:45:35 +1000 Subject: [PATCH 3/3] Pass context down to slot creation --- src/compiler/compile/render_dom/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 8d4d24c38b4f..37684d984cce 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -468,7 +468,8 @@ export default function dom( if (options.props) { for (const key in options.props.$$slots) { - this.$$.slotted[key] = options.props.$$slots[key][0](); + const ctx = options.props.$$scope ? options.props.$$scope.ctx : {}; + this.$$.slotted[key] = options.props.$$slots[key][0](ctx); this.$$.slotted[key].c(); } ${(props.length > 0 || uses_props) && deindent`