TanStack · lachlancollins · Dec 31, 2023 · Dec 31, 2023 · Dec 31, 2023
diff --git a/.prettierignore b/.prettierignore
@@ -1,6 +1,9 @@
 **/.next
+**/.nx/cache
 **/.svelte-kit
 **/build
 **/coverage
 **/dist
+**/docs
 **/codemods/**/__testfixtures__
+pnpm-lock.yaml
diff --git a/.prettierrc b/.prettierrc
diff --git a/codecov.yml b/codecov.yml
@@ -2,5 +2,5 @@ coverage:
   status:
     project:
       default:
-        target: 90% 
-        threshold: 1%
+        target: 90%
+        threshold: 1%
diff --git a/examples/react/simple/.eslintrc.cjs b/examples/react/simple/.eslintrc.cjs
@@ -2,14 +2,14 @@
 
 /** @type {import('eslint').Linter.Config} */
 const config = {
-  extends: ["plugin:react/recommended", "plugin:react-hooks/recommended"],
+  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: "./tsconfig.json",
+    project: './tsconfig.json',
   },
   rules: {
-    "react/no-children-prop": "off",
+    'react/no-children-prop': 'off',
   },
-};
+}
 
-module.exports = config;
+module.exports = config
diff --git a/examples/react/simple/index.html b/examples/react/simple/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/examples/react/simple/src/index.tsx b/examples/react/simple/src/index.tsx
@@ -1,40 +1,40 @@
-import * as React from "react";
-import { createRoot } from "react-dom/client";
-import { useForm } from "@tanstack/react-form";
-import type { FieldApi } from "@tanstack/react-form";
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import { useForm } from '@tanstack/react-form'
+import type { FieldApi } from '@tanstack/react-form'
 
 function FieldInfo({ field }: { field: FieldApi<any, any, any, any> }) {
   return (
     <>
       {field.state.meta.touchedErrors ? (
         <em>{field.state.meta.touchedErrors}</em>
       ) : null}
-      {field.state.meta.isValidating ? "Validating..." : null}
+      {field.state.meta.isValidating ? 'Validating...' : null}
     </>
-  );
+  )
 }
 
 export default function App() {
   const form = useForm({
     defaultValues: {
-      firstName: "",
-      lastName: "",
+      firstName: '',
+      lastName: '',
     },
     onSubmit: async ({ value }) => {
       // Do something with form data
-      console.log(value);
+      console.log(value)
     },
-  });
+  })
 
   return (
     <div>
       <h1>Simple Form Example</h1>
       <form.Provider>
         <form
           onSubmit={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            void form.handleSubmit();
+            e.preventDefault()
+            e.stopPropagation()
+            void form.handleSubmit()
           }}
         >
           <div>
@@ -44,17 +44,17 @@ export default function App() {
               validators={{
                 onChange: ({ value }) =>
                   !value
-                    ? "A first name is required"
+                    ? 'A first name is required'
                     : value.length < 3
-                    ? "First name must be at least 3 characters"
-                    : undefined,
+                      ? 'First name must be at least 3 characters'
+                      : undefined,
                 onChangeAsyncDebounceMs: 500,
                 onChangeAsync: async ({ value }) => {
-                  await new Promise((resolve) => setTimeout(resolve, 1000));
+                  await new Promise((resolve) => setTimeout(resolve, 1000))
                   return (
-                    value.includes("error") &&
+                    value.includes('error') &&
                     'No "error" allowed in first name'
-                  );
+                  )
                 },
               }}
               children={(field) => {
@@ -70,7 +70,7 @@ export default function App() {
                     />
                     <FieldInfo field={field} />
                   </>
-                );
+                )
               }}
             />
           </div>
@@ -95,16 +95,16 @@ export default function App() {
             selector={(state) => [state.canSubmit, state.isSubmitting]}
             children={([canSubmit, isSubmitting]) => (
               <button type="submit" disabled={!canSubmit}>
-                {isSubmitting ? "..." : "Submit"}
+                {isSubmitting ? '...' : 'Submit'}
               </button>
             )}
           />
         </form>
       </form.Provider>
     </div>
-  );
+  )
 }
 
-const rootElement = document.getElementById("root")!;
+const rootElement = document.getElementById('root')!
 
