@paragrav/rhf-utils 0.0.104 → 0.0.106

package/README.md

@@ -33,17 +33,15 @@ export const config: RhfUtilsClientConfig = {
   FormComponent: Form.Root,
 
   // transform backend error
+  // use `getOnSubmitTrpcClientErrorHandler` for TRPC backends
   onSubmitError: (
     error, // unknown
   ) => {
-    // if other error, re-throw to handle
-    if (!(error instanceof TRPCClientError)) throw error;
+    // if other error, re-throw to handle in ErrorBoundary
+    if (!(error instanceof ServerError)) throw error;
 
-    // transform
-    const errors = transformToFormSubmitError(error);
-
-    // return to be merged in RHF context errors
-    return new FormSubmitError(errors);
+    // return to be merged into RHF context errors
+    return transformServerErrorToFormSubmitErrors(error);
   },
 
   Children: {

package/dist/esm/errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs

@@ -0,0 +1,6 @@
+import { TRPCClientError as o } from "@trpc/client";
+import { trpcClientErrorToFormSubmitErrorsSchemaTransformer as n } from "./trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs";
+const m = (t) => (r) => r instanceof o ? n.parse(r) : t(r);
+export {
+  m as getOnSubmitTrpcClientErrorHandler
+};

package/dist/esm/errors/trpc/trpcClientErrorMessageSchema.mjs

@@ -0,0 +1,10 @@
+import { z as r } from "zod";
+const e = r.object({
+  validation: r.string(),
+  code: r.string(),
+  message: r.string(),
+  path: r.array(r.string())
+});
+export {
+  e as trpcClientErrorMessageSchema
+};

package/dist/esm/errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs

@@ -0,0 +1,34 @@
+import { TRPCClientError as o } from "@trpc/client";
+import { z as e } from "zod";
+import { trpcClientErrorMessageSchema as a } from "./trpcClientErrorMessageSchema.mjs";
+const i = e.custom(
+  (r) => r instanceof o
+  // check instance type
+).transform((r) => r.message).transform((r) => {
+  try {
+    return JSON.parse(r);
+  } catch {
+    return [
+      {
+        validation: "root",
+        code: "server",
+        message: r,
+        path: ["root"]
+      }
+    ];
+  }
+}).pipe(e.array(a)).transform(
+  (r) => r.map(
+    (t) => [
+      t.path.join("."),
+      // flatten path (e.g., "street.name")
+      {
+        type: t.code,
+        message: t.message
+      }
+    ]
+  )
+).transform((r) => Object.fromEntries(r));
+export {
+  i as trpcClientErrorToFormSubmitErrorsSchemaTransformer
+};

package/dist/esm/exports.mjs

@@ -1,66 +1,70 @@
 import { default as e } from "./client/zod/context/RhfUtilsClientForZodContextProvider.mjs";
-import { default as s } from "./client/zod/context/useRhfUtilsClientForZodContext.mjs";
+import { default as a } from "./client/zod/context/useRhfUtilsClientForZodContext.mjs";
 import { default as f } from "./client/zod/context/useRhfUtilsZodForm.mjs";
-import { default as m } from "./client/zod/RhfUtilsZodForm.mjs";
+import { default as u } from "./client/zod/RhfUtilsZodForm.mjs";
 import { default as d } from "./devtool/LazyDevTool.mjs";
 import { default as x } from "./errors/flat/context/useFlatFieldErrorsContext.mjs";
 import { default as i } from "./errors/flat/FlatFieldErrorsList.mjs";
 import { default as E } from "./errors/message/FormErrorMessage.mjs";
-import { default as C } from "./errors/message/FormErrorMessageByPath.mjs";
-import { default as G } from "./errors/nonfield/FormNonFieldErrorMarker.mjs";
-import { default as c } from "./errors/nonfield/FormNonFieldErrorMarkerHtmlAttribute.mjs";
-import { default as P } from "./errors/orphan/useFormHasOnlyOrphanFieldErrorsMemo.mjs";
-import { default as B } from "./errors/orphan/useOrphanFormErrorsMemo.mjs";
-import { default as b } from "./errors/root/RootErrorsListFromFlatFieldErrorsContext.mjs";
-import { default as S } from "./errors/root/useRootFormFieldErrorsMemo.mjs";
-import { default as U } from "./errors/useFormErrorsEffect.mjs";
-import { default as v } from "./errors/useFormErrorsIfAny.mjs";
-import { default as A } from "./form/FormWithProviders.mjs";
-import { default as D } from "./form/useForm.mjs";
-import { default as N } from "./form/context/utils/useFormUtilsContext.mjs";
-import { default as W } from "./form/context/group/FormGroupContextProvider.mjs";
-import { default as q } from "./form/context/group/useFormGroupChildIsMountedTracker.mjs";
-import { default as J } from "./form/context/group/useFormGroupChildIsSubmittingTracker.mjs";
-import { default as Q } from "./form/context/group/useFormGroupChildTracker.mjs";
-import { default as X } from "./form/context/group/useFormGroupIsAnyBusy.mjs";
-import { default as _ } from "./form/context/group/useFormGroupIsChildBusy.mjs";
-import { default as rr } from "./form/context/group/useFormGroupIsParentBusy.mjs";
-import { default as er } from "./form/context/group/useFormGroupParentTracker.mjs";
-import { default as sr } from "./form/context/group/useFormOrParentIsBusy.mjs";
-import { default as fr } from "./form/utils/getSubmitterButtonData.mjs";
-import { FormSubmitError as mr } from "./submit/error/FormSubmitError.mjs";
-import { default as dr } from "./submit/useFormOnSubmitSuccessful.mjs";
+import { default as h } from "./errors/message/FormErrorMessageByPath.mjs";
+import { default as y } from "./errors/nonfield/FormNonFieldErrorMarker.mjs";
+import { default as M } from "./errors/nonfield/FormNonFieldErrorMarkerHtmlAttribute.mjs";
+import { default as T } from "./errors/orphan/useFormHasOnlyOrphanFieldErrorsMemo.mjs";
+import { default as I } from "./errors/orphan/useOrphanFormErrorsMemo.mjs";
+import { default as k } from "./errors/root/RootErrorsListFromFlatFieldErrorsContext.mjs";
+import { default as O } from "./errors/root/useRootFormFieldErrorsMemo.mjs";
+import { getOnSubmitTrpcClientErrorHandler as g } from "./errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs";
+import { trpcClientErrorToFormSubmitErrorsSchemaTransformer as v } from "./errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs";
+import { default as A } from "./errors/useFormErrorsEffect.mjs";
+import { default as L } from "./errors/useFormErrorsIfAny.mjs";
+import { default as N } from "./form/FormWithProviders.mjs";
+import { default as W } from "./form/useForm.mjs";
+import { default as q } from "./form/context/utils/useFormUtilsContext.mjs";
+import { default as J } from "./form/context/group/FormGroupContextProvider.mjs";
+import { default as Q } from "./form/context/group/useFormGroupChildIsMountedTracker.mjs";
+import { default as X } from "./form/context/group/useFormGroupChildIsSubmittingTracker.mjs";
+import { default as _ } from "./form/context/group/useFormGroupChildTracker.mjs";
+import { default as rr } from "./form/context/group/useFormGroupIsAnyBusy.mjs";
+import { default as er } from "./form/context/group/useFormGroupIsChildBusy.mjs";
+import { default as ar } from "./form/context/group/useFormGroupIsParentBusy.mjs";
+import { default as fr } from "./form/context/group/useFormGroupParentTracker.mjs";
+import { default as ur } from "./form/context/group/useFormOrParentIsBusy.mjs";
+import { default as dr } from "./form/utils/getSubmitterButtonData.mjs";
+import { FormSubmitError as xr } from "./submit/error/FormSubmitError.mjs";
+import { default as ir } from "./submit/useFormOnSubmitSuccessful.mjs";
 export {
   i as FlatFieldErrorsList,
   E as FormErrorMessage,
-  C as FormErrorMessageByPath,
-  W as FormGroupContextProvider,
-  G as FormNonFieldErrorMarker,
-  c as FormNonFieldErrorMarkerHtmlAttribute,
-  mr as FormSubmitError,
-  A as FormWithProviders,
+  h as FormErrorMessageByPath,
+  J as FormGroupContextProvider,
+  y as FormNonFieldErrorMarker,
+  M as FormNonFieldErrorMarkerHtmlAttribute,
+  xr as FormSubmitError,
+  N as FormWithProviders,
   d as LazyDevTool,
   e as RhfUtilsClientForZodContextProvider,
-  m as RhfUtilsZodForm,
-  b as RootErrorsListFromFlatFieldErrorsContext,
-  fr as getSubmitterButtonData,
+  u as RhfUtilsZodForm,
+  k as RootErrorsListFromFlatFieldErrorsContext,
+  g as getOnSubmitTrpcClientErrorHandler,
+  dr as getSubmitterButtonData,
+  v as trpcClientErrorToFormSubmitErrorsSchemaTransformer,
   x as useFlatFieldErrorsContext,
-  D as useForm,
-  U as useFormErrorsEffect,
-  v as useFormErrorsIfAny,
-  q as useFormGroupChildIsMountedTracker,
-  J as useFormGroupChildIsSubmittingTracker,
-  Q as useFormGroupChildTracker,
-  X as useFormGroupIsAnyBusy,
-  _ as useFormGroupIsChildBusy,
-  rr as useFormGroupIsParentBusy,
-  er as useFormGroupParentTracker,
-  P as useFormHasOnlyOrphanFieldErrorsMemo,
-  dr as useFormOnSubmitSuccessful,
-  sr as useFormOrParentIsBusy,
-  N as useFormUtilsContext,
-  B as useOrphanFormErrorsMemo,
-  s as useRhfUtilsClientForZodContext,
+  W as useForm,
+  A as useFormErrorsEffect,
+  L as useFormErrorsIfAny,
+  Q as useFormGroupChildIsMountedTracker,
+  X as useFormGroupChildIsSubmittingTracker,
+  _ as useFormGroupChildTracker,
+  rr as useFormGroupIsAnyBusy,
+  er as useFormGroupIsChildBusy,
+  ar as useFormGroupIsParentBusy,
+  fr as useFormGroupParentTracker,
+  T as useFormHasOnlyOrphanFieldErrorsMemo,
+  ir as useFormOnSubmitSuccessful,
+  ur as useFormOrParentIsBusy,
+  q as useFormUtilsContext,
+  I as useOrphanFormErrorsMemo,
+  a as useRhfUtilsClientForZodContext,
   f as useRhfUtilsZodForm,
-  S as useRootFormFieldErrorsMemo
+  O as useRootFormFieldErrorsMemo
 };

package/dist/esm/form/Form.mjs

@@ -4,45 +4,45 @@ import { useFormContext as _ } from "react-hook-form";
 import j from "../client/config/useRhfUtilsClientConfigContext.mjs";
 import D from "../devtool/LazyDevTool.mjs";
 import { FormSubmitError as N } from "../submit/error/FormSubmitError.mjs";
-import P from "../submit/error/setCtxErrorsByFormSubmitError.mjs";
+import P from "../submit/error/setCtxErrorsByFormSubmitErrors.mjs";
 import S from "./_Controller.mjs";
 import T from "./_FormBase.mjs";
 function q({
   formId: x,
   formRef: C,
   //
-  onSubmit: d,
-  onSubmitError: o,
+  onSubmit: o,
+  onSubmitError: d,
   onSubmitInvalid: y,
   Fields: h,
   //
   form: s,
-  options: t,
+  options: e,
   //
   children: f
 }) {
-  const l = _(), e = j(), b = async (r) => {
-    t != null && t.stopSubmitPropagation && r.stopPropagation();
+  const l = _(), r = j(), b = async (t) => {
+    e != null && e.stopSubmitPropagation && t.stopPropagation();
     try {
-      await l.handleSubmit(v, y)(r);
+      await l.handleSubmit(v, y)(t);
     } catch (a) {
-      B(a, r);
+      B(a, t);
     }
-  }, v = (r, a) => d == null ? void 0 : d(
-    r,
+  }, v = (t, a) => o == null ? void 0 : o(
+    t,
     l,
     a
-  ), B = (r, a) => {
+  ), B = (t, a) => {
     var n;
-    const m = r instanceof N ? (
+    const m = t instanceof N ? (
       // consumer can manually throw FormSubmitError (e.g., manual validation)
-      r
+      t.errors
     ) : (
       // if error is not FormSubmitError, consumer can provide global handler
-      (n = e == null ? void 0 : e.onSubmitError) == null ? void 0 : n.call(e, r)
+      (n = r == null ? void 0 : r.onSubmitError) == null ? void 0 : n.call(r, t)
     );
-    m && P(l, m), o == null || o(
-      r,
+    m && P(l, m), d == null || d(
+      t,
       l,
       a
     );
@@ -50,11 +50,11 @@ function q({
     formId: x,
     formRef: C,
     context: l,
-    options: t,
+    options: e,
     Controller: S
-  }, i = (r) => {
+  }, i = (t) => {
     var m;
-    const a = (m = e == null ? void 0 : e.Children) == null ? void 0 : m[r];
+    const a = (m = r == null ? void 0 : r.Children) == null ? void 0 : m[t];
     return a && /* @__PURE__ */ c(a, { ...u });
   };
   return /* @__PURE__ */ F(
@@ -64,19 +64,19 @@ function q({
       style: {
         position: "relative"
       },
-      config: e,
+      config: r,
       formRef: C,
       ...s,
-      className: [t == null ? void 0 : t.classNames, s == null ? void 0 : s.className].filter(Boolean).join(" "),
+      className: [e == null ? void 0 : e.classNames, s == null ? void 0 : s.className].filter(Boolean).join(" "),
       onSubmit: b,
       children: [
         i("top"),
-        (t == null ? void 0 : t.devTool) !== "disabled" && /* @__PURE__ */ c(
+        (e == null ? void 0 : e.devTool) !== "disabled" && /* @__PURE__ */ c(
           D,
           {
             placement: "top-right",
-            isDevelopment: e == null ? void 0 : e.isDevelopment,
-            ...t == null ? void 0 : t.devTool
+            isDevelopment: r == null ? void 0 : r.isDevelopment,
+            ...e == null ? void 0 : e.devTool
           }
         ),
         h && /* @__PURE__ */ c(h, { ...u }),

package/dist/esm/submit/error/{setCtxErrorsByFormSubmitError.mjs → setCtxErrorsByFormSubmitErrors.mjs}

@@ -1,5 +1,5 @@
 const s = (r, t) => {
-  Object.entries(t.errors).forEach(([o, e]) => {
+  Object.entries(t).forEach(([o, e]) => {
     r.setError(o, {
       type: "FormSubmitError",
       // default

package/dist/types/client/config/RhfUtilsClientConfig.d.ts

@@ -3,7 +3,7 @@ import { RhfUtilsErrorsOutputConfigContext, RhfUtilsErrorsOutputConsoleConfig }
 import { FormChildrenSlots } from '../../form/Form';
 import { UseFormFieldsProps } from '../../form/useForm';
 import { UseFormOptions } from '../../form/useFormOptions';
-import { FormSubmitError } from '../../submit/error/FormSubmitError';
+import { FormSubmitErrors } from '../../submit/error/FormSubmitErrors';
 
 export type RhfUtilsClientConfig = {
     /**
@@ -34,12 +34,18 @@ export type RhfUtilsClientConfig = {
      */
     FormComponent?: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLFormElement>>>;
     /**
-     * Handle non-{@link FormSubmitError} errors. Optionally, return {@link FormSubmitError} to merge into context errors.
+     * Global submit error handler.
+     *
+     * Called when/if submit handler throws an error other than {@link FormSubmitError}.
      *
      * Example use case:
-     * - transform API errors to {@link FormSubmitError}.
+     * - transform API errors to {@link FormSubmitErrors}.
+     *
+     * @returns
+     * - {@link FormSubmitErrors}: merge into context errors.
+     * - `undefined`: do nothing.
      */
-    onSubmitError?: (error: unknown) => FormSubmitError | undefined;
+    onSubmitError?: (error: unknown) => FormSubmitErrors | undefined;
     /**
      * Components injected by slot across all forms.
      * (Per-form injection can be done via Fields prop.)

package/dist/types/errors/trpc/getOnSubmitTrpcClientErrorHandler.d.ts

@@ -0,0 +1,10 @@
+import { RhfUtilsClientConfig } from '../../client/config/RhfUtilsClientConfig';
+import { FormSubmitErrors } from '../../submit/error/FormSubmitErrors';
+
+/**
+ * HOF that returns submit error handler for {@link RhfUtilsClientConfig.onSubmitError}.
+ *
+ * @param onError Fallback for handling non-TRPC errors.
+ * @returns FormSubmitError
+ */
+export declare const getOnSubmitTrpcClientErrorHandler: (onNotTrpcClientError: NonNullable<RhfUtilsClientConfig['onSubmitError']>) => (error: unknown) => FormSubmitErrors | undefined;

package/dist/types/errors/trpc/trpcClientErrorMessageSchema.d.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+
+/**
+ * Schema for {@link TRPCClientError} message.
+ *
+ * (Sent from backend as JSON string.)
+ */
+export declare const trpcClientErrorMessageSchema: z.ZodObject<{
+    validation: z.ZodString;
+    code: z.ZodString;
+    message: z.ZodString;
+    path: z.ZodArray<z.ZodString, "many">;
+}, "strip", z.ZodTypeAny, {
+    message: string;
+    code: string;
+    path: string[];
+    validation: string;
+}, {
+    message: string;
+    code: string;
+    path: string[];
+    validation: string;
+}>;

package/dist/types/errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.d.ts

@@ -0,0 +1,27 @@
+import { TRPCClientErrorLike } from '@trpc/client';
+import { AnyRouter } from '@trpc/server';
+import { z } from 'zod';
+import { FormSubmitErrors } from '../../submit/error/FormSubmitErrors';
+
+/**
+ * Schema that transforms {@link TRPCClientError} to RHF {@link FormSubmitErrors}.
+ */
+export declare const trpcClientErrorToFormSubmitErrorsSchemaTransformer: z.ZodEffects<z.ZodEffects<z.ZodPipeline<z.ZodEffects<z.ZodEffects<z.ZodType<TRPCClientErrorLike<AnyRouter>, z.ZodTypeDef, TRPCClientErrorLike<AnyRouter>>, string, TRPCClientErrorLike<AnyRouter>>, unknown, TRPCClientErrorLike<AnyRouter>>, z.ZodArray<z.ZodObject<{
+    validation: z.ZodString;
+    code: z.ZodString;
+    message: z.ZodString;
+    path: z.ZodArray<z.ZodString, "many">;
+}, "strip", z.ZodTypeAny, {
+    message: string;
+    code: string;
+    path: string[];
+    validation: string;
+}, {
+    message: string;
+    code: string;
+    path: string[];
+    validation: string;
+}>, "many">>, (readonly [string, {
+    type: string;
+    message: string;
+}])[], TRPCClientErrorLike<AnyRouter>>, FormSubmitErrors, TRPCClientErrorLike<AnyRouter>>;

package/dist/types/exports.d.ts

@@ -16,6 +16,8 @@ export { default as useFormHasOnlyOrphanFieldErrorsMemo } from './errors/orphan/
 export { default as useOrphanFormErrorsMemo } from './errors/orphan/useOrphanFormErrorsMemo';
 export { default as RootErrorsListFromFlatFieldErrorsContext } from './errors/root/RootErrorsListFromFlatFieldErrorsContext';
 export { default as useRootFormFieldErrorsMemo } from './errors/root/useRootFormFieldErrorsMemo';
+export { getOnSubmitTrpcClientErrorHandler } from './errors/trpc/getOnSubmitTrpcClientErrorHandler';
+export { trpcClientErrorToFormSubmitErrorsSchemaTransformer } from './errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer';
 export { default as useFormErrorsEffect } from './errors/useFormErrorsEffect';
 export { default as useFormErrorsIfAny } from './errors/useFormErrorsIfAny';
 export { default as FormWithProviders } from './form/FormWithProviders';

package/dist/types/submit/error/FormSubmitError.d.ts

@@ -1,13 +1,7 @@
-import { FieldPath } from 'react-hook-form';
 import { SafeFieldValues } from '../../form/SafeFieldValues';
+import { FormSubmitErrors } from './FormSubmitErrors';
 
 export declare class FormSubmitError<TFieldValues extends SafeFieldValues = SafeFieldValues> extends Error {
-    errors: Record<FieldPath<TFieldValues> | `root.${string}`, {
-        type?: string;
-        message: string;
-    }>;
-    constructor(errors: Record<FieldPath<TFieldValues> | `root.${string}`, {
-        type?: string;
-        message: string;
-    }>, message?: string);
+    errors: FormSubmitErrors<TFieldValues>;
+    constructor(errors: FormSubmitErrors<TFieldValues>, message?: string);
 }

package/dist/types/submit/error/FormSubmitErrors.d.ts

@@ -0,0 +1,15 @@
+import { FieldPath } from 'react-hook-form';
+import { SafeFieldValues } from '../../form/SafeFieldValues';
+
+/**
+ * Field errors structure based on RHF's `FieldErrors`.
+ *
+ * - Uses {@link SafeFieldValues} instead of more permissive `FieldValues`.
+ * - `root.<string>` keys allowed.
+ *   - `root` is reserved for special use cases.
+ * - simplified `ErrorOption` value.
+ */
+export type FormSubmitErrors<TFieldValues extends SafeFieldValues = SafeFieldValues> = Record<FieldPath<TFieldValues> | `root.${string}`, {
+    type?: string;
+    message: string;
+}>;

package/dist/types/submit/error/setCtxErrorsByFormSubmitErrors.d.ts

@@ -0,0 +1,10 @@
+import { UseFormReturn } from 'react-hook-form';
+import { SafeFieldValues } from '../../form/SafeFieldValues';
+import { FormSubmitErrors } from './FormSubmitErrors';
+
+/**
+ * Handle thrown {@link FormSubmitError}.
+ * Add key/values as name/message to RHF context errors.
+ */
+declare const setCtxErrorsByFormSubmitErrors: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(ctx: UseFormReturn<TFieldValues, unknown, TTransformedValues>, errors: FormSubmitErrors) => void;
+export default setCtxErrorsByFormSubmitErrors;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paragrav/rhf-utils",
   "author": "paragrav.dev",
   "license": "MIT",
-  "version": "0.0.104",
+  "version": "0.0.106",
   "description": "Integration utilities for react-hook-form.",
   "type": "module",
   "sideEffects": false,
@@ -22,6 +22,8 @@
   "peerDependencies": {
     "@hookform/devtools": "4",
     "@hookform/resolvers": "3",
+    "@trpc/client": "next",
+    "@trpc/server": "next",
     "flat": "6",
     "react": "18",
     "react-dom": "18",