Context API

[00:00:00]
>> For those of you who haven't used context in other frameworks context API's are essentially a mechanism for components to talk to each other without passing data and functions around as props and without dispatching events. All right, it's not a feature that you will tend to use a lot in your own apps, but it is a useful one.

[00:00:18]
It's something that's more frequently used in the context of a component library but it's worth understanding how it works. So in this exercise, we've got a blank Canvas here and our task is to recreate this piece of artwork called Schotter by a chap named George Nees. He was one of the pioneers of computer driven artwork.

[00:00:42]
We're gonna use the Canvas API to rebuild this. So App.svelte is instantiating this Canvas element, and it's putting an array of squares inside the Canvas. Canvas as we've seen is this very imperative API, it doesn't normally work with components. The context API allows us to make components that draw to a Canvas.

[00:01:18]
Inside the Canvas component, we have this addItem function. And what addItem does is it calls onMount and adds a function that is gonna render something to a Canvas to a set that we have locally to the Canvas element. And then when the component is removed it will take that out of the set.

[00:01:41]
Every time there's any update to the state, then it's gonna use that await tick to redraw the Canvas to reflect the new data. So what we need to do, our task is to make this Add Item function available to the square.svelte component. And we can do that by first importing setContext from Svelte, and then calling it with a name for the context, we're gonna use the word Canvas but it can be anything, doesn't even need to be a string and we'll pass that addItem function.

[00:02:24]
And then inside square which is a child of Canvas, in the sense the app.svelte contains Canvas, and inside that it's got a bunch of squares. We can use the opposite function getContext. When this component is created we're gonna get the current context so that we get a reference to that function.

[00:02:56]
And we're gonna pass in the Draw a function that is defined inside Square.svelte, right and if we bring this up a little bit so you can see it, it is in fact drawing a grid. It's a little boring though, we could add some randomness here so inside App.svelte Where we're passing the props into the square we can add a little bit of randomness with this jitter utility.

[00:03:28]
Right, the further down we get the higher the value of r, r stands for row in this context, so that as with the the original artwork, it starts out very regular and then starts to get more raggedy as we get down. We'll do the same thing with the y value.

[00:03:56]
And then finally we'll add some rotate. All right, and I think that's pretty close to the original artwork, were using a seeded pseudo random number generator here. So we can change that seed and get a different set of random numbers until we find one that we like. Now, just like onMount and before update and after update, you have to call setContext and getContext while your component is initializing, that's how we link the context to the component tree.

[00:04:52]
Sometimes you need to have data that is changing in some parent and you need to build a response to that changing data in your child component. And when you need to do that, you can pass a store in as your context as shown here.