Effect CommunityEC
Effect Community•7mo ago
olange

Creating global browser runtime for shared access to runFork() Effects in PWA using Custom Elements

How can I create a single «global browser runtime» in a browser PWA (using Custom Elements + Lit), so that all custom elements can access it to runFork() Effects within the same root span and shared services (Datastore, ConfigManager, etc.)?

I’m currently using BrowserRuntime.runMain() for startup and its pretty logging, but after reading too much Effect docs and sources, I can’t figure out anymore how to simply access or share the «root Effect/runtime» instance for later runFork()!

Is there an idiomatic Effect-TS approach for this use case?

In code sample hereafter, console.debug(runtime) returns 
undefined
.
How to grab the browser runtime Effect? 

import { BrowserRuntime } from "@effect/platform-browser";
import { Effect } from "effect";

// const AppLayers = pipe(
//   DevTools.layer("ws://localhost:34437"),
//   Layer.provideMerge(ConfigManager.Default),
//   Layer.provideMerge(Datastore.Default),
//   Layer.provideMerge(LogLevelLive),
//   Layer.provideMerge(ViteConfigProvider),
// );

const program = Effect.fn("‹app› runtime")(function* () {
  // Bootstrap sequence
  // […]
  return yield* Effect.never; // Keep the program running indefinitely
});

const runtime = program().pipe(
    // Effect.provide(AppLayers),
    BrowserRuntime.runMain
  );

// How to grab the browser runtime Effect from other components
// to `runFork()` other Effects in the same runtime context?
console.debug(runtime);
// -> undefined!
Was this page helpful?