@tanstack/vue-form 0.4.0 → 0.4.2

package/build/lib/createFormFactory.d.ts

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

package/build/lib/createFormFactory.js

@@ -0,0 +1,12 @@
+import { Field, useField } from './useField';
+import { useForm } from './useForm';
+export function createFormFactory(defaultOpts) {
+    return {
+        useForm: (opts) => {
+            const formOptions = Object.assign({}, defaultOpts, opts);
+            return useForm(formOptions);
+        },
+        useField: useField,
+        Field: Field,
+    };
+}

package/build/lib/formContext.d.ts

@@ -0,0 +1,11 @@
+import type { FormApi } from '@tanstack/form-core';
+export type FormContext = {
+    formApi: FormApi<any, unknown>;
+    parentFieldName?: string;
+} | null;
+export declare const formContext: unique symbol;
+export declare function provideFormContext(val: FormContext): void;
+export declare function useFormContext(): {
+    formApi: FormApi<any, unknown>;
+    parentFieldName?: string | undefined;
+};

package/build/lib/formContext.js

@@ -0,0 +1,12 @@
+import { inject, provide } from 'vue-demi';
+export const formContext = Symbol('FormContext');
+export function provideFormContext(val) {
+    provide(formContext, val);
+}
+export function useFormContext() {
+    const formApi = inject(formContext);
+    if (!formApi) {
+        throw new Error(`You are trying to use the form API outside of a form!`);
+    }
+    return formApi;
+}

package/build/lib/index.d.ts

@@ -0,0 +1,5 @@
+export * from '@tanstack/form-core';
+export * from './createFormFactory';
+export * from './formContext';
+export * from './useField';
+export * from './useForm';

package/build/lib/index.js

@@ -0,0 +1,5 @@
+export * from '@tanstack/form-core';
+export * from './createFormFactory';
+export * from './formContext';
+export * from './useField';
+export * from './useForm';

package/build/lib/tests/useField.test.d.ts

@@ -0,0 +1,2 @@
+/// <reference lib="dom" />
+import '@testing-library/jest-dom';

package/build/lib/tests/useField.test.jsx

@@ -0,0 +1,109 @@
+/// <reference lib="dom" />
+import { defineComponent } from 'vue-demi';
+import { render, waitFor } from '@testing-library/vue';
+import '@testing-library/jest-dom';
+import { createFormFactory, provideFormContext, } from '../index';
+import userEvent from '@testing-library/user-event';
+import { sleep } from './utils';
+const user = userEvent.setup();
+describe('useField', () => {
+    it('should allow to set default value', async () => {
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" defaultValue="FirstName">
+          {({ field, }) => (<input data-testid={'fieldinput'} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>)}
+        </form.Field>);
+        });
+        const { getByTestId } = render(Comp);
+        const input = getByTestId('fieldinput');
+        await waitFor(() => expect(input).toHaveValue('FirstName'));
+    });
+    it('should not validate on change if isTouched is false', async () => {
+        const error = 'Please enter a different value';
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" onChange={(value) => (value === 'other' ? error : undefined)}>
+          {({ field, }) => (<div>
+              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.setValue(e.target.value)}/>
+              <p>{field.getMeta().errors}</p>
+            </div>)}
+        </form.Field>);
+        });
+        const { getByTestId, queryByText } = render(Comp);
+        const input = getByTestId('fieldinput');
+        await user.type(input, 'other');
+        expect(queryByText(error)).not.toBeInTheDocument();
+    });
+    it('should validate on change if isTouched is true', async () => {
+        const error = 'Please enter a different value';
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" onChange={(value) => (value === 'other' ? error : undefined)}>
+          {({ field, }) => (<div>
+              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
+              <p>{field.getMeta().errors}</p>
+            </div>)}
+        </form.Field>);
+        });
+        const { getByTestId, getByText, queryByText } = render(Comp);
+        const input = getByTestId('fieldinput');
+        expect(queryByText(error)).not.toBeInTheDocument();
+        await user.type(input, 'other');
+        expect(getByText(error)).toBeInTheDocument();
+    });
+    it('should validate async on change', async () => {
+        const error = 'Please enter a different value';
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" defaultMeta={{ isTouched: true }} onChangeAsync={async () => {
+                    await sleep(10);
+                    return error;
+                }}>
+          {({ field, }) => (<div>
+              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
+              <p>{field.getMeta().errors}</p>
+            </div>)}
+        </form.Field>);
+        });
+        const { getByTestId, getByText, queryByText } = render(Comp);
+        const input = getByTestId('fieldinput');
+        expect(queryByText(error)).not.toBeInTheDocument();
+        await user.type(input, 'other');
+        await waitFor(() => getByText(error));
+        expect(getByText(error)).toBeInTheDocument();
+    });
+    it('should validate async on change with debounce', async () => {
+        const mockFn = vi.fn();
+        const error = 'Please enter a different value';
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" defaultMeta={{ isTouched: true }} onChangeAsyncDebounceMs={100} onChangeAsync={async () => {
+                    mockFn();
+                    await sleep(10);
+                    return error;
+                }}>
+          {({ field, }) => (<div>
+              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
+              <p>{field.getMeta().errors}</p>
+            </div>)}
+        </form.Field>);
+        });
+        const { getByTestId, getByText } = render(<Comp />);
+        const input = getByTestId('fieldinput');
+        await user.type(input, 'other');
+        // mockFn will have been called 5 times without onChangeAsyncDebounceMs
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        await waitFor(() => getByText(error));
+        expect(getByText(error)).toBeInTheDocument();
+    });
+});

