@tanstack/solid-form 0.6.0

package/src/createField.tsx

@@ -0,0 +1,196 @@
+import { FieldApi } from '@tanstack/form-core'
+import {
+  createComponent,
+  createComputed,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+} from 'solid-js'
+import { formContext, useFormContext } from './formContext'
+
+import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'
+import type { JSXElement } from 'solid-js'
+import type { CreateFieldOptions } from './types'
+
+declare module '@tanstack/form-core' {
+  // eslint-disable-next-line no-shadow
+  interface FieldApi<
+    TParentData,
+    TName extends DeepKeys<TParentData>,
+    ValidatorType,
+    FormValidator,
+    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+  > {
+    Field: FieldComponent<TData, FormValidator>
+  }
+}
+
+export type CreateField<TParentData> = <
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  FormValidator,
+>(
+  opts: () => { name: Narrow<TName> } & CreateFieldOptions<
+    TParentData,
+    TName,
+    ValidatorType,
+    FormValidator
+  >,
+) => () => FieldApi<
+  TParentData,
+  TName,
+  ValidatorType,
+  FormValidator,
+  DeepValue<TParentData, TName>
+>
+
+// ugly way to trick solid into triggering updates for changes on the fieldApi
+function makeFieldReactive<FieldApiT extends FieldApi<any, any, any, any>>(
+  fieldApi: FieldApiT,
+): () => FieldApiT {
+  const [flag, setFlag] = createSignal(false)
+  const fieldApiMemo = createMemo(() => [flag(), fieldApi] as const)
+  const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f))
+  onCleanup(unsubscribeStore)
+  return () => fieldApiMemo()[1]
+}
+
+export function createField<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  FormValidator,
+>(
+  opts: () => CreateFieldOptions<
+    TParentData,
+    TName,
+    ValidatorType,
+    FormValidator
+  >,
+): () => FieldApi<
+  TParentData,
+  TName,
+  ValidatorType,
+  FormValidator
+  // Omit<typeof opts, 'onMount'> & {
+  //   form: FormApi<TParentData>
+  // }
+> {
+  // Get the form API either manually or from context
+  const { formApi, parentFieldName } = useFormContext()
+
+  const options = opts()
+  const name = (
+    typeof options.index === 'number'
+      ? [parentFieldName, options.index, options.name]
+      : [parentFieldName, options.name]
+  )
+    .filter((d) => d !== undefined)
+    .join('.')
+
+  const fieldApi = new FieldApi({
+    ...options,
+    form: formApi,
+    name: name as typeof options.name,
+  })
+  fieldApi.Field = Field as never
+
+  /**
+   * fieldApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   *
+   * createComputed to make sure this effect runs before render effects
+   */
+  createComputed(() => fieldApi.update({ ...opts(), form: formApi }))
+
+  // Instantiates field meta and removes it when unrendered
+  onMount(() => onCleanup(fieldApi.mount()))
+
+  return makeFieldReactive(fieldApi)
+}
+
+type FieldComponentProps<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  FormValidator,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = {
+  children: (
+    fieldApi: () => FieldApi<
+      TParentData,
+      TName,
+      ValidatorType,
+      FormValidator,
+      TData
+    >,
+  ) => JSXElement
+} & (TParentData extends any[]
+  ? {
+      name?: TName
+      index: number
+    }
+  : {
+      name: TName
+      index?: never
+    }) &
+  Omit<
+    CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>,
+    'name' | 'index'
+  >
+
+export type FieldComponent<TParentData, FormValidator> = <
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>({
+  children,
+  ...fieldOptions
+}: FieldComponentProps<
+  TParentData,
+  TName,
+  ValidatorType,
+  FormValidator,
+  TData
+>) => JSXElement
+
+export function Field<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  FormValidator,
+>(
+  props: {
+    children: (
+      fieldApi: () => FieldApi<
+        TParentData,
+        TName,
+        ValidatorType,
+        FormValidator
+      >,
+    ) => JSXElement
+  } & CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>,
+) {
+  const fieldApi = createField<
+    TParentData,
+    TName,
+    ValidatorType,
+    FormValidator
+  >(() => {
+    const { children, ...fieldOptions } = props
+    return fieldOptions
+  })
+
+  return (
+    <formContext.Provider
+      value={{
+        formApi: fieldApi().form,
+        parentFieldName: String(fieldApi().name),
+      }}
+    >
+      {/* createComponent to make sure the signals in the children component are not tracked */}
+      {createComponent(() => props.children(fieldApi), {})}
+    </formContext.Provider>
+  )
+}

package/src/createForm.tsx

