From 4468e1515f1823d189bc67368b9ebc46b2d9178e Mon Sep 17 00:00:00 2001 From: adiguba Date: Fri, 14 Oct 2022 22:56:50 +0200 Subject: [PATCH] fix : no update() when tag is non-dynamic --- .../render_dom/wrappers/Element/index.ts | 115 +++++++++--------- .../js/samples/svelte-element-svg/expected.js | 28 +---- 2 files changed, 61 insertions(+), 82 deletions(-) diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 733a91ef3e..cdf35e7d67 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -280,9 +280,7 @@ export default class ElementWrapper extends Wrapper { (x`#nodes` as unknown) as Identifier ); - const previous_tag = block.get_unique_name('previous_tag'); const tag = this.node.tag_expr.manipulate(block); - block.add_variable(previous_tag, tag); block.chunks.init.push(b` ${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`} @@ -304,63 +302,68 @@ export default class ElementWrapper extends Wrapper { if (${this.var}) ${this.var}.m(${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'}); `); - const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes); - const has_transitions = !!(this.node.intro || this.node.outro); - const not_equal = this.renderer.component.component_options.immutable ? x`@not_equal` : x`@safe_not_equal`; - - const tag_will_be_removed = block.get_unique_name('tag_will_be_removed'); - if (has_transitions) { - block.add_variable(tag_will_be_removed, x`false`); - } - - block.chunks.update.push(b` - if (${tag}) { - if (!${previous_tag}) { - ${this.var} = ${this.child_dynamic_element_block.name}(#ctx); - ${previous_tag} = ${tag}; - ${this.var}.c(); - ${has_transitions && b`@transition_in(${this.var})`} - ${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor}); - } else if (${not_equal}(${previous_tag}, ${tag})) { - ${this.var}.d(1); - ${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`} - ${this.renderer.options.dev && this.node.children.length > 0 && b`@validate_void_dynamic_element(${tag});`} - ${this.var} = ${this.child_dynamic_element_block.name}(#ctx); - ${previous_tag} = ${tag}; - ${this.var}.c(); - ${has_transitions && b`if (${tag_will_be_removed}) { - ${tag_will_be_removed} = false; - @transition_in(${this.var}) - }`} - ${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor}); - } else { - ${has_transitions && b`if (${tag_will_be_removed}) { - ${tag_will_be_removed} = false; - @transition_in(${this.var}) - }`} - ${this.var}.p(#ctx, #dirty); - } - } else if (${previous_tag}) { - ${ - has_transitions - ? b` - ${tag_will_be_removed} = true; - @group_outros(); - @transition_out(${this.var}, 1, 1, () => { + if (this.node.tag_expr.dynamic_dependencies().length == 0) { + block.chunks.update.push(b`if (${this.var}) ${this.var}.p(#ctx, #dirty)`); + } else { + const previous_tag = block.get_unique_name('previous_tag'); + block.add_variable(previous_tag, tag); + const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes); + const has_transitions = !!(this.node.intro || this.node.outro); + const not_equal = this.renderer.component.component_options.immutable ? x`@not_equal` : x`@safe_not_equal`; + + const tag_will_be_removed = block.get_unique_name('tag_will_be_removed'); + if (has_transitions) { + block.add_variable(tag_will_be_removed, x`false`); + } + block.chunks.update.push(b` + if (${tag}) { + if (!${previous_tag}) { + ${this.var} = ${this.child_dynamic_element_block.name}(#ctx); + ${previous_tag} = ${tag}; + ${this.var}.c(); + ${has_transitions && b`@transition_in(${this.var})`} + ${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor}); + } else if (${not_equal}(${previous_tag}, ${tag})) { + ${this.var}.d(1); + ${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`} + ${this.renderer.options.dev && this.node.children.length > 0 && b`@validate_void_dynamic_element(${tag});`} + ${this.var} = ${this.child_dynamic_element_block.name}(#ctx); + ${previous_tag} = ${tag}; + ${this.var}.c(); + ${has_transitions && b`if (${tag_will_be_removed}) { + ${tag_will_be_removed} = false; + @transition_in(${this.var}) + }`} + ${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor}); + } else { + ${has_transitions && b`if (${tag_will_be_removed}) { + ${tag_will_be_removed} = false; + @transition_in(${this.var}) + }`} + ${this.var}.p(#ctx, #dirty); + } + } else if (${previous_tag}) { + ${ + has_transitions + ? b` + ${tag_will_be_removed} = true; + @group_outros(); + @transition_out(${this.var}, 1, 1, () => { + ${this.var} = null; + ${previous_tag} = ${tag}; + ${tag_will_be_removed} = false; + }); + @check_outros(); + ` + : b` + ${this.var}.d(1); ${this.var} = null; ${previous_tag} = ${tag}; - ${tag_will_be_removed} = false; - }); - @check_outros(); - ` - : b` - ${this.var}.d(1); - ${this.var} = null; - ${previous_tag} = ${tag}; - ` + ` + } } - } - `); + `); + } if (this.child_dynamic_element_block.has_intros) { block.chunks.intro.push(b`@transition_in(${this.var});`); diff --git a/test/js/samples/svelte-element-svg/expected.js b/test/js/samples/svelte-element-svg/expected.js index 36ce583ef1..a230afe789 100644 --- a/test/js/samples/svelte-element-svg/expected.js +++ b/test/js/samples/svelte-element-svg/expected.js @@ -4,7 +4,6 @@ import { append, assign, detach, - empty, get_spread_update, init, insert, @@ -60,44 +59,21 @@ function create_dynamic_element(ctx) { } function create_fragment(ctx) { - let previous_tag = "svg"; - let svelte_element1_anchor; let svelte_element1 = "svg" && create_dynamic_element(ctx); return { c() { if (svelte_element1) svelte_element1.c(); - svelte_element1_anchor = empty(); }, m(target, anchor) { if (svelte_element1) svelte_element1.m(target, anchor); - insert(target, svelte_element1_anchor, anchor); }, p(ctx, [dirty]) { - if ("svg") { - if (!previous_tag) { - svelte_element1 = create_dynamic_element(ctx); - svelte_element1.c(); - svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor); - } else if (safe_not_equal(previous_tag, "svg")) { - svelte_element1.d(1); - svelte_element1 = create_dynamic_element(ctx); - svelte_element1.c(); - svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor); - } else { - svelte_element1.p(ctx, dirty); - } - } else if (previous_tag) { - svelte_element1.d(1); - svelte_element1 = null; - } - - previous_tag = "svg"; + if (svelte_element1) svelte_element1.p(ctx, dirty); }, i: noop, o: noop, d(detaching) { - if (detaching) detach(svelte_element1_anchor); if (svelte_element1) svelte_element1.d(detaching); } }; @@ -110,4 +86,4 @@ class Component extends SvelteComponent { } } -export default Component; +export default Component; \ No newline at end of file