@tanstack/vue-form 1.33.4 → 2.0.0-alpha.0

package/dist/VueForm/fieldSubscriptions.lib.js

@@ -0,0 +1,34 @@
+import { shallow } from "@tanstack/vue-store";
+import { shallowRef, toRaw, watch } from "vue";
+
+//#region src/VueForm/fieldSubscriptions.lib.ts
+function createFieldSelection(fieldApi, selector) {
+	const selected = shallowRef(selector(fieldApi.value));
+	watch(fieldApi, (field, _previous, onCleanup) => {
+		selected.value = selector(field);
+		const subscription = field.atom.subscribe(() => {
+			const next = selector(field);
+			if (!shallow(toRaw(selected.value), next)) selected.value = next;
+		});
+		onCleanup(() => subscription.unsubscribe());
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	return selected;
+}
+function createValueFieldSubscription(fieldApi) {
+	return createFieldSelection(fieldApi, (field) => ({
+		value: field.value,
+		meta: field.meta
+	}));
+}
+function createArrayFieldSubscription(fieldApi) {
+	return createFieldSelection(fieldApi, (field) => ({
+		length: field.value.length,
+		version: field.meta._arrayVersion
+	}));
+}
+
+//#endregion
+export { createArrayFieldSubscription, createValueFieldSubscription };

package/dist/VueForm/formApiTypes.public.d.ts

@@ -0,0 +1,10 @@
+import { AnyVueFormComponentMap, DefaultVueFormComponentMap, VueFormComponentMap } from "../AppForm/componentMap.public.js";
+import { VueTanStackFormComponents } from "./Components.public.js";
+import { AnyFormApi, FormApi, FormErrorTypes } from "@tanstack/form-core";
+import { Component } from "vue";
+//#region src/VueForm/formApiTypes.public.d.ts
+type ExtendedFormApi<TFormData, TFormErrorTypes extends FormErrorTypes, TFieldComponents extends Record<string, Component>> = FormApi<TFormData, TFormErrorTypes> & VueTanStackFormComponents<TFormData, TFormErrorTypes, TFieldComponents>;
+type VueFormApi<TFormData, TFormErrorTypes extends FormErrorTypes, TComponents extends AnyVueFormComponentMap = DefaultVueFormComponentMap> = unknown extends TComponents['formComponents'] ? ExtendedFormApi<TFormData, TFormErrorTypes, TComponents['fieldComponents']> : ExtendedFormApi<TFormData, TFormErrorTypes, TComponents['fieldComponents']> & TComponents['formComponents'];
+type AnyVueFormApi = AnyFormApi & VueTanStackFormComponents<any, any, any>;
+//#endregion
+export { AnyVueFormApi, VueFormApi, type VueFormComponentMap };

package/dist/VueForm/formType.public.d.ts

@@ -0,0 +1,9 @@
+import { AnyVueFormComponentMap, DefaultVueFormComponentMap } from "../AppForm/componentMap.public.js";
+import { VueFormApi } from "./formApiTypes.public.js";
+import { AppFormOptions } from "../AppForm/appFormOptions.public.js";
+import { AnyFormOptions, FormOptions, FormValidators, ToFormErrorTypes } from "@tanstack/form-core";
+//#region src/VueForm/formType.public.d.ts
+type VueFormTypeErrorTypes<TFormValidators extends FormValidators<any>, TSubmitReturn> = unknown extends TSubmitReturn ? any : ToFormErrorTypes<TFormValidators, TSubmitReturn>;
+type VueFormType<TOptions extends AnyFormOptions | AppFormOptions<any, any, any, AnyVueFormComponentMap>> = TOptions extends AppFormOptions<infer TFormData, infer TFormValidators, infer TSubmitReturn, infer TComponents> ? VueFormApi<TFormData, VueFormTypeErrorTypes<TFormValidators, TSubmitReturn>, TComponents> : TOptions extends FormOptions<infer TFormData, infer TFormValidators, infer TSubmitReturn> ? VueFormApi<TFormData, VueFormTypeErrorTypes<TFormValidators, TSubmitReturn>, DefaultVueFormComponentMap> : never;
+//#endregion
+export { VueFormType };

package/dist/VueForm/useField.lib.js

@@ -0,0 +1,44 @@
+import { useSelector } from "@tanstack/vue-store";
+import { onMounted, onUnmounted, shallowRef, watch, watchEffect } from "vue";
+
+//#region src/VueForm/useField.lib.ts
+function useField(options, fieldComponents) {
+	const initialOptions = options();
+	const resetVersion = useSelector(initialOptions.form._atoms.resetVersion);
+	const createField = () => {
+		const current = options();
+		const field = current.form._getOrCreateFieldApi({
+			...current,
+			name: current.name
+		});
+		if (fieldComponents !== null) Object.assign(field, fieldComponents);
+		return field;
+	};
+	const fieldApi = shallowRef(createField());
+	watch([
+		() => options().form,
+		() => options().name,
+		resetVersion
+	], () => {
+		fieldApi.value = createField();
+	}, { flush: "sync" });
+	watchEffect(() => {
+		fieldApi.value._update(options());
+	});
+	let mounted = false;
+	let unregister;
+	watch(fieldApi, (field) => {
+		if (!mounted) return;
+		unregister?.();
+		unregister = field._register();
+	}, { flush: "sync" });
+	onMounted(() => {
+		mounted = true;
+		unregister = fieldApi.value._register();
+	});
+	onUnmounted(() => unregister?.());
+	return fieldApi;
+}
+
+//#endregion
+export { useField };

package/dist/VueForm/useForm.public.d.ts

@@ -0,0 +1,8 @@
+import { AnyVueFormComponentMap, DefaultVueFormComponentMap } from "../AppForm/componentMap.public.js";
+import { VueFormApi } from "./formApiTypes.public.js";
+import { FormOptions, FormValidators, ToFormErrorTypes } from "@tanstack/form-core";
+//#region src/VueForm/useForm.public.d.ts
+type UseFormHook<in out TComponents extends AnyVueFormComponentMap> = <TFormData, const TFormValidators extends FormValidators<TFormData>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn>) => VueFormApi<TFormData, ToFormErrorTypes<TFormValidators, TSubmitReturn>, TComponents>;
+declare const useForm: UseFormHook<DefaultVueFormComponentMap>;
+//#endregion
+export { UseFormHook, useForm };

package/dist/VueForm/useForm.public.js

@@ -0,0 +1,10 @@
+import { initializeForm, useInternalForm } from "./VueFormApi.lib.js";
+
+//#region src/VueForm/useForm.public.ts
+function useFormHook(options) {
+	return useInternalForm(options, initializeForm);
+}
+const useForm = useFormHook;
+
+//#endregion
+export { useForm };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { AnyVueFormComponentMap, DefaultVueFormComponentMap, VueFormComponentMap } from "./AppForm/componentMap.public.js";
+import { VueFieldApi, VueFormArrayFieldComponent, VueFormFieldComponent, VueFormFieldProps, VueFormGroupApi, VueFormGroupArrayFieldComponent, VueFormGroupComponent, VueFormGroupFieldComponent, VueFormGroupProps, VueFormGroupSubscribeComponent, VueFormGroupSubscribeProps, VueFormSubscribeComponent, VueFormSubscribeProps, VueTanStackFormComponents } from "./VueForm/Components.public.js";
+import { AnyVueFormApi, VueFormApi } from "./VueForm/formApiTypes.public.js";
+import { UseFormHook, useForm } from "./VueForm/useForm.public.js";
+import { AppFormOptions, AppFormOptionsApi } from "./AppForm/appFormOptions.public.js";
+import { VueFormType } from "./VueForm/formType.public.js";
+import { Subscribe, SubscribeComponent, SubscribeProps, SubscribeSource } from "./Subscribe.public.js";
+import { AnyFieldGroupApi, FieldGroupApi, FieldGroupArrayFieldComponent, FieldGroupFieldComponent, FieldGroupFormState, FieldGroupSubscribeComponent, FieldGroupSubscribeProps } from "./FieldGroup/FieldGroupApi.public.js";
+import { AnyFieldGroupFieldSlot, DefineFieldGroupFn, FieldGroupDefinition, FieldGroupFieldBindingForSlot, FieldGroupFieldBindings, FieldGroupFieldBindingsOf, FieldGroupFieldComponentsOf, FieldGroupFieldData, FieldGroupFieldNameForSlot, FieldGroupFieldNames, FieldGroupFieldSlot, FieldGroupFieldSlotAllows, FieldGroupFieldSlotMode, FieldGroupFieldSlotModeOf, FieldGroupFieldSlotValue, FieldGroupFields, FieldGroupFieldsOf, FieldGroupFieldsPropName, FieldGroupForm, FieldGroupHelper, FieldGroupWithFieldsFn, LooseFieldGroupFieldSlot, StrictFieldGroupFieldSlot, VueFieldGroup, defineFieldGroup } from "./FieldGroup/withFields.public.js";
+import { AppFormComponent, VueAppFormApi } from "./AppForm/VueAppFormApi.public.js";
+import { AppFormHookResult, UseAppFormHook } from "./AppForm/createFormHookTypes.public.js";
+import { createFormHook } from "./AppForm/createFormHook.public.js";
+import { FormHookHelpers, getFormHookHelpers } from "./AppForm/getFormHookHelpers.public.js";
+export * from "@tanstack/form-core";
+export * from "@tanstack/vue-store";
+export { AnyFieldGroupApi, AnyFieldGroupFieldSlot, AnyVueFormApi, AnyVueFormComponentMap, AppFormComponent, AppFormHookResult, AppFormOptions, AppFormOptionsApi, DefaultVueFormComponentMap, DefineFieldGroupFn, FieldGroupApi, FieldGroupArrayFieldComponent, FieldGroupDefinition, FieldGroupFieldBindingForSlot, FieldGroupFieldBindings, FieldGroupFieldBindingsOf, FieldGroupFieldComponent, FieldGroupFieldComponentsOf, FieldGroupFieldData, FieldGroupFieldNameForSlot, FieldGroupFieldNames, FieldGroupFieldSlot, FieldGroupFieldSlotAllows, FieldGroupFieldSlotMode, FieldGroupFieldSlotModeOf, FieldGroupFieldSlotValue, FieldGroupFields, FieldGroupFieldsOf, FieldGroupFieldsPropName, FieldGroupForm, FieldGroupFormState, FieldGroupHelper, FieldGroupSubscribeComponent, FieldGroupSubscribeProps, FieldGroupWithFieldsFn, FormHookHelpers, LooseFieldGroupFieldSlot, StrictFieldGroupFieldSlot, Subscribe, SubscribeComponent, SubscribeProps, SubscribeSource, UseAppFormHook, UseFormHook, VueAppFormApi, VueFieldApi, VueFieldGroup, VueFormApi, VueFormArrayFieldComponent, VueFormComponentMap, VueFormFieldComponent, VueFormFieldProps, VueFormGroupApi, VueFormGroupArrayFieldComponent, VueFormGroupComponent, VueFormGroupFieldComponent, VueFormGroupProps, VueFormGroupSubscribeComponent, VueFormGroupSubscribeProps, VueFormSubscribeComponent, VueFormSubscribeProps, VueFormType, VueTanStackFormComponents, createFormHook, defineFieldGroup, getFormHookHelpers, useForm };

package/dist/index.js

@@ -0,0 +1,11 @@
+import { Subscribe } from "./Subscribe.public.js";
+import { useForm } from "./VueForm/useForm.public.js";
+import { defineFieldGroup } from "./FieldGroup/withFields.public.js";
+import { createFormHook } from "./AppForm/createFormHook.public.js";
+import { getFormHookHelpers } from "./AppForm/getFormHookHelpers.public.js";
+
+export * from "@tanstack/form-core"
+
+export * from "@tanstack/vue-store"
+
+export { Subscribe, createFormHook, defineFieldGroup, getFormHookHelpers, useForm };

package/dist/vueTypes.lib.d.ts

@@ -0,0 +1,6 @@
+import { ComponentOptionsMixin, CreateComponentPublicInstanceWithMixins, EmitsOptions, PublicProps, SlotsType } from "vue";
+//#region src/vueTypes.lib.d.ts
+type VueComponentInstance<TProps extends Record<string, any>, TSlots extends Record<string, any>> = CreateComponentPublicInstanceWithMixins<TProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, SlotsType<TSlots>>;
+type VueComponentWithSlots<TProps extends Record<string, any>, TSlots extends Record<string, any>> = new (props: TProps & PublicProps) => VueComponentInstance<TProps, TSlots>;
+//#endregion
+export { VueComponentInstance, VueComponentWithSlots };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "1.33.4",
+  "version": "2.0.0-alpha.0",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -15,20 +15,9 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "type": "module",
-  "types": "dist/esm/index.d.ts",
-  "main": "dist/cjs/index.cjs",
-  "module": "dist/esm/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.cts",
-        "default": "./dist/cjs/index.cjs"
-      }
-    },
+    ".": "./dist/index.js",
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -37,31 +26,26 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/vue-store": "^0.11.0",
-    "@tanstack/form-core": "1.33.4"
+    "@tanstack/vue-store": "^0.11.1",
+    "@tanstack/form-core": "2.0.0-alpha.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.4",
-    "vite": "^7.2.2",
-    "vue": "^3.5.13"
+    "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "unplugin-vue": "^7.2.0",
+    "vue": "^3.6.0-rc.2",
+    "vue-tsc": "^3.3.9"
   },
   "peerDependencies": {
-    "vue": "^3.4.0"
+    "vue": "^3.6.0-rc.2"
   },
   "scripts": {
     "clean": "premove ./dist ./coverage",
     "test:eslint": "eslint ./src ./tests",
-    "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
-    "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
-    "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
-    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
-    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
-    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js",
-    "test:types:ts59": "tsc",
-    "fixme:test:lib": "pnpm run test:2 && pnpm run test:2.7 && pnpm run test:3",
+    "test:types": "vue-tsc --noEmit",
     "test:lib": "vitest",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict",
-    "build": "vite build"
+    "build": "tsdown"
   }
 }

