@effect-app/vue 2.14.0 → 2.15.0

package/src/makeClient.ts

@@ -1,16 +1,21 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as Sentry from "@sentry/browser"
-import type { Either } from "effect-app"
-import { Cause, Effect, Match, Runtime, S } from "effect-app"
-import { type SupportedErrors } from "effect-app/client"
-import { flow, pipe, tuple } from "effect-app/Function"
+import { Cause, Effect, Exit, Match, Option, Runtime, S, Struct } from "effect-app"
+import { CauseException, type SupportedErrors } from "effect-app/client"
+import type { RequestHandler, RequestHandlerWithInput, TaggedRequestClassAny } from "effect-app/client/clientFor"
+import { constant, pipe, tuple } from "effect-app/Function"
 import type { OperationFailure } from "effect-app/Operations"
 import { OperationSuccess } from "effect-app/Operations"
+import type { Schema } from "effect-app/Schema"
 import { dropUndefinedT } from "effect-app/utils"
-import { computed, type ComputedRef } from "vue"
+import type { ComputedRef, Ref, ShallowRef } from "vue"
+import { computed, ref, watch } from "vue"
+import { buildFieldInfoFromFieldsRoot } from "./form.js"
+import { getRuntime } from "./lib.js"
 import type { MakeIntlReturn } from "./makeIntl.js"
-import type { MakeMutation, MutationOptions, Res } from "./mutate.js"
-import { mutationResultToVue } from "./mutate.js"
+import { makeMutation2, mutationResultToVue } from "./mutate.js"
+import type { MutationOptions, Res } from "./mutate.js"
+import { makeQuery2 } from "./query.js"
 
 /**
  * Use this after handling an error yourself, still continueing on the Error track, but the error will not be reported.
@@ -21,86 +26,55 @@ export class SuppressErrors extends Cause.YieldableError {
 
 export type ResponseErrors = S.ParseResult.ParseError | SupportedErrors | SuppressErrors | OperationFailure
 
-export interface Opts<A, I = void> extends MutationOptions<A, I> {
-  suppressErrorToast?: boolean
-  suppressSuccessToast?: boolean
-  successToast?: (a: A) => any
+export interface Opts<
+  A,
+  E,
+  I = void,
+  ESuccess = never,
+  RSuccess = never,
+  EError = never,
+  RError = never,
+  EDefect = never,
+  RDefect = never
+> extends MutationOptions {
+  /** set to `undefined` to use default message */
+  successMessage?: ((a: A, i: I) => Effect<string | undefined, ESuccess, RSuccess>) | undefined
+  /** set to `undefined` to use default message */
+  failMessage?: ((e: E, i: I) => Effect<string | undefined, EError, RError>) | undefined
+  /** set to `undefined` to use default message */
+  defectMessage?: ((e: Cause.Cause<E>, i: I) => Effect<string | undefined, EDefect, RDefect>) | undefined
 }
 
