updated context example

Author: Rich Harris

content/tutorial/02-advanced-svelte/08-context/01-context-api/README.md

@@ -2,61 +2,89 @@
 title: setContext and getContext
 ---
 
-> This exercise doesn't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/context-api
+The context API provides a mechanism for components to 'talk' to each other without passing around data and functions as props, or dispatching lots of events. It's an advanced feature, but a useful one. In this exercise, we're going to recreate [Schotter](https://collections.vam.ac.uk/item/O221321/schotter-print-nees-georg/) by George Nees — one of the pioneers of generative art — using the context API.
 
-The context API provides a mechanism for components to 'talk' to each other without passing around data and functions as props, or dispatching lots of events. It's an advanced feature, but a useful one.
+Inside `Canvas.svelte`, there's an `addItem` function that adds an item to the canvas. We can make it available to components inside `<Canvas>`, like `<Square>`, with `setContext`:
 
-Take this example app using a [Mapbox GL](https://docs.mapbox.com/mapbox-gl-js/overview/) map. We'd like to display the markers, using the `<MapMarker>` component, but we don't want to have to pass around a reference to the underlying Mapbox instance as a prop on each component.
+```svelte
+/// file: Canvas.svelte
+<script>
+	import { +++setContext+++, afterUpdate, onMount, tick } from 'svelte';
 
-There are two halves to the context API — `setContext` and `getContext`. If a component calls `setContext(key, context)`, then any _child_ component can retrieve the context with `const context = getContext(key)`.
+	// ...
 
-Let's set the context first. In `Map.svelte`, import `setContext` from `svelte` and `key` from `mapbox.js` and call `setContext`:
+	onMount(() => {
+		ctx = canvas.getContext('2d');
+	});
 
-```js
-/// file: Map.svelte
-import { onMount, setContext } from 'svelte';
-import { mapbox, key } from './mapbox.js';
-
-setContext(key, {
-	getMap: () => map
-});
-```
-
-The context object can be anything you like. Like [lifecycle functions](/tutorial/onmount), `setContext` and `getContext` must be called during component initialisation. Calling it afterwards - for example inside `onMount` - will throw an error. In this example, since `map` isn't created until the component has mounted, our context object contains a `getMap` function rather than `map` itself.
++++	setContext('canvas', {
+		addItem
+	});+++
 
-On the other side of the equation, in `MapMarker.svelte`, we can now get a reference to the Mapbox instance:
+	function addItem(fn) {...}
 
-```js
-/// file: MapMarker.svelte
-import { getContext } from 'svelte';
-import { mapbox, key } from './mapbox.js';
-
-const { getMap } = getContext(key);
-const map = getMap();
+	function draw() {...}
+</script>
 ```
 
-The markers can now add themselves to the map.
+Inside child components, we can now get the context with, well, `getContext`:
 
-> A more finished version of `<MapMarker>` would also handle removal and prop changes, but we're only demonstrating context here.
+```svelte
+/// file: Square.svelte
+<script>
+	+++import { getContext } from 'svelte';+++
 
-## Context keys
+	export let x;
+	export let y;
+	export let size;
+	export let rotate;
 
-In `mapbox.js` you'll see this line:
+	+++getContext('canvas').addItem(draw);+++
 
-```js
-/// file: mapbox.js
-const key = {};
+	function draw(ctx) {...}
+</script>
 ```
 
-We can use anything as a key — we could do `setContext('mapbox', ...)` for example. The downside of using a string is that different component libraries might accidentally use the same one; using an object literal means the keys are guaranteed not to conflict in any circumstance (since an object only has referential equality to itself, i.e. `{} !== {}` whereas `"x" === "x"`), even when you have multiple different contexts operating across many component layers.
+So far, so... boring. Let's add some randomness to the grid:
+
+```svelte
+/// file: App.svelte
+<div class="container">
+	<Canvas width={800} height={1200}>
+		{#each Array(12) as _, c}
+			{#each Array(22) as _, r}
+				<Square
+					x={180 + c * 40+++ + jitter(r * 2)+++}
+					y={180 + r * 40+++ + jitter(r * 2)+++}
+					size={40}
+					+++rotate={jitter(r * 0.05)}+++
+				/>
+			{/each}
+		{/each}
+	</Canvas>
+</div>
+```
 
-## Contexts vs. stores
+Like [lifecycle functions](/tutorial/onmount), `setContext` and `getContext` must be called during component initialisation. (The context key (`'canvas'` in this case) can be anything you like, including non-strings, which is useful for controlling who can access the context.)
 
-Contexts and stores seem similar. They differ in that stores are available to _any_ part of an app, while a context is only available to _a component and its descendants_. This can be helpful if you want to use several instances of a component without the state of one interfering with the state of the others.
+Your context object can include anything, including stores. This allows you to pass values that change over time to child components:
 
-In fact, you might use the two together. Since context is not reactive, values that change over time should be represented as stores:
+```js
+/// no-file
+// in a parent component
+import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
 
+setContext('my-context', {
+	count: writable(0)
+});
+```
 ```js
 /// no-file
-const { these, are, stores } = getContext(...);
+// in a child component
+import { getContext } from 'svelte';
+
+const { count } = getContext('my-context');
+
+$: console.log({ count });
 ```

content/tutorial/02-advanced-svelte/08-context/01-context-api/app-a/src/lib/App.svelte

@@ -1,37 +1,41 @@
 <script>
-	import Map from './Map.svelte';
-	import MapMarker from './MapMarker.svelte';
+	import Canvas from './Canvas.svelte';
+	import Square from './Square.svelte';
+
+	// we use a seeded random number generator to get consistent jitter
+	let seed = 1;
+
+	function random() {
+		seed *= 16807;
+		seed %= 2147483647;
+		return (seed - 1) / 2147483646;
+	}
+
+	function jitter(amount) {
+		return amount * (random() - 0.5);
+	}
 </script>
 
-<Map lat={35} lon={-84} zoom={3.5}>
-	<MapMarker
-		lat={37.8225}
-		lon={-122.0024}
-		label="Svelte Body Shaping"
-	/>
-	<MapMarker
-		lat={33.8981}
-		lon={-118.4169}
-		label="Svelte Barbershop & Essentials"
-	/>
-	<MapMarker
-		lat={29.723}
-		lon={-95.4189}
-		label="Svelte Waxing Studio"
-	/>
-	<MapMarker
-		lat={28.3378}
-		lon={-81.3966}
-		label="Svelte 30 Nutritional Consultants"
-	/>
-	<MapMarker
-		lat={40.6483}
-		lon={-74.0237}
-		label="Svelte Brands LLC"
-	/>
-	<MapMarker
-		lat={40.6986}
-		lon={-74.41}
-		label="Svelte Medical Systems"
-	/>
-</Map>
+<div class="container">
+	<Canvas width={800} height={1200}>
+		{#each Array(12) as _, c}
+			{#each Array(22) as _, r}
+				<Square
+					x={180 + c * 40}
+					y={180 + r * 40}
+					size={40}
+				/>
+			{/each}
+		{/each}
+	</Canvas>
+</div>
+
+<style>
+	.container {
+		height: 100%;
+		aspect-ratio: 2 / 3;
+		margin: 0 auto;
+		background: rgb(224, 219, 213);
+		filter: drop-shadow(0.5em 0.5em 1em rgba(0, 0, 0, 0.1));
+	}
+</style>

content/tutorial/02-advanced-svelte/08-context/01-context-api/app-a/src/lib/Canvas.svelte

@@ -0,0 +1,47 @@
+<script>
+	import { afterUpdate, onMount, tick } from 'svelte';
+
+	export let width = 100;
+	export let height = 100;
+
+	let canvas, ctx;
+	let items = new Set();
+	let scheduled = false;
+
+	onMount(() => {
+		ctx = canvas.getContext('2d');
+	});
+
+	function addItem(fn) {
+		onMount(() => {
+			items.add(fn);
+			return () => items.delete(fn);
+		});
+		
+		afterUpdate(async () => {
+			if (scheduled) return;
+			
+			scheduled = true;
+			await tick();
+			scheduled = false;
+
+			draw();
+		});
+	}
+
+	function draw() {
+		ctx.clearRect(0, 0, width, height);
+		items.forEach(fn => fn(ctx));
+	}
+</script>
+
+<canvas bind:this={canvas} {width} {height}>
+	<slot />
+</canvas>
+
+<style>
+	canvas {
+		width: 100%;
+		height: 100%;
+	}
+</style>

content/tutorial/02-advanced-svelte/08-context/01-context-api/app-a/src/lib/Map.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let x;
+	export let y;
+	export let size;
+	export let rotate;
+
+	function draw(ctx) {
+		ctx.save();
+
+		ctx.translate(x, y);
+		ctx.rotate(rotate);
+
+		ctx.strokeStyle = 'black';
+		ctx.strokeRect(-size / 2, -size / 2, size, size);
+
+		ctx.restore();
+	}
+</script>

content/tutorial/02-advanced-svelte/08-context/01-context-api/app-a/src/lib/MapMarker.svelte

@@ -0,0 +1,42 @@
+<script>
+	import Canvas from './Canvas.svelte';
+	import Square from './Square.svelte';
+
+	// we use a seeded random number generator to get consistent jitter
+	let seed = 1;
+
+	function random() {
+		seed *= 16807;
+		seed %= 2147483647;
+		return (seed - 1) / 2147483646;
+	}
+
+	function jitter(amount) {
+		return amount * (random() - 0.5);
+	}
+</script>
+
+<div class="container">
+	<Canvas width={800} height={1200}>
+		{#each Array(12) as _, c}
+			{#each Array(22) as _, r}
+				<Square
+					x={180 + c * 40 + jitter(r * 2)}
+					y={180 + r * 40 + jitter(r * 2)}
+					size={40}
+					rotate={jitter(r * 0.05)}
+				/>
+			{/each}
+		{/each}
+	</Canvas>
+</div>
+
+<style>
+	.container {
+		height: 100%;
+		aspect-ratio: 2 / 3;
+		margin: 0 auto;
+		background: rgb(224, 219, 213);
+		filter: drop-shadow(0.5em 0.5em 1em rgba(0, 0, 0, 0.1));
+	}
+</style>