chore: add proxy date usage warning

chore: add proxy date usage warning

chore: add proxy date usage warning

chore: add proxy date usage warning

.changeset/fifty-donkeys-call.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+chore: add proxy date usage warning

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

@@ -87,6 +87,13 @@ export function proxy(value, immutable = true, owners) {
 
 			return proxy;
 		}
+		if (DEV && prototype === Date.prototype) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				`Date objects used within the $state() rune will not be reactive. Consider using Svelte's reactive version of the Date object from 'svelte/reactivity':` +
+					`\n\nimport { Date } from 'svelte/reactivity';\n\nconst date = new Date();`
+			);
+		}
 	}
 
 	return value;

packages/svelte/tests/runtime-runes/samples/state-date-discouraged/_config.js

@@ -0,0 +1,44 @@
+import { test } from '../../test';
+
+/** @type {typeof console.warn} */
+let warn;
+
+/** @type {typeof console.trace} */
+let trace;
+
+/** @type {any[]} */
+let warnings = [];
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	before_test: () => {
+		warn = console.warn;
+		trace = console.trace;
+
+		console.warn = (...args) => {
+			warnings.push(...args);
+		};
+
+		console.trace = () => {};
+	},
+
+	after_test: () => {
+		console.warn = warn;
+		console.trace = trace;
+
+		warnings = [];
+	},
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+		await btn?.click();
+
+		assert.deepEqual(warnings, [
+			`Date objects used within the $state() rune will not be reactive. Consider using Svelte's reactive version of the Date object from 'svelte/reactivity':` +
+				`\n\nimport { Date } from 'svelte/reactivity';\n\nconst date = new Date();`
+		]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/state-date-discouraged/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	let state = $state({
+		date: null,
+	});
+</script>
+<button onclick={() => {
+	state.date = new Date();
+}}>click</button>
+
+{state.date}