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

package/src/useField.ts

@@ -20,6 +20,8 @@ import { SchemaAt } from './util/SchemaAt'
 import { maybeParse } from './util/maybeParse'
 import { bindActionsToField } from './util/bindActionsToField'
 import { DeepPartial } from './util/DeepPartial'
+import { invert } from 'zod-invertible'
+import { SelectFormValues } from './createSelectFormValues'
 
 export type UseFieldProps<Field extends FieldPath> = FieldMeta &
   ReturnType<
@@ -45,16 +47,25 @@ export type UseFieldProps<Field extends FieldPath> = FieldMeta &
 
 export interface TypedUseField<T extends z.ZodTypeAny> {
   <Field extends FieldPath>(field: Field): UseFieldProps<Field>
-  <Path extends PathInSchema<T>>(path: Path): UseFieldProps<
-    FieldPath<SchemaAt<T, Path>>
-  >
-  <Pathstring extends PathstringInSchema<T>>(path: Pathstring): UseFieldProps<
-    FieldPath<SchemaAt<T, parsePathstring<Pathstring>>>
-  >
+  <Path extends PathInSchema<T>>(
+    path: Path
+  ): UseFieldProps<FieldPath<SchemaAt<T, Path>>>
+  <Pathstring extends PathstringInSchema<T>>(
+    path: Pathstring
+  ): UseFieldProps<FieldPath<SchemaAt<T, parsePathstring<Pathstring>>>>
 }
 