package/src/AppForm/Components.lib.ts

@@ -0,0 +1,31 @@
+import { defineComponent, provide } from 'vue'
+import { attachVueFormComponents } from '../VueForm/Components.lib'
+import { FieldContext, FormContext } from './contexts.lib'
+import type { Component } from 'vue'
+import type { AnyInternalFormApi } from '@tanstack/form-core/internals'
+import type { AnyVueFormComponentMap } from './componentMap.public'
+import type { VueAppFormApi } from './VueAppFormApi.public'
+
+type AnyVueAppFormApi = VueAppFormApi<any, any, AnyVueFormComponentMap>
+
+export function attachVueAppFormComponents(
+  form: AnyInternalFormApi,
+  formComponents: Record<string, Component>,
+  fieldComponents: Record<string, Component>,
+): AnyVueAppFormApi {
+  const resultForm = attachVueFormComponents(
+    form,
+    fieldComponents,
+    FieldContext,
+  ) as never as AnyVueAppFormApi
+
+  resultForm.AppForm = defineComponent(
+    (_props, { slots }) => {
+      provide(FormContext, resultForm as never)
+      return () => slots.default?.()
+    },
+    { name: 'TanStackForm.AppForm' },
+  ) as never
+
+  return Object.assign(resultForm, formComponents)
+}

