feat: use prefersReducedMotion on svelte 5.7.0 (fixes: #340)

https://svelte.dev/docs/svelte/svelte-motion#prefersReducedMotion
vim-jp-radio · Dec 28, 2024 · 631cc28 · 631cc28
1 parent 1c9cbab
commit 631cc28
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 43 deletions.
diff --git a/src/lib/Backgroud/Backgroud.svelte b/src/lib/Backgroud/Backgroud.svelte
@@ -1,5 +1,4 @@
 <script lang='ts'>
-	import { PrefersReducedMotion } from '$lib/utils/runes.svelte.js';
 	import { animate, cancelAnimate, createCircles } from './circle.js';
 
 	/**
@@ -16,8 +15,7 @@
 		minSpeed?: number;
 		maxSpeed?: number;
 	} = $props();
-	/** media queryのprefers-reduced-motionを取得 */
-	const prefersReducedMotionRune = new PrefersReducedMotion();
+	import { prefersReducedMotion } from 'svelte/motion';
 
 	let canvas = $state<HTMLCanvasElement | undefined>(undefined);
 	const ctx = $derived.by(() => canvas?.getContext('2d'));
@@ -28,7 +26,7 @@
 	let jsLoaded = $state(false);
 
 	const circles = $derived.by(() =>
-		canvas != null && ctx != null ? createCircles(circleNum, canvas, ctx, minSpeed, maxSpeed, prefersReducedMotionRune.isReduced) : [],
+		canvas != null && ctx != null ? createCircles(circleNum, canvas, ctx, minSpeed, maxSpeed, prefersReducedMotion.current) : [],
 	);
 
 	/** js が読み込まれたらオンになる */

diff --git a/src/lib/utils/runes.svelte.ts b/src/lib/utils/runes.svelte.ts