feat: provide $state warnings for accidental equality

.changeset/little-ligers-exist.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: provide $state warnings for accidental equality

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

@@ -442,6 +442,48 @@ export const javascript_visitors_runes = {
 		}
 
 		context.next();
+	},
+	BinaryExpression(node, { state, visit, next }) {
+		const operator = node.operator;
+
+		if (state.options.dev) {
+			if (operator === '===') {
+				return b.call(
+					'$.strict_equals',
+					/** @type {import('estree').Expression} */ (visit(node.left)),
+					/** @type {import('estree').Expression} */ (visit(node.right))
+				);
+			}
+			if (operator === '!==') {
+				return b.unary(
+					'!',
+					b.call(
+						'$.strict_equals',
+						/** @type {import('estree').Expression} */ (visit(node.left)),
+						/** @type {import('estree').Expression} */ (visit(node.right))
+					)
+				);
+			}
+			if (operator === '==') {
+				return b.call(
+					'$.equals',
+					/** @type {import('estree').Expression} */ (visit(node.left)),
+					/** @type {import('estree').Expression} */ (visit(node.right))
+				);
+			}
+			if (operator === '!=') {
+				return b.unary(
+					'!',
+					b.call(
+						'$.equals',
+						/** @type {import('estree').Expression} */ (visit(node.left)),
+						/** @type {import('estree').Expression} */ (visit(node.right))
+					)
+				);
+			}
+		}
+
+		next();
 	}
 };
 

packages/svelte/src/internal/client/dom/elements/bindings/select.js

@@ -1,6 +1,7 @@
 import { effect } from '../../../reactivity/effects.js';
 import { listen_to_event_and_reset_event } from './shared.js';
 import { untrack } from '../../../runtime.js';
+import { state_is } from '../../../equality.js';
 
 /**
  * Selects the correct option(s) (depending on whether this is a multiple select)
@@ -16,7 +17,7 @@ export function select_option(select, value, mounting) {
 
 	for (var option of select.options) {
 		var option_value = get_option_value(option);
-		if (option_value === value) {
+		if (state_is(option_value, value)) {
 			option.selected = true;
 			return;
 		}

packages/svelte/src/internal/client/equality.js

@@ -0,0 +1,115 @@
+import { DEV } from 'esm-env';
+import { STATE_SYMBOL } from './constants';
+import * as w from './warnings.js';
+
+const object_is = Object.is;
+
+if (DEV) {
+	const array_prototype = Array.prototype;
+
+	const original_index_of = array_prototype.indexOf;
+
+	array_prototype.indexOf = function (search_element, from_index) {
+		const index = original_index_of.call(this, search_element, from_index);
+		if (
+			index === -1 &&
+			search_element != null &&
+			typeof search_element === 'object' &&
+			STATE_SYMBOL in search_element
+		) {
+			const o = search_element[STATE_SYMBOL];
+			if (o != null) {
+				if (original_index_of.call(this, o.p, from_index) !== -1) {
+					w.state_proxy_equality_mismatch('Array.indexOf');
+				}
+			}
+		}
+		return index;
+	};
+
+	const original_last_index_of = array_prototype.lastIndexOf;
+
+	array_prototype.lastIndexOf = function (search_element, from_index) {
+		const index = original_last_index_of.call(this, search_element, from_index);
+		if (
+			index === -1 &&
+			search_element != null &&
+			typeof search_element === 'object' &&
+			STATE_SYMBOL in search_element
+		) {
+			const o = search_element[STATE_SYMBOL];
+			if (o != null) {
+				if (original_last_index_of.call(this, o.p, from_index) !== -1) {
+					w.state_proxy_equality_mismatch('Array.lastIndexOf');
+				}
+			}
+		}
+		return index;
+	};
+
+	const original_includes = array_prototype.includes;
+
+	array_prototype.includes = function (search_element, from_index) {
+		const has = original_includes.call(this, search_element, from_index);
+		if (
+			has &&
+			search_element != null &&
+			typeof search_element === 'object' &&
+			STATE_SYMBOL in search_element
+		) {
+			const o = search_element[STATE_SYMBOL];
+			if (o != null) {
+				if (original_includes.call(this, o.p, from_index)) {
+					w.state_proxy_equality_mismatch('Array.includes');
+				}
+			}
+		}
+		return has;
+	};
+}
+
+/**
+ * @param {any} a
+ * @param {any} b
+ * @returns {boolean}
+ */
+export function state_is(a, b) {
+	if (a != null && typeof a === 'object' && STATE_SYMBOL in a) {
+		const o = a[STATE_SYMBOL];
+		if (o != null) {
+			return object_is(o.p, b);
+		}
+	} else if (b != null && typeof b === 'object' && STATE_SYMBOL in b) {
+		const o = b[STATE_SYMBOL];
+		if (o != null) {
+			return object_is(o.p, a);
+		}
+	}
+	return object_is(a, b);
+}
+
+/**
+ * @param {any} a
+ * @param {any} b
+ * @returns {boolean}
+ */
+export function strict_equals(a, b) {
+	if (DEV) {
+		if (state_is(a, b)) {
+			w.state_proxy_equality_mismatch('=== operator');
+		}
+	}
+	return a === b;
+}
+
+/**
+ * @param {any} a
+ * @param {any} b
+ * @returns {boolean}
+ */
+export function equals(a, b) {
+	if (DEV) {
+		w.state_proxy_equality_mismatch('== operator');
+	}
+	return a == b;
+}

packages/svelte/src/internal/client/index.js

@@ -161,3 +161,4 @@ export {
 	validate_store,
 	validate_void_dynamic_element
 } from '../shared/validate.js';
+export { strict_equals, equals } from './equality.js';

packages/svelte/src/internal/client/warnings.js

@@ -71,4 +71,17 @@ export function ownership_invalid_mutation(component, owner) {
 		// TODO print a link to the documentation
 		console.warn("ownership_invalid_mutation");
 	}
-}
+}
+
+/**
+ * Detected an equality check between a $state proxy and a non-$state-proxy object for %method%. This equality check will always fail because the proxy has a different object identity. Ensure both operands are of the same kind for accurate results.
+ * @param {string} method
+ */
+export function state_proxy_equality_mismatch(method) {
+	if (DEV) {
+		console.warn(`%c[svelte] ${"state_proxy_equality_mismatch"}\n%cDetected an equality check between a $state proxy and a non-$state-proxy object for ${method}. This equality check will always fail because the proxy has a different object identity. Ensure both operands are of the same kind for accurate results.`, bold, normal);
+	} else {
+		// TODO print a link to the documentation
+		console.warn("state_proxy_equality_mismatch");
+	}
+}