From f75b46b1813839df13ec1815b9c2e2c32f7dad96 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Tue, 9 Jan 2024 14:45:13 +0000 Subject: [PATCH] use rAF --- .../svelte/src/internal/client/runtime.js | 29 ++++++++++--------- .../svelte/src/internal/client/transitions.js | 11 ++++--- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js index 90043bdb90..a483999ec8 100644 --- a/packages/svelte/src/internal/client/runtime.js +++ b/packages/svelte/src/internal/client/runtime.js @@ -37,6 +37,7 @@ let current_scheduler_mode = FLUSH_MICROTASK; // Used for handling scheduling let is_micro_task_queued = false; let is_task_queued = false; +let is_frame_queued = false; // Used for $inspect export let is_batching_effect = false; @@ -51,7 +52,7 @@ let current_queued_effects = []; /** @type {Array<() => void>} */ let current_queued_tasks = []; /** @type {Array<() => void>} */ -let current_queued_microtasks = []; +let current_queued_frames = []; let flush_count = 0; // Handle signal reactivity tree dependencies and consumer @@ -597,11 +598,6 @@ function process_microtask() { if (!is_micro_task_queued) { flush_count = 0; } - if (current_queued_microtasks.length > 0) { - const tasks = current_queued_microtasks.slice(); - current_queued_microtasks = []; - run_all(tasks); - } } /** @@ -636,6 +632,13 @@ function process_task() { run_all(tasks); } +function process_frames() { + is_frame_queued = false; + const frames = current_queued_frames.slice(); + current_queued_frames = []; + run_all(frames); +} + /** * @param {() => void} fn * @returns {void} @@ -652,12 +655,12 @@ export function schedule_task(fn) { * @param {() => void} fn * @returns {void} */ -export function schedule_microtask(fn) { - if (!is_micro_task_queued) { - is_micro_task_queued = true; - queueMicrotask(process_microtask); +export function schedule_frame(fn) { + if (!is_frame_queued) { + is_frame_queued = true; + requestAnimationFrame(process_frames); } - current_queued_microtasks.push(fn); + current_queued_frames.push(fn); } /** @@ -720,8 +723,8 @@ export function flushSync(fn) { if (current_queued_pre_and_render_effects.length > 0 || effects.length > 0) { flushSync(); } - if (is_micro_task_queued) { - process_microtask(); + if (is_frame_queued) { + process_frames(); } if (is_task_queued) { process_task(); diff --git a/packages/svelte/src/internal/client/transitions.js b/packages/svelte/src/internal/client/transitions.js index d1bb511cb7..5a426d3143 100644 --- a/packages/svelte/src/internal/client/transitions.js +++ b/packages/svelte/src/internal/client/transitions.js @@ -21,7 +21,7 @@ import { managed_effect, managed_pre_effect, mark_subtree_inert, - schedule_microtask, + schedule_frame, untrack } from './runtime.js'; import { raf } from './timing.js'; @@ -646,7 +646,8 @@ function each_item_transition(transition) { transitions.delete(transition); if (transition.r !== 'key') { for (let other of transitions) { - if (other.r === 'key' || other.r === 'in') { + const type = other.r; + if (type === 'key' || type === 'in') { transitions.delete(other); } } @@ -675,13 +676,15 @@ function each_item_animate(block, transitions, index, index_is_reactive) { if (prev_index !== index) { const from_dom = /** @type {Element} */ (get_first_element(block)); const from = from_dom.getBoundingClientRect(); + let deferred = false; // Cancel any existing key transitions for (const transition of transitions) { - if (transition.r === 'key') { + const type = transition.r; + if (type === 'key') { transition.c(); } } - schedule_microtask(() => { + schedule_frame(() => { trigger_transitions(transitions, 'key', from); }); }