Running the Example

The example we walked through isn’t some sample code to show you the syntax. It’s fully runnable!

First, we will run tsc to do a sanity type-checking to make sure the example conforms to the API contracts:

pnpm exec tsc

Tip

If you are using npm, replace pnpm exec with npx. If you are using @typescript/native-preview, replace tsc with tsgo.

To bundle the TS code we wrote and the SDK library, we will use bun, which offers zero-config bundling for TypeScript:

bun build src/App.ts > dist/index.js
bun build src/Worker.ts > dist/worker.js

We will also create a HTML file that does nothing but loads index.js:

<!-- dist/index.html -->
<DOCTYPE! html>
<html>
    <head>
    </head>
    <body>
        <script src="index.js"></script>
            You need to open the console to see the example output
    </body>
</html>

Now run pnpm exec serve dist to serve the example locally, and open it in your browser. You should see something like this in the console:

App: start
App: creating worker
App: connectiong to worker
Worker: start
App: worker connected!
App: calling worker.initialize()
Worker: ready to be initialized!
Worker: (fakely) initialized!
App: calling worker.process()
Worker: processing input: hello foo
App: got response from worker: Object { val: 'hello foo bar' }

Note

Your output might have a different order - That’s the magic of multithreading! Now it’s time for you to go back to the source and see if the output makes sense to you.

You can also try refreshing the window a few times, and you might see the order of the logs change!

Keyboard shortcuts

Workex

Running the Example