@livestore/adapter-web 0.3.0-dev.36 → 0.3.0-dev.38

package/src/web-worker/client-session/persisted-adapter.ts

@@ -1,15 +1,16 @@
 import type { Adapter, ClientSession, LockStatus } from '@livestore/common'
-import { Devtools, IntentionalShutdownCause, StoreInterrupted, UnexpectedError } from '@livestore/common'
+import {
+  Devtools,
+  IntentionalShutdownCause,
+  makeClientSession,
+  StoreInterrupted,
+  UnexpectedError,
+} from '@livestore/common'
 // TODO bring back - this currently doesn't work due to https://github.com/vitejs/vite/issues/8427
 // NOTE We're using a non-relative import here for Vite to properly resolve the import during app builds
 // import LiveStoreSharedWorker from '@livestore/adapter-web/internal-shared-worker?sharedworker'
 import { EventId, SystemTables } from '@livestore/common/schema'
-import {
-  ClientSessionRequestContentscriptMain,
-  connectViaWorker,
-  makeChannelForConnectedMeshNode,
-  makeSessionsChannel,
-} from '@livestore/devtools-web-common/web-channel'
+import * as DevtoolsWeb from '@livestore/devtools-web-common/web-channel'
 import { sqliteDbFactory } from '@livestore/sqlite-wasm/browser'
 import { loadSqlite3Wasm } from '@livestore/sqlite-wasm/load-wasm'
 import { isDevEnv, shouldNeverHappen, tryAsFunctionAndNew } from '@livestore/utils'
@@ -104,17 +105,10 @@ export type WebAdapterOptions = {
 
 export const makePersistedAdapter =
   (options: WebAdapterOptions): Adapter =>
-  ({
-    schema,
-    storeId,
-    devtoolsEnabled,
-    debugInstanceId,
-    bootStatusQueue,
-    shutdown,
-    connectDevtoolsToStore,
-    syncPayload,
-  }) =>
+  (adapterArgs) =>
     Effect.gen(function* () {
+      const { schema, storeId, devtoolsEnabled, debugInstanceId, bootStatusQueue, shutdown, syncPayload } = adapterArgs
+
       yield* ensureBrowserRequirements
 
       yield* Queue.offer(bootStatusQueue, { stage: 'loading' })
@@ -392,135 +386,102 @@ export const makePersistedAdapter =
         }).pipe(Effect.tapCauseLogPretty, Effect.orDie),
       )
 
