svelte - npm Package Compare versions

Comparing version 5.0.0-next.191 to 5.0.0-next.192

package.json

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

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

@@ -78,3 +78,3 @@ import { noop, is_function } from '../../../shared/utils.js';
 
-	/** @type {null | { position: string, width: string, height: string }} */
+	/** @type {null | { position: string, width: string, height: string, transform: string }} */
 	var original_styles = null;
@@ -114,5 +114,13 @@
 		fix() {
-			var computed_style = getComputedStyle(element);
+			// If an animation is already running, transforming the element is likely to fail,
+			// because the styles applied by the animation take precedence. In the case of crossfade,
+			// that means the `translate(...)` of the crossfade transition overrules the `translate(...)`
+			// we would apply below, leading to the element jumping somewhere to the top left.
+			if (element.getAnimations().length) return;
 
-			if (computed_style.position !== 'absolute' && computed_style.position !== 'fixed') {
+			// It's important to destructure these to get fixed values - the object itself has getters,
+			// and changing the style to 'absolute' can for example influence the width.
+			var { position, width, height } = getComputedStyle(element);
+
+			if (position !== 'absolute' && position !== 'fixed') {
 				var style = /** @type {HTMLElement | SVGElement} */ (element).style;
@@ -123,8 +131,9 @@
 					width: style.width,
-					height: style.height
+					height: style.height,
+					transform: style.transform
 				};
 
 				style.position = 'absolute';
-				style.width = computed_style.width;
-				style.height = computed_style.height;
+				style.width = width;
+				style.height = height;
 				var to = element.getBoundingClientRect();
@@ -145,2 +154,3 @@
 				style.height = original_styles.height;
+				style.transform = original_styles.transform;
 			}
@@ -147,0 +157,0 @@ }

src/internal/client/index.js

@@ -149,2 +149,3 @@ export { FILENAME, ORIGINAL } from '../../constants.js';
 export {
+	validate_binding,
 	validate_dynamic_component,
@@ -151,0 +152,0 @@ validate_each_keys,

src/internal/client/proxy.js

@@ -246,5 +246,10 @@ import { DEV } from 'esm-env';
 
+		var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+
 		// Set the new value before updating any signals so that any listeners get the new value
-		// @ts-ignore
-		target[prop] = value;
+		if (descriptor?.set) {
+			descriptor.set.call(receiver, value);
+		} else {
+			target[prop] = value;
+		}
 
@@ -251,0 +256,0 @@ if (not_has) {

src/internal/client/validate.js

@@ -1,5 +0,7 @@
-import { untrack } from './runtime.js';
+import { dev_current_component_function, untrack } from './runtime.js';
 import { get_descriptor, is_array } from '../shared/utils.js';
 import * as e from './errors.js';
 import { FILENAME } from '../../constants.js';
+import { render_effect } from './reactivity/effects.js';
+import * as w from './warnings.js';
 
@@ -92,1 +94,42 @@ /** regex of all html void element names */
 }
+
+/**
+ * @param {string} binding
+ * @param {() => Record<string, any>} get_object
+ * @param {() => string} get_property
+ * @param {number} line
+ * @param {number} column
+ */
+export function validate_binding(binding, get_object, get_property, line, column) {
+	var warned = false;
+
+	var filename = dev_current_component_function?.[FILENAME];
+
+	render_effect(() => {
+		if (warned) return;
+
+		var object = get_object();
+		var property = get_property();
+
+		var ran = false;
+
+		// by making the (possibly false, but it would be an extreme edge case) assumption
+		// that a getter has a corresponding setter, we can determine if a property is
+		// reactive by seeing if this effect has dependencies
+		var effect = render_effect(() => {
+			if (ran) return;
+
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+			object[property];
+		});
+
+		ran = true;
+
+		if (effect.deps === null) {
+			var location = filename && `${filename}:${line}:${column}`;
+			w.binding_property_non_reactive(binding, location);
+
+			warned = true;
+		}
+	});
+}

src/internal/client/warnings.js

@@ -9,2 +9,16 @@ /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 /**
+ * `%binding%` (%location%) is binding to a non-reactive property
+ * @param {string} binding
+ * @param {string | undefined | null} [location]
+ */
+export function binding_property_non_reactive(binding, location) {
+	if (DEV) {
+		console.warn(`%c[svelte] binding_property_non_reactive\n%c${location ? `\`${binding}\` (${location}) is binding to a non-reactive property` : `\`${binding}\` is binding to a non-reactive property`}`, bold, normal);
+	} else {
+		// TODO print a link to the documentation
+		console.warn("binding_property_non_reactive");
+	}
+}
+
+/**
  * The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
@@ -11,0 +25,0 @@ * @param {string} attribute

src/version.js

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2160707

increased by0.2%

Lines of code

47542

increased by0.22%

No dependency changes