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 <[email protected]>
sveltejs · Jan 16, 2025 · cf5fb16 · cf5fb16
1 parent aed15fb
commit cf5fb16
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 44 deletions.
diff --git a/.changeset/tiny-colts-trade.md 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
@@ -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
@@ -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,20 +15,20 @@
 </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>
 	</button>
 
 	<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
@@ -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