@tanstack/react-form - npm Package Compare versions

Comparing version 0.13.7 to 0.14.0

dist/esm/createFormFactory.d.ts

@@ -0,8 +1,8 @@
+import { Field, useField } from './useField.js';
 import type { ValidateFormData } from './validateFormData.js';
-import type { FieldComponent, UseField } from './useField.js';
 import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
 export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
     useForm: (opts?: FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
-    useField: UseField<TFormData>;
-    Field: FieldComponent<TFormData, TFormValidator>;
+    useField: typeof useField;
+    Field: typeof Field;
     validateFormData: ValidateFormData<TFormData, TFormValidator>;
@@ -9,0 +9,0 @@ initialFormState: Partial<FormApi<TFormData, TFormValidator>['state']>;

dist/esm/types.d.ts

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

dist/esm/useField.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
 import type { UseFieldOptions } from './types.js';
-import type { DeepKeys, DeepValue, Narrow, Validator } from '@tanstack/form-core';
+import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
 declare module '@tanstack/form-core' {
@@ -12,16 +12,8 @@ interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
 }
-export type UseField<TParentData> = <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>) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>;
+export type UseField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined>(opts: Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'form'>) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>;
 export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>): FieldApi<TParentData, TName, TFieldValidator, TFormValidator>;
 type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = {
     children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) => any;
-} & (TParentData extends any[] ? {
-    name?: TName;
-    index: number;
-} : {
-    name: TName;
-    index?: never;
-}) & Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'name' | 'index'>;
-export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) => any;
+} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>;
+export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => any;
 export declare function Field<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>({ children, ...fieldOptions }: {
@@ -28,0 +20,0 @@ children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>) => any;

dist/esm/useField.js

@@ -1,16 +0,12 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "rehackt";
 import { useStore } from "@tanstack/react-store";
 import { FieldApi, functionalUpdate } from "@tanstack/form-core";
-import { useFormContext, formContext } from "./formContext.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 function useField(opts) {
-  const { formApi, parentFieldName } = useFormContext();
   const [fieldApi] = useState(() => {
-    const name = (typeof opts.index === "number" ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter((d) => d !== void 0).join(".");
     const api = new FieldApi({
       ...opts,
-      form: formApi,
-      // TODO: Fix typings to include `index` and `parentFieldName`, if present
-      name
+      form: opts.form,
+      name: opts.name
     });
@@ -22,3 +18,3 @@ api.Field = Field;
   useIsomorphicLayoutEffect(() => {
-    fieldApi.update({ ...opts, form: formApi });
+    fieldApi.update(opts);
   });
@@ -38,12 +34,3 @@ useStore(
   const fieldApi = useField(fieldOptions);
-  return /* @__PURE__ */ jsx(
-    formContext.Provider,
-    {
-      value: {
-        formApi: fieldApi.form,
-        parentFieldName: fieldApi.name
-      },
-      children: functionalUpdate(children, fieldApi)
-    }
-  );
+  return /* @__PURE__ */ jsx(Fragment, { children: functionalUpdate(children, fieldApi) });
 }
@@ -50,0 +37,0 @@ export {

dist/esm/useForm.d.ts

 /// <reference types="react" />
 import { FormApi } from '@tanstack/form-core';
-import { type PropsWithChildren, type ReactNode } from 'rehackt';
+import { type ReactNode } from 'rehackt';
+import { type FieldComponent, type UseField } from './useField.js';
 import type { NoInfer } from '@tanstack/react-store';
 import type { FormOptions, FormState, Validator } from '@tanstack/form-core';
-import type { FieldComponent, UseField } from './useField.js';
 declare module '@tanstack/form-core' {
     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;
@@ -13,0 +12,0 @@ Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {

dist/esm/useForm.js

@@ -6,3 +6,2 @@ import { jsx } from "react/jsx-runtime";
 import { Field, useField } from "./useField.js";
-import { formContext } from "./formContext.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
@@ -12,8 +11,6 @@ function useForm(opts) {
     const api = new FormApi(opts);
-    api.Provider = function Provider(props) {
-      useIsomorphicLayoutEffect(api.mount, []);
-      return /* @__PURE__ */ jsx(formContext.Provider, { ...props, value: { formApi: api } });
+    api.Field = function APIField(props) {
+      return /* @__PURE__ */ jsx(Field, { ...props, form: api });
     };
-    api.Field = Field;
-    api.useField = useField;
+    api.useField = (props) => useField({ ...props, form: api });
     api.useStore = (selector) => {
@@ -31,2 +28,3 @@ return useStore(api.store, selector);
   });
+  useIsomorphicLayoutEffect(formApi.mount, []);
   formApi.useStore((state) => state.isSubmitting);
@@ -33,0 +31,0 @@ useIsomorphicLayoutEffect(() => {

package.json

 {
   "name": "@tanstack/react-form",
-  "version": "0.13.7",
+  "version": "0.14.0",
   "description": "Powerful, type-safe forms for React.",
@@ -46,3 +46,3 @@ "author": "tannerlinsley",
     "rehackt": "^0.0.3",
-    "@tanstack/form-core": "0.13.7"
+    "@tanstack/form-core": "0.14.0"
   },
@@ -49,0 +49,0 @@ "peerDependencies": {

src/createFormFactory.ts

@@ -15,4 +15,4 @@ import { Field, useField } from './useField'
   ) => FormApi<TFormData, TFormValidator>
-  useField: UseField<TFormData>
-  Field: FieldComponent<TFormData, TFormValidator>
+  useField: typeof useField
+  Field: typeof Field
   validateFormData: ValidateFormData<TFormData, TFormValidator>
@@ -33,4 +33,4 @@ initialFormState: Partial<FormApi<TFormData, TFormValidator>['state']>
     },
-    useField: useField as any,
-    Field: Field as any,
+    useField: useField,
+    Field: Field,
     validateFormData: getValidateFormData(defaultOpts) as never,
@@ -37,0 +37,0 @@ initialFormState: {

src/types.ts

 import type {
   DeepKeys,
   DeepValue,
-  FieldOptions,
+  FieldApiOptions,
   Validator,
@@ -18,4 +18,10 @@ } from '@tanstack/form-core'
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
+> = FieldApiOptions<
+  TParentData,
+  TName,
+  TFieldValidator,
+  TFormValidator,
+  TData
+> & {
   mode?: 'value' | 'array'
 }

No alert changes

Worsened metrics

Total package byte prevSize

113601

-5.91%

Number of package files

61

-10.29%

Lines of code

2089

-2.25%

Dependency changes

• + Added

  @tanstack/form-core@0.14.0
  (transitive)

• - Removed

  @tanstack/form-core@0.13.7
  (transitive)

• Updated

  @tanstack/form-core@0.14.0