@effect/platform-browser 4.0.0-beta.7 → 4.0.0-beta.70

package/src/BrowserHttpClient.ts

@@ -1,13 +1,45 @@
 /**
- * @since 1.0.0
+ * Browser implementations of the Effect `HttpClient`.
+ *
+ * This module exposes HTTP client layers for code that runs in a browser. It
+ * re-exports the fetch-based client for the common case, where requests should
+ * use the platform `fetch` implementation and optional `RequestInit` defaults,
+ * and it provides an `XMLHttpRequest`-backed layer for integrations that need
+ * XHR semantics such as response type control or environments where XHR is the
+ * required transport.
+ *
+ * Use these layers for single-page applications, browser tests, generated
+ * `HttpApiClient`s, and other client-side Effect programs that need HTTP
+ * requests to participate in interruption, typed transport / decode errors, and
+ * Effect's response body readers.
+ *
+ * Browser networking rules still apply. Cross-origin requests are subject to
+ * CORS preflights and server allowlists, especially when using custom headers,
+ * non-simple methods, or non-simple content types. Only CORS-exposed response
+ * headers are readable, and cookies / authentication are controlled by the
+ * browser and the configured fetch `RequestInit.credentials` policy. The XHR
+ * layer uses the browser's `XMLHttpRequest` defaults for credentials.
+ *
+ * Body handling differs between the transports. Fetch delegates body framing to
+ * the Web Fetch implementation. The XHR client sends empty, raw, `Uint8Array`,
+ * and `FormData` bodies directly, buffers `Stream` request bodies before
+ * sending, defaults responses to text, and can be switched to `ArrayBuffer`
+ * responses with `withXHRArrayBuffer`. When sending `FormData`, avoid setting
+ * an incompatible `Content-Type` header so the browser can generate the
+ * multipart boundary.
+ *
+ * @since 4.0.0
  */
 import * as Cause from "effect/Cause"
+import * as Context from "effect/Context"
 import * as Effect from "effect/Effect"
 import type { LazyArg } from "effect/Function"
 import * as Inspectable from "effect/Inspectable"
 import type * as Layer from "effect/Layer"
+import * as Option from "effect/Option"
+import { type Pipeable, pipeArguments } from "effect/Pipeable"
 import * as Queue from "effect/Queue"
-import * as ServiceMap from "effect/ServiceMap"
+import type * as Schema from "effect/Schema"
 import * as Stream from "effect/Stream"
 import * as Cookies from "effect/unstable/http/Cookies"
 import * as Headers from "effect/unstable/http/Headers"
@@ -25,18 +57,24 @@ import * as HeaderParser from "multipasta/HeadersParser"
 
 export {
   /**
-   * @since 1.0.0
+   * Context reference for the `fetch` implementation used by the fetch-based HTTP client.
+   *
    * @category Fetch
+   * @since 4.0.0
    */
   Fetch,
   /**
-   * @since 1.0.0
+   * Layer that provides an `HttpClient` implementation backed by the configured `Fetch` function.
+   *
    * @category Fetch
+   * @since 4.0.0
    */
   layer as layerFetch,
   /**
-   * @since 1.0.0
+   * Service containing default `RequestInit` options for the fetch-based HTTP client.
+   *
    * @category Fetch
+   * @since 4.0.0
    */
   RequestInit
 } from "effect/unstable/http/FetchHttpClient"
