msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

feat: optimise svelte-element output code for static tag and static attribute (#8161)

Browse Source 
* 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
7 changed files with 385 additions and 198 deletions
Show Stats Download Patch File Download Diff File

77
src/compiler/compile/render_dom/wrappers/Element/index.ts
Unescape View File

@ -155,6 +155,7 @@ export default class ElementWrapper extends Wrapper {
bindings: Binding[]; bindings: Binding[];
event_handlers: EventHandler[]; event_handlers: EventHandler[];
class_dependencies: string[]; class_dependencies: string[];
has_dynamic_attribute: boolean;
select_binding_dependencies?: Set<string>; select_binding_dependencies?: Set<string>;
@ -223,6 +224,7 @@ export default class ElementWrapper extends Wrapper {
} }
return new AttributeWrapper(this, block, attribute); 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 // ordinarily, there'll only be one... but we need to handle
// the rare case where an element can have multiple bindings, // 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 (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); const tag = this.node.tag_expr.manipulate(block);
block.add_variable(previous_tag, tag);
block.chunks.init.push(b` block.chunks.init.push(b`
${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`} ${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`}
@ -315,6 +316,9 @@ export default class ElementWrapper extends Wrapper {
if (${this.var}) ${this.var}.m(${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'}); if (${this.var}) ${this.var}.m(${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});
`); `);
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 anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
const has_transitions = !!(this.node.intro || this.node.outro); 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 not_equal = this.renderer.component.component_options.immutable ? x`@not_equal` : x`@safe_not_equal`;
@ -371,6 +375,13 @@ export default class ElementWrapper extends Wrapper {
} }
} }
`); `);
} else {
block.chunks.update.push(b`
if (${tag}) {
${this.var}.p(#ctx, #dirty);
}
`);
}
if (this.child_dynamic_element_block.has_intros) { if (this.child_dynamic_element_block.has_intros) {
block.chunks.intro.push(b`@transition_in(${this.var});`); block.chunks.intro.push(b`@transition_in(${this.var});`);
@ -509,7 +520,11 @@ export default class ElementWrapper extends Wrapper {
block.maintain_context = true; block.maintain_context = true;
} }
if (this.node.is_dynamic_element) {
this.add_dynamic_element_attributes(block);
} else {
this.add_attributes(block); this.add_attributes(block);
}
this.add_directives_in_order(block); this.add_directives_in_order(block);
this.add_transitions(block); this.add_transitions(block);
this.add_animation(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); this.add_spread_attributes(block);
return; 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( block.chunks.hydrate.push(
b`${fn}(${this.var}, ${data});` b`${fn}(${this.var}, ${data});`
); );
if (this.has_dynamic_attribute) {
block.chunks.update.push(b` block.chunks.update.push(b`
${fn}(${this.var}, ${data} = @get_spread_update(${levels}, [ ${fn}(${this.var}, ${data} = @get_spread_update(${levels}, [
${updates} ${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) { add_transitions(block: Block) {
const { intro, outro } = this.node; const { intro, outro } = this.node;
if (!intro && !outro) return; if (!intro && !outro) return;
@ -1102,7 +1135,7 @@ export default class ElementWrapper extends Wrapper {
block.chunks.hydrate.push(updater); 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); block.chunks.update.push(updater);
} else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) { } else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
const all_dependencies = this.class_dependencies.concat(...dependencies); const all_dependencies = this.class_dependencies.concat(...dependencies);

4
src/runtime/internal/dom.ts
Unescape View File

@ -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) { export function xlink_attr(node, attribute, value) {
node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value); node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
} }

73
test/js/samples/svelte-element-event-handlers/expected.js
Unescape View File

@ -2,20 +2,16 @@
import { import {
SvelteComponent, SvelteComponent,
append, append,
assign,
bubble, bubble,
detach, detach,
element, element,
empty,
get_spread_update,
init, init,
insert, insert,
listen, listen,
noop, noop,
run_all, run_all,
safe_not_equal, safe_not_equal,
set_attributes, set_dynamic_element_data
set_custom_element_data_map
} from "svelte/internal"; } from "svelte/internal";
function create_dynamic_element(ctx) { function create_dynamic_element(ctx) {
@ -23,36 +19,13 @@ function create_dynamic_element(ctx) {
let svelte_element0; let svelte_element0;
let mounted; let mounted;
let dispose; 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 { return {
c() { c() {
svelte_element1 = element(a); svelte_element1 = element(a);
svelte_element0 = element(span); svelte_element0 = element(span);
set_dynamic_element_data(span)(svelte_element0, { class: "inner" });
if ((/-/).test(span)) { set_dynamic_element_data(a)(svelte_element1, { class: "outer" });
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);
}
}, },
m(target, anchor) { m(target, anchor) {
insert(target, svelte_element1, anchor); insert(target, svelte_element1, anchor);
@ -69,23 +42,7 @@ function create_dynamic_element(ctx) {
mounted = true; mounted = true;
} }
}, },
p(ctx, dirty) { p: noop,
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);
}
},
d(detaching) { d(detaching) {
if (detaching) detach(svelte_element1); if (detaching) detach(svelte_element1);
mounted = false; mounted = false;
@ -95,45 +52,23 @@ function create_dynamic_element(ctx) {
} }
function create_fragment(ctx) { function create_fragment(ctx) {
let previous_tag = a;
let svelte_element_anchor;
let svelte_element = a && create_dynamic_element(ctx); let svelte_element = a && create_dynamic_element(ctx);
return { return {
c() { c() {
if (svelte_element) svelte_element.c(); if (svelte_element) svelte_element.c();
svelte_element_anchor = empty();
}, },
m(target, anchor) { m(target, anchor) {
if (svelte_element) svelte_element.m(target, anchor); if (svelte_element) svelte_element.m(target, anchor);
insert(target, svelte_element_anchor, anchor);
}, },
p(ctx, [dirty]) { p(ctx, [dirty]) {
if (a) { 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); svelte_element.p(ctx, dirty);
} }
} else if (previous_tag) {
svelte_element.d(1);
svelte_element = null;
previous_tag = a;
}
}, },
i: noop, i: noop,
o: noop, o: noop,
d(detaching) { d(detaching) {
if (detaching) detach(svelte_element_anchor);
if (svelte_element) svelte_element.d(detaching); if (svelte_element) svelte_element.d(detaching);
} }
}; };

49
test/js/samples/svelte-element-svg/expected.js
Unescape View File

@ -2,10 +2,7 @@
import { import {
SvelteComponent, SvelteComponent,
append, append,
assign,
detach, detach,
empty,
get_spread_update,
init, init,
insert, insert,
noop, noop,
@ -17,37 +14,19 @@ import {
function create_dynamic_element(ctx) { function create_dynamic_element(ctx) {
let svelte_element1; let svelte_element1;
let svelte_element0; 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 { return {
c() { c() {
svelte_element1 = svg_element(/*tag*/ ctx[0].svg); svelte_element1 = svg_element(/*tag*/ ctx[0].svg);
svelte_element0 = svg_element(/*tag*/ ctx[0].path); svelte_element0 = svg_element(/*tag*/ ctx[0].path);
set_svg_attributes(svelte_element0, svelte_element0_data); set_svg_attributes(svelte_element0, { xmlns: "http://www.w3.org/2000/svg" });
set_svg_attributes(svelte_element1, svelte_element1_data); set_svg_attributes(svelte_element1, { xmlns: "http://www.w3.org/2000/svg" });
}, },
m(target, anchor) { m(target, anchor) {
insert(target, svelte_element1, anchor); insert(target, svelte_element1, anchor);
append(svelte_element1, svelte_element0); append(svelte_element1, svelte_element0);
}, },
p(ctx, dirty) { p: noop,
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);
},
d(detaching) { d(detaching) {
if (detaching) detach(svelte_element1); if (detaching) detach(svelte_element1);
} }
@ -55,45 +34,23 @@ function create_dynamic_element(ctx) {
} }
function create_fragment(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); let svelte_element = /*tag*/ ctx[0].svg && create_dynamic_element(ctx);
return { return {
c() { c() {
if (svelte_element) svelte_element.c(); if (svelte_element) svelte_element.c();
svelte_element_anchor = empty();
}, },
m(target, anchor) { m(target, anchor) {
if (svelte_element) svelte_element.m(target, anchor); if (svelte_element) svelte_element.m(target, anchor);
insert(target, svelte_element_anchor, anchor);
}, },
p(ctx, [dirty]) { p(ctx, [dirty]) {
if (/*tag*/ ctx[0].svg) { 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); svelte_element.p(ctx, dirty);
} }
} else if (previous_tag) {
svelte_element.d(1);
svelte_element = null;
previous_tag = /*tag*/ ctx[0].svg;
}
}, },
i: noop, i: noop,
o: noop, o: noop,
d(detaching) { d(detaching) {
if (detaching) detach(svelte_element_anchor);
if (svelte_element) svelte_element.d(detaching); if (svelte_element) svelte_element.d(detaching);
} }
}; };

244
test/js/samples/svelte-element/expected.js
Unescape View File

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

14
test/js/samples/svelte-element/input.svelte
Unescape View File

@ -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} />

2
test/runtime/samples/class-with-spread-and-bind/main.svelte
Unescape View File

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

Write Preview
Loading…
Cancel
Save