@livestore/adapter-web 0.0.0-snapshot-a953343ad2d7468c6573bcb5e26f0eab4302078f

package/src/devtools-bridge/web-bridge.ts

@@ -0,0 +1,169 @@
+import type { WebAdapterOptions } from '@livestore/adapter-web'
+import { WorkerSchema } from '@livestore/adapter-web'
+import { Devtools, liveStoreVersion } from '@livestore/common'
+import type { LiveStoreSchema } from '@livestore/common/schema'
+import { tryAsFunctionAndNew } from '@livestore/utils'
+import type { Deferred, HashSet, Scope, SubscriptionRef } from '@livestore/utils/effect'
+import { BrowserWorker, Effect, Equal, FiberSet, Hash, PubSub, Schema, Stream, Worker } from '@livestore/utils/effect'
+import { nanoid } from '@livestore/utils/nanoid'
+
+import { makeShared } from './bridge-shared.js'
+
+export class WebBridgeInfo extends Schema.Class<WebBridgeInfo>('WebBridgeChannelInfo')({
+  appHostId: Schema.String,
+  storeId: Schema.String,
+  webBridgeId: Schema.String,
+  isLeader: Schema.Boolean,
+}) {
+  // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+  [Hash.symbol](): number {
+    return Hash.string(this.appHostId)
+  }
+
+  // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+  [Equal.symbol](that: Equal.Equal): boolean {
+    return this.appHostId === (that as WebBridgeInfo).appHostId
+  }
+}
+
+export type WebBridgeOptions = {
+  selectedChannelInfoDeferred: Deferred.Deferred<WebBridgeInfo>
+  bridgeInfos: SubscriptionRef.SubscriptionRef<HashSet.HashSet<WebBridgeInfo>>
+}
+
+// const prepareWebDevtoolsBridge = (
+//   options: {
+//     sharedWorker: WebAdapterOptions['sharedWorker']
+//     appSchema: LiveStoreSchema
+//   } & WebBridgeOptions,
+// ): Effect.Effect<Devtools.PrepareDevtoolsBridge, never, Scope.Scope> =>
+//   Effect.gen(function* () {
+//     const responsePubSub = yield* PubSub.unbounded<
+//       Devtools.MessageFromApp | Devtools.MessageFromApp
+//     >().pipe(Effect.acquireRelease(PubSub.shutdown))
+
+//     const devtoolsId = nanoid()
+
+//     const portForDevtoolsDeferred = yield* Deferred.make<MessagePort>()
+
+//     const webBridgeBroadcastChannel = yield* Devtools.WebBridge.makeBroadcastChannel()
+
+//     yield* webBridgeBroadcastChannel.listen.pipe(
+//       Stream.flatten(),
+//       Stream.filter(Schema.is(Devtools.WebBridge.AppHostReady)),
+//       Stream.tap(() => webBridgeBroadcastChannel.send(Devtools.WebBridge.DevtoolsReady.make({ devtoolsId }))),
+//       Stream.runDrain,
+//       Effect.withSpan(`@livestore/adapter-web:devtools:webBridgeChannel:listen`),
+//       Effect.ignoreLogged,
+//       Effect.forkScoped,
+//     )
+
+//     yield* webBridgeBroadcastChannel.send(Devtools.WebBridge.DevtoolsReady.make({ devtoolsId }))
+
+//     const connectionFiberSet = yield* FiberSet.make()
+
+//     yield* webBridgeBroadcastChannel.listen.pipe(
+//       Stream.flatten(),
+//       Stream.filter(Schema.is(Devtools.WebBridge.ConnectToDevtools)),
+//       Stream.tap((msg) =>
+//         Effect.gen(function* () {
+//           if (devtoolsId !== msg.devtoolsId) return
+
+//           const bridgeInfo = new WebBridgeInfo({
+//             appHostId: msg.appHostId,
+//             webBridgeId: msg.webBridgeId,
+//             isLeader: msg.isLeader,
+//             storeId: msg.storeId,
+//           })
+
+//           // Propagate disconnect event while connecting.
+//           // There's another disconnect handler below after the connection is established.
+//           yield* webBridgeBroadcastChannel.listen.pipe(
+//             Stream.flatten(),
+//             Stream.filter(Schema.is(Devtools.WebBridge.AppHostWillDisconnect)),
+//             Stream.filter((msg) => msg.appHostId === bridgeInfo.appHostId),
+//             Stream.tap(() => SubscriptionRef.getAndUpdate(options.bridgeInfos, HashSet.remove(bridgeInfo))),
+//             Stream.runDrain,
+//             Effect.withSpan(`@livestore/adapter-web:devtools:webBridgeChannel:listenForAppHostWillDisconnect`),
+//             Effect.tapCauseLogPretty,
+//             FiberSet.run(connectionFiberSet),
+//           )
+
+//           yield* SubscriptionRef.getAndUpdate(options.bridgeInfos, HashSet.add(bridgeInfo))
+//         }),
+//       ),
+//       Stream.runDrain,
+//       Effect.withSpan(`@livestore/adapter-web:devtools:webBridgeChannel:listen`),
+//       Effect.tapCauseLogPretty,
+//       FiberSet.run(connectionFiberSet),
+//     )
+
+//     const selectedChannelInfo = yield* Deferred.await(options.selectedChannelInfoDeferred)
+
+//     const sharedWorker = tryAsFunctionAndNew(options.sharedWorker, {
+//       name: `livestore-shared-worker-${selectedChannelInfo.storeId}`,
+//     })
+
+//     const sharedWorkerDeferred = yield* Worker.makeSerialized<typeof WorkerSchema.SharedWorker.Request.Type>({
+//       initialMessage: () => new WorkerSchema.SharedWorker.InitialMessage({ payload: { _tag: 'FromWebBridge' } }),
+//     }).pipe(
+//       Effect.provide(BrowserWorker.layer(() => sharedWorker)),
+//       Effect.tapCauseLogPretty,
+//       Effect.withSpan('@livestore/adapter-web:coordinator:setupSharedWorker'),
+//       Effect.toForkedDeferred,
+//     )
+
+//     yield* Effect.gen(function* () {
+//       const mc = new MessageChannel()
+
+//       const worker = yield* Deferred.await(sharedWorkerDeferred)
+//       yield* worker.executeEffect(
+//         new WorkerSchema.SharedWorker.DevtoolsWebBridgeOfferPort({
+//           port: mc.port1,
+//           webBridgeId: selectedChannelInfo.webBridgeId,
+//         }),
+//       )
+
+//       yield* Deferred.succeed(portForDevtoolsDeferred, mc.port2)
+
+//       // Stop listening for new connections and close `AppHostWillDisconnect` listeners
+//       yield* FiberSet.clear(connectionFiberSet)
+//     }).pipe(Effect.tapCauseLogPretty, Effect.forkScoped)
+
+//     const { sendToAppHost, appHostId, isLeader } = yield* makeShared({ portForDevtoolsDeferred, responsePubSub })
+
+//     // NOTE we need a second listener here since we depend on the `appHostId` to be set
+//     yield* webBridgeBroadcastChannel.listen.pipe(
+//       Stream.flatten(),
+//       Stream.filter(Schema.is(Devtools.WebBridge.AppHostWillDisconnect)),
+//       Stream.filter((msg) => msg.appHostId === appHostId),
+//       Stream.tap(() => SubscriptionRef.getAndUpdate(options.bridgeInfos, HashSet.remove(selectedChannelInfo))),
+//       Stream.tap(() => PubSub.publish(responsePubSub, Devtools.Disconnect.make({ appHostId, liveStoreVersion }))),
+//       Stream.runDrain,
+//       Effect.withSpan(`@livestore/adapter-web:devtools:webBridgeChannel:listenForAppHostWillDisconnect`),
+//       Effect.ignoreLogged,
+//       Effect.forkScoped,
+//     )
+
+//     // NOTE this is not guaranteed to "go through" to the app host but at least we try 🤷
+//     yield* Stream.fromEventListener(window, 'beforeunload').pipe(
+//       Stream.tap(() => sendToAppHost(Devtools.Disconnect.make({ appHostId, liveStoreVersion }))),
+//       Stream.runDrain,
+//       Effect.ignoreLogged,
+//       Effect.forkScoped,
+//     )
+
+//     const copyToClipboard = (text: string) =>
+//       Effect.sync(() => {
+//         navigator.clipboard.writeText(text)
+//       })
+
+//     return {
+//       responsePubSub,
+//       sendToAppHost,
+//       appHostId,
+//       copyToClipboard,
+//       sendEscapeKey: Effect.void,
+//       isLeader,
+//     } satisfies Devtools.PrepareDevtoolsBridge
+//   }).pipe(Effect.orDie)

