From 7c9156106e2aa1e787d040e009b187dd34b7d304 Mon Sep 17 00:00:00 2001 From: Mathias Picker Date: Mon, 18 Jul 2022 21:28:30 +0200 Subject: [PATCH 1/2] fixed render statement for svg when using svelte:element --- .../render_dom/wrappers/Element/index.ts | 4 +- .../js/samples/svelte-element-svg/expected.js | 135 ++++++++++++++++++ .../samples/svelte-element-svg/input.svelte | 3 + 3 files changed, 140 insertions(+), 2 deletions(-) create mode 100644 test/js/samples/svelte-element-svg/expected.js create mode 100644 test/js/samples/svelte-element-svg/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 eed7c6f4eeee..f751ea4bd0aa 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -504,9 +504,10 @@ export default class ElementWrapper extends Wrapper { get_render_statement(block: Block) { const { name, namespace, tag_expr } = this.node; + const reference = tag_expr.manipulate(block); if (namespace === namespaces.svg) { - return x`@svg_element("${name}")`; + return x`@svg_element(${reference})`; } if (namespace) { @@ -518,7 +519,6 @@ export default class ElementWrapper extends Wrapper { return x`@element_is("${name}", ${is.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`)})`; } - const reference = tag_expr.manipulate(block); return x`@element(${reference})`; } diff --git a/test/js/samples/svelte-element-svg/expected.js b/test/js/samples/svelte-element-svg/expected.js new file mode 100644 index 000000000000..116584337585 --- /dev/null +++ b/test/js/samples/svelte-element-svg/expected.js @@ -0,0 +1,135 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + append, + assign, + detach, + empty, + get_spread_update, + init, + insert, + noop, + safe_not_equal, + set_svg_attributes, + svg_element +} from "svelte/internal"; + +function create_dynamic_element_1(ctx) { + return { c: noop, m: noop, p: noop, d: noop }; +} + +// (1:0) +function create_dynamic_element(ctx) { + let svelte_element1; + let svelte_element0; + + let svelte_element0_levels = [ + { "stroke-linecap": "round" }, + { "stroke-linejoin": "round" }, + { d: "M9 5l7 7-7 7" } + ]; + + 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 = [ + { viewBox: "0 0 24 24" }, + { xmlns: "http://www.w3.org/2000/svg" }, + { fill: "none" }, + { stroke: "currentColor" }, + { "stroke-width": "2" } + ]; + + 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("svg"); + svelte_element0 = svg_element("path"); + set_svg_attributes(svelte_element0, svelte_element0_data); + set_svg_attributes(svelte_element1, svelte_element1_data); + }, + m(target, anchor) { + insert(target, svelte_element1, anchor); + append(svelte_element1, svelte_element0); + }, + p(ctx, dirty) { + set_svg_attributes(svelte_element0, svelte_element0_data = get_spread_update(svelte_element0_levels, [ + { "stroke-linecap": "round" }, + { "stroke-linejoin": "round" }, + { d: "M9 5l7 7-7 7" } + ])); + + set_svg_attributes(svelte_element1, svelte_element1_data = get_spread_update(svelte_element1_levels, [ + { viewBox: "0 0 24 24" }, + { xmlns: "http://www.w3.org/2000/svg" }, + { fill: "none" }, + { stroke: "currentColor" }, + { "stroke-width": "2" } + ])); + }, + d(detaching) { + if (detaching) detach(svelte_element1); + } + }; +} + +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"; + }, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(svelte_element1_anchor); + if (svelte_element1) svelte_element1.d(detaching); + } + }; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, null, create_fragment, safe_not_equal, {}); + } +} + +export default Component; \ No newline at end of file diff --git a/test/js/samples/svelte-element-svg/input.svelte b/test/js/samples/svelte-element-svg/input.svelte new file mode 100644 index 000000000000..b4eef40290ad --- /dev/null +++ b/test/js/samples/svelte-element-svg/input.svelte @@ -0,0 +1,3 @@ + + + \ No newline at end of file From d5b819e3361811f15399c777158c2eaaf3078dcd Mon Sep 17 00:00:00 2001 From: Mathias Picker Date: Mon, 18 Jul 2022 23:58:41 +0200 Subject: [PATCH 2/2] removed unecessary stuff in test --- .../js/samples/svelte-element-svg/expected.js | 34 +++---------------- .../samples/svelte-element-svg/input.svelte | 4 +-- 2 files changed, 7 insertions(+), 31 deletions(-) diff --git a/test/js/samples/svelte-element-svg/expected.js b/test/js/samples/svelte-element-svg/expected.js index 116584337585..f9ca24ff30fa 100644 --- a/test/js/samples/svelte-element-svg/expected.js +++ b/test/js/samples/svelte-element-svg/expected.js @@ -18,31 +18,18 @@ function create_dynamic_element_1(ctx) { return { c: noop, m: noop, p: noop, d: noop }; } -// (1:0) +// (1:0) function create_dynamic_element(ctx) { let svelte_element1; let svelte_element0; - - let svelte_element0_levels = [ - { "stroke-linecap": "round" }, - { "stroke-linejoin": "round" }, - { d: "M9 5l7 7-7 7" } - ]; - + 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 = [ - { viewBox: "0 0 24 24" }, - { xmlns: "http://www.w3.org/2000/svg" }, - { fill: "none" }, - { stroke: "currentColor" }, - { "stroke-width": "2" } - ]; - + 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) { @@ -61,19 +48,8 @@ function create_dynamic_element(ctx) { append(svelte_element1, svelte_element0); }, p(ctx, dirty) { - set_svg_attributes(svelte_element0, svelte_element0_data = get_spread_update(svelte_element0_levels, [ - { "stroke-linecap": "round" }, - { "stroke-linejoin": "round" }, - { d: "M9 5l7 7-7 7" } - ])); - - set_svg_attributes(svelte_element1, svelte_element1_data = get_spread_update(svelte_element1_levels, [ - { viewBox: "0 0 24 24" }, - { xmlns: "http://www.w3.org/2000/svg" }, - { fill: "none" }, - { stroke: "currentColor" }, - { "stroke-width": "2" } - ])); + set_svg_attributes(svelte_element0, svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }])); + set_svg_attributes(svelte_element1, svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }])); }, d(detaching) { if (detaching) detach(svelte_element1); diff --git a/test/js/samples/svelte-element-svg/input.svelte b/test/js/samples/svelte-element-svg/input.svelte index b4eef40290ad..2dc4d548141e 100644 --- a/test/js/samples/svelte-element-svg/input.svelte +++ b/test/js/samples/svelte-element-svg/input.svelte @@ -1,3 +1,3 @@ - - + + \ No newline at end of file