diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts index c843594599..f5c4281710 100644 --- a/src/compiler/compile/render_dom/Block.ts +++ b/src/compiler/compile/render_dom/Block.ts @@ -419,8 +419,8 @@ export default class Block { return body; } - has_content() { - return this.first || + has_content(): boolean { + return !!this.first || this.event_listeners.length > 0 || this.chunks.intro.length > 0 || this.chunks.outro.length > 0 || diff --git a/src/compiler/compile/render_dom/Renderer.ts b/src/compiler/compile/render_dom/Renderer.ts index e933faf97a..ca93c51060 100644 --- a/src/compiler/compile/render_dom/Renderer.ts +++ b/src/compiler/compile/render_dom/Renderer.ts @@ -284,4 +284,8 @@ export default class Renderer { return node; } + + remove_block(block: Block | Node | Node[]) { + this.blocks.splice(this.blocks.indexOf(block), 1); + } } diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts index 8c8bd70696..4b1e787cbe 100644 --- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts +++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts @@ -155,6 +155,7 @@ export default class InlineComponentWrapper extends Wrapper { // removing empty slot for (const slot of this.slots.keys()) { if (!this.slots.get(slot).block.has_content()) { + this.renderer.remove_block(this.slots.get(slot).block); this.slots.delete(slot); } } diff --git a/src/compiler/compile/render_dom/wrappers/Slot.ts b/src/compiler/compile/render_dom/wrappers/Slot.ts index f287198132..1111a7cffe 100644 --- a/src/compiler/compile/render_dom/wrappers/Slot.ts +++ b/src/compiler/compile/render_dom/wrappers/Slot.ts @@ -114,18 +114,23 @@ export default class SlotWrapper extends Wrapper { get_slot_context_fn = 'null'; } + let has_fallback = !!this.fallback; if (this.fallback) { this.fragment.render(this.fallback, null, x`#nodes` as Identifier); + has_fallback = this.fallback.has_content(); + if (!has_fallback) { + renderer.remove_block(this.fallback); + } } const slot = block.get_unique_name(`${sanitize(slot_name)}_slot`); const slot_definition = block.get_unique_name(`${sanitize(slot_name)}_slot_template`); - const slot_or_fallback = this.fallback ? block.get_unique_name(`${sanitize(slot_name)}_slot_or_fallback`) : slot; + const slot_or_fallback = has_fallback ? block.get_unique_name(`${sanitize(slot_name)}_slot_or_fallback`) : slot; block.chunks.init.push(b` const ${slot_definition} = ${renderer.reference('$$slots')}.${slot_name}; const ${slot} = @create_slot(${slot_definition}, #ctx, ${renderer.reference('$$scope')}, ${get_slot_context_fn}); - ${this.fallback ? b`const ${slot_or_fallback} = ${slot} || ${this.fallback.name}(#ctx);` : null} + ${has_fallback ? b`const ${slot_or_fallback} = ${slot} || ${this.fallback.name}(#ctx);` : null} `); block.chunks.create.push( @@ -161,7 +166,7 @@ export default class SlotWrapper extends Wrapper { const dynamic_dependencies = Array.from(this.dependencies).filter(is_dependency_dynamic); - const fallback_dynamic_dependencies = this.fallback + const fallback_dynamic_dependencies = has_fallback ? Array.from(this.fallback.dependencies).filter(is_dependency_dynamic) : []; @@ -173,7 +178,7 @@ export default class SlotWrapper extends Wrapper { ); } `; - const fallback_update = this.fallback && fallback_dynamic_dependencies.length > 0 && b` + const fallback_update = has_fallback && fallback_dynamic_dependencies.length > 0 && b` if (${slot_or_fallback} && ${slot_or_fallback}.p && ${renderer.dirty(fallback_dynamic_dependencies)}) { ${slot_or_fallback}.p(#ctx, #dirty); }