Using Generated Code

Finally, we will write the code for the main thread and the worker that talks to each other using the generated code.

For simplicity, we will put the code for the main thread and the worker both in src directory, as src/App.ts and src/Worker.ts. In real projects, these can be put anywhere as long as they are able to import the generated code.

App Code

Create src/App.ts, and paste in the code below. See the comments in the code and the summary after for explanation.

// src/App.ts
import { wxWrapHandler, wxWorker } from "@pistonite/workex";

// this imports the generated code
import { testappWorkerSide } from "./interfaces/WorkerSide.bus.ts";
// this imports the original input interface
import type { AppSide } from "./Interfaces.ts";

// we will wrap the code in an async main function
// to avoid issues with top-level await in older browsers
// and be able to use early returns
const main = async () => {
    console.log("App: start");
    // define the handler on app side that responds
    // to calls from the worker
    const handler: AppSide = {
        getData: wxWrapHandler((id: string) => {
            if (id === "foo") {
                return "bar";
            }
            return "";
        })
    }

    console.log("App: creating worker");
    // create the worker
    // here we assume the bundled worker JS file will be served
    // as /worker.js
    const worker = new Worker("/worker.js");

    console.log("App: connectiong to worker");
    // because WorkerSide and AppSide are linked,
    // testappWorkerSide takes in an AppSide handler
    // and returns a WorkerSide interface
    const result = await wxWorker(worker)({
        workerApi: testappWorkerSide(handler)
    });

    // handle error in initialization of the connection
    if (result.err) {
        console.error("App got error:", result.err);
        // note if the connection fails, the worker will be terminated
        // automatically
        return;
    }
    console.log("App: worker connected!");
    // initialize the worker side
    // the `workerApi` name is derived from the wxWorker call
    // above, and is type-checked
    const { connection, protocols: { workerApi }} = result.val;

    // the returned connection handle can be used to control the connection.
    // for example, register a callback to be called when the connection is closed
    void connection.onClose(() => {
        console.log("App: connection closed");
    });
    // the onClose() function returns a function that can be called
    // to unregister the listener.

    console.log("App: calling worker.initialize()");
    // call the initialize() function defined on the WorkerSide
    // interface
    const ready = await workerApi.initialize();
    // Any RPC call would return WxResult<T>, and you must
    // handle the potential errors that happen during
    // communication
    if (ready.err) {
        console.error("App got error:", ready.err);
        // after connection is established, errors don't close
        // the connection. you can manually close the connection
        // with connection.close() or worker.terminate()
        connection.close();
        return;
    }

    console.log("App: calling worker.process()");

    // do some work!
    const output = await workerApi.process("hello foo");
    console.log("App: got response from worker:", output);
}

// call our main function
void main();

const handler: AppSide = {
    getData: async (id: string) => {
        if (id === "foo") {
            return { val: "bar" };
        }
        return { val: "" };
    }
}

Worker Code

Create src/Worker.ts, and paste in the code below. See the comments in the code and the summary after for explanation.

// src/Worker.ts

import { wxMakePromise, wxWorkerGlobal, type WxPromise } from "@pistonite/workex";

// this imports the generated code
import { testappAppSide } from "./interfaces/AppSide.bus.ts";
// this imports the original input interface
import type { WorkerSide, AppSide } from "./Interfaces.ts";


// we will wrap the code in an async main function
// to avoid issues with top-level await in older browsers
// and be able to use early returns
const main = async () => {
    console.log("Worker: start");
    // create the binding up here since the handler
    // needs to reference the app side, which may or may not be ready
    // when the handler is called
    const {
        promise: appApiPromise,
        resolve: resolveAppApi,
    } = wxMakePromise<AppSide>();

    // define the handler on worker side that responds
    // to calls from the app
    const handler: WorkerSide = {
        initialize: async () => {
            console.log("Worker: (fakely) initialized!");
            return {};
        },
        process: async (input: string): WxPromise<string> => {
            console.log("Worker: processing input:", input);
            // wait for the binding to be set
            const app = await appApiPromise;
            // some example logic
            const data = await app.getData("foo");
            if (data.err) {
                return data;
            }
            return { val: `${input} ${data.val}` };
        }
    };

    // connect to the app side that created this worker
    const result = await wxWorkerGlobal()({
        // this function can take a second parameter,
        // for a callback to be invoked when the binding is ready.
        // If the app side calls us after the connection is established,
        // but before the binding is set on our side, the handler
        // will wait until the binding is set before continuing.
        // thanks to the promise we created at the beginning
        appApi: testappAppSide(handler, resolveAppApi)
    });

    // handle error in initialization of the connection
    if (result.err) {
        console.error(result.err);
        return;
    }
    console.log("Worker: ready to be initialized!");
}

void main();

// casting is ok since we don't call this until it's ready
let appApi: AppSide = undefined as AppSide;
const { promise, resolve } = wxMakePromise();
const handler = {
    initialize: async () => {
        await promise;
        return {}
    }
    /* ... other functions ... */
}

/* ... setup the connection ... */

// assign the binding
({ appApi } = result.val);

// resolve the promise
resolve();