Merge pull request #3 from TanStack/main

merge upstream edits

Author: ws-rush

.changeset/eight-dolls-wash.md

@@ -35,6 +35,6 @@ jobs:
         if: ${{ github.event_name == 'push' || github.event.inputs.generate-docs == true }}
         run: pnpm generate-docs
       - name: Apply fixes
-        uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27
+        uses: autofix-ci/action@7a166d7532b277f34e16238930461bf77f9d7ed8
         with:
           commit-message: 'ci: apply automated fixes and generate docs'

.changeset/green-tips-do.md

@@ -248,6 +248,61 @@ const ChildForm = withForm({
 })
 ```
 
+### Context as a last resort
+
+There are cases where passing `form` with `withForm` is not feasible. You may encounter it with components that don't
+allow you to change their props.
+
+For example, consider the following TanStack Router usage:
+
+```ts
+function RouteComponent() {
+  const form = useAppForm({...formOptions, /* ... */ })
+  // <Outlet /> cannot be customized or receive additional props
+  return <Outlet />
+}
+```
+
+In edge cases like this, a context-based fallback is available to access the form instance.
+
+```ts
+const { useAppForm, useTypedAppFormContext } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {},
+  formComponents: {},
+})
+```
+
+> [!IMPORTANT] Type safety
+> This mechanism exists solely to bridge integration constraints and should be avoided whenever `withForm` is possible.
+> Context will not warn you when the types do not align. You risk runtime errors with this implementation.
+
+Usage:
+
+```tsx
+// sharedOpts.ts
+const formOpts = formOptions({
+  /* ... */
+})
+
+function ParentComponent() {
+  const form = useAppForm({ ...formOptions /* ... */ })
+
+  return (
+    <form.AppForm>
+      <ChildComponent />
+    </form.AppForm>
+  )
+}
+
+function ChildComponent() {
+  const form = useTypedAppFormContext({ ...formOptions })
+
+  // You now have access to form components, field components and fields
+}
+```
+
 ## Reusing groups of fields in multiple forms
 
 Sometimes, a pair of fields are so closely related that it makes sense to group and reuse them — like the password example listed in the [linked fields guide](./linked-fields.md). Instead of repeating this logic across multiple forms, you can utilize the `withFieldGroup` higher-order component.

.github/workflows/autofix.yml

@@ -29,8 +29,6 @@ Defined in: [packages/react-form/src/createFormHook.tsx:293](https://github.com/
 
 ## Returns
 
-`object`
-
 ### useAppForm()
 
 ```ts
@@ -97,6 +95,76 @@ useAppForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsy
 
 `AppFieldExtendedReactFormApi`\<`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
 
+### useTypedAppFormContext()
+
+```ts
+useTypedAppFormContext: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(_props) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+```
+
+⚠️ **Use withForm whenever possible.**
+
+Gets a typed form from the `<form.AppForm />` context.
+
+#### Type Parameters
+
+##### TFormData
+
+`TFormData`
+
+##### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\<`TFormData`\> \| `undefined`
+
+##### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\<`TFormData`\> \| `undefined`
+
+##### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\<`TFormData`\> \| `undefined`
+
+##### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\<`TFormData`\> \| `undefined`
+
+##### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\<`TFormData`\> \| `undefined`
+
+##### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\<`TFormData`\> \| `undefined`
+
+##### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\<`TFormData`\> \| `undefined`
+
+##### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\<`TFormData`\> \| `undefined`
+
+##### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\<`TFormData`\> \| `undefined`
+
+##### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\<`TFormData`\> \| `undefined`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+#### Parameters
+
+##### \_props
+
+`FormOptions`\<`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`AppFieldExtendedReactFormApi`\<`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+
 ### withFieldGroup()
 
 ```ts

docs/framework/react/guides/form-composition.md

@@ -9,7 +9,7 @@ title: createFormHookContexts
 function createFormHookContexts(): object;
 ```
 
-Defined in: [packages/react-form/src/createFormHook.tsx:68](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L68)
+Defined in: [packages/react-form/src/createFormHook.tsx:95](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L95)
 
 ## Returns
 

docs/framework/react/reference/functions/createFormHook.md

@@ -14,7 +14,7 @@ function useStore<TState, TSelected>(
    options?): TSelected;
 ```
 
