diff --git a/.changeset/beige-windows-happen.md b/.changeset/beige-windows-happen.md new file mode 100644 index 0000000000..00fde8a785 --- /dev/null +++ b/.changeset/beige-windows-happen.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: make if blocks tree-shakable diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js index 0aa6e5d24a..d658f9eaf8 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js @@ -9,23 +9,44 @@ import * as b from '../../../../utils/builders.js'; */ export function IfBlock(node, context) { context.state.template.push(''); + const statements = []; const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent)); + const consequent_id = context.state.scope.generate('consequent'); + statements.push(b.var(b.id(consequent_id), b.arrow([b.id('$$anchor')], consequent))); + + let alternate_id; + + if (node.alternate) { + const alternate = /** @type {BlockStatement} */ (context.visit(node.alternate)); + alternate_id = context.state.scope.generate('alternate'); + statements.push(b.var(b.id(alternate_id), b.arrow([b.id('$$anchor')], alternate))); + } + + /** @type {Expression[]} */ const args = [ context.state.node, - b.thunk(/** @type {Expression} */ (context.visit(node.test))), - b.arrow([b.id('$$anchor')], consequent) + b.arrow( + [b.id('$$render')], + b.block([ + b.if( + /** @type {Expression} */ (context.visit(node.test)), + b.stmt(b.call(b.id('$$render'), b.id(consequent_id))), + alternate_id + ? b.stmt( + b.call( + b.id('$$render'), + b.id(alternate_id), + node.alternate ? b.literal(false) : undefined + ) + ) + : undefined + ) + ]) + ) ]; - if (node.alternate || node.elseif) { - args.push( - node.alternate - ? b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.alternate))) - : b.literal(null) - ); - } - if (node.elseif) { // We treat this... // @@ -51,5 +72,7 @@ export function IfBlock(node, context) { args.push(b.literal(true)); } - context.state.init.push(b.stmt(b.call('$.if', ...args))); + statements.push(b.stmt(b.call('$.if', ...args))); + + context.state.init.push(b.block(statements)); } diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js index 4d8e9412d3..6a880f28bc 100644 --- a/packages/svelte/src/internal/client/dom/blocks/if.js +++ b/packages/svelte/src/internal/client/dom/blocks/if.js @@ -13,13 +13,11 @@ import { HYDRATION_START_ELSE } from '../../../../constants.js'; /** * @param {TemplateNode} node - * @param {() => boolean} get_condition - * @param {(anchor: Node) => void} consequent_fn - * @param {null | ((anchor: Node) => void)} [alternate_fn] + * @param {(branch: (fn: (anchor: Node) => void, flag?: boolean) => void) => void} fn * @param {boolean} [elseif] True if this is an `{:else if ...}` block rather than an `{#if ...}`, as that affects which transitions are considered 'local' * @returns {void} */ -export function if_block(node, get_condition, consequent_fn, alternate_fn = null, elseif = false) { +export function if_block(node, fn, elseif = false) { if (hydrating) { hydrate_next(); } @@ -37,8 +35,18 @@ export function if_block(node, get_condition, consequent_fn, alternate_fn = null var flags = elseif ? EFFECT_TRANSPARENT : 0; - block(() => { - if (condition === (condition = !!get_condition())) return; + var has_branch = false; + + const set_branch = (/** @type {(anchor: Node) => void} */ fn, flag = true) => { + has_branch = true; + update_branch(flag, fn); + }; + + const update_branch = ( + /** @type {boolean | null} */ new_condition, + /** @type {null | ((anchor: Node) => void)} */ fn + ) => { + if (condition === (condition = new_condition)) return; /** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */ let mismatch = false; @@ -60,8 +68,8 @@ export function if_block(node, get_condition, consequent_fn, alternate_fn = null if (condition) { if (consequent_effect) { resume_effect(consequent_effect); - } else { - consequent_effect = branch(() => consequent_fn(anchor)); + } else if (fn) { + consequent_effect = branch(() => fn(anchor)); } if (alternate_effect) { @@ -72,8 +80,8 @@ export function if_block(node, get_condition, consequent_fn, alternate_fn = null } else { if (alternate_effect) { resume_effect(alternate_effect); - } else if (alternate_fn) { - alternate_effect = branch(() => alternate_fn(anchor)); + } else if (fn) { + alternate_effect = branch(() => fn(anchor)); } if (consequent_effect) { @@ -87,6 +95,14 @@ export function if_block(node, get_condition, consequent_fn, alternate_fn = null // continue in hydration mode set_hydrating(true); } + }; + + block(() => { + has_branch = false; + fn(set_branch); + if (!has_branch) { + update_branch(null, null); + } }, flags); if (hydrating) {