package/src/AppForm/VueAppFormApi.public.ts

@@ -0,0 +1,17 @@
+import type { FormErrorTypes } from '@tanstack/form-core'
+import type { PublicProps } from 'vue'
+import type { VueComponentInstance } from '../vueTypes.lib'
+import type { VueFormApi } from '../VueForm/formApiTypes.public'
+import type { AnyVueFormComponentMap } from './componentMap.public'
+
+export type AppFormComponent = new (
+  props: PublicProps,
+) => VueComponentInstance<{}, { default: {} }>
+
+export type VueAppFormApi<
+  TFormData,
+  TFormErrorTypes extends FormErrorTypes,
+  TComponents extends AnyVueFormComponentMap,
+> = VueFormApi<TFormData, TFormErrorTypes, TComponents> & {
+  AppForm: AppFormComponent
+}

package/src/AppForm/appFormOptions.public.ts

@@ -0,0 +1,55 @@
+import type {
+  FormOptions,
+  FormValidatorData,
+  FormValidators,
+  InferUnion,
+  NullableSchemaData,
+} from '@tanstack/form-core'
+import type { AnyVueFormComponentMap } from './componentMap.public'
+
+declare const componentsSymbol: unique symbol
+
+export interface AppFormOptions<
+  TFormData,
+  TFormValidators extends FormValidators<TFormData>,
+  TSubmitReturn,
+  TComponents extends AnyVueFormComponentMap,
+> extends FormOptions<TFormData, TFormValidators, TSubmitReturn> {
+  [componentsSymbol]: TComponents
+}
+
+export interface AppFormOptionsApi<TComponents extends AnyVueFormComponentMap> {
+  <
+    TFormData,
+    const TFormValidators extends FormValidators<TFormData>,
+    TSubmitReturn,
+  >(
+    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
+  ): AppFormOptions<TFormData, TFormValidators, TSubmitReturn, TComponents>
+
+  strictSchema: <
+    const TFormValidators extends FormValidators<any>,
+    TFormData extends FormValidatorData<TFormValidators>,
+    TSubmitReturn,
+  >(
+    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
+  ) => AppFormOptions<
+    FormValidatorData<TFormValidators>,
+    TFormValidators,
+    TSubmitReturn,
+    TComponents
+  >
+
+  looseSchema: <
+    const TFormValidators extends FormValidators<any>,
+    const TFormData extends NullableSchemaData<TFormValidators>,
+    TSubmitReturn,
+  >(
+    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
+  ) => AppFormOptions<
+    InferUnion<TFormData, FormValidatorData<TFormValidators>>,
+    TFormValidators,
+    TSubmitReturn,
+    TComponents
+  >
+}