-Defined in: node\_modules/.pnpm/@tanstack+react-store@0.8.0\_react-dom@19.1.0\_react@19.1.0\_\_react@19.1.0/node\_modules/@tanstack/react-store/dist/esm/index.d.ts:11
+Defined in: node\_modules/.pnpm/@tanstack+react-store@0.8.1\_react-dom@19.1.0\_react@19.1.0\_\_react@19.1.0/node\_modules/@tanstack/react-store/dist/esm/index.d.ts:11
 
 ### Type Parameters
 
@@ -53,7 +53,7 @@ function useStore<TState, TSelected>(
    options?): TSelected;
 ```
 
-Defined in: node\_modules/.pnpm/@tanstack+react-store@0.8.0\_react-dom@19.1.0\_react@19.1.0\_\_react@19.1.0/node\_modules/@tanstack/react-store/dist/esm/index.d.ts:12
+Defined in: node\_modules/.pnpm/@tanstack+react-store@0.8.1\_react-dom@19.1.0\_react@19.1.0\_\_react@19.1.0/node\_modules/@tanstack/react-store/dist/esm/index.d.ts:12
 
 ### Type Parameters
 

docs/framework/react/reference/functions/createFormHookContexts.md

@@ -24,6 +24,7 @@ title: "@tanstack/react-form"
 ## Variables
 
 - [Field](variables/Field.md)
+- [useIsomorphicLayoutEffect](variables/useIsomorphicLayoutEffect.md)
 
 ## Functions
 

docs/framework/react/reference/functions/useStore.md

@@ -0,0 +1,43 @@
+---
+id: useIsomorphicLayoutEffect
+title: useIsomorphicLayoutEffect
+---
+
+# Variable: useIsomorphicLayoutEffect()
+
+```ts
+const useIsomorphicLayoutEffect: (effect, deps?) => void;
+```
+
+Defined in: [packages/react-form/src/useIsomorphicLayoutEffect.ts:3](https://github.com/TanStack/form/blob/main/packages/react-form/src/useIsomorphicLayoutEffect.ts#L3)
+
+The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations.
+Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside
+`useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.
+
+Prefer the standard `useEffect` when possible to avoid blocking visual updates.
+
+If you’re migrating code from a class component, `useLayoutEffect` fires in the same phase as
+`componentDidMount` and `componentDidUpdate`.
+
+## Parameters
+
+### effect
+
+`EffectCallback`
+
+### deps?
+
+`DependencyList`
+
+## Returns
+
+`void`
+
+## Version
+
+16.8.0
+
+## See
+
+[https://react.dev/reference/react/useLayoutEffect](https://react.dev/reference/react/useLayoutEffect)

docs/framework/react/reference/index.md

@@ -8,10 +8,13 @@ title: useStore
 ## Call Signature
 
 ```ts
-function useStore<TState, TSelected>(store, selector?): Accessor<TSelected>;
+function useStore<TState, TSelected>(
+   store, 
+   selector?, 
+options?): Accessor<TSelected>;
 ```
 
-Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.7.7\_solid-js@1.9.9/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:8
+Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.8.1\_solid-js@1.9.9/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:12
 
 ### Type Parameters
 
@@ -33,17 +36,24 @@ Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.7.7\_solid-js@1.9.9/node
 
 (`state`) => `TSelected`
 
+#### options?
+
+`UseStoreOptions`\<`TSelected`\>
+
 ### Returns
 
 `Accessor`\<`TSelected`\>
 
 ## Call Signature
 
 ```ts
-function useStore<TState, TSelected>(store, selector?): Accessor<TSelected>;
+function useStore<TState, TSelected>(
+   store, 
+   selector?, 
+options?): Accessor<TSelected>;
 ```
 
-Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.7.7\_solid-js@1.9.9/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:9
+Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.8.1\_solid-js@1.9.9/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:13
 
 ### Type Parameters
 
@@ -65,6 +75,10 @@ Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.7.7\_solid-js@1.9.9/node
 
 (`state`) => `TSelected`
 
+#### options?
+
+`UseStoreOptions`\<`TSelected`\>
+
 ### Returns
 
 `Accessor`\<`TSelected`\>