migrate svelte tutorial (those parts that can be)

Author: dummdidumm

apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/+assets/app-b/src/lib/App.svelte

@@ -1,12 +1,12 @@
 <script>
-	let count = 0;
+	let count = $state(0);
 
 	function increment() {
 		count += 1;
 	}
 </script>
 
-<button on:click={increment}>
+<button onclick={increment}>
 	Clicked {count}
 	{count === 1 ? 'time' : 'times'}
 </button>

apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/+assets/app-b/src/lib/App.svelte

@@ -1,13 +1,13 @@
 <script>
-	let count = 0;
-	$: doubled = count * 2;
+	let count = $state(0);
+	let doubled = $derived(count * 2);
 
 	function increment() {
 		count += 1;
 	}
 </script>
 
-<button on:click={increment}>
+<button onclick={increment}>
 	Clicked {count}
 	{count === 1 ? 'time' : 'times'}
 </button>

apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/+assets/app-a/src/lib/App.svelte

@@ -1,12 +1,12 @@
 <script>
-	let count = 0;
+	let count = $state(0);
 
 	function handleClick() {
 		count += 1;
 	}
 </script>
 
-<button on:click={handleClick}>
+<button onclick={handleClick}>
 	Clicked {count}
 	{count === 1 ? 'time' : 'times'}
 </button>

apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/+assets/app-b/src/lib/App.svelte

@@ -1,17 +1,19 @@
 <script>
-	let count = 0;
+	let count = $state(0);
 
-	$: if (count >= 10) {
-		alert('count is dangerously high!');
-		count = 0;
-	}
+	$effect(() => {
+		if (count >= 10) {
+			alert('count is dangerously high!');
+			count = 0;
+		}
+	});
 
 	function handleClick() {
 		count += 1;
 	}
 </script>
 
-<button on:click={handleClick}>
+<button onclick={handleClick}>
 	Clicked {count}
 	{count === 1 ? 'time' : 'times'}
 </button>

apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/+assets/app-a/src/lib/App.svelte

@@ -5,11 +5,11 @@
 		numbers.push(numbers.length + 1);
 	}
 
-	$: sum = numbers.reduce((total, currentNumber) => total + currentNumber, 0);
+	let sum = $derived(numbers.reduce((total, currentNumber) => total + currentNumber, 0));
 </script>
 
 <p>{numbers.join(' + ')} = {sum}</p>
 
-<button on:click={addNumber}>
+<button onclick={addNumber}>
 	Add a number
 </button>

apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/+assets/app-b/src/lib/App.svelte

@@ -1,15 +1,15 @@
 <script>
-	let numbers = [1, 2, 3, 4];
+	let numbers = $state([1, 2, 3, 4]);
 
 	function addNumber() {
 		numbers = [...numbers, numbers.length + 1];
 	}
 
-	$: sum = numbers.reduce((total, currentNumber) => total + currentNumber, 0);
+	let sum = $derived(numbers.reduce((total, currentNumber) => total + currentNumber, 0));
 </script>
 
 <p>{numbers.join(' + ')} = {sum}</p>
 
-<button on:click={addNumber}>
+<button onclick={addNumber}>
 	Add a number
 </button>

apps/svelte.dev/content/tutorial/01-svelte/03-props/01-declaring-props/+assets/app-b/src/lib/Nested.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let answer;
+	let { answer } = $props();
 </script>
 
 <p>The answer is {answer}</p>

apps/svelte.dev/content/tutorial/01-svelte/03-props/02-default-values/+assets/app-a/src/lib/Nested.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let answer;
+	let { answer } = $props();
 </script>
 
 <p>The answer is {answer}</p>

apps/svelte.dev/content/tutorial/01-svelte/03-props/02-default-values/+assets/app-b/src/lib/Nested.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let answer = 'a mystery';
+	let { answer = 'a mystery' } = $props();
 </script>
 
 <p>The answer is {answer}</p>

apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/+assets/app-a/src/lib/PackageInfo.svelte

@@ -1,10 +1,12 @@
 <script>
-	export let name;
-	export let version;
-	export let speed;
-	export let website;
+	let {
+		name,
+		version,
+		speed,
+		website
+	} = $props();
 
-	$: href = `https://www.npmjs.com/package/${name}`;
+	let href = $derived(`https://www.npmjs.com/package/${name}`);
 </script>
 
 <p>