From fddd15e04d3d87aaedf5b69fd49ae8e12aa312a2 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Fri, 23 Feb 2024 22:50:34 +0000
Subject: [PATCH] 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              |  5 +++
 packages/svelte/src/internal/client/proxy.js  |  7 +++
 .../samples/state-date-discouraged/_config.js | 44 +++++++++++++++++++
 .../state-date-discouraged/main.svelte        | 10 +++++
 4 files changed, 66 insertions(+)
 create mode 100644 .changeset/fifty-donkeys-call.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-date-discouraged/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-date-discouraged/main.svelte

diff --git a/.changeset/fifty-donkeys-call.md b/.changeset/fifty-donkeys-call.md
new file mode 100644
index 0000000000..ccc57ce90c
--- /dev/null
+++ b/.changeset/fifty-donkeys-call.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+chore: add proxy date usage warning
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index 8365fbbeb8..f2954f2824 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/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;
diff --git a/packages/svelte/tests/runtime-runes/samples/state-date-discouraged/_config.js b/packages/svelte/tests/runtime-runes/samples/state-date-discouraged/_config.js
new file mode 100644
index 0000000000..48030e1515
--- /dev/null
+++ b/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();`
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-date-discouraged/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-date-discouraged/main.svelte
new file mode 100644
index 0000000000..293a0e48f4
--- /dev/null
+++ b/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}