-      const devtools: ClientSession['devtools'] = devtoolsEnabled
-        ? { enabled: true, pullLatch: yield* Effect.makeLatch(true), pushLatch: yield* Effect.makeLatch(true) }
-        : { enabled: false }
-
-      const clientSession = {
-        sqliteDb,
-        devtools,
-        lockStatus,
-        clientId,
-        sessionId,
-
-        leaderThread: {
-          export: runInWorker(new WorkerSchema.LeaderWorkerInner.Export()).pipe(
-            Effect.timeout(10_000),
-            UnexpectedError.mapToUnexpectedError,
-            Effect.withSpan('@livestore/adapter-web:client-session:export'),
-          ),
-
-          events: {
-            pull: ({ cursor }) =>
-              runInWorkerStream(new WorkerSchema.LeaderWorkerInner.PullStream({ cursor })).pipe(Stream.orDie),
-            push: (batch) =>
-              runInWorker(new WorkerSchema.LeaderWorkerInner.PushToLeader({ batch })).pipe(
-                Effect.withSpan('@livestore/adapter-web:client-session:pushToLeader', {
-                  attributes: { batchSize: batch.length },
-                }),
-              ),
-          },
-
-          initialState: { leaderHead: initialLeaderHead, migrationsReport },
-
-          getEventlogData: runInWorker(new WorkerSchema.LeaderWorkerInner.ExportEventlog()).pipe(
-            Effect.timeout(10_000),
-            UnexpectedError.mapToUnexpectedError,
-            Effect.withSpan('@livestore/adapter-web:client-session:getEventlogData'),
-          ),
-
-          getSyncState: runInWorker(new WorkerSchema.LeaderWorkerInner.GetLeaderSyncState()).pipe(
-            UnexpectedError.mapToUnexpectedError,
-            Effect.withSpan('@livestore/adapter-web:client-session:getLeaderSyncState'),
-          ),
+      const leaderThread: ClientSession['leaderThread'] = {
+        export: runInWorker(new WorkerSchema.LeaderWorkerInner.Export()).pipe(
+          Effect.timeout(10_000),
+          UnexpectedError.mapToUnexpectedError,
+          Effect.withSpan('@livestore/adapter-web:client-session:export'),
+        ),
 
-          sendDevtoolsMessage: (message) =>
-            runInWorker(new WorkerSchema.LeaderWorkerInner.ExtraDevtoolsMessage({ message })).pipe(
-              UnexpectedError.mapToUnexpectedError,
-              Effect.withSpan('@livestore/adapter-web:client-session:devtoolsMessageForLeader'),
+        events: {
+          pull: ({ cursor }) =>
+            runInWorkerStream(new WorkerSchema.LeaderWorkerInner.PullStream({ cursor })).pipe(Stream.orDie),
+          push: (batch) =>
+            runInWorker(new WorkerSchema.LeaderWorkerInner.PushToLeader({ batch })).pipe(
+              Effect.withSpan('@livestore/adapter-web:client-session:pushToLeader', {
+                attributes: { batchSize: batch.length },
+              }),
             ),
         },
 
-        shutdown,
-      } satisfies ClientSession
-
-      if (devtoolsEnabled) {
-        yield* Effect.gen(function* () {
-          const sharedWorker = yield* Fiber.join(sharedWorkerFiber)
-
-          const webmeshNode = yield* Webmesh.makeMeshNode(`client-session-${storeId}-${clientId}-${sessionId}`)
-          globalThis.__debugWebmeshNode = webmeshNode
-
-          yield* logDevtoolsUrl({ clientSession, schema, storeId })
-
-          const sessionsChannel = yield* makeSessionsChannel
-          const sessionInfoMessage = Devtools.SessionInfo.SessionInfo.make({
-            storeId,
-            clientId,
-            sessionId,
-            schemaAlias: schema.devtools.alias,
-          })
-
-          yield* Devtools.SessionInfo.provideSessionInfo({
-            webChannel: sessionsChannel,
-            sessionInfo: sessionInfoMessage,
-          }).pipe(Effect.tapCauseLogPretty, Effect.forkScoped)
-
-          yield* Effect.gen(function* () {
-            const clientSessionStaticChannel = yield* WebChannel.windowChannel2({
-              listenWindow: window,
-              sendWindow: window,
-              schema: { listen: Schema.Void, send: ClientSessionRequestContentscriptMain },
-              ids: { own: 'client-session-static', other: 'contentscript-main-static' },
-            })
-
-            yield* clientSessionStaticChannel.send(
-              ClientSessionRequestContentscriptMain.make({ clientId, sessionId, storeId }),
-            )
+        initialState: { leaderHead: initialLeaderHead, migrationsReport },
 
-            const contentscriptMainNodeName = `contentscript-main-${storeId}-${clientId}-${sessionId}`
-
-            const contentscriptMainChannel = yield* WebChannel.windowChannel2({
-              listenWindow: window,
-              sendWindow: window,
-              schema: Webmesh.WebmeshSchema.Packet,
-              ids: { own: webmeshNode.nodeName, other: contentscriptMainNodeName },
-            })
+        getEventlogData: runInWorker(new WorkerSchema.LeaderWorkerInner.ExportEventlog()).pipe(
+          Effect.timeout(10_000),
+          UnexpectedError.mapToUnexpectedError,
+          Effect.withSpan('@livestore/adapter-web:client-session:getEventlogData'),
+        ),
 
-            yield* webmeshNode.addEdge({
-              target: contentscriptMainNodeName,
-              edgeChannel: contentscriptMainChannel,
-            })
-            // yield* Effect.logDebug(
-            //   `[@livestore/adapter-web:client-session] initiated connection: ${webmeshNode.nodeName} → contentscript-main`,
-            // )
+        getSyncState: runInWorker(new WorkerSchema.LeaderWorkerInner.GetLeaderSyncState()).pipe(
+          UnexpectedError.mapToUnexpectedError,
+          Effect.withSpan('@livestore/adapter-web:client-session:getLeaderSyncState'),
+        ),
 
-            const extensionWorkerChannel = yield* webmeshNode.makeBroadcastChannel({
-              channelName: 'session-info',
-              schema: Devtools.SessionInfo.Message,
-            })
+        sendDevtoolsMessage: (message) =>
+          runInWorker(new WorkerSchema.LeaderWorkerInner.ExtraDevtoolsMessage({ message })).pipe(
+            UnexpectedError.mapToUnexpectedError,
+            Effect.withSpan('@livestore/adapter-web:client-session:devtoolsMessageForLeader'),
+          ),
+      }
 
+      const clientSession = yield* makeClientSession({
+        ...adapterArgs,
+        sqliteDb,
+        lockStatus,
+        clientId,
+        sessionId,
+        leaderThread,
+        webmeshMode: 'direct',
+        connectWebmeshNode: Effect.fn(function* ({ webmeshNode, sessionInfo }) {
+          if (devtoolsEnabled) {
+            yield* logDevtoolsUrl({ clientId, sessionId, schema, storeId })
+
+            // This additional sessioninfo broadcast channel is needed since we can't use the shared worker
+            // as it's currently storeId-specific
             yield* Devtools.SessionInfo.provideSessionInfo({
-              webChannel: extensionWorkerChannel,
-              sessionInfo: sessionInfoMessage,
-            })
-          }).pipe(Effect.tapCauseLogPretty, Effect.forkScoped)
-
-          yield* connectViaWorker({ node: webmeshNode, target: 'shared-worker', worker: sharedWorker })
+              webChannel: yield* DevtoolsWeb.makeSessionInfoBroadcastChannel,
+              sessionInfo,
+            }).pipe(Effect.tapCauseLogPretty, Effect.forkScoped)
+
+            yield* Effect.gen(function* () {
+              const clientSessionStaticChannel = yield* DevtoolsWeb.makeStaticClientSessionChannel.clientSession
+
+              yield* clientSessionStaticChannel.send(
+                DevtoolsWeb.ClientSessionContentscriptMainReq.make({ clientId, sessionId, storeId }),
+              )
+
+              const { tabId } = yield* clientSessionStaticChannel.listen.pipe(
+                Stream.flatten(),
+                Stream.runHead,
+                Effect.flatten,
+              )
+
+              const contentscriptMainNodeName = DevtoolsWeb.makeNodeName.browserExtension.contentscriptMain(tabId)
+
+              const contentscriptMainChannel = yield* WebChannel.windowChannel({
+                listenWindow: window,
+                sendWindow: window,
+                schema: Webmesh.WebmeshSchema.Packet,
+                ids: { own: webmeshNode.nodeName, other: contentscriptMainNodeName },
+              })
+
+              yield* webmeshNode.addEdge({ target: contentscriptMainNodeName, edgeChannel: contentscriptMainChannel })
+            }).pipe(
+              Effect.withSpan('@livestore/adapter-web:client-session:devtools:browser-extension'),
+              Effect.tapCauseLogPretty,
+              Effect.forkScoped,
+            )
 
-          const storeDevtoolsChannel = yield* makeChannelForConnectedMeshNode({
-            node: webmeshNode,
-            target: `devtools`,
-            schema: { listen: Devtools.ClientSession.MessageToApp, send: Devtools.ClientSession.MessageFromApp },
-          })
+            const sharedWorker = yield* Fiber.join(sharedWorkerFiber)
 
-          yield* connectDevtoolsToStore(storeDevtoolsChannel)
-        }).pipe(
-          Effect.withSpan('@livestore/adapter-web:client-session:devtools'),
-          Effect.tapCauseLogPretty,
-          Effect.forkScoped,
-        )
-      }
+            yield* DevtoolsWeb.connectViaWorker({
+              node: webmeshNode,
+              target: DevtoolsWeb.makeNodeName.sharedWorker({ storeId }),
+              worker: sharedWorker,
+            })
+          }
+        }),
+      })
 
       return clientSession
     }).pipe(UnexpectedError.mapToUnexpectedError)

