From cf5fb169a06155faf95c0be6465bcc9935e84ba5 Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Thu, 16 Jan 2025 12:33:24 -0500
Subject: [PATCH] fix: use modern `Spring` and `MediaQuery` implementation
 (#361)

* fix: use modern Spring implementation

* use `MediaQuery`

* fix changeset

* add to changeset

---------

Co-authored-by: Manuel Serret <mserret99@gmail.com>
---
 .changeset/tiny-colts-trade.md                |  5 ++++
 packages/create/templates/demo/package.json   |  4 +--
 .../templates/demo/src/routes/Counter.svelte  | 21 +++++----------
 .../demo/src/routes/sverdle/+page.svelte      |  7 +++--
 .../demo/src/routes/sverdle/reduced-motion.ts | 26 -------------------
 5 files changed, 19 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/tiny-colts-trade.md
 delete mode 100644 packages/create/templates/demo/src/routes/sverdle/reduced-motion.ts

diff --git a/.changeset/tiny-colts-trade.md b/.changeset/tiny-colts-trade.md
new file mode 100644
index 00000000..5cccd4df
--- /dev/null
+++ b/.changeset/tiny-colts-trade.md
@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+fix: use modern `Spring` and `MediaQuery` implementation
diff --git a/packages/create/templates/demo/package.json b/packages/create/templates/demo/package.json
index ee2084f7..64baec80 100644
--- a/packages/create/templates/demo/package.json
+++ b/packages/create/templates/demo/package.json
@@ -11,8 +11,8 @@
 	"devDependencies": {
 		"@fontsource/fira-mono": "^5.0.0",
 		"@neoconfetti/svelte": "^2.0.0",
-		"@sveltejs/adapter-auto": "workspace:*",
-		"@sveltejs/kit": "workspace:*",
+		"@sveltejs/adapter-auto": "^3",
+		"@sveltejs/kit": "^2",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"svelte": "^5.0.0",
 		"typescript": "^5.3.3",
diff --git a/packages/create/templates/demo/src/routes/Counter.svelte b/packages/create/templates/demo/src/routes/Counter.svelte
index 398dbb6c..b4b580b3 100644
--- a/packages/create/templates/demo/src/routes/Counter.svelte
+++ b/packages/create/templates/demo/src/routes/Counter.svelte
@@ -1,15 +1,8 @@
 <script lang="ts">
-	import { spring } from 'svelte/motion';
+	import { Spring } from 'svelte/motion';
 
-	let count = $state(0);
-
-	// svelte-ignore state_referenced_locally
-	const displayedCount = spring(count);
-
-	$effect(() => {
-		displayedCount.set(count);
-	});
-	let offset = $derived(modulo($displayedCount, 1));
+	const count = new Spring(0);
+	const offset = $derived(modulo(count.current, 1));
 
 	/**
 	 * @param {number} n
@@ -22,7 +15,7 @@
 </script>
 
 <div class="counter">
-	<button onclick={() => (count -= 1)} aria-label="Decrease the counter by one">
+	<button onclick={() => (count.target -= 1)} aria-label="Decrease the counter by one">
 		<svg aria-hidden="true" viewBox="0 0 1 1">
 			<path d="M0,0.5 L1,0.5" />
 		</svg>
@@ -30,12 +23,12 @@
 
 	<div class="counter-viewport">
 		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong class="hidden" aria-hidden="true">{Math.floor($displayedCount + 1)}</strong>
-			<strong>{Math.floor($displayedCount)}</strong>
+			<strong class="hidden" aria-hidden="true">{Math.floor(count.current + 1)}</strong>
+			<strong>{Math.floor(count.current)}</strong>
 		</div>
 	</div>
 
-	<button onclick={() => (count += 1)} aria-label="Increase the counter by one">
+	<button onclick={() => (count.target += 1)} aria-label="Increase the counter by one">
 		<svg aria-hidden="true" viewBox="0 0 1 1">
 			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
 		</svg>
diff --git a/packages/create/templates/demo/src/routes/sverdle/+page.svelte b/packages/create/templates/demo/src/routes/sverdle/+page.svelte
index 9eabcc9f..a8becf14 100644
--- a/packages/create/templates/demo/src/routes/sverdle/+page.svelte
+++ b/packages/create/templates/demo/src/routes/sverdle/+page.svelte
@@ -2,7 +2,7 @@
 	import { enhance } from '$app/forms';
 	import { confetti } from '@neoconfetti/svelte';
 	import type { ActionData, PageData } from './$types';
-	import { reducedMotion } from './reduced-motion';
+	import { MediaQuery } from 'svelte/reactivity';
 
 	interface Props {
 		data: PageData;
@@ -19,6 +19,9 @@
 	 */
 	let { data, form = $bindable() }: Props = $props();
 
+	/** Whether the user prefers reduced motion */
+	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');
+
 	/** Whether or not the user has won */
 	let won = $derived(data.answers.at(-1) === 'xxxxx');
 
@@ -203,7 +206,7 @@
 	<div
 		style="position: absolute; left: 50%; top: 30%"
 		use:confetti={{
-			particleCount: $reducedMotion ? 0 : undefined,
+			particleCount: reducedMotion.current ? 0 : undefined,
 			force: 0.7,
 			stageWidth: window.innerWidth,
 			stageHeight: window.innerHeight,
diff --git a/packages/create/templates/demo/src/routes/sverdle/reduced-motion.ts b/packages/create/templates/demo/src/routes/sverdle/reduced-motion.ts
deleted file mode 100644
index 83d32906..00000000
--- a/packages/create/templates/demo/src/routes/sverdle/reduced-motion.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { readable } from 'svelte/store';
-import { browser } from '$app/environment';
-
-const reducedMotionQuery = '(prefers-reduced-motion: reduce)';
-
-const getInitialMotionPreference = () => {
-	if (!browser) return false;
-	return window.matchMedia(reducedMotionQuery).matches;
-};
-
-export const reducedMotion = readable(getInitialMotionPreference(), (set) => {
-	if (browser) {
-		/**
-		 * @param {MediaQueryListEvent} event
-		 */
-		const setReducedMotion = (event: MediaQueryListEvent) => {
-			set(event.matches);
-		};
-		const mediaQueryList = window.matchMedia(reducedMotionQuery);
-		mediaQueryList.addEventListener('change', setReducedMotion);
-
-		return () => {
-			mediaQueryList.removeEventListener('change', setReducedMotion);
-		};
-	}
-});