@@ -46,23 +84,29 @@ export {
 // =============================================================================
 
 /**
- * @since 1.0.0
- * @category Models
+ * Allowed response body modes for the browser XHR HTTP client.
+ *
+ * @category models
+ * @since 4.0.0
  */
 export type XHRResponseType = "arraybuffer" | "text"
 
 /**
- * @since 1.0.0
- * @category References
+ * Reference that controls the `XMLHttpRequest.responseType` used by the browser XHR HTTP client, defaulting to `"text"`.
+ *
+ * @category references
+ * @since 4.0.0
  */
-export const CurrentXHRResponseType: ServiceMap.Reference<XHRResponseType> = ServiceMap.Reference(
+export const CurrentXHRResponseType: Context.Reference<XHRResponseType> = Context.Reference(
   "@effect/platform-browser/BrowserHttpClient/CurrentXHRResponseType",
   { defaultValue: (): XHRResponseType => "text" }
 )
 
 /**
- * @since 1.0.0
- * @category References
+ * Runs an effect with `CurrentXHRResponseType` set to `"arraybuffer"` so the XHR HTTP client receives response bodies as `ArrayBuffer` values.
+ *
+ * @category references
+ * @since 4.0.0
  */
 export const withXHRArrayBuffer = <A, E, R>(
   self: Effect.Effect<A, E, R>
@@ -74,10 +118,12 @@ export const withXHRArrayBuffer = <A, E, R>(
   )
 
 /**
- * @since 1.0.0
- * @category Services
+ * Service tag for the `XMLHttpRequest` constructor used by the browser XHR HTTP client.
+ *
+ * @category services
+ * @since 4.0.0
  */
-export class XMLHttpRequest extends ServiceMap.Service<
+export class XMLHttpRequest extends Context.Service<
   XMLHttpRequest,
   LazyArg<globalThis.XMLHttpRequest>
 >()("@effect/platform-browser/BrowserHttpClient/XMLHttpRequest") {}
@@ -87,8 +133,8 @@ const makeXhrRequest = () => new globalThis.XMLHttpRequest()
 const makeXmlHttpRequest = HttpClient.make(
   (request, url, signal, fiber) =>
     Effect.suspend(() => {
-      const xhr = ServiceMap.getOrElse(
-        fiber.services,
+      const xhr = Context.getOrElse(
+        fiber.context,
         XMLHttpRequest,
         () => makeXhrRequest
       )()
@@ -213,7 +259,7 @@ abstract class IncomingMessageImpl<E> extends Inspectable.Class implements HttpI
   }
 
   get remoteAddress() {
-    return undefined
+    return Option.none()
   }
 
   _textEffect: Effect.Effect<string, E> | undefined
@@ -247,10 +293,10 @@ abstract class IncomingMessageImpl<E> extends Inspectable.Class implements HttpI
     )
   }
 
-  get json(): Effect.Effect<unknown, E> {
+  get json(): Effect.Effect<Schema.Json, E> {
     return Effect.flatMap(this.text, (text) =>
       Effect.try({
-        try: () => text === "" ? null : JSON.parse(text) as unknown,
+        try: () => text === "" ? null : JSON.parse(text),
         catch: this.onError
       }))
   }
@@ -334,7 +380,7 @@ abstract class IncomingMessageImpl<E> extends Inspectable.Class implements HttpI
 }
 
 class ClientResponseImpl extends IncomingMessageImpl<HttpClientError.HttpClientError>
-  implements HttpClientResponse.HttpClientResponse
+  implements HttpClientResponse.HttpClientResponse, Pipeable
 {
   readonly [HttpClientResponse.TypeId]: typeof HttpClientResponse.TypeId
   readonly request: HttpClientRequest.HttpClientRequest
@@ -374,12 +420,18 @@ class ClientResponseImpl extends IncomingMessageImpl<HttpClientError.HttpClientE
       status: this.status
     })
   }
+
+  pipe() {
+    return pipeArguments(this, arguments)
+  }
 }
 
 /**
- * @since 1.0.0
- * @category Layers
+ * Layer that provides an `HttpClient` implementation backed by the browser `XMLHttpRequest` API.
+ *
+ * @category layers
+ * @since 4.0.0
  */
-export const layerXMLHttpRequest: Layer.Layer<HttpClient.HttpClient> = HttpClient.layerMergedServices(
+export const layerXMLHttpRequest: Layer.Layer<HttpClient.HttpClient> = HttpClient.layerMergedContext(
   Effect.succeed(makeXmlHttpRequest)
 )

package/src/BrowserKeyValueStore.ts

@@ -1,29 +1,163 @@
 /**
- * @since 1.0.0
+ * Browser-backed `KeyValueStore` layers for Effect programs.
+ *
+ * This module provides `KeyValueStore` implementations backed by the browser's
+ * synchronous Web Storage APIs: `localStorage` for origin-scoped data that
+ * persists across page reloads and browser sessions, and `sessionStorage` for
+ * page-session data that is cleared when that tab or window's page session
+ * ends. They are useful for small client-side values such as user preferences,
+ * feature flags, lightweight caches, persisted drafts, or session-only workflow
+ * state.
+ *
+ * Web Storage is only available in browser environments and is scoped by origin.
+ * Browsers may deny access in private modes or restricted contexts, and writes
+ * can fail when storage quotas are exceeded. The API stores strings and runs
+ * synchronously on the main thread, so prefer it for small payloads and avoid
+ * treating it as a database or a secure place for sensitive data.
+ *
+ * @since 4.0.0
  */
-import type * as Layer from "effect/Layer"
+import * as Effect from "effect/Effect"
+import * as Layer from "effect/Layer"
 import * as KeyValueStore from "effect/unstable/persistence/KeyValueStore"
+import { IndexedDb } from "./IndexedDb.ts"
 
 /**
- * Creates a `KeyValueStore` layer that uses the browser's `localStorage` api.
- *
- * Values are stored between sessions.
+ * Creates a `KeyValueStore` layer that uses the browser's `localStorage` API and stores values between browser sessions.
  *
- * @since 1.0.0
- * @category Layers
+ * @category layers
+ * @since 4.0.0
  */
 export const layerLocalStorage: Layer.Layer<KeyValueStore.KeyValueStore> = KeyValueStore.layerStorage(() =>
   globalThis.localStorage
 )
 
 /**
- * Creates a `KeyValueStore` layer that uses the browser's `sessionStorage` api.
+ * Creates a `KeyValueStore` layer that uses the browser's `sessionStorage` API and stores values only for the current session.
  *
- * Values are stored only for the current session.
- *
- * @since 1.0.0
- * @category Layers
+ * @category layers
+ * @since 4.0.0
  */
 export const layerSessionStorage: Layer.Layer<KeyValueStore.KeyValueStore> = KeyValueStore.layerStorage(() =>
   globalThis.sessionStorage
 )
+
+/**
+ * Creates a `KeyValueStore` layer backed by IndexedDB.
+ *
+ * @category layers
+ * @since 4.0.0
+ */
+export const layerIndexedDb = (options?: {
+  readonly database?: string | undefined
+}): Layer.Layer<KeyValueStore.KeyValueStore, never, IndexedDb> =>
+  Layer.effect(KeyValueStore.KeyValueStore)(
+    Effect.gen(function*() {
+      const db = yield* Effect.acquireRelease(
+        openDatabase(options?.database ?? "effect_key_value_store"),
+        (db) => Effect.sync(() => db.close())
+      ).pipe(Effect.orDie)
+
+      return KeyValueStore.make({
+        clear: Effect.suspend(() => {
+          const store = getKvsEntriesStore(db, "readwrite")
+          return idbRequest({ method: "clear", message: "Failed to clear backing store" }, () => store.clear())
+        }),
+        get: (key: string) =>
+          Effect.map(
+            Effect.suspend(() => {
+              const store = getKvsEntriesStore(db, "readonly")
+              return idbRequest<{ key: string; value: string } | undefined>({
+                method: "get",
+                message: "Failed to get value from backing store",
+                key
+              }, () => store.get(key))
+            }),
+            (found) => typeof found?.value === "string" ? found.value : undefined
+          ),
+        getUint8Array: (key: string) =>
+          Effect.map(
+            Effect.suspend(() => {
+              const store = getKvsEntriesStore(db, "readonly")
+              return idbRequest<{ key: string; value: Uint8Array } | undefined>({
+                method: "getUint8Array",
+                message: "Failed to get value from backing store",
+                key
+              }, () => store.get(key))
+            }),
+            (found) => found?.value && found.value instanceof Uint8Array ? found.value : undefined
+          ),
+        set: (key: string, value: string | Uint8Array) =>
+          Effect.asVoid(Effect.suspend(() => {
+            const store = getKvsEntriesStore(db, "readwrite")
+            return idbRequest(
+              { method: "set", message: "Failed to set value in backing store", key },
+              () => store.put({ key, value })
+            )
+          })),
+        size: Effect.suspend(() => {
+          const store = getKvsEntriesStore(db, "readonly")
+          return idbRequest<number>(
+            { method: "size", message: "Failed to get backing store size" },
+            () => store.count()
+          )
+        }),
+        remove: (key: string) =>
+          Effect.asVoid(Effect.suspend(() => {
+            const store = getKvsEntriesStore(db, "readwrite")
+            return idbRequest(
+              { method: "remove", message: "Failed to remove value from backing store", key },
+              () => store.delete(key)
+            )
+          }))
+      })
+    })
+  )
+
+const databaseVersion = 1
+const entriesStoreName = "entries"
+const openDatabase = Effect.fnUntraced(function*(database: string) {
+  const idb = (yield* IndexedDb).indexedDB
+  const openRequest = yield* Effect.try({
+    try: () => idb.open(database, databaseVersion),
+    catch: (cause) =>
+      new KeyValueStore.KeyValueStoreError({
+        method: "open",
+        message: "Failed to open backing store database",
+        cause
+      })
+  })
+  openRequest.onupgradeneeded = () => {
+    const db = openRequest.result
+    if (!db.objectStoreNames.contains(entriesStoreName)) {
+      db.createObjectStore(entriesStoreName, { keyPath: "key" })
+    }
+  }
+  return yield* idbRequest({ method: "open", message: "Failed to open backing store database" }, () => openRequest)
+})
+
+const idbRequest = <A>(
+  failArgs: { method: string; message: string; key?: string },
+  evaluate: () => IDBRequest<A>
+): Effect.Effect<A, KeyValueStore.KeyValueStoreError> =>
+  Effect.callback<A, KeyValueStore.KeyValueStoreError>((resume) => {
+    const request = evaluate()
+    if (request.readyState === "done") {
+      return resume(Effect.succeed(request.result))
+    }
+    request.onsuccess = () => {
+      resume(Effect.succeed(request.result))
+    }
+    request.onerror = () =>
+      resume(Effect.fail(
+        new KeyValueStore.KeyValueStoreError({
+          ...failArgs,
+          cause: request.error
+        })
+      ))
+  })
+
+const getKvsEntriesStore = (db: IDBDatabase, mode: IDBTransactionMode) => {
+  const transaction = db.transaction(entriesStoreName, mode)
+  return transaction.objectStore(entriesStoreName)
+}

package/src/BrowserPersistence.ts

@@ -0,0 +1,319 @@
+/**
+ * Browser-backed persistence layers for Effect's persistence service.
+ *
+ * This module provides IndexedDB implementations of the Effect persistence services for applications that need a
+ * durable client-side cache, such as remembered query results, offline-capable workflows, or values that should survive
+ * page reloads. Entries are stored by persistence store id and key in a shared IndexedDB object store, with optional
+ * expiration timestamps for TTL-based invalidation.
+ *
+ * Because this storage depends on browser IndexedDB, operations can fail when storage is unavailable, quota is exceeded,
+ * data is cleared by the user or browser, or the payload cannot be structured-cloned by IndexedDB. Expired entries are
+ * removed lazily when they are read, so this module is best suited for application-managed cached objects rather than
+ * security-sensitive or authoritative data.
+ *
+ * @since 4.0.0
+ */
+import type * as Arr from "effect/Array"
+import * as Clock from "effect/Clock"
+import type * as Duration from "effect/Duration"
+import * as Effect from "effect/Effect"
+import * as Layer from "effect/Layer"
+import * as Persistence from "effect/unstable/persistence/Persistence"
+
+/**
+ * Creates a `BackingPersistence` layer backed by IndexedDB, optionally using the provided database name.
+ *
+ * @category layers
+ * @since 4.0.0
+ */
+export const layerBackingIndexedDb = (options?: {
+  readonly database?: string | undefined
+}): Layer.Layer<Persistence.BackingPersistence> =>
+  Layer.effect(Persistence.BackingPersistence)(Effect.gen(function*() {
+    const db = yield* Effect.acquireRelease(
+      openDatabase(options?.database ?? defaultDatabase),
+      (db) => Effect.sync(() => db.close())
+    ).pipe(Effect.orDie)
+
+    return Persistence.BackingPersistence.of({
+      make: Effect.fnUntraced(function*(storeId) {
+        const clock = yield* Clock.Clock
+        return {
+          get: (key) => get(db, clock, storeId, key),
+          getMany: (keys) => getMany(db, clock, storeId, keys),
+          set: (key, value, ttl) => set(db, clock, storeId, key, value, ttl),
+          setMany: (entries) => setMany(db, clock, storeId, entries),
+          remove: (key) => remove(db, storeId, key),
+          clear: clear(db, storeId)
+        }
+      })
+    })
+  }))
+
+const defaultDatabase = "effect_persistence"
+const databaseVersion = 1
+const entriesStoreName = "entries"
+const storeIdIndexName = "storeId"
+
+/**
+ * Creates a `Persistence` layer backed by IndexedDB, optionally using the provided database name.
+ *
+ * @category layers
+ * @since 4.0.0
+ */
+export const layerIndexedDb = (options?: {
+  readonly database?: string | undefined
+}): Layer.Layer<Persistence.Persistence> =>
+  Persistence.layer.pipe(
+    Layer.provide(layerBackingIndexedDb(options))
+  )
+
+const openDatabase = (database: string): Effect.Effect<IDBDatabase, Persistence.PersistenceError> =>
+  Effect.gen(function*() {
+    const openRequest = yield* Effect.try({
+      try: () => globalThis.indexedDB.open(database, databaseVersion),
+      catch: (cause) =>
+        new Persistence.PersistenceError({
+          message: "Failed to open backing store database",
+          cause
+        })
+    })
+
+    openRequest.onupgradeneeded = () => {
+      const db = openRequest.result
+      const entries = db.objectStoreNames.contains(entriesStoreName)
+        ? openRequest.transaction?.objectStore(entriesStoreName)
+        : db.createObjectStore(entriesStoreName, { keyPath: ["storeId", "id"] })
+      if (entries && !entries.indexNames.contains(storeIdIndexName)) {
+        entries.createIndex(storeIdIndexName, storeIdIndexName, { unique: false })
+      }
+    }
+
+    return yield* idbRequest("Failed to open backing store database", () => openRequest)
+  })
+
+interface EntryRow {
+  readonly storeId: string
+  readonly id: string
+  readonly value: object
+  readonly expires: number | null
+}
+
+const isExpired = (row: EntryRow, now: number): boolean => row.expires !== null && row.expires <= now
+
+const get = (
+  db: IDBDatabase,
+  clock: Clock.Clock,
+  storeId: string,
+  key: string
+): Effect.Effect<object | undefined, Persistence.PersistenceError> =>
+  withEntriesTransaction<object | undefined>(
+    db,
+    "readwrite",
+    `Failed to get key ${key} from backing store`,
+    (
+      entries,
+      setResult,
+      fail
+    ) => {
+      const now = clock.currentTimeMillisUnsafe()
+      const id: [string, string] = [storeId, key]
+      const request = entries.get(id)
+      request.onerror = () => fail(request.error)
+      request.onsuccess = () => {
+        const row = request.result as EntryRow | undefined
+        if (!row || !isExpired(row, now)) {
+          setResult(row?.value)
+          return
+        }
+
+        const deleteRequest = entries.delete(id)
+        deleteRequest.onerror = () => fail(deleteRequest.error)
+        deleteRequest.onsuccess = () => setResult(undefined)
+      }
+    }
+  )
+
+const getMany = (
+  db: IDBDatabase,
+  clock: Clock.Clock,
+  storeId: string,
+  keys: Arr.NonEmptyArray<string>
+): Effect.Effect<Arr.NonEmptyArray<object | undefined>, Persistence.PersistenceError> =>
+  withEntriesTransaction(
+    db,
+    "readwrite",
+    "Failed to getMany from backing store",
+    (entries, setResult, fail) => {
+      const now = clock.currentTimeMillisUnsafe()
+      const results = new Array<object | undefined>(keys.length)
+      setResult(results as any)
+
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i]
+        const keyPath = [storeId, key]
+        const request = entries.get(keyPath)
+        request.onerror = () => fail(request.error)
+        request.onsuccess = () => {
+          const row = request.result as EntryRow | undefined
+          if (!row) return
+          else if (!isExpired(row, now)) {
+            results[i] = row.value
+            return
+          }
+          const deleteRequest = entries.delete(keyPath)
+          deleteRequest.onerror = () => fail(deleteRequest.error)
+        }
+      }
+    }
+  )
+
+const set = (
+  db: IDBDatabase,
+  clock: Clock.Clock,
+  storeId: string,
+  key: string,
+  value: object,
+  ttl: Duration.Duration | undefined
+): Effect.Effect<void, Persistence.PersistenceError> =>
+  withEntriesTransaction(
+    db,
+    "readwrite",
+    `Failed to set key ${key} in backing store`,
+    (entries, setResult, fail) => {
+      const request = entries.put(
+        {
+          storeId,
+          id: key,
+          value,
+          expires: Persistence.unsafeTtlToExpires(clock, ttl)
+        } satisfies EntryRow
+      )
+      request.onerror = () => fail(request.error)
+      request.onsuccess = () => setResult(undefined)
+    }
+  )
+
+const setMany = (
+  db: IDBDatabase,
+  clock: Clock.Clock,
+  storeId: string,
+  entries: Arr.NonEmptyArray<readonly [key: string, value: object, ttl: Duration.Duration | undefined]>
+): Effect.Effect<void, Persistence.PersistenceError> =>
+  withEntriesTransaction(
+    db,
+    "readwrite",
+    "Failed to setMany in backing store",
+    (store, setResult, fail) => {
+      for (const [key, value, ttl] of entries) {
+        const request = store.put(
+          {
+            storeId,
+            id: key,
+            value,
+            expires: Persistence.unsafeTtlToExpires(clock, ttl)
+          } satisfies EntryRow
+        )
+        request.onerror = () => fail(request.error)
+        request.onsuccess = () => setResult(undefined)
+      }
+    }
+  )
+
+const remove = (
+  db: IDBDatabase,
+  storeId: string,
+  key: string
+): Effect.Effect<void, Persistence.PersistenceError> =>
+  withEntriesTransaction(
+    db,
+    "readwrite",
+    `Failed to remove key ${key} from backing store`,
+    (entries, setResult, fail) => {
+      const request = entries.delete([storeId, key])
+      request.onerror = () => fail(request.error)
+      request.onsuccess = () => setResult(undefined)
+    }
+  )
+
+const clear = (db: IDBDatabase, storeId: string): Effect.Effect<void, Persistence.PersistenceError> =>
+  withEntriesTransaction(db, "readwrite", "Failed to clear backing store", (entries, setResult, fail) => {
+    const index = entries.index(storeIdIndexName)
+    const cursorRequest = index.openCursor(storeId)
+    cursorRequest.onerror = () => fail(cursorRequest.error)
+    cursorRequest.onsuccess = () => {
+      const cursor = cursorRequest.result
+      if (!cursor) {
+        setResult(undefined)
+        return
+      }
+      const deleteRequest = cursor.delete()
+      deleteRequest.onerror = () => fail(deleteRequest.error)
+      deleteRequest.onsuccess = () => cursor.continue()
+    }
+  })
+
+const withEntriesTransaction = <A>(
+  db: IDBDatabase,
+  mode: IDBTransactionMode,
+  message: string,
+  run: (
+    entries: IDBObjectStore,
+    onResult: (result: A) => void,
+    fail: (cause: unknown) => void
+  ) => void
+): Effect.Effect<A, Persistence.PersistenceError> =>
+  Effect.callback<A, Persistence.PersistenceError>((resume) => {
+    const tx = db.transaction(entriesStoreName, mode)
+    const entries = tx.objectStore(entriesStoreName)
+
+    let result: A | undefined
+    let setResult = false
+    let done = false
+
+    const fail = (cause: unknown) => {
+      done = true
+      resume(Effect.fail(new Persistence.PersistenceError({ message, cause })))
+    }
+
+    tx.oncomplete = () => {
+      done = true
+      if (setResult) resume(Effect.succeed(result!))
+    }
+    tx.onerror = () => {
+      done = true
+      fail(tx.error)
+    }
+    tx.onabort = () => {
+      done = true
+      fail(tx.error)
+    }
+
+    run(entries, (next) => {
+      if (done) return resume(Effect.succeed(next))
+      setResult = true
+      result = next
+    }, fail)
+
+    return Effect.sync(() => {
+      tx.abort()
+    })
+  })
+
+const idbRequest = <A>(
+  message: string,
+  evaluate: () => IDBRequest<A>
+): Effect.Effect<A, Persistence.PersistenceError> =>
+  Effect.callback<A, Persistence.PersistenceError>((resume) => {
+    const request = evaluate()
+    const fail = (cause: unknown) => {
+      resume(Effect.fail(new Persistence.PersistenceError({ message, cause })))
+    }
+    if (request.readyState === "done") {
+      resume(Effect.succeed(request.result))
+    }
+    request.onsuccess = () => {
+      resume(Effect.succeed(request.result))
+    }
+    request.onerror = () => fail(request.error)
+  })