@effect-app/vue 4.0.0-beta.28 → 4.0.0-beta.281

package/src/internal/tanstackQuery.ts

@@ -0,0 +1,250 @@
+import { injectRegistry } from "@effect/atom-vue"
+import { QueryClient, useQuery as useTanstackQuery } from "@tanstack/vue-query"
+import { makeQueryKey, type Req } from "effect-app/client"
+import type { RequestHandlerWithInput } from "effect-app/client/clientFor"
+import { CauseException, ServiceUnavailableError } from "effect-app/client/errors"
+import type * as Context from "effect-app/Context"
+import * as Effect from "effect-app/Effect"
+import * as Option from "effect-app/Option"
+import * as S from "effect-app/Schema"
+import * as Cause from "effect/Cause"
+import { isHttpClientError } from "effect/unstable/http/HttpClientError"
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
+import * as Atom from "effect/unstable/reactivity/Atom"
+import { computed, type MaybeRefOrGetter, shallowRef, toValue, watch, type WatchSource } from "vue"
+import { replaceEqualDeep } from "../atomQuery.ts"
+import { reportRuntimeError } from "../lib.ts"
+import type { QueryInvalidator } from "../mutate.ts"
+import type { CustomDefinedInitialQueryOptions, CustomDefinedPlaceholderQueryOptions, CustomUndefinedInitialQueryOptions, CustomUseQueryOptions, MakeQuery2, QueryCacheUpdater, QueryHandle, QueryObserverResult, RefetchOptions } from "../query.ts"
+import { makeRunPromise } from "../runtime.ts"
+
+const swrToQuery = <E, A>(r: {
+  readonly error: CauseException<E> | null | undefined
+  readonly data: A | undefined
+  readonly isValidating: boolean
+}): AsyncResult.AsyncResult<A, E> => {
+  if (r.error !== undefined && r.error !== null) {
+    return AsyncResult.failureWithPrevious(
+      r.error.originalCause,
+      {
+        previous: r.data === undefined ? Option.none() : Option.some(AsyncResult.success(r.data)),
+        waiting: r.isValidating
+      }
+    )
+  }
+  if (r.data !== undefined) {
+    return AsyncResult.success<A, E>(r.data, { waiting: r.isValidating })
+  }
+
+  return AsyncResult.initial(r.isValidating)
+}
+
+const recoverCauseException = <A, E>(error: unknown): Effect.Effect<A, E> =>
+  error instanceof CauseException
+    ? Effect.failCause(error.originalCause)
+    : Effect.die(error)
+
+const isRetryable = (error: unknown) => {
+  if (error instanceof CauseException) {
+    return isHttpClientError(error.cause) || S.is(ServiceUnavailableError)(error.cause)
+  }
+  return false
+}
+
+const isInputOption = <I>(value: I | Option.Option<I> | undefined): value is Option.Option<I> => Option.isOption(value)
+
+const resolveInput = <I>(
+  arg: I | WatchSource<I> | undefined | WatchSource<Option.Option<I>>,
+  mode: "optional" | undefined
+): I | undefined => {
+  if (mode === "optional") {
+    const option = toValue(arg)
+    return isInputOption(option) && Option.isSome(option) ? option.value : undefined
+  }
+  const value = toValue(arg)
+  return isInputOption(value) ? undefined : value
+}
+
+const resolveEnabled = <I>(
+  arg: I | WatchSource<I> | undefined | WatchSource<Option.Option<I>>,
+  options: {
+    readonly mode?: "optional" | undefined
+    readonly enabled?: MaybeRefOrGetter<boolean | undefined> | undefined
+  } | undefined
+) => {
+  if (options?.mode === "optional") {
+    return computed(() => {
+      const option = toValue(arg)
+      return Option.isSome(option)
+    })
+  }
+  return computed(() => {
+    const enabled = options?.enabled
+    if (enabled === undefined) return true
+    return !!toValue(enabled)
+  })
+}
+
+type LegacyTanstackOptions<A, E, TData> =
+  & (
+    | CustomUndefinedInitialQueryOptions<A, E, TData>
+    | CustomDefinedInitialQueryOptions<A, E, TData>
+    | CustomDefinedPlaceholderQueryOptions<A, E, TData>
+    | CustomUseQueryOptions<A, E, TData>
+  )
+  & { readonly mode?: "optional" | undefined }
+
+export const makeTanstackQueryClient = () => new QueryClient()
+
+export const makeTanstackQueryInvalidator = (queryClient: QueryClient): QueryInvalidator => ({
+  invalidateAndAwait: (keys) =>
+    Effect.forEach(
+      keys,
+      (queryKey) => Effect.promise(() => queryClient.invalidateQueries({ queryKey })),
+      { discard: true, concurrency: "inherit" }
+    )
+})
+
+const fullQueryKey = (
+  q: { readonly queryKeyProjectionHash?: string },
+  queryKey: ReadonlyArray<unknown>,
+  input: unknown
+) => q.queryKeyProjectionHash === undefined ? [...queryKey, input] : [...queryKey, q.queryKeyProjectionHash, input]
+
+export const makeTanstackQueryCacheUpdater = (queryClient: QueryClient): QueryCacheUpdater => ({
+  update: <I, A, E, R, Request extends Req, Name extends string>(
+    _registry: ReturnType<typeof injectRegistry>,
+    query: RequestHandlerWithInput<I, A, E, R, Request, Name>,
+    input: I,
+    updater: (data: NoInfer<A>) => NoInfer<A>
+  ) => {
+    const queryKey = fullQueryKey(query, makeQueryKey(query), input)
+    if (queryClient.getQueryData(queryKey) === undefined) {
+      console.warn(`Query ${query.id} has not been used yet; nothing to update`)
+      return
+    }
+    queryClient.setQueryData(queryKey, (data: A | undefined) => data === undefined ? data : updater(data))
+  }
+})
+
+export const makeTanstackQuery = <R>(
+  getRuntime: () => Context.Context<R>,
+  queryClient: QueryClient
+): MakeQuery2<R> => {
+  const useQuery: MakeQuery2<R> = <I, A, E, Request extends Req, Name extends string>(
+    q: RequestHandlerWithInput<I, A, E, R, Request, Name>
+  ) =>
+  <TData = A>(
+    arg: I | WatchSource<I> | undefined | WatchSource<Option.Option<I>>,
+    options?: LegacyTanstackOptions<A, CauseException<E>, TData>
+  ) => {
+    const runPromise = makeRunPromise(getRuntime())
+    const queryKey = makeQueryKey(q)
+    const enabled = resolveEnabled(arg, options)
+    const structuralSharing = options?.structuralSharing === false ? false : replaceEqualDeep
+    const tanstackOptions = {
+      ...(options?.staleTime !== undefined ? { staleTime: options.staleTime } : {}),
+      ...(typeof options?.gcTime === "number" ? { gcTime: options.gcTime } : {}),
+      ...(options?.refetchOnWindowFocus !== undefined ? { refetchOnWindowFocus: options.refetchOnWindowFocus } : {}),
+      structuralSharing,
+      ...(options?.refetchInterval !== undefined ? { refetchInterval: options.refetchInterval } : {}),
+      ...(options?.select !== undefined ? { select: options.select } : {})
+    }
+    const tanstack = useTanstackQuery<A, CauseException<E>, TData>({
+      ...tanstackOptions,
+      enabled,
+      throwOnError: false,
+      retry: (retryCount: number, error: unknown) => isRetryable(error) && retryCount < 5,
+      queryKey: computed(() => {
+        const input = resolveInput(arg, options?.mode)
+        return fullQueryKey(q, queryKey, input)
+      }),
+      queryFn: ({ signal }: { readonly signal: AbortSignal }) =>
+        runPromise(
+          q
+            .handler(resolveInput(arg, options?.mode)!)
+            .pipe(
+              Effect.tapCauseIf(Cause.hasDies, (cause) => reportRuntimeError(cause)),
+              Effect.withSpan(`query ${q.id}`, {}, { captureStackTrace: false })
+            ),
+          { signal }
+        )
+    }, queryClient)
+
+    const latestSuccess = shallowRef<TData>()
+    const result = computed((): AsyncResult.AsyncResult<TData, E> =>
+      swrToQuery({
+        error: tanstack.error.value,
+        data: tanstack.data.value === undefined ? latestSuccess.value : tanstack.data.value,
+        isValidating: tanstack.isFetching.value
+      })
+    )
+    watch(result, (value) => latestSuccess.value = Option.getOrUndefined(AsyncResult.value(value)), { immediate: true })
+    const seedLatestSuccess = (data: TData) => {
+      if (latestSuccess.value === undefined) {
+        latestSuccess.value = data
+      }
+    }
+
+    const registry = injectRegistry()
+    const latestSuccessRef = computed(() => latestSuccess.value)
+    const atom = computed<Atom.Atom<AsyncResult.AsyncResult<TData, E>>>(() => Atom.readable(() => result.value))
+
+    const awaitResult = (): Effect.Effect<TData, E> =>
+      Effect
+        .tryPromise({
+          try: async () => {
+            const queryResult = await tanstack.suspense()
+            const data = queryResult.data
+            if (data === undefined) {
+              throw new Error("TanStack query resolved without data")
+            }
+            seedLatestSuccess(data)
+            return data
+          },
+          catch: (error) => error
+        })
+        .pipe(
+          Effect.catch((error) => recoverCauseException<TData, E>(error))
+        )
+
+    const refetch = (): Effect.Effect<TData, E> =>
+      Effect
+        .tryPromise({
+          try: async () => {
+            const queryResult = await tanstack.refetch({ throwOnError: true })
+            const data = queryResult.data
+            if (data === undefined) {
+              throw new Error("TanStack query refetched without data")
+            }
+            return data
+          },
+          catch: (error) => error
+        })
+        .pipe(
+          Effect.catch((error) => recoverCauseException<TData, E>(error))
+        )
+
+    const handle: QueryHandle<TData, E> = {
+      awaitResult,
+      refetch,
+      refresh: () => {
+        void tanstack.refetch()
+      },
+      registry,
+      atom
+    }
+
+    const fetch = (_options?: RefetchOptions): Effect.Effect<QueryObserverResult<TData, CauseException<E>>> =>
+      refetch().pipe(Effect.exit, Effect.map(AsyncResult.fromExit))
+
+    return [
+      result,
+      latestSuccessRef,
+      fetch,
+      handle
+    ] as const
+  }
+
+  return useQuery
+}

