@effect-app/vue 1.25.2 → 1.26.1

package/dist/query2.js

@@ -0,0 +1,119 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { isHttpRequestError, isHttpResponseError } from "@effect-app/core/http/http-client";
+import * as Result from "@effect-rx/rx/Result";
+import { useQuery } from "@tanstack/vue-query";
+import { Cause, Effect, Option, Runtime, S } from "effect-app";
+import { ServiceUnavailableError } from "effect-app/client";
+import { computed, ref } from "vue";
+import { makeQueryKey, reportRuntimeError } from "./internal.js";
+export const makeQuery2 = (runtime) => {
+    // TODO: options
+    // declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UndefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseQueryReturnType<TData, TError>;
+    // declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: DefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseQueryDefinedReturnType<TData, TError>;
+    // declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>, queryClient?: QueryClient): UseQueryReturnType<TData, TError>;
+    const useSafeQuery_ = (q, arg, options = {} // TODO
+    ) => {
+        const runPromise = Runtime.runPromise(runtime.value);
+        const arr = arg;
+        const req = !arg
+            ? undefined
+            : typeof arr === "function"
+                ? {
+                    get value() {
+                        return arr();
+                    }
+                }
+                : ref(arg);
+        const queryKey = makeQueryKey(q.name);
+        const handler = q.handler;
+        const r = useQuery(Effect.isEffect(handler)
+            ? {
+                ...options,
+                retry: (retryCount, error) => {
+                    if (Runtime.isFiberFailure(error)) {
+                        const cause = error[Runtime.FiberFailureCauseId];
+                        const sq = Cause.squash(cause);
+                        if (!isHttpRequestError(sq) && !isHttpResponseError(sq) && !S.is(ServiceUnavailableError)(sq)) {
+                            return false;
+                        }
+                    }
+                    return retryCount < 5;
+                },
+                queryKey,
+                queryFn: ({ signal }) => runPromise(handler
+                    .pipe(Effect.tapDefect(reportRuntimeError), Effect.withSpan(`query ${q.name}`, { captureStackTrace: false })), { signal })
+            }
+            : {
+                ...options,
+                retry: (retryCount, error) => {
+                    if (Runtime.isFiberFailure(error)) {
+                        const cause = error[Runtime.FiberFailureCauseId];
+                        const sq = Cause.squash(cause);
+                        if (!isHttpRequestError(sq) && !isHttpResponseError(sq) && !S.is(ServiceUnavailableError)(sq)) {
+                            return false;
+                        }
+                    }
+                    return retryCount < 5;
+                },
+                queryKey: [...queryKey, req],
+                queryFn: ({ signal }) => runPromise(handler(req.value)
+                    .pipe(Effect.tapDefect(reportRuntimeError), Effect.withSpan(`query ${q.name}`, { captureStackTrace: false })), { signal })
+            });
+        const result = computed(() => swrToQuery({
+            error: r.error.value ?? undefined,
+            data: r.data.value,
+            isValidating: r.isFetching.value
+        }));
+        const latestSuccess = computed(() => Option.getOrUndefined(Result.value(result.value)));
+        return [
+            result,
+            latestSuccess,
+            // one thing to keep in mind is that span will be disconnected as Context does not pass from outside.
+            (options) => Effect.promise(() => r.refetch(options)),
+            r
+        ];
+    };
+    function swrToQuery(r) {
+        if (r.error) {
+            return Result.failureWithPrevious(r.error[Runtime.FiberFailureCauseId], r.data === undefined ? Option.none() : Option.some(Result.success(r.data)), r.isValidating);
+        }
+        if (r.data !== undefined) {
+            return Result.success(r.data, r.isValidating);
+        }
+        return Result.initial(r.isValidating);
+    }
+    function useSafeQuery(self, 
+    /*
+  q:
+    | {
+      handler: (
+        req: I
+      ) => Effect<
+        A,
+        E,
+        R
+      >
+      mapPath: (req: I) => string
+      name: string
+    }
+    | {
+      handler: Effect<
+        A,
+        E,
+        R
+      >
+      mapPath: string
+      name: string
+    },
+  */
+    argOrOptions, options) {
+        return Effect.isEffect(self.handler)
+            ? useSafeQuery_(self, undefined, argOrOptions)
+            : useSafeQuery_(self, argOrOptions, options);
+    }
+    return useSafeQuery;
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVlcnkyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vc3JjL3F1ZXJ5Mi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx1REFBdUQ7QUFDdkQsc0RBQXNEO0FBQ3RELHdEQUF3RDtBQUN4RCw0REFBNEQ7QUFDNUQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLG1CQUFtQixFQUFFLE1BQU0sbUNBQW1DLENBQUE7QUFDM0YsT0FBTyxLQUFLLE1BQU0sTUFBTSxzQkFBc0IsQ0FBQTtBQVE5QyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDOUMsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDOUQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDM0QsT0FBTyxFQUFFLFFBQVEsRUFBRSxHQUFHLEVBQUUsTUFBTSxLQUFLLENBQUE7QUFFbkMsT0FBTyxFQUFFLFlBQVksRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQWtCaEUsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLENBQUksT0FBZ0MsRUFBRSxFQUFFO0lBQ2hFLGdCQUFnQjtJQUNoQixzUkFBc1I7SUFDdFIsMlJBQTJSO0lBQzNSLHVSQUF1UjtJQUN2UixNQUFNLGFBQWEsR0FBRyxDQUNwQixDQW9CRyxFQUNILEdBQXdCLEVBQ3hCLFVBQXdFLEVBQUUsQ0FBQyxPQUFPO01BQ2xGLEVBQUU7UUFDRixNQUFNLFVBQVUsR0FBRyxPQUFPLENBQUMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQTtRQUNwRCxNQUFNLEdBQUcsR0FBRyxHQUFHLENBQUE7UUFDZixNQUFNLEdBQUcsR0FBaUIsQ0FBQyxHQUFHO1lBQzVCLENBQUMsQ0FBQyxTQUFTO1lBQ1gsQ0FBQyxDQUFDLE9BQU8sR0FBRyxLQUFLLFVBQVU7Z0JBQzNCLENB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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue",
-  "version": "1.25.2",
+  "version": "1.26.1",
   "license": "MIT",
   "type": "module",
   "homepage": "https://github.com/effect-ts-app/libs/tree/main/packages/vue",
@@ -10,9 +10,9 @@
     "@vueuse/core": "^11.1.0",
     "query-string": "^9.1.1",
     "@effect-app/core": "1.17.0",
+    "@effect-app/vue": "1.26.1",
     "effect-app": "1.30.0",
-    "@effect-app/schema": "1.19.0",
-    "@effect-app/vue": "1.25.2"
+    "@effect-app/schema": "1.19.0"
   },
   "peerDependencies": {
     "@effect/platform": "^0.68.5",
@@ -102,6 +102,16 @@
         "default": "./_cjs/makeClient.cjs"
       }
     },
