svelte - npm Package Compare versions

Comparing version 5.0.0-next.90 to 5.0.0-next.91

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "5.0.0-next.90",
+  "version": "5.0.0-next.91",
   "type": "module",
@@ -16,3 +16,3 @@ "types": "./types/index.d.ts",
     "types",
-    "compiler.cjs",
+    "compiler/index.js",
     "*.d.ts",
@@ -39,3 +39,3 @@ "README.md"
       "types": "./types/index.d.ts",
-      "require": "./compiler.cjs",
+      "require": "./compiler/index.js",
       "default": "./src/compiler/index.js"
@@ -42,0 +42,0 @@ },

src/compiler/phases/3-transform/client/visitors/javascript-runes.js

@@ -304,3 +304,3 @@ import { get_rune } from '../../../scope.js';
 							b.id(object_id),
-							b.call('$.derived', b.thunk(rune === '$derived.by' ? b.call(value) : value))
+							b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value))
 						)
@@ -307,0 +307,0 @@ );

src/constants.js

@@ -24,2 +24,3 @@ export const EACH_ITEM_REACTIVE = 1;
 export const HYDRATION_END = ']';
+export const HYDRATION_END_ELSE = `${HYDRATION_END}!`; // used to indicate that an `{:else}...` block was rendered
 
@@ -26,0 +27,0 @@ export const UNINITIALIZED = Symbol();

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

@@ -8,2 +8,3 @@ import {
 	EACH_KEYED,
+	HYDRATION_END_ELSE,
 	HYDRATION_START
@@ -101,3 +102,3 @@ } from '../../../../constants.js';
 		if (hydrating) {
-			var is_else = /** @type {Comment} */ (hydrate_nodes?.[0])?.data === 'ssr:each_else';
+			var is_else = /** @type {Comment} */ (anchor).data === HYDRATION_END_ELSE;
 
@@ -109,5 +110,2 @@ if (is_else !== (length === 0)) {
 				mismatch = true;
-			} else if (is_else) {
-				// Remove the each_else comment node or else it will confuse the subsequent hydration algorithm
-				/** @type {import('#client').TemplateNode[]} */ (hydrate_nodes).shift();
 			}
@@ -429,2 +427,4 @@ }
 
+	// 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, () => {
@@ -431,0 +431,0 @@ state.items = b_items;

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

@@ -5,2 +5,3 @@ import { IS_ELSEIF } from '../../constants.js';
 import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
+import { HYDRATION_END_ELSE } from '../../../../constants.js';
 
@@ -38,17 +39,10 @@ /**
 		if (hydrating) {
-			const comment_text = /** @type {Comment} */ (hydrate_nodes?.[0])?.data;
+			const is_else = anchor.data === HYDRATION_END_ELSE;
 
-			if (
-				!comment_text ||
-				(comment_text === 'ssr:if:true' && !condition) ||
-				(comment_text === 'ssr:if:false' && condition)
-			) {
+			if (condition === is_else) {
 				// Hydration mismatch: remove everything inside the anchor and start fresh.
-				// This could happen using when `{#if browser} .. {/if}` in SvelteKit.
+				// This could happen with `{#if browser}...{/if}`, for example
 				remove(hydrate_nodes);
 				set_hydrating(false);
 				mismatch = true;
-			} else {
-				// Remove the ssr:if comment node or else it will confuse the subsequent hydration algorithm
-				hydrate_nodes.shift();
 			}
@@ -55,0 +49,0 @@ }

src/internal/client/dom/elements/actions.js

@@ -14,5 +14,4 @@ import { effect, render_effect } from '../../reactivity/effects.js';
 		var payload = untrack(() => action(dom, get_value?.()) || {});
-		var update = payload?.update;
 
-		if (get_value && update) {
+		if (get_value && payload?.update) {
 			var inited = false;
@@ -29,3 +28,3 @@
 				if (inited) {
-					/** @type {Function} */ (update)(value);
+					/** @type {Function} */ (payload.update)(value);
 				}
@@ -37,4 +36,6 @@ });
 
