@effect-app/vue 4.0.0-beta.33 → 4.0.0-beta.330

package/test/stubs.ts

@@ -1,18 +1,23 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { type MessageFormatElement } from "@formatjs/icu-messageformat-parser"
 import * as Intl from "@formatjs/intl"
-import { Effect, Layer, ManagedRuntime, Option, S } from "effect-app"
 import { ApiClientFactory, makeRpcClient } from "effect-app/client"
+import * as Effect from "effect-app/Effect"
+import * as Layer from "effect-app/Layer"
+import * as Option from "effect-app/Option"
 import { RpcContextMap } from "effect-app/rpc"
+import * as S from "effect-app/Schema"
+import * as Exit from "effect/Exit"
+import * as ManagedRuntime from "effect/ManagedRuntime"
 import * as FetchHttpClient from "effect/unstable/http/FetchHttpClient"
-import { ref } from "vue"
-import { Commander } from "../src/experimental/commander.js"
-import { I18n } from "../src/experimental/intl.js"
-import { makeUseCommand } from "../src/experimental/makeUseCommand.js"
-import * as Toast from "../src/experimental/toast.js"
-import { WithToast } from "../src/experimental/withToast.js"
-import { LegacyMutation, makeClient } from "../src/makeClient.js"
+import { createApp, ref } from "vue"
+import { Commander } from "../src/commander.js"
+import { I18n } from "../src/intl.js"
+import { makeClient } from "../src/makeClient.js"
 import { type MakeIntlReturn } from "../src/makeIntl.js"
+import { makeUseCommand } from "../src/makeUseCommand.js"
+import * as Toast from "../src/toast.js"
+import { WithToast } from "../src/withToast.js"
 
 const fakeToastLayer = (toasts: any[] = []) =>
   Layer.effect(
@@ -26,33 +31,40 @@ const fakeToastLayer = (toasts: any[] = []) =>
           toasts.splice(idx, 1)
         }
       }
-      const fakeToast = (message: string, options?: Toast.ToastOpts) => {
-        const id = options?.id ?? Math.random().toString(36).substring(2, 15)
-        console.log(`Toast [${id}]: ${message}`, options)
+      const scheduleAutoDismiss = (toast: any, timeout: number | undefined) => {
+        // Treat Infinity / undefined as "stays until explicitly replaced/dismissed".
+        // Node's setTimeout silently clamps Infinity to 1ms which would otherwise
+        // cause the toast to disappear before assertions can observe it.
+        if (timeout === undefined || !Number.isFinite(timeout)) return
+        toast.timeoutId = setTimeout(() => {
+          const i = toasts.indexOf(toast)
+          if (i > -1) toasts.splice(i, 1)
+        }, timeout)
+      }
+      const fakeToast =
+        (type: "error" | "warning" | "success" | "info") => (message: string, options?: Toast.ToastOpts) => {
+          const id = options?.id ?? Math.random().toString(36).substring(2, 15)
+          console.log(`Toast [${type}][${id}]: ${message}`, options)
 
-        options = { ...options, id }
-        const idx = toasts.findIndex((_) => _.id === id)
-        if (idx > -1) {
-          const toast = toasts[idx]
-          clearTimeout(toast.timeoutId)
-          Object.assign(toast, { message, options })
-          toast.timeoutId = setTimeout(() => {
-            toasts.splice(idx, 1)
-          }, options?.timeout ?? 3000)
-        } else {
-          const toast: any = { id, message, options }
-          toast.timeoutId = setTimeout(() => {
-            toasts.splice(idx, 1)
-          }, options?.timeout ?? 3000)
-          toasts.push(toast)
+          options = { ...options, id }
+          const idx = toasts.findIndex((_) => _.id === id)
+          if (idx > -1) {
+            const toast = toasts[idx]
+            clearTimeout(toast.timeoutId)
+            Object.assign(toast, { type, message, options })
+            scheduleAutoDismiss(toast, options?.timeout ?? 3000)
+          } else {
+            const toast: any = { id, type, message, options }
+            toasts.push(toast)
+            scheduleAutoDismiss(toast, options?.timeout ?? 3000)
+          }
+          return id
         }
-        return id
-      }
       return Toast.Toast.of(Toast.wrap({
-        error: fakeToast,
-        warning: fakeToast,
-        success: fakeToast,
-        info: fakeToast,
+        error: fakeToast("error"),
+        warning: fakeToast("warning"),
+        success: fakeToast("success"),
+        info: fakeToast("info"),
         dismiss
       })) as any
     })