package/src/AppForm/componentMap.public.ts

@@ -0,0 +1,19 @@
+import type { Component } from 'vue'
+
+export interface VueFormComponentMap<
+  TFormComponents extends Record<string, Component>,
+  TFieldComponents extends Record<string, Component>,
+> {
+  formComponents: TFormComponents
+  fieldComponents: TFieldComponents
+}
+
+export type AnyVueFormComponentMap = VueFormComponentMap<
+  Record<string, Component>,
+  Record<string, Component>
+>
+
+export type DefaultVueFormComponentMap = VueFormComponentMap<
+  Record<never, never>,
+  Record<never, never>
+>

package/src/AppForm/contexts.lib.ts

@@ -0,0 +1,31 @@
+import { inject } from 'vue'
+import type { InjectionKey } from 'vue'
+import type { AnyInternalFieldApi } from '@tanstack/form-core/internals'
+import type { InternalVueFormApi } from '../VueForm/VueFormApi.lib'
+
+export const FormContext = Symbol(
+  'TanStackForm.FormContext',
+) as InjectionKey<InternalVueFormApi>
+export const FieldContext = Symbol(
+  'TanStackForm.FieldContext',
+) as InjectionKey<AnyInternalFieldApi>
+
+export function useFieldContext(): AnyInternalFieldApi {
+  const field = inject(FieldContext)
+  if (field === undefined) {
+    throw new Error(
+      'TanStack Form: Field components must be used within a `form.Field` component.',
+    )
+  }
+  return field
+}
+
+export function useFormContext(): InternalVueFormApi {
+  const form = inject(FormContext)
+  if (form === undefined) {
+    throw new Error(
+      'TanStack Form: Form components must be used within a `form.AppForm` component.',
+    )
+  }
+  return form
+}