-function useFieldBase<T extends z.ZodTypeAny, Field extends FieldPath>(
-  field: Field
+export type UseFieldOptions = {
+  normalizeOnMount?: boolean
+}
+
+function useFieldBase<
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters
+  T extends z.ZodTypeAny,
+  Field extends FieldPath,
+>(
+  field: Field,
+  { normalizeOnMount = true }: UseFieldOptions = {}
 ): UseFieldProps<Field> {
   type Schema = Field['schema']
 
@@ -66,6 +77,8 @@ function useFieldBase<T extends z.ZodTypeAny, Field extends FieldPath>(
     selectFieldErrorMap,
   } = useFormContext<T>()
 
+  type FormValues = ReturnType<SelectFormValues<T>>
+
   const useFormSelector = untypedUseFormSelector as TypedUseFormSelector<T>
 
   const valuesSelector = React.useMemo(
@@ -75,24 +88,42 @@ function useFieldBase<T extends z.ZodTypeAny, Field extends FieldPath>(
         createSelector(
           [
             createStructuredSelector({
-              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 unknown,
+              parsedValue: createSelector(
+                (state: FormValues) => state.parsedValues,
+                (parsedValues) =>
+                  get(parsedValues, field.path) as z.output<Schema> | undefined
+              ),
+              value: createSelector(
+                (state: FormValues) => state.values,
+                (values) =>
+                  get(values, field.path) as
+                    | DeepPartial<z.input<Schema>>
+                    | undefined
+              ),
+              initialParsedValue: createSelector(
+                (state: FormValues) => state.initialParsedValues,
+                (initialParsedValues) =>
+                  get(initialParsedValues, field.path) as
+                    | z.output<Schema>
+                    | undefined
+              ),
+              initialValue: createSelector(
+                (state: FormValues) => state.initialValues,
+                (initialValues) =>
+                  get(initialValues, field.path) as
+                    | DeepPartial<z.input<Schema>>
+                    | undefined
+              ),
             }),
           ],
           ({
             value,
-            parsedValue = maybeParse(field.schema, value),
+            parsedValue = maybeParse<Schema>(field.schema, value),
             initialValue,
-            initialParsedValue = maybeParse(field.schema, initialValue),
+            initialParsedValue = maybeParse<Schema>(field.schema, initialValue),
           }) => {
-            const dirty = !isEqual(value, initialValue)
+            // console.error(new Error('selector'), { value, parsedValue })
+            const dirty = !isEqual(parsedValue, initialParsedValue)
             const pristine = !dirty
             return {
               parsedValue,
@@ -115,18 +146,44 @@ function useFieldBase<T extends z.ZodTypeAny, Field extends FieldPath>(
   )
   const meta = useFormSelector((state) => state.fieldMeta[field.pathstring])
   const submitFailed = useFormSelector((state) => state.submitFailed)
+  const initialized = useFormSelector((state) => state.initialized)
 
   const boundActions = React.useMemo(
     () => bindActionsToField({ setParsedValue, setValue, setMeta }, field),
     [field.pathstring]
   )
 
+  const info = React.useRef({ mounted: false, initialized })
+
+  let normalizedValue = parsedValues.value
+  if (
+    normalizeOnMount &&
+    (!info.current.mounted || (!info.current.initialized && initialized))
+  ) {
+    const parsed = field.schema.safeParse(parsedValues.value)
+    const formatted =
+      parsed.success ? invert(field.schema).safeParse(parsed.data) : undefined
+    if (formatted?.success && formatted.data !== parsedValues.value) {
+      normalizedValue = formatted.data
+    }
+  }
+  info.current.mounted = true
+  info.current.initialized = initialized
+
+  React.useEffect(() => {
+    if (normalizeOnMount && !isEqual(normalizedValue, parsedValues.value)) {
+      boundActions.setValue(normalizedValue)
+    }
+  }, [])
+
   return React.useMemo(
     () => ({
       ...boundActions,
       ...parsedValues,
+      value: normalizedValue,
       visited: meta?.visited || false,
       touched: meta?.touched || submitFailed,
+      customMeta: meta?.customMeta,
       error,
       valid: !error,
       invalid: Boolean(error),
@@ -136,29 +193,37 @@ function useFieldBase<T extends z.ZodTypeAny, Field extends FieldPath>(
 }
 
 export function useField<Field extends FieldPath>(
-  field: Field
+  field: Field,
+  options?: UseFieldOptions
 ): UseFieldProps<Field>
 export function useField<
   T extends z.ZodTypeAny = z.ZodBranded<
     z.ZodNever,
     'cast to TypedUseArray<T> to pass a path array'
   >,
-  Path extends PathInSchema<T> = any
->(field: Path): UseFieldProps<FieldPath<SchemaAt<T, Path>>>
+  Path extends PathInSchema<T> = any,
+>(
+  field: Path,
+  options?: UseFieldOptions
+): UseFieldProps<FieldPath<SchemaAt<T, Path>>>
 export function useField<
   T extends z.ZodTypeAny = z.ZodBranded<
     z.ZodNever,
     'cast to TypedUseArray<T> to pass a pathstring'
   >,
-  Pathstring extends PathstringInSchema<T> = any
+  Pathstring extends PathstringInSchema<T> = any,
 >(
-  field: Pathstring
+  field: Pathstring,
+
+  options?: UseFieldOptions
 ): UseFieldProps<FieldPath<SchemaAt<T, parsePathstring<Pathstring>>>>
 export function useField<T extends z.ZodTypeAny>(
-  field: FieldPath | BasePath | string
+  field: FieldPath | BasePath | string,
+  options?: UseFieldOptions
 ): UseFieldProps<any> | { ERROR: string } {
   const { root } = useFormContext<T>()
   return useFieldBase(
-    field instanceof FieldPath ? field : root.get(field as any)
+    field instanceof FieldPath ? field : root.get(field as any),
+    options
   )
 }

package/src/useFormContext.ts

@@ -6,9 +6,9 @@ export function useFormContext<
   T extends z.ZodTypeAny = z.ZodBranded<
     z.ZodNever,
     'you must pass a schema type'
-  >
+  >,
 >(): FormContextProps<T> {
-  const props: FormContextProps<T> = React.useContext(FormContext) as any
+  const props: FormContextProps<T> | null = React.useContext(FormContext) as any
   if (!props) {
     throw new Error(`must be used inside a <FormProvider>`)
   }

package/src/useFormDispatch.ts

@@ -4,13 +4,9 @@ import z from 'zod'
 import { FormAction } from './FormAction'
 import { Dispatch } from 'redux'
 
-export const useFormDispatch = createDispatchHook(
-  FormStateContext
-) as typeof useFormDispatchType
-
-declare function useFormDispatchType<
+export const useFormDispatch = createDispatchHook(FormStateContext) as <
   T extends z.ZodTypeAny = z.ZodBranded<
     z.ZodNever,
     'you must pass a schema type'
-  >
->(): Dispatch<FormAction<T>>
+  >,
+>() => Dispatch<FormAction<T>>

package/src/useHtmlField.ts

@@ -10,6 +10,7 @@ import { PathInSchema, PathstringInSchema } from './util/PathInSchema'
 import { parsePathstring } from './util/parsePathstring'
 import { SchemaAt } from './util/SchemaAt'
 import { DeepPartial } from './util/DeepPartial'
+import isEqual from 'fast-deep-equal'
 
 export type HtmlFieldInputProps = {
   name: string
@@ -26,10 +27,11 @@ export type ValidUseHtmlFieldProps<Field extends FieldPath> = {
   meta: UseFieldProps<Field>
 }
 
-export type UseHtmlFieldProps<Field extends FieldPath> = z.input<
-  Field['schema']
-> extends string | number | bigint | boolean | null | undefined
-  ? {
+export type UseHtmlFieldProps<Field extends FieldPath> =
+  z.input<Field['schema']> extends (
+    string | number | bigint | boolean | null | undefined
+  ) ?
+    {
       input: HtmlFieldInputProps
       meta: UseFieldProps<Field>
     }
@@ -39,14 +41,13 @@ export type UseHtmlFieldProps<Field extends FieldPath> = z.input<
 
 export type UseHtmlFieldOptions<
   Field,
-  Schema extends z.ZodTypeAny = Field extends FieldPath<infer S>
-    ? S
-    : z.ZodTypeAny
+  Schema extends z.ZodTypeAny = Field extends FieldPath<infer S> ? S
+  : z.ZodTypeAny,
 > = {
   field: Field
-  type: z.input<Schema> extends boolean | null | undefined
-    ? 'checkbox'
-    : Exclude<HTMLInputTypeAttribute, 'checkbox'>
+  type: z.input<Schema> extends boolean | null | undefined ? 'checkbox'
+  : Exclude<HTMLInputTypeAttribute, 'checkbox'>
+  normalizeOnMount?: boolean
   normalizeOnBlur?: boolean
 }
 
@@ -62,11 +63,16 @@ export interface TypedUseHtmlField<T extends z.ZodTypeAny> {
   ): UseHtmlFieldProps<FieldPath<SchemaAt<T, parsePathstring<Path>>>>
 }
 
+const customMetaSchema = z.object({
+  value: z.unknown(),
+  stringValue: z.string(),
+})
+
 function useHtmlFieldBase<Field extends FieldPath>(
   options: UseHtmlFieldOptions<Field, Field['schema']>
 ): UseHtmlFieldProps<Field> {
-  const { field, type, normalizeOnBlur = true } = options
-  const props = useField(field)
+  const { field, type, normalizeOnMount, normalizeOnBlur = true } = options
+  const props = useField(field, { normalizeOnMount })
   const {
     parsedValue,
     value,
@@ -78,16 +84,16 @@ function useHtmlFieldBase<Field extends FieldPath>(
     ...meta
   } = props
 
-  const { schema } = field
-
-  // tempValue is used for storing blank text when we've coerced the
-  // value to null or undefined, or storing numeric text when we've
-  // coerced the value to a number or bigint.
+  // we've coerced the value to null or undefined, or storing numeric
+  // text when we've coerced the value to a number or bigint.
   // This way we can set a value that will parse better in the form
   // state without interfering with the text the user is typing.
-  const [tempValue, setTempValue] = React.useState(
-    value as string | null | undefined
-  )
+  const customMeta = React.useMemo(() => {
+    const parsedCustomMeta = customMetaSchema.safeParse(meta.customMeta)
+    return parsedCustomMeta.success ? parsedCustomMeta.data : undefined
+  }, [meta.customMeta])
+
+  const { schema } = field
 
   const tryNumber = React.useMemo(() => acceptsNumber(schema), [schema])
   const tryBigint = React.useMemo(() => acceptsBigint(schema), [schema])
@@ -101,7 +107,7 @@ function useHtmlFieldBase<Field extends FieldPath>(
         tryBigint,
       })
       if (typeof value === 'string' && typeof normalized !== 'string') {
-        setTempValue(value)
+        setMeta({ customMeta: { stringValue: value, value: normalized } })
       }
       setValue(normalized)
     },
@@ -114,21 +120,20 @@ function useHtmlFieldBase<Field extends FieldPath>(
 
   const onBlur = React.useCallback(
     (e: React.FocusEvent) => {
-      let value = normalizeValue(getValue(e), {
-        schema,
-        tryNumber,
-        tryBigint,
-      })
       if (normalizeOnBlur) {
+        const value = normalizeValue(getValue(e), {
+          schema,
+          tryNumber,
+          tryBigint,
+        })
         const parsed = field.schema.safeParse(value)
-        const formatted = parsed.success
-          ? invert(field.schema).safeParse(parsed.data)
+        const formatted =
+          parsed.success ?
+            invert(field.schema).safeParse(parsed.data)
           : undefined
-        if (formatted?.success) value = formatted.data
-        setValue(value)
+        setValue(formatted?.success ? formatted.data : value)
       }
-      setTempValue(undefined)
-      setMeta({ visited: true, touched: true })
+      setMeta({ visited: true, touched: true, customMeta: undefined })
     },
     [getValue, setValue, schema]
   )
@@ -139,11 +144,12 @@ function useHtmlFieldBase<Field extends FieldPath>(
         name: field.pathstring,
         type,
         value:
-          typeof value === 'boolean'
-            ? String(value)
-            : typeof value === 'string'
-            ? value || tempValue || ''
-            : tempValue || (value == null ? '' : String(value) || ''),
+          typeof value === 'boolean' ? String(value)
+          : typeof value === 'string' ? value || customMeta?.stringValue || ''
+          : customMeta && isEqual(customMeta.value, value) ?
+            customMeta.stringValue
+          : value == null ? ''
+          : String(value) || '',
         ...(type === 'checkbox' && { checked: Boolean(value) }),
         onChange,
         onFocus,
@@ -160,7 +166,7 @@ function useHtmlFieldBase<Field extends FieldPath>(
         setMeta,
       },
     }),
-    [props, tempValue, onChange]
+    [props, customMeta, onChange]
   ) as any
 }
 
@@ -181,7 +187,7 @@ function normalizeBlank(schema: z.ZodTypeAny): any {
 function safeBigInt(value: string): bigint | undefined {
   try {
     return BigInt(value)
-  } catch (error) {
+  } catch {
     return undefined
   }
 }
@@ -219,7 +225,7 @@ export function useHtmlField<
     z.ZodNever,
     'cast to TypedUseHtmlField<T> to pass a path array'
   >,
-  Path extends PathInSchema<T> = any
+  Path extends PathInSchema<T> = any,
 >(
   options: UseHtmlFieldOptions<Path, SchemaAt<T, Path>>
 ): UseHtmlFieldProps<FieldPath<SchemaAt<T, Path>>>
@@ -228,7 +234,7 @@ export function useHtmlField<
     z.ZodNever,
     'cast to TypedUseHtmlField<T> to pass a pathstring'
   >,
-  Path extends PathstringInSchema<T> = any
+  Path extends PathstringInSchema<T> = any,
 >(
   options: UseHtmlFieldOptions<Path, SchemaAt<T, parsePathstring<Path>>>
 ): UseHtmlFieldProps<FieldPath<SchemaAt<T, parsePathstring<Path>>>>

package/src/useInitialize.ts

@@ -7,7 +7,7 @@ export function useInitialize<
   T extends z.ZodTypeAny = z.ZodBranded<
     z.ZodNever,
     'you must pass a schema type'
-  >
+  >,
 >(
   options: Omit<InitializeAction<T>, 'type'>,
   deps: DependencyList = [options.parsedValues, options.values]

package/src/util/DeepPartial.ts

@@ -1,3 +1,2 @@
-export type DeepPartial<T> = T extends object | any[]
-  ? { [K in keyof T]?: DeepPartial<T[K]> }
-  : T
+export type DeepPartial<T> =
+  T extends object | any[] ? { [K in keyof T]?: DeepPartial<T[K]> } : T

package/src/util/PathInType.ts

@@ -3,22 +3,22 @@ import { pathstring } from './pathstring'
 
 export type PathInType<T> = [] | SubPathInType<T>
 
-type SubPathInType<T> = 0 extends 1 & T
-  ? BasePath
-  : T extends
-      | string
-      | number
-      | boolean
-      | bigint
-      | symbol
-      | null
-      | undefined
-      | void
-      | never
-      | ((...args: any[]) => any)
-  ? []
-  : T extends readonly any[]
-  ? { [K in keyof T & number]-?: [K, ...PathInType<T[K]>] }[keyof T & number]
+type SubPathInType<T> =
+  0 extends 1 & T ? BasePath
+  : T extends (
+    | string
+    | number
+    | boolean
+    | bigint
+    | symbol
+    | null
+    | undefined
+    | void
+    | ((...args: any[]) => any)
+  ) ?
+    []
+  : T extends readonly any[] ?
+    { [K in keyof T & number]-?: [K, ...PathInType<T[K]>] }[keyof T & number]
   : {
       [K in keyof T]-?: K extends symbol ? never : [K, ...PathInType<T[K]>]
     }[keyof T]

package/src/util/SchemaAt.ts

@@ -2,67 +2,56 @@ import z from 'zod'
 
 type BasePath = (string | number)[]
 
-export type SchemaAt<T extends z.ZodTypeAny, Path> = 0 extends 1 & Path
-  ? z.ZodTypeAny
-  : 0 extends 1 & T
-  ? z.ZodTypeAny
-  : 0 extends 1 & z.input<T>
-  ? z.ZodTypeAny
-  : Path extends [infer Head, ...infer Tail extends BasePath]
-  ? T extends z.ZodLazy<infer U>
-    ? SchemaAt<U, Path>
-    : T extends z.ZodCatch<infer U>
-    ? SchemaAt<U, Path>
-    : T extends z.ZodBranded<infer U, any>
-    ? SchemaAt<U, Path>
-    : T extends z.ZodOptional<infer U>
-    ? SchemaAt<U, Path>
-    : T extends z.ZodDefault<infer U>
-    ? SchemaAt<U, Path>
-    : T extends z.ZodNullable<infer U>
-    ? SchemaAt<U, Path>
-    : T extends z.ZodUnion<infer Options>
-    ? SchemaAt<Options[number], Path>
-    : T extends z.ZodDiscriminatedUnion<any, infer Options>
-    ? SchemaAt<Options[number], Path>
-    : T extends z.ZodPipeline<infer In, any>
-    ? SchemaAt<In, Path>
-    : T extends z.ZodEffects<infer U>
-    ? SchemaAt<U, Path>
-    : T extends z.ZodReadonly<infer U>
-    ? SchemaAt<U, Path>
-    : T extends z.ZodRecord<infer Key, infer Value>
-    ? Head extends z.input<Key>
-      ? SchemaAt<Value, Tail>
+export type SchemaAt<T extends z.ZodTypeAny, Path> =
+  0 extends 1 & Path ? z.ZodTypeAny
+  : 0 extends 1 & T ? z.ZodTypeAny
+  : 0 extends 1 & z.input<T> ? z.ZodTypeAny
+  : Path extends [infer Head, ...infer Tail extends BasePath] ?
+    T extends z.ZodLazy<infer U> ? SchemaAt<U, Path>
+    : T extends z.ZodCatch<infer U> ? SchemaAt<U, Path>
+    : T extends z.ZodBranded<infer U, any> ? SchemaAt<U, Path>
+    : T extends z.ZodOptional<infer U> ? SchemaAt<U, Path>
+    : T extends z.ZodDefault<infer U> ? SchemaAt<U, Path>
+    : T extends z.ZodNullable<infer U> ? SchemaAt<U, Path>
+    : T extends z.ZodUnion<infer Options> ? SchemaAt<Options[number], Path>
+    : T extends z.ZodDiscriminatedUnion<any, infer Options> ?
+      SchemaAt<Options[number], Path>
+    : T extends z.ZodPipeline<infer In, any> ? SchemaAt<In, Path>
+    : T extends z.ZodEffects<infer U> ? SchemaAt<U, Path>
+    : T extends z.ZodReadonly<infer U> ? SchemaAt<U, Path>
+    : T extends z.ZodRecord<infer Key, infer Value> ?
+      Head extends z.input<Key> ?
+        SchemaAt<Value, Tail>
       : never
-    : T extends z.ZodMap<infer Key, infer Value>
-    ? Head extends z.input<Key>
-      ? SchemaAt<Value, Tail>
+    : T extends z.ZodMap<infer Key, infer Value> ?
+      Head extends z.input<Key> ?
+        SchemaAt<Value, Tail>
       : never
-    : T extends z.ZodObject<
+    : T extends (
+      z.ZodObject<
         infer Shape,
         infer UnknownKeys,
         infer Catchall extends z.ZodTypeAny
       >
-    ? Head extends keyof Shape
-      ? SchemaAt<Shape[Head], Tail>
-      : UnknownKeys extends 'passthrough'
-      ? SchemaAt<Catchall, Tail>
+    ) ?
+      Head extends keyof Shape ? SchemaAt<Shape[Head], Tail>
+      : UnknownKeys extends 'passthrough' ? SchemaAt<Catchall, Tail>
       : never
-    : T extends z.ZodTuple<
+    : T extends (
+      z.ZodTuple<
         infer Elements extends [z.ZodTypeAny, ...z.ZodTypeAny[]],
         infer Rest
       >
-    ? Head extends number & keyof Elements
-      ? SchemaAt<Elements[Head], Tail>
-      : Rest extends z.ZodTypeAny
-      ? Head extends number
-        ? SchemaAt<Rest, Tail>
+    ) ?
+      Head extends number & keyof Elements ? SchemaAt<Elements[Head], Tail>
+      : Rest extends z.ZodTypeAny ?
+        Head extends number ?
+          SchemaAt<Rest, Tail>
         : never
       : never
-    : T extends z.ZodArray<infer Element>
-    ? Head extends number
-      ? SchemaAt<Element, Tail>
+    : T extends z.ZodArray<infer Element> ?
+      Head extends number ?
+        SchemaAt<Element, Tail>
       : never
     : never
   : T

package/src/util/bindActionsToField.ts

@@ -4,22 +4,21 @@ export function bindActionsToField<
   Field extends FieldPath,
   Actions extends {
     [K in string]: (field: Field, ...rest: any[]) => any
-  }
+  },
 >(
   actions: Actions,
   field: Field
 ): {
   [K in keyof Actions]: Actions[K] extends (
-    field: Field,
-    ...rest: infer Rest
-  ) => infer Return
-    ? (...rest: Rest) => Return
-    : never
+    (field: Field, ...rest: infer Rest) => infer Return
+  ) ?
+    (...rest: Rest) => Return
+  : never
 } {
   return Object.fromEntries(
     Object.entries(actions).map(([key, action]: any) => [
       key,
       (...args: any[]) => action(field, ...args),
     ])
-  ) as any
+  )
 }