svelte - npm Package Compare versions

Comparing version 5.0.0-next.93 to 5.0.0-next.94

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "5.0.0-next.93",
+  "version": "5.0.0-next.94",
   "type": "module",
@@ -8,0 +8,0 @@ "types": "./types/index.d.ts",

src/internal/client/dom/blocks/each.js

@@ -18,5 +18,7 @@ import {
 	branch,
+	destroy_effect,
 	effect,
+	run_out_transitions,
+	pause_children,
 	pause_effect,
-	pause_effects,
 	resume_effect
@@ -44,2 +46,35 @@ } from '../../reactivity/effects.js';
 /**
+ * Pause multiple effects simultaneously, and coordinate their
+ * subsequent destruction. Used in each blocks
+ * @param {import('#client').Effect[]} effects
+ * @param {null | Node} controlled_anchor
+ * @param {() => void} [callback]
+ */
+function pause_effects(effects, controlled_anchor, callback) {
+	/** @type {import('#client').TransitionManager[]} */
+	var transitions = [];
+	var length = effects.length;
+
+	for (var i = 0; i < length; i++) {
+		pause_children(effects[i], transitions, true);
+	}
+
+	// If we have a controlled anchor, it means that the each block is inside a single
+	// DOM element, so we can apply a fast-path for clearing the contents of the element.
+	if (effects.length > 0 && transitions.length === 0 && controlled_anchor !== null) {
+		var parent_node = /** @type {Element} */ (controlled_anchor.parentNode);
+		parent_node.textContent = '';
+		parent_node.append(controlled_anchor);
+	}
+
+	run_out_transitions(transitions, () => {
+		for (var i = 0; i < length; i++) {
+			destroy_effect(effects[i]);
+		}
+
+		if (callback !== undefined) callback();
+	});
+}
+
+/**
  * @template V
@@ -150,3 +185,2 @@ * @param {Element | Comment} anchor The next sibling node, or the parent node if this is a 'controlled' block
 		if (!hydrating) {
-			// TODO add 'empty controlled block' optimisation here
 			reconcile_fn(array, state, anchor, render_fn, flags, keys);
@@ -250,3 +284,5 @@ }
 
-		pause_effects(effects, () => {
+		var controlled_anchor = (flags & EACH_IS_CONTROLLED) !== 0 && b === 0 ? anchor : null;
+
+		pause_effects(effects, controlled_anchor, () => {
 			state.items.length = b;
@@ -281,2 +317,3 @@ });
 	var should_update = (flags & (EACH_ITEM_REACTIVE | EACH_INDEX_REACTIVE)) !== 0;
+	var is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
 	var start = 0;
@@ -389,2 +426,7 @@ var item;
 			mark_lis(sources);
+		} else if (is_controlled && to_destroy.length === a_items.length) {
+			// We can optimize the case in which all items are replaced —
+			// destroy everything first, then append new items
+			pause_effects(to_destroy, anchor);
+			to_destroy = [];
 		}
@@ -430,5 +472,5 @@
 
-	// TODO: would be good to avoid this closure in the case where we have no
-	// transitions at all. It would make it far more JIT friendly in the hot cases.
-	pause_effects(to_destroy, () => {
+	var controlled_anchor = is_controlled && b_items.length === 0 ? anchor : null;
+
+	pause_effects(to_destroy, controlled_anchor, () => {
 		state.items = b_items;
@@ -435,0 +477,0 @@ });

src/internal/client/reactivity/effects.js

@@ -30,3 +30,2 @@ import { DEV } from 'esm-env';
 import { set } from './sources.js';
-import { noop } from '../../shared/utils.js';
 import { remove } from '../dom/reconciler.js';
@@ -299,5 +298,5 @@
  * @param {import('#client').Effect} effect
- * @param {() => void} callback
+ * @param {() => void} [callback]
  */
-export function pause_effect(effect, callback = noop) {
+export function pause_effect(effect, callback) {
 	/** @type {import('#client').TransitionManager[]} */
@@ -308,5 +307,5 @@ var transitions = [];
 
-	out(transitions, () => {
+	run_out_transitions(transitions, () => {
 		destroy_effect(effect);
-		callback();
+		if (callback) callback();
 	});
@@ -316,31 +315,6 @@ }
 /**
- * Pause multiple effects simultaneously, and coordinate their
- * subsequent destruction. Used in each blocks
- * @param {import('#client').Effect[]} effects
- * @param {() => void} callback
- */
-export function pause_effects(effects, callback = noop) {
-	/** @type {import('#client').TransitionManager[]} */
-	var transitions = [];
-	var length = effects.length;
-
-	for (var i = 0; i < length; i++) {
-		pause_children(effects[i], transitions, true);
-	}
-
-	// TODO: would be good to avoid this closure in the case where we have no
-	// transitions at all. It would make it far more JIT friendly in the hot cases.
-	out(transitions, () => {
-		for (var i = 0; i < length; i++) {
-			destroy_effect(effects[i]);
-		}
-		callback();
-	});
-}
-
-/**
  * @param {import('#client').TransitionManager[]} transitions
  * @param {() => void} fn
  */
-function out(transitions, fn) {
+export function run_out_transitions(transitions, fn) {
 	var remaining = transitions.length;
@@ -362,3 +336,3 @@ if (remaining > 0) {
  */
-function pause_children(effect, transitions, local) {
+export function pause_children(effect, transitions, local) {
 	if ((effect.f & INERT) !== 0) return;
@@ -365,0 +339,0 @@ effect.f ^= INERT;

src/internal/client/render.js

@@ -93,5 +93,6 @@ import { DEV } from 'esm-env';
  * 		target: Document | Element | ShadowRoot;
+ * 		anchor?: Node;
  * 		props?: Props;
  * 		events?: { [Property in keyof Events]: (e: Events[Property]) => any };
- *  	context?: Map<any, any>;
+ * 		context?: Map<any, any>;
  * 		intro?: boolean;
@@ -102,3 +103,3 @@ * 	}} options
 export function mount(component, options) {
-	const anchor = options.target.appendChild(empty());
+	const anchor = options.anchor ?? options.target.appendChild(empty());
 	// Don't flush previous effects to ensure order of outer effects stays consistent
@@ -192,3 +193,3 @@ return flush_sync(() => _mount(component, { ...options, anchor }), false);
  * 		events?: { [Property in keyof Events]: (e: Events[Property]) => any };
- *  	context?: Map<any, any>;
+ * 		context?: Map<any, any>;
  * 		intro?: boolean;
@@ -195,0 +196,0 @@ * 	}} options

src/internal/server/index.js

@@ -182,3 +182,3 @@ import { is_promise, noop } from '../shared/utils.js';
 /**
- * @param {(...args: any[]) => void} component
+ * @param {typeof import('svelte').SvelteComponent} component
  * @param {{ props: Record<string, any>; context?: Map<any, any> }} options
@@ -199,2 +199,3 @@ * @returns {RenderOutput}
 
+	// @ts-expect-error
 	component(payload, options.props, {}, {});
@@ -201,0 +202,0 @@

src/version.js

@@ -9,3 +9,3 @@ // generated during release, do not modify
  */
-export const VERSION = '5.0.0-next.93';
+export const VERSION = '5.0.0-next.94';
 export const PUBLIC_VERSION = '5';

No alert changes

Improved metrics

Total package byte prevSize

1912536

increased by0.04%

Lines of code

40984

increased by0.04%

No dependency changes