package/src/in-memory/index.ts

@@ -0,0 +1,66 @@
+import type { Adapter, ClientSession, LockStatus, MigrationsReport } from '@livestore/common'
+import { initializeSingletonTables, migrateDb, UnexpectedError } from '@livestore/common'
+import { configureConnection } from '@livestore/common/leader-thread'
+import { EventId } from '@livestore/common/schema'
+import { sqliteDbFactory } from '@livestore/sqlite-wasm/browser'
+import { loadSqlite3Wasm } from '@livestore/sqlite-wasm/load-wasm'
+import { Effect, Stream, SubscriptionRef } from '@livestore/utils/effect'
+import { nanoid } from '@livestore/utils/nanoid'
+
+// TODO unify in-memory adapter with other in-memory adapter implementations
+
+// NOTE we're starting to initialize the sqlite wasm binary here to speed things up
+const sqlite3Promise = loadSqlite3Wasm()
+
+/** NOTE: This adapter is currently only used for testing */
+export const makeInMemoryAdapter =
+  (initialData?: Uint8Array): Adapter =>
+  ({
+    schema,
+    // devtoolsEnabled, bootStatusQueue, shutdown, connectDevtoolsToStore
+  }) =>
+    Effect.gen(function* () {
+      const sqlite3 = yield* Effect.promise(() => sqlite3Promise)
+
+      const sqliteDb = yield* sqliteDbFactory({ sqlite3 })({ _tag: 'in-memory' })
+      let migrationsReport: MigrationsReport = { migrations: [] }
+
+      if (initialData === undefined) {
+        yield* configureConnection(sqliteDb, { foreignKeys: true })
+
+        migrationsReport = yield* migrateDb({ db: sqliteDb, schema })
+
+        initializeSingletonTables(schema, sqliteDb)
+      } else {
+        sqliteDb.import(initialData)
+
+        yield* configureConnection(sqliteDb, { foreignKeys: true })
+      }
+
+      const lockStatus = SubscriptionRef.make<LockStatus>('has-lock').pipe(Effect.runSync)
+
+      const clientSession = {
+        sqliteDb,
+        devtools: { enabled: false },
+        clientId: 'in-memory',
+        sessionId: nanoid(6),
+        leaderThread: {
+          mutations: {
+            pull: Stream.never,
+            push: () => Effect.void,
+          },
+          initialState: { leaderHead: EventId.ROOT, migrationsReport },
+          export: Effect.dieMessage('Not implemented'),
+          getMutationLogData: Effect.succeed(new Uint8Array()),
+          getSyncState: Effect.dieMessage('Not implemented'),
+          networkStatus: SubscriptionRef.make({ isConnected: false, timestampMs: Date.now(), latchClosed: false }).pipe(
+            Effect.runSync,
+          ),
+          sendDevtoolsMessage: () => Effect.dieMessage('Not implemented'),
+        },
+        lockStatus,
+        shutdown: () => Effect.dieMessage('TODO implement shutdown'),
+      } satisfies ClientSession
+
+      return clientSession
+    }).pipe(UnexpectedError.mapToUnexpectedError)

