update onMount exercise

Author: Rich Harris

content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md

@@ -2,30 +2,55 @@
 title: onMount
 ---
 
-> The images in this exercise don't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/onmount
+Every component has a _lifecycle_ that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle. The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM.
 
-Every component has a _lifecycle_ that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
+In this exercise, we have a `<canvas>` that we'd like to animate, using the `paint` function in `gradient.js`. Begin by importing the function from `svelte`:
 
-The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM.
+```svelte
+/// file: App.svelte
+<script>
+	+++import { onMount } from 'svelte';+++
+	import { paint } from './gradient.js';
+</script>
+```
 
-We'll add an `onMount` handler that loads some data over the network:
+Then, add a function that runs when the component mounts:
 
 ```svelte
 /// file: App.svelte
 <script>
 	import { onMount } from 'svelte';
+	import { paint } from './gradient.js';
 
-	let photos = [];
++++	onMount(() => {
+		const canvas = document.querySelector('canvas')
+		const context = canvas.getContext('2d');+++
 
-	onMount(async () => {
-		const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
-		photos = await res.json();
-	});
++++		requestAnimationFrame(function loop(t) {
+			requestAnimationFrame(loop);
+			paint(context, t);
+		});
+	});+++
 </script>
 ```
 
-> It's recommended to put the `fetch` in `onMount` rather than at the top level of the `<script>` because of server-side rendering (SSR). With the exception of `onDestroy`, lifecycle functions don't run during SSR, which means we can avoid fetching data that should be loaded lazily once the component has been mounted in the DOM.
+So far so good — you should see gently undulating colours in the shape of the Svelte logo. But there's one problem — the loop will continue even after the component has been destroyed. To fix that, we need to return a cleanup function from `onMount`:
+
+```js
+/// file: App.svelte
+onMount(() => {
+	const canvas = document.querySelector('canvas')
+	const context = canvas.getContext('2d');
+
+	+++let frame =+++ requestAnimationFrame(function loop(t) {
+		+++frame =+++ requestAnimationFrame(loop);
+		paint(context, t);
+	});
 
-Lifecycle functions must be called while the component is initialising so that the callback is bound to the component instance — not (say) in a `setTimeout`.
+	loop();
 
-If the `onMount` callback returns a function, that function will be called when the component is destroyed.
++++	return () => {
+		cancelAnimationFrame(frame);
+	};+++
+});
+```

content/tutorial/01-svelte/07-lifecycle/01-onmount/app-a/src/lib/App.svelte

@@ -1,35 +1,23 @@
 <script>
-	let photos = [];
+	import { paint } from './gradient.js';
 </script>
 
-<h1>Photo album</h1>
-
-<div class="photos">
-	{#each photos as photo}
-		<figure>
-			<img
-				src={photo.thumbnailUrl}
-				alt={photo.title}
-			/>
-			<figcaption>{photo.title}</figcaption>
-		</figure>
-	{:else}
-		<!-- this block renders when photos.length === 0 -->
-		<p>loading...</p>
-	{/each}
-</div>
+<canvas
+	width={32}
+	height={32}
+/>
 
 <style>
-	.photos {
-		width: 100%;
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		grid-gap: 8px;
-	}
-
-	figure,
-	img {
+	canvas {
+		position: fixed;
+		left: 0;
+		top: 0;
 		width: 100%;
-		margin: 0;
+		height: 100%;
+		background-color: #666;
+		mask: url(./svelte-logo-mask.svg) 50% 50% no-repeat;
+		mask-size: 60vmin;
+		-webkit-mask: url(./svelte-logo-mask.svg) 50% 50% no-repeat;
+		-webkit-mask-size: 60vmin;
 	}
 </style>

content/tutorial/01-svelte/07-lifecycle/01-onmount/app-a/src/lib/gradient.js

@@ -0,0 +1,21 @@
+export function paint(context, t) {
+	const { width, height } = context.canvas;
+	const imageData = context.getImageData(0, 0, width, height);
+
+	for (let p = 0; p < imageData.data.length; p += 4) {
+		const i = p / 4;
+		const x = i % width;
+		const y = (i / width) >>> 0;
+
+		const red = 64 + (128 * x) / width + 64 * Math.sin(t / 1000);
+		const green = 64 + (128 * y) / height + 64 * Math.cos(t / 1000);
+		const blue = 128;
+
+		imageData.data[p + 0] = red;
+		imageData.data[p + 1] = green;
+		imageData.data[p + 2] = blue;
+		imageData.data[p + 3] = 255;
+	}
+
+	context.putImageData(imageData, 0, 0);
+}

content/tutorial/01-svelte/07-lifecycle/01-onmount/app-a/src/lib/svelte-logo-mask.svg

@@ -1,44 +1,38 @@
 <script>
 	import { onMount } from 'svelte';
+	import { paint } from './gradient.js';
 
-	let photos = [];
+	onMount(() => {
+		const canvas = document.querySelector('canvas')
+		const context = canvas.getContext('2d');
 
-	onMount(async () => {
-		const res = await fetch(
-			`https://jsonplaceholder.typicode.com/photos?_limit=20`
-		);
-		photos = await res.json();
+		let frame = requestAnimationFrame(function loop(t) {
+			frame = requestAnimationFrame(loop);
+			paint(context, t);
+		});
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
 	});
 </script>
 
-<h1>Photo album</h1>
-
-<div class="photos">
-	{#each photos as photo}
-		<figure>
-			<img
-				src={photo.thumbnailUrl}
-				alt={photo.title}
-			/>
-			<figcaption>{photo.title}</figcaption>
-		</figure>
-	{:else}
-		<!-- this block renders when photos.length === 0 -->
-		<p>loading...</p>
-	{/each}
-</div>
+<canvas
+	width={32}
+	height={32}
+/>
 
 <style>
-	.photos {
-		width: 100%;
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		grid-gap: 8px;
-	}
-
-	figure,
-	img {
+	canvas {
+		position: fixed;
+		left: 0;
+		top: 0;
 		width: 100%;
-		margin: 0;
+		height: 100%;
+		background-color: #666;
+		mask: url(./svelte-logo-mask.svg) 50% 50% no-repeat;
+		mask-size: 60vmin;
+		-webkit-mask: url(./svelte-logo-mask.svg) 50% 50% no-repeat;
+		-webkit-mask-size: 60vmin;
 	}
 </style>