-		return payload?.destroy;
+		if (payload?.destroy) {
+			return () => /** @type {Function} */ (payload.destroy)();
+		}
 	});
 }

src/internal/client/dom/hydration.js

@@ -56,3 +56,3 @@ import { HYDRATION_END, HYDRATION_START } from '../../../constants.js';
 				depth += 1;
-			} else if (data === HYDRATION_END) {
+			} else if (data[0] === HYDRATION_END) {
 				if (depth === 0) {
@@ -59,0 +59,0 @@ hydrate_nodes = /** @type {import('#client').TemplateNode[]} */ (nodes);

src/internal/client/reactivity/effects.js

@@ -56,2 +56,3 @@ import { DEV } from 'esm-env';
 	var is_root = (type & ROOT_EFFECT) !== 0;
+
 	/** @type {import('#client').Effect} */
@@ -154,5 +155,3 @@ var effect = {
 export function effect_root(fn) {
-	// TODO is `untrack` correct here? Should `fn` re-run if its dependencies change?
-	// Should it even be modelled as an effect?
-	const effect = create_effect(ROOT_EFFECT, () => untrack(fn), true);
+	const effect = create_effect(ROOT_EFFECT, fn, true);
 	return () => {
@@ -250,3 +249,3 @@ destroy_effect(effect);
 
-	effect.teardown?.();
+	effect.teardown?.call(null);
 
@@ -280,5 +279,4 @@ if (effect.dom !== null) {
 
-	effect.first =
-		effect.last =
-		effect.next =
+	// `first` and `child` are nulled out in destroy_effect_children
+	effect.next =
 		effect.prev =
@@ -325,10 +323,13 @@ effect.teardown =
 	var transitions = [];
+	var length = effects.length;
 
-	for (var effect of effects) {
-		pause_children(effect, transitions, true);
+	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 effect of effects) {
-			destroy_effect(effect);
+		for (var i = 0; i < length; i++) {
+			destroy_effect(effects[i]);
 		}
@@ -378,2 +379,4 @@ callback();
 		// TODO we don't need to call pause_children recursively with a linked list in place
+		// it's slightly more involved though as we have to account for `transparent` changing
+		// through the tree.
 		pause_children(child, transitions, transparent ? local : false);
@@ -413,2 +416,4 @@ child = sibling;
 		// TODO we don't need to call resume_children recursively with a linked list in place
+		// it's slightly more involved though as we have to account for `transparent` changing
+		// through the tree.
 		resume_children(child, transparent ? local : false);
@@ -415,0 +420,0 @@ child = sibling;

src/internal/client/render.js

@@ -248,23 +248,21 @@ import { DEV } from 'esm-env';
 		branch(() => {
-			untrack(() => {
-				if (context) {
-					push({});
-					var ctx = /** @type {import('#client').ComponentContext} */ (current_component_context);
-					ctx.c = context;
-				}
+			if (context) {
+				push({});
+				var ctx = /** @type {import('#client').ComponentContext} */ (current_component_context);
+				ctx.c = context;
+			}
 
-				if (events) {
-					// We can't spread the object or else we'd lose the state proxy stuff, if it is one
-					/** @type {any} */ (props).$$events = events;
-				}
+			if (events) {
+				// We can't spread the object or else we'd lose the state proxy stuff, if it is one
+				/** @type {any} */ (props).$$events = events;
+			}
 
-				should_intro = intro;
-				// @ts-expect-error the public typings are not what the actual function looks like
-				component = Component(anchor, props) || {};
-				should_intro = true;
+			should_intro = intro;
+			// @ts-expect-error the public typings are not what the actual function looks like
+			component = Component(anchor, props) || {};
+			should_intro = true;
 
-				if (context) {
-					pop();
-				}
-			});
+			if (context) {
+				pop();
+			}
 		});
@@ -271,0 +269,0 @@

src/internal/client/runtime.js

@@ -24,3 +24,4 @@ import { DEV } from 'esm-env';
 	STATE_SYMBOL,
-	BLOCK_EFFECT
+	BLOCK_EFFECT,
+	ROOT_EFFECT
 } from './constants.js';
@@ -174,2 +175,3 @@ import { flush_tasks } from './dom/task.js';
 		var dependencies = reaction.deps;
+		var is_unowned = (flags & UNOWNED) !== 0;
 
@@ -195,3 +197,2 @@ if (dependencies !== null) {
 				// is also dirty.
-				var is_unowned = (flags & UNOWNED) !== 0;
 				var version = dependency.version;
@@ -206,3 +207,6 @@
 
-		set_signal_status(reaction, CLEAN);
+		// Unowned signals are always maybe dirty, as we instead check their dependency versions.
+		if (!is_unowned) {
+			set_signal_status(reaction, CLEAN);
+		}
 	}
@@ -397,3 +401,3 @@
 
-		effect.teardown?.();
+		effect.teardown?.call(null);
 		var teardown = execute_reaction_fn(effect);
@@ -492,68 +496,88 @@ effect.teardown = typeof teardown === 'function' ? teardown : null;
  *
- * This function recursively collects effects in topological order from the starting effect passed in.
- * Effects will be collected when they match the filtered bitwise flag passed in only. The collected
- * array will be populated with all the effects.
+ * This function both runs render effects and collects user effects in topological order
+ * from the starting effect passed in. Effects will be collected when they match the filtered
+ * bitwise flag passed in only. The collected effects array will be populated with all the user
+ * effects to be flushed.
  *
- * In an ideal world, we could just execute effects as we encounter them using this approach. However,
- * this isn't possible due to how effects in Svelte are modelled to be possibly side-effectful. Thus,
- * executing an effect might invalidate other parts of the tree, which means this this tree walking function
- * will possibly pick up effects that are dirty too soon.
- *
  * @param {import('./types.js').Effect} effect
  * @param {number} filter_flags
  * @param {boolean} shallow
- * @param {import('./types.js').Effect[]} collected_user
+ * @param {import('./types.js').Effect[]} collected_effects
  * @returns {void}
  */
-function recursively_process_effects(effect, filter_flags, shallow, collected_user) {
-	var current_child = effect.first;
-	var user = [];
+function process_effects(effect, filter_flags, shallow, collected_effects) {
+	var current_effect = effect.first;
+	var effects = [];
 
-	while (current_child !== null) {
-		var child = current_child;
-		current_child = child.next;
-		var flags = child.f;
-		var is_inactive = (flags & (DESTROYED | INERT)) !== 0;
-		if (is_inactive) continue;
+	main_loop: while (current_effect !== null) {
+		var flags = current_effect.f;
+		// TODO: we probably don't need to check for destroyed as it shouldn't be encountered?
+		var is_active = (flags & (DESTROYED | INERT)) === 0;
 		var is_branch = flags & BRANCH_EFFECT;
 		var is_clean = (flags & CLEAN) !== 0;
+		var child = current_effect.first;
 
-		if (is_branch) {
-			// Skip this branch if it's clean
-			if (is_clean) continue;
-			set_signal_status(child, CLEAN);
+		// Skip this branch if it's clean
+		if (is_active && (!is_branch || !is_clean)) {
+			if (is_branch) {
+				set_signal_status(current_effect, CLEAN);
+			}
+
+			if ((flags & RENDER_EFFECT) !== 0) {
+				if (is_branch) {
+					if (!shallow && child !== null) {
+						current_effect = child;
+						continue;
+					}
+				} else {
+					if (check_dirtiness(current_effect)) {
+						execute_effect(current_effect);
+						// Child might have been mutated since running the effect
+						child = current_effect.first;
+					}
+					if (!shallow && child !== null) {
+						current_effect = child;
+						continue;
+					}
+				}
+			} else if ((flags & EFFECT) !== 0) {
+				if (is_branch || is_clean) {
+					if (!shallow && child !== null) {
+						current_effect = child;
+						continue;
+					}
+				} else {
+					effects.push(current_effect);
+				}
+			}
 		}
+		var sibling = current_effect.next;
 
-		if ((flags & RENDER_EFFECT) !== 0) {
-			if (is_branch) {
-				if (shallow) continue;
-				// TODO we don't need to call recursively_process_effects recursively with a linked list in place
-				recursively_process_effects(child, filter_flags, false, collected_user);
-			} else {
-				if (check_dirtiness(child)) {
-					execute_effect(child);
+		if (sibling === null) {
+			let parent = current_effect.parent;
+
+			while (parent !== null) {
+				if (effect === parent) {
+					break main_loop;
 				}
-				// TODO we don't need to call recursively_process_effects recursively with a linked list in place
-				recursively_process_effects(child, filter_flags, false, collected_user);
+				var parent_sibling = parent.next;
+				if (parent_sibling !== null) {
+					current_effect = parent_sibling;
+					continue main_loop;
+				}
+				parent = parent.parent;
 			}
-		} else if ((flags & EFFECT) !== 0) {
-			if (is_branch || is_clean) {
-				if (shallow) continue;
-				// TODO we don't need to call recursively_process_effects recursively with a linked list in place
-				recursively_process_effects(child, filter_flags, false, collected_user);
-			} else {
-				user.push(child);
-			}
 		}
+
+		current_effect = sibling;
 	}
 
-	if (user.length > 0) {
+	if (effects.length > 0) {
 		if ((filter_flags & EFFECT) !== 0) {
-			collected_user.push(...user);
+			collected_effects.push(...effects);
 		}
 
 		if (!shallow) {
-			for (var i = 0; i < user.length; i++) {
-				// TODO we don't need to call recursively_process_effects recursively with a linked list in place
-				recursively_process_effects(user[i], filter_flags, false, collected_user);
+			for (var i = 0; i < effects.length; i++) {
+				process_effects(effects[i], filter_flags, false, collected_effects);
 			}
@@ -577,3 +601,3 @@ }
 	/** @type {import('#client').Effect[]} */
-	var user_effects = [];
+	var collected_effects = [];
 
@@ -588,4 +612,4 @@ var previously_flushing_effect = is_flushing_effect;
 		} else {
-			recursively_process_effects(effect, filter_flags, shallow, user_effects);
-			flush_queued_effects(user_effects);
+			process_effects(effect, filter_flags, shallow, collected_effects);
+			flush_queued_effects(collected_effects);
 		}
@@ -683,3 +707,3 @@ } finally {
 		current_reaction !== null &&
-		(current_reaction.f & BRANCH_EFFECT) === 0 &&
+		(current_reaction.f & (BRANCH_EFFECT | ROOT_EFFECT)) === 0 &&
 		!current_untracking
@@ -733,2 +757,3 @@ ) {
 	}
+
 	return signal.v;
@@ -735,0 +760,0 @@ }

src/internal/server/hydration.js

@@ -1,4 +0,5 @@
-import { HYDRATION_END, HYDRATION_START } from '../../constants.js';
+import { HYDRATION_END, HYDRATION_END_ELSE, HYDRATION_START } from '../../constants.js';
 
 export const BLOCK_OPEN = `<!--${HYDRATION_START}-->`;
 export const BLOCK_CLOSE = `<!--${HYDRATION_END}-->`;
+export const BLOCK_CLOSE_ELSE = `<!--${HYDRATION_END_ELSE}-->`;

src/version.js

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

No alert changes

Improved metrics

Total package byte prevSize

1909812

increased by0.01%

Lines of code

40934

increased by0.04%

No dependency changes