[fix] static svelte:element not replaced with tag in production mode (#7938)

* [fix] static svelte:element not replaced with tag in production mode

* [fix] static svelte:element not replaced with tag in production mode

* add optimization of static <svelte:element> and fix a bug

Co-authored-by: Yuichiro Yamashita <xydybaseball@gmail.com>
pull/7790/head
Ramon Snir 3 years ago committed by GitHub
parent de6821a1de
commit f84c00edb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -239,6 +239,7 @@ export default class Element extends Node {
this.tag_expr = new Expression(component, this, scope, info.tag);
} else {
this.tag_expr = new Expression(component, this, scope, string_literal(info.tag) as Literal);
this.name = info.tag;
}
} else {
this.tag_expr = new Expression(component, this, scope, string_literal(this.name) as Literal);

@ -255,6 +255,7 @@ export default class ElementWrapper extends Wrapper {
node.styles.length > 0 ||
this.node.name === 'option' ||
node.tag_expr.dynamic_dependencies().length ||
node.is_dynamic_element ||
renderer.options.dev
) {
this.parent.cannot_use_innerhtml(); // need to use add_location
@ -1176,10 +1177,12 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
} else if (wrapper.node.name === 'noscript') {
// do nothing
} else {
const nodeName = wrapper.node.name;
// element
state.quasi.value.raw += `<${wrapper.node.name}`;
state.quasi.value.raw += `<${nodeName}`;
const is_empty_textarea = wrapper.node.name === 'textarea' && wrapper.fragment.nodes.length === 0;
const is_empty_textarea = nodeName === 'textarea' && wrapper.fragment.nodes.length === 0;
(wrapper as ElementWrapper).attributes.forEach((attr: AttributeWrapper) => {
if (is_empty_textarea && attr.node.name === 'value') {
@ -1196,7 +1199,7 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
if (!wrapper.void) {
state.quasi.value.raw += '>';
if (wrapper.node.name === 'pre') {
if (nodeName === 'pre') {
// Two or more leading newlines are required to restore the leading newline immediately after `<pre>`.
// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
const first = wrapper.fragment.nodes[0];
@ -1221,7 +1224,7 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
to_html(wrapper.fragment.nodes as Array<ElementWrapper | TextWrapper>, block, literal, state);
state.quasi.value.raw += `</${wrapper.node.name}>`;
state.quasi.value.raw += `</${nodeName}>`;
} else {
state.quasi.value.raw += '/>';
}

@ -18,7 +18,7 @@ function create_dynamic_element_1(ctx) {
return { c: noop, m: noop, p: noop, d: noop };
}
// (1:0) <svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
// (5:0) <svelte:element this={tag.svg} xmlns="http://www.w3.org/2000/svg">
function create_dynamic_element(ctx) {
let svelte_element1;
let svelte_element0;
@ -38,8 +38,8 @@ function create_dynamic_element(ctx) {
return {
c() {
svelte_element1 = svg_element("svg");
svelte_element0 = svg_element("path");
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);
},
@ -60,9 +60,9 @@ function create_dynamic_element(ctx) {
}
function create_fragment(ctx) {
let previous_tag = "svg";
let previous_tag = /*tag*/ ctx[0].svg;
let svelte_element1_anchor;
let svelte_element1 = "svg" && create_dynamic_element(ctx);
let svelte_element1 = /*tag*/ ctx[0].svg && create_dynamic_element(ctx);
return {
c() {
@ -74,12 +74,12 @@ function create_fragment(ctx) {
insert(target, svelte_element1_anchor, anchor);
},
p(ctx, [dirty]) {
if ("svg") {
if (/*tag*/ ctx[0].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")) {
} else if (safe_not_equal(previous_tag, /*tag*/ ctx[0].svg)) {
svelte_element1.d(1);
svelte_element1 = create_dynamic_element(ctx);
svelte_element1.c();
@ -92,7 +92,7 @@ function create_fragment(ctx) {
svelte_element1 = null;
}
previous_tag = "svg";
previous_tag = /*tag*/ ctx[0].svg;
},
i: noop,
o: noop,
@ -103,10 +103,15 @@ function create_fragment(ctx) {
};
}
function instance($$self) {
const tag = { svg: 'svg', path: 'path' };
return [tag];
}
class Component extends SvelteComponent {
constructor(options) {
super();
init(this, options, null, create_fragment, safe_not_equal, {});
init(this, options, instance, create_fragment, safe_not_equal, {});
}
}

@ -1,3 +1,7 @@
<svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
<svelte:element this="path" xmlns="http://www.w3.org/2000/svg"></svelte:element>
</svelte:element>
<script>
const tag = { svg: 'svg', path: 'path' };
</script>
<svelte:element this={tag.svg} xmlns="http://www.w3.org/2000/svg">
<svelte:element this={tag.path} xmlns="http://www.w3.org/2000/svg" />
</svelte:element>

@ -0,0 +1,13 @@
export default {
html: `
<div>
<p></p>
</div>
`,
test({ assert, target }) {
const p = target.querySelector('p');
assert.notEqual(p, undefined);
}
};

@ -0,0 +1,3 @@
<div>
<svelte:element this="p" />
</div>

@ -0,0 +1,13 @@
export default {
html: `
<div>
<p></p>
</div>
`,
test({ assert, target }) {
const p = target.querySelector('p');
assert.notEqual(p, undefined);
}
};

@ -0,0 +1,7 @@
<script>
const p = 'p';
</script>
<div>
<svelte:element this={p} />
</div>
Loading…
Cancel
Save