package/build/lib/tests/useForm.test.d.ts

@@ -0,0 +1,2 @@
+/// <reference lib="dom" />
+import '@testing-library/jest-dom';

package/build/lib/tests/useForm.test.jsx

@@ -0,0 +1,71 @@
+/// <reference lib="dom" />
+import { defineComponent, ref } from 'vue-demi';
+import { render, waitFor } from '@testing-library/vue';
+import '@testing-library/jest-dom';
+import { createFormFactory, provideFormContext, useForm, } from '../index';
+import userEvent from '@testing-library/user-event';
+const user = userEvent.setup();
+describe('useForm', () => {
+    it('preserved field state', async () => {
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" defaultValue="">
+          {({ field, }) => (<input data-testid={'fieldinput'} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>)}
+        </form.Field>);
+        });
+        const { getByTestId, queryByText } = render(Comp);
+        const input = getByTestId('fieldinput');
+        expect(queryByText('FirstName')).not.toBeInTheDocument();
+        await user.type(input, 'FirstName');
+        expect(input).toHaveValue('FirstName');
+    });
+    it('should allow default values to be set', async () => {
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm({
+                defaultValues: {
+                    firstName: 'FirstName',
+                    lastName: 'LastName',
+                },
+            });
+            form.provideFormContext();
+            return () => (<form.Field name="firstName">
+          {({ field, }) => <p>{field.state.value}</p>}
+        </form.Field>);
+        });
+        const { findByText, queryByText } = render(Comp);
+        expect(await findByText('FirstName')).toBeInTheDocument();
+        expect(queryByText('LastName')).not.toBeInTheDocument();
+    });
+    it('should handle submitting properly', async () => {
+        const Comp = defineComponent(() => {
+            const submittedData = ref();
+            const form = useForm({
+                defaultValues: {
+                    firstName: 'FirstName',
+                },
+                onSubmit: (data) => {
+                    submittedData.value = data;
+                },
+            });
+            form.provideFormContext();
+            return () => (<form.Provider>
+          <form.Field name="firstName">
+            {({ field, }) => {
+                    return (<input value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} placeholder={'First name'}/>);
+                }}
+          </form.Field>
+          <button onClick={form.handleSubmit}>Submit</button>
+          {submittedData.value && (<p>Submitted data: {submittedData.value.firstName}</p>)}
+        </form.Provider>);
+        });
+        const { findByPlaceholderText, getByText } = render(Comp);
+        const input = await findByPlaceholderText('First name');
+        await user.clear(input);
+        await user.type(input, 'OtherName');
+        await user.click(getByText('Submit'));
+        await waitFor(() => expect(getByText('Submitted data: OtherName')).toBeInTheDocument());
+    });
+});

package/build/lib/tests/utils.d.ts

@@ -0,0 +1 @@
+export declare function sleep(timeout: number): Promise<void>;

package/build/lib/tests/utils.js

@@ -0,0 +1,5 @@
+export function sleep(timeout) {
+    return new Promise((resolve, _reject) => {
+        setTimeout(resolve, timeout);
+    });
+}

package/build/lib/types.d.ts

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

package/build/lib/types.js

@@ -0,0 +1 @@
+export {};

package/build/lib/useField.d.ts

@@ -0,0 +1,38 @@
+import { FieldApi } from '@tanstack/form-core';
+import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core';
+import type { SlotsType, SetupContext, Ref } from 'vue-demi';
+import type { UseFieldOptions } from './types';
+declare module '@tanstack/form-core' {
+    interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData = DeepValue<TParentData, TName>> {
+        Field: FieldComponent<TData, FormValidator>;
+    }
+}
+export type UseField<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType>(opts?: {
+    name: Narrow<TName>;
+} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>>) => FieldApi<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>>;
+export declare function useField<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, ValidatorType, FormValidator, TData>): {
+    api: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>;
+    state: Readonly<Ref<FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>['state']>>;
+};
+export type FieldValue<TParentData, TName> = TParentData extends any[] ? unknown extends TName ? TParentData[number] : DeepValue<TParentData[number], TName> : DeepValue<TParentData, TName>;
+type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator> = (TParentData extends any[] ? {
+    name?: TName;
+    index: number;
+} : {
+    name: TName;
+    index?: never;
+}) & Omit<UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>, 'name' | 'index'>;
+export type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(fieldOptions: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator>, context: SetupContext<{}, SlotsType<{
+    default: {
+        field: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>;
+        state: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>['state'];
+    };
+}>>) => any;
+export declare const Field: <TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(props: import("@tanstack/form-core").FieldOptions<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>> & {
+    mode?: "value" | "array" | undefined;
+} & ({
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+})) => any;
+export {};

