Merge branch 'main' into form-validation

docs/config.json

@@ -157,6 +157,58 @@
           ]
         }
       ]
+    },
+    {
+      "framework": "solid",
+      "menuItems": [
+        {
+          "label": "Getting Started",
+          "children": [
+            {
+              "label": "Quick Start",
+              "to": "framework/solid/quick-start"
+            }
+          ]
+        },
+        {
+          "label": "API Reference",
+          "children": [
+            {
+              "label": "useForm",
+              "to": "framework/solid/reference/createForm"
+            },
+            {
+              "label": "useField",
+              "to": "framework/solid/reference/createField"
+            },
+            {
+              "label": "Field",
+              "to": "framework/solid/reference/Field"
+            },
+            {
+              "label": "FormApi",
+              "to": "framework/solid/reference/formApi"
+            }
+          ]
+        },
+        {
+          "label": "Examples",
+          "children": [
+            {
+              "label": "Simple",
+              "to": "framework/solid/examples/simple"
+            },
+            {
+              "label": "Yup",
+              "to": "framework/solid/examples/yup"
+            },
+            {
+              "label": "Zod",
+              "to": "framework/solid/examples/zod"
+            }
+          ]
+        }
+      ]
     }
   ]
 }

docs/framework/react/quick-start.md

@@ -12,7 +12,6 @@ import { useForm } from '@tanstack/react-form'
 
 export default function App() {
   const form = useForm({
-    // Memoize your default values to prevent re-renders
     defaultValues: {
       fullName: '',
     },

docs/framework/solid/quick-start.md

@@ -0,0 +1,54 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet.
+
+```tsx
+import { createForm } from '@tanstack/solid-form'
+
+function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      fullName: '',
+    },
+    onSubmit: async (values) => {
+      // Do something with form data
+      console.log(values)
+    },
+  }))
+
+  return (
+    <div>
+      <h1>Simple Form Example</h1>
+      <form.Provider>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            void form.handleSubmit()
+          }}
+        >
+          <div>
+            <form.Field
+              name="fullName"
+              children={(field) => (
+                <input
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.target.value)}
+                />
+              )}
+            />
+          </div>
+          <button type="submit">Submit</button>
+        </form>
+      </form.Provider>
+    </div>
+  )
+}
+```
+
+From here, you'll be ready to explore all of the other features of TanStack Form!

docs/framework/solid/reference/Field.md

@@ -0,0 +1,6 @@
+---
+id: field
+title: Field
+---
+
+Please see [/packages/solid-form/src/createField.tsx](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx)

docs/framework/solid/reference/createField.md

@@ -0,0 +1,6 @@
+---
+id: createField
+title: createField
+---
+
+Please see [/packages/solid-form/src/createField.tsx](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx)

docs/framework/solid/reference/createForm.md

@@ -0,0 +1,6 @@
+---
+id: createForm
+title: createForm
+---
+
+Please see [/packages/solid-form/src/createForm.tsx](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx)

docs/framework/solid/reference/createFormFactory.md

@@ -0,0 +1,6 @@
+---
+id: createFormFactory
+title: createFormFactory
+---
+
+Please see [/packages/solid-form/src/createFormFactory.ts](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormFactory.ts)

docs/framework/solid/reference/fieldApi.md

@@ -0,0 +1,6 @@
+---
+id: fieldApi
+title: Field API
+---
+
+Please see [/packages/solid-form/src/createField.tsx](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx)

docs/framework/solid/reference/formApi.md

@@ -0,0 +1,6 @@
+---
+id: formApi
+title: Form API
+---
+
+Please see [/packages/solid-form/src/createForm.tsx](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx)

docs/framework/vue/quick-start.md

@@ -11,7 +11,6 @@ The bare minimum to get started with TanStack Form is to create a form and add a
 import { useForm } from '@tanstack/vue-form'
 
 const form = useForm({
-  // Memoize your default values to prevent re-renders
   defaultValues: {
     fullName: '',
   },

docs/installation.md

@@ -3,20 +3,22 @@ id: installation
 title: Installation
 ---
 
-TanStack Form is compatible with various front-end frameworks, including React and Vue. To use TanStack Form with your desired framework, install the corresponding adapter via NPM:
+TanStack Form is compatible with various front-end frameworks, including React, Vue, and Solid. To use TanStack Form with your desired framework, install the corresponding adapter via NPM:
 
 ```bash
 $ npm i @tanstack/react-form
 # or
 $ pnpm add @tanstack/vue-form
+# or
+$ yarn add @tanstack/solid-form
 ```
 
 > Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from `node_modules` yourselves.
 
 In addition, we support both Zod and Yup as validators through official validator packages:
 
 ```bash
-$ yarn add @tanstack/zod-form-adapter zod
+$ npm i @tanstack/zod-form-adapter zod
 # or
 $ npm i @tanstack/yup-form-adapter yup
 ```

docs/overview.md

@@ -57,7 +57,6 @@ export default function App() {
   return (
     <div>
       <h1>Simple Form Example</h1>
-      {/* A pre-bound form component */}
       <form.Provider>
         <form
           onSubmit={(e) => {
@@ -67,7 +66,7 @@ export default function App() {
           }}
         >
           <div>
-            {/* A type-safe and pre-bound field component*/}
+            {/* A type-safe field component*/}
             <form.Field
               name="firstName"
               onChange={(value) =>

examples/react/simple/package.json

@@ -8,14 +8,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-form": "0.5.0",
+    "@tanstack/react-form": "0.6.1",
     "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/form-core": "0.5.0",
-    "@tanstack/vue-form": "0.5.0",
-    "@tanstack/zod-form-adapter": "0.5.0",
-    "@tanstack/yup-form-adapter": "0.5.0"
+    "@tanstack/form-core": "0.6.1",
+    "@tanstack/vue-form": "0.6.1",
+    "@tanstack/zod-form-adapter": "0.6.1",
+    "@tanstack/yup-form-adapter": "0.6.1",
+    "@tanstack/solid-form": "0.6.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.0.4",

examples/react/simple/src/index.tsx

@@ -16,7 +16,6 @@ function FieldInfo({ field }: { field: FieldApi<any, any, unknown, unknown> }) {
 
 export default function App() {
   const form = useForm({
-    // Memoize your default values to prevent re-renders
     defaultValues: {
       firstName: "",
       lastName: "",
@@ -30,7 +29,6 @@ export default function App() {
   return (
     <div>
       <h1>Simple Form Example</h1>
-      {/* A pre-bound form component */}
       <form.Provider>
         <form
           onSubmit={(e) => {
@@ -40,7 +38,7 @@ export default function App() {
           }}
         >
           <div>
-            {/* A type-safe and pre-bound field component*/}
+            {/* A type-safe field component*/}
             <form.Field
               name="firstName"
               onChange={(value) =>

examples/react/yup/package.json

@@ -8,15 +8,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-form": "0.5.0",
+    "@tanstack/react-form": "0.6.1",
     "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "yup": "^1.3.2",
-    "@tanstack/form-core": "0.5.0",
-    "@tanstack/yup-form-adapter": "0.5.0",
-    "@tanstack/vue-form": "0.5.0",
-    "@tanstack/zod-form-adapter": "0.5.0"
+    "@tanstack/form-core": "0.6.1",
+    "@tanstack/yup-form-adapter": "0.6.1",
+    "@tanstack/vue-form": "0.6.1",
+    "@tanstack/zod-form-adapter": "0.6.1",
+    "@tanstack/solid-form": "0.6.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.0.4",

examples/react/yup/src/index.tsx

@@ -18,7 +18,6 @@ function FieldInfo({ field }: { field: FieldApi<any, any, unknown, unknown> }) {
 
 export default function App() {
   const form = useForm({
-    // Memoize your default values to prevent re-renders
     defaultValues: {
       firstName: "",
       lastName: "",
@@ -33,8 +32,7 @@ export default function App() {
 
   return (
     <div>
-      <h1>Simple Form Example</h1>
-      {/* A pre-bound form component */}
+      <h1>Yup Form Example</h1>
       <form.Provider>
         <form
           onSubmit={(e) => {
@@ -44,7 +42,7 @@ export default function App() {
           }}
         >
           <div>
-            {/* A type-safe and pre-bound field component*/}
+            {/* A type-safe field component*/}
             <form.Field
               name="firstName"
               onChange={yup

examples/react/zod/package.json

@@ -8,15 +8,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-form": "0.5.0",
+    "@tanstack/react-form": "0.6.1",
     "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "zod": "^3.21.4",
-    "@tanstack/form-core": "0.5.0",
-    "@tanstack/zod-form-adapter": "0.5.0",
-    "@tanstack/vue-form": "0.5.0",
-    "@tanstack/yup-form-adapter": "0.5.0"
+    "@tanstack/form-core": "0.6.1",
+    "@tanstack/zod-form-adapter": "0.6.1",
+    "@tanstack/vue-form": "0.6.1",
+    "@tanstack/yup-form-adapter": "0.6.1",
+    "@tanstack/solid-form": "0.6.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.0.4",

examples/react/zod/src/index.tsx

@@ -18,7 +18,6 @@ function FieldInfo({ field }: { field: FieldApi<any, any, unknown, unknown> }) {
 
 export default function App() {
   const form = useForm({
-    // Memoize your default values to prevent re-renders
     defaultValues: {
       firstName: "",
       lastName: "",
@@ -33,8 +32,7 @@ export default function App() {
 
   return (
     <div>
-      <h1>Simple Form Example</h1>
-      {/* A pre-bound form component */}
+      <h1>Zod Form Example</h1>
       <form.Provider>
         <form
           onSubmit={(e) => {
@@ -44,7 +42,7 @@ export default function App() {
           }}
         >
           <div>
-            {/* A type-safe and pre-bound field component*/}
+            {/* A type-safe field component*/}
             <form.Field
               name="firstName"
               onChange={z

examples/solid/simple/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?