Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 336x 336x 336x 336x 336x 336x 336x 336x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 295x 295x 295x 295x 295x 295x 295x 336x 93x 93x 295x 329x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 295x 295x 295x | /** @import { BlockStatement, Expression } from 'estree' */
/** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types' */
import * as b from '../../../../utils/builders.js';
/**
* @param {AST.IfBlock} node
* @param {ComponentContext} context
*/
export function IfBlock(node, context) {
const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
const alternate = node.alternate && /** @type {BlockStatement} */ (context.visit(node.alternate));
context.state.template.push_quasi('<!>');
// compile to if rather than $.if for non-reactive if statements
// NOTE: doesn't handle else/elseif yet or mismatches. also, this probably breaks transition locality
if (!node.metadata.expression.has_state && !node.elseif) {
context.state.init.push(
b.block([
b.let(b.id('$$anchor'), context.state.node),
b.stmt(b.call('$.next')),
b.if(node.test, consequent, alternate ?? undefined)
])
);
return;
}
const args = [
context.state.node,
b.thunk(/** @type {Expression} */ (context.visit(node.test))),
b.arrow([b.id('$$anchor')], consequent)
];
if (alternate || node.elseif) {
args.push(alternate ? b.arrow([b.id('$$anchor')], alternate) : b.literal(null));
}
if (node.elseif) {
// We treat this...
//
// {#if x}
// ...
// {:else}
// {#if y}
// <div transition:foo>...</div>
// {/if}
// {/if}
//
// ...slightly differently to this...
//
// {#if x}
// ...
// {:else if y}
// <div transition:foo>...</div>
// {/if}
//
// ...even though they're logically equivalent. In the first case, the
// transition will only play when `y` changes, but in the second it
// should play when `x` or `y` change — both are considered 'local'
args.push(b.literal(true));
}
context.state.init.push(b.stmt(b.call('$.if', ...args)));
}
|