package/src/intl.ts

@@ -0,0 +1,12 @@
+import * as Context from "effect-app/Context"
+import { accessCn, accessFn } from "effect-app/Context"
+import { type MakeIntlReturn } from "./makeIntl.ts"
+
+type I18nShape = ReturnType<MakeIntlReturn<string>["useIntl"]>
+
+export class I18n extends Context.Opaque<I18n, I18nShape>()("I18n") {
+  static readonly locale = accessCn(this, "locale")
+  static readonly trans = accessFn(this, "trans")
+  static readonly formatMessage = accessFn(this, "formatMessage")
+  static readonly intl = accessCn(this, "intl")
+}

package/src/lib.ts

@@ -1,10 +1,11 @@
 import { type Pausable, useIntervalFn, type UseIntervalFnOptions } from "@vueuse/core"
-import { Cause, type Effect, pipe } from "effect-app"
-import { type Req } from "effect-app/client"
-import type { ClientForOptions, RequestHandler, RequestHandlerWithInput } from "effect-app/client/clientFor"
+import type { Req } from "effect-app/client"
+import type { RequestHandlerWithInput } from "effect-app/client/clientFor"
+import type * as Effect from "effect-app/Effect"
+import * as Cause from "effect/Cause"
 import { isHttpClientError } from "effect/unstable/http/HttpClientError"
