00:00 All right, so Kelly, the co-worker, moved all of our old stuff into this legacy so that the app will still work while we work on our WebWorker here. So I'm going to import cities slash index ts. And inside of here, this is exactly what our legacy implementation is now.

00:16 But we want to move all of this to a new file in filter cities worker. So we're going to move this over to the WebWorker. So right here, we have our filter cities dot worker dot ts. And we're going to stick all of that stuff right there. And from there now, we can get rid of this.

00:35 And let's see. We want to finish the instructions in the worker. So let's go do that first. So in here, we're going to import comlink so that we can expose some methods from our WebWorker. If you want to dive into the WebWorker API directly, be my guest.

00:54 It involves a lot of ad event listener and dispatch messages and stuff like that, which we don't want to deal with. So comlink is going to do all that for us. And we're going to create an exposed object that has all of the APIs we want to expose, which in our case is just the search cities API.

01:11 And then we're going to use comlink expose, comlink dot expose, and pass our exposed object. So this is the stuff that we want people to be able to call. And then we can create a type so that it's easier for comlink to associate things. And we just end up calling methods

01:30 rather than worrying about type safety across these messages. So we'll say export type exposed. And that's going to be our type of exposed. And that should do it for us. This is now our WebWorker. It's got a little TypeScript extra help. But the real magic here is this comlink expose.

01:48 So this is going to listen for special events that end up calling our search cities function. And it will take care of deserializing and serializing all the communication across this IO boundary. So coming back to our index here,

02:05 we're going to import comlink. So this is on the main thread side. So now we're in the main thread. And we're going to import the exposed type. So exposed, OK, import type exposed from the worker. Because we're only importing the type, we're not going to import all the code.

02:24 So everything that's inside of here, match sorter and the US cities, all of that stuff is still going to be loaded in the browser. But it'll be loaded in a separate thread, which will also improve performance as well. All right, great. So now we're going to create a new worker object.

02:39 So const and our worker is a new worker. That's our URL for our worker. And Vite is going to transform this a little bit because you can't actually import TypeScript files with the web platform. But Vite will convert this to something for us.

02:58 And we do want this to be of type module. That's how we're compiling our code. So it's going to be a module we're importing. And now we're going to have comlink manage calling all the functions for us.

03:13 So we'll say const filter cities is comlink.wrap. We'll pass our exposed type. And we'll pass the worker. And now filter cities should have a search cities, thanks to our exposed type, which is kind of nice.

03:29 So we can export a special search cities function. Export a function. It's an async function because we're communicating over an IO boundary called search cities, which takes an input string.

03:46 And it's going to return filter cities, search cities, and pass the input. Suppose we don't technically need the async here because we're not doing a wait in here. This does return a promise, so it would work either way. But we're going to leave the async on just because I like it that way. OK, great.

04:03 And so with this now, we have our worker set up. We have comlink managing communication with the worker on both sides of this worker boundary. So this one's exposing it. And this one is wrapping that. And then we export a special function

04:22 that we can just call anytime we like that will forward on the input into the search cities API that comlink is marshaling for us. And that is how you create a worker with the web platform pretty much. Again, this is some things that Vite is doing for us automatically.

04:41 But this follows the web platform in a pretty straightforward way. So if we pull up our sources and, oh, let's come over to our app. Yeah, we got that imported. Oh, there it is. Yeah, threads. There's our filter city thread. So we are creating the thread. We're creating that new worker.

05:00 And so that's establishing a mechanism for communicating with that. Now, in the next step, we're going to actually handle that communication and update our code to handle that asynchrony that we're about to do.