feat: add reactive Date object to svelte/reactivity

Author: trueadm

.changeset/new-rabbits-flow.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: add reactive Date object to svelte/reactivity

packages/svelte/package.json

@@ -62,6 +62,10 @@
       "types": "./types/index.d.ts",
       "default": "./src/motion/index.js"
     },
+    "./reactivity": {
+      "types": "./types/index.d.ts",
+      "default": "./src/reactivity/index.js"
+    },
     "./server": {
       "types": "./types/index.d.ts",
       "default": "./src/server/index.js"

packages/svelte/src/reactivity/index.js

@@ -0,0 +1,97 @@
+import { source } from '../internal/client/reactivity/sources';
+import { get, set } from '../internal/client/runtime';
+
+const read = [
+	'getDate',
+	'getDay',
+	'getFullYear',
+	'getHours',
+	'getMilliseconds',
+	'getMinutes',
+	'getMonth',
+	'getSeconds',
+	'getTime',
+	'getTimezoneOffset',
+	'getUTCDate',
+	'getUTCDay',
+	'getUTCFullYear',
+	'getUTCHours',
+	'getUTCMilliseconds',
+	'getUTCMinutes',
+	'getUTCMonth',
+	'getUTCSeconds',
+	'getYear',
+	'toDateString',
+	'toISOString',
+	'toJSON',
+	'toLocaleDateString',
+	'toLocalString',
+	'toLocalTimeString',
+	'toString',
+	'toTimeString',
+	'toUTCString'
+];
+
+const write = [
+	'setDate',
+	'setFullYear',
+	'setHours',
+	'setMilliseconds',
+	'setMinutes',
+	'setMonth',
+	'setSeconds',
+	'setTime',
+	'setUTCDate',
+	'setUTCFullYear',
+	'setUTCHours',
+	'setUTCMilliseconds',
+	'setUTCMinutes',
+	'setUTCMonth',
+	'setUTCSeconds',
+	'setYear'
+];
+
+class ReactiveDate extends Date {
+	#raw_time = source(super.getTime());
+	static #inited = false;
+
+	// We init as part of the first instance so that we can treeshake this class
+	#init() {
+		if (!ReactiveDate.#inited) {
+			ReactiveDate.#inited = true;
+			const proto = ReactiveDate.prototype;
+			const date_proto = Date.prototype;
+			for (const method of read) {
+				// @ts-ignore
+				proto[method] = function () {
+					get(this.#raw_time);
+					// @ts-ignore
+					return date_proto[method].call(this);
+				};
+			}
+			for (const method of write) {
+				// @ts-ignore
+				proto[method] = function (/** @type {any} */ ...args) {
+					// @ts-ignore
+					const v = date_proto[method].apply(this, args);
+					const time = date_proto.getTime.call(this);
+					if (time !== this.#raw_time.v) {
+						set(this.#raw_time, time);
+					}
+					return v;
+				};
+			}
+		}
+	}
+
+	/**
+	 * @param {any[]} values
+	 */
+	constructor(...values) {
+		// @ts-ignore
+		super(...values);
+		this.#init();
+	}
+}
+
+export { ReactiveDate as Date };

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

@@ -0,0 +1,37 @@
+import { flushSync } from '../../../../src/main/main-client';
+import { test } from '../../test';
+
+export default test({
+	html: `<div>getSeconds: 0</div><div>getMinutes: 0</div><div>getHours: 15</div><div>getTime: 1708700400000</div><div>toDateString: Fri Feb 23 2024</div><button>1 second</button><button>1 minute</button><button>1 hour</button>`,
+
+	test({ assert, target }) {
+		const [btn, btn2, btn3] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div>getSeconds: 1</div><div>getMinutes: 0</div><div>getHours: 15</div><div>getTime: 1708700401000</div><div>toDateString: Fri Feb 23 2024</div><button>1 second</button><button>1 minute</button><button>1 hour</button>`
+		);
+
+		flushSync(() => {
+			btn2?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div>getSeconds: 1</div><div>getMinutes: 1</div><div>getHours: 15</div><div>getTime: 1708700461000</div><div>toDateString: Fri Feb 23 2024</div><button>1 second</button><button>1 minute</button><button>1 hour</button>`
+		);
+
+		flushSync(() => {
+			btn3?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div>getSeconds: 1</div><div>getMinutes: 1</div><div>getHours: 16</div><div>getTime: 1708704061000</div><div>toDateString: Fri Feb 23 2024</div><button>1 second</button><button>1 minute</button><button>1 hour</button>`
+		);
+	}
+});

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

@@ -0,0 +1,21 @@
+<script>
+	import { Date } from 'svelte/reactivity';
+
+	let date = new Date('2024/02/23 15:00:00');
+</script>
+
+<div>getSeconds: {date.getSeconds()}</div>
+<div>getMinutes: {date.getMinutes()}</div>
+<div>getHours: {date.getHours()}</div>
+<div>getTime: {date.getTime()}</div>
+<div>toDateString: {date.toDateString()}</div>
+
+<button onclick={() => {
+	date.setSeconds(date.getSeconds() + 1);
+}}>1 second</button>
+<button onclick={() => {
+	date.setMinutes(date.getMinutes() + 1);
+}}>1 minute</button>
+<button onclick={() => {
+	date.setHours(date.getHours() + 1);
+}}>1 hour</button>