@jcoreio/zod-forms 2.0.0-beta.4 → 2.1.0

package/src/FieldPath.ts

@@ -55,45 +55,31 @@ export class FieldPath<T extends z.ZodTypeAny = z.ZodTypeAny> {
 
 export type BasePath = (string | number)[]
 
-export type SubpathKey<T extends z.ZodTypeAny> = 0 extends 1 & T
-  ? any
-  : 0 extends 1 & z.input<T>
-  ? any
-  : T extends z.ZodObject<infer Shape, infer UnknownKeys>
-  ? UnknownKeys extends 'passthrough'
-    ? string
+export type SubpathKey<T extends z.ZodTypeAny> =
+  0 extends 1 & T ? any
+  : 0 extends 1 & z.input<T> ? any
+  : T extends z.ZodObject<infer Shape, infer UnknownKeys> ?
+    UnknownKeys extends 'passthrough' ?
+      string
     : keyof Shape
-  : T extends z.ZodRecord<infer Key, any>
-  ? z.input<Key>
-  : T extends z.ZodMap<infer Key, any>
-  ? z.input<Key>
-  : T extends z.ZodArray<any>
-  ? number
-  : T extends z.ZodTuple<any, any>
-  ? number
-  : T extends z.ZodLazy<infer U>
-  ? SubpathKey<U>
-  : T extends z.ZodUnion<infer Options>
-  ? SubpathKey<Options[number]>
-  : T extends z.ZodDiscriminatedUnion<any, infer Options>
-  ? SubpathKey<Options[number]>
-  : T extends z.ZodOptional<infer U>
-  ? SubpathKey<U>
-  : T extends z.ZodNullable<infer U>
-  ? SubpathKey<U>
-  : T extends z.ZodDefault<infer U>
-  ? SubpathKey<U>
-  : T extends z.ZodCatch<infer U>
-  ? SubpathKey<U>
-  : T extends z.ZodEffects<infer U, any>
-  ? SubpathKey<U>
-  : T extends z.ZodBranded<infer U, any>
-  ? SubpathKey<U>
+  : T extends z.ZodRecord<infer Key, any> ? z.input<Key>
+  : T extends z.ZodMap<infer Key, any> ? z.input<Key>
+  : T extends z.ZodArray<any> ? number
+  : T extends z.ZodTuple<any, any> ? number
+  : T extends z.ZodLazy<infer U> ? SubpathKey<U>
+  : T extends z.ZodUnion<infer Options> ? SubpathKey<Options[number]>
+  : T extends z.ZodDiscriminatedUnion<any, infer Options> ?
+    SubpathKey<Options[number]>
+  : T extends z.ZodOptional<infer U> ? SubpathKey<U>
+  : T extends z.ZodNullable<infer U> ? SubpathKey<U>
+  : T extends z.ZodDefault<infer U> ? SubpathKey<U>
+  : T extends z.ZodCatch<infer U> ? SubpathKey<U>
+  : T extends z.ZodEffects<infer U, any> ? SubpathKey<U>
+  : T extends z.ZodBranded<infer U, any> ? SubpathKey<U>
   : never
 
-export type AllPaths<T extends z.ZodTypeAny> = SubpathKey<T> extends never
-  ? []
-  : [] | ValuesOf<SubpathKeyMap<T>>
+export type AllPaths<T extends z.ZodTypeAny> =
+  SubpathKey<T> extends never ? [] : [] | ValuesOf<SubpathKeyMap<T>>
 
 type ValuesOf<O> = O[keyof O]
 
@@ -117,8 +103,8 @@ function subschema(
       } = schema as z.AnyZodObject
       if (key in shape) return shape[key]
       if (unknownKeys === 'passthrough') {
-        return catchall._def.typeName === z.ZodFirstPartyTypeKind.ZodNever
-          ? z.unknown()
+        return catchall._def.typeName === z.ZodFirstPartyTypeKind.ZodNever ?
+            z.unknown()
           : catchall
       }
       break
@@ -129,11 +115,11 @@ function subschema(
       ).options
         .map((opt) => subschema(opt, key))
         .filter((opt): opt is z.ZodTypeAny => opt != null)
-      return options.length > 1
-        ? z.union(options as any)
-        : options.length === 1
-        ? options[0]
+      return (
+        options.length > 1 ? z.union(options as any)
+        : options.length === 1 ? options[0]
         : undefined
+      )
     }
     case 'ZodDiscriminatedUnion': {
       const discUnion = schema as z.ZodDiscriminatedUnion<
@@ -143,11 +129,11 @@ function subschema(
       const options = discUnion.options
         .map((opt) => subschema(opt, key))
         .filter((opt): opt is z.ZodTypeAny => opt != null)
-      return options.length > 1
-        ? z.union(options as any)
-        : options.length === 1
-        ? options[0]
+      return (
+        options.length > 1 ? z.union(options as any)
+        : options.length === 1 ? options[0]
         : undefined
+      )
       break
     }
     case 'ZodIntersection':
@@ -164,18 +150,12 @@ function subschema(
       break
     }
     case 'ZodRecord': {
-      const { keySchema, valueSchema } = schema as z.ZodRecord<
-        z.ZodTypeAny,
-        z.ZodTypeAny
-      >
+      const { keySchema, valueSchema } = schema as z.ZodRecord<z.ZodTypeAny>
       if (keySchema.safeParse(key).success) return valueSchema
       break
     }
     case 'ZodMap': {
-      const { keySchema, valueSchema } = schema as z.ZodMap<
-        z.ZodTypeAny,
-        z.ZodTypeAny
-      >
+      const { keySchema, valueSchema } = schema as z.ZodMap
       if (keySchema.safeParse(key).success) return valueSchema
       break
     }

package/src/FormState.ts

@@ -4,6 +4,7 @@ import { DeepPartial } from './util/DeepPartial'
 export type FieldMeta = {
   touched: boolean
   visited: boolean
+  customMeta?: unknown
 }
 
 export type SubmitHandler<T extends z.ZodTypeAny> = (
@@ -14,14 +15,14 @@ export type SubmitHandler<T extends z.ZodTypeAny> = (
   }
 ) => void | Promise<void>
 
-export type SubmitSuccededHandler = () => void
+export type SubmitSuccededHandler = () => void | Promise<void>
 
-export type SubmitFailedHandler = (error: Error) => void
+export type SubmitFailedHandler = (error: unknown) => void | Promise<void>
 
 export type FormState<T extends z.ZodTypeAny> = {
   mounted: boolean
   initialized: boolean
-  fieldMeta: Record<string, FieldMeta>
+  fieldMeta: { [K in string]?: FieldMeta }
   values?: DeepPartial<z.input<T>>
   parsedValues?: z.output<T>
   submittedParsedValues?: z.output<T>
@@ -36,5 +37,5 @@ export type FormState<T extends z.ZodTypeAny> = {
   submitting: boolean
   submitSucceeded: boolean
   submitFailed: boolean
-  submitError?: Error
+  submitError?: unknown
 }

package/src/actions/arrayActions.ts

@@ -16,7 +16,7 @@ type ValueFor<Field extends ArrayFieldPath> = DeepPartial<
 >
 
 export type ArrayInsertParsedAction<
-  Field extends ArrayFieldPath = ArrayFieldPath
+  Field extends ArrayFieldPath = ArrayFieldPath,
 > = ReturnType<typeof arrayInsertParsed<Field>>
 
 export function arrayInsertParsed<Field extends ArrayFieldPath>(
@@ -51,7 +51,7 @@ export function arrayPop(field: ArrayFieldPath) {
 }
 
 export type ArrayPushParsedAction<
-  Field extends ArrayFieldPath = ArrayFieldPath
+  Field extends ArrayFieldPath = ArrayFieldPath,
 > = ReturnType<typeof arrayPushParsed<Field>>
 
 export function arrayPushParsed<Field extends ArrayFieldPath>(
@@ -90,7 +90,7 @@ export function arrayShift(field: ArrayFieldPath) {
 }
 
 export type ArraySpliceParsedAction<
-  Field extends ArrayFieldPath = ArrayFieldPath
+  Field extends ArrayFieldPath = ArrayFieldPath,
 > = ReturnType<typeof arraySpliceParsed<Field>>
 
 export function arraySpliceParsed<Field extends ArrayFieldPath>(
@@ -137,7 +137,7 @@ export function arraySwap(
 }
 
 export type ArrayUnshiftParsedAction<
-  Field extends ArrayFieldPath = ArrayFieldPath
+  Field extends ArrayFieldPath = ArrayFieldPath,
 > = ReturnType<typeof arrayUnshiftParsed<Field>>
 
 export function arrayUnshiftParsed<Field extends ArrayFieldPath>(

package/src/createFormMiddleware.ts

@@ -7,7 +7,7 @@ import { setSubmitStatus } from './actions/setSubmitStatus'
 import { submitSucceeded } from './actions/submitSucceeded'
 
 export function createFormMiddleware<T extends z.ZodTypeAny>(): Middleware<
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   {},
   FormState<T>,
   Dispatch<FormAction<T>>
@@ -49,7 +49,7 @@ export function createFormMiddleware<T extends z.ZodTypeAny>(): Middleware<
           store.dispatch(submitSucceeded())
           for (const fn of onSubmitSucceeded) await fn()
         },
-        async (error) => {
+        async (error: unknown) => {
           if (store.getState().submitPromise !== submitPromise) return
           store.dispatch(
             setSubmitStatus({

package/src/createFormProvider.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import { Store, applyMiddleware, bindActionCreators, createStore } from 'redux'
+import {
+  Store,
+  applyMiddleware,
+  bindActionCreators,
+  legacy_createStore as createStore,
+} from 'redux'
 import z from 'zod'
 import { setMounted } from './actions/setMounted'
 import { createFormReducer } from './createFormReducer'
@@ -18,6 +23,7 @@ import { setMeta } from './actions/setMeta'
 import { addHandlers } from './actions/addHandlers'
 import { removeHandlers } from './actions/removeHandlers'
 import { arrayActions } from './actions/arrayActions'
+import PropTypes from 'prop-types'
 
 export const createFormProvider = <T extends z.ZodTypeAny>(
   props: Pick<
@@ -29,7 +35,7 @@ export const createFormProvider = <T extends z.ZodTypeAny>(
     | 'selectFieldErrorMap'
     | 'selectFormValues'
   >
-) =>
+) => {
   function FormProvider({ children }: { children: React.ReactElement }) {
     const storeRef = React.useRef<Store<FormState<T>, FormAction<T>>>()
     if (!storeRef.current) {
@@ -55,6 +61,7 @@ export const createFormProvider = <T extends z.ZodTypeAny>(
       []
     )
     const getStatus = React.useCallback(
+      // eslint-disable-next-line react/prop-types
       () => props.selectFormStatus(store.getState()),
       []
     )
@@ -102,3 +109,8 @@ export const createFormProvider = <T extends z.ZodTypeAny>(
       </FormContext.Provider>
     )
   }
+  FormProvider.propTypes = {
+    children: PropTypes.node,
+  }
+  return FormProvider
+}

package/src/createSelectFieldErrorMap.ts

@@ -14,12 +14,12 @@ export function createSelectFieldErrorMap() {
     (...errors: any[]): { [K in string]?: string } =>
       Object.fromEntries(
         errors.flatMap((e) =>
-          isZodError(e)
-            ? e.issues.map((issue) => [
-                pathstring(issue.path),
-                messageForIssue(issue),
-              ])
-            : []
+          isZodError(e) ?
+            e.issues.map((issue) => [
+              pathstring(issue.path),
+              messageForIssue(issue),
+            ])
+          : []
         )
       )
   )
@@ -34,14 +34,16 @@ function isZodError(error: any): error is z.ZodError {
  */
 function messageForIssue(issue: z.ZodIssue): string {
   if (issue.code === 'invalid_type') {
-    return issue.received === 'null' || issue.received === 'undefined'
-      ? // Without this, the error would say "Expected <type>, received null"
+    return (
+      issue.received === 'null' || issue.received === 'undefined' ?
+        // Without this, the error would say "Expected <type>, received null"
         // or "Invalid number" as below
         'Required'
-      : issue.expected === 'number' || issue.expected === 'bigint'
-      ? // Without this, invalid text input for z.number() would say "Expected number, received string"
+      : issue.expected === 'number' || issue.expected === 'bigint' ?
+        // Without this, invalid text input for z.number() would say "Expected number, received string"
         'Invalid number'
       : issue.message
+    )
   }
   return issue.message
 }

package/src/createSelectFormStatus.ts

@@ -34,8 +34,10 @@ export function createSelectFormStatus() {
         ],
         isEqual
       ),
+      selectValidationError,
     ],
-    (parsedPristine, pristine) => parsedPristine && pristine
+    (parsedPristine, pristine, validationError) =>
+      validationError ? pristine : parsedPristine
   )
 
   return createStructuredSelector({

package/src/reducers/arrayMove.ts

@@ -20,8 +20,8 @@ export function arrayMoveReducer<T extends z.ZodTypeAny>(
 export function move<T>(array: T[], from: number, to: number): T[] {
   if (from < 0 || from >= array.length) throw new Error(`from out of range`)
   if (to < 0 || to >= array.length) throw new Error(`to out of range`)
-  return from < to
-    ? [
+  return from < to ?
+      [
         ...array.slice(0, from),
         ...array.slice(from + 1, to),
         array[from],

package/src/reducers/initialize.ts

@@ -14,9 +14,9 @@ export const createInitializeReducer = <T extends z.ZodTypeAny>({
     try {
       const values =
         action.values ??
-        (action.parsedValues
-          ? inverseSchema.parse(action.parsedValues)
-          : undefined)
+        (action.parsedValues ?
+          inverseSchema.parse(action.parsedValues)
+        : undefined)
       const parsedValues =
         action.parsedValues ??
         (action.values ? schema.parse(action.values) : undefined)

package/src/reducers/setMeta.ts

@@ -20,7 +20,10 @@ export function setMetaReducer<T extends z.ZodTypeAny>(
     ...state,
     fieldMeta: {
       ...state.fieldMeta,
-      [field.pathstring]: { ...oldMeta, ...meta },
+      [field.pathstring]: {
+        ...(oldMeta || { touched: false, visited: false }),
+        ...meta,
+      },
     },
   }
 }

package/src/reducers/setParsedValue.ts

@@ -31,12 +31,13 @@ export const createSetParsedValueReducer = <T extends z.ZodTypeAny>({
         values: newValues,
         parsedValues: newParsedValues,
       }
-    } catch (error) {
+    } catch {
       const newParsed = invert(action.field.schema).safeParse(
         action.parsedValue
       )
-      const values = newParsed.success
-        ? (set(
+      const values =
+        newParsed.success ?
+          (set(
             state.values,
             action.field.path,
             newParsed.data
@@ -46,14 +47,14 @@ export const createSetParsedValueReducer = <T extends z.ZodTypeAny>({
       const result = {
         ...state,
         submitError: undefined,
-        validationError: !newParsed.success
-          ? newParsed.error
-          : newValidatedParsed.success
-          ? undefined
+        validationError:
+          !newParsed.success ? newParsed.error
+          : newValidatedParsed.success ? undefined
           : newValidatedParsed.error,
         values,
-        parsedValues: newValidatedParsed.success
-          ? newValidatedParsed.data
+        parsedValues:
+          newValidatedParsed.success ?
+            newValidatedParsed.data
           : state.parsedValues,
       }
       return result

package/src/reducers/util/updateRawArray.ts

@@ -8,7 +8,7 @@ import { setValue } from '../../actions/setValue'
 
 export function updateRawArray<
   T extends z.ZodTypeAny,
-  Field extends FieldPathForValue<any[]>
+  Field extends FieldPathForValue<any[]>,
 >(
   reducer: Reducer<FormState<T>, FormAction<T>>,
   state: FormState<T>,
@@ -19,7 +19,7 @@ export function updateRawArray<
 ) {
   const oldValue = get(state.values, field.path)
   const newValue = updater(oldValue as any)
-  return newValue === oldValue
-    ? state
-    : reducer(state, setValue(field, newValue))
+  return newValue === oldValue ? state : (
+      reducer(state, setValue(field, newValue))
+    )
 }

package/src/useArrayField.ts

@@ -20,36 +20,37 @@ import { setValue } from './actions/setValue'
 import { setMeta } from './actions/setMeta'
 import { FieldMeta } from './FormState'
 import { DeepPartial } from './util/DeepPartial'
+import { maybeParse } from './util/maybeParse'
 
-export type UseArrayFieldProps<Field extends ArrayFieldPath = ArrayFieldPath> =
-  NonNullable<z.input<Field['schema']>> extends any[]
-    ? FieldMeta &
-        ReturnType<
-          typeof bindActionsToField<
-            Field,
-            arrayActions<Field> & {
-              setParsedValue: typeof setParsedValue<Field>
-              setValue: typeof setValue<Field>
-              setMeta: typeof setMeta<Field>
-            }
-          >
-        > & {
-          elements: FieldPath<SchemaAt<Field['schema'], [number]>>[]
-          error?: string
-          dirty: boolean
-          pristine: boolean
-          valid: boolean
-          invalid: boolean
-        }
-    : { ERROR: 'not an array field' }
+export type UseArrayFieldProps<Field extends FieldPath> =
+  NonNullable<z.input<Field['schema']>> extends any[] ?
+    FieldMeta &
+      ReturnType<
+        typeof bindActionsToField<
+          Field,
+          arrayActions<Field> & {
+            setParsedValue: typeof setParsedValue<Field>
+            setValue: typeof setValue<Field>
+            setMeta: typeof setMeta<Field>
+          }
+        >
+      > & {
+        elements: FieldPath<SchemaAt<Field['schema'], [number]>>[]
+        error?: string
+        dirty: boolean
+        pristine: boolean
+        valid: boolean
+        invalid: boolean
+      }
+  : { ERROR: 'not an array field' }
 
 export interface TypedUseArrayField<T extends z.ZodTypeAny> {
   <Field extends FieldPathForValue<any[] | null | undefined>>(
     field: Field
   ): UseArrayFieldProps<Field>
-  <Path extends PathInSchema<T>>(path: Path): UseArrayFieldProps<
-    FieldPath<SchemaAt<T, Path>>
-  >
+  <Path extends PathInSchema<T>>(
+    path: Path
+  ): UseArrayFieldProps<FieldPath<SchemaAt<T, Path>>>
   <Pathstring extends PathstringInSchema<T>>(
     path: Pathstring
   ): UseArrayFieldProps<FieldPath<SchemaAt<T, parsePathstring<Pathstring>>>>
@@ -78,16 +79,25 @@ function useArrayFieldBase<Field extends ArrayFieldPath>(
         createSelector(
           [
             createStructuredSelector({
+              parsedValue: ({ parsedValues }) =>
+                get(parsedValues, field.path) as z.output<T> | undefined,
               value: ({ values }) =>
                 get(values, field.path) as DeepPartial<z.input<T>> | undefined,
+              initialParsedValue: ({ initialParsedValues }) =>
+                get(initialParsedValues, field.path) as z.output<T> | undefined,
               initialValue: ({ initialValues }) =>
                 get(initialValues, field.path) as
                   | DeepPartial<z.input<T>>
                   | undefined,
             }),
           ],
-          ({ value, initialValue }) => {
-            const dirty = !isEqual(value, initialValue)
+          ({
+            value,
+            parsedValue = maybeParse(field.schema, value),
+            initialValue,
+            initialParsedValue = maybeParse(field.schema, initialValue),
+          }) => {
+            const dirty = !isEqual(parsedValue, initialParsedValue)
             const pristine = !dirty
             return {
               dirty,
@@ -135,6 +145,7 @@ function useArrayFieldBase<Field extends ArrayFieldPath>(
       ...boundActions,
       visited: meta?.visited || false,
       touched: meta?.touched || submitFailed,
+      customMeta: meta?.customMeta,
       error,
       elements,
       dirty,
@@ -154,14 +165,14 @@ export function useArrayField<
     z.ZodNever,
     'cast to TypedUseArrayField<T> to pass a path array'
   >,
-  Path extends PathInSchema<T> = any
+  Path extends PathInSchema<T> = any,
 >(field: Path): UseArrayFieldProps<FieldPath<SchemaAt<T, Path>>>
 export function useArrayField<
   T extends z.ZodTypeAny = z.ZodBranded<
     z.ZodNever,
     'cast to TypedUseArrayField<T> to pass a pathstring'
   >,
-  Pathstring extends PathstringInSchema<T> = any
+  Pathstring extends PathstringInSchema<T> = any,
 >(
   field: Pathstring
 ): UseArrayFieldProps<FieldPath<SchemaAt<T, parsePathstring<Pathstring>>>>