fix: migrate & fix av-sync

av-sync/src/App.svelte

@@ -8,21 +8,25 @@
 	import FlashIndicator from './components/FlashIndicator.svelte';
 	import Scale from './components/Scale.svelte';
 
-	export let frame = 0;
+	interface Props {
-	export let fps = 60;
+		frame?: number;
-	export let debug = false;
+		fps?: number;
+		debug?: boolean;
+	}
+
+	let { frame = $bindable(0), fps = $bindable(60), debug = $bindable(false) }: Props = $props();
+
+	window.setFps = async (newFps: number) => {
+		fps = newFps;
+		await tick();
+	};
+
+	window.setFrame = async (frameNumber: number) => {
+		frame = frameNumber;
+		await tick();
+	};
 
 	onMount(() => {
-		window.setFps = async (newFps: number) => {
-			fps = newFps;
-			await tick();
-		};
-
-		window.setFrame = async (frameNumber: number) => {
-			frame = frameNumber;
-			await tick();
-		};
-
 		if (window.location.search.includes('debug')) {
 			debug = true;
 		}

av-sync/src/components/FlashIndicator.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
-	export let frame: number;
+	interface Props {
-	export let fps: number;
+		frame: number;
+		fps: number;
+	}
 
-	let el: SVGSVGElement;
+	let { frame, fps }: Props = $props();
-	$: center = el?.clientWidth / 2;
-	$: radius = center;
 
-	let opacity = 1;
+	let el: SVGSVGElement | undefined = $state();
-	$: opacity = ease(1 - ((frame % fps) / fps) * 2);
+
+	let opacity = $state(1);
 
 	function ease(x: number) {
 		x = Math.max(0, Math.min(1, x));
 		return 1 - Math.cos((x * Math.PI) / 2);
 	}
+	let center = $derived((el?.clientWidth ?? 0) / 2);
+	let radius = $derived(center);
+	$effect(() => {
+		opacity = ease(1 - ((frame % fps) / fps) * 2);
+	});
 </script>
 
 <svg class="indicator" bind:this={el} style="--opacity: {opacity}">

av-sync/src/components/Scale.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let frame: number;
+	interface Props {
-	export let fps: number;
+		frame: number;
+		fps: number;
+	}
+
+	let { frame, fps }: Props = $props();
 </script>
 
 <div class="scale" style="--frame: {frame}; --fps: {fps}">

av-sync/src/components/SectorIndicator.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
-	export let frame: number;
+	interface Props {
-	export let fps: number;
+		frame: number;
+		fps: number;
+	}
 
-	let el: SVGSVGElement;
+	let { frame, fps }: Props = $props();
-	$: center = el?.clientWidth / 2;
-	$: radius = center;
-	let d = '';
-	let circleOpacity = 1;
 
-	$: {
+	let el: SVGSVGElement | undefined = $state();
+	let center = $derived((el?.clientWidth ?? 0) / 2);
+	let radius = $derived(center);
+	let d = $state('');
+	let circleOpacity = $state(1);
+
+	$effect(() => {
 		const angle = ((frame / fps) * 360) % 360;
 		const radians = (angle * Math.PI) / 180;
 		const x = center + radius * Math.cos(radians);
@@ -17,7 +21,7 @@
 
 		const flashFrames = fps / 10;
 		circleOpacity = (flashFrames - (frame % fps)) / flashFrames;
-	}
+	});
 </script>
 
 <svg class="indicator" style="--circle-opacity: {circleOpacity}" bind:this={el}>

av-sync/src/main.ts

@@ -1,7 +1,8 @@
 import './app.css';
 import App from './App.svelte';
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
 	target: document.getElementById('app')!
 });