Move to Alien-Signals Based Store (#2035)

* chore: naive migrate to new store package

* chore: pass all core tests

* chore: migrate React Form as well

* ci: apply automated fixes and generate docs

* chore: fix various other issues

* chore: add changeset

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: crutchcorn

.changeset/silly-swans-take.md

@@ -0,0 +1,11 @@
+---
+'@tanstack/angular-form': patch
+'@tanstack/svelte-form': patch
+'@tanstack/react-form': patch
+'@tanstack/solid-form': patch
+'@tanstack/form-core': patch
+'@tanstack/lit-form': patch
+'@tanstack/vue-form': patch
+---
+
+Refactor internals for substancially faster performance

examples/react/next-server-actions-zod/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@tanstack/react-form-nextjs": "^1.28.3",
-    "@tanstack/react-store": "^0.8.1",
+    "@tanstack/react-store": "^0.9.1",
     "next": "16.0.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

examples/react/next-server-actions/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@tanstack/react-form-nextjs": "^1.28.3",
-    "@tanstack/react-store": "^0.8.1",
+    "@tanstack/react-store": "^0.9.1",
     "next": "16.0.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

examples/react/remix/package.json

@@ -12,7 +12,7 @@
     "@remix-run/react": "^2.17.1",
     "@remix-run/serve": "^2.17.1",
     "@tanstack/react-form-remix": "^1.28.3",
-    "@tanstack/react-store": "^0.8.1",
+    "@tanstack/react-store": "^0.9.1",
     "isbot": "^5.1.30",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

examples/react/tanstack-start/package.json

@@ -14,7 +14,7 @@
     "@tanstack/react-form-start": "^1.28.3",
     "@tanstack/react-router": "^1.134.9",
     "@tanstack/react-start": "^1.134.9",
-    "@tanstack/react-store": "^0.8.1",
+    "@tanstack/react-store": "^0.9.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

packages/angular-form/package.json

@@ -42,7 +42,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/angular-store": "^0.8.1",
+    "@tanstack/angular-store": "^0.9.1",
     "@tanstack/form-core": "workspace:*",
     "tslib": "^2.8.1"
   },

packages/form-core/package.json

@@ -53,7 +53,7 @@
   "dependencies": {
     "@tanstack/devtools-event-client": "^0.4.0",
     "@tanstack/pacer-lite": "^0.1.1",
-    "@tanstack/store": "^0.8.1"
+    "@tanstack/store": "^0.9.1"
   },
   "devDependencies": {
     "arktype": "^2.1.22",

packages/form-core/src/FieldApi.ts

@@ -1,4 +1,4 @@
-import { Derived, batch } from '@tanstack/store'
+import { batch, createStore } from '@tanstack/store'
 import {
   isStandardSchemaValidator,
   standardSchemaValidators,
@@ -8,11 +8,11 @@ import {
   determineFieldLevelErrorSourceAndValue,
   evaluate,
   getAsyncValidatorArray,
-  getBy,
   getSyncValidatorArray,
   mergeOpts,
 } from './utils'
 import { defaultValidationLogic } from './ValidationLogic'
+import type { ReadonlyStore } from '@tanstack/store'
 import type { DeepKeys, DeepValue, UnwrapOneLevelOfArray } from './util-types'
 import type {
   StandardSchemaV1,
@@ -1090,7 +1090,7 @@ export class FieldApi<
   /**
    * The field state store.
    */
-  store!: Derived<
+  store!: ReadonlyStore<
     FieldState<
       TParentData,
       TName,
@@ -1167,10 +1167,9 @@ export class FieldApi<
       formListeners: {} as Record<ListenerCause, never>,
     }
 
-    this.store = new Derived({
-      deps: [this.form.store],
-      fn: ({ prevVal: _prevVal }) => {
-        const prevVal = _prevVal as
+    this.store = createStore(
+      (
+        prevVal:
           | FieldState<
               TParentData,
               TName,
@@ -1194,7 +1193,10 @@ export class FieldApi<
               TFormOnDynamic,
               TFormOnDynamicAsync
             >
-          | undefined
+          | undefined,
+      ) => {
+        // Temp hack to subscribe to form.store
+        this.form.store.get()
 
         const meta = this.form.getFieldMeta(this.name) ?? {
           ...defaultFieldMeta,
@@ -1242,7 +1244,7 @@ export class FieldApi<
           TFormOnDynamicAsync
         >
       },
-    })
+    )
   }
 
   /**
@@ -1275,8 +1277,6 @@ export class FieldApi<
    * Mounts the field instance to the form.
    */
   mount = () => {
-    const cleanup = this.store.mount()
-
     if (this.options.defaultValue !== undefined && !this.getMeta().isTouched) {
       this.form.setFieldValue(this.name, this.options.defaultValue, {
         dontUpdateMeta: true,
@@ -1322,7 +1322,8 @@ export class FieldApi<
       fieldApi: this,
     })
 
-    return cleanup
+    // TODO: Remove
+    return () => {}
   }
 
   /**

packages/form-core/src/FieldGroupApi.ts

@@ -1,5 +1,6 @@
-import { Derived } from '@tanstack/store'
+import { createStore } from '@tanstack/store'
 import { concatenatePaths, getBy, makePathArray } from './utils'
+import type { ReadonlyStore } from '@tanstack/store'
 import type { Updater } from './utils'
 import type {
   FormApi,
@@ -225,7 +226,7 @@ export class FieldGroupApi<
     return newProps
   }
 
-  store: Derived<FieldGroupState<TFieldGroupData>>
+  store: ReadonlyStore<FieldGroupState<TFieldGroupData>>
 
   get state() {
     return this.store.state
@@ -275,38 +276,35 @@ export class FieldGroupApi<
       this.fieldsMap = opts.fields
     }
 
-    this.store = new Derived({
-      deps: [this.form.store],
-      fn: ({ currDepVals }) => {
-        const currFormStore = currDepVals[0]
-        let values: TFieldGroupData
-        if (typeof this.fieldsMap === 'string') {
-          // all values live at that name, so we can directly fetch it
-          values = getBy(currFormStore.values, this.fieldsMap)
-        } else {
-          // we need to fetch the values from all places where they were mapped from
-          values = {} as never
-          const fields: Record<keyof TFieldGroupData, string> = this
-            .fieldsMap as never
-          for (const key in fields) {
-            values[key] = getBy(currFormStore.values, fields[key])
-          }
+    this.store = createStore(() => {
+      const currFormStore = this.form.store.get()
+      let values: TFieldGroupData
+      if (typeof this.fieldsMap === 'string') {
+        // all values live at that name, so we can directly fetch it
+        values = getBy(currFormStore.values, this.fieldsMap)
+      } else {
+        // we need to fetch the values from all places where they were mapped from
+        values = {} as never
+        const fields: Record<keyof TFieldGroupData, string> = this
+          .fieldsMap as never
+        for (const key in fields) {
+          values[key] = getBy(currFormStore.values, fields[key])
         }
+      }
 
-        return {
-          values,
-        }
-      },
+      return {
+        values,
+      }
     })
   }
 
   /**
    * Mounts the field group instance to listen to value changes.
+   *
+   * TODO: Remove
    */
   mount = () => {
-    const cleanup = this.store.mount()
-
-    return cleanup
+    return () => {}
   }
 
   /**