package/src/index.ts

@@ -0,0 +1,3 @@
+export { makeAdapter, type WebAdapterOptions } from './web-worker/client-session/index.js'
+export { makeInMemoryAdapter } from './in-memory/index.js'
+export * as WorkerSchema from './web-worker/common/worker-schema.js'

package/src/opfs-utils.ts

@@ -0,0 +1,61 @@
+// NOTE we're already firing off this promise call here since we'll need it anyway and need it cached
+
+import { prettyBytes } from '@livestore/utils'
+
+// To improve LiveStore compatibility with e.g. Node.js we're guarding for `navigator` / `navigator.storage` to be defined.
+export const rootHandlePromise =
+  typeof navigator === 'undefined' || navigator.storage === undefined
+    ? // We're using a proxy here to make the promise reject lazy
+      (new Proxy(
+        {},
+        {
+          get: () =>
+            Promise.reject(
+              new Error(`Can't get OPFS root handle in this environment as navigator.storage is undefined`),
+            ),
+        },
+      ) as never)
+    : navigator.storage.getDirectory()
+
+export const getDirHandle = async (absDirPath: string | undefined) => {
+  const rootHandle = await rootHandlePromise
+  if (absDirPath === undefined) return rootHandle
+
+  let dirHandle = rootHandle
+  const directoryStack = absDirPath?.split('/').filter(Boolean)
+  while (directoryStack.length > 0) {
+    dirHandle = await dirHandle.getDirectoryHandle(directoryStack.shift()!)
+  }
+
+  return dirHandle
+}
+
+export const printTree = async (
+  directoryHandle_: FileSystemDirectoryHandle | Promise<FileSystemDirectoryHandle> = rootHandlePromise,
+  depth: number = Number.POSITIVE_INFINITY,
+  prefix: string = '',
+): Promise<void> => {
+  if (depth < 0) return
+
+  const directoryHandle = await directoryHandle_
+  const entries = directoryHandle.values()
+
+  for await (const entry of entries) {
+    const isDirectory = entry.kind === 'directory'
+    const size = entry.kind === 'file' ? await entry.getFile().then((file) => prettyBytes(file.size)) : undefined
+    console.log(`${prefix}${isDirectory ? '📁' : '📄'} ${entry.name} ${size ? `(${size})` : ''}`)
+
+    if (isDirectory) {
+      const nestedDirectoryHandle = await directoryHandle.getDirectoryHandle(entry.name)
+      await printTree(nestedDirectoryHandle, depth - 1, `${prefix}  `)
+    }
+  }
+}
+
+export const deleteAll = async (directoryHandle: FileSystemDirectoryHandle) => {
+  if (directoryHandle.kind !== 'directory') return
+
+  for await (const entryName of directoryHandle.keys()) {
+    await directoryHandle.removeEntry(entryName, { recursive: true })
+  }
+}

