mirror of https://github.com/sveltejs/svelte
chore: centralise branch management (#16977)
* WIP * WIP * WIP * WIP * WIP * fix hydration * simplify * all tests passing * key blocks * snippets * fix * tidy up * WIP await * tidy up * fix * neaten up * unused * tweak * elements * changeset * fix * preserve newer batches * add comment * add comment * no longer necessary apparently? * move legacy logic to key blockpull/16984/head
Rich Harris
1 week ago
committed by
GitHub
parent
9a488d6b25
commit
b8627e511d
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
chore: centralise branch management
|
||||||
@ -0,0 +1,185 @@
|
|||||||
|
/** @import { Effect, TemplateNode } from '#client' */
|
||||||
|
import { is_runes } from '../../context.js';
|
||||||
|
import { Batch, current_batch } from '../../reactivity/batch.js';
|
||||||
|
import {
|
||||||
|
branch,
|
||||||
|
destroy_effect,
|
||||||
|
move_effect,
|
||||||
|
pause_effect,
|
||||||
|
resume_effect
|
||||||
|
} from '../../reactivity/effects.js';
|
||||||
|
import { set_should_intro, should_intro } from '../../render.js';
|
||||||
|
import { hydrate_node, hydrating } from '../hydration.js';
|
||||||
|
import { create_text, should_defer_append } from '../operations.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {{ effect: Effect, fragment: DocumentFragment }} Branch
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @template Key
|
||||||
|
*/
|
||||||
|
export class BranchManager {
|
||||||
|
/** @type {TemplateNode} */
|
||||||
|
anchor;
|
||||||
|
|
||||||
|
/** @type {Map<Batch, Key>} */
|
||||||
|
#batches = new Map();
|
||||||
|
|
||||||
|
/** @type {Map<Key, Effect>} */
|
||||||
|
#onscreen = new Map();
|
||||||
|
|
||||||
|
/** @type {Map<Key, Branch>} */
|
||||||
|
#offscreen = new Map();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether to pause (i.e. outro) on change, or destroy immediately.
|
||||||
|
* This is necessary for `<svelte:element>`
|
||||||
|
*/
|
||||||
|
#transition = true;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {TemplateNode} anchor
|
||||||
|
* @param {boolean} transition
|
||||||
|
*/
|
||||||
|
constructor(anchor, transition = true) {
|
||||||
|
this.anchor = anchor;
|
||||||
|
this.#transition = transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
#commit = () => {
|
||||||
|
var batch = /** @type {Batch} */ (current_batch);
|
||||||
|
|
||||||
|
// if this batch was made obsolete, bail
|
||||||
|
if (!this.#batches.has(batch)) return;
|
||||||
|
|
||||||
|
var key = /** @type {Key} */ (this.#batches.get(batch));
|
||||||
|
|
||||||
|
var onscreen = this.#onscreen.get(key);
|
||||||
|
|
||||||
|
if (onscreen) {
|
||||||
|
// effect is already in the DOM — abort any current outro
|
||||||
|
resume_effect(onscreen);
|
||||||
|
} else {
|
||||||
|
// effect is currently offscreen. put it in the DOM
|
||||||
|
var offscreen = this.#offscreen.get(key);
|
||||||
|
|
||||||
|
if (offscreen) {
|
||||||
|
this.#onscreen.set(key, offscreen.effect);
|
||||||
|
this.#offscreen.delete(key);
|
||||||
|
|
||||||
|
// remove the anchor...
|
||||||
|
/** @type {TemplateNode} */ (offscreen.fragment.lastChild).remove();
|
||||||
|
|
||||||
|
// ...and append the fragment
|
||||||
|
this.anchor.before(offscreen.fragment);
|
||||||
|
onscreen = offscreen.effect;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const [b, k] of this.#batches) {
|
||||||
|
this.#batches.delete(b);
|
||||||
|
|
||||||
|
if (b === batch) {
|
||||||
|
// keep values for newer batches
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
const offscreen = this.#offscreen.get(k);
|
||||||
|
|
||||||
|
if (offscreen) {
|
||||||
|
// for older batches, destroy offscreen effects
|
||||||
|
// as they will never be committed
|
||||||
|
destroy_effect(offscreen.effect);
|
||||||
|
this.#offscreen.delete(k);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// outro/destroy all onscreen effects...
|
||||||
|
for (const [k, effect] of this.#onscreen) {
|
||||||
|
// ...except the one that was just committed
|
||||||
|
if (k === key) continue;
|
||||||
|
|
||||||
|
const on_destroy = () => {
|
||||||
|
const keys = Array.from(this.#batches.values());
|
||||||
|
|
||||||
|
if (keys.includes(k)) {
|
||||||
|
// keep the effect offscreen, as another batch will need it
|
||||||
|
var fragment = document.createDocumentFragment();
|
||||||
|
move_effect(effect, fragment);
|
||||||
|
|
||||||
|
fragment.append(create_text()); // TODO can we avoid this?
|
||||||
|
|
||||||
|
this.#offscreen.set(k, { effect, fragment });
|
||||||
|
} else {
|
||||||
|
destroy_effect(effect);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#onscreen.delete(k);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.#transition || !onscreen) {
|
||||||
|
pause_effect(effect, on_destroy, false);
|
||||||
|
} else {
|
||||||
|
on_destroy();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {any} key
|
||||||
|
* @param {null | ((target: TemplateNode) => void)} fn
|
||||||
|
*/
|
||||||
|
ensure(key, fn) {
|
||||||
|
var batch = /** @type {Batch} */ (current_batch);
|
||||||
|
var defer = should_defer_append();
|
||||||
|
|
||||||
|
if (fn && !this.#onscreen.has(key) && !this.#offscreen.has(key)) {
|
||||||
|
if (defer) {
|
||||||
|
var fragment = document.createDocumentFragment();
|
||||||
|
var target = create_text();
|
||||||
|
|
||||||
|
fragment.append(target);
|
||||||
|
|
||||||
|
this.#offscreen.set(key, {
|
||||||
|
effect: branch(() => fn(target)),
|
||||||
|
fragment
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.#onscreen.set(
|
||||||
|
key,
|
||||||
|
branch(() => fn(this.anchor))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#batches.set(batch, key);
|
||||||
|
|
||||||
|
if (defer) {
|
||||||
|
for (const [k, effect] of this.#onscreen) {
|
||||||
|
if (k === key) {
|
||||||
|
batch.skipped_effects.delete(effect);
|
||||||
|
} else {
|
||||||
|
batch.skipped_effects.add(effect);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const [k, branch] of this.#offscreen) {
|
||||||
|
if (k === key) {
|
||||||
|
batch.skipped_effects.delete(branch.effect);
|
||||||
|
} else {
|
||||||
|
batch.skipped_effects.add(branch.effect);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
batch.add_callback(this.#commit);
|
||||||
|
} else {
|
||||||
|
if (hydrating) {
|
||||||
|
this.anchor = hydrate_node;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#commit();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue