svelte - npm Package Compare versions

Comparing version 5.0.0-next.126 to 5.0.0-next.127

package.json

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

src/compiler/phases/2-analyze/index.js

@@ -970,3 +970,3 @@ import is_reference from 'is-reference';
 						? property.key.name
-						: /** @type {string} */ (/** @type {import('estree').Literal} */ (property.key).value);
+						: String(/** @type {import('estree').Literal} */ (property.key).value);
 				let initial = property.value.type === 'AssignmentPattern' ? property.value.right : null;
@@ -1246,2 +1246,3 @@
 				node !== binding.node &&
+				context.state.function_depth === binding.scope.function_depth &&
 				// If we have $state that can be proxied or frozen and isn't re-assigned, then that means
@@ -1257,3 +1258,5 @@ // it's likely not using a primitive value and thus this warning isn't that helpful.
 					binding.kind === 'derived') &&
-				context.state.function_depth === binding.scope.function_depth
+				// We're only concerned with reads here
+				(parent.type !== 'AssignmentExpression' || parent.left !== node) &&
+				parent.type !== 'UpdateExpression'
 			) {
@@ -1260,0 +1263,0 @@ w.state_referenced_locally(node);

src/compiler/phases/3-transform/client/transform-client.js

@@ -452,9 +452,15 @@ import { walk } from 'zimmerframe';
 					b.const(b.id('s'), b.call('$.source', b.id(analysis.name))),
+					b.const(b.id('filename'), b.member(b.id(analysis.name), b.id('filename'))),
 					b.stmt(b.assignment('=', b.id(analysis.name), b.call('$.hmr', b.id('s')))),
+					b.stmt(
+						b.assignment('=', b.member(b.id(analysis.name), b.id('filename')), b.id('filename'))
+					),
 					b.if(
 						b.id('import.meta.hot.acceptExports'),
-						b.stmt(
-							b.call('import.meta.hot.acceptExports', b.array([b.literal('default')]), accept_fn)
-						),
-						b.stmt(b.call('import.meta.hot.accept', accept_fn))
+						b.block([
+							b.stmt(
+								b.call('import.meta.hot.acceptExports', b.array([b.literal('default')]), accept_fn)
+							)
+						]),
+						b.block([b.stmt(b.call('import.meta.hot.accept', accept_fn))])
 					)
@@ -461,0 +467,0 @@ ])

src/constants.js

@@ -146,3 +146,4 @@ export const EACH_ITEM_REACTIVE = 1;
 	'table',
-	'ul'
+	'ul',
+	'p'
 ];
@@ -149,0 +150,0 @@

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

@@ -7,4 +7,3 @@ import { DEV } from 'esm-env';
 import { autofocus } from './misc.js';
-import { effect } from '../../reactivity/effects.js';
-import { run } from '../../../shared/utils.js';
+import { effect, effect_root } from '../../reactivity/effects.js';
 import * as w from '../../warnings.js';
@@ -116,3 +115,3 @@
 	var attributes = /** @type {Record<string, unknown>} **/ (element.__attributes ??= {});
-	/** @type {Array<() => void>} */
+	/** @type {Array<[string, any, () => void]>} */
 	var events = [];
@@ -150,3 +149,3 @@
 					if (!prev) {
-						events.push(() => element.addEventListener(event_name, value, opts));
+						events.push([key, value, () => element.addEventListener(event_name, value, opts)]);
 					} else {
@@ -199,3 +198,18 @@ element.addEventListener(event_name, value, opts);
 	if (!prev) {
-		effect(() => events.forEach(run));
+		// In edge cases it may happen that set_attributes is re-run before the
+		// effect is executed. In that case the render effect which initiates this
+		// re-run will destroy the inner effect and it will never run. But because
+		// next and prev may have the same keys, the event would not get added again
+		// and it would get lost. We prevent this by using a root effect.
+		const destroy_root = effect_root(() => {
+			effect(() => {
+				if (!element.isConnected) return;
+				for (const [key, value, evt] of events) {
+					if (next[key] === value) {
+						evt();
+					}
+				}
+				destroy_root();
+			});
+		});
 	}
@@ -202,0 +216,0 @@

src/internal/client/dom/template.js

@@ -254,3 +254,3 @@ import { hydrate_nodes, hydrating } from './hydration.js';
 
-export const comment = template('<!>', TEMPLATE_FRAGMENT);
+export const comment = template('<!>', TEMPLATE_FRAGMENT | TEMPLATE_USE_IMPORT_NODE);
 
@@ -257,0 +257,0 @@ /**

src/internal/client/index.js

@@ -93,2 +93,3 @@ export { add_locations } from './dev/elements.js';
 	render_effect,
+	template_effect,
 	user_effect,
@@ -95,0 +96,0 @@ user_pre_effect

src/internal/client/reactivity/deriveds.js

@@ -124,3 +124,2 @@ import { DEV } from 'esm-env';
 	destroy_derived_children(signal);
-	destroy_effect_children(signal);
 	remove_reactions(signal, 0);
@@ -127,0 +126,0 @@ set_signal_status(signal, DESTROYED);

src/internal/client/reactivity/effects.js

@@ -37,2 +37,3 @@ import {
 import { DEV } from 'esm-env';
+import { define_property } from '../utils.js';
 
@@ -154,3 +155,3 @@ /**
 	// until the component is mounted
-	const defer =
+	var defer =
 		current_effect !== null &&
@@ -162,7 +163,14 @@ (current_effect.f & RENDER_EFFECT) !== 0 &&
 
+	if (DEV) {
+		define_property(fn, 'name', {
+			value: '$effect'
+		});
+	}
+
 	if (defer) {
-		const context = /** @type {import('#client').ComponentContext} */ (current_component_context);
+		var context = /** @type {import('#client').ComponentContext} */ (current_component_context);
 		(context.e ??= []).push(fn);
 	} else {
-		effect(fn);
+		var signal = effect(fn);
+		return signal;
 	}