package/src/web-worker/ambient.d.ts

@@ -0,0 +1,37 @@
+// TODO remove OPFS stuff
+// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemSyncAccessHandle
+interface FileSystemSyncAccessHandle {
+  close: () => void
+  flush: () => Promise<void>
+  getSize: () => number
+  read: (buffer: ArrayBuffer, options?: FileSystemReadWriteOptions) => number
+  truncate: (newSize: number) => void
+  write: (buffer: ArrayBuffer, options?: FileSystemReadWriteOptions) => number
+  seek: (offset: number) => void
+}
+
+interface FileSystemReadWriteOptions {
+  at?: number
+}
+
+interface FileSystemFileHandle {
+  createSyncAccessHandle: () => Promise<FileSystemSyncAccessHandle>
+}
+
+// TODO bring back when Vite limitation is resolved https://github.com/vitejs/vite/issues/8427
+// declare module '*?sharedworker' {
+//   const sharedWorkerConstructor: {
+//     new (options?: { name?: string }): SharedWorker
+//   }
+//   export default sharedWorkerConstructor
+// }
+
+interface ImportMeta {
+  env: {
+    DEV: boolean | undefined
+    VITE_LIVESTORE_EXPERIMENTAL_SYNC_NEXT: boolean | undefined
+  }
+}
+
+// eslint-disable-next-line no-var
+declare var __debugLiveStoreUtils: any