-import type { MaybeRefOrGetter } from "vue"
-import { reportError } from "./errorReporter.js"
+import { isProxy, isReactive, isRef, type MaybeRefOrGetter, toRaw } from "vue"
+import { reportError } from "./errorReporter.ts"
 
 export * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 
@@ -31,15 +32,7 @@ const determineLevel = (cause: Cause.Cause<unknown>) => {
 export const reportRuntimeError = (cause: Cause.Cause<unknown>, extras?: Record<string, unknown>) =>
   reportRuntimeError_(cause, extras, determineLevel(cause))
 
-// $Project/$Configuration.Index
-// -> "$Project", "$Configuration", "Index"
-export const makeQueryKey = ({ id, options }: { id: string; options?: ClientForOptions }) =>
-  pipe(
-    id.split("/"),
-    (split) => split.filter((_) => !options || !options?.skipQueryKey?.includes(_)).map((_) => "$" + _)
-  )
-    .join(".")
-    .split(".")
+export { makeQueryKey } from "effect-app/client"
 
 export function pauseWhileProcessing(
   iv: Pausable,
@@ -75,13 +68,48 @@ export const mapHandler: {
     self: RequestHandlerWithInput<I, A, E, R, Request, Name>,
     map: (handler: (i: I) => Effect.Effect<A, E, R>) => (i: I) => Effect.Effect<A2, E2, R2>
   ): RequestHandlerWithInput<I, A2, E2, R2, Request, Name>
-  <E, A, R, E2, A2, R2, Request extends Req, Name extends string>(
-    self: RequestHandler<A, E, R, Request, Name>,
-    map: (handler: Effect.Effect<A, E, R>) => Effect.Effect<A2, E2, R2>
-  ): RequestHandler<A2, E2, R2, Request, Name>
 } = (self: any, map: any): any => ({
   ...self,
-  handler: typeof self.handler === "function"
-    ? (i: any) => map(self.handler as (i: any) => Effect.Effect<any, any, any>)(i)
-    : map(self.handler)
+  handler: (i: any) => map(self.handler as (i: any) => Effect.Effect<any, any, any>)(i)
 })
+
+export function deepToRaw<T>(sourceObj: T): T {
+  const objectIterator = (input: any): any => {
+    if (isRef(input)) {
+      return objectIterator(input.value)
+    }
+
+    const rawInput = isReactive(input) || isProxy(input)
+      ? toRaw(input)
+      : input
+
+    if (Array.isArray(rawInput)) {
+      return rawInput.map((item) => objectIterator(item))
+    }
+
+    if (rawInput instanceof Map) {
+      return new Map(
+        Array.from(rawInput.entries(), ([key, value]) => [objectIterator(key), objectIterator(value)])
+      )
+    }
+
+    if (rawInput instanceof Set) {
+      return new Set(Array.from(rawInput.values(), (value) => objectIterator(value)))
+    }
+
+    if (rawInput instanceof Date) {
+      return new Date(rawInput)
+    }
+
+    if (rawInput && typeof rawInput === "object") {
+      return Object.keys(rawInput).reduce((acc, key) => {
+        acc[key] = objectIterator(rawInput[key])
+        return acc
+      }, {} as Record<string, unknown>)
+    }
+
+    return rawInput
+  }
+
+  return objectIterator(sourceObj)
+}