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

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

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 03e820fe28
commit 484d6efbee
1 changed files with 505 additions and 451 deletions
Show Stats Download Patch File Download Diff File

234
src/compiler/compile/render_dom/wrappers/IfBlock.js
Unescape View File

@ -14,7 +14,6 @@ function is_else_if(node) {
/** @extends Wrapper */ /** @extends Wrapper */
class IfBlockBranch extends Wrapper { class IfBlockBranch extends Wrapper {
/** @type {import('../Block.js').default} */ /** @type {import('../Block.js').default} */
block; block;
@ -68,28 +67,39 @@ class IfBlockBranch extends Wrapper {
if (should_cache) { if (should_cache) {
this.condition = block.get_unique_name('show_if'); this.condition = block.get_unique_name('show_if');
this.snippet = /** @type {import('estree').Node} */ (expression.manipulate(block)); this.snippet = /** @type {import('estree').Node} */ (expression.manipulate(block));
} } else {
else {
this.condition = expression.manipulate(block); this.condition = expression.manipulate(block);
} }
} }
add_const_tags_context(renderer, this.node.const_tags); add_const_tags_context(renderer, this.node.const_tags);
this.block = block.child({ this.block = block.child({
comment: create_debugging_comment(node, parent.renderer.component), comment: create_debugging_comment(node, parent.renderer.component),
name: parent.renderer.component.get_unique_name(is_else ? 'create_else_block' : 'create_if_block'), name: parent.renderer.component.get_unique_name(
type: ( /** @type {import('../../nodes/IfBlock.js').default} */(node)).expression ? 'if' : 'else' is_else ? 'create_else_block' : 'create_if_block'
),
type: /** @type {import('../../nodes/IfBlock.js').default} */ (node).expression
? 'if'
: 'else'
}); });
this.fragment = new FragmentWrapper(renderer, this.block, node.children, parent, strip_whitespace, next_sibling); this.fragment = new FragmentWrapper(
renderer,
this.block,
node.children,
parent,
strip_whitespace,
next_sibling
);
this.is_dynamic = this.block.dependencies.size > 0; this.is_dynamic = this.block.dependencies.size > 0;
if (node.const_tags.length > 0) { if (node.const_tags.length > 0) {
this.get_ctx_name = parent.renderer.component.get_unique_name(is_else ? 'get_else_ctx' : 'get_if_ctx'); this.get_ctx_name = parent.renderer.component.get_unique_name(
is_else ? 'get_else_ctx' : 'get_if_ctx'
);
} }
} }
} }
/** @extends Wrapper */ /** @extends Wrapper */
export default class IfBlockWrapper extends Wrapper { export default class IfBlockWrapper extends Wrapper {
/** @type {import('../../nodes/IfBlock.js').default} */ /** @type {import('../../nodes/IfBlock.js').default} */
node; node;
@ -134,25 +144,29 @@ export default class IfBlockWrapper extends Wrapper {
// the condition itself is dynamic // the condition itself is dynamic
this.needs_update = true; this.needs_update = true;
} }
if (branch.block.has_intros) if (branch.block.has_intros) has_intros = true;
has_intros = true; if (branch.block.has_outros) has_outros = true;
if (branch.block.has_outros)
has_outros = true;
if (is_else_if(node.else)) { if (is_else_if(node.else)) {
create_branches(/** @type {import('../../nodes/IfBlock.js').default} */ (node.else.children[0])); create_branches(
} /** @type {import('../../nodes/IfBlock.js').default} */ (node.else.children[0])
else if (node.else) { );
const branch = new IfBlockBranch(renderer, block, this, node.else, strip_whitespace, next_sibling); } else if (node.else) {
const branch = new IfBlockBranch(
renderer,
block,
this,
node.else,
strip_whitespace,
next_sibling
);
this.branches.push(branch); this.branches.push(branch);
blocks.push(branch.block); blocks.push(branch.block);
if (branch.block.dependencies.size > 0) { if (branch.block.dependencies.size > 0) {
is_dynamic = true; is_dynamic = true;
block.add_dependencies(branch.block.dependencies); block.add_dependencies(branch.block.dependencies);
} }
if (branch.block.has_intros) if (branch.block.has_intros) has_intros = true;
has_intros = true; if (branch.block.has_outros) has_outros = true;
if (branch.block.has_outros)
has_outros = true;
} }
}; };
create_branches(this.node); create_branches(this.node);
@ -200,18 +214,22 @@ export default class IfBlockWrapper extends Wrapper {
const detaching = parent_node && !is_head(parent_node) ? null : 'detaching'; const detaching = parent_node && !is_head(parent_node) ? null : 'detaching';
if (this.node.else) { if (this.node.else) {
this.branches.forEach((branch) => { this.branches.forEach((branch) => {
if (branch.snippet) if (branch.snippet) block.add_variable(branch.condition);
block.add_variable(branch.condition);
}); });
if (has_outros) { if (has_outros) {
this.render_compound_with_outros(block, parent_node, parent_nodes, dynamic, vars, detaching); this.render_compound_with_outros(
block,
parent_node,
parent_nodes,
dynamic,
vars,
detaching
);
block.chunks.outro.push(b`@transition_out(${name});`); block.chunks.outro.push(b`@transition_out(${name});`);
} } else {
else {
this.render_compound(block, parent_node, parent_nodes, dynamic, vars, detaching); this.render_compound(block, parent_node, parent_nodes, dynamic, vars, detaching);
} }
} } else {
else {
this.render_simple(block, parent_node, parent_nodes, dynamic, vars, detaching); this.render_simple(block, parent_node, parent_nodes, dynamic, vars, detaching);
if (has_outros) { if (has_outros) {
block.chunks.outro.push(b`@transition_out(${name});`); block.chunks.outro.push(b`@transition_out(${name});`);
@ -219,15 +237,13 @@ export default class IfBlockWrapper extends Wrapper {
} }
if (if_exists_condition) { if (if_exists_condition) {
block.chunks.create.push(b`if (${if_exists_condition}) ${name}.c();`); block.chunks.create.push(b`if (${if_exists_condition}) ${name}.c();`);
} } else {
else {
block.chunks.create.push(b`${name}.c();`); block.chunks.create.push(b`${name}.c();`);
} }
if (parent_nodes && this.renderer.options.hydratable) { if (parent_nodes && this.renderer.options.hydratable) {
if (if_exists_condition) { if (if_exists_condition) {
block.chunks.claim.push(b`if (${if_exists_condition}) ${name}.l(${parent_nodes});`); block.chunks.claim.push(b`if (${if_exists_condition}) ${name}.l(${parent_nodes});`);
} } else {
else {
block.chunks.claim.push(b`${name}.l(${parent_nodes});`); block.chunks.claim.push(b`${name}.l(${parent_nodes});`);
} }
} }
@ -236,11 +252,18 @@ export default class IfBlockWrapper extends Wrapper {
} }
if (needs_anchor) { if (needs_anchor) {
block.add_element( block.add_element(
/** @type {import('estree').Identifier} */ (anchor),
/** @type {import('estree').Identifier} */ (anchor), x `@empty()`, parent_nodes && x `@empty()`, parent_node); x`@empty()`,
parent_nodes && x`@empty()`,
parent_node
);
} }
this.branches.forEach((branch) => { this.branches.forEach((branch) => {
branch.fragment.render(branch.block, null, /** @type {unknown} */ /** @type {import('estree').Identifier} */ ((x `#nodes`))); branch.fragment.render(
branch.block,
null,
/** @type {unknown} */ /** @type {import('estree').Identifier} */ (x`#nodes`)
);
}); });
} }
@ -252,7 +275,14 @@ export default class IfBlockWrapper extends Wrapper {
* @param {any} * @param {any}
* @param {DetachingOrNull} detaching * @param {DetachingOrNull} detaching
*/ */
render_compound(block, parent_node, _parent_nodes, dynamic, { name, anchor, has_else, if_exists_condition, has_transitions }, detaching) { render_compound(
block,
parent_node,
_parent_nodes,
dynamic,
{ name, anchor, has_else, if_exists_condition, has_transitions },
detaching
) {
const select_block_type = this.renderer.component.get_unique_name('select_block_type'); const select_block_type = this.renderer.component.get_unique_name('select_block_type');
const current_block_type = block.get_unique_name('current_block_type'); const current_block_type = block.get_unique_name('current_block_type');
const need_select_block_ctx = this.branches.some((branch) => branch.get_ctx_name); const need_select_block_ctx = this.branches.some((branch) => branch.get_ctx_name);
@ -267,24 +297,29 @@ export default class IfBlockWrapper extends Wrapper {
block.chunks.init.push(b` block.chunks.init.push(b`
function ${select_block_type}(#ctx, #dirty) { function ${select_block_type}(#ctx, #dirty) {
${this.branches.map(({ dependencies, condition, snippet }) => { ${this.branches.map(({ dependencies, condition, snippet }) => {
return b `${snippet && dependencies.length > 0 return b`${
snippet && dependencies.length > 0
? b`if (${block.renderer.dirty(dependencies)}) ${condition} = null;` ? b`if (${block.renderer.dirty(dependencies)}) ${condition} = null;`
: null}`; : null
}`;
})} })}
${this.branches.map(({ condition, snippet, block }) => condition ${this.branches.map(({ condition, snippet, block }) =>
condition
? b` ? b`
${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`} ${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`}
if (${condition}) return ${block.name};` if (${condition}) return ${block.name};`
: b `return ${block.name};`)} : b`return ${block.name};`
)}
} }
`); `);
} } else {
else {
block.chunks.init.push(b` block.chunks.init.push(b`
function ${select_block_type}(#ctx, #dirty) { function ${select_block_type}(#ctx, #dirty) {
${this.branches.map(({ condition, snippet, block }) => condition ${this.branches.map(({ condition, snippet, block }) =>
condition
? b`if (${snippet || condition}) return ${block.name};` ? b`if (${snippet || condition}) return ${block.name};`
: b `return ${block.name};`)} : b`return ${block.name};`
)}
} }
`); `);
} }
@ -302,8 +337,7 @@ export default class IfBlockWrapper extends Wrapper {
.filter(Boolean)} .filter(Boolean)}
} }
`); `);
} } else {
else {
// when not all branches need to create a new context, // when not all branches need to create a new context,
// this code is simpler // this code is simpler
block.chunks.init.push(b` block.chunks.init.push(b`
@ -327,9 +361,10 @@ export default class IfBlockWrapper extends Wrapper {
const initial_mount_node = parent_node || '#target'; const initial_mount_node = parent_node || '#target';
const anchor_node = parent_node ? 'null' : '#anchor'; const anchor_node = parent_node ? 'null' : '#anchor';
if (if_exists_condition) { if (if_exists_condition) {
block.chunks.mount.push(b `if (${if_exists_condition}) ${name}.m(${initial_mount_node}, ${anchor_node});`); block.chunks.mount.push(
} b`if (${if_exists_condition}) ${name}.m(${initial_mount_node}, ${anchor_node});`
else { );
} else {
block.chunks.mount.push(b`${name}.m(${initial_mount_node}, ${anchor_node});`); block.chunks.mount.push(b`${name}.m(${initial_mount_node}, ${anchor_node});`);
} }
if (this.needs_update) { if (this.needs_update) {
@ -351,20 +386,17 @@ export default class IfBlockWrapper extends Wrapper {
${change_block} ${change_block}
} }
`); `);
} } else {
else {
block.chunks.update.push(b` block.chunks.update.push(b`
if (${current_block_type} !== (${current_block_type} = ${select_block_type}(#ctx, #dirty))) { if (${current_block_type} !== (${current_block_type} = ${select_block_type}(#ctx, #dirty))) {
${change_block} ${change_block}
} }
`); `);
} }
} } else if (dynamic) {
else if (dynamic) {
if (if_exists_condition) { if (if_exists_condition) {
block.chunks.update.push(b`if (${if_exists_condition}) ${name}.p(${if_ctx}, #dirty);`); block.chunks.update.push(b`if (${if_exists_condition}) ${name}.p(${if_ctx}, #dirty);`);
} } else {
else {
block.chunks.update.push(b`${name}.p(${if_ctx}, #dirty);`); block.chunks.update.push(b`${name}.p(${if_ctx}, #dirty);`);
} }
} }
@ -374,8 +406,7 @@ export default class IfBlockWrapper extends Wrapper {
${name}.d(${detaching}); ${name}.d(${detaching});
} }
`); `);
} } else {
else {
block.chunks.destroy.push(b` block.chunks.destroy.push(b`
${name}.d(${detaching}); ${name}.d(${detaching});
`); `);
@ -392,7 +423,14 @@ export default class IfBlockWrapper extends Wrapper {
* @param {any} * @param {any}
* @param {DetachingOrNull} detaching * @param {DetachingOrNull} detaching
*/ */
render_compound_with_outros(block, parent_node, _parent_nodes, dynamic, { name, anchor, has_else, has_transitions, if_exists_condition }, detaching) { render_compound_with_outros(
block,
parent_node,
_parent_nodes,
dynamic,
{ name, anchor, has_else, has_transitions, if_exists_condition },
detaching
) {
const select_block_type = this.renderer.component.get_unique_name('select_block_type'); const select_block_type = this.renderer.component.get_unique_name('select_block_type');
const current_block_type_index = block.get_unique_name('current_block_type_index'); const current_block_type_index = block.get_unique_name('current_block_type_index');
const previous_block_index = block.get_unique_name('previous_block_index'); const previous_block_index = block.get_unique_name('previous_block_index');
@ -417,28 +455,36 @@ export default class IfBlockWrapper extends Wrapper {
const ${if_blocks} = []; const ${if_blocks} = [];
${this.needs_update ${
this.needs_update
? b` ? b`
function ${select_block_type}(#ctx, #dirty) { function ${select_block_type}(#ctx, #dirty) {
${this.branches.map(({ dependencies, condition, snippet }) => { ${this.branches.map(({ dependencies, condition, snippet }) => {
return b `${snippet && dependencies.length > 0 return b`${
snippet && dependencies.length > 0
? b`if (${block.renderer.dirty(dependencies)}) ${condition} = null;` ? b`if (${block.renderer.dirty(dependencies)}) ${condition} = null;`
: null}`; : null
}`;
})} })}
${this.branches.map(({ condition, snippet }, i) => condition ${this.branches.map(({ condition, snippet }, i) =>
condition
? b` ? b`
${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`} ${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`}
if (${condition}) return ${i};` if (${condition}) return ${i};`
: b `return ${i};`)} : b`return ${i};`
)}
${!has_else && b`return -1;`} ${!has_else && b`return -1;`}
} }
` `
: b` : b`
function ${select_block_type}(#ctx, #dirty) { function ${select_block_type}(#ctx, #dirty) {
${this.branches.map(({ condition, snippet }, i) => condition ? b `if (${snippet || condition}) return ${i};` : b `return ${i};`)} ${this.branches.map(({ condition, snippet }, i) =>
condition ? b`if (${snippet || condition}) return ${i};` : b`return ${i};`
)}
${!has_else && b`return -1;`} ${!has_else && b`return -1;`}
} }
`} `
}
`); `);
if (need_select_block_ctx) { if (need_select_block_ctx) {
// if all branches needs create a context // if all branches needs create a context
@ -454,8 +500,7 @@ export default class IfBlockWrapper extends Wrapper {
.filter(Boolean)} .filter(Boolean)}
} }
`); `);
} } else {
else {
// when not all branches need to create a new context, // when not all branches need to create a new context,
// this code is simpler // this code is simpler
block.chunks.init.push(b` block.chunks.init.push(b`
@ -475,8 +520,7 @@ export default class IfBlockWrapper extends Wrapper {
${current_block_type_index} = ${select_block_type}(#ctx, ${this.renderer.get_initial_dirty()}); ${current_block_type_index} = ${select_block_type}(#ctx, ${this.renderer.get_initial_dirty()});
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](${if_ctx}); ${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](${if_ctx});
`); `);
} } else {
else {
block.chunks.init.push(b` block.chunks.init.push(b`
if (~(${current_block_type_index} = ${select_block_type}(#ctx, ${this.renderer.get_initial_dirty()}))) { if (~(${current_block_type_index} = ${select_block_type}(#ctx, ${this.renderer.get_initial_dirty()}))) {
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](${if_ctx}); ${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](${if_ctx});
@ -485,7 +529,11 @@ export default class IfBlockWrapper extends Wrapper {
} }
const initial_mount_node = parent_node || '#target'; const initial_mount_node = parent_node || '#target';
const anchor_node = parent_node ? 'null' : '#anchor'; const anchor_node = parent_node ? 'null' : '#anchor';
block.chunks.mount.push(if_current_block_type_index(b `${if_blocks}[${current_block_type_index}].m(${initial_mount_node}, ${anchor_node});`)); block.chunks.mount.push(
if_current_block_type_index(
b`${if_blocks}[${current_block_type_index}].m(${initial_mount_node}, ${anchor_node});`
)
);
if (this.needs_update) { if (this.needs_update) {
const update_mount_node = this.get_update_mount_node(anchor); const update_mount_node = this.get_update_mount_node(anchor);
const destroy_old_block = b` const destroy_old_block = b`
@ -535,24 +583,23 @@ export default class IfBlockWrapper extends Wrapper {
${change_block} ${change_block}
} }
`); `);
} } else {
else {
block.chunks.update.push(b` block.chunks.update.push(b`
if (${current_block_type_index} !== ${previous_block_index}) { if (${current_block_type_index} !== ${previous_block_index}) {
${change_block} ${change_block}
} }
`); `);
} }
} } else if (dynamic) {
else if (dynamic) {
if (if_exists_condition) { if (if_exists_condition) {
block.chunks.update.push(b`if (${if_exists_condition}) ${name}.p(${if_ctx}, #dirty);`); block.chunks.update.push(b`if (${if_exists_condition}) ${name}.p(${if_ctx}, #dirty);`);
} } else {
else {
block.chunks.update.push(b`${name}.p(${if_ctx}, #dirty);`); block.chunks.update.push(b`${name}.p(${if_ctx}, #dirty);`);
} }
} }
block.chunks.destroy.push(if_current_block_type_index(b `${if_blocks}[${current_block_type_index}].d(${detaching});`)); block.chunks.destroy.push(
if_current_block_type_index(b`${if_blocks}[${current_block_type_index}].d(${detaching});`)
);
} }
/** /**
@ -563,11 +610,17 @@ export default class IfBlockWrapper extends Wrapper {
* @param {any} * @param {any}
* @param {DetachingOrNull} detaching * @param {DetachingOrNull} detaching
*/ */
render_simple(block, parent_node, _parent_nodes, dynamic, { name, anchor, if_exists_condition, has_transitions }, detaching) { render_simple(
block,
parent_node,
_parent_nodes,
dynamic,
{ name, anchor, if_exists_condition, has_transitions },
detaching
) {
const branch = this.branches[0]; const branch = this.branches[0];
const if_ctx = branch.get_ctx_name ? x`${branch.get_ctx_name}(#ctx)` : x`#ctx`; const if_ctx = branch.get_ctx_name ? x`${branch.get_ctx_name}(#ctx)` : x`#ctx`;
if (branch.snippet) if (branch.snippet) block.add_variable(branch.condition, branch.snippet);
block.add_variable(branch.condition, branch.snippet);
block.chunks.init.push(b` block.chunks.init.push(b`
let ${name} = ${branch.condition} && ${branch.block.name}(${if_ctx}); let ${name} = ${branch.condition} && ${branch.block.name}(${if_ctx});
`); `);
@ -579,10 +632,12 @@ export default class IfBlockWrapper extends Wrapper {
const enter = b` const enter = b`
if (${name}) { if (${name}) {
${dynamic && b`${name}.p(${if_ctx}, #dirty);`} ${dynamic && b`${name}.p(${if_ctx}, #dirty);`}
${has_transitions && ${
has_transitions &&
b`if (${block.renderer.dirty(branch.dependencies)}) { b`if (${block.renderer.dirty(branch.dependencies)}) {
@transition_in(${name}, 1); @transition_in(${name}, 1);
}`} }`
}
} else { } else {
${name} = ${branch.block.name}(${if_ctx}); ${name} = ${branch.block.name}(${if_ctx});
${name}.c(); ${name}.c();
@ -591,7 +646,11 @@ export default class IfBlockWrapper extends Wrapper {
} }
`; `;
if (branch.snippet) { if (branch.snippet) {
block.chunks.update.push(b `if (${block.renderer.dirty(branch.dependencies)}) ${branch.condition} = ${branch.snippet}`); block.chunks.update.push(
b`if (${block.renderer.dirty(branch.dependencies)}) ${branch.condition} = ${
branch.snippet
}`
);
} }
// no `p()` here — we don't want to update outroing nodes, // no `p()` here — we don't want to update outroing nodes,
// as that will typically result in glitching // as that will typically result in glitching
@ -607,8 +666,7 @@ export default class IfBlockWrapper extends Wrapper {
@check_outros(); @check_outros();
} }
`); `);
} } else {
else {
block.chunks.update.push(b` block.chunks.update.push(b`
if (${branch.condition}) { if (${branch.condition}) {
${enter} ${enter}
@ -618,8 +676,7 @@ export default class IfBlockWrapper extends Wrapper {
} }
`); `);
} }
} } else if (dynamic) {
else if (dynamic) {
block.chunks.update.push(b` block.chunks.update.push(b`
if (${branch.condition}) ${name}.p(${if_ctx}, #dirty); if (${branch.condition}) ${name}.p(${if_ctx}, #dirty);
`); `);
@ -628,8 +685,7 @@ export default class IfBlockWrapper extends Wrapper {
block.chunks.destroy.push(b` block.chunks.destroy.push(b`
if (${if_exists_condition}) ${name}.d(${detaching}); if (${if_exists_condition}) ${name}.d(${detaching});
`); `);
} } else {
else {
block.chunks.destroy.push(b` block.chunks.destroy.push(b`
${name}.d(${detaching}); ${name}.d(${detaching});
`); `);
@ -637,6 +693,4 @@ export default class IfBlockWrapper extends Wrapper {
} }
} }
/** @typedef {'detaching' | null} DetachingOrNull */ /** @typedef {'detaching' | null} DetachingOrNull */

Write Preview
Loading…
Cancel
Save