+    "./makeClient2": {
+      "import": {
+        "types": "./dist/makeClient2.d.ts",
+        "default": "./dist/makeClient2.js"
+      },
+      "require": {
+        "types": "./dist/makeClient2.d.ts",
+        "default": "./_cjs/makeClient2.cjs"
+      }
+    },
     "./makeContext": {
       "import": {
         "types": "./dist/makeContext.d.ts",
@@ -132,6 +142,16 @@
         "default": "./_cjs/mutate.cjs"
       }
     },
+    "./mutate2": {
+      "import": {
+        "types": "./dist/mutate2.d.ts",
+        "default": "./dist/mutate2.js"
+      },
+      "require": {
+        "types": "./dist/mutate2.d.ts",
+        "default": "./_cjs/mutate2.cjs"
+      }
+    },
     "./query": {
       "import": {
         "types": "./dist/query.d.ts",
@@ -142,6 +162,16 @@
         "default": "./_cjs/query.cjs"
       }
     },
+    "./query2": {
+      "import": {
+        "types": "./dist/query2.d.ts",
+        "default": "./dist/query2.js"
+      },
+      "require": {
+        "types": "./dist/query2.d.ts",
+        "default": "./_cjs/query2.cjs"
+      }
+    },
     "./routeParams": {
       "import": {
         "types": "./dist/routeParams.d.ts",

package/src/makeClient2.ts

@@ -0,0 +1,445 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { flow, pipe, tuple } from "@effect-app/core/Function"
+import type { MutationResult } from "@effect-app/vue"
+import { Result } from "@effect-app/vue"
+import * as Sentry from "@sentry/browser"
+import { type MaybeRefOrGetter, type Pausable, useIntervalFn, type UseIntervalFnOptions } from "@vueuse/core"
+import { Array, Cause, Effect, Exit, Match, Option, S } from "effect-app"
+import { type SupportedErrors } from "effect-app/client"
+import { Failure, Success } from "effect-app/Operations"
+import { dropUndefinedT } from "effect-app/utils"
+import { computed, type ComputedRef } from "vue"
+import type { MakeIntlReturn } from "./makeIntl.js"
+import type { MakeMutation2, MutationOptions } from "./mutate2.js"
+
+/**
+ * Use this after handling an error yourself, still continueing on the Error track, but the error will not be reported.
+ */
+export class SuppressErrors extends Cause.YieldableError {
+  readonly _tag = "SuppressErrors"
+}
+
+export type ResponseErrors = S.ParseResult.ParseError | SupportedErrors | SuppressErrors
+
+export function pauseWhileProcessing(
+  iv: Pausable,
+  pmf: () => Promise<unknown>
+) {
+  return Promise
+    .resolve(iv.pause())
+    .then(() => pmf())
+    .finally(() => iv.resume())
+}
+
+export function useIntervalPauseWhileProcessing(
+  pmf: () => Promise<unknown>,
+  interval?: MaybeRefOrGetter<number>,
+  options?: Omit<UseIntervalFnOptions, "immediateCallback">
+) {
+  const iv = useIntervalFn(
+    () => pauseWhileProcessing(iv, pmf),
+    interval,
+    options ? { ...options, immediateCallback: false } : options
+  )
+  return {
+    isActive: iv.isActive
+  }
+}
+
+export interface Opts<A> extends MutationOptions {
+  suppressErrorToast?: boolean
+  suppressSuccessToast?: boolean
+  successToast?: (a: A) => any
+}
+
+export interface Res<A, E> {
+  readonly loading: boolean
+  readonly data: A | undefined
+  readonly error: E | undefined
+}
+
+type WithAction<A> = A & {
+  action: string
+}
+
+// computed() takes a getter function and returns a readonly reactive ref
+// object for the returned value from the getter.
+type Resp<I, E, A, R> = readonly [
+  ComputedRef<Res<A, E>>,
+  WithAction<(I: I) => Effect<A, E, R>>
+]
+
+type ActResp<E, A, R> = readonly [
+  ComputedRef<Res<A, E>>,
+  WithAction<() => Effect<A, E, R>>
+]
+
+export function mutationResultToVue<A, E>(
+  mutationResult: MutationResult<A, E>
+): Res<A, E> {
+  switch (mutationResult._tag) {
+    case "Loading": {
+      return { loading: true, data: undefined, error: undefined }
+    }
+    case "Success": {
+      return {
+        loading: false,
+        data: mutationResult.data,
+        error: undefined
+      }
+    }
+    case "Error": {
+      return {
+        loading: false,
+        data: undefined,
+        error: mutationResult.error
+      }
+    }
+    case "Initial": {
+      return { loading: false, data: undefined, error: undefined }
+    }
+  }
+}
+
+export const makeClient2 = <Locale extends string, R>(
+  useIntl: MakeIntlReturn<Locale>["useIntl"],
+  useToast: () => {
+    error: (message: string) => void
+    warning: (message: string) => void
+    success: (message: string) => void
+  },
+  useSafeMutation: MakeMutation2,
+  messages: Record<string, string | undefined> = {}
+) => {
+  const useHandleRequestWithToast = () => {
+    const toast = useToast()
+    const { intl } = useIntl()
+
+    return handleRequestWithToast
+    /**
+     * Pass a function that returns a Promise.
+     * Returns an execution function which reports errors as Toast.
+     */
+    function handleRequestWithToast<
+      E extends ResponseErrors,
+      A,
+      R,
+      Args extends unknown[]
+    >(
+      f: (...args: Args) => Effect<A, E, R>,
+      action: string,
+      options: Opts<A> = { suppressErrorToast: false }
+    ) {
+      const message = messages[action] ?? action
+      const warnMessage = intl.value.formatMessage(
+        { id: "handle.with_warnings" },
+        { action: message }
+      )
+      const successMessage = intl.value.formatMessage(
+        { id: "handle.success" },
+        { action: message }
+      )
+      const errorMessage = intl.value.formatMessage(
+        { id: "handle.with_errors" },
+        { action: message }
+      )
+      return Object.assign(
+        flow(
+          f,
+          Effect.onExit(
+            Exit.matchEffect({
+              onSuccess: (r) =>
+                Effect.gen(function*() {
+                  if (S.is(Failure)(r)) {
+                    toast.warning(
+                      warnMessage + r.message
+                        ? "\n" + r.message
+                        : ""
+                    )
+                    return
+                  }
+
+                  toast.success(
+                    successMessage
+                      + (S.is(Success)(r) && r.message
+                        ? "\n" + r.message
+                        : "")
+                  )
+                }),
+              onFailure: (err) =>
+                Effect.gen(function*() {
+                  if (Cause.isInterruptedOnly(err)) {
+                    return
+                  }
+
+                  const fail = Cause.failureOption(err)
+                  if (Option.isSome(fail)) {
+                    if ((fail as any)._tag === "SuppressErrors") {
+                      return Effect.succeed(void 0)
+                    }
+
+                    if (!options.suppressErrorToast) {
+                      toast.error(`${errorMessage}:\n` + renderError(fail.value))
+                    }
+
+                    console.warn(fail, fail.toString())
+                    return
+                  }
+
+                  const extra = {
+                    action,
+                    message: `Unexpected Error trying to ${action}`
+                  }
+                  Sentry.captureException(err, {
+                    extra
+                  })
+                  console.error(err, extra)
+
+                  toast.error(
+                    intl.value.formatMessage(
+                      { id: "handle.unexpected_error" },
+                      {
+                        action: message,
+                        error: JSON.stringify(err, undefined, 2)
+                      }
+                    )
+                  )
+                })
+            })
+          )
+        ),
+        { action }
+      )
+    }
+
+    function renderError(e: ResponseErrors): string {
+      return Match.value(e).pipe(
+        Match.tags({
+          // HttpErrorRequest: e =>
+          //   intl.value.formatMessage(
+          //     { id: "handle.request_error" },
+          //     { error: `${e.error}` },
+          //   ),
+          // HttpErrorResponse: e =>
+          //   e.response.status >= 500 ||
+          //   e.response.body._tag !== "Some" ||
+          //   !e.response.body.value
+          //     ? intl.value.formatMessage(
+          //         { id: "handle.error_response" },
+          //         {
+          //           error: `${
+          //             e.response.body._tag === "Some" && e.response.body.value
+          //               ? parseError(e.response.body.value)
+          //               : "Unknown"
+          //           } (${e.response.status})`,
+          //         },
+          //       )
+          //     : intl.value.formatMessage(
+          //         { id: "handle.unexpected_error" },
+          //         {
+          //           error:
+          //             JSON.stringify(e.response.body, undefined, 2) +
+          //             "( " +
+          //             e.response.status +
+          //             ")",
+          //         },
+          //       ),
+          // ResponseError: e =>
+          //   intl.value.formatMessage(
+          //     { id: "handle.response_error" },
+          //     { error: `${e.error}` },
+          //   ),
+          ParseError: (e) => {
+            console.warn(e.toString())
+            return intl.value.formatMessage({ id: "validation.failed" })
+          }
+        }),
+        Match.orElse((e) =>
+          intl.value.formatMessage(
+            { id: "handle.unexpected_error" },
+            {
+              error: `${e.message ?? e._tag ?? e}`
+            }
+          )
+        )
+      )
+    }
+  }
+
+  /**
+   * Pass a function that returns an Effect, e.g from a client action, give it a name, and optionally pass an onSuccess callback.
+   * Returns a tuple with state ref and execution function which reports errors as Toast.
+   */
+  const useAndHandleMutation: {
+    <I, E extends ResponseErrors, A, R>(
+      self: {
+        handler: (i: I) => Effect<A, E, R>
+        name: string
+      },
+      action: string,
+      options?: Opts<A>
+    ): Resp<I, A, E, R>
+    <E extends ResponseErrors, A, R>(
+      self: {
+        handler: Effect<A, E, R>
+        name: string
+      },
+      action: string,
+      options?: Opts<A>
+    ): ActResp<E, A, R>
+  } = (self: any, action: any, options?: Opts<any>) => {
+    const handleRequestWithToast = useHandleRequestWithToast()
+    const [a, b] = useSafeMutation(
+      {
+        handler: Effect.isEffect(self.handler)
+          ? (pipe(
+            Effect.annotateCurrentSpan({ action }),
+            Effect.andThen(self.handler)
+          ) as any)
+          : (...args: any[]) =>
+            pipe(
+              Effect.annotateCurrentSpan({ action }),
+              Effect.andThen(self.handler(...args))
+            ),
+        name: self.name
+      },
+      dropUndefinedT({
+        queryInvalidation: options?.queryInvalidation
+      })
+    )
+
+    return tuple(
+      computed(() => mutationResultToVue(a.value)),
+      handleRequestWithToast(b as any, action, options)
+    )
+  }
+
+  function makeUseAndHandleMutation(
+    defaultOptions?: Opts<any>
+  ) {
+    return ((self: any, action: any, options: any) => {
+      return useAndHandleMutation(
+        {
+          handler: self.handler,
+          name: self.name
+        },
+        action,
+        { ...defaultOptions, ...options }
+      )
+    }) as {
+      <I, E extends ResponseErrors, A, R>(
+        self: {
+          handler: (i: I) => Effect<A, E, R>
+          name: string
+        },
+        action: string,
+        options?: Opts<A>
+      ): Resp<I, A, E, R>
+      <E extends ResponseErrors, A>(
+        self: {
+          handler: Effect<A, E, R>
+          name: string
+        },
+        action: string,
+        options?: Opts<A>
+      ): ActResp<E, A, R>
+    }
+  }
+
+  const useSafeMutationWithState = <I, E, A>(self: {
+    handler: (i: I) => Effect<A, E, R>
+    name: string
+  }) => {
+    const [a, b] = useSafeMutation(self)
+
+    return tuple(
+      computed(() => mutationResultToVue(a.value)),
+      b
+    )
+  }
+
+  return {
+    useSafeMutationWithState,
+    useAndHandleMutation,
+    makeUseAndHandleMutation,
+    useHandleRequestWithToast
+  }
+}
+
+export const mapHandler: {
+  <I, E, R, A, E2, A2, R2>(
+    self: {
+      handler: (i: I) => Effect<A, E, R>
+      name: string
+      mapPath: (i: I) => string
+    },
+    map: (i: I) => (handler: Effect<A, E, R>) => Effect<A2, E2, R2>
+  ): {
+    handler: (i: I) => Effect<A2, E2, R2>
+    name: string
+    mapPath: (i: I) => string
+  }
+  <E, A, R, E2, A2, R2>(
+    self: {
+      handler: Effect<A, E, R>
+      name: string
+      mapPath: string
+    },
+    map: (handler: Effect<A, E, R>) => Effect<A2, E2, R2>
+  ): {
+    handler: Effect<A2, E2, R2>
+    name: string
+    mapPath: string
+  }
+} = (self: any, map: any): any => ({
+  ...self,
+  handler: typeof self.handler === "function"
+    ? (i: any) => map(i)((self.handler as (i: any) => Effect<any, any, any>)(i))
+    : map(self.handler)
+})
+
+export function composeQueries<
+  R extends Record<string, Result.Result<any, any>>
+>(
+  results: R,
+  renderPreviousOnFailure?: boolean
+): Result.Result<
+  {
+    [Property in keyof R]: R[Property] extends Result.Result<infer A, any> ? A
+      : never
+  },
+  {
+    [Property in keyof R]: R[Property] extends Result.Result<any, infer E> ? E
+      : never
+  }[keyof R]
+> {
+  const values = renderPreviousOnFailure
+    ? Object.values(results).map(orPrevious)
+    : Object.values(results)
+  const error = values.find(Result.isFailure)
+  if (error) {
+    return error
+  }
+  const initial = Array.findFirst(values, (x) => x._tag === "Initial" ? Option.some(x) : Option.none())
+  if (initial.value !== undefined) {
+    return initial.value
+  }
+  const loading = Array.findFirst(values, (x) => Result.isInitial(x) && x.waiting ? Option.some(x) : Option.none())
+  if (loading.value !== undefined) {
+    return loading.value
+  }
+
+  const isRefreshing = values.some((x) => x.waiting)
+
+  const r = Object.entries(results).reduce((prev, [key, value]) => {
+    prev[key] = Result.value(value).value
+    return prev
+  }, {} as any)
+  return Result.success(r, isRefreshing)
+}
+
+function orPrevious<E, A>(result: Result.Result<A, E>) {
+  return Result.isFailure(result) && Option.isSome(result.previousValue)
+    ? Result.success(result.previousValue.value, result.waiting)
+    : result
+}