create and execute worker with effect

Author: SandroMaglione

apps/client/package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@effect/platform": "^0.77.2",
+    "@effect/platform-browser": "^0.56.2",
     "@local/sync": "workspace:*",
     "@tanstack/react-router": "^1.105.0",
     "dexie": "^4.0.11",

apps/client/src/routes/$workspaceId.tsx

@@ -1,6 +1,12 @@
+import { Worker } from "@effect/platform";
+import { BrowserWorker } from "@effect/platform-browser";
 import { createFileRoute } from "@tanstack/react-router";
+import { Effect } from "effect";
+import { startTransition } from "react";
 import { RuntimeClient } from "../lib/runtime-client";
 import { WorkspaceManager } from "../lib/services/workspace-manager";
+import { useActionEffect } from "../lib/use-action-effect";
+import { Bootstrap } from "../workers/schema";
 
 export const Route = createFileRoute("/$workspaceId")({
   component: RouteComponent,
@@ -10,5 +16,38 @@ export const Route = createFileRoute("/$workspaceId")({
 
 function RouteComponent() {
   const workspace = Route.useLoaderData();
-  return <div>Hello {workspace.workspaceId}</div>;
+
+  const [, bootstrap] = useActionEffect(
+    ({ workspaceId }: { workspaceId: string }) =>
+      Effect.gen(function* () {
+        const pool = yield* Worker.makePoolSerialized({ size: 1 });
+        return yield* pool.broadcast(new Bootstrap({ workspaceId }));
+      }).pipe(
+        Effect.scoped,
+        Effect.provide(
+          BrowserWorker.layer(
+            () =>
+              new globalThis.Worker(
+                new URL("./src/workers/sync.ts", globalThis.origin),
+                { type: "module" }
+              )
+          )
+        )
+      )
+  );
+
+  return (
+    <div>
+      <p>{workspace.workspaceId}</p>
+      <button
+        onClick={() =>
+          startTransition(() =>
+            bootstrap({ workspaceId: workspace.workspaceId })
+          )
+        }
+      >
+        Bootstrap
+      </button>
+    </div>
+  );
 }

apps/client/src/workers/schema.ts

@@ -0,0 +1,9 @@
+import { Schema } from "effect";
+
+export class Bootstrap extends Schema.TaggedRequest<Bootstrap>()("Bootstrap", {
+  failure: Schema.Never,
+  payload: { workspaceId: Schema.String },
+  success: Schema.Boolean,
+}) {}
+
+export const WorkerMessage = Schema.Union(Bootstrap);

apps/client/src/workers/sync.ts

@@ -0,0 +1,14 @@
+import { WorkerRunner } from "@effect/platform";
+import { BrowserWorkerRunner } from "@effect/platform-browser";
+import { Effect, Layer } from "effect";
+import { WorkerMessage } from "./schema";
+
+const WorkerLive = WorkerRunner.layerSerialized(WorkerMessage, {
+  Bootstrap: ({ workspaceId }) =>
+    Effect.gen(function* () {
+      yield* Effect.log(`Bootstrapping workspace ${workspaceId}`);
+      return true;
+    }),
+}).pipe(Layer.provide(BrowserWorkerRunner.layer));
+
+Effect.runFork(WorkerRunner.launch(WorkerLive));

apps/client/tsconfig.json

@@ -6,6 +6,19 @@
     "target": "ESNext",
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "skipLibCheck": true
-  }
+    "skipLibCheck": true,
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "noUncheckedIndexedAccess": true,
+    // "exactOptionalPropertyTypes": true,
+    "noImplicitOverride": true,
+    "noEmit": true,
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "types": ["vite/client"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }

apps/client/vite.config.ts

@@ -7,4 +7,5 @@ import wasm from "vite-plugin-wasm";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [TanStackRouterVite({}), react(), wasm(), topLevelAwait()],
+  worker: { format: "es" },
 });