@@ -178,2 +186,7 @@ }
 	validate_effect('$effect.pre');
+	if (DEV) {
+		define_property(fn, 'name', {
+			value: '$effect.pre'
+		});
+	}
 	return render_effect(fn);
@@ -257,2 +270,15 @@ }
 /**
+ * @param {() => void | (() => void)} fn
+ * @returns {import('#client').Effect}
+ */
+export function template_effect(fn) {
+	if (DEV) {
+		define_property(fn, 'name', {
+			value: '{expression}'
+		});
+	}
+	return render_effect(fn);
+}
+
+/**
  * @param {(() => void)} fn
@@ -259,0 +285,0 @@ * @param {number} flags

src/internal/client/reactivity/props.js

@@ -172,3 +172,3 @@ import { DEV } from 'esm-env';
 			if (is_function(p)) p = p();
-			if (key in p) return true;
+			if (p != null && key in p) return true;
 		}
@@ -175,0 +175,0 @@

src/internal/client/render.js

@@ -170,5 +170,11 @@ import { DEV } from 'esm-env';
 	} catch (error) {
-		if (!hydrated && options.recover !== false) {
+		if (
+			!hydrated &&
+			options.recover !== false &&
+			/** @type {Error} */ (error).message.includes('hydration_missing_marker_close')
+		) {
 			w.hydration_mismatch();
 
+			// If an error occured above, the operations might not yet have been initialised.
+			init_operations();
 			clear_text_content(target);
@@ -175,0 +181,0 @@

src/internal/client/runtime.js

@@ -31,2 +31,5 @@ import { DEV } from 'esm-env';
 
+// Used for DEV time error handling
+/** @param {WeakSet<Error>} value */
+const handled_errors = new WeakSet();
 // Used for controlling the flush of effects.
@@ -244,2 +247,58 @@ let current_scheduler_mode = FLUSH_MICROTASK;
 /**
+ * @param {Error} error
+ * @param {import("#client").Effect} effect
+ * @param {import("#client").ComponentContext | null} component_context
+ */
+function handle_error(error, effect, component_context) {
+	// Given we don't yet have error boundaries, we will just always throw.
+	if (!DEV || handled_errors.has(error) || component_context === null) {
+		throw error;
+	}
+
+	const component_stack = [];
+
+	const effect_name = effect.fn.name;
+
+	if (effect_name) {
+		component_stack.push(effect_name);
+	}
+
+	/** @type {import("#client").ComponentContext | null} */
+	let current_context = component_context;
+
+	while (current_context !== null) {
+		var filename = current_context.function?.filename;
+
+		if (filename) {
+			const file = filename.split('/').at(-1);
+			component_stack.push(file);
+		}
+
+		current_context = current_context.p;
+	}
+
+	const indent = /Firefox/.test(navigator.userAgent) ? '  ' : '\t';
+	error.message += `\n${component_stack.map((name) => `\n${indent}in ${name}`).join('')}\n`;
+
+	const stack = error.stack;
+
+	// Filter out internal files from callstack
+	if (stack) {
+		const lines = stack.split('\n');
+		const new_lines = [];
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i];
+			if (line.includes('svelte/src/internal')) {
+				continue;
+			}
+			new_lines.push(line);
+		}
+		error.stack = new_lines.join('\n');
+	}
+
+	handled_errors.add(error);
+	throw error;
+}
+
+/**
  * @template V
@@ -265,3 +324,3 @@ * @param {import('#client').Reaction} signal
 	try {
-		let res = signal.fn();
+		let res = (0, signal.fn)();
 		let dependencies = /** @type {import('#client').Value<unknown>[]} **/ (signal.deps);
@@ -437,2 +496,4 @@ if (current_dependencies !== null) {
 		effect.teardown = typeof teardown === 'function' ? teardown : null;
+	} catch (error) {
+		handle_error(/** @type {Error} */ (error), effect, current_component_context);
 	} finally {
@@ -557,18 +618,11 @@ current_effect = previous_effect;
 			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;
-					}
+				if (!is_branch && 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) {
@@ -575,0 +629,0 @@ if (is_branch || is_clean) {

src/version.js

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

No alert changes

Improved metrics

Total package byte prevSize

2062022

increased by0.19%

Lines of code

45122

increased by0.24%

No dependency changes