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

fixed double up initialization on svelte:element elements

Browse Source
pull/8142/head
Mathias Picker 4 years ago
parent b8f32c0b1a
commit 47d07c3e25
3 changed files with 198 additions and 65 deletions
Show Stats Download Patch File Download Diff File

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

@ -169,8 +169,8 @@ export default class ElementWrapper extends Wrapper {
next_sibling: Wrapper
) {
super(renderer, block, parent, node);
if (node.is_dynamic_element && block.type !== CHILD_DYNAMIC_ELEMENT_BLOCK) {
const is_original_dynamic_element = node.is_dynamic_element && block.type !== CHILD_DYNAMIC_ELEMENT_BLOCK;
if (is_original_dynamic_element) {
this.child_dynamic_element_block = block.child({
comment: create_debugging_comment(node, renderer.component),
name: renderer.component.get_unique_name('create_dynamic_element'),
@ -187,82 +187,87 @@ export default class ElementWrapper extends Wrapper {
);
}
this.var = {
type: 'Identifier',
name: node.name.replace(regex_invalid_variable_identifier_characters, '_')
};
this.void = is_void(node.name);
this.class_dependencies = [];
if (this.node.children.length) {
this.node.lets.forEach(l => {
extract_names(l.value || l.name).forEach(name => {
renderer.add_to_context(name, true);
// the original svelte:element is never used for rendering, because
// it gets assigned a child_dynamic_element which is used in all rendering logic.
// so doing all of this on the original svelte:element will just cause double
// code, because it will be done again on the child_dynamic_element.
if (!is_original_dynamic_element) {
this.var = {
type: 'Identifier',
name: node.name.replace(regex_invalid_variable_identifier_characters, '_')
};
this.void = is_void(node.name);
this.class_dependencies = [];
if (this.node.children.length) {
this.node.lets.forEach(l => {
extract_names(l.value || l.name).forEach(name => {
renderer.add_to_context(name, true);
});
});
}
this.attributes = this.node.attributes.map(attribute => {
if (attribute.name === 'style') {
return new StyleAttributeWrapper(this, block, attribute);
}
if (attribute.type === 'Spread') {
return new SpreadAttributeWrapper(this, block, attribute);
}
return new AttributeWrapper(this, block, attribute);
});
}
this.attributes = this.node.attributes.map(attribute => {
if (attribute.name === 'style') {
return new StyleAttributeWrapper(this, block, attribute);
}
if (attribute.type === 'Spread') {
return new SpreadAttributeWrapper(this, block, attribute);
}
return new AttributeWrapper(this, block, attribute);
});
// ordinarily, there'll only be one... but we need to handle
// the rare case where an element can have multiple bindings,
// e.g. <audio bind:paused bind:currentTime>
this.bindings = this.node.bindings.map(binding => new Binding(block, binding, this));
// ordinarily, there'll only be one... but we need to handle
// the rare case where an element can have multiple bindings,
// e.g. <audio bind:paused bind:currentTime>
this.bindings = this.node.bindings.map(binding => new Binding(block, binding, this));
this.event_handlers = this.node.handlers.map(event_handler => new EventHandler(event_handler, this));
this.event_handlers = this.node.handlers.map(event_handler => new EventHandler(event_handler, this));
if (node.intro || node.outro) {
if (node.intro) block.add_intro(node.intro.is_local);
if (node.outro) block.add_outro(node.outro.is_local);
}
if (node.intro || node.outro) {
if (node.intro) block.add_intro(node.intro.is_local);
if (node.outro) block.add_outro(node.outro.is_local);
}
if (node.animation) {
block.add_animation();
}
if (node.animation) {
block.add_animation();
}
block.add_dependencies(node.tag_expr.dependencies);
block.add_dependencies(node.tag_expr.dependencies);
// add directive and handler dependencies
[node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach(directive => {
if (directive && directive.expression) {
block.add_dependencies(directive.expression.dependencies);
}
});
// add directive and handler dependencies
[node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach(directive => {
if (directive && directive.expression) {
block.add_dependencies(directive.expression.dependencies);
}
});
node.handlers.forEach(handler => {
if (handler.expression) {
block.add_dependencies(handler.expression.dependencies);
}
});
node.handlers.forEach(handler => {
if (handler.expression) {
block.add_dependencies(handler.expression.dependencies);
if (this.parent) {
if (node.actions.length > 0 ||
node.animation ||
node.bindings.length > 0 ||
node.classes.length > 0 ||
node.intro || node.outro ||
node.handlers.length > 0 ||
node.styles.length > 0 ||
this.node.name === 'option' ||
node.tag_expr.dynamic_dependencies().length ||
renderer.options.dev
) {
this.parent.cannot_use_innerhtml(); // need to use add_location
this.parent.not_static_content();
}
}
});
if (this.parent) {
if (node.actions.length > 0 ||
node.animation ||
node.bindings.length > 0 ||
node.classes.length > 0 ||
node.intro || node.outro ||
node.handlers.length > 0 ||
node.styles.length > 0 ||
this.node.name === 'option' ||
node.tag_expr.dynamic_dependencies().length ||
renderer.options.dev
) {
this.parent.cannot_use_innerhtml(); // need to use add_location
this.parent.not_static_content();
}
this.fragment = new FragmentWrapper(renderer, block, node.children, this, strip_whitespace, next_sibling);
}
this.fragment = new FragmentWrapper(renderer, block, node.children, this, strip_whitespace, next_sibling);
}
render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {

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

@ -0,0 +1,125 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
assign,
bubble,
detach,
element,
empty,
get_spread_update,
init,
insert,
listen,
noop,
safe_not_equal,
set_attributes,
set_custom_element_data_map
} from "svelte/internal";
function create_dynamic_element(ctx) {
let svelte_element;
let mounted;
let dispose;
let svelte_element_levels = [{ class: "some-classname" }];
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("a");
svelte_element.textContent = "Hi";
if ((/-/).test("a")) {
set_custom_element_data_map(svelte_element, svelte_element_data);
} else {
set_attributes(svelte_element, svelte_element_data);
}
},
m(target, anchor) {
insert(target, svelte_element, anchor);
if (!mounted) {
dispose = listen(svelte_element, "keydown", /*keydown_handler*/ ctx[0]);
mounted = true;
}
},
p(ctx, dirty) {
svelte_element_data = get_spread_update(svelte_element_levels, [{ class: "some-classname" }]);
if ((/-/).test("a")) {
set_custom_element_data_map(svelte_element, svelte_element_data);
} else {
set_attributes(svelte_element, svelte_element_data);
}
},
d(detaching) {
if (detaching) detach(svelte_element);
mounted = false;
dispose();
}
};
}
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);
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);
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";
},
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(svelte_element_anchor);
if (svelte_element) svelte_element.d(detaching);
}
};
}
function instance($$self) {
function keydown_handler(event) {
bubble.call(this, $$self, event);
}
return [keydown_handler];
}
class Component extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, {});
}
}
export default Component;

3
test/js/samples/svelte-element-event-handlers/input.svelte
Unescape View File

@ -0,0 +1,3 @@
<svelte:element class="some-classname" this="a" on:keydown>
Hi
</svelte:element>
Write Preview
Loading…
Cancel
Save