@tanstack/vue-form 0.3.1 → 0.3.3

package/build/modern/useForm.js

@@ -0,0 +1,47 @@
+// src/useForm.tsx
+import { FormApi } from "@tanstack/form-core";
+import { useStore } from "@tanstack/vue-store";
+import { Field, useField } from "./useField.js";
+import { provideFormContext } from "./formContext.js";
+import {
+  defineComponent
+} from "vue-demi";
+function useForm(opts) {
+  const formApi = (() => {
+    const api = new FormApi(opts);
+    api.Provider = defineComponent(
+      (_, context) => {
+        provideFormContext({ formApi });
+        return () => context.slots.default();
+      },
+      { name: "Provider" }
+    );
+    api.provideFormContext = () => {
+      provideFormContext({ 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.update(opts);
+  return formApi;
+}
+export {
+  useForm
+};
+//# sourceMappingURL=useForm.js.map

package/build/modern/useForm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  defineComponent,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const formApi = (() => {\n    const api = new FormApi<TData>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      provideFormContext({ formApi })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAIE;AAAA,OACK;AAwBA,SAAS,QAAe,MAA2C;AACxE,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAAe,IAAI;AAEnC,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,2BAAmB,EAAE,QAAQ,CAAC;AAC9B,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,yBAAmB,EAAE,QAAQ,CAAC;AAAA,IAChC;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,aAAO,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,YAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAO,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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.3.1"
+    "@tanstack/form-core": "0.3.3"
   },
   "devDependencies": {
     "@vue/composition-api": "1.7.2",

package/src/types.ts

@@ -1,3 +1,9 @@
-export type NoInfer<T> = [T][T extends any ? 0 : never]
+import type { FieldOptions, DeepKeys } from '@tanstack/form-core'
 
-export type ReleaseVersion = 2
+export type UseFieldOptions<
+  TData,
+  TFormData,
+  TName = unknown extends TFormData ? string : DeepKeys<TFormData>,
+> = FieldOptions<TData, TFormData, TName> & {
+  mode?: 'value' | 'array'
+}

package/src/useField.tsx

@@ -1,28 +1,22 @@
-import { FieldApi } from '@tanstack/form-core'
-import type {
-  FieldState,
-  DeepKeys,
-  DeepValue,
-  FieldOptions,
-  Narrow,
+import {
+  FieldApi,
+  type FieldApiOptions,
+  type FormApi,
 } from '@tanstack/form-core'
+import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'
 import { useStore } from '@tanstack/vue-store'
 import { defineComponent, onMounted, onUnmounted, watch } from 'vue-demi'
 import type { SlotsType, SetupContext, Ref } from 'vue-demi'
 import { provideFormContext, useFormContext } from './formContext'
+import type { UseFieldOptions } from './types'
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
-  interface FieldApi<TData, TFormData> {
-    Field: FieldComponent<TData, TFormData>
+  interface FieldApi<_TData, TFormData, Opts, TData> {
+    Field: FieldComponent<TFormData, TData>
   }
 }
 
-export interface UseFieldOptions<TData, TFormData>
-  extends FieldOptions<TData, TFormData> {
-  mode?: 'value' | 'array'
-}
-
 export type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(
   opts?: { name: Narrow<TField> } & UseFieldOptions<
     DeepValue<TFormData, TField>,
@@ -30,25 +24,45 @@ export type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(
   >,
 ) => FieldApi<DeepValue<TFormData, TField>, TFormData>
 
-export function useField<TData, TFormData>(
-  opts: UseFieldOptions<TData, TFormData>,
+export function useField<
+  TData,
+  TFormData,
+  TName extends unknown extends TFormData
+    ? string
+    : DeepKeys<TFormData> = unknown extends TFormData
+    ? string
+    : DeepKeys<TFormData>,
+>(
+  opts: UseFieldOptions<TData, TFormData, TName>,
 ): {
-  api: FieldApi<TData, TFormData>
-  state: Readonly<Ref<FieldApi<TData, TFormData>['state']>>
+  api: FieldApi<
+    TData,
+    TFormData,
+    Omit<typeof opts, 'onMount'> & {
+      form: FormApi<TFormData>
+    }
+  >
+  state: Readonly<
+    Ref<
+      FieldApi<
+        TData,
+        TFormData,
+        Omit<typeof opts, 'onMount'> & {
+          form: FormApi<TFormData>
+        }
+      >['state']
+    >
+  >
 } {
   // Get the form API either manually or from context
   const { formApi, parentFieldName } = useFormContext()
 
   const fieldApi = (() => {
-    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, name: name as never })
+    const api = new FieldApi({
+      ...opts,
+      form: formApi,
+      name: opts.name,
+    } as never)
 
     api.Field = Field as never
 
@@ -77,56 +91,49 @@ export function useField<TData, TFormData>(
   return { api: fieldApi, state: fieldState } as never
 }
 
-// export type FieldValue<TFormData, TField> = TFormData extends any[]
-//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`
-//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>
-//     : TField extends `[${infer TIndex extends number | 'i'}]`
-//     ? TFormData[TIndex extends 'i' ? number : TIndex]
-//     : never
-//   : TField extends `${infer TPrefix}[${infer TIndex extends
-//       | number
-//       | 'i'}].${infer TRest}`
-//   ? DeepValue<
-//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],
-//       TRest
-//     >
-//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`
-//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]
-//   : DeepValue<TFormData, TField>
-
 export type FieldValue<TFormData, TField> = TFormData extends any[]
   ? unknown extends TField
     ? TFormData[number]
     : DeepValue<TFormData[number], TField>
   : DeepValue<TFormData, TField>
 
-// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>
-// //   ^?
-// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>
-// //   ^?
-// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>
-// //   ^?
-
-export type FieldComponent<TParentData, TFormData> = <TField>(
-  fieldOptions: Omit<
-    UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,
-    'name' | 'index'
-  > &
-    (TParentData extends any[]
-      ? {
-          name?: TField extends undefined ? TField : DeepKeys<TParentData>
-          index: number
-        }
-      : {
-          name: TField extends undefined ? TField : DeepKeys<TParentData>
-          index?: never
-        }),
+type FieldComponentProps<
+  TParentData,
+  TFormData,
+  TField,
+  TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,
+> = (TParentData extends any[]
+  ? {
+      name?: TName
+      index: number
+    }
+  : {
+      name: TName
+      index?: never
+    }) &
+  Omit<UseFieldOptions<TField, TFormData, TName>, 'name' | 'index'>
+
+export type FieldComponent<TParentData, TFormData> = <
+  // Type of the field
+  TField,
+  // Name of the field
+  TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,
+>(
+  fieldOptions: FieldComponentProps<TParentData, TFormData, TField, TName>,
   context: SetupContext<
     {},
     SlotsType<{
       default: {
-        field: FieldApi<FieldValue<TParentData, TField>, TFormData>
-        state: FieldState<any>
+        field: FieldApi<
+          TField,
+          TFormData,
+          FieldApiOptions<TField, TFormData, TName>
+        >
+        state: FieldApi<
+          TField,
+          TFormData,
+          FieldApiOptions<TField, TFormData, TName>
+        >['state']
       }
     }>
   >,

package/src/useForm.tsx

@@ -1,5 +1,5 @@
 import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'
-import { useStore } from '@tanstack/vue-store'
+import { type NoInfer, useStore } from '@tanstack/vue-store'
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { provideFormContext } from './formContext'
 import {
@@ -8,7 +8,6 @@ import {
   type SetupContext,
   defineComponent,
 } from 'vue-demi'
-import type { NoInfer } from './types'
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow