@jcoreio/zod-forms 1.2.1 → 2.0.0-beta.2

package/src/reducers/arrayPushParsed.ts

@@ -0,0 +1,23 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayPushParsedAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { setParsedValue } from '../actions/setParsedValue'
+import { get } from '../util/get'
+
+export function arrayPushParsedReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayPushParsedAction
+) {
+  const { field, parsedValue } = action
+  const array = get(state.values, field.path)
+  return reducer(
+    state,
+    setParsedValue(
+      field.get([Array.isArray(array) ? array.length : 0]),
+      parsedValue
+    )
+  )
+}

package/src/reducers/arraySplice.ts

@@ -1,9 +1,9 @@
 import z from 'zod'
 import { FormState } from '../FormState'
-import { ArraySpliceAction, arraySpliceRaw } from '../actions/arrayActions'
+import { ArraySpliceAction } from '../actions/arrayActions'
 import { Reducer } from 'redux'
 import { FormAction } from '../FormAction'
-import { getInverseArrayElementSchema } from './util/getInverseArrayElementSchema'
+import { updateRawArray } from './util/updateRawArray'
 
 export function arraySpliceReducer<T extends z.ZodTypeAny>(
   reducer: Reducer<FormState<T>, FormAction<T>>,
@@ -11,7 +11,20 @@ export function arraySpliceReducer<T extends z.ZodTypeAny>(
   action: ArraySpliceAction
 ) {
   const { field, index, deleteCount, values } = action
-  const inverseSchema = getInverseArrayElementSchema(field.schema)
-  const rawValues = values.map((v) => inverseSchema.parse(v))
-  return reducer(state, arraySpliceRaw(field, index, deleteCount, rawValues))
+  return updateRawArray(reducer, state, field, (array) =>
+    splice(array ?? [], index, deleteCount, values)
+  )
+}
+
+function splice<T>(
+  array: T[],
+  index: number,
+  deleteCount: number,
+  parsedValues: T[]
+) {
+  if (index < 0 || index > array.length) throw new Error(`index out of range`)
+  if (!deleteCount && !parsedValues.length) return array
+  const result = [...array]
+  result.splice(index, deleteCount, ...parsedValues)
+  return result
 }

package/src/reducers/arraySpliceParsed.ts

@@ -0,0 +1,17 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArraySpliceParsedAction, arraySplice } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { getInverseArrayElementSchema } from './util/getInverseArrayElementSchema'
+
+export function arraySpliceParsedReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArraySpliceParsedAction
+) {
+  const { field, index, deleteCount, parsedValues } = action
+  const inverseSchema = getInverseArrayElementSchema(field.schema)
+  const values = parsedValues.map((v) => inverseSchema.parse(v))
+  return reducer(state, arraySplice(field, index, deleteCount, values))
+}

package/src/reducers/arrayUnshift.ts

@@ -1,9 +1,9 @@
 import z from 'zod'
 import { FormState } from '../FormState'
-import { ArrayUnshiftAction, arrayUnshiftRaw } from '../actions/arrayActions'
+import { ArrayUnshiftAction } from '../actions/arrayActions'
 import { Reducer } from 'redux'
 import { FormAction } from '../FormAction'
-import { getInverseArrayElementSchema } from './util/getInverseArrayElementSchema'
+import { updateRawArray } from './util/updateRawArray'
 
 export function arrayUnshiftReducer<T extends z.ZodTypeAny>(
   reducer: Reducer<FormState<T>, FormAction<T>>,
@@ -11,6 +11,8 @@ export function arrayUnshiftReducer<T extends z.ZodTypeAny>(
   action: ArrayUnshiftAction
 ) {
   const { field, value } = action
-  const inverseSchema = getInverseArrayElementSchema(field.schema)
-  return reducer(state, arrayUnshiftRaw(field, inverseSchema.parse(value)))
+  return updateRawArray(reducer, state, field, (array) => [
+    value,
+    ...(array ?? []),
+  ])
 }

package/src/reducers/arrayUnshiftParsed.ts

@@ -0,0 +1,16 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayUnshiftParsedAction, arrayUnshift } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { getInverseArrayElementSchema } from './util/getInverseArrayElementSchema'
+
+export function arrayUnshiftParsedReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayUnshiftParsedAction
+) {
+  const { field, parsedValue } = action
+  const inverseSchema = getInverseArrayElementSchema(field.schema)
+  return reducer(state, arrayUnshift(field, inverseSchema.parse(parsedValue)))
+}

