mirror of https://github.com/sveltejs/svelte
Rich Harris
2 years ago
parent
6a72a4fcb0
commit
6f8ccb9b56
@ -1,140 +1,70 @@
|
||||
import { UNINITIALIZED, KEY_BLOCK } from '../../constants.js';
|
||||
import { UNINITIALIZED } from '../../constants.js';
|
||||
import { hydrate_block_anchor } from '../hydration.js';
|
||||
import { remove } from '../reconciler.js';
|
||||
import { current_block, execute_effect } from '../../runtime.js';
|
||||
import { destroy_effect, render_effect } from '../../reactivity/effects.js';
|
||||
import { trigger_transitions } from '../elements/transitions.js';
|
||||
import { pause_effect, render_effect } from '../../reactivity/effects.js';
|
||||
import { safe_not_equal } from '../../reactivity/equality.js';
|
||||
|
||||
/** @returns {import('../../types.js').KeyBlock} */
|
||||
function create_key_block() {
|
||||
return {
|
||||
// dom
|
||||
d: null,
|
||||
// effect
|
||||
e: null,
|
||||
// parent
|
||||
p: /** @type {import('../../types.js').Block} */ (current_block),
|
||||
// transition
|
||||
r: null,
|
||||
// type
|
||||
t: KEY_BLOCK
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @template V
|
||||
* @param {Comment} anchor_node
|
||||
* @param {() => V} key
|
||||
* @param {() => V} get_key
|
||||
* @param {(anchor: Node) => void} render_fn
|
||||
* @returns {void}
|
||||
*/
|
||||
export function key_block(anchor_node, key, render_fn) {
|
||||
const block = create_key_block();
|
||||
export function key_block(anchor_node, get_key, render_fn) {
|
||||
const block = {};
|
||||
|
||||
/** @type {null | import('../../types.js').Render} */
|
||||
let current_render = null;
|
||||
hydrate_block_anchor(anchor_node);
|
||||
|
||||
/** @type {V | typeof UNINITIALIZED} */
|
||||
let key_value = UNINITIALIZED;
|
||||
let mounted = false;
|
||||
block.r =
|
||||
/**
|
||||
* @param {import('../../types.js').Transition} transition
|
||||
* @returns {void}
|
||||
*/
|
||||
(transition) => {
|
||||
const render = /** @type {import('../../types.js').Render} */ (current_render);
|
||||
const transitions = render.s;
|
||||
transitions.add(transition);
|
||||
transition.f(() => {
|
||||
transitions.delete(transition);
|
||||
if (transitions.size === 0) {
|
||||
// If the current render has changed since, then we can remove the old render
|
||||
// effect as it's stale.
|
||||
if (current_render !== render && render.e !== null) {
|
||||
if (render.d !== null) {
|
||||
remove(render.d);
|
||||
render.d = null;
|
||||
}
|
||||
destroy_effect(render.e);
|
||||
render.e = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const create_render_effect = () => {
|
||||
/** @type {import('../../types.js').Render} */
|
||||
const render = {
|
||||
d: null,
|
||||
e: null,
|
||||
s: new Set(),
|
||||
p: current_render
|
||||
};
|
||||
const effect = render_effect(
|
||||
() => {
|
||||
render_fn(anchor_node);
|
||||
render.d = block.d;
|
||||
block.d = null;
|
||||
},
|
||||
block,
|
||||
true,
|
||||
true
|
||||
);
|
||||
render.e = effect;
|
||||
current_render = render;
|
||||
};
|
||||
const render = () => {
|
||||
const render = current_render;
|
||||
if (render === null) {
|
||||
create_render_effect();
|
||||
return;
|
||||
}
|
||||
const transitions = render.s;
|
||||
if (transitions.size === 0) {
|
||||
if (render.d !== null) {
|
||||
remove(render.d);
|
||||
render.d = null;
|
||||
}
|
||||
if (render.e) {
|
||||
execute_effect(render.e);
|
||||
} else {
|
||||
create_render_effect();
|
||||
}
|
||||
} else {
|
||||
trigger_transitions(transitions, 'out');
|
||||
create_render_effect();
|
||||
}
|
||||
};
|
||||
let key = UNINITIALIZED;
|
||||
|
||||
/** @type {import('#client').Effect} */
|
||||
let effect;
|
||||
|
||||
/** @type {Set<import('#client').Effect>} */
|
||||
let effects = new Set();
|
||||
|
||||
const key_effect = render_effect(
|
||||
() => {
|
||||
const prev_key_value = key_value;
|
||||
key_value = key();
|
||||
if (mounted && safe_not_equal(prev_key_value, key_value)) {
|
||||
render();
|
||||
if (safe_not_equal(key, (key = get_key()))) {
|
||||
if (effect) {
|
||||
var e = effect;
|
||||
pause_effect(e, () => {
|
||||
effects.delete(e);
|
||||
});
|
||||
}
|
||||
|
||||
effect = render_effect(
|
||||
() => {
|
||||
render_fn(anchor_node);
|
||||
const dom = block.d;
|
||||
|
||||
return () => {
|
||||
if (dom !== null) {
|
||||
remove(dom);
|
||||
}
|
||||
};
|
||||
},
|
||||
block,
|
||||
true,
|
||||
true
|
||||
);
|
||||
|
||||
// @ts-expect-error TODO tidy up
|
||||
effect.d = block.d;
|
||||
|
||||
effects.add(effect);
|
||||
}
|
||||
},
|
||||
block,
|
||||
false
|
||||
);
|
||||
// To ensure topological ordering of the key effect to the render effect,
|
||||
// we trigger the effect after.
|
||||
render();
|
||||
mounted = true;
|
||||
|
||||
key_effect.ondestroy = () => {
|
||||
let render = current_render;
|
||||
while (render !== null) {
|
||||
const dom = render.d;
|
||||
if (dom !== null) {
|
||||
remove(dom);
|
||||
}
|
||||
const effect = render.e;
|
||||
if (effect !== null) {
|
||||
destroy_effect(effect);
|
||||
}
|
||||
render = render.p;
|
||||
for (const e of effects) {
|
||||
// @ts-expect-error TODO tidy up. ondestroy should be totally unnecessary
|
||||
if (e.d) remove(e.d);
|
||||
}
|
||||
};
|
||||
block.e = key_effect;
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue