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>
pull/7774/head
Tan Li Hau 2 years ago committed by GitHub
parent d4363510fc
commit f6dc86f02c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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<string>;
@ -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);

@ -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);
}

@ -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;

@ -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;

@ -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) <svelte:element this={dynamic_value} {static_value} {...static_obj} class:foo={static_value} />
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) <svelte:element this={static_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />
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) <svelte:element this={dynamic_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />
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;

@ -0,0 +1,14 @@
<script>
export let dynamic_value;
export let dynamic_obj;
let static_value = 'a';
let static_obj = {};
</script>
<svelte:element this={static_value} {static_value} {...static_obj} class:foo={static_value} />
<svelte:element this={dynamic_value} {static_value} {...static_obj} class:foo={static_value} />
<svelte:element this={static_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />
<svelte:element this={dynamic_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />

@ -1,5 +1,5 @@
<script>
let primary = true;
export let primary = true;
let elem;
</script>

Loading…
Cancel
Save