@@ -0,0 +1,53 @@
+import type { FormOptions, FormState } from '@tanstack/form-core'
+import { FormApi, functionalUpdate } from '@tanstack/form-core'
+import { createComputed, type JSXElement } from 'solid-js'
+import { useStore } from '@tanstack/solid-store'
+import {
+  Field,
+  createField,
+  type CreateField,
+  type FieldComponent,
+} from './createField'
+import { formContext } from './formContext'
+
+type NoInfer<T> = [T][T extends any ? 0 : never]
+
+declare module '@tanstack/form-core' {
+  // eslint-disable-next-line no-shadow
+  interface FormApi<TFormData, ValidatorType> {
+    Provider: (props: { children: any }) => any
+    Field: FieldComponent<TFormData, ValidatorType>
+    createField: CreateField<TFormData>
+    useStore: <TSelected = NoInfer<FormState<TFormData>>>(
+      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
+    ) => () => TSelected
+    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
+      children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement
+    }) => any
+  }
+}
+
+export function createForm<TData, FormValidator>(
+  opts?: () => FormOptions<TData, FormValidator>,
+): FormApi<TData, FormValidator> {
+  const options = opts?.()
+  const formApi = new FormApi<TData, FormValidator>(options)
+
+  formApi.Provider = function Provider(props) {
+    return <formContext.Provider {...props} value={{ formApi: formApi }} />
+  }
+  formApi.Field = Field as any
+  formApi.createField = createField as CreateField<TData>
+  formApi.useStore = (selector) => useStore(formApi.store, selector)
+  formApi.Subscribe = (props) =>
+    functionalUpdate(props.children, useStore(formApi.store, props.selector))
+
+  /**
+   * formApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  createComputed(() => formApi.update(opts?.()))
+
+  return formApi
+}

package/src/createFormFactory.ts

@@ -0,0 +1,31 @@
+import type { FormApi, FormOptions } from '@tanstack/form-core'
+
+import {
+  type CreateField,
+  type FieldComponent,
+  Field,
+  createField,
+} from './createField'
+import { createForm } from './createForm'
+import { mergeProps } from 'solid-js'
+
+export type FormFactory<TFormData, FormValidator> = {
+  createForm: (
+    opts?: () => FormOptions<TFormData, FormValidator>,
+  ) => FormApi<TFormData, FormValidator>
+  createField: CreateField<TFormData>
+  Field: FieldComponent<TFormData, FormValidator>
+}
+
+export function createFormFactory<TFormData, FormValidator>(
+  defaultOpts?: () => FormOptions<TFormData, FormValidator>,
+): FormFactory<TFormData, FormValidator> {
+  return {
+    createForm: (opts) =>
+      createForm<TFormData, FormValidator>(() =>
+        mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {}),
+      ),
+    createField,
+    Field: Field as never,
+  }
+}

package/src/formContext.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'solid-js'
+import type { FormApi } from '@tanstack/form-core'
+
+type FormContextType =
+  | undefined
+  | {
+      formApi: FormApi<any, any>
+      parentFieldName?: string
+    }
+
+export const formContext = createContext<FormContextType>(undefined)
+
+export function useFormContext() {
+  const formApi: FormContextType = useContext(formContext)
+
+  if (!formApi)
+    throw new Error(`You are trying to use the form API outside of a form!`)
+
+  return formApi
+}

package/src/index.ts

@@ -0,0 +1,27 @@
+export type {
+  DeepKeys,
+  DeepValue,
+  FieldApiOptions,
+  FieldInfo,
+  FieldMeta,
+  FieldOptions,
+  FieldState,
+  FormOptions,
+  FormState,
+  RequiredByKey,
+  Updater,
+  UpdaterFn,
+  ValidationCause,
+  ValidationError,
+  ValidationMeta,
+} from '@tanstack/form-core'
+
+export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core'
+
+export { createForm } from './createForm'
+
+export type { CreateField, FieldComponent } from './createField'
+export { createField, Field } from './createField'
+
+export type { FormFactory } from './createFormFactory'
+export { createFormFactory } from './createFormFactory'

package/src/tests/createField.test-d.tsx

@@ -0,0 +1,68 @@
+import { assertType } from 'vitest'
+import { createForm } from '../createForm'
+
+it('should type state.value properly', () => {
+  function Comp() {
+    const form = createForm(
+      () =>
+        ({
+          defaultValues: {
+            firstName: 'test',
+            age: 84,
+          },
+        }) as const,
+    )
+
+    return (
+      <form.Provider>
+        <form.Field
+          name="firstName"
+          children={(field) => {
+            assertType<'test'>(field().state.value)
+          }}
+        />
+        <form.Field
+          name="age"
+          children={(field) => {
+            assertType<84>(field().state.value)
+          }}
+        />
+      </form.Provider>
+    )
+  }
+})
+
+it('should type onChange properly', () => {
+  function Comp() {
+    const form = createForm(
+      () =>
+        ({
+          defaultValues: {
+            firstName: 'test',
+            age: 84,
+          },
+        }) as const,
+    )
+
+    return (
+      <form.Provider>
+        <form.Field
+          name="firstName"
+          onChange={(val) => {
+            assertType<'test'>(val)
+            return null
+          }}
+          children={(field) => null}
+        />
+        <form.Field
+          name="age"
+          onChange={(val) => {
+            assertType<84>(val)
+            return null
+          }}
+          children={(field) => null}
+        />
+      </form.Provider>
+    )
+  }
+})