From e5e1dbe84ced98bc7d165ce45ded1c3daf6358ad Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 21 Mar 2024 23:55:56 -0400 Subject: [PATCH] reduce some indirection --- .../3-transform/client/visitors/template.js | 6 ++++ .../src/internal/client/dom/blocks/if.js | 31 +++++++++---------- .../src/internal/client/dom/template.js | 10 +++--- 3 files changed, 26 insertions(+), 21 deletions(-) diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index 6f956a230d..265b09591c 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -1282,6 +1282,12 @@ function create_block(parent, name, nodes, context) { // It's important that close is the last statement in the block, as any previous statements // could contain element insertions into the template, which the close statement needs to // know of when constructing the list of current inner elements. + + if (context.path.length > 0) { + // this is a block — return DOM so it can be attached directly to the effect + close = b.return(close.expression); + } + body.push(close); } diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js index 82677d0bc4..b786f9a952 100644 --- a/packages/svelte/src/internal/client/dom/blocks/if.js +++ b/packages/svelte/src/internal/client/dom/blocks/if.js @@ -31,8 +31,8 @@ function create_if_block() { /** * @param {Comment} anchor * @param {() => boolean} get_condition - * @param {(anchor: Node) => void} consequent_fn - * @param {null | ((anchor: Node) => void)} alternate_fn + * @param {(anchor: Node) => import('#client').TemplateNode | import('#client').TemplateNode[]} consequent_fn + * @param {null | ((anchor: Node) => import('#client').TemplateNode | import('#client').TemplateNode[])} alternate_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} */ @@ -41,11 +41,11 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els hydrate_block_anchor(anchor); - /** @type {null | import('#client').TemplateNode | Array} */ - let consequent_dom = null; + /** @type {undefined | import('#client').TemplateNode | Array} */ + let consequent_dom; - /** @type {null | import('#client').TemplateNode | Array} */ - let alternate_dom = null; + /** @type {undefined | import('#client').TemplateNode | Array} */ + let alternate_dom; /** @type {import('#client').Effect | null} */ let consequent_effect = null; @@ -87,8 +87,7 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els } else { consequent_effect = render_effect( () => { - consequent_fn(anchor); - consequent_dom = block.d; + consequent_dom = consequent_fn(anchor); if (mismatch) { // Set fragment so that Svelte continues to operate in hydration mode @@ -98,9 +97,9 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els return () => { // TODO make this unnecessary by linking the dom to the effect, // and removing automatically on teardown - if (consequent_dom !== null) { + if (consequent_dom !== undefined) { remove(consequent_dom); - consequent_dom = null; + consequent_dom = undefined; } }; }, @@ -121,8 +120,7 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els } else if (alternate_fn) { alternate_effect = render_effect( () => { - alternate_fn(anchor); - alternate_dom = block.d; + alternate_dom = alternate_fn(anchor); if (mismatch) { // Set fragment so that Svelte continues to operate in hydration mode @@ -132,9 +130,9 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els return () => { // TODO make this unnecessary by linking the dom to the effect, // and removing automatically on teardown - if (alternate_dom !== null) { + if (alternate_dom !== undefined) { remove(alternate_dom); - alternate_dom = null; + alternate_dom = undefined; } }; }, @@ -159,17 +157,18 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els if_effect.ondestroy = () => { // TODO make this unnecessary by linking the dom to the effect, // and removing automatically on teardown - if (consequent_dom !== null) { + if (consequent_dom !== undefined) { remove(consequent_dom); } - if (alternate_dom !== null) { + if (alternate_dom !== undefined) { remove(alternate_dom); } if (consequent_effect) { destroy_effect(consequent_effect); } + if (alternate_effect) { destroy_effect(alternate_effect); } diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js index 24a0ebb6e0..97a8652c7a 100644 --- a/packages/svelte/src/internal/client/dom/template.js +++ b/packages/svelte/src/internal/client/dom/template.js @@ -178,7 +178,7 @@ export function comment(anchor) { * @param {Element | Text} dom * @param {boolean} is_fragment * @param {null | Text | Comment | Element} anchor - * @returns {void} + * @returns {import('#client').TemplateNode | import('#client').TemplateNode[]} */ function close_template(dom, is_fragment, anchor) { /** @type {import('#client').TemplateNode | Array} */ @@ -193,22 +193,22 @@ function close_template(dom, is_fragment, anchor) { } /** @type {import('#client').Block} */ (current_block).d = current; + + return current; } /** * @param {null | Text | Comment | Element} anchor * @param {Element | Text} dom - * @returns {void} */ export function close(anchor, dom) { - close_template(dom, false, anchor); + return close_template(dom, false, anchor); } /** * @param {null | Text | Comment | Element} anchor * @param {Element | Text} dom - * @returns {void} */ export function close_frag(anchor, dom) { - close_template(dom, true, anchor); + return close_template(dom, true, anchor); }