@tanstack/form-core 0.0.1

package/src/FormApi.ts

@@ -0,0 +1,424 @@
+import type { FormEvent } from 'react'
+import { Store } from '@tanstack/store'
+//
+import type { DeepKeys, DeepValue, Updater } from './utils'
+import { functionalUpdate, getBy, setBy } from './utils'
+import type { FieldApi, FieldMeta } from './FieldApi'
+
+export type FormOptions<TData> = {
+  defaultValues?: TData
+  defaultState?: Partial<FormState<TData>>
+  onSubmit?: (values: TData, formApi: FormApi<TData>) => Promise<any>
+  onInvalidSubmit?: (values: TData, formApi: FormApi<TData>) => void
+  validate?: (values: TData, formApi: FormApi<TData>) => Promise<any>
+  debugForm?: boolean
+  validatePristine?: boolean
+}
+
+export type FieldInfo<TFormData> = {
+  instances: Record<string, FieldApi<any, TFormData>>
+} & ValidationMeta
+
+export type ValidationMeta = {
+  validationCount?: number
+  validationPromise?: Promise<ValidationError>
+  validationResolve?: (error: ValidationError) => void
+  validationReject?: (error: unknown) => void
+}
+
+export type ValidationError = undefined | false | null | string
+
+export type FormState<TData> = {
+  values: TData
+  // Form Validation
+  isFormValidating: boolean
+  formValidationCount: number
+  isFormValid: boolean
+  formError?: ValidationError
+  // Fields
+  fieldMeta: Record<DeepKeys<TData>, FieldMeta>
+  isFieldsValidating: boolean
+  isFieldsValid: boolean
+  isSubmitting: boolean
+  // General
+  isTouched: boolean
+  isSubmitted: boolean
+  isValidating: boolean
+  isValid: boolean
+  canSubmit: boolean
+  submissionAttempts: number
+}
+
+export function getDefaultFormState<TData>(
+  defaultState: Partial<FormState<TData>>,
+): FormState<TData> {
+  return {
+    values: {} as any,
+    fieldMeta: {} as any,
+    canSubmit: true,
+    isFieldsValid: false,
+    isFieldsValidating: false,
+    isFormValid: false,
+    isFormValidating: false,
+    isSubmitted: false,
+    isSubmitting: false,
+    isTouched: false,
+    isValid: false,
+    isValidating: false,
+    submissionAttempts: 0,
+    formValidationCount: 0,
+    ...defaultState,
+  }
+}
+
+export class FormApi<TFormData> {
+  // // This carries the context for nested fields
+  options: FormOptions<TFormData> = {}
+  store!: Store<FormState<TFormData>>
+  // Do not use __state directly, as it is not reactive.
+  // Please use form.useStore() utility to subscribe to state
+  state!: FormState<TFormData>
+  fieldInfo: Record<DeepKeys<TFormData>, FieldInfo<TFormData>> = {} as any
+  fieldName?: string
+  validationMeta: ValidationMeta = {}
+
+  constructor(opts?: FormOptions<TFormData>) {
+    this.store = new Store<FormState<TFormData>>(
+      getDefaultFormState({
+        ...opts?.defaultState,
+        values: opts?.defaultValues ?? opts?.defaultState?.values,
+        isFormValid: !opts?.validate,
+      }),
+      {
+        onUpdate: (next) => {
+          // Computed state
+          const fieldMetaValues = Object.values(next.fieldMeta) as (
+            | FieldMeta
+            | undefined
+          )[]
+
+          const isFieldsValidating = fieldMetaValues.some(
+            (field) => field?.isValidating,
+          )
+
+          const isFieldsValid = !fieldMetaValues.some((field) => field?.error)
+
+          const isTouched = fieldMetaValues.some((field) => field?.isTouched)
+
+          const isValidating = isFieldsValidating || next.isFormValidating
+          const isFormValid = !next.formError
+          const isValid = isFieldsValid && isFormValid
+          const canSubmit =
+            (next.submissionAttempts === 0 && !isTouched) ||
+            (!isValidating && !next.isSubmitting && isValid)
+
+          next = {
+            ...next,
+            isFieldsValidating,
+            isFieldsValid,
+            isFormValid,
+            isValid,
+            canSubmit,
+            isTouched,
+          }
+
+          // Create a shortcut for the state
+          // Write it back to the store
+          this.store.state = next
+          this.state = next
+        },
+      },
+    )
+
+    this.state = this.store.state
+
+    this.update(opts || {})
+  }
+
+  update = (options: FormOptions<TFormData>) => {
+    this.store.batch(() => {
+      if (
+        options.defaultState &&
+        options.defaultState !== this.options.defaultState
+      ) {
+        this.store.setState((prev) => ({
+          ...prev,
+          ...options.defaultState,
+        }))
+      }
+
+      if (options.defaultValues !== this.options.defaultValues) {
+        this.store.setState((prev) => ({
+          ...prev,
+          values: options.defaultValues as TFormData,
+        }))
+      }
+    })
+
+    this.options = options
+  }
+
+  reset = () =>
+    this.store.setState(() => getDefaultFormState(this.options.defaultValues!))
+
+  validateAllFields = async () => {
+    const fieldValidationPromises: Promise<ValidationError>[] = [] as any
+
+    this.store.batch(() => {
+      void (Object.values(this.fieldInfo) as FieldInfo<any>[]).forEach(
+        (field) => {
+          Object.values(field.instances).forEach((instance) => {
+            // If any fields are not touched
+            if (!instance.state.meta.isTouched) {
+              // Mark them as touched
+              instance.setMeta((prev) => ({ ...prev, isTouched: true }))
+              // Validate the field
+              if (instance.options.validate) {
+                fieldValidationPromises.push(instance.validate())
+              }
+            }
+          })
+        },
+      )
+    })
+
+    return Promise.all(fieldValidationPromises)
+  }
+
+  validateForm = async () => {
+    const { validate } = this.options
+
+    if (!validate) {
+      return
+    }
+
+    // Use the formValidationCount for all field instances to
+    // track freshness of the validation
+    this.store.setState((prev) => ({
+      ...prev,
+      isValidating: true,
+      formValidationCount: prev.formValidationCount + 1,
+    }))
+
+    const formValidationCount = this.state.formValidationCount
+
+    const checkLatest = () =>
+      formValidationCount === this.state.formValidationCount
+
+    if (!this.validationMeta.validationPromise) {
+      this.validationMeta.validationPromise = new Promise((resolve, reject) => {
+        this.validationMeta.validationResolve = resolve
+        this.validationMeta.validationReject = reject
+      })
+    }
+
+    const doValidation = async () => {
+      try {
+        const error = await validate(this.state.values, this)
+
+        if (checkLatest()) {
+          this.store.setState((prev) => ({
+            ...prev,
+            isValidating: false,
+            error: error
+              ? typeof error === 'string'
+                ? error
+                : 'Invalid Form Values'
+              : null,
+          }))
+
+          this.validationMeta.validationResolve?.(error)
+        }
+      } catch (err) {
+        if (checkLatest()) {
+          this.validationMeta.validationReject?.(err)
+        }
+      } finally {
+        delete this.validationMeta.validationPromise
+      }
+    }
+
+    doValidation()
+
+    return this.validationMeta.validationPromise
+  }
+
+  handleSubmit = async (e: FormEvent & { __handled?: boolean }) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    // Check to see that the form and all fields have been touched
+    // If they have not, touch them all and run validation
+    // Run form validation
+    // Submit the form
+
+    this.store.setState((old) => ({
+      ...old,
+      // Submittion attempts mark the form as not submitted
+      isSubmitted: false,
+      // Count submission attempts
+      submissionAttempts: old.submissionAttempts + 1,
+    }))
+
+    // Don't let invalid forms submit
+    if (!this.state.canSubmit) return
+
+    this.store.setState((d) => ({ ...d, isSubmitting: true }))
+
+    const done = () => {
+      this.store.setState((prev) => ({ ...prev, isSubmitting: false }))
+    }
+
+    // Validate all fields
+    await this.validateAllFields()
+
+    // Fields are invalid, do not submit
+    if (!this.state.isFieldsValid) {
+      done()
+      this.options.onInvalidSubmit?.(this.state.values, this)
+      return
+    }
+
+    // Run validation for the form
+    await this.validateForm()
+
+    if (!this.state.isValid) {
+      done()
+      this.options.onInvalidSubmit?.(this.state.values, this)
+      return
+    }
+
+    try {
+      // Run the submit code
+      await this.options.onSubmit?.(this.state.values, this)
+
+      this.store.batch(() => {
+        this.store.setState((prev) => ({ ...prev, isSubmitted: true }))
+        done()
+      })
+    } catch (err) {
+      done()
+      throw err
+    }
+  }
+
+  getFieldValue = <TField extends DeepKeys<TFormData>>(
+    field: TField,
+  ): DeepValue<TFormData, TField> => getBy(this.state.values, field)
+
+  getFieldMeta = <TField extends DeepKeys<TFormData>>(
+    field: TField,
+  ): FieldMeta => {
+    return this.state.fieldMeta[field]
+  }
+
+  getFieldInfo = <TField extends DeepKeys<TFormData>>(field: TField) => {
+    return (this.fieldInfo[field] ||= {
+      instances: {},
+    })
+  }
+
+  setFieldMeta = <TField extends DeepKeys<TFormData>>(
+    field: TField,
+    updater: Updater<FieldMeta>,
+  ) => {
+    this.store.setState((prev) => {
+      return {
+        ...prev,
+        fieldMeta: {
+          ...prev.fieldMeta,
+          [field]: functionalUpdate(updater, prev.fieldMeta[field]),
+        },
+      }
+    })
+  }
+
+  setFieldValue = <TField extends DeepKeys<TFormData>>(
+    field: TField,
+    updater: Updater<DeepValue<TFormData, TField>>,
+    opts?: { touch?: boolean },
+  ) => {
+    const touch = opts?.touch ?? true
+
+    this.store.batch(() => {
+      this.store.setState((prev) => {
+        return {
+          ...prev,
+          values: setBy(prev.values, field, updater),
+        }
+      })
+
+      if (touch) {
+        this.setFieldMeta(field, (prev) => ({
+          ...prev,
+          isTouched: true,
+        }))
+      }
+    })
+  }
+
+  pushFieldValue = <TField extends DeepKeys<TFormData>>(
+    field: TField,
+    value: DeepValue<TFormData, TField>,
+    opts?: { touch?: boolean },
+  ) => {
+    return this.setFieldValue(
+      field,
+      (prev) => [...(Array.isArray(prev) ? prev : []), value] as any,
+      opts,
+    )
+  }
+
+  insertFieldValue = <TField extends DeepKeys<TFormData>>(
+    field: TField,
+    index: number,
+    value: DeepValue<TFormData, TField>,
+    opts?: { touch?: boolean },
+  ) => {
+    this.setFieldValue(
+      field,
+      (prev) => {
+        // invariant( // TODO: bring in invariant
+        //   Array.isArray(prev),
+        //   `Cannot insert a field value into a non-array field. Check that this field's existing value is an array: ${field}.`
+        // )
+        return (prev as DeepValue<TFormData, TField>[]).map((d, i) =>
+          i === index ? value : d,
+        ) as any
+      },
+      opts,
+    )
+  }
+
+  spliceFieldValue = <TField extends DeepKeys<TFormData>>(
+    field: TField,
+    index: number,
+    opts?: { touch?: boolean },
+  ) => {
+    this.setFieldValue(
+      field,
+      (prev) => {
+        // invariant( // TODO: bring in invariant
+        //   Array.isArray(prev),
+        //   `Cannot insert a field value into a non-array field. Check that this field's existing value is an array: ${field}.`
+        // )
+        return (prev as DeepValue<TFormData, TField>[]).filter(
+          (_d, i) => i !== index,
+        ) as any
+      },
+      opts,
+    )
+  }
+
+  swapFieldValues = <TField extends DeepKeys<TFormData>>(
+    field: TField,
+    index1: number,
+    index2: number,
+  ) => {
+    this.setFieldValue(field, (prev: any) => {
+      const prev1 = prev[index1]!
+      const prev2 = prev[index2]!
+      return setBy(setBy(prev, [index1], prev2), [index2], prev1)
+    })
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './FormApi'
+export * from './FieldApi'
+export * from './utils'

package/src/tests/test.test.tsx

@@ -0,0 +1,5 @@
+describe('tests', () => {
+  it('should test', () => {
+    expect(true).toBe(true)
+  })
+})

package/src/utils.ts

@@ -0,0 +1,144 @@
+export type UpdaterFn<TInput, TOutput = TInput> = (input: TInput) => TOutput
+
+export type Updater<TInput, TOutput = TInput> =
+  | TOutput
+  | UpdaterFn<TInput, TOutput>
+
+export function functionalUpdate<TInput, TOutput = TInput>(
+  updater: Updater<TInput, TOutput>,
+  input: TInput,
+): TOutput {
+  return typeof updater === 'function'
+    ? (updater as UpdaterFn<TInput, TOutput>)(input)
+    : updater
+}
+
+export function getBy(obj: any, path: any) {
+  if (!path) {
+    throw new Error('A path string is required to use getBy')
+  }
+  const pathArray = makePathArray(path)
+  const pathObj = pathArray
+  return pathObj.reduce((current: any, pathPart: any) => {
+    if (typeof current !== 'undefined') {
+      return current[pathPart]
+    }
+    return undefined
+  }, obj)
+}
+
+export function setBy(obj: any, _path: any, updater: Updater<any>) {
+  const path = makePathArray(_path)
+
+  function doSet(parent?: any): any {
+    if (!path.length) {
+      return functionalUpdate(updater, parent)
+    }
+
+    const key = path.shift()
+
+    if (typeof key === 'string') {
+      if (typeof parent === 'object') {
+        return {
+          ...parent,
+          [key]: doSet(parent[key]),
+        }
+      }
+      return {
+        [key]: doSet(),
+      }
+    }
+
+    if (typeof key === 'number') {
+      if (Array.isArray(parent)) {
+        const prefix = parent.slice(0, key)
+        return [
+          ...(prefix.length ? prefix : new Array(key)),
+          doSet(parent[key]),
+          ...parent.slice(key + 1),
+        ]
+      }
+      return [...new Array(key), doSet()]
+    }
+
+    throw new Error('Uh oh!')
+  }
+
+  return doSet(obj)
+}
+
+const reFindNumbers0 = /^(\d*)$/gm
+const reFindNumbers1 = /\.(\d*)\./gm
+const reFindNumbers2 = /^(\d*)\./gm
+const reFindNumbers3 = /\.(\d*$)/gm
+const reFindMultiplePeriods = /\.{2,}/gm
+
+function makePathArray(str: string) {
+  return str
+    .replace('[', '.')
+    .replace(']', '')
+    .replace(reFindNumbers0, '__int__$1')
+    .replace(reFindNumbers1, '.__int__$1.')
+    .replace(reFindNumbers2, '__int__$1.')
+    .replace(reFindNumbers3, '.__int__$1')
+    .replace(reFindMultiplePeriods, '.')
+    .split('.')
+    .map((d) => {
+      if (d.indexOf('__int__') === 0) {
+        return parseInt(d.substring('__int__'.length), 10)
+      }
+      return d
+    })
+}
+
+export type RequiredByKey<T, K extends keyof T> = Omit<T, K> &
+  Required<Pick<T, K>>
+
+type ComputeRange<
+  N extends number,
+  Result extends Array<unknown> = [],
+> = Result['length'] extends N
+  ? Result
+  : ComputeRange<N, [...Result, Result['length']]>
+type Index40 = ComputeRange<40>[number]
+
+// Is this type a tuple?
+type IsTuple<T> = T extends readonly any[] & { length: infer Length }
+  ? Length extends Index40
+    ? T
+    : never
+  : never
+
+// If this type is a tuple, what indices are allowed?
+type AllowedIndexes<
+  Tuple extends ReadonlyArray<any>,
+  Keys extends number = never,
+> = Tuple extends readonly []
+  ? Keys
+  : Tuple extends readonly [infer _, ...infer Tail]
+  ? AllowedIndexes<Tail, Keys | Tail['length']>
+  : Keys
+
+export type DeepKeys<T> = unknown extends T
+  ? keyof T
+  : object extends T
+  ? string
+  : T extends readonly any[] & IsTuple<T>
+  ? AllowedIndexes<T> | DeepKeysPrefix<T, AllowedIndexes<T>>
+  : T extends any[]
+  ? never & 'Dynamic length array indexing is not supported'
+  : T extends Date
+  ? never
+  : T extends object
+  ? (keyof T & string) | DeepKeysPrefix<T, keyof T>
+  : never
+
+type DeepKeysPrefix<T, TPrefix> = TPrefix extends keyof T & (number | string)
+  ? `${TPrefix}.${DeepKeys<T[TPrefix]> & string}`
+  : never
+
+export type DeepValue<T, TProp> = T extends Record<string | number, any>
+  ? TProp extends `${infer TBranch}.${infer TDeepProp}`
+    ? DeepValue<T[TBranch], TDeepProp>
+    : T[TProp & string]
+  : never