Skip to content

Commit 92ff62e

Browse files
Rich-HarrisRich-Harris
committedJan 16, 2025·
merge
2 parents c81e94a + 0c0fd47 commit 92ff62e

File tree

12 files changed

+98
-89
lines changed

12 files changed

+98
-89
lines changed
 

‎packages/svelte/src/internal/client/dom/blocks/await.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
set_dev_current_component_function
1414
} from '../../runtime.js';
1515
import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
16-
import { queue_micro_task } from '../task.js';
16+
import { queue_post_micro_task } from '../task.js';
1717
import { UNINITIALIZED } from '../../../../constants.js';
1818

1919
const PENDING = 0;
@@ -148,7 +148,7 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
148148
} else {
149149
// Wait a microtask before checking if we should show the pending state as
150150
// the promise might have resolved by the next microtask.
151-
queue_micro_task(() => {
151+
queue_post_micro_task(() => {
152152
if (!resolved) update(PENDING, true);
153153
});
154154
}

‎packages/svelte/src/internal/client/dom/blocks/boundary.js

+26-40
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ import {
2727
set_hydrate_node
2828
} from '../hydration.js';
2929
import { get_next_sibling } from '../operations.js';
30-
import { queue_micro_task } from '../task.js';
30+
import { queue_boundary_micro_task } from '../task.js';
3131

32-
const SUSPEND_INCREMENT = Symbol();
33-
const SUSPEND_DECREMENT = Symbol();
32+
const ASYNC_INCREMENT = Symbol();
33+
const ASYNC_DECREMENT = Symbol();
3434

3535
/**
3636
* @param {Effect} boundary
@@ -70,10 +70,10 @@ export function boundary(node, props, boundary_fn) {
7070
/** @type {Effect} */
7171
var boundary_effect;
7272
/** @type {Effect | null} */
73-
var suspended_effect = null;
73+
var async_effect = null;
7474
/** @type {DocumentFragment | null} */
75-
var suspended_fragment = null;
76-
var suspend_count = 0;
75+
var async_fragment = null;
76+
var async_count = 0;
7777

7878
block(() => {
7979
var boundary = /** @type {Effect} */ (active_effect);
@@ -101,36 +101,36 @@ export function boundary(node, props, boundary_fn) {
101101
boundary.fn = (/** @type {unknown} */ input) => {
102102
let pending = props.pending;
103103

104-
if (input === SUSPEND_INCREMENT) {
104+
if (input === ASYNC_INCREMENT) {
105105
if (!pending) {
106106
// TODO in this case we need to find the parent boundary
107107
return false;
108108
}
109109

110-
if (suspend_count++ === 0) {
111-
queue_micro_task(() => {
112-
if (suspended_effect) {
110+
if (async_count++ === 0) {
111+
queue_boundary_micro_task(() => {
112+
if (async_effect) {
113113
return;
114114
}
115115

116116
var effect = boundary_effect;
117-
suspended_effect = boundary_effect;
117+
async_effect = boundary_effect;
118118

119119
pause_effect(
120-
suspended_effect,
120+
async_effect,
121121
() => {
122122
/** @type {TemplateNode | null} */
123123
var node = effect.nodes_start;
124124
var end = effect.nodes_end;
125-
suspended_fragment = document.createDocumentFragment();
125+
async_fragment = document.createDocumentFragment();
126126

127127
while (node !== null) {
128128
/** @type {TemplateNode | null} */
129129
var sibling =
130130
node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node));
131131

132132
node.remove();
133-
suspended_fragment.append(node);
133+
async_fragment.append(node);
134134
node = sibling;
135135
}
136136
},
@@ -146,23 +146,23 @@ export function boundary(node, props, boundary_fn) {
146146
return true;
147147
}
148148

149-
if (input === SUSPEND_DECREMENT) {
149+
if (input === ASYNC_DECREMENT) {
150150
if (!pending) {
151151
// TODO in this case we need to find the parent boundary
152152
return false;
153153
}
154154

155-
if (--suspend_count === 0) {
156-
queue_micro_task(() => {
157-
if (!suspended_effect) {
155+
if (--async_count === 0) {
156+
queue_boundary_micro_task(() => {
157+
if (!async_effect) {
158158
return;
159159
}
160160
if (boundary_effect) {
161161
destroy_effect(boundary_effect);
162162
}
163-
boundary_effect = suspended_effect;
164-
suspended_effect = null;
165-
anchor.before(/** @type {DocumentFragment} */ (suspended_fragment));
163+
boundary_effect = async_effect;
164+
async_effect = null;
165+
anchor.before(/** @type {DocumentFragment} */ (async_fragment));
166166
resume_effect(boundary_effect);
167167
});
168168
}
@@ -201,7 +201,7 @@ export function boundary(node, props, boundary_fn) {
201201
}
202202

203203
if (failed) {
204-
queue_micro_task(() => {
204+
queue_boundary_micro_task(() => {
205205
render_snippet(() => {
206206
failed(
207207
anchor,
@@ -228,9 +228,9 @@ export function boundary(node, props, boundary_fn) {
228228

229229
/**
230230
* @param {Effect | null} effect
231-
* @param {typeof SUSPEND_INCREMENT | typeof SUSPEND_DECREMENT} trigger
231+
* @param {typeof ASYNC_INCREMENT | typeof ASYNC_DECREMENT} trigger
232232
*/
233-
function trigger_suspense(effect, trigger) {
233+
export function trigger_async_boundary(effect, trigger) {
234234
var current = effect;
235235

236236
while (current !== null) {
@@ -244,20 +244,6 @@ function trigger_suspense(effect, trigger) {
244244
}
245245
}
246246

247-
export function create_suspense() {
248-
var current = active_effect;
249-
250-
const suspend = () => {
251-
trigger_suspense(current, SUSPEND_INCREMENT);
252-
};
253-
254-
const unsuspend = () => {
255-
trigger_suspense(current, SUSPEND_DECREMENT);
256-
};
257-
258-
return [suspend, unsuspend];
259-
}
260-
261247
/**
262248
* @template T
263249
* @param {Promise<T>} promise
@@ -282,7 +268,7 @@ export async function preserve_context(promise) {
282268
}
283269

284270
// @ts-ignore
285-
boundary.fn(SUSPEND_INCREMENT);
271+
boundary.fn(ASYNC_INCREMENT);
286272

287273
const value = await promise;
288274

@@ -293,7 +279,7 @@ export async function preserve_context(promise) {
293279
set_component_context(previous_component_context);
294280

295281
// @ts-ignore
296-
boundary.fn(SUSPEND_DECREMENT);
282+
boundary.fn(ASYNC_DECREMENT);
297283

298284
return value;
299285
}

‎packages/svelte/src/internal/client/dom/blocks/each.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import {
3434
import { source, mutable_source, internal_set } from '../../reactivity/sources.js';
3535
import { array_from, is_array } from '../../../shared/utils.js';
3636
import { INERT } from '../../constants.js';
37-
import { queue_micro_task } from '../task.js';
37+
import { queue_post_micro_task } from '../task.js';
3838
import { active_effect, active_reaction, get } from '../../runtime.js';
3939
import { DEV } from 'esm-env';
4040
import { derived_safe_equal } from '../../reactivity/deriveds.js';
@@ -470,7 +470,7 @@ function reconcile(array, state, anchor, render_fn, flags, is_inert, get_key, ge
470470
}
471471

472472
if (is_animated) {
473-
queue_micro_task(() => {
473+
queue_post_micro_task(() => {
474474
if (to_animate === undefined) return;
475475
for (item of to_animate) {
476476
item.a?.apply();

‎packages/svelte/src/internal/client/dom/css.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { DEV } from 'esm-env';
2-
import { queue_micro_task } from './task.js';
2+
import { queue_post_micro_task } from './task.js';
33
import { register_style } from '../dev/css.js';
44

55
/**
66
* @param {Node} anchor
77
* @param {{ hash: string, code: string }} css
88
*/
99
export function append_styles(anchor, css) {
10-
// Use `queue_micro_task` to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results
11-
queue_micro_task(() => {
10+
// Use `queue_post_micro_task` to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results
11+
queue_post_micro_task(() => {
1212
var root = anchor.getRootNode();
1313

1414
var target = /** @type {ShadowRoot} */ (root).host

‎packages/svelte/src/internal/client/dom/elements/bindings/input.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { render_effect, teardown } from '../../../reactivity/effects.js';
33
import { listen_to_event_and_reset_event } from './shared.js';
44
import * as e from '../../../errors.js';
55
import { is } from '../../../proxy.js';
6-
import { queue_micro_task } from '../../task.js';
6+
import { queue_post_micro_task } from '../../task.js';
77
import { hydrating } from '../../hydration.js';
88
import { is_runes, untrack } from '../../../runtime.js';
99

@@ -158,14 +158,14 @@ export function bind_group(inputs, group_index, input, get, set = get) {
158158
if (!pending.has(binding_group)) {
159159
pending.add(binding_group);
160160

161-
queue_micro_task(() => {
161+
queue_post_micro_task(() => {
162162
// necessary to maintain binding group order in all insertion scenarios
163163
binding_group.sort((a, b) => (a.compareDocumentPosition(b) === 4 ? -1 : 1));
164164
pending.delete(binding_group);
165165
});
166166
}
167167

168-
queue_micro_task(() => {
168+
queue_post_micro_task(() => {
169169
if (hydration_mismatch) {
170170
var value;
171171

‎packages/svelte/src/internal/client/dom/elements/bindings/this.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { STATE_SYMBOL } from '../../../constants.js';
22
import { effect, render_effect } from '../../../reactivity/effects.js';
33
import { untrack } from '../../../runtime.js';
4-
import { queue_micro_task } from '../../task.js';
4+
import { queue_post_micro_task } from '../../task.js';
55

66
/**
77
* @param {any} bound_value
@@ -49,7 +49,7 @@ export function bind_this(element_or_component = {}, update, get_value, get_part
4949

5050
return () => {
5151
// We cannot use effects in the teardown phase, we we use a microtask instead.
52-
queue_micro_task(() => {
52+
queue_post_micro_task(() => {
5353
if (parts && is_bound_this(get_value(...parts), element_or_component)) {
5454
update(null, ...parts);
5555
}

‎packages/svelte/src/internal/client/dom/elements/events.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { teardown } from '../../reactivity/effects.js';
33
import { define_property, is_array } from '../../../shared/utils.js';
44
import { hydrating } from '../hydration.js';
5-
import { queue_micro_task } from '../task.js';
5+
import { queue_post_micro_task } from '../task.js';
66
import { FILENAME } from '../../../../constants.js';
77
import * as w from '../../warnings.js';
88
import {
@@ -77,7 +77,7 @@ export function create_event(event_name, dom, handler, options) {
7777
event_name.startsWith('touch') ||
7878
event_name === 'wheel'
7979
) {
80-
queue_micro_task(() => {
80+
queue_post_micro_task(() => {
8181
dom.addEventListener(event_name, target_handler, options);
8282
});
8383
} else {

‎packages/svelte/src/internal/client/dom/elements/misc.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { hydrating } from '../hydration.js';
22
import { clear_text_content, get_first_child } from '../operations.js';
3-
import { queue_micro_task } from '../task.js';
3+
import { queue_post_micro_task } from '../task.js';
44

55
/**
66
* @param {HTMLElement} dom
@@ -12,7 +12,7 @@ export function autofocus(dom, value) {
1212
const body = document.body;
1313
dom.autofocus = true;
1414

15-
queue_micro_task(() => {
15+
queue_post_micro_task(() => {
1616
if (document.activeElement === body) {
1717
dom.focus();
1818
}

‎packages/svelte/src/internal/client/dom/elements/transitions.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { should_intro } from '../../render.js';
1313
import { current_each_item } from '../blocks/each.js';
1414
import { TRANSITION_GLOBAL, TRANSITION_IN, TRANSITION_OUT } from '../../../../constants.js';
1515
import { BLOCK_EFFECT, EFFECT_RAN, EFFECT_TRANSPARENT } from '../../constants.js';
16-
import { queue_micro_task } from '../task.js';
16+
import { queue_post_micro_task } from '../task.js';
1717

1818
/**
1919
* @param {Element} element
@@ -326,7 +326,7 @@ function animate(element, options, counterpart, t2, on_finish) {
326326
var a;
327327
var aborted = false;
328328

329-
queue_micro_task(() => {
329+
queue_post_micro_task(() => {
330330
if (aborted) return;
331331
var o = options({ direction: is_intro ? 'in' : 'out' });
332332
a = animate(element, o, counterpart, t2, on_finish);

‎packages/svelte/src/internal/client/dom/task.js

+41-25
Original file line numberDiff line numberDiff line change
@@ -10,54 +10,70 @@ let is_micro_task_queued = false;
1010
let is_idle_task_queued = false;
1111

1212
/** @type {Array<() => void>} */
13-
let current_queued_micro_tasks = [];
13+
let queued_boundary_microtasks = [];
1414
/** @type {Array<() => void>} */
15-
let current_queued_idle_tasks = [];
15+
let queued_post_microtasks = [];
16+
/** @type {Array<() => void>} */
17+
let queued_idle_tasks = [];
1618

17-
function process_micro_tasks() {
18-
is_micro_task_queued = false;
19-
const tasks = current_queued_micro_tasks.slice();
20-
current_queued_micro_tasks = [];
19+
export function flush_boundary_micro_tasks() {
20+
const tasks = queued_boundary_microtasks.slice();
21+
queued_boundary_microtasks = [];
2122
run_all(tasks);
2223
}
2324

24-
function process_idle_tasks() {
25-
is_idle_task_queued = false;
26-
const tasks = current_queued_idle_tasks.slice();
27-
current_queued_idle_tasks = [];
25+
export function flush_post_micro_tasks() {
26+
const tasks = queued_post_microtasks.slice();
27+
queued_post_microtasks = [];
2828
run_all(tasks);
2929
}
3030

31+
export function flush_idle_tasks() {
32+
if (is_idle_task_queued) {
33+
is_idle_task_queued = false;
34+
const tasks = queued_idle_tasks.slice();
35+
queued_idle_tasks = [];
36+
run_all(tasks);
37+
}
38+
}
39+
40+
function flush_all_micro_tasks() {
41+
if (is_micro_task_queued) {
42+
is_micro_task_queued = false;
43+
flush_boundary_micro_tasks();
44+
flush_post_micro_tasks();
45+
}
46+
}
47+
3148
/**
3249
* @param {() => void} fn
3350
*/
34-
export function queue_micro_task(fn) {
51+
export function queue_boundary_micro_task(fn) {
3552
if (!is_micro_task_queued) {
3653
is_micro_task_queued = true;
37-
queueMicrotask(process_micro_tasks);
54+
queueMicrotask(flush_all_micro_tasks);
3855
}
39-
current_queued_micro_tasks.push(fn);
56+
queued_boundary_microtasks.push(fn);
4057
}
4158

4259
/**
4360
* @param {() => void} fn
4461
*/
45-
export function queue_idle_task(fn) {
46-
if (!is_idle_task_queued) {
47-
is_idle_task_queued = true;
48-
request_idle_callback(process_idle_tasks);
62+
export function queue_post_micro_task(fn) {
63+
if (!is_micro_task_queued) {
64+
is_micro_task_queued = true;
65+
queueMicrotask(flush_all_micro_tasks);
4966
}
50-
current_queued_idle_tasks.push(fn);
67+
queued_post_microtasks.push(fn);
5168
}
5269

5370
/**
54-
* Synchronously run any queued tasks.
71+
* @param {() => void} fn
5572
*/
56-
export function flush_tasks() {
57-
if (is_micro_task_queued) {
58-
process_micro_tasks();
59-
}
60-
if (is_idle_task_queued) {
61-
process_idle_tasks();
73+
export function queue_idle_task(fn) {
74+
if (!is_idle_task_queued) {
75+
is_idle_task_queued = true;
76+
request_idle_callback(flush_idle_tasks);
6277
}
78+
queued_idle_tasks.push(fn);
6379
}

‎packages/svelte/src/internal/client/runtime.js

+11-4
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,11 @@ import {
2828
BOUNDARY_EFFECT,
2929
REACTION_IS_UPDATING
3030
} from './constants.js';
31-
import { flush_tasks } from './dom/task.js';
31+
import {
32+
flush_idle_tasks,
33+
flush_boundary_micro_tasks,
34+
flush_post_micro_tasks
35+
} from './dom/task.js';
3236
import { add_owner } from './dev/ownership.js';
3337
import { internal_set, set, source } from './reactivity/sources.js';
3438
import { destroy_derived, execute_derived, update_derived } from './reactivity/deriveds.js';
@@ -740,11 +744,12 @@ function flush_queued_effects(effects) {
740744
}
741745
}
742746

743-
function process_deferred() {
747+
function flushed_deferred() {
744748
is_micro_task_queued = false;
745749
if (flush_count > 1001) {
746750
return;
747751
}
752+
// flush_before_process_microtasks();
748753
const previous_queued_root_effects = queued_root_effects;
749754
queued_root_effects = [];
750755
flush_queued_root_effects(previous_queued_root_effects);
@@ -766,7 +771,7 @@ export function schedule_effect(signal) {
766771
if (scheduler_mode === FLUSH_MICROTASK) {
767772
if (!is_micro_task_queued) {
768773
is_micro_task_queued = true;
769-
queueMicrotask(process_deferred);
774+
queueMicrotask(flushed_deferred);
770775
}
771776
}
772777

@@ -885,7 +890,9 @@ export function flush_sync(fn) {
885890

886891
var result = fn?.();
887892

888-
flush_tasks();
893+
flush_boundary_micro_tasks();
894+
flush_post_micro_tasks();
895+
flush_idle_tasks();
889896
if (queued_root_effects.length > 0 || root_effects.length > 0) {
890897
flush_sync();
891898
}

‎packages/svelte/tests/animation-helpers.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { flushSync } from 'svelte';
22
import { raf as svelte_raf } from 'svelte/internal/client';
3-
import { queue_micro_task } from '../src/internal/client/dom/task.js';
3+
import { queue_post_micro_task } from '../src/internal/client/dom/task.js';
44

55
export const raf = {
66
animations: new Set(),
@@ -132,7 +132,7 @@ class Animation {
132132
/** @param {() => {}} fn */
133133
set onfinish(fn) {
134134
if (this.#duration === 0) {
135-
queue_micro_task(fn);
135+
queue_post_micro_task(fn);
136136
} else {
137137
this.#onfinish = () => {
138138
fn();

0 commit comments

Comments
 (0)
Please sign in to comment.