package/src/AppForm/createFormHook.public.ts

@@ -0,0 +1,32 @@
+import { useInternalForm } from '../VueForm/VueFormApi.lib'
+import { defineFieldGroup } from '../FieldGroup/withFields.public'
+import { createAppFormInitializer } from './initializeAppForm.lib'
+import { useFormContext } from './contexts.lib'
+import type { AppFormOptionsApi } from './appFormOptions.public'
+import type { AnyVueFormComponentMap } from './componentMap.public'
+import type {
+  AppFormHookResult,
+  UseAppFormHook,
+} from './createFormHookTypes.public'
+import type { FormOptions } from '@tanstack/form-core'
+
+const appFormOptions = ((opts: unknown) => opts) as AppFormOptionsApi<any>
+appFormOptions.strictSchema = (opts) => opts as never
+appFormOptions.looseSchema = (opts) => opts as never
+
+export function createFormHook<
+  const TComponents extends AnyVueFormComponentMap,
+>(createOptions: TComponents): AppFormHookResult<TComponents> {
+  const initializeAppForm = createAppFormInitializer(createOptions)
+
+  function useExtendedForm(options: FormOptions<any, any, any>) {
+    return useInternalForm(options, initializeAppForm)
+  }
+
+  return {
+    useFormContext: useFormContext as never,
+    appFormOptions,
+    defineAppFieldGroup: defineFieldGroup,
+    useAppForm: useExtendedForm as never as UseAppFormHook<TComponents>,
+  }
+}

