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

refactor

Browse Source
pull/8142/head
Yuichiro Yamashita 4 years ago
parent 630467a900
commit 5e3605d92c
1 changed files with 78 additions and 79 deletions
Show Stats Download Patch File Download Diff File

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

@ -169,8 +169,17 @@ export default class ElementWrapper extends Wrapper {
next_sibling: Wrapper next_sibling: Wrapper
) { ) {
super(renderer, block, parent, node); super(renderer, block, parent, node);
const is_original_dynamic_element = node.is_dynamic_element && block.type !== CHILD_DYNAMIC_ELEMENT_BLOCK;
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 (node.is_dynamic_element && block.type !== CHILD_DYNAMIC_ELEMENT_BLOCK) {
this.child_dynamic_element_block = block.child({ this.child_dynamic_element_block = block.child({
comment: create_debugging_comment(node, renderer.component), comment: create_debugging_comment(node, renderer.component),
name: renderer.component.get_unique_name('create_dynamic_element'), name: renderer.component.get_unique_name('create_dynamic_element'),
@ -185,90 +194,81 @@ export default class ElementWrapper extends Wrapper {
strip_whitespace, strip_whitespace,
next_sibling next_sibling
); );
}
this.var = { // the original svelte:element is never used for rendering, because
type: 'Identifier', // it gets assigned a child_dynamic_element which is used in all rendering logic.
name: node.name.replace(regex_invalid_variable_identifier_characters, '_') // 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.
return;
this.void = is_void(node.name); }
this.class_dependencies = [];
// the original svelte:element is never used for rendering, because if (this.node.children.length) {
// it gets assigned a child_dynamic_element which is used in all rendering logic. this.node.lets.forEach(l => {
// so doing all of this on the original svelte:element will just cause double extract_names(l.value || l.name).forEach(name => {
// code, because it will be done again on the child_dynamic_element. renderer.add_to_context(name, true);
if (!is_original_dynamic_element) {
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);
}); });
}
// ordinarily, there'll only be one... but we need to handle this.attributes = this.node.attributes.map(attribute => {
// the rare case where an element can have multiple bindings, if (attribute.name === 'style') {
// e.g. <audio bind:paused bind:currentTime> return new StyleAttributeWrapper(this, block, attribute);
this.bindings = this.node.bindings.map(binding => new Binding(block, binding, this)); }
if (attribute.type === 'Spread') {
return new SpreadAttributeWrapper(this, block, attribute);
}
return new AttributeWrapper(this, block, attribute);
});
this.event_handlers = this.node.handlers.map(event_handler => new EventHandler(event_handler, 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));
if (node.intro || node.outro) { this.event_handlers = this.node.handlers.map(event_handler => new EventHandler(event_handler, this));
if (node.intro) block.add_intro(node.intro.is_local);
if (node.outro) block.add_outro(node.outro.is_local);
}
if (node.animation) { if (node.intro || node.outro) {
block.add_animation(); if (node.intro) block.add_intro(node.intro.is_local);
} if (node.outro) block.add_outro(node.outro.is_local);
}
block.add_dependencies(node.tag_expr.dependencies); if (node.animation) {
block.add_animation();
}
// add directive and handler dependencies block.add_dependencies(node.tag_expr.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 => { // add directive and handler dependencies
if (handler.expression) { [node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach(directive => {
block.add_dependencies(handler.expression.dependencies); if (directive && directive.expression) {
} block.add_dependencies(directive.expression.dependencies);
}); }
});
if (this.parent) { node.handlers.forEach(handler => {
if (node.actions.length > 0 || if (handler.expression) {
node.animation || block.add_dependencies(handler.expression.dependencies);
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); 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);
} }
render(block: Block, parent_node: Identifier, parent_nodes: Identifier) { render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
@ -332,20 +332,19 @@ export default class ElementWrapper extends Wrapper {
${this.var}.p(#ctx, #dirty); ${this.var}.p(#ctx, #dirty);
} }
} else if (${previous_tag}) { } else if (${previous_tag}) {
${ ${has_transitions
has_transitions ? b`
? b`
@group_outros(); @group_outros();
@transition_out(${this.var}, 1, 1, () => { @transition_out(${this.var}, 1, 1, () => {
${this.var} = null; ${this.var} = null;
}); });
@check_outros(); @check_outros();
` `
: b` : b`
${this.var}.d(1); ${this.var}.d(1);
${this.var} = null; ${this.var} = null;
` `
} }
} }
${previous_tag} = ${tag}; ${previous_tag} = ${tag};
`); `);
@ -687,9 +686,9 @@ export default class ElementWrapper extends Wrapper {
function ${handler}(${params}) { function ${handler}(${params}) {
${binding_group.bindings.map(b => b.handler.mutation)} ${binding_group.bindings.map(b => b.handler.mutation)}
${Array.from(dependencies) ${Array.from(dependencies)
.filter(dep => dep[0] !== '$') .filter(dep => dep[0] !== '$')
.filter(dep => !contextual_dependencies.has(dep)) .filter(dep => !contextual_dependencies.has(dep))
.map(dep => b`${this.renderer.invalidate(dep)};`)} .map(dep => b`${this.renderer.invalidate(dep)};`)}
} }
`); `);

Write Preview
Loading…
Cancel
Save