svelte - npm Package Compare versions

Comparing version 5.0.0-next.131 to 5.0.0-next.132

package.json

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

src/compiler/phases/1-parse/state/tag.js

@@ -590,5 +590,3 @@ import read_pattern from '../read/context.js';
 			expression.type !== 'CallExpression' &&
-			(expression.type !== 'ChainExpression' ||
-				expression.expression.type !== 'CallExpression' ||
-				!expression.expression.optional)
+			(expression.type !== 'ChainExpression' || expression.expression.type !== 'CallExpression')
 		) {
@@ -595,0 +593,0 @@ e.render_tag_invalid_expression(expression);

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

@@ -1045,2 +1045,5 @@ import is_reference from 'is-reference';
 	}
+
+	// TODO add more cases
+
 	return false;
@@ -1266,7 +1269,8 @@ }
 	CallExpression(node, context) {
+		const { expression } = context.state;
 		if (
-			context.state.expression?.type === 'ExpressionTag' ||
-			(context.state.expression?.type === 'SpreadAttribute' && !is_known_safe_call(node, context))
+			(expression?.type === 'ExpressionTag' || expression?.type === 'SpreadAttribute') &&
+			!is_known_safe_call(node, context)
 		) {
-			context.state.expression.metadata.contains_call_expression = true;
+			expression.metadata.contains_call_expression = true;
 		}
@@ -1273,0 +1277,0 @@

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

@@ -91,7 +91,3 @@ import * as b from '../../../utils/builders.js';
 	if (binding.kind === 'prop' || binding.kind === 'bindable_prop') {
-		if (
-			state.analysis.accessors ||
-			(state.analysis.immutable ? binding.reassigned : binding.mutated) ||
-			binding.initial
-		) {
+		if (!state.analysis.runes || binding.reassigned || binding.initial) {
 			return b.call(node);
@@ -98,0 +94,0 @@ }

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

@@ -96,20 +96,13 @@ import { is_hoistable_function } from '../../utils.js';
 
-				if (
-					state.analysis.accessors ||
-					(state.analysis.immutable ? binding.reassigned : binding.mutated) ||
-					declarator.init
-				) {
-					declarations.push(
-						b.declarator(
-							declarator.id,
-							get_prop_source(
-								binding,
-								state,
-								binding.prop_alias ?? declarator.id.name,
-								declarator.init &&
-									/** @type {import('estree').Expression} */ (visit(declarator.init))
-							)
+				declarations.push(
+					b.declarator(
+						declarator.id,
+						get_prop_source(
+							binding,
+							state,
+							binding.prop_alias ?? declarator.id.name,
+							declarator.init && /** @type {import('estree').Expression} */ (visit(declarator.init))
 						)
-					);
-				}
+					)
+				);
 
@@ -116,0 +109,0 @@ continue;

src/internal/client/constants.js

@@ -14,6 +14,7 @@ export const DERIVED = 1 << 1;
 export const EFFECT_RAN = 1 << 13;
-
 /** 'Transparent' effects do not create a transition boundary */
 export const EFFECT_TRANSPARENT = 1 << 14;
+/** Svelte 4 legacy mode props need to be handled with deriveds and be recognized elsewhere, hence the dedicated flag */
+export const LEGACY_DERIVED_PROP = 1 << 15;
 
 export const STATE_SYMBOL = Symbol('$state');

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

@@ -336,1 +336,21 @@ import { DEV } from 'esm-env';
 }
+
+/**
+ * @param {HTMLImageElement} element
+ * @returns {void}
+ */
+export function handle_lazy_img(element) {
+	// If we're using an image that has a lazy loading attribute, we need to apply
+	// the loading and src after the img element has been appended to the document.
+	// Otherwise the lazy behaviour will not work due to our cloneNode heuristic for
+	// templates.
+	if (!hydrating && element.loading === 'lazy') {
+		var src = element.src;
+		element.removeAttribute('loading');
+		element.removeAttribute('src');
+		requestAnimationFrame(() => {
+			element.loading = 'lazy';
+			element.src = src;
+		});
+	}
+}

src/internal/client/dom/hydration.js

@@ -43,3 +43,3 @@ import { HYDRATION_END, HYDRATION_START } from '../../../constants.js';
 	// TODO this could have false positives, if a user comment consisted of `[`. need to tighten that up
-	if (/** @type {Comment} */ (current)?.data !== HYDRATION_START) {
+	if (/** @type {Comment} */ (current).data !== HYDRATION_START) {
 		return node;
@@ -46,0 +46,0 @@ }

src/internal/client/dom/template.js

@@ -254,4 +254,15 @@ import { hydrate_nodes, hydrating } from './hydration.js';
 
-export const comment = template('<!>', TEMPLATE_FRAGMENT | TEMPLATE_USE_IMPORT_NODE);
+export function comment() {
+	// we're not delegating to `template` here for performance reasons
+	if (hydrating) {
+		return push_template_node(hydrate_nodes);
+	}
+	var frag = document.createDocumentFragment();
+	var anchor = empty();
+	frag.append(anchor);
+	push_template_node([anchor]);
 
+	return frag;
+}
+
 /**
@@ -258,0 +269,0 @@ * Assign the created (or in hydration mode, traversed) dom elements to the current block

src/internal/client/index.js

@@ -29,3 +29,4 @@ export { add_locations } from './dev/elements.js';
 	set_dynamic_element_attributes,
-	set_xlink_attribute
+	set_xlink_attribute,
+	handle_lazy_img
 } from './dom/elements/attributes.js';
@@ -32,0 +33,0 @@ export { set_class, set_svg_class, set_mathml_class, toggle_class } from './dom/elements/class.js';

src/internal/client/reactivity/props.js

@@ -10,3 +10,3 @@ import { DEV } from 'esm-env';
 import { mutable_source, set, source } from './sources.js';
-import { derived } from './deriveds.js';
+import { derived, derived_safe_equal } from './deriveds.js';
 import { get, is_signals_recorded, untrack, update } from '../runtime.js';
@@ -16,2 +16,3 @@ import { safe_equals } from './equality.js';
 import * as e from '../errors.js';
+import { LEGACY_DERIVED_PROP } from '../constants.js';
 
@@ -241,14 +242,24 @@ /**
 
-	var getter = runes
-		? () => {
-				var value = /** @type {V} */ (props[key]);
-				if (value === undefined) return get_fallback();
-				fallback_dirty = true;
-				return value;
-			}
-		: () => {
-				var value = /** @type {V} */ (props[key]);
-				if (value !== undefined) fallback_value = /** @type {V} */ (undefined);
-				return value === undefined ? fallback_value : value;
-			};
+	/** @type {() => V} */
+	var getter;
+	if (runes) {
+		getter = () => {
+			var value = /** @type {V} */ (props[key]);
+			if (value === undefined) return get_fallback();
+			fallback_dirty = true;
+			return value;
+		};
+	} else {
+		// Svelte 4 did not trigger updates when a primitive value was updated to the same value.
+		// Replicate that behavior through using a derived
+		var derived_getter = (immutable ? derived : derived_safe_equal)(
+			() => /** @type {V} */ (props[key])
+		);
+		derived_getter.f |= LEGACY_DERIVED_PROP;
+		getter = () => {
+			var value = get(derived_getter);
+			if (value !== undefined) fallback_value = /** @type {V} */ (undefined);
+			return value === undefined ? fallback_value : value;
+		};
+	}
 
@@ -255,0 +266,0 @@ // easy mode — prop is never written to

src/internal/client/runtime.js

@@ -18,3 +18,4 @@ import { DEV } from 'esm-env';
 	BLOCK_EFFECT,
-	ROOT_EFFECT
+	ROOT_EFFECT,
+	LEGACY_DERIVED_PROP
 } from './constants.js';
@@ -839,3 +840,12 @@ import { flush_tasks } from './dom/task.js';
 	for (signal of captured) {
-		mutate(signal, null /* doesnt matter */);
+		// Go one level up because derived signals created as part of props in legacy mode
+		if ((signal.f & LEGACY_DERIVED_PROP) !== 0) {
+			for (const dep of /** @type {import('#client').Derived} */ (signal).deps || []) {
+				if ((dep.f & DERIVED) === 0) {
+					mutate(dep, null /* doesnt matter */);
+				}
+			}
+		} else {
+			mutate(signal, null /* doesnt matter */);
+		}
 	}
@@ -842,0 +852,0 @@ }

src/internal/server/index.js

@@ -357,3 +357,3 @@ import { is_promise, noop } from '../shared/utils.js';
 	return Object.keys(style_object)
-		.filter(/** @param {any} key */ (key) => style_object[key])
+		.filter(/** @param {any} key */ (key) => style_object[key] != null && style_object[key] !== '')
 		.map(/** @param {any} key */ (key) => `${key}: ${escape_html(style_object[key], true)};`)
@@ -360,0 +360,0 @@ .join(' ');

src/version.js

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

No alert changes

Improved metrics

Total package byte prevSize

2062691

increased by0.06%

Lines of code

45144

increased by0.09%

No dependency changes