Lint and format src/compiler/compile/render_dom/wrappers/KeyBlock.js

pull/8569/head
Simon Holthausen 3 years ago
parent 4adbb5439b
commit 28564df0b2

@ -5,131 +5,141 @@ import { b, x } from 'code-red';
/** @extends Wrapper */ /** @extends Wrapper */
export default class KeyBlockWrapper extends Wrapper { export default class KeyBlockWrapper extends Wrapper {
/** @type {import('../../nodes/KeyBlock.js').default} */
node;
/** @type {import('../../nodes/KeyBlock.js').default} */ /** @type {import('./Fragment.js').default} */
node; fragment;
/** @type {import('./Fragment.js').default} */ /** @type {import('../Block.js').default} */
fragment; block;
/** @type {import('../Block.js').default} */ /** @type {string[]} */
block; dependencies;
/** @type {string[]} */ /** @type {import('estree').Identifier} */
dependencies; var = { type: 'Identifier', name: 'key_block' };
/** @type {import('estree').Identifier} */ /**
var = { type: 'Identifier', name: 'key_block' }; * @param {import('../Renderer.js').default} renderer
* @param {import('../Block.js').default} block
* @param {import('./shared/Wrapper.js').default} parent
* @param {import('../../nodes/KeyBlock.js').default} node
* @param {boolean} strip_whitespace
* @param {import('./shared/Wrapper.js').default} next_sibling
*/
constructor(renderer, block, parent, node, strip_whitespace, next_sibling) {
super(renderer, block, parent, node);
this.dependencies = node.expression.dynamic_dependencies();
if (this.dependencies.length) {
block = block.child({
comment: create_debugging_comment(node, renderer.component),
name: renderer.component.get_unique_name('create_key_block'),
type: 'key'
});
block.add_dependencies(node.expression.dependencies);
renderer.blocks.push(block);
}
this.block = block;
this.fragment = new FragmentWrapper(
renderer,
this.block,
node.children,
this,
strip_whitespace,
next_sibling
);
}
/** /**
* @param {import('../Renderer.js').default} renderer * @param {import('../Block.js').default} block
* @param {import('../Block.js').default} block * @param {import('estree').Identifier} parent_node
* @param {import('./shared/Wrapper.js').default} parent * @param {import('estree').Identifier} parent_nodes
* @param {import('../../nodes/KeyBlock.js').default} node */
* @param {boolean} strip_whitespace render(block, parent_node, parent_nodes) {
* @param {import('./shared/Wrapper.js').default} next_sibling if (this.dependencies.length === 0) {
*/ this.render_static_key(block, parent_node, parent_nodes);
constructor(renderer, block, parent, node, strip_whitespace, next_sibling) { } else {
super(renderer, block, parent, node); this.render_dynamic_key(block, parent_node, parent_nodes);
this.dependencies = node.expression.dynamic_dependencies(); }
if (this.dependencies.length) { }
block = block.child({
comment: create_debugging_comment(node, renderer.component),
name: renderer.component.get_unique_name('create_key_block'),
type: 'key'
});
block.add_dependencies(node.expression.dependencies);
renderer.blocks.push(block);
}
this.block = block;
this.fragment = new FragmentWrapper(renderer, this.block, node.children, this, strip_whitespace, next_sibling);
}
/** /**
* @param {import('../Block.js').default} block * @param {import('../Block.js').default} _block
* @param {import('estree').Identifier} parent_node * @param {import('estree').Identifier} parent_node
* @param {import('estree').Identifier} parent_nodes * @param {import('estree').Identifier} parent_nodes
*/ */
render(block, parent_node, parent_nodes) { render_static_key(_block, parent_node, parent_nodes) {
if (this.dependencies.length === 0) { this.fragment.render(this.block, parent_node, parent_nodes);
this.render_static_key(block, parent_node, parent_nodes); }
}
else {
this.render_dynamic_key(block, parent_node, parent_nodes);
}
}
/** /**
* @param {import('../Block.js').default} _block * @param {import('../Block.js').default} block
* @param {import('estree').Identifier} parent_node * @param {import('estree').Identifier} parent_node
* @param {import('estree').Identifier} parent_nodes * @param {import('estree').Identifier} parent_nodes
*/ */
render_static_key(_block, parent_node, parent_nodes) { render_dynamic_key(block, parent_node, parent_nodes) {
this.fragment.render(this.block, parent_node, parent_nodes); this.fragment.render(
} this.block,
null,
/** /** @type {unknown} */ /** @type {import('estree').Identifier} */ (x`#nodes`)
* @param {import('../Block.js').default} block );
* @param {import('estree').Identifier} parent_node const has_transitions = !!(this.block.has_intro_method || this.block.has_outro_method);
* @param {import('estree').Identifier} parent_nodes const dynamic = this.block.has_update_method;
*/ const previous_key = block.get_unique_name('previous_key');
render_dynamic_key(block, parent_node, parent_nodes) { const snippet = this.node.expression.manipulate(block);
this.fragment.render(this.block, null, /** @type {unknown} */ /** @type {import('estree').Identifier} */ ((x `#nodes`))); block.add_variable(previous_key, snippet);
const has_transitions = !!(this.block.has_intro_method || this.block.has_outro_method); const not_equal = this.renderer.component.component_options.immutable
const dynamic = this.block.has_update_method; ? x`@not_equal`
const previous_key = block.get_unique_name('previous_key'); : x`@safe_not_equal`;
const snippet = this.node.expression.manipulate(block); const condition = x`${this.renderer.dirty(
block.add_variable(previous_key, snippet); this.dependencies
const not_equal = this.renderer.component.component_options.immutable )} && ${not_equal}(${previous_key}, ${previous_key} = ${snippet})`;
? x `@not_equal` block.chunks.init.push(b`
: x `@safe_not_equal`;
const condition = x `${this.renderer.dirty(this.dependencies)} && ${not_equal}(${previous_key}, ${previous_key} = ${snippet})`;
block.chunks.init.push(b `
let ${this.var} = ${this.block.name}(#ctx); let ${this.var} = ${this.block.name}(#ctx);
`); `);
block.chunks.create.push(b `${this.var}.c();`); block.chunks.create.push(b`${this.var}.c();`);
if (this.renderer.options.hydratable) { if (this.renderer.options.hydratable) {
block.chunks.claim.push(b `${this.var}.l(${parent_nodes});`); block.chunks.claim.push(b`${this.var}.l(${parent_nodes});`);
} }
block.chunks.mount.push(b `${this.var}.m(${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});`); block.chunks.mount.push(
const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes); b`${this.var}.m(${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});`
const body = b ` );
${has_transitions const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
? b ` const body = b`
${
has_transitions
? b`
@group_outros(); @group_outros();
@transition_out(${this.var}, 1, 1, @noop); @transition_out(${this.var}, 1, 1, @noop);
@check_outros(); @check_outros();
` `
: b `${this.var}.d(1);`} : b`${this.var}.d(1);`
}
${this.var} = ${this.block.name}(#ctx); ${this.var} = ${this.block.name}(#ctx);
${this.var}.c(); ${this.var}.c();
${has_transitions && b `@transition_in(${this.var}, 1)`} ${has_transitions && b`@transition_in(${this.var}, 1)`}
${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor}); ${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor});
`; `;
if (dynamic) { if (dynamic) {
block.chunks.update.push(b ` block.chunks.update.push(b`
if (${condition}) { if (${condition}) {
${body} ${body}
} else { } else {
${this.var}.p(#ctx, #dirty); ${this.var}.p(#ctx, #dirty);
} }
`); `);
} } else {
else { block.chunks.update.push(b`
block.chunks.update.push(b `
if (${condition}) { if (${condition}) {
${body} ${body}
} }
`); `);
} }
if (has_transitions) { if (has_transitions) {
block.chunks.intro.push(b `@transition_in(${this.var})`); block.chunks.intro.push(b`@transition_in(${this.var})`);
block.chunks.outro.push(b `@transition_out(${this.var})`); block.chunks.outro.push(b`@transition_out(${this.var})`);
} }
block.chunks.destroy.push(b `${this.var}.d(detaching)`); block.chunks.destroy.push(b`${this.var}.d(detaching)`);
} }
} }

Loading…
Cancel
Save