package/src/web-worker/client-session/client-session-devtools.ts

@@ -0,0 +1,167 @@
+import type { ClientSession, UnexpectedError } from '@livestore/common'
+import { Devtools } from '@livestore/common'
+import { ShutdownChannel } from '@livestore/common/leader-thread'
+import { isDevEnv } from '@livestore/utils'
+import type { Scope } from '@livestore/utils/effect'
+import { Effect, FiberHandle, Runtime, Schema, Stream, WebChannel } from '@livestore/utils/effect'
+import { nanoid } from '@livestore/utils/nanoid'
+
+import { makeShutdownChannel } from '../common/shutdown-channel.js'
+
+export const bootDevtools = ({
+  clientSession,
+  storeId,
+  // waitForDevtoolsWebBridgePort,
+  // connectToDevtools,
+}: {
+  clientSession: ClientSession
+  storeId: string
+  // waitForDevtoolsWebBridgePort: (_: { webBridgeId: string }) => Effect.Effect<MessagePort, UnexpectedError>
+  // connectToDevtools: (coordinatorMessagePort: MessagePort) => Effect.Effect<void, UnexpectedError, Scope.Scope>
+}) =>
+  Effect.gen(function* () {
+    // const webBridgeFiberHandle = yield* FiberHandle.make()
+
+    // // NOTE we're not using the existing coordinator `shutdownChannel` as we won't be able to listen to messages emitted by the same coordinator
+    // const shutdownChannel = yield* makeShutdownChannel(storeId)
+
+    // const connectWebBridge = FiberHandle.run(
+    //   webBridgeFiberHandle,
+    //   listenToWebBridge({ coordinator, waitForDevtoolsWebBridgePort, connectToDevtools, storeId }),
+    // )
+
+    // yield* connectWebBridge
+
+    // // TODO Given we're listening to our own messages and given the leader will emit an initial
+    // // `DedicatedWorkerDisconnectBroadcast`, this will re-run and we should avoid it
+    // yield* shutdownChannel.listen.pipe(
+    //   Stream.flatten(),
+    //   Stream.filter(Schema.is(ShutdownChannel.DedicatedWorkerDisconnectBroadcast)),
+    //   Stream.tap(() => connectWebBridge),
+    //   Stream.runDrain,
+    //   Effect.ignoreLogged,
+    //   Effect.forkScoped,
+    // )
+
+    // yield* listenToBrowserExtensionBridge({ coordinator, connectToDevtools })
+
+    if (isDevEnv()) {
+      const searchParams = new URLSearchParams()
+      searchParams.set('clientId', clientSession.clientId)
+      searchParams.set('sessionId', clientSession.sessionId)
+      searchParams.set('storeId', storeId)
+      const url = `${location.origin}/_livestore?${searchParams.toString()}`
+
+      // Check whether devtools are available and then log the URL
+      const response = yield* Effect.promise(() => fetch(url))
+      if (response.ok) {
+        const text = yield* Effect.promise(() => response.text())
+        if (text.includes('<meta name="livestore-devtools" content="true" />')) {
+          // NOTE the trailing `&` is intentional to avoid Chrome opening the URL in the sources pane
+          // as the browser already fetched it
+          yield* Effect.log(`[@livestore/adapter-web] Devtools ready on ${url}&`)
+        }
+      }
+    }
+  }).pipe(Effect.withSpan('@livestore/adapter-web:coordinator:devtools:boot'))
+
+const listenToWebBridge = ({
+  clientSession,
+  storeId,
+  waitForDevtoolsWebBridgePort,
+  connectToDevtools,
+}: {
+  clientSession: ClientSession
+  storeId: string
+  waitForDevtoolsWebBridgePort: (_: { webBridgeId: string }) => Effect.Effect<MessagePort, UnexpectedError>
+  connectToDevtools: (coordinatorMessagePort: MessagePort) => Effect.Effect<void, UnexpectedError, Scope.Scope>
+}) =>
+  Effect.gen(function* () {
+    // const appHostId = clientSession.devtools.appHostId
+    const webBridgeBroadcastChannel = yield* Devtools.WebBridge.makeBroadcastChannel()
+
+    // const isLeader = yield* clientSession.lockStatus.get.pipe(Effect.map((_) => _ === 'has-lock'))
+    // yield* webBridgeBroadcastChannel.send(Devtools.WebBridge.AppHostReady.make({ appHostId, isLeader }))
+
+    const runtime = yield* Effect.runtime()
+
+    // window.addEventListener('beforeunload', () =>
+    //   webBridgeBroadcastChannel
+    //     .send(Devtools.WebBridge.AppHostWillDisconnect.make({ appHostId }))
+    //     .pipe(Runtime.runFork(runtime)),
+    // )
+
+    // yield* Effect.addFinalizer(() =>
+    //   webBridgeBroadcastChannel
+    //     .send(Devtools.WebBridge.AppHostWillDisconnect.make({ appHostId }))
+    //     .pipe(Effect.ignoreLogged),
+    // )
+
+    // yield* webBridgeBroadcastChannel.listen.pipe(
+    //   Stream.flatten(),
+    //   Stream.filter(Schema.is(Devtools.WebBridge.DevtoolsReady)),
+    //   Stream.tap(({ devtoolsId }) =>
+    //     Effect.gen(function* () {
+    //       const webBridgeId = nanoid()
+    //       yield* waitForDevtoolsWebBridgePort({ webBridgeId }).pipe(
+    //         Effect.andThen(connectToDevtools),
+    //         Effect.tapCauseLogPretty,
+    //         Effect.forkScoped,
+    //       )
+
+    //       const isLeader = yield* clientSession.lockStatus.get.pipe(Effect.map((_) => _ === 'has-lock'))
+    //       yield* webBridgeBroadcastChannel.send(
+    //         Devtools.WebBridge.ConnectToDevtools.make({ appHostId, isLeader, devtoolsId, webBridgeId, storeId }),
+    //       )
+    //     }),
+    //   ),
+    //   Stream.runDrain,
+    //   Effect.ignoreLogged,
+    //   Effect.forkScoped,
+    // )
+
+    yield* Effect.never
+  }).pipe(Effect.scoped)
+
+const listenToBrowserExtensionBridge = ({
+  appHostId,
+  connectToDevtools,
+}: {
+  appHostId: string
+  connectToDevtools: (coordinatorMessagePort: MessagePort) => Effect.Effect<void, UnexpectedError, Scope.Scope>
+}) =>
+  Effect.gen(function* () {
+    const windowChannel = yield* WebChannel.windowChannel({
+      window,
+      schema: {
+        listen: Devtools.DevtoolsWindowMessage.MessageForStore,
+        send: Devtools.DevtoolsWindowMessage.MessageForContentscript,
+      },
+    })
+
+    yield* windowChannel.send(Devtools.DevtoolsWindowMessage.LoadIframe.make({}))
+
+    yield* windowChannel.listen.pipe(
+      Stream.flatten(),
+      Stream.tap((message) =>
+        Effect.gen(function* () {
+          if (message._tag === 'LSD.WindowMessage.ContentscriptListening') {
+            // Send message to contentscript via window (which the contentscript iframe is listening to)
+            yield* windowChannel.send(Devtools.DevtoolsWindowMessage.StoreReady.make({ appHostId }))
+            return
+          }
+
+          if (message.appHostId !== appHostId) return
+
+          if (message._tag === 'LSD.WindowMessage.MessagePortReady') {
+            yield* connectToDevtools(message.port)
+          }
+        }).pipe(Effect.ignoreLogged, Effect.forkScoped),
+      ),
+      Stream.runDrain,
+      Effect.ignoreLogged,
+      Effect.forkScoped,
+    )
+
+    yield* windowChannel.send(Devtools.DevtoolsWindowMessage.StoreReady.make({ appHostId }))
+  })