diff --git a/src/compiler/compile/render_dom/Renderer.ts b/src/compiler/compile/render_dom/Renderer.ts index 6de1c92f07..ffa293279b 100644 --- a/src/compiler/compile/render_dom/Renderer.ts +++ b/src/compiler/compile/render_dom/Renderer.ts @@ -22,6 +22,7 @@ export default class Renderer { context: ContextMember[] = []; context_lookup: Map = new Map(); context_overflow: boolean; + is_update: Node; blocks: Array = []; readonly: Set = new Set(); meta_bindings: Array = []; // initial values for e.g. window.innerWidth, if there's a meta tag @@ -82,6 +83,9 @@ export default class Renderer { ); this.context_overflow = this.context.length > 31; + this.is_update = this.context_overflow + ? x`#dirty[0] !== -1` + : x`#dirty !== -1`; // TODO messy this.blocks.forEach(block => { diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts index 7244d9203d..1ae6b0cd09 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts @@ -125,12 +125,8 @@ export default class BindingWrapper { } case 'textContent': - update_conditions.push(x`${this.snippet} !== ${parent.var}.textContent`); - mount_conditions.push(x`${this.snippet} !== void 0`); - break; - case 'innerHTML': - update_conditions.push(x`${this.snippet} !== ${parent.var}.innerHTML`); + update_conditions.push(x`${this.parent.renderer.is_update} && ${this.snippet} !== ${parent.var}.${this.node.name}`); mount_conditions.push(x`${this.snippet} !== void 0`); break; diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts index dbf244b35f..6c3b8847db 100644 --- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/IfBlock.ts @@ -500,7 +500,7 @@ export default class IfBlockWrapper extends Wrapper { render_simple( block: Block, - _parent_node: Identifier, + parent_node: Identifier, _parent_nodes: Identifier, dynamic, { name, anchor, if_exists_condition, has_transitions }, @@ -509,7 +509,8 @@ export default class IfBlockWrapper extends Wrapper { const branch = this.branches[0]; if (branch.snippet) block.add_variable(branch.condition, branch.snippet); - block.add_variable(name); + + let initial = null; if (branch.dependencies.length > 0) { const update_mount_node = this.get_update_mount_node(anchor); @@ -569,8 +570,19 @@ export default class IfBlockWrapper extends Wrapper { block.chunks.update.push(b` if (${branch.condition}) ${name}.p(#ctx, #dirty); `); + } else { + initial = x`${branch.block.name}(#ctx)`; + + const initial_mount_node = parent_node || '#target'; + const anchor_node = parent_node ? 'null' : 'anchor'; + + block.chunks.mount.push( + b`if (${name}) ${name}.m(${initial_mount_node}, ${anchor_node});` + ); } + block.add_variable(name, initial); + if (if_exists_condition) { block.chunks.destroy.push(b` if (${if_exists_condition}) ${name}.d(${detaching});