-createRoot(rootElement).render(<App />);
+createRoot(rootElement).render(<App />)
diff --git a/examples/react/valibot/.eslintrc.cjs b/examples/react/valibot/.eslintrc.cjs
@@ -2,14 +2,14 @@
 
 /** @type {import('eslint').Linter.Config} */
 const config = {
-  extends: ["plugin:react/recommended", "plugin:react-hooks/recommended"],
+  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: "./tsconfig.json",
+    project: './tsconfig.json',
   },
   rules: {
-    "react/no-children-prop": "off",
+    'react/no-children-prop': 'off',
   },
-};
+}
 
-module.exports = config;
+module.exports = config
diff --git a/examples/react/valibot/index.html b/examples/react/valibot/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/examples/react/valibot/src/index.tsx b/examples/react/valibot/src/index.tsx
@@ -1,44 +1,44 @@
-import * as React from "react";
-import { createRoot } from "react-dom/client";
-import { useForm } from "@tanstack/react-form";
-import { valibotValidator } from "@tanstack/valibot-form-adapter";
-import { customAsync, minLength, string, stringAsync } from "valibot";
-import type { FieldApi } from "@tanstack/react-form";
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import { useForm } from '@tanstack/react-form'
+import { valibotValidator } from '@tanstack/valibot-form-adapter'
+import { customAsync, minLength, string, stringAsync } from 'valibot'
+import type { FieldApi } from '@tanstack/react-form'
 
 function FieldInfo({ field }: { field: FieldApi<any, any, any, any> }) {
   return (
     <>
       {field.state.meta.touchedErrors ? (
         <em>{field.state.meta.touchedErrors}</em>
       ) : null}
-      {field.state.meta.isValidating ? "Validating..." : null}
+      {field.state.meta.isValidating ? 'Validating...' : null}
     </>
-  );
+  )
 }
 
 export default function App() {
   const form = useForm({
     defaultValues: {
-      firstName: "",
-      lastName: "",
+      firstName: '',
+      lastName: '',
     },
     onSubmit: async ({ value }) => {
       // Do something with form data
-      console.log(value);
+      console.log(value)
     },
     // Add a validator to support Valibot usage in Form and Field
     validatorAdapter: valibotValidator,
-  });
+  })
 
   return (
     <div>
       <h1>Valibot Form Example</h1>
       <form.Provider>
         <form
           onSubmit={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            void form.handleSubmit();
+            e.preventDefault()
+            e.stopPropagation()
+            void form.handleSubmit()
           }}
         >
           <div>
@@ -47,13 +47,13 @@ export default function App() {
               name="firstName"
               validators={{
                 onChange: string([
-                  minLength(3, "First name must be at least 3 characters"),
+                  minLength(3, 'First name must be at least 3 characters'),
                 ]),
                 onChangeAsyncDebounceMs: 500,
                 onChangeAsync: stringAsync([
                   customAsync(async (value) => {
-                    await new Promise((resolve) => setTimeout(resolve, 1000));
-                    return !value.includes("error");
+                    await new Promise((resolve) => setTimeout(resolve, 1000))
+                    return !value.includes('error')
                   }, "No 'error' allowed in first name"),
                 ]),
               }}
@@ -70,7 +70,7 @@ export default function App() {
                     />
                     <FieldInfo field={field} />
                   </>
-                );
+                )
               }}
             />
           </div>
@@ -95,16 +95,16 @@ export default function App() {
             selector={(state) => [state.canSubmit, state.isSubmitting]}
             children={([canSubmit, isSubmitting]) => (
               <button type="submit" disabled={!canSubmit}>
-                {isSubmitting ? "..." : "Submit"}
+                {isSubmitting ? '...' : 'Submit'}
               </button>
             )}
           />
         </form>
       </form.Provider>
     </div>
-  );
+  )
 }
 
-const rootElement = document.getElementById("root")!;
+const rootElement = document.getElementById('root')!
 
-createRoot(rootElement).render(<App />);
+createRoot(rootElement).render(<App />)
diff --git a/examples/react/yup/.eslintrc.cjs b/examples/react/yup/.eslintrc.cjs
@@ -2,14 +2,14 @@
 
 /** @type {import('eslint').Linter.Config} */
 const config = {
-  extends: ["plugin:react/recommended", "plugin:react-hooks/recommended"],
+  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: "./tsconfig.json",
+    project: './tsconfig.json',
   },
   rules: {
-    "react/no-children-prop": "off",
+    'react/no-children-prop': 'off',
   },
-};
+}
 
-module.exports = config;
+module.exports = config
diff --git a/examples/react/yup/index.html b/examples/react/yup/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />