diff --git a/packages/svelte/src/index-client.js b/packages/svelte/src/index-client.js index 1b15ec9fce..2fdc8de0ba 100644 --- a/packages/svelte/src/index-client.js +++ b/packages/svelte/src/index-client.js @@ -192,4 +192,4 @@ export { export { createRawSnippet } from './internal/client/dom/blocks/snippet.js'; -export { suspend, unsuspend } from './internal/client/dom/blocks/boundary.js'; +export { create_suspense } from './internal/client/dom/blocks/boundary.js'; diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js index ba983c4c4b..e2ed644699 100644 --- a/packages/svelte/src/internal/client/dom/blocks/boundary.js +++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js @@ -111,28 +111,34 @@ export function boundary(node, props, boundary_fn) { suspend_count++; if (suspended_effect === null) { - var effect = boundary_effect; - suspended_effect = boundary_effect; - - pause_effect(suspended_effect, () => { - /** @type {TemplateNode | null} */ - var node = effect.nodes_start; - var end = effect.nodes_end; - suspended_fragment = document.createDocumentFragment(); - - while (node !== null) { - /** @type {TemplateNode | null} */ - var sibling = - node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node)); - - node.remove(); - suspended_fragment.append(node); - node = sibling; - } - }, false); - - render_snippet(() => { - pending(anchor); + queue_micro_task(() => { + var effect = boundary_effect; + suspended_effect = boundary_effect; + + pause_effect( + suspended_effect, + () => { + /** @type {TemplateNode | null} */ + var node = effect.nodes_start; + var end = effect.nodes_end; + suspended_fragment = document.createDocumentFragment(); + + while (node !== null) { + /** @type {TemplateNode | null} */ + var sibling = + node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node)); + + node.remove(); + suspended_fragment.append(node); + node = sibling; + } + }, + false + ); + + render_snippet(() => { + pending(anchor); + }); }); } return true; @@ -211,13 +217,17 @@ export function boundary(node, props, boundary_fn) { } } -export function suspend() { - var current = active_effect; +/** + * @param {Effect | null} effect + * @param {typeof SUSPEND_INCREMENT | typeof SUSPEND_DECREMENT} trigger + */ +function trigger_suspense(effect, trigger) { + var current = effect; while (current !== null) { if ((current.f & BOUNDARY_EFFECT) !== 0) { // @ts-ignore - if (current.fn(SUSPEND_INCREMENT)) { + if (current.fn(trigger)) { return; } } @@ -225,16 +235,16 @@ export function suspend() { } } -export function unsuspend() { +export function create_suspense() { var current = active_effect; - while (current !== null) { - if ((current.f & BOUNDARY_EFFECT) !== 0) { - // @ts-ignore - if (current.fn(SUSPEND_DECREMENT)) { - return; - } - } - current = current.parent; - } + const suspend = () => { + trigger_suspense(current, SUSPEND_INCREMENT); + }; + + const unsuspend = () => { + trigger_suspense(current, SUSPEND_DECREMENT); + }; + + return [suspend, unsuspend]; } diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js index 20ded180b0..2bf58c51f7 100644 --- a/packages/svelte/src/internal/client/index.js +++ b/packages/svelte/src/internal/client/index.js @@ -129,7 +129,7 @@ export { update_store, mark_store_binding } from './reactivity/store.js'; -export { boundary, suspend } from './dom/blocks/boundary.js'; +export { boundary } from './dom/blocks/boundary.js'; export { set_text } from './render.js'; export { get,