@tanstack/react-form 0.13.6 → 0.14.0

package/src/tests/useForm.test.tsx

@@ -1,8 +1,7 @@
-/// <reference lib="dom" />
-import '@testing-library/jest-dom'
+import * as React from 'react'
+import { describe, expect, it, vi } from 'vitest'
 import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import * as React from 'react'
 import { createFormFactory, useForm } from '../index'
 import { sleep } from './utils'
 
@@ -21,7 +20,7 @@ describe('useForm', () => {
       const form = formFactory.useForm()
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultValue={''}
@@ -36,7 +35,7 @@ describe('useForm', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -64,14 +63,14 @@ describe('useForm', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => {
               return <p>{field.state.value}</p>
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -96,7 +95,7 @@ describe('useForm', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => {
@@ -112,7 +111,7 @@ describe('useForm', () => {
           />
           <button onClick={form.handleSubmit}>Submit</button>
           {submittedData && <p>Submitted data: {submittedData.firstName}</p>}
-        </form.Provider>
+        </>
       )
     }
 
@@ -146,9 +145,9 @@ describe('useForm', () => {
       return (
         <>
           {mountForm ? (
-            <form.Provider>
+            <>
               <h1>{formMounted ? 'Form mounted' : 'Not mounted'}</h1>
-            </form.Provider>
+            </>
           ) : (
             <button onClick={() => setMountForm(true)}>Mount form</button>
           )}
@@ -172,6 +171,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChange() {
             return error
@@ -180,7 +183,7 @@ describe('useForm', () => {
       })
       const onChangeError = form.useStore((s) => s.errorMap.onChange)
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => (
@@ -194,7 +197,7 @@ describe('useForm', () => {
             )}
           />
           <p>{onChangeError}</p>
-        </form.Provider>
+        </>
       )
     }
 
@@ -217,6 +220,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChange: ({ value }) =>
             value.firstName === 'other' ? error : undefined,
@@ -225,7 +232,7 @@ describe('useForm', () => {
 
       const errors = form.useStore((s) => s.errors)
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => (
@@ -241,7 +248,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -262,6 +269,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChange: ({ value }) =>
             value.firstName === 'other' ? error : undefined,
@@ -269,7 +280,7 @@ describe('useForm', () => {
       })
       const errors = form.useStore((s) => s.errorMap)
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -286,7 +297,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -320,7 +331,7 @@ describe('useForm', () => {
 
       const errors = form.useStore((s) => s.errorMap)
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -338,7 +349,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
     const { getByTestId, getByText, queryByText } = render(<Comp />)
@@ -362,6 +373,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChangeAsync: async () => {
             await sleep(10)
@@ -371,7 +386,7 @@ describe('useForm', () => {
       })
       const errors = form.useStore((s) => s.errorMap)
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -388,7 +403,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -412,6 +427,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChangeAsync: async () => {
             await sleep(10)
@@ -426,7 +445,7 @@ describe('useForm', () => {
       const errors = form.useStore((s) => s.errorMap)
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -444,7 +463,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -472,6 +491,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChangeAsyncDebounceMs: 100,
           onChangeAsync: async () => {
@@ -484,7 +507,7 @@ describe('useForm', () => {
       const errors = form.useStore((s) => s.errors)
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -501,7 +524,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 

package/src/types.ts

@@ -1,7 +1,7 @@
 import type {
   DeepKeys,
   DeepValue,
-  FieldOptions,
+  FieldApiOptions,
   Validator,
 } from '@tanstack/form-core'
 
@@ -15,6 +15,12 @@ export type UseFieldOptions<
     | Validator<TParentData, unknown>
     | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
+> = FieldApiOptions<
+  TParentData,
+  TName,
+  TFieldValidator,
+  TFormValidator,
+  TData
+> & {
   mode?: 'value' | 'array'
 }

package/src/useField.tsx

@@ -1,9 +1,7 @@
-import React, { useRef, useState } from 'rehackt'
+import React, { useState } from 'rehackt'
 import { useStore } from '@tanstack/react-store'
 import { FieldApi, functionalUpdate } from '@tanstack/form-core'
-import { formContext, useFormContext } from './formContext'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
-import { useIsomorphicEffectOnce } from './useIsomorphicEffectOnce'
 import type { UseFieldOptions } from './types'
 import type {
   DeepKeys,
@@ -29,20 +27,20 @@ declare module '@tanstack/form-core' {
   }
 }
 
-export type UseField<TParentData> = <
+export type UseField<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> = <
   TName extends DeepKeys<TParentData>,
   TFieldValidator extends
     | Validator<DeepValue<TParentData, TName>, unknown>
     | undefined = undefined,
-  TFormValidator extends
-    | Validator<TParentData, unknown>
-    | undefined = undefined,
 >(
-  opts?: { name: Narrow<TName> } & UseFieldOptions<
-    TParentData,
-    TName,
-    TFieldValidator,
-    TFormValidator
+  opts: Omit<
+    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
+    'form'
   >,
 ) => FieldApi<
   TParentData,
@@ -64,23 +62,11 @@ export function useField<
 >(
   opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
 ): FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {
-  // Get the form API either manually or from context
-  const { formApi, parentFieldName } = useFormContext()
-
   const [fieldApi] = useState(() => {
-    const name = (
-      typeof opts.index === 'number'
-        ? [parentFieldName, opts.index, opts.name]
-        : [parentFieldName, opts.name]
-    )
-      .filter((d) => d !== undefined)
-      .join('.')
-
     const api = new FieldApi({
       ...opts,
-      form: formApi as never,
-      // TODO: Fix typings to include `index` and `parentFieldName`, if present
-      name: name as typeof opts.name as never,
+      form: opts.form,
+      name: opts.name,
     })
 
     api.Field = Field as never
@@ -88,12 +74,14 @@ export function useField<
     return api
   })
 
+  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])
+
   /**
    * 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.
    */
   useIsomorphicLayoutEffect(() => {
-    fieldApi.update({ ...opts, form: formApi } as never)
+    fieldApi.update(opts)
   })
 
   useStore(
@@ -104,19 +92,6 @@ export function useField<
         }
       : undefined,
   )
-  const unmountFn = useRef<(() => void) | null>(null)
-
-  useIsomorphicEffectOnce(() => {
-    return () => {
-      unmountFn.current?.()
-    }
-  })
-
-  // We have to mount it right as soon as it renders, otherwise we get:
-  // https://github.com/TanStack/form/issues/523
-  if (!unmountFn.current) {
-    unmountFn.current = fieldApi.mount()
-  }
 
   return fieldApi as never
 }
@@ -141,19 +116,7 @@ type FieldComponentProps<
       TData
     >,
   ) => any
-} & (TParentData extends any[]
-  ? {
-      name?: TName
-      index: number
-    }
-  : {
-      name: TName
-      index?: never
-    }) &
-  Omit<
-    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
-    'name' | 'index'
-  >
+} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>
 
 export type FieldComponent<
   TParentData,
@@ -169,12 +132,15 @@ export type FieldComponent<
 >({
   children,
   ...fieldOptions
-}: FieldComponentProps<
-  TParentData,
-  TName,
-  TFieldValidator,
-  TFormValidator,
-  TData
+}: Omit<
+  FieldComponentProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+  'form'
 >) => any
 
 export function Field<
@@ -196,13 +162,5 @@ export function Field<
 } & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) {
   const fieldApi = useField(fieldOptions as any)
 
-  return (
-    <formContext.Provider
-      value={{
-        formApi: fieldApi.form as never,
-        parentFieldName: fieldApi.name,
-      }}
-      children={functionalUpdate(children, fieldApi as any)}
-    />
-  )
+  return <>{functionalUpdate(children, fieldApi as any)}</>
 }

package/src/useForm.tsx

@@ -5,23 +5,31 @@ import React, {
   type ReactNode,
   useState,
 } from 'rehackt'
-import { Field, useField } from './useField'
-import { formContext } from './formContext'
+import { Field, type FieldComponent, type UseField, useField } from './useField'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type { NoInfer } from '@tanstack/react-store'
 import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
-import type { FieldComponent, UseField } from './useField'
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
   interface FormApi<TFormData, TFormValidator> {
-    Provider: (props: PropsWithChildren) => JSX.Element
     Field: FieldComponent<TFormData, TFormValidator>
-    useField: UseField<TFormData>
+    useField: UseField<TFormData, TFormValidator>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
     ) => TSelected
     Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+      /**
+      TypeScript versions <=5.0.4 have a bug that prevents
+      the type of the `TSelected` generic from being inferred
+      from the return type of this method.
+
+      In these versions, `TSelected` will fall back to the default
+      type (or `unknown` if that's not defined).
+
+      @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
+      @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
+      */
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
       children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode
     }) => JSX.Element
@@ -35,17 +43,12 @@ export function useForm<
   opts?: FormOptions<TFormData, TFormValidator>,
 ): FormApi<TFormData, TFormValidator> {
   const [formApi] = useState(() => {
-    // @ts-ignore
     const api = new FormApi<TFormData, TFormValidator>(opts)
-
-    api.Provider = function Provider(props) {
-      useIsomorphicLayoutEffect(api.mount, [])
-      return (
-        <formContext.Provider {...props} value={{ formApi: api as never }} />
-      )
+    api.Field = function APIField(props) {
+      return <Field {...props} form={api} />
     }
-    api.Field = Field as any
-    api.useField = useField as any
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    api.useField = (props) => useField({ ...props, form: api })
     api.useStore = (
       // @ts-ignore
       selector,
@@ -67,6 +70,8 @@ export function useForm<
     return api
   })
 
+  useIsomorphicLayoutEffect(formApi.mount, [])
+
   formApi.useStore((state) => state.isSubmitting)
 
   /**

package/dist/cjs/formContext.cjs

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const rehackt = require("rehackt");
-const formContext = rehackt.createContext(null);
-function useFormContext() {
-  const formApi = rehackt.useContext(formContext);
-  if (!formApi) {
-    throw new Error(`You are trying to use the form API outside of a form!`);
-  }
-  return formApi;
-}
-exports.formContext = formContext;
-exports.useFormContext = useFormContext;
-//# sourceMappingURL=formContext.cjs.map

package/dist/cjs/formContext.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"formContext.cjs","sources":["../../src/formContext.ts"],"sourcesContent":["import { createContext, useContext } from 'rehackt'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\nexport const formContext = createContext<{\n  formApi: FormApi<any, Validator<any, unknown> | undefined>\n  parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n  const formApi = useContext(formContext)\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n"],"names":["createContext","useContext"],"mappings":";;;AAGa,MAAA,cAAcA,sBAGjB,IAAK;AAER,SAAS,iBAAiB;AACzB,QAAA,UAAUC,mBAAW,WAAW;AAEtC,MAAI,CAAC,SAAS;AACN,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEO,SAAA;AACT;;;"}

package/dist/cjs/formContext.d.cts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import type { FormApi, Validator } from '@tanstack/form-core';
-export declare const formContext: import("react").Context<{
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string | undefined;
-} | null>;
-export declare function useFormContext(): {
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string | undefined;
-};

package/dist/cjs/useIsomorphicEffectOnce.cjs

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const rehackt = require("rehackt");
-const useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs");
-const useIsomorphicEffectOnce = (effect) => {
-  const destroyFunc = rehackt.useRef();
-  const effectCalled = rehackt.useRef(false);
-  const renderAfterCalled = rehackt.useRef(false);
-  const [val, setVal] = rehackt.useState(0);
-  if (effectCalled.current) {
-    renderAfterCalled.current = true;
-  }
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    if (!effectCalled.current) {
-      destroyFunc.current = effect();
-      effectCalled.current = true;
-    }
-    setVal((v) => v + 1);
-    return () => {
-      if (!renderAfterCalled.current) {
-        return;
-      }
-      if (destroyFunc.current) {
-        destroyFunc.current();
-      }
-    };
-  }, []);
-};
-exports.useIsomorphicEffectOnce = useIsomorphicEffectOnce;
-//# sourceMappingURL=useIsomorphicEffectOnce.cjs.map

package/dist/cjs/useIsomorphicEffectOnce.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIsomorphicEffectOnce.cjs","sources":["../../src/useIsomorphicEffectOnce.ts"],"sourcesContent":["import { useRef, useState } from 'rehackt'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { EffectCallback } from 'rehackt'\n\n/**\n * This hook handles StrictMode and prod mode\n */\nexport const useIsomorphicEffectOnce = (effect: EffectCallback) => {\n  const destroyFunc = useRef<void | (() => void)>()\n  const effectCalled = useRef(false)\n  const renderAfterCalled = useRef(false)\n  const [val, setVal] = useState(0)\n\n  if (effectCalled.current) {\n    renderAfterCalled.current = true\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    // only execute the effect first time around\n    if (!effectCalled.current) {\n      destroyFunc.current = effect()\n      effectCalled.current = true\n    }\n\n    // this forces one render after the effect is run\n    setVal((v) => v + 1)\n\n    return () => {\n      // if the comp didn't render since the useEffect was called,\n      // we know it's the dummy React cycle\n      if (!renderAfterCalled.current) {\n        return\n      }\n      if (destroyFunc.current) {\n        destroyFunc.current()\n      }\n    }\n  }, [])\n}\n"],"names":["useRef","useState","useIsomorphicLayoutEffect"],"mappings":";;;;AAOa,MAAA,0BAA0B,CAAC,WAA2B;AACjE,QAAM,cAAcA,QAAAA;AACd,QAAA,eAAeA,eAAO,KAAK;AAC3B,QAAA,oBAAoBA,eAAO,KAAK;AACtC,QAAM,CAAC,KAAK,MAAM,IAAIC,iBAAS,CAAC;AAEhC,MAAI,aAAa,SAAS;AACxB,sBAAkB,UAAU;AAAA,EAC9B;AAEAC,4BAAAA,0BAA0B,MAAM;AAE1B,QAAA,CAAC,aAAa,SAAS;AACzB,kBAAY,UAAU;AACtB,mBAAa,UAAU;AAAA,IACzB;AAGO,WAAA,CAAC,MAAM,IAAI,CAAC;AAEnB,WAAO,MAAM;AAGP,UAAA,CAAC,kBAAkB,SAAS;AAC9B;AAAA,MACF;AACA,UAAI,YAAY,SAAS;AACvB,oBAAY,QAAQ;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAE,CAAA;AACP;;"}

package/dist/cjs/useIsomorphicEffectOnce.d.cts

@@ -1,5 +0,0 @@
-import type { EffectCallback } from 'rehackt';
-/**
- * This hook handles StrictMode and prod mode
- */
-export declare const useIsomorphicEffectOnce: (effect: EffectCallback) => void;

package/dist/esm/formContext.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import type { FormApi, Validator } from '@tanstack/form-core';
-export declare const formContext: import("react").Context<{
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string | undefined;
-} | null>;
-export declare function useFormContext(): {
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string | undefined;
-};

package/dist/esm/formContext.js

@@ -1,14 +0,0 @@
-import { createContext, useContext } from "rehackt";
-const formContext = createContext(null);
-function useFormContext() {
-  const formApi = useContext(formContext);
-  if (!formApi) {
-    throw new Error(`You are trying to use the form API outside of a form!`);
-  }
-  return formApi;
-}
-export {
-  formContext,
-  useFormContext
-};
-//# sourceMappingURL=formContext.js.map

package/dist/esm/formContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"formContext.js","sources":["../../src/formContext.ts"],"sourcesContent":["import { createContext, useContext } from 'rehackt'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\nexport const formContext = createContext<{\n  formApi: FormApi<any, Validator<any, unknown> | undefined>\n  parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n  const formApi = useContext(formContext)\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n"],"names":[],"mappings":";AAGa,MAAA,cAAc,cAGjB,IAAK;AAER,SAAS,iBAAiB;AACzB,QAAA,UAAU,WAAW,WAAW;AAEtC,MAAI,CAAC,SAAS;AACN,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEO,SAAA;AACT;"}

package/dist/esm/useIsomorphicEffectOnce.d.ts

@@ -1,5 +0,0 @@
-import type { EffectCallback } from 'rehackt';
-/**
- * This hook handles StrictMode and prod mode
- */
-export declare const useIsomorphicEffectOnce: (effect: EffectCallback) => void;

package/dist/esm/useIsomorphicEffectOnce.js

@@ -1,30 +0,0 @@
-import { useRef, useState } from "rehackt";
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
-const useIsomorphicEffectOnce = (effect) => {
-  const destroyFunc = useRef();
-  const effectCalled = useRef(false);
-  const renderAfterCalled = useRef(false);
-  const [val, setVal] = useState(0);
-  if (effectCalled.current) {
-    renderAfterCalled.current = true;
-  }
-  useIsomorphicLayoutEffect(() => {
-    if (!effectCalled.current) {
-      destroyFunc.current = effect();
-      effectCalled.current = true;
-    }
-    setVal((v) => v + 1);
-    return () => {
-      if (!renderAfterCalled.current) {
-        return;
-      }
-      if (destroyFunc.current) {
-        destroyFunc.current();
-      }
-    };
-  }, []);
-};
-export {
-  useIsomorphicEffectOnce
-};
-//# sourceMappingURL=useIsomorphicEffectOnce.js.map

package/dist/esm/useIsomorphicEffectOnce.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIsomorphicEffectOnce.js","sources":["../../src/useIsomorphicEffectOnce.ts"],"sourcesContent":["import { useRef, useState } from 'rehackt'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { EffectCallback } from 'rehackt'\n\n/**\n * This hook handles StrictMode and prod mode\n */\nexport const useIsomorphicEffectOnce = (effect: EffectCallback) => {\n  const destroyFunc = useRef<void | (() => void)>()\n  const effectCalled = useRef(false)\n  const renderAfterCalled = useRef(false)\n  const [val, setVal] = useState(0)\n\n  if (effectCalled.current) {\n    renderAfterCalled.current = true\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    // only execute the effect first time around\n    if (!effectCalled.current) {\n      destroyFunc.current = effect()\n      effectCalled.current = true\n    }\n\n    // this forces one render after the effect is run\n    setVal((v) => v + 1)\n\n    return () => {\n      // if the comp didn't render since the useEffect was called,\n      // we know it's the dummy React cycle\n      if (!renderAfterCalled.current) {\n        return\n      }\n      if (destroyFunc.current) {\n        destroyFunc.current()\n      }\n    }\n  }, [])\n}\n"],"names":[],"mappings":";;AAOa,MAAA,0BAA0B,CAAC,WAA2B;AACjE,QAAM,cAAc;AACd,QAAA,eAAe,OAAO,KAAK;AAC3B,QAAA,oBAAoB,OAAO,KAAK;AACtC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,MAAI,aAAa,SAAS;AACxB,sBAAkB,UAAU;AAAA,EAC9B;AAEA,4BAA0B,MAAM;AAE1B,QAAA,CAAC,aAAa,SAAS;AACzB,kBAAY,UAAU;AACtB,mBAAa,UAAU;AAAA,IACzB;AAGO,WAAA,CAAC,MAAM,IAAI,CAAC;AAEnB,WAAO,MAAM;AAGP,UAAA,CAAC,kBAAkB,SAAS;AAC9B;AAAA,MACF;AACA,UAAI,YAAY,SAAS;AACvB,oBAAY,QAAQ;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAE,CAAA;AACP;"}

package/src/formContext.ts

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