package/src/web-worker/leader-worker/make-leader-worker.ts

@@ -4,7 +4,6 @@ import type { DevtoolsOptions } from '@livestore/common/leader-thread'
 import { configureConnection, Eventlog, LeaderThreadCtx, makeLeaderThreadLayer } from '@livestore/common/leader-thread'
 import type { LiveStoreSchema } from '@livestore/common/schema'
 import { LiveStoreEvent } from '@livestore/common/schema'
-import { makeChannelForConnectedMeshNode } from '@livestore/devtools-web-common/web-channel'
 import * as WebmeshWorker from '@livestore/devtools-web-common/worker'
 import { sqliteDbFactory } from '@livestore/sqlite-wasm/browser'
 import { loadSqlite3Wasm } from '@livestore/sqlite-wasm/load-wasm'
@@ -92,7 +91,9 @@ const makeWorkerRunnerOuter = (
           Effect.scoped,
           Effect.withSpan('@livestore/adapter-web:worker:wrapper:InitialMessage:innerFiber'),
           Effect.tapCauseLogPretty,
-          Effect.provide(WebmeshWorker.CacheService.layer({ nodeName: `leader-${storeId}-${clientId}` })),
+          Effect.provide(
+            WebmeshWorker.CacheService.layer({ nodeName: Devtools.makeNodeName.client.leader({ storeId, clientId }) }),
+          ),
           Effect.forkScoped,
         )
 