@@ -91,21 +103,174 @@ export const useExperimental = (
   return Effect.runSync(makeUseCommand<WithToast | Toast.Toast | I18n>(Layer.empty).pipe(Effect.provide(layers)))
 }
 
+// Effect-returning variant: keeps the caller's runtime context (e.g. a TestClock
+// provided by `it.effect`) so virtual-time advances reach the runtime captured
+// inside Commander.
+export const useExperimentalE = (
+  options?: { messages?: Record<string, string> | Record<string, MessageFormatElement[]>; toasts: any[] }
+) => {
+  const FakeIntlLayer = fakeIntlLayer(options?.messages)
+  const FakeToastLayer = fakeToastLayer(options?.toasts)
+  const CommanderLayer = Commander.Default.pipe(Layer.provide([FakeIntlLayer, FakeToastLayer]))
+  const WithToastLayer = WithToast.Default.pipe(Layer.provide(FakeToastLayer))
+  const layers = Layer.mergeAll(CommanderLayer, WithToastLayer, FakeToastLayer, FakeIntlLayer)
+
+  return makeUseCommand<WithToast | Toast.Toast | I18n>(Layer.empty).pipe(Effect.provide(layers))
+}
+
 export class RequestContextMap extends RpcContextMap.makeMap({}) {}
