@tanstack/svelte-form 1.33.0 → 1.33.1

package/dist/Field.svelte

@@ -8,7 +8,7 @@
     type FormAsyncValidateOrFn,
     type FormValidateOrFn,
   } from '@tanstack/form-core'
-  import { useStore } from '@tanstack/svelte-store'
+  import { useSelector } from '@tanstack/svelte-store'
   import { onMount, type Snippet } from 'svelte'
   import type { CreateFieldOptions } from './types.js'
 
@@ -96,26 +96,26 @@
       api.update(current)
     })
 
-    const storeSub = useStore(api.store, (state) =>
+    const storeSub = useSelector(api.store, (state) =>
       options.mode === 'array'
         ? state.meta._arrayVersion || 0
         : state.value,
     )
-    const metaIsTouchedSub = useStore(
+    const metaIsTouchedSub = useSelector(
       api.store,
       (state) => state.meta.isTouched,
     )
-    const metaIsBlurredSub = useStore(
+    const metaIsBlurredSub = useSelector(
       api.store,
       (state) => state.meta.isBlurred,
     )
-    const metaIsDirtySub = useStore(api.store, (state) => state.meta.isDirty)
-    const metaErrorMapSub = useStore(api.store, (state) => state.meta.errorMap)
-    const metaErrorSourceMapSub = useStore(
+    const metaIsDirtySub = useSelector(api.store, (state) => state.meta.isDirty)
+    const metaErrorMapSub = useSelector(api.store, (state) => state.meta.errorMap)
+    const metaErrorSourceMapSub = useSelector(
       api.store,
       (state) => state.meta.errorSourceMap,
     )
-    const metaIsValidatingSub = useStore(
+    const metaIsValidatingSub = useSelector(
       api.store,
       (state) => state.meta.isValidating,
     )

package/dist/FormGroup.svelte

@@ -9,7 +9,7 @@
     type FormAsyncValidateOrFn,
     type FormValidateOrFn,
   } from '@tanstack/form-core'
-  import { useStore } from '@tanstack/svelte-store'
+  import { useSelector } from '@tanstack/svelte-store'
   import { onMount, type Snippet } from 'svelte'
 
   export function createFormGroup<
@@ -108,7 +108,7 @@
       api.update(current)
     })
 
-    const storeSub = useStore(api.store)
+    const storeSub = useSelector(api.store)
     Object.defineProperty(extendedApi, 'state', {
       get() {
         return storeSub.current

package/dist/Subscribe.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { useStore } from '@tanstack/svelte-store'
+  import { useSelector } from '@tanstack/svelte-store'
 
   // Don't bother typing this out, this component is only usable through a wrapper
   interface Props {
@@ -10,7 +10,7 @@
 
   let { children, store, selector = (state) => state }: Props = $props()
 
-  const value = useStore(store, selector)
+  const value = useSelector(store, selector)
 </script>
 
 {@render children(value.current)}

package/dist/createForm.svelte.d.ts

@@ -5,6 +5,12 @@ import type { FieldComponent, FormGroupComponent, WithoutFunction } from './type
 export interface SvelteFormApi<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta> {
     Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
     FormGroup: FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+    useSelector: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected) => {
+        current: TSelected;
+    };
+    /**
+     * @deprecated Use `form.useSelector` instead.
+     */
     useStore: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected) => {
         current: TSelected;
     };

package/dist/createForm.svelte.js

@@ -1,5 +1,5 @@
 import { FormApi } from '@tanstack/form-core';
-import { useStore } from '@tanstack/svelte-store';
+import { useSelector } from '@tanstack/svelte-store';
 import { onMount } from 'svelte';
 import Field from './Field.svelte';
 import FormGroup from './FormGroup.svelte';
@@ -12,7 +12,9 @@ export function createForm(opts) {
     extendedApi.Field = (internal, props) => Field(internal, { ...props, form: api });
     // @ts-expect-error constructor definition exists only on a type level
     extendedApi.FormGroup = (internal, props) => FormGroup(internal, { ...props, form: api });
-    extendedApi.useStore = (selector) => useStore(api.store, selector);
+    extendedApi.useSelector = (selector) => useSelector(api.store, selector);
+    /** @deprecated Use `form.useSelector` instead. */
+    extendedApi.useStore = extendedApi.useSelector;
     // @ts-expect-error constructor definition exists only on a type level
     extendedApi.Subscribe = (internal, props) => Subscribe(internal, { ...props, store: api.store });
     onMount(api.mount);

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export * from '@tanstack/form-core';
-export { useStore } from '@tanstack/svelte-store';
+export { useSelector, useStore } from '@tanstack/svelte-store';
 export { createForm, type SvelteFormApi } from './createForm.svelte.js';
 export { default as Field, createField } from './Field.svelte';
 export { default as FormGroup, createFormGroup } from './FormGroup.svelte';

package/dist/index.js

@@ -1,5 +1,5 @@
 export * from '@tanstack/form-core';
-export { useStore } from '@tanstack/svelte-store';
+export { useSelector, useStore } from '@tanstack/svelte-store';
 export { createForm } from './createForm.svelte.js';
 export { default as Field, createField } from './Field.svelte';
 export { default as FormGroup, createFormGroup } from './FormGroup.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-form",
-  "version": "1.33.0",
+  "version": "1.33.1",
   "description": "Powerful, type-safe forms for Svelte.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/form-core": "1.33.0"
+    "@tanstack/form-core": "1.33.1"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.3",

package/src/Field.svelte

@@ -8,7 +8,7 @@
     type FormAsyncValidateOrFn,
     type FormValidateOrFn,
   } from '@tanstack/form-core'
-  import { useStore } from '@tanstack/svelte-store'
+  import { useSelector } from '@tanstack/svelte-store'
   import { onMount, type Snippet } from 'svelte'
   import type { CreateFieldOptions } from './types.js'
 
@@ -96,26 +96,26 @@
       api.update(current)
     })
 
-    const storeSub = useStore(api.store, (state) =>
+    const storeSub = useSelector(api.store, (state) =>
       options.mode === 'array'
         ? state.meta._arrayVersion || 0
         : state.value,
     )
-    const metaIsTouchedSub = useStore(
+    const metaIsTouchedSub = useSelector(
       api.store,
       (state) => state.meta.isTouched,
     )
-    const metaIsBlurredSub = useStore(
+    const metaIsBlurredSub = useSelector(
       api.store,
       (state) => state.meta.isBlurred,
     )
-    const metaIsDirtySub = useStore(api.store, (state) => state.meta.isDirty)
-    const metaErrorMapSub = useStore(api.store, (state) => state.meta.errorMap)
-    const metaErrorSourceMapSub = useStore(
+    const metaIsDirtySub = useSelector(api.store, (state) => state.meta.isDirty)
+    const metaErrorMapSub = useSelector(api.store, (state) => state.meta.errorMap)
+    const metaErrorSourceMapSub = useSelector(
       api.store,
       (state) => state.meta.errorSourceMap,
     )
-    const metaIsValidatingSub = useStore(
+    const metaIsValidatingSub = useSelector(
       api.store,
       (state) => state.meta.isValidating,
     )

package/src/FormGroup.svelte

@@ -9,7 +9,7 @@
     type FormAsyncValidateOrFn,
     type FormValidateOrFn,
   } from '@tanstack/form-core'
-  import { useStore } from '@tanstack/svelte-store'
+  import { useSelector } from '@tanstack/svelte-store'
   import { onMount, type Snippet } from 'svelte'
 
   export function createFormGroup<
@@ -108,7 +108,7 @@
       api.update(current)
     })
 
-    const storeSub = useStore(api.store)
+    const storeSub = useSelector(api.store)
     Object.defineProperty(extendedApi, 'state', {
       get() {
         return storeSub.current

package/src/Subscribe.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { useStore } from '@tanstack/svelte-store'
+  import { useSelector } from '@tanstack/svelte-store'
 
   // Don't bother typing this out, this component is only usable through a wrapper
   interface Props {
@@ -10,7 +10,7 @@
 
   let { children, store, selector = (state) => state }: Props = $props()
 
-  const value = useStore(store, selector)
+  const value = useSelector(store, selector)
 </script>
 
 {@render children(value.current)}

package/src/createForm.svelte.ts

@@ -1,5 +1,5 @@
 import { FormApi } from '@tanstack/form-core'
-import { useStore } from '@tanstack/svelte-store'
+import { useSelector } from '@tanstack/svelte-store'
 import { onMount } from 'svelte'
 import Field from './Field.svelte'
 import FormGroup from './FormGroup.svelte'
@@ -64,6 +64,44 @@ export interface SvelteFormApi<
     TFormOnServer,
     TSubmitMeta
   >
+  useSelector: <
+    TSelected = NoInfer<
+      FormState<
+        TParentData,
+        TFormOnMount,
+        TFormOnChange,
+        TFormOnChangeAsync,
+        TFormOnBlur,
+        TFormOnBlurAsync,
+        TFormOnSubmit,
+        TFormOnSubmitAsync,
+        TFormOnDynamic,
+        TFormOnDynamicAsync,
+        TFormOnServer
+      >
+    >,
+  >(
+    selector?: (
+      state: NoInfer<
+        FormState<
+          TParentData,
+          TFormOnMount,
+          TFormOnChange,
+          TFormOnChangeAsync,
+          TFormOnBlur,
+          TFormOnBlurAsync,
+          TFormOnSubmit,
+          TFormOnSubmitAsync,
+          TFormOnDynamic,
+          TFormOnDynamicAsync,
+          TFormOnServer
+        >
+      >,
+    ) => TSelected,
+  ) => { current: TSelected }
+  /**
+   * @deprecated Use `form.useSelector` instead.
+   */
   useStore: <
     TSelected = NoInfer<
       FormState<
@@ -295,7 +333,9 @@ export function createForm<
   // @ts-expect-error constructor definition exists only on a type level
   extendedApi.FormGroup = (internal, props) =>
     FormGroup(internal, { ...props, form: api as never } as never)
-  extendedApi.useStore = (selector) => useStore(api.store, selector)
+  extendedApi.useSelector = (selector) => useSelector(api.store, selector)
+  /** @deprecated Use `form.useSelector` instead. */
+  extendedApi.useStore = extendedApi.useSelector
   // @ts-expect-error constructor definition exists only on a type level
   extendedApi.Subscribe = (internal, props) =>
     Subscribe(internal, { ...props, store: api.store })

package/src/index.ts

@@ -1,6 +1,6 @@
 export * from '@tanstack/form-core'
 
-export { useStore } from '@tanstack/svelte-store'
+export { useSelector, useStore } from '@tanstack/svelte-store'
 
 export { createForm, type SvelteFormApi } from './createForm.svelte.js'