-/** @deprecated - use mapHandler */
-export const withSuccess: {
-  <I, A, E, X, R>(
-    self: {
-      handler: (i: I) => Effect<A, E, R>
-      name: string
-    },
-    onSuccess: (a: A, i: I) => Promise<X>
-  ): {
-    handler: (i: I) => Effect<X, E, R>
-    name: string
-  }
-  <A, E, X, R>(
-    self: {
-      handler: Effect<A, E, R>
-      name: string
-    },
-    onSuccess: (_: A) => Promise<X>
-  ): {
-    handler: Effect<X, E, R>
-    name: string
-  }
-} = (self: any, onSuccess: any): any => ({
-  ...self,
-  handler: typeof self.handler === "function"
-    ? (i: any) =>
-      pipe(
-        (
-          self.handler as (
-            i: any
-          ) => Effect<any, any, any>
-        )(i),
-        Effect.flatMap((_) =>
-          Effect.promise(() => onSuccess(_, i)).pipe(
-            Effect.withSpan("onSuccess")
-          )
-        )
-      )
-    : Effect.flatMap(self.handler, (_) => Effect.promise(() => onSuccess(_)).pipe(Effect.withSpan("onSuccess")))
-})
-
-/** @deprecated - use mapHandler */
-export const withSuccessE: {
-  <I, E, A, E2, X, R>(
-    self: {
-      handler: (i: I) => Effect<A, E, R>
-      name: string
-    },
-    onSuccessE: (_: A, i: I) => Effect<X, E2>
-  ): {
-    handler: (i: I) => Effect<X, E | E2, R>
-    name: string
-  }
-  <E, A, E2, X, R>(
-    self: {
-      handler: Effect<A, E, R>
-      name: string
-    },
-    onSuccessE: (_: A) => Effect<X, E2>
-  ): {
-    handler: Effect<X, E | E2, R>
-    name: string
-  }
-} = (self: any, onSuccessE: any): any => {
-  return {
-    ...self,
-    handler: typeof self.handler === "function"
-      ? (i: any) =>
-        pipe(
-          self.handler(i),
-          Effect.flatMap((_) => onSuccessE(_, i))
-        )
-      : Effect.flatMap(self.handler, (_) => onSuccessE(_))
-  }
+export interface LowOpts<
+  A,
+  E,
+  I = void,
+  ESuccess = never,
+  RSuccess = never,
+  EError = never,
+  RError = never,
+  EDefect = never,
+  RDefect = never
+> {
+  onSuccess: (a: A, i: I) => Effect<void, ESuccess, RSuccess>
+  onFail: (e: E, i: I) => Effect<void, EError, RError>
+  onDefect: (e: Cause.Cause<E>, i: I) => Effect<void, EDefect, RDefect>
+}
+
+export interface LowOptsOptional<
+  A,
+  E,
+  I = void,
+  ESuccess = never,
+  RSuccess = never,
+  EError = never,
+  RError = never,
+  EDefect = never,
+  RDefect = never
+> extends MutationOptions {
+  onSuccess?: (a: A, i: I) => Effect<void, ESuccess, RSuccess>
+  onFail?: (e: E, i: I) => Effect<void, EError, RError>
+  onDefect?: (e: Cause.Cause<E>, i: I) => Effect<void, EDefect, RDefect>
 }
 
 type WithAction<A> = A & {
@@ -109,26 +83,113 @@ type WithAction<A> = A & {
 
 // computed() takes a getter function and returns a readonly reactive ref
 // object for the returned value from the getter.
-type Resp<I, E, A> = readonly [
+type Resp<I, A, E, R> = readonly [
   ComputedRef<Res<A, E>>,
-  WithAction<(I: I) => Promise<void>>
+  WithAction<(I: I) => Effect<Exit<A, E>, never, R>>
 ]
 
-type ActResp<E, A> = readonly [
+type ActResp<A, E, R> = readonly [
   ComputedRef<Res<A, E>>,
-  WithAction<() => Promise<void>>
+  WithAction<Effect<Exit<A, E>, never, R>>
 ]
 
-export const makeClient = <Locale extends string, R>(
+export const suppressToast = constant(Effect.succeed(undefined))
+
+export function handleRequest<
+  E extends ResponseErrors,
+  A,
+  R,
+  I = void,
+  ESuccess = never,
+  RSuccess = never,
+  EError = never,
+  RError = never,
+  EDefect = never,
+  RDefect = never
+>(
+  f: Effect<A, E, R> | ((i: I) => Effect<A, E, R>),
+  action: string,
+  options: {
+    onSuccess: (a: A, i: I) => Effect<void, ESuccess, RSuccess>
+    onFail: (e: E, i: I) => Effect<void, EError, RError>
+    onDefect: (e: Cause.Cause<E>, i: I) => Effect<void, EDefect, RDefect>
+  }
+) {
+  const handleEffect = (i: any) => (self: Effect<A, E, R>) =>
+    self.pipe(
+      Effect.exit,
+      Effect.tap(
+        Exit.matchEffect({
+          onSuccess: (r) => options.onSuccess(r, i),
+          onFailure: (cause) =>
+            Effect.gen(function*() {
+              if (Cause.isInterruptedOnly(cause)) {
+                console.info(`Interrupted while trying to ${action}`)
+                return
+              }
+
+              const fail = Cause.failureOption(cause)
+              if (Option.isSome(fail)) {
+                if (fail.value._tag === "SuppressErrors") {
+                  console.info(`Suppressed error trying to ${action}`, fail.value)
+                  return
+                }
+                const message = `Failure trying to ${action}`
+                console.warn(message, fail.value)
+                Sentry.captureMessage(message, { extra: { action, error: fail.value } })
+                yield* options.onFail(fail.value, i)
+                return
+              }
+
+              const extra = {
+                action,
+                message: `Unexpected Error trying to ${action}`
+              }
+              console.error(extra.message, cause)
+              Sentry.captureException(new CauseException(cause, "defect"), { extra })
+
+              yield* options.onDefect(cause, i)
+            })
+        })
+      ),
+      Effect.tapErrorCause((cause) =>
+        Effect.sync(() => {
+          const extra = {
+            action,
+            message: `Unexpected Error trying to handle errors for ${action}`
+          }
+          Sentry.captureException(new CauseException(cause, "unhandled"), { extra })
+          console.error(Cause.pretty(cause), extra)
+        })
+      )
+    )
+  return Object.assign(
+    Effect.isEffect(f)
+      ? pipe(
+        f,
+        handleEffect(void 0)
+      )
+      : (i: I) =>
+        pipe(
+          f(i),
+          handleEffect(i)
+        ),
+    { action }
+  )
+}
+
+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: MakeMutation<R>,
+  runtime: ShallowRef<Runtime.Runtime<R> | undefined>,
   messages: Record<string, string | undefined> = {}
 ) => {
+  const useSafeMutation = makeMutation2()
+  const useSafeQuery = makeQuery2(runtime)
   const useHandleRequestWithToast = () => {
     const toast = useToast()
     const { intl } = useIntl()
@@ -141,91 +202,78 @@ export const makeClient = <Locale extends string, R>(
     function handleRequestWithToast<
       E extends ResponseErrors,
       A,
-      Args extends unknown[]
+      R,
+      I = void,
+      ESuccess = never,
+      RSuccess = never,
+      EError = never,
+      RError = never,
+      EDefect = never,
+      RDefect = never
     >(
-      f: (...args: Args) => Promise<Either<A, E>>,
+      f: Effect<A, E, R> | ((i: I) => Effect<A, E, R>),
       action: string,
-      options: Opts<A> = { suppressErrorToast: false }
+      options: Opts<A, E, I, ESuccess, RSuccess, EError, RError, EDefect, RDefect> = {}
     ) {
-      const message = messages[action] ?? action
-      const warnMessage = intl.value.formatMessage(
+      const actionMessage = messages[action] ?? action
+      const defaultWarnMessage = intl.value.formatMessage(
         { id: "handle.with_warnings" },
-        { action: message }
+        { action: actionMessage }
       )
-      const successMessage = intl.value.formatMessage(
+      const defaultSuccessMessage = intl.value.formatMessage(
         { id: "handle.success" },
-        { action: message }
+        { action: actionMessage }
       )
-      const errorMessage = intl.value.formatMessage(
+      const defaultErrorMessage = intl.value.formatMessage(
         { id: "handle.with_errors" },
-        { action: message }
+        { action: actionMessage }
       )
-      return Object.assign(
-        flow(f, (p) =>
-          p.then(
-            (r) => {
-              if (r._tag === "Right") {
-                if (options.suppressSuccessToast) {
-                  return
-                }
-                return Promise
-                  .resolve(
-                    toast.success(
-                      successMessage
-                        + (S.is(OperationSuccess)(r.right) && r.right.message
-                          ? "\n" + r.right.message
-                          : "")
-                    )
-                  )
-                  .then((_) => {})
-              }
-              if (r.left._tag === "SuppressErrors") {
-                return Promise.resolve(void 0)
-              }
 
-              if (r.left._tag === "OperationFailure") {
-                return toast.warning(
-                  warnMessage + r.left.message
-                    ? "\n" + r.left.message
-                    : ""
-                )
-              }
-              if (!options.suppressErrorToast) {
-                toast.error(`${errorMessage}:\n` + renderError(r.left))
-              }
+      return handleRequest<E, A, R, any, ESuccess, RSuccess, EError, RError, EDefect, RDefect>(f, action, {
+        onSuccess: (a, i) =>
+          Effect.gen(function*() {
+            const message = options.successMessage ? yield* options.successMessage(a, i) : defaultSuccessMessage
+              + (S.is(OperationSuccess)(a) && a.message
+                ? "\n" + a.message
+                : "")
+            if (message) {
+              toast.success(message)
+            }
+          }),
+        onFail: (e, i) =>
+          Effect.gen(function*() {
+            if (!options.failMessage && e._tag === "OperationFailure") {
+              toast.warning(
+                defaultWarnMessage + e.message
+                  ? "\n" + e.message
+                  : ""
+              )
+              return
+            }
 
-              console.warn(r.left, r.left.toString())
-            },
-            (err) => {
-              if (
-                Cause.isInterruptedException(err)
-                || (Runtime.isFiberFailure(err)
-                  && Cause.isInterruptedOnly(err[Runtime.FiberFailureCauseId]))
-              ) {
-                return
-              }
-              const extra = {
-                action,
-                message: `Unexpected Error trying to ${action}`
-              }
-              Sentry.captureException(err, {
-                extra
-              })
-              console.error(err, extra)
-
-              return toast.error(
-                intl.value.formatMessage(
-                  { id: "handle.unexpected_error" },
-                  {
-                    action: message,
-                    error: JSON.stringify(err, undefined, 2)
-                  }
-                )
+            const message = options.failMessage
+              ? yield* options.failMessage(e, i)
+              : `${defaultErrorMessage}:\n` + renderError(e)
+            if (message) {
+              toast.error(message)
+            }
+          }),
+        onDefect: (cause, i) =>
+          Effect.gen(function*() {
+            const message = options.defectMessage
+              ? yield* options.defectMessage(cause, i)
+              : intl.value.formatMessage(
+                { id: "handle.unexpected_error" },
+                {
+                  action: actionMessage,
+                  error: Cause.pretty(cause)
+                }
               )
+            if (message) {
+              toast.error(message)
             }
-          )),
-        { action }
-      )
+          })
+      })
     }
 
     function renderError(e: ResponseErrors): string {
@@ -283,44 +331,58 @@ export const makeClient = <Locale extends string, R>(
   }
 
   /**
-   * 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.
+   * Pass a function that returns an Effect, e.g from a client action, give it a name.
+   * Returns a tuple with state ref and execution function which reports success and errors as Toast.
    */
   const useAndHandleMutation: {
-    <I, E extends ResponseErrors, A>(
-      self: {
-        handler: (i: I) => Effect<A, E, R>
-        name: string
-      },
+    <
+      I,
+      E extends ResponseErrors,
+      A,
+      R,
+      Request extends TaggedRequestClassAny,
+      ESuccess = never,
+      RSuccess = never,
+      EError = never,
+      RError = never,
+      EDefect = never,
+      RDefect = never
+    >(
+      self: RequestHandlerWithInput<I, A, E, R, Request>,
       action: string,
-      options?: Opts<A, I>
-    ): Resp<I, A, E>
-    <E extends ResponseErrors, A>(
-      self: {
-        handler: Effect<A, E, R>
-        name: string
-      },
+      options?: Opts<A, E, I, ESuccess, RSuccess, EError, RError, EDefect, RDefect>
+    ): Resp<I, void, never, R>
+    <
+      E extends ResponseErrors,
+      A,
+      R,
+      Request extends TaggedRequestClassAny,
+      ESuccess = never,
+      RSuccess = never,
+      EError = never,
+      RError = never,
+      EDefect = never,
+      RDefect = never
+    >(
+      self: RequestHandler<A, E, R, Request>,
       action: string,
-      options?: Opts<A>
-    ): ActResp<E, A>
-  } = (self: any, action: any, options?: Opts<any>) => {
+      options?: Opts<A, E, void, ESuccess, RSuccess, EError, RError, EDefect, RDefect>
+    ): ActResp<void, never, R>
+  } = (self: any, action: any, options?: Opts<any, any, any, any, any, any, any, any, any>): any => {
     const handleRequestWithToast = useHandleRequestWithToast()
-    const [a, b] = useSafeMutation(
-      {
-        handler: Effect.isEffect(self.handler)
-          ? (pipe(
+    const [a, b] = useSafeMutation({
+      ...self,
+      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)
-          ) as any)
-          : (...args: any[]) =>
-            pipe(
-              Effect.annotateCurrentSpan({ action }),
-              Effect.andThen(self.handler(...args))
-            ),
-        name: self.name
-      },
-      options ? dropUndefinedT(options) : undefined
-    )
+            Effect.andThen(self.handler(...args))
+          )
+    }, options ? dropUndefinedT(options) : undefined)
 
     return tuple(
       computed(() => mutationResultToVue(a.value)),
@@ -328,49 +390,162 @@ export const makeClient = <Locale extends string, R>(
     )
   }
 
+  /**
+   * The same as @see useAndHandleMutation, but does not display any toasts by default.
+   * Messages for success, error and defect toasts can be provided in the Options.
+   */
+  const useAndHandleMutationSilently: {
+    <
+      I,
+      E extends ResponseErrors,
+      A,
+      R,
+      Request extends TaggedRequestClassAny,
+      ESuccess = never,
+      RSuccess = never,
+      EError = never,
+      RError = never,
+      EDefect = never,
+      RDefect = never
+    >(
+      self: RequestHandlerWithInput<I, A, E, R, Request>,
+      action: string,
+      options?: Opts<A, E, I, ESuccess, RSuccess, EError, RError, EDefect, RDefect>
+    ): Resp<I, void, never, R>
+    <
+      E extends ResponseErrors,
+      A,
+      R,
+      Request extends TaggedRequestClassAny,
+      ESuccess = never,
+      RSuccess = never,
+      EError = never,
+      RError = never,
+      EDefect = never,
+      RDefect = never
+    >(
+      self: RequestHandler<A, E, R, Request>,
+      action: string,
+      options?: Opts<A, E, void, ESuccess, RSuccess, EError, RError, EDefect, RDefect>
+    ): ActResp<void, never, R>
+  } = makeUseAndHandleMutation({
+    successMessage: suppressToast,
+    failMessage: suppressToast,
+    defectMessage: suppressToast
+  }) as any
+
+  /**
+   * The same as @see useAndHandleMutation, but does not act on success, error or defect by default.
+   * Actions for success, error and defect can be provided in the Options.
+   */
+  const useAndHandleMutationCustom: {
+    <
+      I,
+      E extends ResponseErrors,
+      A,
+      R,
+      Request extends TaggedRequestClassAny,
+      ESuccess = never,
+      RSuccess = never,
+      EError = never,
+      RError = never,
+      EDefect = never,
+      RDefect = never
+    >(
+      self: RequestHandlerWithInput<I, A, E, R, Request>,
+      action: string,
+      options?: LowOptsOptional<A, E, I, ESuccess, RSuccess, EError, RError, EDefect, RDefect>
+    ): Resp<I, void, never, R>
+    <
+      E extends ResponseErrors,
+      A,
+      R,
+      Request extends TaggedRequestClassAny,
+      ESuccess = never,
+      RSuccess = never,
+      EError = never,
+      RError = never,
+      EDefect = never,
+      RDefect = never
+    >(
+      self: RequestHandler<A, E, R, Request>,
+      action: string,
+      options?: LowOptsOptional<A, E, void, ESuccess, RSuccess, EError, RError, EDefect, RDefect>
+    ): ActResp<void, never, R>
+  } = (self: any, action: string, options: any) => {
+    const [a, b] = useSafeMutation({
+      ...self,
+      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))
+          )
+    }, options ? dropUndefinedT(options) : undefined)
+
+    return tuple(
+      computed(() => mutationResultToVue(a.value)),
+      handleRequest(b as any, action, {
+        onSuccess: suppressToast,
+        onDefect: suppressToast,
+        onFail: suppressToast,
+        ...options
+      })
+    ) as any
+  }
+
   function makeUseAndHandleMutation(
-    onSuccess?: () => Promise<void>,
-    defaultOptions?: Opts<any>
+    defaultOptions?: Opts<any, any, any, any, any, any, any, any, any>
   ) {
     return ((self: any, action: any, options: any) => {
       return useAndHandleMutation(
-        {
-          handler: typeof self.handler === "function"
-            ? onSuccess
-              ? (i: any) => Effect.tap(self.handler(i), () => Effect.promise(onSuccess))
-              : self.handler
-            : onSuccess
-            ? (Effect.tap(self.handler, () => Effect.promise(onSuccess)) as any)
-            : self.handler,
-          name: self.name
-        },
+        self,
         action,
         { ...defaultOptions, ...options }
       )
-    }) as {
-      <I, E extends ResponseErrors, A>(
-        self: {
-          handler: (i: I) => Effect<A, E, R>
-          name: string
-        },
+    }) as unknown as {
+      <
+        I,
+        E extends ResponseErrors,
+        A,
+        R,
+        Request extends TaggedRequestClassAny,
+        ESuccess = never,
+        RSuccess = never,
+        EError = never,
+        RError = never,
+        EDefect = never,
+        RDefect = never
+      >(
+        self: RequestHandlerWithInput<I, A, E, R, Request>,
         action: string,
-        options?: Opts<A, I>
-      ): Resp<I, A, E>
-      <E extends ResponseErrors, A>(
-        self: {
-          handler: Effect<A, E, R>
-          name: string
-        },
+        options?: Opts<A, E, I, ESuccess, RSuccess, EError, RError, EDefect, RDefect>
+      ): Resp<I, A, E, R>
+      <
+        E extends ResponseErrors,
+        A,
+        Request extends TaggedRequestClassAny,
+        ESuccess = never,
+        RSuccess = never,
+        EError = never,
+        RError = never,
+        EDefect = never,
+        RDefect = never
+      >(
+        self: RequestHandler<A, E, R, Request>,
         action: string,
-        options?: Opts<A>
-      ): ActResp<E, A>
+        options?: Opts<A, E, void, ESuccess, RSuccess, EError, RError, EDefect, RDefect>
+      ): ActResp<A, E, R>
     }
   }
 
-  const useSafeMutationWithState = <I, E, A>(self: {
-    handler: (i: I) => Effect<A, E, R>
-    name: string
-  }) => {
+  const useSafeMutationWithState = <I, E, A, Request extends TaggedRequestClassAny>(
+    self: RequestHandlerWithInput<I, A, E, R, Request>
+  ) => {
     const [a, b] = useSafeMutation(self)
 
     return tuple(
@@ -379,10 +554,71 @@ export const makeClient = <Locale extends string, R>(
     )
   }
 
+  const buildFormFromSchema = <
+    From extends Record<PropertyKey, any>,
+    To extends Record<PropertyKey, any>,
+    C extends Record<PropertyKey, any>,
+    OnSubmitA
+  >(
+    s:
+      & Schema<
+        To,
+        From,
+        R
+      >
+      & { new(c: C): any; fields: S.Struct.Fields },
+    state: Ref<Omit<From, "_tag">>,
+    onSubmit: (a: To) => Effect<OnSubmitA, never, R>
+  ) => {
+    const fields = buildFieldInfoFromFieldsRoot(s).fields
+    const schema = S.Struct(Struct.omit(s.fields, "_tag")) as any
+    const parse = S.decodeUnknown<any, any, R>(schema)
+    const isDirty = ref(false)
+    const isValid = ref(true)
+    const runPromise = Runtime.runPromise(getRuntime(runtime))
+
+    const submit1 =
+      (onSubmit: (a: To) => Effect<OnSubmitA, never, R>) => async <T extends Promise<{ valid: boolean }>>(e: T) => {
+        const r = await e
+        if (!r.valid) return
+        return runPromise(onSubmit(new s(await runPromise(parse(state.value)))))
+      }
+    const submit = submit1(onSubmit)
+
+    watch(
+      state,
+      (v) => {
+        // TODO: do better
+        isDirty.value = JSON.stringify(v) !== JSON.stringify(state.value)
+      },
+      { deep: true }
+    )
+
+    const submitFromState = Effect.gen(function*() {
+      if (!isValid.value) return
+      return yield* onSubmit(yield* parse(state.value))
+    }) // () => submit(Promise.resolve({ valid: isValid.value }))
+
+    return {
+      fields,
+      /** optimized for Vuetify v-form submit callback */
+      submit,
+      /** optimized for Native form submit callback or general use */
+      submitFromState,
+      isDirty,
+      isValid
+    }
+  }
+
   return {
     useSafeMutationWithState,
     useAndHandleMutation,
+    useAndHandleMutationSilently,
+    useAndHandleMutationCustom,
     makeUseAndHandleMutation,
-    useHandleRequestWithToast
+    useHandleRequestWithToast,
+    buildFormFromSchema,
+    useSafeQuery,
+    useSafeMutation
   }
 }