-export const { TaggedRequest: Req } = makeRpcClient(RequestContextMap)
-export class GetSomething2 extends Req<GetSomething2>()("GetSomething2", {
+const stubMiddleware = {
+  requestContextMap: RequestContextMap.config,
+  requestContext: undefined as never
+}
+export const { TaggedRequestFor } = makeRpcClient(stubMiddleware)
+
+export const SomethingReq = TaggedRequestFor("Something")
+const SomethingQuery = SomethingReq.Query
+const SomethingCommand = SomethingReq.Command
+
+class SomethingGetSomething2 extends SomethingQuery<SomethingGetSomething2>()("GetSomething2", {
   id: S.String
 }, { success: S.FiniteFromString }) {}
 
-export class GetSomething2WithDependencies extends Req<GetSomething2WithDependencies>()("GetSomething2", {
+class SomethingGetSomething3 extends SomethingQuery<SomethingGetSomething3>()("GetSomething3", {
+  id: S.NullOr(S.String).withConstructorDefault
+}, { success: S.FiniteFromString }) {}
+
+class SomethingGetSomething4
+  extends SomethingQuery<SomethingGetSomething4>()("GetSomething4", {}, { success: S.FiniteFromString })
+{}
+
+class SomethingGetSomething2WithDependencies
+  extends SomethingQuery<SomethingGetSomething2WithDependencies>()("GetSomething2", {
+    id: S.String
+  }, {
+    // this is intentilally fake, to simulate a codec that requires a dependency
+    success: S.FiniteFromString as S.Codec<number, string, "dep-a">,
+    error: S.String
+  })
+{}
+
+type SomethingInvalidationResources = {
+  GetSomething2: typeof SomethingGetSomething2
+  GetSomething2WithDependencies: typeof SomethingGetSomething2WithDependencies
+  GetSomething3: typeof SomethingGetSomething3
+}
+
+// command stubs covering the input-shape matrix
+class SomethingDoNoProps extends SomethingCommand<SomethingDoNoProps>()("DoNoProps", {}) {}
+
+class SomethingDoOptionalOnly extends SomethingCommand<SomethingDoOptionalOnly>()("DoOptionalOnly", {
+  name: S.optional(S.String)
+}) {}
+
+class SomethingDoRequiredOnly extends SomethingCommand<SomethingDoRequiredOnly>()("DoRequiredOnly", {
+  id: S.String
+}) {}
+
+class SomethingDoMixed extends SomethingCommand<SomethingDoMixed>()("DoMixed", {
+  id: S.String,
+  name: S.optional(S.String)
+}) {}
+
+class SomethingDoSomething extends SomethingCommand<
+  SomethingDoSomething,
+  { Something: SomethingInvalidationResources }
+>()("DoSomething", {
   id: S.String
 }, {
-  // this is intentilally fake, to simulate a codec that requires a dependency
-  success: S.FiniteFromString as S.Codec<number, string, "dep-a">,
-  error: S.String
+  success: S.FiniteFromString
+}, (queryKey, { Something }, input, output) => {
+  return [
+    { filters: { queryKey } },
+    {
+      filters: {
+        queryKey: [
+          Something["GetSomething2"].id,
+          input.id,
+          Exit.isSuccess(output) ? output.value.toString() : "failed"
+        ]
+      }
+    }
+  ]
+}) {}
+
+// success schema has encoded shape { a: string | null } — used to test projection constraints
+class SomethingGetStructNullable extends SomethingQuery<SomethingGetStructNullable>()("GetStructNullable", {}, {
+  success: S.Struct({ a: S.NullOr(S.String) })
+}) {}
+
+class SomethingStreamQuery extends SomethingQuery<SomethingStreamQuery>()("StreamQuery", {
+  id: S.String
+}, {
+  stream: true,
+  success: S.FiniteFromString
+}) {}
+
+/** Stream event: intermediate progress update. */
+export class OperationProgress extends S.TaggedClass<OperationProgress>()("OperationProgress", {
+  completed: S.NonNegativeInt,
+  total: S.NonNegativeInt
+}) {}
+
+/** Stream event: final completion result. */
+export class ExportComplete extends S.TaggedClass<ExportComplete>()("ExportComplete", {
+  fileUrl: S.NonEmptyString
+}) {}
+
+/** Stream with no `final` schema — execute resolves with `void`. */
+class SomethingStreamWithoutFinal extends SomethingCommand<SomethingStreamWithoutFinal>()("StreamWithoutFinal", {
+  id: S.String
+}, {
+  stream: true,
+  success: S.Union([OperationProgress, ExportComplete])
 }) {}
 
-export const Something = { GetSomething2, GetSomething2WithDependencies, meta: { moduleName: "Something" as const } }
+/** Stream with a `final` schema — execute resolves with `ExportComplete`. */
+class SomethingStreamWithFinal extends SomethingCommand<SomethingStreamWithFinal>()("StreamWithFinal", {
+  id: S.String
+}, {
+  stream: true,
+  success: S.Union([OperationProgress, ExportComplete]),
+  final: ExportComplete
+}) {}
+
+export const Something = {
+  GetSomething2: SomethingGetSomething2,
+  GetSomething2WithDependencies: SomethingGetSomething2WithDependencies,
+  GetSomething3: SomethingGetSomething3,
+  GetSomething4: SomethingGetSomething4,
+  DoNoProps: SomethingDoNoProps,
+  DoOptionalOnly: SomethingDoOptionalOnly,
+  DoRequiredOnly: SomethingDoRequiredOnly,
+  DoMixed: SomethingDoMixed,
+  DoSomething: SomethingDoSomething,
+  GetStructNullable: SomethingGetStructNullable,
+  StreamQuery: SomethingStreamQuery,
+  StreamWithoutFinal: SomethingStreamWithoutFinal,
+  StreamWithFinal: SomethingStreamWithFinal
+}
+
+export const SomethingElseReq = TaggedRequestFor("SomethingElse")
+const SomethingElseQuery = SomethingElseReq.Query
+
+class SomethingElseGetSomething2 extends SomethingElseQuery<SomethingElseGetSomething2>()("GetSomething2", {
+  id: S.String
+}, { success: S.FiniteFromString }) {}
+
+class SomethingElseGetSomething2WithDependencies
+  extends SomethingElseQuery<SomethingElseGetSomething2WithDependencies>()("GetSomething2", {
+    id: S.String
+  }, {
+    success: S.FiniteFromString as S.Codec<number, string, "dep-a">,
+    error: S.String
+  })
+{}
+
+export const SomethingElse = {
+  GetSomething2: SomethingElseGetSomething2,
+  GetSomething2WithDependencies: SomethingElseGetSomething2WithDependencies
+}
 
 export const useClient = (
   options?: { messages?: Record<string, string> | Record<string, MessageFormatElement[]>; toasts: any[] }
@@ -117,9 +282,29 @@ export const useClient = (
   const api = ApiClientFactory.layer({ url: "bogus", headers: Option.none() }).pipe(
     Layer.provide(FetchHttpClient.layer)
   )
-  const lm = LegacyMutation.Default.pipe(Layer.provide([FakeIntlLayer, FakeToastLayer]))
-  const layers = Layer.mergeAll(CommanderLayer, WithToastLayer, FakeToastLayer, FakeIntlLayer, api, lm)
+  const layers = Layer.mergeAll(CommanderLayer, WithToastLayer, FakeToastLayer, FakeIntlLayer, api)
 
   const clientFor_ = ApiClientFactory.makeFor(Layer.empty)
-  return makeClient(() => ManagedRuntime.make(layers), clientFor_, Layer.empty)
+  const rawClient = makeClient(() => ManagedRuntime.make(layers), clientFor_, Layer.empty)
+
+  // Provide a Vue injection context so composition-API hooks called during client
+  // initialisation work outside a component setup() function.
+  const vueApp = createApp({})
+
+  const origClientFor = rawClient.clientFor
+  const clientFor: typeof origClientFor = function(m, ...args) {
+    const proxy = origClientFor(m, ...args)
+    // Warm up lazy mutation-hook initialisation inside the Vue injection context.
+    // After the first property access, useMutation() is cached and subsequent
+    // accesses outside the context succeed.
+    const firstPropertyName = Object.keys(m)[0]
+    if (firstPropertyName !== undefined) {
+      vueApp.runWithContext(() => {
+        void (proxy as Record<string, unknown>)[firstPropertyName]
+      })
+    }
+    return proxy
+  }
+
+  return { ...rawClient, clientFor }
 }

package/test/suspense-regression.test.ts

@@ -0,0 +1,168 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { defaultRegistry, registryKey } from "@effect/atom-vue"
+import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query"
+import * as Context from "effect-app/Context"
+import * as Effect from "effect-app/Effect"
+import * as Option from "effect-app/Option"
+import * as Layer from "effect/Layer"
+import * as ManagedRuntime from "effect/ManagedRuntime"
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
+import { createApp, effectScope, nextTick, ref } from "vue"
+import { makeAtomClientRuntime } from "../src/atomQuery.js"
+import { makeTanstackQuery } from "../src/internal/tanstackQuery.js"
+import { QueryImpl } from "../src/makeClient.js"
+
+const fakeHandler = (id: string, run: (input: any) => Effect.Effect<any, any, never>) => ({ id, handler: run }) as any
+
+function makeContext(queryClient: QueryClient) {
+  const app = createApp({ render: () => null })
+  app.use(VueQueryPlugin, { queryClient })
+  const scope = effectScope(true)
+  const run = <T>(fn: () => T): T => {
+    let out!: T
+    app.runWithContext(() => {
+      scope.run(() => {
+        out = fn()
+      })
+    })
+    return out
+  }
+  return { run, dispose: () => scope.stop() }
+}
+
+it("makeClient .suspense(): observer re-pointed mid-flight -> resolves (seeded) instead of dying", async () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: Infinity, staleTime: 0 } }
+  })
+  const getRuntime = () => Context.empty()
+  const qi = new QueryImpl(
+    getRuntime,
+    (() => {
+      throw new Error("atom runtime is unused by this legacy TanStack regression")
+    }) as any,
+    makeTanstackQuery(getRuntime, queryClient)
+  )
+
+  // key "a" resolves via this deferred; any other key hangs forever.
+  let resolveA!: (v: string) => void
+  const aData = new Promise<string>((res) => {
+    resolveA = res
+  })
+  const handler = fakeHandler(
+    "Test/KeyRace",
+    (input: any) => Effect.promise(() => (input.id === "a" ? aData : new Promise<string>(() => {})))
+  )
+
+  const ctx = makeContext(queryClient)
+
+  // Keep-alive observer pins key "a" so flipping the suspense arg below does NOT cancel "a".
+  ctx.run(() => qi.useQuery(handler)(ref({ id: "a" }) as any, {} as any))
+  await nextTick()
+
+  // Suspense on key "a" (shares the in-flight "a" query -> no extra handler call).
+  const suspenseId = ref<{ id: string }>({ id: "a" })
+  const suspense = qi.useSuspenseQuery(handler)
+  const promise = ctx.run(() => suspense(suspenseId as any, {} as any))
+
+  // Re-point the suspense observer to "b" (pending). "a" still has the keep-alive observer.
+  suspenseId.value = { id: "b" }
+  await nextTick()
+  await nextTick()
+
+  // Resolve "a": suspense() resolves with DATA_A while resultRef is parked on the pending "b".
+  resolveA("DATA_A")
+
+  // BEFORE fix: rejects (die). AFTER fix: resolves, seeded from the suspense value.
+  const [resultRef, latestRef] = (await promise) as any
+
+  expect(AsyncResult.isSuccess(resultRef.value)).toBe(true)
+  expect(Option.getOrUndefined(AsyncResult.value(resultRef.value))).toBe("DATA_A")
+  expect(latestRef.value).toBe("DATA_A")
+
+  ctx.dispose()
+})
+
+// Prod crash (Sentry "Internal Error: suspense resolved without a latest value"): a reactive arg
+// re-points the suspense view at a DIFFERENT family atom. The new atom starts Initial (no
+// previousSuccess carried over), so the always-defined `latest` computed found undefined and threw
+// during the next render flush. The suspense contract is kept by serving the last defined value
+// while the new atom fetches.
+it("atom engine .suspense(): reactive arg switched to an uncached input serves the previous value", async () => {
+  defaultRegistry.reset()
+  const mrt = ManagedRuntime.make(Layer.empty)
+  const baseContext = mrt.runSync(Effect.context<never>())
+  const rt = makeAtomClientRuntime(
+    () => Layer.succeedContext(baseContext) as Layer.Layer<any, never, never>,
+    mrt.memoMap
+  )
+  const qi = new QueryImpl(() => Context.empty(), () => rt)
+
+  // "a" resolves immediately; any other input hangs forever (stays Initial+waiting).
+  const handler = fakeHandler(
+    "TestSuspense/ReactiveArg",
+    (input: any) => (input.id === "a" ? Effect.succeed("DATA_A") : Effect.never)
+  )
+
+  const argRef = ref({ id: "a" })
+  let promise: Promise<any> | undefined
+  const host = document.createElement("div")
+  const app = createApp({
+    setup() {
+      promise = qi.useSuspenseQuery(handler)(argRef as any, {} as any)
+      return () => null
+    }
+  })
+  app.provide(registryKey, defaultRegistry)
+  app.mount(host)
+
+  const [resultRef, latestRef] = (await promise) as any
+  expect(latestRef.value).toBe("DATA_A")
+
+  // Re-point to an input whose atom has never fetched -> Initial, no previousSuccess.
+  argRef.value = { id: "b" }
+  await nextTick()
+
+  // BEFORE fix: throws "Internal Error: suspense resolved without a latest value".
+  expect(latestRef.value).toBe("DATA_A")
+  // The result ref itself does reflect the in-flight fetch for the new input.
+  expect(AsyncResult.isInitial(resultRef.value)).toBe(true)
+
+  app.unmount()
+  defaultRegistry.reset()
+})
+
+it("makeTanstackQuery structurally shares Effect-Equal leaves by default", async () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: Infinity, staleTime: 0 } }
+  })
+  const getRuntime = () => Context.empty()
+  let calls = 0
+  const handler = fakeHandler(
+    "Test/StructuralSharing",
+    () =>
+      Effect.sync(() => {
+        calls += 1
+        return {
+          stable: {
+            date: new Date("2026-01-01T00:00:00.000Z"),
+            option: Option.some({ id: "same" })
+          },
+          revision: calls
+        }
+      })
+  )
+  const query = makeTanstackQuery(getRuntime, queryClient)(handler)
+  const ctx = makeContext(queryClient)
+
+  const [, , , handle] = ctx.run(() => query(undefined, {}))
+  const first = await Effect.runPromise(handle.awaitResult())
+  const second = await Effect.runPromise(handle.refetch())
+
+  expect(second.revision).toBe(2)
+  expect(second).not.toBe(first)
+  expect(second.stable).toBe(first.stable)
+  expect(second.stable.date).toBe(first.stable.date)
+  expect(second.stable.option).toBe(first.stable.option)
+
+  ctx.dispose()
+})

