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

move each

Browse Source
pull/10542/head
Rich Harris 3 years ago
parent b21b70f392
commit 6eee50951e
3 changed files with 48 additions and 46 deletions
Show Stats Download Patch File Download Diff File

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

@ -5,17 +5,17 @@ import {
EACH_IS_IMMUTABLE, EACH_IS_IMMUTABLE,
EACH_ITEM_REACTIVE, EACH_ITEM_REACTIVE,
EACH_KEYED EACH_KEYED
} from '../../constants.js'; } from '../../../../constants.js';
import { create_each_block, create_each_item_block } from './block.js'; import { create_each_block, create_each_item_block } from '../../block.js';
import { import {
current_hydration_fragment, current_hydration_fragment,
get_hydration_fragment, get_hydration_fragment,
hydrate_block_anchor, hydrate_block_anchor,
hydrating, hydrating,
set_current_hydration_fragment set_current_hydration_fragment
} from './hydration.js'; } from '../../hydration.js';
import { clear_text_content, empty, map_get, map_set } from './operations.js'; import { clear_text_content, empty, map_get, map_set } from '../../operations.js';
import { insert, remove } from './reconciler.js'; import { insert, remove } from '../../reconciler.js';
import { import {
destroy_signal, destroy_signal,
execute_effect, execute_effect,
@ -24,9 +24,9 @@ import {
render_effect, render_effect,
set_signal_value, set_signal_value,
source source
} from './runtime.js'; } from '../../runtime.js';
import { trigger_transitions } from './transitions.js'; import { trigger_transitions } from '../../transitions.js';
import { is_array } from './utils.js'; import { is_array } from '../../utils.js';
const NEW_BLOCK = -1; const NEW_BLOCK = -1;
const MOVED_BLOCK = 99999999; const MOVED_BLOCK = 99999999;
@ -40,7 +40,7 @@ function no_op() {}
* @param {() => V[]} collection * @param {() => V[]} collection
* @param {number} flags * @param {number} flags
* @param {null | ((item: V) => string)} key_fn * @param {null | ((item: V) => string)} key_fn
* @param {(anchor: null, item: V, index: import('./types.js').MaybeSignal<number>) => void} render_fn * @param {(anchor: null, item: V, index: import('../../types.js').MaybeSignal<number>) => void} render_fn
* @param {null | ((anchor: Node) => void)} fallback_fn * @param {null | ((anchor: Node) => void)} fallback_fn
* @param {typeof reconcile_indexed_array | reconcile_tracked_array} reconcile_fn * @param {typeof reconcile_indexed_array | reconcile_tracked_array} reconcile_fn
* @returns {void} * @returns {void}
@ -49,7 +49,7 @@ function each(anchor_node, collection, flags, key_fn, render_fn, fallback_fn, re
const is_controlled = (flags & EACH_IS_CONTROLLED) !== 0; const is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
const block = create_each_block(flags, anchor_node); const block = create_each_block(flags, anchor_node);
/** @type {null | import('./types.js').Render} */ /** @type {null | import('../../types.js').Render} */
let current_fallback = null; let current_fallback = null;
hydrate_block_anchor(anchor_node, is_controlled); hydrate_block_anchor(anchor_node, is_controlled);
@ -59,7 +59,7 @@ function each(anchor_node, collection, flags, key_fn, render_fn, fallback_fn, re
/** @type {Array<string> | null} */ /** @type {Array<string> | null} */
let keys = null; let keys = null;
/** @type {null | import('./types.js').EffectSignal} */ /** @type {null | import('../../types.js').EffectSignal} */
let render = null; let render = null;
/** /**
@ -69,9 +69,9 @@ function each(anchor_node, collection, flags, key_fn, render_fn, fallback_fn, re
let mismatch = false; let mismatch = false;
block.r = block.r =
/** @param {import('./types.js').Transition} transition */ /** @param {import('../../types.js').Transition} transition */
(transition) => { (transition) => {
const fallback = /** @type {import('./types.js').Render} */ (current_fallback); const fallback = /** @type {import('../../types.js').Render} */ (current_fallback);
const transitions = fallback.s; const transitions = fallback.s;
transitions.add(transition); transitions.add(transition);
transition.f(() => { transition.f(() => {
@ -90,7 +90,7 @@ function each(anchor_node, collection, flags, key_fn, render_fn, fallback_fn, re
}; };
const create_fallback_effect = () => { const create_fallback_effect = () => {
/** @type {import('./types.js').Render} */ /** @type {import('../../types.js').Render} */
const fallback = { const fallback = {
d: null, d: null,
e: null, e: null,
@ -131,7 +131,7 @@ function each(anchor_node, collection, flags, key_fn, render_fn, fallback_fn, re
current_fallback = fallback; current_fallback = fallback;
}; };
/** @param {import('./types.js').EachBlock} block */ /** @param {import('../../types.js').EachBlock} block */
const render_each = (block) => { const render_each = (block) => {
const flags = block.f; const flags = block.f;
const is_controlled = (flags & EACH_IS_CONTROLLED) !== 0; const is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
@ -168,7 +168,9 @@ function each(anchor_node, collection, flags, key_fn, render_fn, fallback_fn, re
mismatch = true; mismatch = true;
} else if (is_each_else_comment) { } else if (is_each_else_comment) {
// Remove the each_else comment node or else it will confuse the subsequent hydration algorithm // Remove the each_else comment node or else it will confuse the subsequent hydration algorithm
/** @type {import('./types.js').TemplateNode[]} */ (current_hydration_fragment).shift(); /** @type {import('../../types.js').TemplateNode[]} */ (
current_hydration_fragment
).shift();
} }
} }
@ -226,7 +228,7 @@ function each(anchor_node, collection, flags, key_fn, render_fn, fallback_fn, re
} }
// Clear the array // Clear the array
reconcile_fn([], block, anchor_node, is_controlled, render_fn, flags, false, keys); reconcile_fn([], block, anchor_node, is_controlled, render_fn, flags, false, keys);
destroy_signal(/** @type {import('./types.js').EffectSignal} */ (render)); destroy_signal(/** @type {import('../../types.js').EffectSignal} */ (render));
}); });
block.e = each; block.e = each;
@ -238,7 +240,7 @@ function each(anchor_node, collection, flags, key_fn, render_fn, fallback_fn, re
* @param {() => V[]} collection * @param {() => V[]} collection
* @param {number} flags * @param {number} flags
* @param {null | ((item: V) => string)} key_fn * @param {null | ((item: V) => string)} key_fn
* @param {(anchor: null, item: V, index: import('./types.js').MaybeSignal<number>) => void} render_fn * @param {(anchor: null, item: V, index: import('../../types.js').MaybeSignal<number>) => void} render_fn
* @param {null | ((anchor: Node) => void)} fallback_fn * @param {null | ((anchor: Node) => void)} fallback_fn
* @returns {void} * @returns {void}
*/ */
@ -251,7 +253,7 @@ export function each_keyed(anchor_node, collection, flags, key_fn, render_fn, fa
* @param {Element | Comment} anchor_node * @param {Element | Comment} anchor_node
* @param {() => V[]} collection * @param {() => V[]} collection
* @param {number} flags * @param {number} flags
* @param {(anchor: null, item: V, index: import('./types.js').MaybeSignal<number>) => void} render_fn * @param {(anchor: null, item: V, index: import('../../types.js').MaybeSignal<number>) => void} render_fn
* @param {null | ((anchor: Node) => void)} fallback_fn * @param {null | ((anchor: Node) => void)} fallback_fn
* @returns {void} * @returns {void}
*/ */
@ -262,10 +264,10 @@ export function each_indexed(anchor_node, collection, flags, render_fn, fallback
/** /**
* @template V * @template V
* @param {Array<V>} array * @param {Array<V>} array
* @param {import('./types.js').EachBlock} each_block * @param {import('../../types.js').EachBlock} each_block
* @param {Element | Comment | Text} dom * @param {Element | Comment | Text} dom
* @param {boolean} is_controlled * @param {boolean} is_controlled
* @param {(anchor: null, item: V, index: number | import('./types.js').Signal<number>) => void} render_fn * @param {(anchor: null, item: V, index: number | import('../../types.js').Signal<number>) => void} render_fn
* @param {number} flags * @param {number} flags
* @param {boolean} apply_transitions * @param {boolean} apply_transitions
* @returns {void} * @returns {void}
@ -290,7 +292,7 @@ function reconcile_indexed_array(
var length = Math.max(a, b); var length = Math.max(a, b);
var index = 0; var index = 0;
/** @type {Array<import('./types.js').EachItemBlock>} */ /** @type {Array<import('../../types.js').EachItemBlock>} */
var b_blocks; var b_blocks;
var block; var block;
@ -315,7 +317,7 @@ function reconcile_indexed_array(
b_blocks = Array(b); b_blocks = Array(b);
if (hydrating) { if (hydrating) {
// Hydrate block // Hydrate block
var hydration_list = /** @type {import('./types.js').TemplateNode[]} */ ( var hydration_list = /** @type {import('../../types.js').TemplateNode[]} */ (
current_hydration_fragment current_hydration_fragment
); );
var hydrating_node = hydration_list[0]; var hydrating_node = hydration_list[0];
@ -333,7 +335,7 @@ function reconcile_indexed_array(
block = each_item_block(item, null, index, render_fn, flags); block = each_item_block(item, null, index, render_fn, flags);
b_blocks[index] = block; b_blocks[index] = block;
hydrating_node = /** @type {import('./types.js').TemplateNode} */ ( hydrating_node = /** @type {import('../../types.js').TemplateNode} */ (
/** @type {Node} */ (/** @type {Node} */ (fragment.at(-1)).nextSibling).nextSibling /** @type {Node} */ (/** @type {Node} */ (fragment.at(-1)).nextSibling).nextSibling
); );
} }
@ -376,10 +378,10 @@ function reconcile_indexed_array(
* https://github.com/localvoid/ivi/blob/9f1bd0918f487da5b131941228604763c5d8ef56/packages/ivi/src/client/core.ts#L968 * https://github.com/localvoid/ivi/blob/9f1bd0918f487da5b131941228604763c5d8ef56/packages/ivi/src/client/core.ts#L968
* @template V * @template V
* @param {Array<V>} array * @param {Array<V>} array
* @param {import('./types.js').EachBlock} each_block * @param {import('../../types.js').EachBlock} each_block
* @param {Element | Comment | Text} dom * @param {Element | Comment | Text} dom
* @param {boolean} is_controlled * @param {boolean} is_controlled
* @param {(anchor: null, item: V, index: number | import('./types.js').Signal<number>) => void} render_fn * @param {(anchor: null, item: V, index: number | import('../../types.js').Signal<number>) => void} render_fn
* @param {number} flags * @param {number} flags
* @param {boolean} apply_transitions * @param {boolean} apply_transitions
* @param {Array<string> | null} keys * @param {Array<string> | null} keys
@ -405,7 +407,7 @@ function reconcile_tracked_array(
/** @type {number} */ /** @type {number} */
var b = array.length; var b = array.length;
/** @type {Array<import('./types.js').EachItemBlock>} */ /** @type {Array<import('../../types.js').EachItemBlock>} */
var b_blocks; var b_blocks;
var block; var block;
@ -435,7 +437,7 @@ function reconcile_tracked_array(
if (hydrating) { if (hydrating) {
// Hydrate block // Hydrate block
var fragment; var fragment;
var hydration_list = /** @type {import('./types.js').TemplateNode[]} */ ( var hydration_list = /** @type {import('../../types.js').TemplateNode[]} */ (
current_hydration_fragment current_hydration_fragment
); );
var hydrating_node = hydration_list[0]; var hydrating_node = hydration_list[0];
@ -457,7 +459,7 @@ function reconcile_tracked_array(
// Get the <!--ssr:..--> tag of the next item in the list // Get the <!--ssr:..--> tag of the next item in the list
// The fragment array can be empty if each block has no content // The fragment array can be empty if each block has no content
hydrating_node = /** @type {import('./types.js').TemplateNode} */ ( hydrating_node = /** @type {import('../../types.js').TemplateNode} */ (
/** @type {Node} */ ((fragment.at(-1) || hydrating_node).nextSibling).nextSibling /** @type {Node} */ ((fragment.at(-1) || hydrating_node).nextSibling).nextSibling
); );
} }
@ -610,8 +612,8 @@ function reconcile_tracked_array(
/** /**
* The server could have rendered more list items than the client specifies. * The server could have rendered more list items than the client specifies.
* In that case, we need to remove the remaining server-rendered nodes. * In that case, we need to remove the remaining server-rendered nodes.
* @param {import('./types.js').TemplateNode[]} hydration_list * @param {import('../../types.js').TemplateNode[]} hydration_list
* @param {import('./types.js').TemplateNode | null} next_node * @param {import('../../types.js').TemplateNode | null} next_node
*/ */
function remove_excess_hydration_nodes(hydration_list, next_node) { function remove_excess_hydration_nodes(hydration_list, next_node) {
if (next_node === null) return; if (next_node === null) return;
@ -695,14 +697,14 @@ function mark_lis(a) {
} }
/** /**
* @param {import('./types.js').Block} block * @param {import('../../types.js').Block} block
* @param {Element | Comment | Text} dom * @param {Element | Comment | Text} dom
* @param {boolean} is_controlled * @param {boolean} is_controlled
* @param {null | Text | Element | Comment} sibling * @param {null | Text | Element | Comment} sibling
* @returns {Text | Element | Comment} * @returns {Text | Element | Comment}
*/ */
function insert_each_item_block(block, dom, is_controlled, sibling) { function insert_each_item_block(block, dom, is_controlled, sibling) {
var current = /** @type {import('./types.js').TemplateNode} */ (block.d); var current = /** @type {import('../../types.js').TemplateNode} */ (block.d);
if (sibling === null) { if (sibling === null) {
if (is_controlled) { if (is_controlled) {
@ -716,7 +718,7 @@ function insert_each_item_block(block, dom, is_controlled, sibling) {
} }
/** /**
* @param {import('./types.js').Block} block * @param {import('../../types.js').Block} block
* @returns {Text | Element | Comment} * @returns {Text | Element | Comment}
*/ */
function get_first_child(block) { function get_first_child(block) {
@ -730,7 +732,7 @@ function get_first_child(block) {
} }
/** /**
* @param {Array<import('./types.js').EachItemBlock>} active_transitions * @param {Array<import('../../types.js').EachItemBlock>} active_transitions
* @returns {void} * @returns {void}
*/ */
function destroy_active_transition_blocks(active_transitions) { function destroy_active_transition_blocks(active_transitions) {
@ -755,7 +757,7 @@ function destroy_active_transition_blocks(active_transitions) {
} }
/** /**
* @param {import('./types.js').Block} block * @param {import('../../types.js').Block} block
* @returns {Text | Element | Comment} * @returns {Text | Element | Comment}
*/ */
export function get_first_element(block) { export function get_first_element(block) {
@ -774,7 +776,7 @@ export function get_first_element(block) {
} }
/** /**
* @param {import('./types.js').EachItemBlock} block * @param {import('../../types.js').EachItemBlock} block
* @param {any} item * @param {any} item
* @param {number} index * @param {number} index
* @param {number} type * @param {number} type
@ -793,15 +795,15 @@ function update_each_item_block(block, item, index, type) {
each_animation(block, transitions); each_animation(block, transitions);
} }
if (index_is_reactive) { if (index_is_reactive) {
set_signal_value(/** @type {import('./types.js').Signal<number>} */ (block.i), index); set_signal_value(/** @type {import('../../types.js').Signal<number>} */ (block.i), index);
} else { } else {
block.i = index; block.i = index;
} }
} }
/** /**
* @param {import('./types.js').EachItemBlock} block * @param {import('../../types.js').EachItemBlock} block
* @param {null | Array<import('./types.js').Block>} transition_block * @param {null | Array<import('../../types.js').Block>} transition_block
* @param {boolean} apply_transitions * @param {boolean} apply_transitions
* @param {any} controlled * @param {any} controlled
* @returns {void} * @returns {void}
@ -835,7 +837,7 @@ export function destroy_each_item_block(
if (!controlled && dom !== null) { if (!controlled && dom !== null) {
remove(dom); remove(dom);
} }
destroy_signal(/** @type {import('./types.js').EffectSignal} */ (block.e)); destroy_signal(/** @type {import('../../types.js').EffectSignal} */ (block.e));
} }
/** /**
@ -843,9 +845,9 @@ export function destroy_each_item_block(
* @param {V} item * @param {V} item
* @param {unknown} key * @param {unknown} key
* @param {number} index * @param {number} index
* @param {(anchor: null, item: V, index: number | import('./types.js').Signal<number>) => void} render_fn * @param {(anchor: null, item: V, index: number | import('../../types.js').Signal<number>) => void} render_fn
* @param {number} flags * @param {number} flags
* @returns {import('./types.js').EachItemBlock} * @returns {import('../../types.js').EachItemBlock}
*/ */
function each_item_block(item, key, index, render_fn, flags) { function each_item_block(item, key, index, render_fn, flags) {
const each_item_not_reactive = (flags & EACH_ITEM_REACTIVE) === 0; const each_item_not_reactive = (flags & EACH_ITEM_REACTIVE) === 0;
@ -860,7 +862,7 @@ function each_item_block(item, key, index, render_fn, flags) {
const block = create_each_item_block(item_value, index_value, key); const block = create_each_item_block(item_value, index_value, key);
const effect = render_effect( const effect = render_effect(
/** @param {import('./types.js').EachItemBlock} block */ /** @param {import('../../types.js').EachItemBlock} block */
(block) => { (block) => {
render_fn(null, block.v, block.i); render_fn(null, block.v, block.i);
}, },

2
packages/svelte/src/internal/client/transitions.js
Unescape View File

@ -9,7 +9,7 @@ import {
KEY_BLOCK, KEY_BLOCK,
ROOT_BLOCK ROOT_BLOCK
} from './block.js'; } from './block.js';
import { destroy_each_item_block, get_first_element } from './each.js'; import { destroy_each_item_block, get_first_element } from './dom/blocks/each.js';
import { append_child, empty } from './operations.js'; import { append_child, empty } from './operations.js';
import { import {
current_block, current_block,

2
packages/svelte/src/internal/index.js
Unescape View File

@ -43,7 +43,7 @@ export {
export { await_block as await } from './client/dom/blocks/await.js'; export { await_block as await } from './client/dom/blocks/await.js';
export { if_block as if } from './client/dom/blocks/if.js'; export { if_block as if } from './client/dom/blocks/if.js';
export { key_block as key } from './client/dom/blocks/key.js'; export { key_block as key } from './client/dom/blocks/key.js';
export * from './client/each.js'; export * from './client/dom/blocks/each.js';
export * from './client/render.js'; export * from './client/render.js';
export * from './client/validate.js'; export * from './client/validate.js';
export { raf } from './client/timing.js'; export { raf } from './client/timing.js';

Write Preview
Loading…
Cancel
Save