msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

start converting boundary to a class

Browse Source
async-changeset
Rich Harris 7 months ago
parent 7bd6969711
commit 7bf7e0dd78
5 changed files with 336 additions and 315 deletions
Show Stats Download Patch File Download Diff File

176
packages/svelte/src/internal/client/dom/blocks/boundary.js
Unescape View File

@ -37,37 +37,22 @@ import { from_async_derived, set_from_async_derived } from '../../reactivity/der
import { raf } from '../../timing.js';
import { loop } from '../../loop.js';
const ASYNC_INCREMENT = Symbol();
const ASYNC_DECREMENT = Symbol();
const ADD_CALLBACK = Symbol();
const ADD_RENDER_EFFECT = Symbol();
const ADD_EFFECT = Symbol();
const COMMIT = Symbol();
/** @type {Boundary | null} */
export let active_boundary = null;
/**
* @param {Effect} boundary
* @param {() => Effect | null} fn
* @returns {Effect | null}
*/
function with_boundary(boundary, fn) {
var previous_effect = active_effect;
var previous_reaction = active_reaction;
var previous_ctx = component_context;
set_active_effect(boundary);
set_active_reaction(boundary);
set_component_context(boundary.ctx);
try {
return fn();
} finally {
set_active_effect(previous_effect);
set_active_reaction(previous_reaction);
set_component_context(previous_ctx);
}
/** @param {Boundary | null} boundary */
export function set_active_boundary(boundary) {
active_boundary = boundary;
}
class Boundary {
/** @type {Boundary | null} */
#parent;
var flags = EFFECT_TRANSPARENT | EFFECT_PRESERVED | BOUNDARY_EFFECT;
/** @type {Effect} */
#effect;
/** @type {Set<() => void>} */
#callbacks = new Set();
/**
* @param {TemplateNode} node
@ -79,14 +64,17 @@ var flags = EFFECT_TRANSPARENT | EFFECT_PRESERVED | BOUNDARY_EFFECT;
* showPendingFor?: number;
* }} props
* @param {((anchor: Node) => void)} children
* @returns {void}
*/
export function boundary(node, props, children) {
constructor(node, props, children) {
var anchor = node;
this.#parent = active_boundary;
active_boundary = this;
var parent_boundary = find_boundary(active_effect);
block(() => {
this.#effect = block(() => {
/** @type {Effect | null} */
var main_effect = null;
@ -100,13 +88,10 @@ export function boundary(node, props, children) {
var offscreen_fragment = null;
var async_count = 0;
var boundary = /** @type {Effect} */ (active_effect);
var boundary_effect = /** @type {Effect} */ (active_effect);
var hydrate_open = hydrate_node;
var is_creating_fallback = false;
/** @type {Set<() => void>} */
var callbacks = new Set();
/** @type {Effect[]} */
var render_effects = [];
@ -119,27 +104,27 @@ export function boundary(node, props, children) {
* @param {() => void} snippet_fn
* @returns {Effect | null}
*/
function render_snippet(snippet_fn) {
return with_boundary(boundary, () => {
const render_snippet = (snippet_fn) => {
return this.#run(() => {
is_creating_fallback = true;
try {
return branch(snippet_fn);
} catch (error) {
handle_error(error, boundary, null, boundary.ctx);
handle_error(error, boundary_effect, null, boundary_effect.ctx);
return null;
} finally {
reset_is_throwing_error();
is_creating_fallback = false;
}
});
}
};
function reset() {
const reset = () => {
async_count = 0;
if ((boundary.f & BOUNDARY_SUSPENDED) !== 0) {
boundary.f ^= BOUNDARY_SUSPENDED;
if ((boundary_effect.f & BOUNDARY_SUSPENDED) !== 0) {
boundary_effect.f ^= BOUNDARY_SUSPENDED;
}
if (failed_effect !== null) {
@ -148,7 +133,7 @@ export function boundary(node, props, children) {
});
}
main_effect = with_boundary(boundary, () => {
main_effect = this.#run(() => {
is_creating_fallback = false;
try {
@ -159,18 +144,18 @@ export function boundary(node, props, children) {
});
if (async_count > 0) {
boundary.f |= BOUNDARY_SUSPENDED;
boundary_effect.f |= BOUNDARY_SUSPENDED;
show_pending_snippet(true);
}
}
};
function unsuspend() {
const unsuspend = () => {
if (keep_pending_snippet || async_count > 0) {
return;
}
if ((boundary.f & BOUNDARY_SUSPENDED) !== 0) {
boundary.f ^= BOUNDARY_SUSPENDED;
if ((boundary_effect.f & BOUNDARY_SUSPENDED) !== 0) {
boundary_effect.f ^= BOUNDARY_SUSPENDED;
}
for (const e of render_effects) {
@ -183,8 +168,8 @@ export function boundary(node, props, children) {
}
}
for (const fn of callbacks) fn();
callbacks.clear();
for (const fn of this.#callbacks) fn();
this.#callbacks.clear();
if (pending_effect) {
pause_effect(pending_effect, () => {
@ -206,7 +191,7 @@ export function boundary(node, props, children) {
handle_error(error, e, null, e.ctx);
}
}
}
};
/**
* @param {boolean} initial
@ -249,10 +234,13 @@ export function boundary(node, props, children) {
}
// @ts-ignore We re-use the effect's fn property to avoid allocation of an additional field
boundary.fn = (/** @type {unknown} */ input, /** @type {any} */ payload) => {
boundary_effect.fn = (/** @type {unknown} */ input, /** @type {any} */ payload) => {
if (input === ASYNC_INCREMENT) {
// post-init, show the pending snippet after a timeout
if ((boundary.f & BOUNDARY_SUSPENDED) === 0 && (boundary.f & EFFECT_RAN) !== 0) {
if (
(boundary_effect.f & BOUNDARY_SUSPENDED) === 0 &&
(boundary_effect.f & EFFECT_RAN) !== 0
) {
var start = raf.now();
var end = start + (props.showPendingAfter ?? 500);
@ -264,7 +252,7 @@ export function boundary(node, props, children) {
});
}
boundary.f |= BOUNDARY_SUSPENDED;
boundary_effect.f |= BOUNDARY_SUSPENDED;
async_count++;
return;
@ -283,11 +271,6 @@ export function boundary(node, props, children) {
return;
}
if (input === ADD_CALLBACK) {
callbacks.add(payload);
return;
}
if (input === ADD_RENDER_EFFECT) {
render_effects.push(payload);
return;
@ -350,7 +333,7 @@ export function boundary(node, props, children) {
};
// @ts-ignore
boundary.fn.is_pending = () => props.pending;
boundary_effect.fn.is_pending = () => props.pending;
if (hydrating) {
hydrate_next();
@ -373,7 +356,7 @@ export function boundary(node, props, children) {
queueMicrotask(() => {
destroy_effect(/** @type {Effect} */ (pending_effect));
main_effect = with_boundary(boundary, () => {
main_effect = this.#run(() => {
return branch(() => children(anchor));
});
});
@ -381,7 +364,7 @@ export function boundary(node, props, children) {
main_effect = branch(() => children(anchor));
if (async_count > 0) {
boundary.f |= BOUNDARY_SUSPENDED;
boundary_effect.f |= BOUNDARY_SUSPENDED;
show_pending_snippet(true);
}
}
@ -392,6 +375,62 @@ export function boundary(node, props, children) {
if (hydrating) {
anchor = hydrate_node;
}
active_boundary = this.#parent;
}
/**
* @param {() => Effect | null} fn
*/
#run(fn) {
var previous_boundary = active_boundary;
var previous_effect = active_effect;
var previous_reaction = active_reaction;
var previous_ctx = component_context;
active_boundary = this;
set_active_effect(this.#effect);
set_active_reaction(this.#effect);
set_component_context(this.#effect.ctx);
try {
return fn();
} finally {
active_boundary = previous_boundary;
set_active_effect(previous_effect);
set_active_reaction(previous_reaction);
set_component_context(previous_ctx);
}
}
/** @param {() => void} fn */
add_callback(fn) {
this.#callbacks.add(fn);
}
}
const ASYNC_INCREMENT = Symbol();
const ASYNC_DECREMENT = Symbol();
const ADD_RENDER_EFFECT = Symbol();
const ADD_EFFECT = Symbol();
const COMMIT = Symbol();
var flags = EFFECT_TRANSPARENT | EFFECT_PRESERVED | BOUNDARY_EFFECT;
/**
* @param {TemplateNode} node
* @param {{
* onerror?: (error: unknown, reset: () => void) => void;
* failed?: (anchor: Node, error: () => unknown, reset: () => () => void) => void;
* pending?: (anchor: Node) => void;
* showPendingAfter?: number;
* showPendingFor?: number;
* }} props
* @param {((anchor: Node) => void)} children
* @returns {void}
*/
export function boundary(node, props, children) {
new Boundary(node, props, children);
}
/**
@ -500,19 +539,6 @@ export function find_boundary(effect) {
return effect;
}
/**
* @param {Effect | null} boundary
* @param {Function} fn
*/
export function add_boundary_callback(boundary, fn) {
if (boundary === null) {
throw new Error('TODO');
}
// @ts-ignore
boundary.fn(ADD_CALLBACK, fn);
}
/**
* @param {Effect} boundary
* @param {Effect} effect

10
packages/svelte/src/internal/client/dom/blocks/each.js
Unescape View File

@ -39,7 +39,7 @@ import { queue_micro_task } from '../task.js';
import { active_effect, get } from '../../runtime.js';
import { DEV } from 'esm-env';
import { derived_safe_equal } from '../../reactivity/deriveds.js';
import { add_boundary_callback, find_boundary } from './boundary.js';
import { active_boundary } from './boundary.js';
/**
* The row of a keyed each block that is currently updating. We track this
@ -139,7 +139,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
var was_empty = false;
var boundary = find_boundary(active_effect);
var boundary = active_boundary;
/** @type {Map<any, EachItem>} */
var offscreen_items = new Map();
@ -268,9 +268,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
fallback = branch(() => fallback_fn(anchor));
}
} else {
var defer = boundary !== null && should_defer_append();
if (defer) {
if (boundary !== null && should_defer_append()) {
for (i = 0; i < length; i += 1) {
value = array[i];
key = get_key(value, i);
@ -301,7 +299,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
}
}
add_boundary_callback(boundary, commit);
boundary?.add_callback(commit);
} else {
commit();
}

7
packages/svelte/src/internal/client/dom/blocks/if.js
Unescape View File

@ -10,8 +10,7 @@ import {
} from '../hydration.js';
import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
import { HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
import { active_effect } from '../../runtime.js';
import { add_boundary_callback, find_boundary } from './boundary.js';
import { active_boundary } from './boundary.js';
import { create_text, should_defer_append } from '../operations.js';
/**
@ -51,7 +50,7 @@ export function if_block(node, fn, elseif = false) {
/** @type {Effect | null} */
var pending_effect = null;
var boundary = find_boundary(active_effect);
var boundary = active_boundary;
function commit() {
if (offscreen_fragment !== null) {
@ -123,7 +122,7 @@ export function if_block(node, fn, elseif = false) {
}
if (defer) {
add_boundary_callback(boundary, commit);
boundary?.add_callback(commit);
target.remove();
} else {
commit();

7
packages/svelte/src/internal/client/dom/blocks/key.js
Unescape View File

@ -2,10 +2,9 @@
import { UNINITIALIZED } from '../../../../constants.js';
import { block, branch, pause_effect } from '../../reactivity/effects.js';
import { not_equal, safe_not_equal } from '../../reactivity/equality.js';
import { active_effect } from '../../runtime.js';
import { is_runes } from '../../context.js';
import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
import { add_boundary_callback, find_boundary } from './boundary.js';
import { active_boundary } from './boundary.js';
import { create_text, should_defer_append } from '../operations.js';
/**
@ -34,7 +33,7 @@ export function key_block(node, get_key, render_fn) {
/** @type {DocumentFragment | null} */
var offscreen_fragment = null;
var boundary = find_boundary(active_effect);
var boundary = active_boundary;
var changed = is_runes() ? not_equal : safe_not_equal;
@ -68,7 +67,7 @@ export function key_block(node, get_key, render_fn) {
pending_effect = branch(() => render_fn(target));
if (defer) {
add_boundary_callback(boundary, commit);
boundary?.add_callback(commit);
target.remove();
} else {
commit();

7
packages/svelte/src/internal/client/dom/blocks/svelte-component.js
Unescape View File

@ -1,10 +1,9 @@
/** @import { TemplateNode, Dom, Effect } from '#client' */
import { EFFECT_TRANSPARENT } from '../../constants.js';
import { block, branch, pause_effect } from '../../reactivity/effects.js';
import { active_effect } from '../../runtime.js';
import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
import { create_text, should_defer_append } from '../operations.js';
import { add_boundary_callback, find_boundary } from './boundary.js';
import { active_boundary } from './boundary.js';
/**
* @template P
@ -33,7 +32,7 @@ export function component(node, get_component, render_fn) {
/** @type {Effect | null} */
var pending_effect = null;
var boundary = find_boundary(active_effect);
var boundary = active_boundary;
function commit() {
if (effect) {
@ -70,7 +69,7 @@ export function component(node, get_component, render_fn) {
}
if (defer) {
add_boundary_callback(boundary, commit);
boundary?.add_callback(commit);
} else {
commit();
}

Write Preview
Loading…
Cancel
Save