package/src/reducers/initialize.ts

@@ -12,12 +12,14 @@ export const createInitializeReducer = <T extends z.ZodTypeAny>({
   function initializeReducer(state: FormState<T>, action: InitializeAction<T>) {
     const { keepSubmitSucceeded } = action
     try {
-      const rawValues =
-        action.rawValues ??
-        (action.values ? inverseSchema.parse(action.values) : undefined)
       const values =
         action.values ??
-        (action.rawValues ? schema.parse(action.rawValues) : undefined)
+        (action.parsedValues
+          ? inverseSchema.parse(action.parsedValues)
+          : undefined)
+      const parsedValues =
+        action.parsedValues ??
+        (action.values ? schema.parse(action.values) : undefined)
       return {
         ...state,
         validationError: undefined,
@@ -25,10 +27,10 @@ export const createInitializeReducer = <T extends z.ZodTypeAny>({
         submitting: false,
         submitFailed: false,
         submitSucceeded: keepSubmitSucceeded ? state.submitSucceeded : false,
-        rawValues,
         values,
-        rawInitialValues: rawValues,
+        parsedValues,
         initialValues: values,
+        initialParsedValues: parsedValues,
       }
     } catch (error) {
       return {
@@ -38,10 +40,10 @@ export const createInitializeReducer = <T extends z.ZodTypeAny>({
         submitting: false,
         submitFailed: false,
         submitSucceeded: keepSubmitSucceeded ? state.submitSucceeded : false,
-        rawValues: action.rawValues,
         values: action.values,
-        rawInitialValues: action.rawValues,
+        parsedValues: action.parsedValues,
         initialValues: action.values,
+        initialParsedValues: action.parsedValues,
       }
     }
   }

package/src/reducers/setParsedValue.ts

@@ -0,0 +1,61 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { SetParsedValueAction } from '../actions/setParsedValue'
+import { set } from '../util/set'
+import { FieldPath } from '../FieldPath'
+import { invert } from 'zod-invertible'
+
+export const createSetParsedValueReducer = <T extends z.ZodTypeAny>({
+  schema,
+  inverseSchema,
+}: {
+  schema: T
+  inverseSchema: z.ZodType<z.input<T>, any, z.output<T>>
+}) =>
+  function setParsedValueReducer<Field extends FieldPath>(
+    state: FormState<T>,
+    action: SetParsedValueAction<Field>
+  ) {
+    const newParsedValues = set(
+      state.parsedValues,
+      action.field.path,
+      action.parsedValue
+    ) as (typeof state)['parsedValues']
+    try {
+      const newValues = inverseSchema.parse(newParsedValues)
+      schema.parse(newValues)
+      return {
+        ...state,
+        submitError: undefined,
+        validationError: undefined,
+        values: newValues,
+        parsedValues: newParsedValues,
+      }
+    } catch (error) {
+      const newParsed = invert(action.field.schema).safeParse(
+        action.parsedValue
+      )
+      const values = newParsed.success
+        ? (set(
+            state.values,
+            action.field.path,
+            newParsed.data
+          ) as (typeof state)['values'])
+        : state.values
+      const newValidatedParsed = schema.safeParse(values)
+      const result = {
+        ...state,
+        submitError: undefined,
+        validationError: !newParsed.success
+          ? newParsed.error
+          : newValidatedParsed.success
+          ? undefined
+          : newValidatedParsed.error,
+        values,
+        parsedValues: newValidatedParsed.success
+          ? newValidatedParsed.data
+          : state.parsedValues,
+      }
+      return result
+    }
+  }

package/src/reducers/setValue.ts

@@ -3,47 +3,38 @@ import { FormState } from '../FormState'
 import { SetValueAction } from '../actions/setValue'
 import { set } from '../util/set'
 import { FieldPath } from '../FieldPath'
-import { invert } from 'zod-invertible'
 
 export const createSetValueReducer = <T extends z.ZodTypeAny>({
   schema,
-  inverseSchema,
 }: {
   schema: T
-  inverseSchema: z.ZodType<z.input<T>, any, z.output<T>>
 }) =>
   function setValueReducer<Field extends FieldPath>(
     state: FormState<T>,
     action: SetValueAction<Field>
   ) {
-    const newValues = set(state.values, action.field.path, action.value)
+    const newValues = set(
+      state.values,
+      action.field.path,
+      action.value
+    ) as (typeof state)['values']
+    if (newValues === state.values) return state
     try {
-      const newRawValues = inverseSchema.parse(newValues)
-      schema.parse(newRawValues)
+      const newParsedValues = schema.parse(newValues)
       return {
         ...state,
         submitError: undefined,
         validationError: undefined,
-        rawValues: newRawValues,
         values: newValues,
+        parsedValues: newParsedValues,
       }
     } catch (error) {
-      const newRawParsed = invert(action.field.schema).safeParse(action.value)
-      const rawValues = newRawParsed.success
-        ? set(state.rawValues, action.field.path, newRawParsed.data)
-        : state.rawValues
-      const newParsed = schema.safeParse(rawValues)
-      const result = {
+      return {
         ...state,
         submitError: undefined,
-        validationError: !newRawParsed.success
-          ? newRawParsed.error
-          : newParsed.success
-          ? undefined
-          : newParsed.error,
-        rawValues,
-        values: newParsed.success ? newParsed.data : state.values,
+        validationError: error,
+        values: newValues,
+        parsedValues: undefined,
       }
-      return result
     }
   }

package/src/reducers/submitSucceeded.ts

@@ -11,7 +11,7 @@ export function submitSucceededReducer<T extends z.ZodTypeAny>(
     submitFailed: false,
     submitError: undefined,
     submitPromise: undefined,
+    initialParsedValues: state.submittedParsedValues,
     initialValues: state.submittedValues,
-    rawInitialValues: state.rawSubmittedValues,
   }
 }

package/src/reducers/util/updateRawArray.ts

@@ -1,14 +1,14 @@
 import z from 'zod'
 import { Reducer } from 'react'
-import { FieldPath, FieldPathForRawValue } from '../../FieldPath'
+import { FieldPath, FieldPathForValue } from '../../FieldPath'
 import { FormState } from '../../FormState'
 import { FormAction } from '../../FormAction'
 import { get } from '../../util/get'
-import { setRawValue } from '../../actions/setRawValue'
+import { setValue } from '../../actions/setValue'
 
 export function updateRawArray<
   T extends z.ZodTypeAny,
-  Field extends FieldPathForRawValue<any[]>
+  Field extends FieldPathForValue<any[]>
 >(
   reducer: Reducer<FormState<T>, FormAction<T>>,
   state: FormState<T>,
@@ -17,9 +17,9 @@ export function updateRawArray<
     array: z.input<Field['schema']> | undefined
   ) => z.input<Field['schema']> | undefined
 ) {
-  const oldValue = get(state.rawValues, field.path)
+  const oldValue = get(state.values, field.path)
   const newValue = updater(oldValue as any)
   return newValue === oldValue
     ? state
-    : reducer(state, setRawValue(field, newValue))
+    : reducer(state, setValue(field, newValue))
 }

package/src/useArrayField.ts

@@ -1,5 +1,5 @@
 import z from 'zod'
-import { BasePath, FieldPath, FieldPathForRawValue } from './FieldPath'
+import { BasePath, FieldPath, FieldPathForValue } from './FieldPath'
 import React from 'react'
 import { useFormContext } from './useFormContext'
 import { PathInSchema, PathstringInSchema } from './util/PathInSchema'
@@ -15,10 +15,11 @@ import {
   useFormSelector as untypedUseFormSelector,
 } from './useFormSelector'
 import { shallowEqual } from 'react-redux'
+import { setParsedValue } from './actions/setParsedValue'
 import { setValue } from './actions/setValue'
-import { setRawValue } from './actions/setRawValue'
 import { setMeta } from './actions/setMeta'
 import { FieldMeta } from './FormState'
+import { DeepPartial } from './util/DeepPartial'
 
 export type UseArrayFieldProps<Field extends FieldPath> = NonNullable<
   z.input<Field['schema']>
@@ -27,8 +28,8 @@ export type UseArrayFieldProps<Field extends FieldPath> = NonNullable<
       ReturnType<
         typeof bindActionsToField<
           typeof arrayActions & {
+            setParsedValue: typeof setParsedValue
             setValue: typeof setValue
-            setRawValue: typeof setRawValue
             setMeta: typeof setMeta
           }
         >
@@ -43,7 +44,7 @@ export type UseArrayFieldProps<Field extends FieldPath> = NonNullable<
   : { ERROR: 'not an array field' }
 
 export interface TypedUseArrayField<T extends z.ZodTypeAny> {
-  <Field extends FieldPathForRawValue<any[] | null | undefined>>(
+  <Field extends FieldPathForValue<any[] | null | undefined>>(
     field: Field
   ): UseArrayFieldProps<Field>
   <Path extends PathInSchema<T>>(path: Path): UseArrayFieldProps<
@@ -61,8 +62,8 @@ function useArrayFieldBase<Field extends FieldPath>(
 
   const {
     arrayActions,
+    setParsedValue,
     setValue,
-    setRawValue,
     setMeta,
     selectFormValues,
     selectFieldErrorMap,
@@ -78,20 +79,20 @@ function useArrayFieldBase<Field extends FieldPath>(
           [
             createStructuredSelector({
               value: ({ values }) =>
-                get(values, field.path) as z.output<T> | undefined,
-              rawValue: ({ rawValues }) =>
-                get(rawValues, field.path) as unknown,
+                get(values, field.path) as DeepPartial<z.input<T>> | undefined,
               initialValue: ({ initialValues }) =>
-                get(initialValues, field.path) as z.output<T> | undefined,
+                get(initialValues, field.path) as
+                  | DeepPartial<z.input<T>>
+                  | undefined,
             }),
           ],
-          ({ rawValue, value, initialValue }) => {
+          ({ value, initialValue }) => {
             const dirty = !isEqual(value, initialValue)
             const pristine = !dirty
             return {
               dirty,
               pristine,
-              length: Array.isArray(rawValue) ? rawValue.length : 0,
+              length: Array.isArray(value) ? value.length : 0,
             }
           }
         )
@@ -113,7 +114,7 @@ function useArrayFieldBase<Field extends FieldPath>(
   const boundActions = React.useMemo(
     () =>
       bindActionsToField(
-        { ...arrayActions, setValue, setRawValue, setMeta },
+        { ...arrayActions, setParsedValue, setValue, setMeta },
         field
       ),
     [field.pathstring]

package/src/useField.ts

@@ -3,8 +3,8 @@ import { BasePath, FieldPath } from './FieldPath'
 import { FieldMeta } from './FormState'
 import { get } from './util/get'
 import React from 'react'
+import { setParsedValue } from './actions/setParsedValue'
 import { setValue } from './actions/setValue'
-import { setRawValue } from './actions/setRawValue'
 import { setMeta } from './actions/setMeta'
 import {
   useFormSelector as untypedUseFormSelector,
@@ -19,19 +19,20 @@ import { parsePathstring } from './util/parsePathstring'
 import { SchemaAt } from './util/SchemaAt'
 import { maybeParse } from './util/maybeParse'
 import { bindActionsToField } from './util/bindActionsToField'
+import { DeepPartial } from './util/DeepPartial'
 
 export type UseFieldProps<Field extends FieldPath> = FieldMeta &
   ReturnType<
     typeof bindActionsToField<{
+      setParsedValue: typeof setParsedValue
       setValue: typeof setValue
-      setRawValue: typeof setRawValue
       setMeta: typeof setMeta
     }>
   > & {
-    value: z.output<Field['schema']> | undefined
-    rawValue: unknown
-    initialValue: z.output<Field['schema']> | undefined
-    rawInitialValue: unknown
+    parsedValue?: z.output<Field['schema']>
+    value?: DeepPartial<z.input<Field['schema']>>
+    initialParsedValue?: z.output<Field['schema']>
+    initialValue?: DeepPartial<z.input<Field['schema']>>
     error?: string
     dirty: boolean
     pristine: boolean
@@ -55,8 +56,8 @@ function useFieldBase<T extends z.ZodTypeAny, Field extends FieldPath>(
   type Schema = Field['schema']
 
   const {
+    setParsedValue,
     setValue,
-    setRawValue,
     setMeta,
     selectFormValues,
     selectFieldErrorMap,
@@ -71,29 +72,30 @@ function useFieldBase<T extends z.ZodTypeAny, Field extends FieldPath>(
         createSelector(
           [
             createStructuredSelector({
-              value: ({ values }) =>
-                get(values, field.path) as z.output<Schema> | undefined,
-              rawValue: ({ rawValues }) =>
-                get(rawValues, field.path) as unknown,
+              parsedValue: ({ parsedValues }) =>
+                get(parsedValues, field.path) as z.output<Schema> | undefined,
+              value: ({ values }) => get(values, field.path) as unknown,
+              initialParsedValue: ({ initialParsedValues }) =>
+                get(initialParsedValues, field.path) as
+                  | z.output<Schema>
+                  | undefined,
               initialValue: ({ initialValues }) =>
-                get(initialValues, field.path) as z.output<Schema> | undefined,
-              rawInitialValue: ({ rawInitialValues }) =>
-                get(rawInitialValues, field.path) as unknown,
+                get(initialValues, field.path) as unknown,
             }),
           ],
           ({
-            rawValue,
-            value = maybeParse(field.schema, rawValue),
-            rawInitialValue,
-            initialValue = maybeParse(field.schema, rawInitialValue),
+            value,
+            parsedValue = maybeParse(field.schema, value),
+            initialValue,
+            initialParsedValue = maybeParse(field.schema, initialValue),
           }) => {
             const dirty = !isEqual(value, initialValue)
             const pristine = !dirty
             return {
+              parsedValue,
               value,
-              rawValue,
+              initialParsedValue,
               initialValue,
-              rawInitialValue,
               dirty,
               pristine,
             }
@@ -103,7 +105,7 @@ function useFieldBase<T extends z.ZodTypeAny, Field extends FieldPath>(
     [field.pathstring]
   )
 
-  const values = useFormSelector(valuesSelector, shallowEqual)
+  const parsedValues = useFormSelector(valuesSelector, shallowEqual)
 
   const error = useFormSelector(
     (state) => selectFieldErrorMap(state)[field.pathstring]
@@ -112,21 +114,21 @@ function useFieldBase<T extends z.ZodTypeAny, Field extends FieldPath>(
   const submitFailed = useFormSelector((state) => state.submitFailed)
 
   const boundActions = React.useMemo(
-    () => bindActionsToField({ setValue, setRawValue, setMeta }, field),
+    () => bindActionsToField({ setParsedValue, setValue, setMeta }, field),
     [field.pathstring]
   )
 
   return React.useMemo(
     () => ({
       ...boundActions,
-      ...values,
+      ...parsedValues,
       visited: meta?.visited || false,
       touched: meta?.touched || submitFailed,
       error,
       valid: !error,
       invalid: Boolean(error),
     }),
-    [field.pathstring, values, meta, error, submitFailed]
+    [field.pathstring, parsedValues, meta, error, submitFailed]
   ) as any
 }