package/src/AppForm/createFormHookTypes.public.ts

@@ -0,0 +1,28 @@
+import type { AppFormOptionsApi } from './appFormOptions.public'
+import type { AnyVueFormComponentMap } from './componentMap.public'
+import type { VueAppFormApi } from './VueAppFormApi.public'
+import type { DefineFieldGroupFn } from '../FieldGroup/withFields.public'
+import type {
+  FormOptions,
+  FormValidators,
+  ToFormErrorTypes,
+} from '@tanstack/form-core'
+
+export type UseAppFormHook<TComponents extends AnyVueFormComponentMap> = <
+  TFormData,
+  const TFormValidators extends FormValidators<TFormData>,
+  TSubmitReturn,
+>(
+  options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
+) => VueAppFormApi<
+  TFormData,
+  ToFormErrorTypes<TFormValidators, TSubmitReturn>,
+  TComponents
+>
+
+export interface AppFormHookResult<TComponents extends AnyVueFormComponentMap> {
+  appFormOptions: AppFormOptionsApi<TComponents>
+  defineAppFieldGroup: DefineFieldGroupFn<TComponents['fieldComponents']>
+  useAppForm: UseAppFormHook<TComponents>
+  useFormContext: () => VueAppFormApi<any, any, TComponents>
+}

package/src/AppForm/fieldComponentHelpers.lib.ts

@@ -0,0 +1,21 @@
+import { defineComponent, h } from 'vue'
+import { useFieldContext } from './contexts.lib'
+import type { Component } from 'vue'
+
+export function wrapField(
+  component: Component,
+  fieldPropKey: string,
+): Component {
+  return defineComponent(
+    (_props, context) => {
+      const field = useFieldContext()
+      return () =>
+        h(component, { ...context.attrs, [fieldPropKey]: field }, context.slots)
+    },
+    { name: 'TanStackForm.FieldComponent', inheritAttrs: false },
+  )
+}
+
+export function brandComponentFactory(): (component: Component) => Component {
+  return (component) => component
+}

package/src/AppForm/getFormHookHelpers.public.ts