package/test/suspense.test.ts

@@ -0,0 +1,160 @@
+import { defaultRegistry, registryKey } from "@effect/atom-vue"
+import { Effect, Option } from "effect-app"
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
+import * as Atom from "effect/unstable/reactivity/Atom"
+import { computed, createApp, nextTick, ref } from "vue"
+import { withQueryOptions } from "../src/atomQuery.js"
+import { useAtomQuery, useAtomSuspense } from "../src/query.js"
+import { awaitResolvedSuspenseResult } from "../src/suspense.js"
+
+const listenerCount = (atom: Atom.Atom<unknown>) => defaultRegistry.getNodes().get(atom)?.listeners.size ?? 0
+
+it("waits for the query result ref after suspense resolves", async () => {
+  const result = ref<AsyncResult.AsyncResult<number, never>>(AsyncResult.initial(true))
+  const promise = Effect.runPromise(awaitResolvedSuspenseResult(computed(() => result.value)))
+
+  result.value = AsyncResult.success(123)
+
+  expect(Option.getOrUndefined(AsyncResult.value(await promise))).toBe(123)
+})
+
+it("keeps unresolved query results initial", async () => {
+  const result = ref<AsyncResult.AsyncResult<number, never>>(AsyncResult.initial(true))
+  const settled = await Effect.runPromise(awaitResolvedSuspenseResult(computed(() => result.value)))
+
+  expect(AsyncResult.isInitial(settled)).toBe(true)
+})
+
+it("stops atom suspense subscriptions when the setup scope is disposed", async () => {
+  defaultRegistry.reset()
+  const atom = Atom.make(Effect.succeed(123))
+  let promise: ReturnType<typeof useAtomSuspense<number, never>> | undefined
+  const host = document.createElement("div")
+  const app = createApp({
+    setup() {
+      promise = useAtomSuspense(() => atom)
+      return () => null
+    }
+  })
+  app.provide(registryKey, defaultRegistry)
+  app.mount(host)
+
+  if (promise === undefined) {
+    throw new Error("suspense setup did not initialize")
+  }
+
+  await promise
+  expect(listenerCount(atom)).toBe(1)
+
+  app.unmount()
+  await nextTick()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  expect(listenerCount(atom)).toBe(0)
+  defaultRegistry.reset()
+})
+
+it("does not keep query option wrapper subscriptions after unmount", async () => {
+  defaultRegistry.reset()
+  const atom = Atom.make(Effect.succeed(123))
+  const observed = withQueryOptions(atom)
+  let promise: ReturnType<typeof useAtomSuspense<number, never>> | undefined
+  const host = document.createElement("div")
+  const app = createApp({
+    setup() {
+      promise = useAtomSuspense(() => observed)
+      return () => null
+    }
+  })
+  app.provide(registryKey, defaultRegistry)
+  app.mount(host)
+
+  if (promise === undefined) {
+    throw new Error("suspense setup did not initialize")
+  }
+
+  await promise
+  expect(listenerCount(atom)).toBe(1)
+
+  app.unmount()
+  await nextTick()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  expect(listenerCount(atom)).toBe(0)
+  defaultRegistry.reset()
+})
+
+it("aborts atom suspense promises when the component unmounts", async () => {
+  defaultRegistry.reset()
+  const atom = Atom.make(Effect.never)
+  let promise: ReturnType<typeof useAtomSuspense<number, never>> | undefined
+  const host = document.createElement("div")
+  const app = createApp({
+    setup() {
+      promise = useAtomSuspense(() => atom)
+      return () => null
+    }
+  })
+  app.provide(registryKey, defaultRegistry)
+  app.mount(host)
+
+  if (promise === undefined) {
+    throw new Error("suspense setup did not initialize")
+  }
+
+  app.unmount()
+  await nextTick()
+  const settled = await Promise.race([
+    promise.then(() => "resolved" as const, () => "rejected" as const),
+    new Promise<"pending">((resolve) => setTimeout(() => resolve("pending"), 20))
+  ])
+  expect(settled).toBe("rejected")
+  defaultRegistry.reset()
+})
+
+it("stops atom query subscriptions when the component unmounts", async () => {
+  defaultRegistry.reset()
+  const atom = Atom.make(Effect.succeed(123))
+  const host = document.createElement("div")
+  const app = createApp({
+    setup() {
+      useAtomQuery(() => atom)
+      return () => null
+    }
+  })
+  app.provide(registryKey, defaultRegistry)
+  app.mount(host)
+
+  await nextTick()
+  expect(listenerCount(atom)).toBe(1)
+
+  app.unmount()
+  await nextTick()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  expect(listenerCount(atom)).toBe(0)
+  defaultRegistry.reset()
+})
+
+it("does not keep non-suspense query option wrapper subscriptions after unmount", async () => {
+  defaultRegistry.reset()
+  const atom = Atom.make(Effect.succeed(123))
+  const observed = withQueryOptions(atom)
+  const host = document.createElement("div")
+  const app = createApp({
+    setup() {
+      useAtomQuery(() => observed)
+      return () => null
+    }
+  })
+  app.provide(registryKey, defaultRegistry)
+  app.mount(host)
+
+  await nextTick()
+  expect(listenerCount(observed)).toBe(1)
+  expect(listenerCount(atom)).toBe(1)
+
+  app.unmount()
+  await nextTick()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  expect(listenerCount(observed)).toBe(0)
+  expect(listenerCount(atom)).toBe(0)
+  defaultRegistry.reset()
+})

package/tsconfig.examples.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": [
+    "examples"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.src.json"
+    }
+  ],
+  "compilerOptions": {
+    "lib": [
+      "esnext",
+      "DOM"
+    ],
+    "tsBuildInfoFile": ".tsbuildinfo/examples.tsbuildinfo",
+    "rootDir": "examples",
+    "moduleResolution": "Node16"
+  }
+}

package/tsconfig.json

@@ -14,7 +14,12 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "plugins": [],
+    "plugins": [
+      {
+        "name": "@effect/language-service",
+        "diagnostics": false
+      }
+    ],
     "module": "Node16",
     "lib": [
       "ES2023"
@@ -32,9 +37,11 @@
     "outDir": "build/dist",
     "resolveJsonModule": true,
     "moduleResolution": "Node16",
-    "downlevelIteration": true,
     "noErrorTruncation": true,
     "forceConsistentCasingInFileNames": true,
+    "erasableSyntaxOnly": true,
+    "rewriteRelativeImportExtensions": true,
+    "allowImportingTsExtensions": true,
     "types": [
       "node"
     ]