Merge pull request #341 from vim-jp-radio/feature/339

svlete innerWidth innerHeightを使う

Author: ryoppippi

src/lib/Backgroud/Backgroud.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
 	import { prefersReducedMotion } from 'svelte/motion';
+	import { innerHeight, innerWidth } from 'svelte/reactivity/window';
 	import { animate, cancelAnimate, createCircles } from './circle.js';
 
 	/**
@@ -19,8 +20,6 @@
 
 	let canvas = $state<HTMLCanvasElement | undefined>(undefined);
 	const ctx = $derived.by(() => canvas?.getContext('2d'));
-	let width = $state(0);
-	let height = $state(0);
 
 	/** jsが読み込まれたかどうか */
 	let jsLoaded = $state(false);
@@ -50,7 +49,6 @@
 	});
 </script>
 
-<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
 <!-- svelte-ignore element_invalid_self_closing_tag -->
 <div
 	uno-bg-LP-backgroud
@@ -67,7 +65,7 @@
 		<canvas
 			bind:this={canvas}
 			style:--blur='{blurStrength}px'
-			height={height + blurStrength * 4}
+			height={innerHeight.current ?? 0 + blurStrength * 4}
 			uno-bg-LP-backgroud
 			uno-filter-blur='[--blur]'
 			uno-left='50%'
@@ -77,7 +75,7 @@
 			uno-transform-translate-x='-50%'
 			uno-transform-translate-y='-50%'
 			uno-z-1
-			width={width + blurStrength * 4}
+			width={innerWidth.current ?? 0 + blurStrength * 4}
 		/>
 	{/if}
 </div>