package/build/lib/useField.jsx

@@ -0,0 +1,41 @@
+import { FieldApi } from '@tanstack/form-core';
+import { useStore } from '@tanstack/vue-store';
+import { defineComponent, onMounted, onUnmounted, watch } from 'vue-demi';
+import { provideFormContext, useFormContext } from './formContext';
+export function useField(opts) {
+    // Get the form API either manually or from context
+    const { formApi, parentFieldName } = useFormContext();
+    const fieldApi = (() => {
+        const api = new FieldApi({
+            ...opts,
+            form: formApi,
+            name: opts.name,
+        });
+        api.Field = Field;
+        return api;
+    })();
+    const fieldState = useStore(fieldApi.store, (state) => state);
+    let cleanup;
+    onMounted(() => {
+        cleanup = fieldApi.mount();
+    });
+    onUnmounted(() => {
+        cleanup();
+    });
+    watch(() => opts, () => {
+        // Keep options up to date as they are rendered
+        fieldApi.update({ ...opts, form: formApi });
+    });
+    return { api: fieldApi, state: fieldState };
+}
+export const Field = defineComponent((fieldOptions, context) => {
+    const fieldApi = useField({ ...fieldOptions, ...context.attrs });
+    provideFormContext({
+        formApi: fieldApi.api.form,
+        parentFieldName: fieldApi.api.name,
+    });
+    return () => context.slots.default({
+        field: fieldApi.api,
+        state: fieldApi.state.value,
+    });
+}, { name: 'Field', inheritAttrs: false });

package/build/lib/useForm.d.ts

@@ -0,0 +1,19 @@
+import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core';
+import { type NoInfer } from '@tanstack/vue-store';
+import { type UseField, type FieldComponent } from './useField';
+import { type EmitsOptions, type SlotsType, type SetupContext } from 'vue-demi';
+declare module '@tanstack/form-core' {
+    interface FormApi<TFormData, ValidatorType> {
+        Provider: (props: Record<string, any> & {}) => any;
+        provideFormContext: () => void;
+        Field: FieldComponent<TFormData, ValidatorType>;
+        useField: UseField<TFormData, ValidatorType>;
+        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
+        Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+            selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
+        }, context: SetupContext<EmitsOptions, SlotsType<{
+            default: NoInfer<FormState<TFormData>>;
+        }>>) => any;
+    }
+}
+export declare function useForm<TData, FormValidator>(opts?: FormOptions<TData, FormValidator>): FormApi<TData, FormValidator>;

package/build/lib/useForm.jsx

@@ -0,0 +1,35 @@
+import { FormApi } from '@tanstack/form-core';
+import { useStore } from '@tanstack/vue-store';
+import { Field, useField } from './useField';
+import { provideFormContext } from './formContext';
+import { defineComponent, } from 'vue-demi';
+export function useForm(opts) {
+    const formApi = (() => {
+        const api = new FormApi(opts);
+        api.Provider = defineComponent((_, context) => {
+            provideFormContext({ formApi: formApi });
+            return () => context.slots.default();
+        }, { name: 'Provider' });
+        api.provideFormContext = () => {
+            provideFormContext({ formApi: formApi });
+        };
+        api.Field = Field;
+        api.useField = useField;
+        api.useStore = (selector) => {
+            return useStore(api.store, selector);
+        };
+        api.Subscribe = defineComponent((props, context) => {
+            const allProps = { ...props, ...context.attrs };
+            const selector = allProps.selector ?? ((state) => state);
+            const data = useStore(api.store, selector);
+            return () => context.slots.default(data.value);
+        }, {
+            name: 'Subscribe',
+            inheritAttrs: false,
+        });
+        return api;
+    })();
+    // formApi.useStore((state) => state.isSubmitting)
+    formApi.update(opts);
+    return formApi;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "@tanstack/store": "0.1.3",
     "@tanstack/vue-store": "0.1.3",
     "vue-demi": "^0.14.6",
-    "@tanstack/form-core": "0.4.0"
+    "@tanstack/form-core": "0.4.2"
   },
   "devDependencies": {
     "@vue/composition-api": "1.7.2",