Tutorial part two

apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/+assets/app-a/src/lib/App.svelte

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

apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/+assets/app-b/src/lib/App.svelte

@@ -0,0 +1,16 @@
+<script>
+	let numbers = $state([1, 2, 3, 4]);
+	let total = $derived(numbers.reduce((t, n) => t + n, 0));
+
+	function addNumber() {
+		numbers.push(numbers.length + 1);
+	}
+
+	$inspect(numbers).with(console.trace);
+</script>
+
+<p>{numbers.join(' + ')} = {total}</p>
+
+<button onclick={addNumber}>
+	Add a number
+</button>

apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md

@@ -0,0 +1,36 @@
+---
+title: Inspecting state
+---
+
+It's often useful to be able to track the value of a piece of state as it changes over time.
+
+Inside the `addNumber` function, we've added a `console.log` statement. But if you click the button and open the console drawer (using the button to the right of the URL bar), you'll see a warning, and a message saying the message could not be cloned.
+
+That's because `numbers` is a reactive [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). There's a couple of things we can do. Firstly, we can create a non-reactive _snapshot_ of the state with `$state.snapshot(...)`:
+
+```js
+/// file: App.svelte
+function addNumber() {
+	numbers.push(numbers.length + 1);
+	console.log(+++$state.snapshot(numbers)+++);
+}
+```
+
+Alternatively, we can use the `$inspect` rune to automatically log a snapshot of the state whenever it changes. This code will automatically be stripped out of your production build:
+
+```js
+/// file: App.svelte
+function addNumber() {
+	numbers.push(numbers.length + 1);
+	---console.log($state.snapshot(numbers));---
+}
+
++++$inspect(numbers);+++
+```
+
+You can customise how the information is displayed by using `$inspect(...).with(fn)` — for example, you can use `console.trace` to see where the state change originated from:
+
+```js
+/// file: App.svelte
+$inspect(numbers)+++.with(console.trace)+++;
+```

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/+assets/app-a/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/+assets/app-a/src/lib/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	let visible = true;
+	let visible = $state(true);
 </script>
 
 <label>

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/+assets/app-b/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/+assets/app-b/src/lib/App.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { fade } from 'svelte/transition';
-	let visible = true;
+
+	let visible = $state(true);
 </script>
 
 <label>

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/index.md → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/index.md

@@ -10,7 +10,8 @@ First, import the `fade` function from `svelte/transition`...
 /// file: App.svelte
 <script>
 	+++import { fade } from 'svelte/transition';+++
-	let visible = true;
+
+	let visible = $state(true);
 </script>
 ```
 

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/+assets/app-b/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/02-adding-parameters-to-transitions/+assets/app-b/src/lib/App.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { fly } from 'svelte/transition';
-	let visible = true;
+
+	let visible = $state(true);
 </script>
 
 <label>

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/index.md → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/02-adding-parameters-to-transitions/index.md

@@ -8,7 +8,8 @@ Transition functions can accept parameters. Replace the `fade` transition with `
 /// file: App.svelte
 <script>
 	import { +++fly+++ } from 'svelte/transition';
