load dynamic code lazily

load dynamic code lazily

load dynamic code lazily

Author: trueadm

packages/svelte/src/internal/client/block.js

@@ -175,10 +175,13 @@ export function create_each_block(flags, anchor) {
  */
 export function create_each_item_block(item, index, key) {
 	return {
+		// animate transition
+		a: null,
 		// dom
 		d: null,
 		// effect
 		e: null,
+		// index
 		i: index,
 		// key
 		k: key,

packages/svelte/src/internal/client/each.js

@@ -686,7 +686,7 @@ function destroy_active_transition_blocks(active_transitions) {
  * @param {import('./types.js').Block} block
  * @returns {Text | Element | Comment}
  */
-function get_first_element(block) {
+export function get_first_element(block) {
 	const current = block.d;
 
 	if (is_array(current)) {
@@ -717,25 +717,9 @@ function update_each_item_block(block, item, index, type) {
 	const transitions = block.s;
 	const index_is_reactive = (type & EACH_INDEX_REACTIVE) !== 0;
 	// Handle each item animations
-	if (transitions !== null && (type & EACH_KEYED) !== 0) {
-		let prev_index = block.i;
-		if (index_is_reactive) {
-			prev_index = /** @type {import('./types.js').Signal<number>} */ (prev_index).v;
-		}
-		const items = block.p.v;
-		if (prev_index !== index && /** @type {number} */ (index) < items.length) {
-			const from_dom = /** @type {Element} */ (get_first_element(block));
-			const from = from_dom.getBoundingClientRect();
-			// Cancel any existing key transitions
-			for (const transition of transitions) {
-				if (transition.r === 'key') {
-					transition.c();
-				}
-			}
-			schedule_task(() => {
-				trigger_transitions(transitions, 'key', from);
-			});
-		}
+	const each_animation = block.a;
+	if (transitions !== null && (type & EACH_KEYED) !== 0 && each_animation !== null) {
+		each_animation(block, transitions, index, index_is_reactive);
 	}
 	if (index_is_reactive) {
 		set_signal_value(/** @type {import('./types.js').Signal<number>} */ (block.i), index);

packages/svelte/src/internal/client/transitions.js

@@ -9,7 +9,7 @@ import {
 	KEY_BLOCK,
 	ROOT_BLOCK
 } from './block.js';
-import { destroy_each_item_block } from './each.js';
+import { destroy_each_item_block, get_first_element } from './each.js';
 import { append_child } from './operations.js';
 import { empty } from './render.js';
 import {
@@ -21,6 +21,7 @@ import {
 	managed_effect,
 	managed_pre_effect,
 	mark_subtree_inert,
+	schedule_task,
 	untrack
 } from './runtime.js';
 import { raf } from './timing.js';
@@ -432,6 +433,7 @@ export function bind_transition(dom, get_transition_fn, props_fn, direction, glo
 			if (transition_block.t === EACH_ITEM_BLOCK) {
 				// Lazily apply the each block transition
 				transition_block.r = each_item_transition;
+				transition_block.a = each_item_animate;
 				transition_block = transition_block.p;
 			} else if (transition_block.t === AWAIT_BLOCK && transition_block.n /* pending */) {
 				can_show_intro_on_mount = false;
@@ -646,3 +648,31 @@ function each_item_transition(transition) {
 	});
 	transitions.add(transition);
 }
+
+/**
+ *
+ * @param {import('./types.js').EachItemBlock} block
+ * @param {Set<import('./types.js').Transition>} transitions
+ * @param {number} index
+ * @param {boolean} index_is_reactive
+ */
+function each_item_animate(block, transitions, index, index_is_reactive) {
+	let prev_index = block.i;
+	if (index_is_reactive) {
+		prev_index = /** @type {import('./types.js').Signal<number>} */ (prev_index).v;
+	}
+	const items = block.p.v;
+	if (prev_index !== index && /** @type {number} */ (index) < items.length) {
+		const from_dom = /** @type {Element} */ (get_first_element(block));
+		const from = from_dom.getBoundingClientRect();
+		// Cancel any existing key transitions
+		for (const transition of transitions) {
+			if (transition.r === 'key') {
+				transition.c();
+			}
+		}
+		schedule_task(() => {
+			trigger_transitions(transitions, 'key', from);
+		});
+	}
+}

packages/svelte/src/internal/client/types.d.ts

@@ -285,6 +285,15 @@ export type EachBlock = {
 };
 
 export type EachItemBlock = {
+	/** transition */
+	a:
+		| null
+		| ((
+				block: EachItemBlock,
+				transitions: Set<Transition>,
+				index: number,
+				index_is_reactive: boolean
+		  ) => void);
 	/** dom */
 	d: null | TemplateNode | Array<TemplateNode>;
 	/** effect */