Fresh should bundle worker entrypoints

[lucacasonato]

Right now using workers in Fresh is kinda painful. For example, I want to load a worker in an island. I would expect to be able to do this with:

const worker = new Worker(import.meta.resolve("./worker.ts"), { type: "module" });

However, Fresh does not pick up on this import and thus does not transpile / bundle the worker and replace import.meta.resolve with a static string.

At some point we'll have a JS standard way of doing this, but for now we should use the commonly accepted stupid way of doing this.

import module myWorker from "./worker.ts";
myWorker instanceof Module; // true

const worker = new Worker(myWorker);

// or

const worker = new Worker();
worker.addModule(myWorker);

[marvinhagemeister]

Related esbuild issue: evanw/esbuild#2866

[deer]

I looked at this for a bit, since I think this would be a nice area of the code base to explore. I created an island like this:

import { useEffect, useRef } from "preact/hooks";

export default function IslandWithWorker() {
  const workerRef = useRef<Worker | null>(null);

  useEffect(() => {
    workerRef.current = new Worker(
      new URL("../workers/myFirstWorker.ts", import.meta.url),
      { type: "module" },
    );

    if (workerRef.current) {
      workerRef.current.postMessage("Message from main thread");
      workerRef.current.onmessage = ({ data }) => {
        console.log("Received message in main thread", data);
      };
    }

    return () => {
      if (workerRef.current) {
        workerRef.current.terminate();
      }
      workerRef.current = null;
    };
  }, []);

  return <div>hello from the island</div>;
}

and my worker/myFirstWorker.ts like this:

self.onmessage = ({ data }) => {
  console.log("Received message in worker", data);
  self.postMessage("this is working");
};

and finally a route:

import { Handlers } from "../../../server.ts";
import IslandWithWorker from "../islands/IslandWithWorker.tsx";

export const handler: Handlers = {
  GET(_req, ctx) {
    return ctx.render();
  },
};

export default function Home() {
  return (
    <div>
      <IslandWithWorker />
    </div>
  );
}

I was successfully able to get this working, in that the chrome console says:

Received message in worker Message from main thread
Received message in main thread this is working

My approach definitely needs to change though, since I wasn't doing anything with esbuild plugins. I'll try that next. If either of you have a more realistic use case, please feel free to share. This is literally my first worker 😅

[lucacasonato]

Oh how curious that this works already! Do you have a repo you can share? I'm suprised esbuild picks up on the new URL("../workers/myFirstWorker.ts", import.meta.url) that easy.

[deer]

No, sorry for not being clear. I had hacked some stuff into #bundleAssetRoute to modify the island manually. This isn't really a scalable approach.

[deer]

Hey @lucacasonato, I created a draft PR where I have my test case and implementation. I did manage to get the esbuild plugin approach working, so I removed my total hack where I was doing it almost manually.