From f6dc86f02c782174071fa77493a3058c681b8f8b Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Tue, 28 Feb 2023 23:57:45 +0800 Subject: [PATCH] feat: optimise svelte-element output code for static tag and static attribute (#8161) * feat: optimise svelte-element output code for static tag and static attribute * Update src/compiler/compile/render_dom/wrappers/Element/index.ts Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update src/runtime/internal/dom.ts Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update src/compiler/compile/render_dom/wrappers/Element/index.ts Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * fix logic * fix pipeline errors --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --- .../render_dom/wrappers/Element/index.ts | 189 ++++++++------ src/runtime/internal/dom.ts | 4 + .../svelte-element-event-handlers/expected.js | 77 +----- .../js/samples/svelte-element-svg/expected.js | 53 +--- test/js/samples/svelte-element/expected.js | 244 ++++++++++++++++++ test/js/samples/svelte-element/input.svelte | 14 + .../class-with-spread-and-bind/main.svelte | 2 +- 7 files changed, 385 insertions(+), 198 deletions(-) create mode 100644 test/js/samples/svelte-element/expected.js create mode 100644 test/js/samples/svelte-element/input.svelte diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 4c2dd059cc..7642aff711 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -155,6 +155,7 @@ export default class ElementWrapper extends Wrapper { bindings: Binding[]; event_handlers: EventHandler[]; class_dependencies: string[]; + has_dynamic_attribute: boolean; select_binding_dependencies?: Set; @@ -223,6 +224,7 @@ export default class ElementWrapper extends Wrapper { } return new AttributeWrapper(this, block, attribute); }); + this.has_dynamic_attribute = !!this.attributes.find(attr => attr.node.get_dependencies().length > 0); // ordinarily, there'll only be one... but we need to handle // the rare case where an element can have multiple bindings, @@ -291,9 +293,8 @@ export default class ElementWrapper extends Wrapper { (x`#nodes` as unknown) as Identifier ); - const previous_tag = block.get_unique_name('previous_tag'); + const is_tag_dynamic = this.node.tag_expr.dynamic_dependencies().length > 0; 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});`} @@ -315,62 +316,72 @@ 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`; + if (is_tag_dynamic) { + 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`); - } + 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, () => { + 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}; - ` - } - } - `); + ` + } + } + `); + } else { + block.chunks.update.push(b` + if (${tag}) { + ${this.var}.p(#ctx, #dirty); + } + `); + } if (this.child_dynamic_element_block.has_intros) { block.chunks.intro.push(b`@transition_in(${this.var});`); @@ -509,7 +520,11 @@ export default class ElementWrapper extends Wrapper { block.maintain_context = true; } - this.add_attributes(block); + if (this.node.is_dynamic_element) { + this.add_dynamic_element_attributes(block); + } else { + this.add_attributes(block); + } this.add_directives_in_order(block); this.add_transitions(block); this.add_animation(block); @@ -787,7 +802,7 @@ export default class ElementWrapper extends Wrapper { } }); - if (this.node.attributes.some(attr => attr.is_spread) || this.node.is_dynamic_element) { + if (this.node.attributes.some(attr => attr.is_spread)) { this.add_spread_attributes(block); return; } @@ -836,29 +851,18 @@ export default class ElementWrapper extends Wrapper { } `); - const fn = this.node.namespace === namespaces.svg ? x`@set_svg_attributes` : x`@set_attributes`; + const fn = + this.node.namespace === namespaces.svg + ? x`@set_svg_attributes` + : this.node.is_dynamic_element + ? x`@set_dynamic_element_data(${this.node.tag_expr.manipulate(block)})` + : x`@set_attributes`; - if (this.node.is_dynamic_element) { - // call attribute bindings for custom element if tag is custom element - const tag = this.node.tag_expr.manipulate(block); - const attr_update = this.node.namespace === namespaces.svg - ? b`${fn}(${this.var}, ${data});` - : b` - if (/-/.test(${tag})) { - @set_custom_element_data_map(${this.var}, ${data}); - } else { - ${fn}(${this.var}, ${data}); - }`; - block.chunks.hydrate.push(attr_update); - block.chunks.update.push(b` - ${data} = @get_spread_update(${levels}, [${updates}]); - ${attr_update}` - ); - } else { - block.chunks.hydrate.push( - b`${fn}(${this.var}, ${data});` - ); + block.chunks.hydrate.push( + b`${fn}(${this.var}, ${data});` + ); + if (this.has_dynamic_attribute) { block.chunks.update.push(b` ${fn}(${this.var}, ${data} = @get_spread_update(${levels}, [ ${updates} @@ -905,6 +909,35 @@ export default class ElementWrapper extends Wrapper { } } + add_dynamic_element_attributes(block: Block) { + if (this.attributes.length === 0) return; + + if (this.has_dynamic_attribute) { + this.add_spread_attributes(block); + return; + } + + const static_attributes = []; + this.attributes.forEach((attr) => { + if (attr instanceof SpreadAttributeWrapper) { + static_attributes.push({ type: 'SpreadElement', argument: attr.node.expression.node }); + } else { + const name = attr.property_name || attr.name; + static_attributes.push(p`${name}: ${attr.get_value(block)}`); + } + }); + const fn = + this.node.namespace === namespaces.svg + ? x`@set_svg_attributes` + : this.node.is_dynamic_element + ? x`@set_dynamic_element_data(${this.node.tag_expr.manipulate(block)})` + : x`@set_attributes`; + + block.chunks.hydrate.push( + b`${fn}(${this.var}, {${static_attributes}});` + ); + } + add_transitions(block: Block) { const { intro, outro } = this.node; if (!intro && !outro) return; @@ -1102,7 +1135,7 @@ export default class ElementWrapper extends Wrapper { block.chunks.hydrate.push(updater); - if (has_spread || this.node.is_dynamic_element) { + if ((this.node.is_dynamic_element || has_spread) && this.has_dynamic_attribute) { block.chunks.update.push(updater); } else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) { const all_dependencies = this.class_dependencies.concat(...dependencies); diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 23c0fdac51..e40df19c38 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -332,6 +332,10 @@ export function set_custom_element_data(node, prop, value) { } } +export function set_dynamic_element_data(tag: string) { + return (/-/.test(tag)) ? set_custom_element_data_map : set_attributes; +} + export function xlink_attr(node, attribute, value) { node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value); } diff --git a/test/js/samples/svelte-element-event-handlers/expected.js b/test/js/samples/svelte-element-event-handlers/expected.js index 2368c1bc2f..944a04f180 100644 --- a/test/js/samples/svelte-element-event-handlers/expected.js +++ b/test/js/samples/svelte-element-event-handlers/expected.js @@ -2,20 +2,16 @@ import { SvelteComponent, append, - assign, bubble, detach, element, - empty, - get_spread_update, init, insert, listen, noop, run_all, safe_not_equal, - set_attributes, - set_custom_element_data_map + set_dynamic_element_data } from "svelte/internal"; function create_dynamic_element(ctx) { @@ -23,36 +19,13 @@ function create_dynamic_element(ctx) { let svelte_element0; let mounted; let dispose; - let svelte_element0_levels = [{ class: "inner" }]; - let svelte_element0_data = {}; - - for (let i = 0; i < svelte_element0_levels.length; i += 1) { - svelte_element0_data = assign(svelte_element0_data, svelte_element0_levels[i]); - } - - let svelte_element1_levels = [{ class: "outer" }]; - let svelte_element1_data = {}; - - for (let i = 0; i < svelte_element1_levels.length; i += 1) { - svelte_element1_data = assign(svelte_element1_data, svelte_element1_levels[i]); - } return { c() { svelte_element1 = element(a); svelte_element0 = element(span); - - if ((/-/).test(span)) { - set_custom_element_data_map(svelte_element0, svelte_element0_data); - } else { - set_attributes(svelte_element0, svelte_element0_data); - } - - if ((/-/).test(a)) { - set_custom_element_data_map(svelte_element1, svelte_element1_data); - } else { - set_attributes(svelte_element1, svelte_element1_data); - } + set_dynamic_element_data(span)(svelte_element0, { class: "inner" }); + set_dynamic_element_data(a)(svelte_element1, { class: "outer" }); }, m(target, anchor) { insert(target, svelte_element1, anchor); @@ -69,23 +42,7 @@ function create_dynamic_element(ctx) { mounted = true; } }, - p(ctx, dirty) { - svelte_element0_data = get_spread_update(svelte_element0_levels, [{ class: "inner" }]); - - if ((/-/).test(span)) { - set_custom_element_data_map(svelte_element0, svelte_element0_data); - } else { - set_attributes(svelte_element0, svelte_element0_data); - } - - svelte_element1_data = get_spread_update(svelte_element1_levels, [{ class: "outer" }]); - - if ((/-/).test(a)) { - set_custom_element_data_map(svelte_element1, svelte_element1_data); - } else { - set_attributes(svelte_element1, svelte_element1_data); - } - }, + p: noop, d(detaching) { if (detaching) detach(svelte_element1); mounted = false; @@ -95,45 +52,23 @@ function create_dynamic_element(ctx) { } function create_fragment(ctx) { - let previous_tag = a; - let svelte_element_anchor; let svelte_element = a && create_dynamic_element(ctx); return { c() { if (svelte_element) svelte_element.c(); - svelte_element_anchor = empty(); }, m(target, anchor) { if (svelte_element) svelte_element.m(target, anchor); - insert(target, svelte_element_anchor, anchor); }, p(ctx, [dirty]) { if (a) { - if (!previous_tag) { - svelte_element = create_dynamic_element(ctx); - previous_tag = a; - svelte_element.c(); - svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor); - } else if (safe_not_equal(previous_tag, a)) { - svelte_element.d(1); - svelte_element = create_dynamic_element(ctx); - previous_tag = a; - svelte_element.c(); - svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor); - } else { - svelte_element.p(ctx, dirty); - } - } else if (previous_tag) { - svelte_element.d(1); - svelte_element = null; - previous_tag = a; + svelte_element.p(ctx, dirty); } }, i: noop, o: noop, d(detaching) { - if (detaching) detach(svelte_element_anchor); if (svelte_element) svelte_element.d(detaching); } }; @@ -169,4 +104,4 @@ class Component extends SvelteComponent { } } -export default Component; +export default Component; \ No newline at end of file diff --git a/test/js/samples/svelte-element-svg/expected.js b/test/js/samples/svelte-element-svg/expected.js index 9f93cc1234..550b55592d 100644 --- a/test/js/samples/svelte-element-svg/expected.js +++ b/test/js/samples/svelte-element-svg/expected.js @@ -2,10 +2,7 @@ import { SvelteComponent, append, - assign, detach, - empty, - get_spread_update, init, insert, noop, @@ -17,37 +14,19 @@ import { function create_dynamic_element(ctx) { let svelte_element1; let svelte_element0; - let svelte_element0_levels = [{ xmlns: "http://www.w3.org/2000/svg" }]; - let svelte_element0_data = {}; - - for (let i = 0; i < svelte_element0_levels.length; i += 1) { - svelte_element0_data = assign(svelte_element0_data, svelte_element0_levels[i]); - } - - let svelte_element1_levels = [{ xmlns: "http://www.w3.org/2000/svg" }]; - let svelte_element1_data = {}; - - for (let i = 0; i < svelte_element1_levels.length; i += 1) { - svelte_element1_data = assign(svelte_element1_data, svelte_element1_levels[i]); - } return { c() { svelte_element1 = svg_element(/*tag*/ ctx[0].svg); svelte_element0 = svg_element(/*tag*/ ctx[0].path); - set_svg_attributes(svelte_element0, svelte_element0_data); - set_svg_attributes(svelte_element1, svelte_element1_data); + set_svg_attributes(svelte_element0, { xmlns: "http://www.w3.org/2000/svg" }); + set_svg_attributes(svelte_element1, { xmlns: "http://www.w3.org/2000/svg" }); }, m(target, anchor) { insert(target, svelte_element1, anchor); append(svelte_element1, svelte_element0); }, - p(ctx, dirty) { - svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]); - set_svg_attributes(svelte_element0, svelte_element0_data); - svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]); - set_svg_attributes(svelte_element1, svelte_element1_data); - }, + p: noop, d(detaching) { if (detaching) detach(svelte_element1); } @@ -55,45 +34,23 @@ function create_dynamic_element(ctx) { } function create_fragment(ctx) { - let previous_tag = /*tag*/ ctx[0].svg; - let svelte_element_anchor; let svelte_element = /*tag*/ ctx[0].svg && create_dynamic_element(ctx); return { c() { if (svelte_element) svelte_element.c(); - svelte_element_anchor = empty(); }, m(target, anchor) { if (svelte_element) svelte_element.m(target, anchor); - insert(target, svelte_element_anchor, anchor); }, p(ctx, [dirty]) { if (/*tag*/ ctx[0].svg) { - if (!previous_tag) { - svelte_element = create_dynamic_element(ctx); - previous_tag = /*tag*/ ctx[0].svg; - svelte_element.c(); - svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor); - } else if (safe_not_equal(previous_tag, /*tag*/ ctx[0].svg)) { - svelte_element.d(1); - svelte_element = create_dynamic_element(ctx); - previous_tag = /*tag*/ ctx[0].svg; - svelte_element.c(); - svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor); - } else { - svelte_element.p(ctx, dirty); - } - } else if (previous_tag) { - svelte_element.d(1); - svelte_element = null; - previous_tag = /*tag*/ ctx[0].svg; + svelte_element.p(ctx, dirty); } }, i: noop, o: noop, d(detaching) { - if (detaching) detach(svelte_element_anchor); if (svelte_element) svelte_element.d(detaching); } }; @@ -111,4 +68,4 @@ class Component extends SvelteComponent { } } -export default Component; +export default Component; \ No newline at end of file diff --git a/test/js/samples/svelte-element/expected.js b/test/js/samples/svelte-element/expected.js new file mode 100644 index 0000000000..ae26744a3a --- /dev/null +++ b/test/js/samples/svelte-element/expected.js @@ -0,0 +1,244 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + assign, + detach, + element, + empty, + get_spread_update, + init, + insert, + noop, + safe_not_equal, + set_dynamic_element_data, + space, + toggle_class +} from "svelte/internal"; + +function create_dynamic_element_3(ctx) { + let svelte_element; + + return { + c() { + svelte_element = element(static_value); + set_dynamic_element_data(static_value)(svelte_element, { static_value, ...static_obj }); + toggle_class(svelte_element, "foo", static_value); + }, + m(target, anchor) { + insert(target, svelte_element, anchor); + }, + p: noop, + d(detaching) { + if (detaching) detach(svelte_element); + } + }; +} + +// (10:0) +function create_dynamic_element_2(ctx) { + let svelte_element; + + return { + c() { + svelte_element = element(/*dynamic_value*/ ctx[0]); + set_dynamic_element_data(/*dynamic_value*/ ctx[0])(svelte_element, { static_value, ...static_obj }); + toggle_class(svelte_element, "foo", static_value); + }, + m(target, anchor) { + insert(target, svelte_element, anchor); + }, + p: noop, + d(detaching) { + if (detaching) detach(svelte_element); + } + }; +} + +// (12:0) +function create_dynamic_element_1(ctx) { + let svelte_element; + let svelte_element_levels = [{ dynamic_value: /*dynamic_value*/ ctx[0] }, /*dynamic_obj*/ ctx[1]]; + let svelte_element_data = {}; + + for (let i = 0; i < svelte_element_levels.length; i += 1) { + svelte_element_data = assign(svelte_element_data, svelte_element_levels[i]); + } + + return { + c() { + svelte_element = element(static_value); + set_dynamic_element_data(static_value)(svelte_element, svelte_element_data); + toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]); + }, + m(target, anchor) { + insert(target, svelte_element, anchor); + }, + p(ctx, dirty) { + set_dynamic_element_data(static_value)(svelte_element, svelte_element_data = get_spread_update(svelte_element_levels, [ + dirty & /*dynamic_value*/ 1 && { dynamic_value: /*dynamic_value*/ ctx[0] }, + dirty & /*dynamic_obj*/ 2 && /*dynamic_obj*/ ctx[1] + ])); + + toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]); + }, + d(detaching) { + if (detaching) detach(svelte_element); + } + }; +} + +// (14:0) +function create_dynamic_element(ctx) { + let svelte_element; + let svelte_element_levels = [{ dynamic_value: /*dynamic_value*/ ctx[0] }, /*dynamic_obj*/ ctx[1]]; + let svelte_element_data = {}; + + for (let i = 0; i < svelte_element_levels.length; i += 1) { + svelte_element_data = assign(svelte_element_data, svelte_element_levels[i]); + } + + return { + c() { + svelte_element = element(/*dynamic_value*/ ctx[0]); + set_dynamic_element_data(/*dynamic_value*/ ctx[0])(svelte_element, svelte_element_data); + toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]); + }, + m(target, anchor) { + insert(target, svelte_element, anchor); + }, + p(ctx, dirty) { + set_dynamic_element_data(/*dynamic_value*/ ctx[0])(svelte_element, svelte_element_data = get_spread_update(svelte_element_levels, [ + dirty & /*dynamic_value*/ 1 && { dynamic_value: /*dynamic_value*/ ctx[0] }, + dirty & /*dynamic_obj*/ 2 && /*dynamic_obj*/ ctx[1] + ])); + + toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]); + }, + d(detaching) { + if (detaching) detach(svelte_element); + } + }; +} + +function create_fragment(ctx) { + let t0; + let previous_tag = /*dynamic_value*/ ctx[0]; + let t1; + let t2; + let previous_tag_1 = /*dynamic_value*/ ctx[0]; + let svelte_element3_anchor; + let svelte_element0 = static_value && create_dynamic_element_3(ctx); + let svelte_element1 = /*dynamic_value*/ ctx[0] && create_dynamic_element_2(ctx); + let svelte_element2 = static_value && create_dynamic_element_1(ctx); + let svelte_element3 = /*dynamic_value*/ ctx[0] && create_dynamic_element(ctx); + + return { + c() { + if (svelte_element0) svelte_element0.c(); + t0 = space(); + if (svelte_element1) svelte_element1.c(); + t1 = space(); + if (svelte_element2) svelte_element2.c(); + t2 = space(); + if (svelte_element3) svelte_element3.c(); + svelte_element3_anchor = empty(); + }, + m(target, anchor) { + if (svelte_element0) svelte_element0.m(target, anchor); + insert(target, t0, anchor); + if (svelte_element1) svelte_element1.m(target, anchor); + insert(target, t1, anchor); + if (svelte_element2) svelte_element2.m(target, anchor); + insert(target, t2, anchor); + if (svelte_element3) svelte_element3.m(target, anchor); + insert(target, svelte_element3_anchor, anchor); + }, + p(ctx, [dirty]) { + if (static_value) { + svelte_element0.p(ctx, dirty); + } + + if (/*dynamic_value*/ ctx[0]) { + if (!previous_tag) { + svelte_element1 = create_dynamic_element_2(ctx); + previous_tag = /*dynamic_value*/ ctx[0]; + svelte_element1.c(); + svelte_element1.m(t1.parentNode, t1); + } else if (safe_not_equal(previous_tag, /*dynamic_value*/ ctx[0])) { + svelte_element1.d(1); + svelte_element1 = create_dynamic_element_2(ctx); + previous_tag = /*dynamic_value*/ ctx[0]; + svelte_element1.c(); + svelte_element1.m(t1.parentNode, t1); + } else { + svelte_element1.p(ctx, dirty); + } + } else if (previous_tag) { + svelte_element1.d(1); + svelte_element1 = null; + previous_tag = /*dynamic_value*/ ctx[0]; + } + + if (static_value) { + svelte_element2.p(ctx, dirty); + } + + if (/*dynamic_value*/ ctx[0]) { + if (!previous_tag_1) { + svelte_element3 = create_dynamic_element(ctx); + previous_tag_1 = /*dynamic_value*/ ctx[0]; + svelte_element3.c(); + svelte_element3.m(svelte_element3_anchor.parentNode, svelte_element3_anchor); + } else if (safe_not_equal(previous_tag_1, /*dynamic_value*/ ctx[0])) { + svelte_element3.d(1); + svelte_element3 = create_dynamic_element(ctx); + previous_tag_1 = /*dynamic_value*/ ctx[0]; + svelte_element3.c(); + svelte_element3.m(svelte_element3_anchor.parentNode, svelte_element3_anchor); + } else { + svelte_element3.p(ctx, dirty); + } + } else if (previous_tag_1) { + svelte_element3.d(1); + svelte_element3 = null; + previous_tag_1 = /*dynamic_value*/ ctx[0]; + } + }, + i: noop, + o: noop, + d(detaching) { + if (svelte_element0) svelte_element0.d(detaching); + if (detaching) detach(t0); + if (svelte_element1) svelte_element1.d(detaching); + if (detaching) detach(t1); + if (svelte_element2) svelte_element2.d(detaching); + if (detaching) detach(t2); + if (detaching) detach(svelte_element3_anchor); + if (svelte_element3) svelte_element3.d(detaching); + } + }; +} + +let static_value = 'a'; + +function instance($$self, $$props, $$invalidate) { + let { dynamic_value } = $$props; + let { dynamic_obj } = $$props; + let static_obj = {}; + + $$self.$$set = $$props => { + if ('dynamic_value' in $$props) $$invalidate(0, dynamic_value = $$props.dynamic_value); + if ('dynamic_obj' in $$props) $$invalidate(1, dynamic_obj = $$props.dynamic_obj); + }; + + return [dynamic_value, dynamic_obj, static_obj]; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance, create_fragment, safe_not_equal, { dynamic_value: 0, dynamic_obj: 1 }); + } +} + +export default Component; \ No newline at end of file diff --git a/test/js/samples/svelte-element/input.svelte b/test/js/samples/svelte-element/input.svelte new file mode 100644 index 0000000000..6fa0c65ebc --- /dev/null +++ b/test/js/samples/svelte-element/input.svelte @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/test/runtime/samples/class-with-spread-and-bind/main.svelte b/test/runtime/samples/class-with-spread-and-bind/main.svelte index c7c24a2e7b..6efedef079 100644 --- a/test/runtime/samples/class-with-spread-and-bind/main.svelte +++ b/test/runtime/samples/class-with-spread-and-bind/main.svelte @@ -1,5 +1,5 @@