@@ -0,0 +1,109 @@
+import { brandComponentFactory, wrapField } from './fieldComponentHelpers.lib'
+import type { FieldWithValue } from '@tanstack/form-core'
+import type { Component, PublicProps } from 'vue'
+import type { VueComponentInstance } from '../vueTypes.lib'
+
+type ExactFieldBrand<out TValue> = {
+  readonly __tanstackFieldExactType: TValue
+}
+
+type AcceptsFieldBrand<out TAcceptedValue> = {
+  readonly __tanstackFieldAcceptsType: TAcceptedValue
+}
+
+type AnyFieldComponent = Component
+type PropsOf<TComponent> = TComponent extends new (...args: any[]) => {
+  $props: infer TProps
+}
+  ? Omit<TProps, keyof PublicProps>
+  : never
+type FieldValuePropKeys<TProps> = {
+  [K in keyof TProps]-?: TProps[K] extends FieldWithValue<any> ? K : never
+}[keyof TProps]
+type FieldValueFromProp<TProp> =
+  TProp extends FieldWithValue<infer TValue> ? TValue : never
+type FieldValueFromComponentProp<
+  TProps,
+  TFieldPropKey extends keyof TProps,
+> = FieldValueFromProp<TProps[TFieldPropKey]>
+type PublicPropsReplacingField<
+  TProps,
+  TFieldPropKey extends keyof TProps,
+> = Omit<TProps, TFieldPropKey>
+
+type StrictInjectedFieldComponent<
+  TComponent extends AnyFieldComponent,
+  TProps = PropsOf<TComponent>,
+  TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>,
+> = (new (
+  props: PublicPropsReplacingField<TProps, TFieldPropKey> & PublicProps,
+) => VueComponentInstance<
+  PublicPropsReplacingField<TProps, TFieldPropKey> & Record<string, any>,
+  {}
+>) &
+  ExactFieldBrand<FieldValueFromComponentProp<TProps, TFieldPropKey>>
+
+type LooseInjectedFieldComponent<
+  TComponent extends AnyFieldComponent,
+  TProps = PropsOf<TComponent>,
+  TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>,
+> = (new (
+  props: PublicPropsReplacingField<TProps, TFieldPropKey> & PublicProps,
+) => VueComponentInstance<
+  PublicPropsReplacingField<TProps, TFieldPropKey> & Record<string, any>,
+  {}
+>) &
+  AcceptsFieldBrand<FieldValueFromComponentProp<TProps, TFieldPropKey>>
+
+type StrictBrandedFieldComponent<TComponent, TValue> = TComponent &
+  ExactFieldBrand<TValue>
+type LooseBrandedFieldComponent<TComponent, TValue> = TComponent &
+  AcceptsFieldBrand<TValue>
+
+interface FieldComponentHelper {
+  strict: <
+    TComponent extends AnyFieldComponent,
+    TProps = PropsOf<TComponent>,
+    TFieldPropKey extends FieldValuePropKeys<TProps> =
+      FieldValuePropKeys<TProps>,
+  >(
+    component: TComponent,
+    fieldPropKey: TFieldPropKey,
+  ) => StrictInjectedFieldComponent<TComponent, TProps, TFieldPropKey>
+  loose: <
+    TComponent extends AnyFieldComponent,
+    TProps = PropsOf<TComponent>,
+    TFieldPropKey extends FieldValuePropKeys<TProps> =
+      FieldValuePropKeys<TProps>,
+  >(
+    component: TComponent,
+    fieldPropKey: TFieldPropKey,
+  ) => LooseInjectedFieldComponent<TComponent, TProps, TFieldPropKey>
+}
+
+interface FieldBrandHelper {
+  strict: <TValue>() => <TComponent extends AnyFieldComponent>(
+    component: TComponent,
+  ) => StrictBrandedFieldComponent<TComponent, TValue>
+  loose: <TValue>() => <TComponent extends AnyFieldComponent>(
+    component: TComponent,
+  ) => LooseBrandedFieldComponent<TComponent, TValue>
+}
+
+export interface FormHookHelpers {
+  fieldBrand: FieldBrandHelper
+  fieldComponent: FieldComponentHelper
+}
+
+export function getFormHookHelpers(): FormHookHelpers {
+  return {
+    fieldComponent: {
+      loose: wrapField as FieldComponentHelper['loose'],
+      strict: wrapField as FieldComponentHelper['strict'],
+    },
+    fieldBrand: {
+      loose: brandComponentFactory as FieldBrandHelper['loose'],
+      strict: brandComponentFactory as FieldBrandHelper['strict'],
+    },
+  }
+}

package/src/AppForm/initializeAppForm.lib.ts

@@ -0,0 +1,18 @@
+import { InternalFormApi } from '@tanstack/form-core/internals'
+import { attachVueAppFormComponents } from './Components.lib'
+import type { FormOptions } from '@tanstack/form-core'
+import type { InternalVueFormApi } from '../VueForm/VueFormApi.lib'
+import type { AnyVueFormComponentMap } from './componentMap.public'
+
+export function createAppFormInitializer<
+  TComponents extends AnyVueFormComponentMap,
+>(
+  createOptions: TComponents,
+): (options: FormOptions<any, any, any>) => InternalVueFormApi {
+  return (options) =>
+    attachVueAppFormComponents(
+      new InternalFormApi(options),
+      createOptions.formComponents,
+      createOptions.fieldComponents,
+    ) as never
+}