@tanstack/react-form 0.0.5 → 0.0.7

package/build/types/index.d.ts

@@ -8,27 +8,40 @@
  *
  * @license MIT
  */
-import { DeepKeys, FieldApi, DeepValue, FieldOptions, FormApi, FormState, FormOptions } from '@tanstack/form-core';
-export * from '@tanstack/form-core';
+import { DeepKeys, FieldApi, DeepValue, FieldOptions, FormOptions, FormApi, FormState } from '@tanstack/form-core';
+export { ChangeProps, DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormApi, FormOptions, FormState, InputProps, RequiredByKey, Updater, UpdaterFn, UserChangeProps, UserInputProps, ValidationCause, ValidationError, ValidationMeta, functionalUpdate } from '@tanstack/form-core';
 import { NoInfer } from '@tanstack/react-store';
 import React from 'react';
 
-declare type FieldComponent<TFormData> = <TField extends DeepKeys<TFormData>>({ children, ...fieldOptions }: {
+type FieldComponent<TFormData> = <TField extends DeepKeys<TFormData>>({ children, ...fieldOptions }: {
     children: (fieldApi: FieldApi<DeepValue<TFormData, TField>, TFormData>) => any;
     name: TField;
 } & Omit<FieldOptions<DeepValue<TFormData, TField>, TFormData>, 'name'>) => any;
-declare function createFieldComponent<TFormData>(formApi: FormApi<TFormData>): FieldComponent<TFormData>;
 declare function Field<TData, TFormData>({ children, ...fieldOptions }: {
     children: (fieldApi: FieldApi<TData, TFormData>) => any;
 } & FieldOptions<TData, TFormData>): any;
 
-declare type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
+type FormFactory<TFormData> = {
+    useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
+    useField: UseField<TFormData>;
+    Field: FieldComponent<TFormData>;
+};
+declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;
+
+declare module '@tanstack/form-core' {
+    interface FieldOptions<TData, TFormData> {
+        formFactory?: FormFactory<TFormData>;
+    }
+}
+type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
     name: TField;
 } & FieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
-declare function createUseField<TFormData>(formApi: FormApi<TFormData>): UseField<TFormData>;
 declare function useField<TData, TFormData>(opts: FieldOptions<TData, TFormData> & {}): FieldApi<TData, TFormData>;
 
 declare module '@tanstack/form-core' {
+    interface Register {
+        FormSubmitEvent: React.FormEvent<HTMLFormElement>;
+    }
     interface FormApi<TFormData> {
         Form: FormComponent;
         Field: FieldComponent<TFormData>;
@@ -41,11 +54,10 @@ declare module '@tanstack/form-core' {
     }
 }
 declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
-declare type FormProps = React.HTMLProps<HTMLFormElement> & {
+type FormProps = React.HTMLProps<HTMLFormElement> & {
     children: React.ReactNode;
     noFormElement?: boolean;
 };
-declare type FormComponent = (props: FormProps) => any;
-declare function createFormComponent(formApi: FormApi<any>): FormComponent;
+type FormComponent = (props: FormProps) => any;
 
-export { Field, FieldComponent, FormComponent, FormProps, UseField, createFieldComponent, createFormComponent, createUseField, useField, useForm };
+export { Field, FieldComponent, FormComponent, FormFactory, FormProps, UseField, createFormFactory, useField, useForm };

package/build/types/react-form/src/Field.d.ts

@@ -1,9 +1,9 @@
-import { type DeepKeys, type DeepValue, type FieldApi, type FieldOptions, type FormApi } from '@tanstack/form-core';
-export declare type FieldComponent<TFormData> = <TField extends DeepKeys<TFormData>>({ children, ...fieldOptions }: {
+import { type DeepKeys, type DeepValue, type FieldApi, type FieldOptions } from '@tanstack/form-core';
+export type FieldComponent<TFormData> = <TField extends DeepKeys<TFormData>>({ children, ...fieldOptions }: {
     children: (fieldApi: FieldApi<DeepValue<TFormData, TField>, TFormData>) => any;
     name: TField;
 } & Omit<FieldOptions<DeepValue<TFormData, TField>, TFormData>, 'name'>) => any;
-export declare function createFieldComponent<TFormData>(formApi: FormApi<TFormData>): FieldComponent<TFormData>;
+export declare function createFieldComponent<TFormData>(): FieldComponent<TFormData>;
 export declare function Field<TData, TFormData>({ children, ...fieldOptions }: {
     children: (fieldApi: FieldApi<TData, TFormData>) => any;
 } & FieldOptions<TData, TFormData>): any;

package/build/types/react-form/src/createFormFactory.d.ts

@@ -0,0 +1,9 @@
+import type { FormApi, FormOptions } from '@tanstack/form-core';
+import { type UseField } from './useField';
+import { type FieldComponent } from './Field';
+export type FormFactory<TFormData> = {
+    useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
+    useField: UseField<TFormData>;
+    Field: FieldComponent<TFormData>;
+};
+export declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;

package/build/types/react-form/src/formContext.d.ts

@@ -1,4 +1,4 @@
 import type { FormApi } from '@tanstack/form-core';
 import * as React from 'react';
 export declare const formContext: React.Context<FormApi<any> | null>;
-export declare function useFormContext(customFormApi?: FormApi<any>): FormApi<any>;
+export declare function useFormContext(): FormApi<any>;

package/build/types/react-form/src/index.d.ts

@@ -1,4 +1,10 @@
-export * from '@tanstack/form-core';
-export * from './useForm';
-export * from './Field';
-export * from './useField';
+export type { ChangeProps, DeepKeys, DeepValue, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormOptions, FormState, InputProps, RequiredByKey, Updater, UpdaterFn, UserChangeProps, UserInputProps, ValidationCause, ValidationError, ValidationMeta, } from '@tanstack/form-core';
+export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core';
+export type { FormComponent, FormProps } from './useForm';
+export { useForm } from './useForm';
+export type { FieldComponent } from './Field';
+export { Field } from './Field';
+export type { UseField } from './useField';
+export { useField } from './useField';
+export type { FormFactory } from './createFormFactory';
+export { createFormFactory } from './createFormFactory';

package/build/types/react-form/src/useField.d.ts

@@ -1,7 +1,13 @@
-import type { DeepKeys, DeepValue, FieldOptions, FormApi } from '@tanstack/form-core';
+import type { DeepKeys, DeepValue, FieldOptions } from '@tanstack/form-core';
 import { FieldApi } from '@tanstack/form-core';
-export declare type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
+import type { FormFactory } from './createFormFactory';
+declare module '@tanstack/form-core' {
+    interface FieldOptions<TData, TFormData> {
+        formFactory?: FormFactory<TFormData>;
+    }
+}
+export type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
     name: TField;
 } & FieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
-export declare function createUseField<TFormData>(formApi: FormApi<TFormData>): UseField<TFormData>;
+export declare function createUseField<TFormData>(): UseField<TFormData>;
 export declare function useField<TData, TFormData>(opts: FieldOptions<TData, TFormData> & {}): FieldApi<TData, TFormData>;

package/build/types/react-form/src/useForm.d.ts

@@ -5,6 +5,9 @@ import React from 'react';
 import { type FieldComponent } from './Field';
 import { type UseField } from './useField';
 declare module '@tanstack/form-core' {
+    interface Register {
+        FormSubmitEvent: React.FormEvent<HTMLFormElement>;
+    }
     interface FormApi<TFormData> {
         Form: FormComponent;
         Field: FieldComponent<TFormData>;
@@ -17,9 +20,8 @@ declare module '@tanstack/form-core' {
     }
 }
 export declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
-export declare type FormProps = React.HTMLProps<HTMLFormElement> & {
+export type FormProps = React.HTMLProps<HTMLFormElement> & {
     children: React.ReactNode;
     noFormElement?: boolean;
 };
-export declare type FormComponent = (props: FormProps) => any;
-export declare function createFormComponent(formApi: FormApi<any>): FormComponent;
+export type FormComponent = (props: FormProps) => any;

package/build/umd/index.development.js

@@ -101,10 +101,6 @@
     return typeof updater === 'function' ? updater(input) : updater;
   }
   function getBy(obj, path) {
-    if (!path) {
-      throw new Error('A path string is required to use getBy');
-    }
-
     const pathArray = makePathArray(path);
     const pathObj = pathArray;
     return pathObj.reduce((current, pathPart) => {
@@ -156,11 +152,17 @@
   const reFindNumbers2 = /^(\d*)\./gm;
   const reFindNumbers3 = /\.(\d*$)/gm;
   const reFindMultiplePeriods = /\.{2,}/gm;
+  const intPrefix = '__int__';
+  const intReplace = intPrefix + "$1";
 
   function makePathArray(str) {
-    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);
+    if (typeof str !== 'string') {
+      throw new Error();
+    }
+
+    return str.replace('[', '.').replace(']', '').replace(reFindNumbers0, intReplace).replace(reFindNumbers1, "." + intReplace + ".").replace(reFindNumbers2, intReplace + ".").replace(reFindNumbers3, "." + intReplace).replace(reFindMultiplePeriods, '.').split('.').map(d => {
+      if (d.indexOf(intPrefix) === 0) {
+        return parseInt(d.substring(intPrefix.length), 10);
       }
 
       return d;
@@ -186,6 +188,7 @@
       ...defaultState
     };
   }
+
   class FormApi {
     // // This carries the context for nested fields
     constructor(_opts) {
@@ -855,13 +858,9 @@
   }
 
   const formContext = /*#__PURE__*/React__namespace.createContext(null);
-  function useFormContext(customFormApi) {
+  function useFormContext() {
     const formApi = React__namespace.useContext(formContext);
 
-    if (customFormApi) {
-      return customFormApi;
-    }
-
     if (!formApi) {
       throw new Error("You are trying to use the form API outside of a form!");
     }
@@ -869,22 +868,14 @@
     return formApi;
   }
 
-  function createUseField(formApi) {
-    const useFormField = opts => {
-      return useField({ ...opts,
-        form: formApi
-      });
+  function createUseField() {
+    return opts => {
+      return useField(opts);
     };
-
-    return useFormField;
   }
   function useField(opts) {
-    // invariant( // TODO:
-    //   opts.name,
-    //   `useField: A field is required to use this hook. eg, useField('myField', options)`
-    // )
     // Get the form API either manually or from context
-    const formApi = useFormContext(opts.form);
+    const formApi = useFormContext();
     const [fieldApi] = React__namespace.useState(() => new FieldApi({ ...opts,
       form: formApi
     })); // Keep options up to date as they are rendered
@@ -898,10 +889,8 @@
     return fieldApi;
   }
 
-  function createFieldComponent(formApi) {
-    const ConnectedField = props => /*#__PURE__*/React__namespace.createElement(Field, _extends({}, props, {
-      form: formApi
-    }));
+  function createFieldComponent() {
+    const ConnectedField = props => /*#__PURE__*/React__namespace.createElement(Field, props);
 
     return ConnectedField;
   }
@@ -913,14 +902,13 @@
     return functionalUpdate(children, fieldApi);
   }
 
-  //
   function useForm(opts) {
     const [formApi] = React__default["default"].useState(() => {
       // @ts-ignore
-      const api = new FormApi(opts || {});
+      const api = new FormApi(opts);
       api.Form = createFormComponent(api);
-      api.Field = createFieldComponent(api);
-      api.useField = createUseField(api);
+      api.Field = createFieldComponent();
+      api.useField = createUseField();
 
       api.useStore = ( // @ts-ignore
       selector) => {
@@ -935,10 +923,10 @@
       };
 
       return api;
-    }); // React.useEffect(() => formApi.mount(), [])
-
+    });
     return formApi;
   }
+
   function createFormComponent(formApi) {
     const Form = ({
       children,
@@ -951,45 +939,29 @@
       }, noFormElement ? children : /*#__PURE__*/React__default["default"].createElement("form", _extends({
         onSubmit: formApi.handleSubmit,
         disabled: isSubmitting
-      }, rest), formApi.options.debugForm ? /*#__PURE__*/React__default["default"].createElement("div", {
-        style: {
-          margin: '2rem 0'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        style: {
-          fontWeight: 'bolder'
-        }
-      }, "Form State"), /*#__PURE__*/React__default["default"].createElement("pre", null, /*#__PURE__*/React__default["default"].createElement("code", null, JSON.stringify(formApi, safeStringifyReplace(), 2)))) : null, children));
+      }, rest), children));
     };
 
     return Form;
   }
 
-  function safeStringifyReplace() {
-    const set = new Set();
-    return (_key, value) => {
-      if (typeof value === 'object' || Array.isArray(value)) {
-        if (set.has(value)) {
-          return '(circular value)';
-        }
-
-        set.add(value);
-      }
-
-      return typeof value === 'function' ? undefined : value;
+  function createFormFactory(defaultOpts) {
+    return {
+      useForm: opts => {
+        return useForm({ ...defaultOpts,
+          ...opts
+        });
+      },
+      useField: createUseField(),
+      Field: createFieldComponent()
     };
   }
 
   exports.Field = Field;
   exports.FieldApi = FieldApi;
   exports.FormApi = FormApi;
-  exports.createFieldComponent = createFieldComponent;
-  exports.createFormComponent = createFormComponent;
-  exports.createUseField = createUseField;
+  exports.createFormFactory = createFormFactory;
   exports.functionalUpdate = functionalUpdate;
-  exports.getBy = getBy;
-  exports.getDefaultFormState = getDefaultFormState;
-  exports.setBy = setBy;
   exports.useField = useField;
   exports.useForm = useForm;