-	let visible = true;
+
+	let visible = $state(true);
 </script>
 ```
 

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/03-in-and-out/+assets/app-b/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/03-in-and-out/+assets/app-b/src/lib/App.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { fade, fly } from 'svelte/transition';
-	let visible = true;
+
+	let visible = $state(true);
 </script>
 
 <label>

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { fade } from 'svelte/transition';
 
-	let visible = true;
+	let visible = $state(true);
 
 	function spin(node, { duration }) {
 		return {

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte

@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import { elasticOut } from 'svelte/easing';
 
-	let visible = true;
+	let visible = $state(true);
 
 	function spin(node, { duration }) {
 		return {

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/+assets/app-a/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/05-custom-js-transitions/+assets/app-a/src/lib/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	let visible = false;
+	let visible = $state(false);
 
 	function typewriter(node, { speed = 1 }) {
 		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/+assets/app-b/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/05-custom-js-transitions/+assets/app-b/src/lib/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	let visible = false;
+	let visible = $state(false);
 
 	function typewriter(node, { speed = 1 }) {
 		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/+assets/app-a/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/+assets/app-a/src/lib/App.svelte

@@ -1,8 +1,8 @@
 <script>
 	import { fly } from 'svelte/transition';
 
-	let visible = true;
-	let status = 'waiting...';
+	let visible = $state(true);
+	let status = $state('waiting...');
 </script>
 
 <p>status: {status}</p>
@@ -13,7 +13,9 @@
 </label>
 
 {#if visible}
-	<p transition:fly={{ y: 200, duration: 2000 }}>
+	<p
+		transition:fly={{ y: 200, duration: 2000 }}
+	>
 		Flies in and out
 	</p>
 {/if}

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/+assets/app-b/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/+assets/app-b/src/lib/App.svelte

@@ -1,8 +1,8 @@
 <script>
 	import { fly } from 'svelte/transition';
 
-	let visible = true;
-	let status = 'waiting...';
+	let visible = $state(true);
+	let status = $state('waiting...');
 </script>
 
 <p>status: {status}</p>
@@ -15,10 +15,10 @@
 {#if visible}
 	<p
 		transition:fly={{ y: 200, duration: 2000 }}
-		on:introstart={() => status = 'intro started'}
-		on:outrostart={() => status = 'outro started'}
-		on:introend={() => status = 'intro ended'}
-		on:outroend={() => status = 'outro ended'}
+		onintrostart={() => status = 'intro started'}
+		onoutrostart={() => status = 'outro started'}
+		onintroend={() => status = 'intro ended'}
+		onoutroend={() => status = 'outro ended'}
 	>
 		Flies in and out
 	</p>

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/index.md → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/index.md

@@ -8,10 +8,10 @@ It can be useful to know when transitions are beginning and ending. Svelte dispa
 /// file: App.svelte
 <p
 	transition:fly={{ y: 200, duration: 2000 }}
-	+++on:introstart={() => status = 'intro started'}
-	on:outrostart={() => status = 'outro started'}
-	on:introend={() => status = 'intro ended'}
-	on:outroend={() => status = 'outro ended'}+++
++++	onintrostart={() => status = 'intro started'}
+	onoutrostart={() => status = 'outro started'}
+	onintroend={() => status = 'intro ended'}
+	onoutroend={() => status = 'outro ended'}+++
 >
 	Flies in and out
 </p>

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/+assets/app-a/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/07-global-transitions/+assets/app-a/src/lib/App.svelte

@@ -1,9 +1,10 @@
 <script>
 	import { slide } from 'svelte/transition';
 
-	let showItems = true;
-	let i = 5;
 	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
+
+	let showItems = $state(true);
+	let i = $state(5);
 </script>
 
 <label>

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/+assets/app-b/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/07-global-transitions/+assets/app-b/src/lib/App.svelte

@@ -1,9 +1,10 @@
 <script>
 	import { slide } from 'svelte/transition';
 
-	let showItems = true;
-	let i = 5;
 	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
+
+	let showItems = $state(true);
+	let i = $state(5);
 </script>
 
 <label>

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-a/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-a/src/lib/App.svelte

@@ -1,11 +1,10 @@
 <script>
-	import { onMount } from 'svelte';
 	import { typewriter } from './transition.js';
 	import { messages } from './loading-messages.js';
 
-	let i = -1;
+	let i = $state(-1);
 
-	onMount(() => {
+	$effect(() => {
 		const interval = setInterval(() => {
 			i += 1;
 			i %= messages.length;
@@ -21,4 +20,4 @@
 
 <p in:typewriter={{ speed: 10 }}>
 	{messages[i] || ''}
-</p>
+</p>

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-b/src/lib/App.svelte → apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-b/src/lib/App.svelte

@@ -1,11 +1,10 @@
 <script>
-	import { onMount } from 'svelte';
 	import { typewriter } from './transition.js';
 	import { messages } from './loading-messages.js';
 
-	let i = -1;
+	let i = $state(-1);
 
-	onMount(() => {
+	$effect(() => {
 		const interval = setInterval(() => {
 			i += 1;
 			i %= messages.length;
@@ -23,4 +22,4 @@
 	<p in:typewriter={{ speed: 10 }}>
 		{messages[i] || ''}
 	</p>
-{/key}
+{/key}

apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-a/src/lib/App.svelte

@@ -0,0 +1,87 @@
+<script>
+	import { scale } from './utils.js';
+	import { poll } from './data.js';
+
+	let data = poll();
+
+	let w = $state(1);
+	let h = $state(1);
+
+	const min = $derived(Math.min(...data) - 5);
+	const max = $derived(Math.max(...data) + 5);
+	const x = $derived(scale([0, data.length], [0, w]));
+	const y = $derived(scale([min, max], [h, 0]));
+
+	const ticks = $derived.by(() => {
+		const result = [];
+		let n = 10 * Math.ceil(min / 10);
+		while (n < max) {
+			result.push(n);
+			n += 10;
+		}
+		return result;
+	});
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			data = poll();
+		}, 200);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
+<div class="outer">
+	<svg width={w} height={h} bind:clientWidth={w} bind:clientHeight={h}>
+		<line y1={h} y2={h} x2={w} />
+
+		{#each ticks as tick}
+			<g class="tick" transform="translate(0,{y(tick)})">
+				<line x2={w} />
+				<text x={-5}>{tick}</text>
+			</g>
+		{/each}
+
+		<polyline points={data.map((d, i) => [x(i), y(d)]).join(' ')} />
+
+		<text x={10} y={10} font-size={36}>$SVLT</text>
+	</svg>
+</div>
+
+<style>
+	.outer {
+		width: 100%;
+		height: 100%;
+		padding: 2em;
+		box-sizing: border-box;
+	}
+
+	svg {
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+	}
+
+	polyline {
+		fill: none;
+		stroke: #ff3e00;
+		stroke-width: 2;
+		stroke-linejoin: round;
+		stroke-linecap: round;
+	}
+
+	line {
+		stroke: #aaa;
+	}
+
+	.tick {
+		stroke-dasharray: 2 2;
+
+		text {
+			text-anchor: end;
+			dominant-baseline: middle;
+		}
+	}
+</style>

apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-a/src/lib/data.js

@@ -0,0 +1,17 @@
+let previous = 50;
+let data = [];
+
+function next() {
+	const value = previous + Math.random() - 0.4;
+	previous = value;
+
+	return value;
+}
+
+for (let i = 0; i < 100; i += 1) {
+	data.push(next());
+}
+
+export function poll() {
+	return data = [...data.slice(1), next()];
+}