@@ -239,22 +240,18 @@ const makeDevtoolsOptions = ({
     if (devtoolsEnabled === false) {
       return { enabled: false }
     }
+
     const { node } = yield* WebmeshWorker.CacheService
 
     return {
       enabled: true,
-      makeBootContext: Effect.gen(function* () {
-        return {
-          devtoolsWebChannel: yield* makeChannelForConnectedMeshNode({
-            node,
-            target: `devtools`,
-            schema: { listen: Devtools.Leader.MessageToApp, send: Devtools.Leader.MessageFromApp },
-          }),
-          persistenceInfo: {
-            state: dbState.metadata.persistenceInfo,
-            eventlog: dbEventlog.metadata.persistenceInfo,
-          },
+      boot: Effect.gen(function* () {
+        const persistenceInfo = {
+          state: dbState.metadata.persistenceInfo,
+          eventlog: dbEventlog.metadata.persistenceInfo,
         }
+
+        return { node, persistenceInfo, mode: 'direct' }
       }),
     }
   })

package/src/web-worker/shared-worker/make-shared-worker.ts

@@ -1,5 +1,5 @@
-import { UnexpectedError } from '@livestore/common'
-import { connectViaWorker } from '@livestore/devtools-web-common/web-channel'
+import { Devtools, UnexpectedError } from '@livestore/common'
+import * as DevtoolsWeb from '@livestore/devtools-web-common/web-channel'
 import * as WebmeshWorker from '@livestore/devtools-web-common/worker'
 import { isDevEnv, isNotUndefined, LS_DEV } from '@livestore/utils'
 import {
@@ -207,10 +207,11 @@ const makeWorkerRunner = Effect.gen(function* () {
           const { node } = yield* WebmeshWorker.CacheService
           const { storeId, clientId } = initialMessagePayload.initialMessage
 
-          yield* connectViaWorker({ node, worker, target: `leader-${storeId}-${clientId}` }).pipe(
-            Effect.tapCauseLogPretty,
-            Effect.forkScoped,
-          )
+          yield* DevtoolsWeb.connectViaWorker({
+            node,
+            worker,
+            target: Devtools.makeNodeName.client.leader({ storeId, clientId }),
+          }).pipe(Effect.tapCauseLogPretty, Effect.forkScoped)
 
           yield* SubscriptionRef.set(leaderWorkerContextSubRef, { worker, scope })
         }).pipe(Effect.tapCauseLogPretty, Scope.extend(scope), Effect.forkIn(scope))
@@ -239,6 +240,9 @@ const makeWorkerRunner = Effect.gen(function* () {
 }).pipe(Layer.unwrapScoped)
 
 export const makeWorker = () => {
+  // Extract from `livestore-shared-worker-${storeId}`
+  const storeId = self.name.replace('livestore-shared-worker-', '')
+
   makeWorkerRunner.pipe(
     Layer.provide(BrowserWorkerRunner.layer),
     // WorkerRunner.launch,
@@ -248,7 +252,7 @@ export const makeWorker = () => {
     Effect.annotateLogs({ thread: self.name }),
     Effect.provide(Logger.prettyWithThread(self.name)),
     Effect.provide(FetchHttpClient.layer),
-    Effect.provide(WebmeshWorker.CacheService.layer({ nodeName: 'shared-worker' })),
+    Effect.provide(WebmeshWorker.CacheService.layer({ nodeName: DevtoolsWeb.makeNodeName.sharedWorker({ storeId }) })),
     LS_DEV ? TaskTracing.withAsyncTaggingTracing((name) => (console as any).createTask(name)) : identity,
     // TODO remove type-cast (currently needed to silence a tsc bug)
     (_) => _ as any as Effect.Effect<void, any>,