Merge branch 'main' into preact-integration

Author: KevinVandy

.changeset/new-cameras-itch.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-form': patch
+---
+
+Reimplement fallback selector for Subscribe component

.changeset/polite-wombats-send.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-form': patch
+---
+
+Use a named function for the `withForm` HOC return to enable Fast Refresh.

docs/framework/react/guides/ssr.md

@@ -106,8 +106,8 @@ Finally, we'll use `getFormDataFromServer` in our loader to get the state from o
 
 ```tsx
 // app/routes/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
 import {
-  createFileRoute
   mergeForm,
   useForm,
   useStore,

docs/framework/vue/guides/arrays.md

@@ -7,8 +7,7 @@ TanStack Form supports arrays as values in a form, including sub-object values i
 
 ## Basic Usage
 
-To use an array, you can use `field.state.value` on an array value in conjunction
-with [`Index` from `solid-js`](https://www.solidjs.com/tutorial/flow_index):
+To use an array, you can use `field.state.value` on an array value in conjunction with `v-for`:
 
 ```vue
 <script setup lang="ts">

docs/framework/vue/guides/async-initial-values.md

@@ -21,7 +21,7 @@ As such, this guide shows you how you can mix-n-match TanStack Form with TanStac
 <script setup lang="ts">
 import { useForm } from '@tanstack/vue-form'
 import { useQuery } from '@tanstack/vue-query'
-import { watchEffect, reactive } from 'vue'
+import { watchEffect, reactive, computed } from 'vue'
 
 const { data, isLoading } = useQuery({
   queryKey: ['data'],

packages/form-core/tests/utils.spec.ts

@@ -692,6 +692,67 @@ describe('evaluate', () => {
     const dateObjectFalse = evaluate({ date: date1 }, { date: date3 })
     expect(dateObjectFalse).toEqual(false)
   })
+
+  it('should test equality between Map objects', () => {
+    const map1 = new Map([
+      ['a', 1],
+      ['b', 2],
+    ])
+    const map2 = new Map([
+      ['a', 1],
+      ['b', 2],
+    ])
+    expect(evaluate(map1, map2)).toEqual(true)
+
+    const emptyMap1 = new Map()
+    const emptyMap2 = new Map()
+    expect(evaluate(emptyMap1, emptyMap2)).toEqual(true)
+
+    const mapSmall = new Map([['a', 1]])
+    const mapLarge = new Map([
+      ['a', 1],
+      ['b', 2],
+    ])
+    expect(evaluate(mapSmall, mapLarge)).toEqual(false)
+
+    const mapA = new Map([
+      ['a', 1],
+      ['b', 2],
+    ])
+    const mapC = new Map([
+      ['a', 1],
+      ['c', 2],
+    ])
+    expect(evaluate(mapA, mapC)).toEqual(false)
+
+    const mapVal1 = new Map([
+      ['a', 1],
+      ['b', 2],
+    ])
+    const mapVal2 = new Map([
+      ['a', 1],
+      ['b', 3],
+    ])
+    expect(evaluate(mapVal1, mapVal2)).toEqual(false)
+  })
+
+  it('should test equality between Set objects', () => {
+    const set1 = new Set([1, 2, 3])
+    const set2 = new Set([1, 2, 3])
+    expect(evaluate(set1, set2)).toEqual(true)
+
+    const emptySet1 = new Set()
+    const emptySet2 = new Set()
+    expect(evaluate(emptySet1, emptySet2)).toEqual(true)
+
+    const setSmall = new Set([1, 2])
+    const setLarge = new Set([1, 2, 3])
+    expect(evaluate(setSmall, setLarge)).toEqual(false)
+
+    const setA = new Set([1, 2, 3])
+    const setB = new Set([1, 2, 4])
+    expect(evaluate(setA, setB)).toEqual(false)
+  })
 })
 
 describe('concatenatePaths', () => {

packages/react-form/src/createFormHook.tsx

@@ -448,7 +448,9 @@ export function createFormHook<
     UnwrapOrAny<TFormComponents>,
     UnwrapOrAny<TRenderProps>
   >['render'] {
-    return (innerProps) => render({ ...props, ...innerProps })
+    return function Render(innerProps) {
+      return render({ ...props, ...innerProps })
+    }
   }
 
   function withFieldGroup<

packages/react-form/src/useFieldGroup.tsx

@@ -23,11 +23,11 @@ import type { LensFieldComponent } from './useField'
 
 function LocalSubscribe({
   lens,
-  selector,
+  selector = (state) => state,
   children,
 }: PropsWithChildren<{
   lens: AnyFieldGroupApi
-  selector: (state: FieldGroupState<any>) => FieldGroupState<any>
+  selector?: (state: FieldGroupState<any>) => FieldGroupState<any>
 }>): ReturnType<FunctionComponent> {
   const data = useStore(lens.store, selector)
 

packages/react-form/src/useForm.tsx

@@ -139,11 +139,11 @@ export type ReactFormExtendedApi<
 
 function LocalSubscribe({
   form,
-  selector,
+  selector = (state) => state,
   children,
 }: PropsWithChildren<{
   form: AnyFormApi
-  selector: (state: AnyFormState) => AnyFormState
+  selector?: (state: AnyFormState) => AnyFormState
 }>): ReturnType<FunctionComponent> {
   const data = useStore(form.store, selector)
 

packages/react-form/tests/createFormHook.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { render } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import { formOptions } from '@tanstack/form-core'
 import userEvent from '@testing-library/user-event'
 import { createFormHook, createFormHookContexts, useStore } from '../src'
@@ -699,4 +699,63 @@ describe('createFormHook', () => {
     const button = getByText('Testing')
     expect(button).toBeInTheDocument()
   })
+
+  it('should render FieldGroup Subscribe without selector (default identity)', async () => {
+    const formOpts = formOptions({
+      defaultValues: {
+        person: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      },
+    })
+
+    const ChildFormAsField = withFieldGroup({
+      defaultValues: formOpts.defaultValues.person,
+      render: ({ group }) => {
+        return (
+          <div>
+            <group.Field
+              name="lastName"
+              children={(field) => (
+                <label>
+                  Last Name:
+                  <input
+                    data-testid="lastName"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                </label>
+              )}
+            />
+            <group.Subscribe
+              children={(state) => (
+                <span data-testid="state-lastName">
+                  {state.values.lastName}
+                </span>
+              )}
+            />
+          </div>
+        )
+      },
+    })
+
+    const Parent = () => {
+      const form = useAppForm({
+        ...formOpts,
+      })
+      return <ChildFormAsField form={form} fields="person" />
+    }
+
+    const { getByTestId } = render(<Parent />)
+    const input = getByTestId('lastName')
+    const stateLastName = getByTestId('state-lastName')
+
+    expect(stateLastName).toHaveTextContent('LastName')
+
+    await user.clear(input)
+    await user.type(input, 'Updated')
+    await waitFor(() => expect(stateLastName).toHaveTextContent('Updated'))
+  })
 })