feat: solid.js form (#471)

* solid commit -a

* fix failing tests and formatting

* comments + removed unneeded computed

* updated changes

* prettierd

* chore: add Solid Form to script to be deployed

* fix: fix typing of solid's Subscribe data

* chore: remove errant createEffect

* chore: rename Solid's useForm and useField to createForm and createField

* chore: remove old mention of React's memoization

* chore: add Solid simple example

* chore: add Solid yup example

* chore: add Zod Solid example

* docs: add initial docs for Solid package

---------

Co-authored-by: Corbin Crutchley <git@crutchcorn.dev>

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,12 +3,14 @@ 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.
@@ -16,7 +18,7 @@ $ pnpm add @tanstack/vue-form
 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/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/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>
+      <h1>Yup Form Example</h1>
-      {/* A pre-bound form component */}
       <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/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>
+      <h1>Zod Form Example</h1>
-      {/* A pre-bound form component */}
       <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?

examples/solid/simple/README.md

@@ -0,0 +1,28 @@
+## Usage
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html)

examples/solid/simple/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Form Solid Simple Example App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

examples/solid/simple/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@tanstack/form-example-solid-simple",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test:types": "tsc --noEmit",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/form-core": "0.4.1",
+    "@tanstack/solid-form": "0.4.1",
+    "solid-js": "^1.7.8",
+    "@tanstack/react-form": "0.4.1",
+    "@tanstack/zod-form-adapter": "0.4.1",
+    "@tanstack/yup-form-adapter": "0.4.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vite-plugin-solid": "^2.7.0"
+  },
+  "nx": {
+    "implicitDependencies": [
+      "@tanstack/form-core",
+      "@tanstack/solid-form"
+    ],
+    "targets": {
+      "test:types": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  }
+}

examples/solid/simple/src/index.tsx

@@ -0,0 +1,117 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import { createForm, type FieldApi } from '@tanstack/solid-form'
+
+interface FieldInfoProps {
+  field: FieldApi<any, any, unknown, unknown>
+}
+
+function FieldInfo(props: FieldInfoProps) {
+  return (
+    <>
+      {props.field.state.meta.touchedErrors ? (
+        <em>{props.field.state.meta.touchedErrors}</em>
+      ) : null}
+      {props.field.state.meta.isValidating ? 'Validating...' : null}
+    </>
+  )
+}
+
+function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    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>
+            {/* A type-safe field component*/}
+            <form.Field
+              name="firstName"
+              onChange={(value) =>
+                !value
+                  ? 'A first name is required'
+                  : value.length < 3
+                  ? 'First name must be at least 3 characters'
+                  : undefined
+              }
+              onChangeAsyncDebounceMs={500}
+              onChangeAsync={async (value) => {
+                await new Promise((resolve) => setTimeout(resolve, 1000))
+                return (
+                  value.includes('error') && 'No "error" allowed in first name'
+                )
+              }}
+              children={(field) => {
+                // Avoid hasty abstractions. Render props are great!
+                return (
+                  <>
+                    <label for={field().name}>First Name:</label>
+                    <input
+                      name={field().name}
+                      value={field().state.value}
+                      onBlur={field().handleBlur}
+                      onInput={(e) => field().handleChange(e.target.value)}
+                    />
+                    <FieldInfo field={field()} />
+                  </>
+                )
+              }}
+            />
+          </div>
+          <div>
+            <form.Field
+              name="lastName"
+              children={(field) => (
+                <>
+                  <label for={field().name}>Last Name:</label>
+                  <input
+                    name={field().name}
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onInput={(e) => field().handleChange(e.target.value)}
+                  />
+                  <FieldInfo field={field()} />
+                </>
+              )}
+            />
+          </div>
+          <form.Subscribe
+            selector={(state) => ({
+              canSubmit: state.canSubmit,
+              isSubmitting: state.isSubmitting,
+            })}
+            children={(state) => {
+              return (
+                <button type="submit" disabled={!state().canSubmit}>
+                  {state().isSubmitting ? '...' : 'Submit'}
+                </button>
+              )
+            }}
+          />
+        </form>
+      </form.Provider>
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)

examples/solid/simple/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/solid/simple/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

examples/solid/simple/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/solid/simple/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solid()],
+})

examples/solid/yup/.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?

examples/solid/yup/README.md

@@ -0,0 +1,28 @@
+## Usage
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html)

examples/solid/yup/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Form Solid Yup Example App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

examples/solid/yup/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@tanstack/form-example-solid-yup",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test:types": "tsc --noEmit",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/form-core": "0.4.1",
+    "@tanstack/solid-form": "0.4.1",
+    "@tanstack/yup-form-adapter": "0.4.1",
+    "solid-js": "^1.7.8",
+    "yup": "^1.3.2",
+    "@tanstack/react-form": "0.4.1",
+    "@tanstack/zod-form-adapter": "0.4.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vite-plugin-solid": "^2.7.0"
+  },
+  "nx": {
+    "implicitDependencies": [
+      "@tanstack/form-core",
+      "@tanstack/solid-form",
+      "@tanstack/yup-form-adapter"
+    ],
+    "targets": {
+      "test:types": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  }
+}

examples/solid/yup/src/index.tsx

@@ -0,0 +1,121 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import { createForm, type FieldApi } from '@tanstack/solid-form'
+import { yupValidator } from '@tanstack/yup-form-adapter'
+import * as yup from 'yup'
+
+interface FieldInfoProps {
+  field: FieldApi<any, any, unknown, unknown>
+}
+
+function FieldInfo(props: FieldInfoProps) {
+  return (
+    <>
+      {props.field.state.meta.touchedErrors ? (
+        <em>{props.field.state.meta.touchedErrors}</em>
+      ) : null}
+      {props.field.state.meta.isValidating ? 'Validating...' : null}
+    </>
+  )
+}
+
+function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit: async (values) => {
+      // Do something with form data
+      console.log(values)
+    },
+    // Add a validator to support Yup usage in Form and Field
+    validator: yupValidator,
+  }))
+
+  return (
+    <div>
+      <h1>Yup Form Example</h1>
+      <form.Provider>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            void form.handleSubmit()
+          }}
+        >
+          <div>
+            {/* A type-safe field component*/}
+            <form.Field
+              name="firstName"
+              onChange={yup
+                .string()
+                .min(3, 'First name must be at least 3 characters')}
+              onChangeAsyncDebounceMs={500}
+              onChangeAsync={yup
+                .string()
+                .test(
+                  'no error',
+                  "No 'error' allowed in first name",
+                  async (value) => {
+                    await new Promise((resolve) => setTimeout(resolve, 1000))
+                    return !value?.includes('error')
+                  },
+                )}
+              children={(field) => {
+                // Avoid hasty abstractions. Render props are great!
+                return (
+                  <>
+                    <label for={field().name}>First Name:</label>
+                    <input
+                      name={field().name}
+                      value={field().state.value}
+                      onBlur={field().handleBlur}
+                      onInput={(e) => field().handleChange(e.target.value)}
+                    />
+                    <FieldInfo field={field()} />
+                  </>
+                )
+              }}
+            />
+          </div>
+          <div>
+            <form.Field
+              name="lastName"
+              children={(field) => (
+                <>
+                  <label for={field().name}>Last Name:</label>
+                  <input
+                    name={field().name}
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onInput={(e) => field().handleChange(e.target.value)}
+                  />
+                  <FieldInfo field={field()} />
+                </>
+              )}
+            />
+          </div>
+          <form.Subscribe
+            selector={(state) => ({
+              canSubmit: state.canSubmit,
+              isSubmitting: state.isSubmitting,
+            })}
+            children={(state) => {
+              return (
+                <button type="submit" disabled={!state().canSubmit}>
+                  {state().isSubmitting ? '...' : 'Submit'}
+                </button>
+              )
+            }}
+          />
+        </form>
+      </form.Provider>
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)

examples/solid/yup/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/solid/yup/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

examples/solid/yup/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/solid/yup/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solid()],
+})

examples/solid/zod/.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?

examples/solid/zod/README.md

@@ -0,0 +1,28 @@
+## Usage
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html)

examples/solid/zod/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Form Solid Zod Example App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

examples/solid/zod/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@tanstack/form-example-solid-zod",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test:types": "tsc --noEmit",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/form-core": "0.4.1",
+    "@tanstack/solid-form": "0.4.1",
+    "@tanstack/zod-form-adapter": "0.4.1",
+    "solid-js": "^1.7.8",
+    "zod": "^3.21.4",
+    "@tanstack/react-form": "0.4.1",
+    "@tanstack/yup-form-adapter": "0.4.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vite-plugin-solid": "^2.7.0"
+  },
+  "nx": {
+    "implicitDependencies": [
+      "@tanstack/form-core",
+      "@tanstack/solid-form",
+      "@tanstack/zod-form-adapter"
+    ],
+    "targets": {
+      "test:types": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  }
+}

examples/solid/zod/src/index.tsx

@@ -0,0 +1,120 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import { createForm, type FieldApi } from '@tanstack/solid-form'
+import { zodValidator } from '@tanstack/zod-form-adapter'
+import { z } from 'zod'
+
+interface FieldInfoProps {
+  field: FieldApi<any, any, unknown, unknown>
+}
+
+function FieldInfo(props: FieldInfoProps) {
+  return (
+    <>
+      {props.field.state.meta.touchedErrors ? (
+        <em>{props.field.state.meta.touchedErrors}</em>
+      ) : null}
+      {props.field.state.meta.isValidating ? 'Validating...' : null}
+    </>
+  )
+}
+
+function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit: async (values) => {
+      // Do something with form data
+      console.log(values)
+    },
+    // Add a validator to support Zod usage in Form and Field
+    validator: zodValidator,
+  }))
+
+  return (
+    <div>
+      <h1>Zod Form Example</h1>
+      <form.Provider>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            void form.handleSubmit()
+          }}
+        >
+          <div>
+            {/* A type-safe field component*/}
+            <form.Field
+              name="firstName"
+              onChange={z
+                .string()
+                .min(3, 'First name must be at least 3 characters')}
+              onChangeAsyncDebounceMs={500}
+              onChangeAsync={z.string().refine(
+                async (value) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1000))
+                  return !value.includes('error')
+                },
+                {
+                  message: "No 'error' allowed in first name",
+                },
+              )}
+              children={(field) => {
+                // Avoid hasty abstractions. Render props are great!
+                return (
+                  <>
+                    <label for={field().name}>First Name:</label>
+                    <input
+                      name={field().name}
+                      value={field().state.value}
+                      onBlur={field().handleBlur}
+                      onInput={(e) => field().handleChange(e.target.value)}
+                    />
+                    <FieldInfo field={field()} />
+                  </>
+                )
+              }}
+            />
+          </div>
+          <div>
+            <form.Field
+              name="lastName"
+              children={(field) => (
+                <>
+                  <label for={field().name}>Last Name:</label>
+                  <input
+                    name={field().name}
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onInput={(e) => field().handleChange(e.target.value)}
+                  />
+                  <FieldInfo field={field()} />
+                </>
+              )}
+            />
+          </div>
+          <form.Subscribe
+            selector={(state) => ({
+              canSubmit: state.canSubmit,
+              isSubmitting: state.isSubmitting,
+            })}
+            children={(state) => {
+              return (
+                <button type="submit" disabled={!state().canSubmit}>
+                  {state().isSubmitting ? '...' : 'Submit'}
+                </button>
+              )
+            }}
+          />
+        </form>
+      </form.Provider>
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)

examples/solid/zod/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/solid/zod/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

examples/solid/zod/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/solid/zod/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solid()],
+})

package.json

@@ -39,6 +39,7 @@
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
+    "@solidjs/testing-library": "^0.8.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -115,6 +116,7 @@
       "@tanstack/form-core": "workspace:*",
       "@tanstack/react-form": "workspace:*",
       "@tanstack/vue-form": "workspace:*",
+      "@tanstack/solid-form": "workspace:*",
       "@tanstack/yup-form-adapter": "workspace:*",
       "@tanstack/zod-form-adapter": "workspace:*"
     }

packages/form-core/src/FieldApi.ts

@@ -220,7 +220,6 @@ export class FieldApi<
   mount = () => {
     const info = this.getInfo()
     info.instances[this.uid] = this as never
-
     const unsubscribe = this.form.store.subscribe(() => {
       this.store.batch(() => {
         const nextValue = this.getValue()

packages/solid-form/.eslintrc.cjs

@@ -0,0 +1,11 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+}
+
+module.exports = config

packages/solid-form/README.md

@@ -0,0 +1,35 @@
+<img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
+
+![TanStack Form Header](https://github.com/TanStack/form/raw/beta/media/repo-header.png)
+
+Hooks for managing form state in Solid
+
+<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
+  <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
+</a><a href="https://discord.com/invite/WrRKjPJ" target="\_parent">
+  <img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" />
+</a><a href="https://github.com/TanStack/form/actions?query=workflow%3A%22solid-form+tests%22">
+<img src="https://github.com/TanStack/form/workflows/solid-form%20tests/badge.svg" />
+</a><a href="https://www.npmjs.com/package/@tanstack/form-core" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/form-core.svg" />
+</a><a href="https://bundlephobia.com/package/@tanstack/solid-form@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/solid-form" />
+</a><a href="#badge">
+    <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+  </a><a href="https://github.com/TanStack/form/discussions">
+  <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
+</a><a href="https://bestofjs.org/projects/tanstack-form"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%form%26since=daily" /></a><a href="https://github.com/TanStack/form/" target="\_parent">
+  <img alt="" src="https://img.shields.io/github/stars/TanStack/form.svg?style=social&label=Star" />
+</a><a href="https://twitter.com/tannerlinsley" target="\_parent">
+  <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
+</a> <a href="https://gitpod.io/from-referrer/">
+  <img src="https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod" alt="Gitpod Ready-to-Code"/>
+</a>
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [TanStack Table](https://github.com/TanStack/table), [TanStack Router](https://github.com/tanstack/router), [TanStack Virtual](https://github.com/tanstack/virtual), [React Charts](https://github.com/TanStack/react-charts), [React Ranger](https://github.com/TanStack/ranger)
+
+## Visit [tanstack.com/form](https://tanstack.com/form) for docs, guides, API and more!
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+<!-- Use the force, Luke -->

packages/solid-form/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@tanstack/solid-form",
+  "version": "0.4.1",
+  "description": "Powerful, type-safe forms for Solid.",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/form",
+  "homepage": "https://tanstack.com/form",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc --noEmit",
+    "test:lib": "vitest run --coverage",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "tsup"
+  },
+  "files": [
+    "build",
+    "src"
+  ],
+  "type": "module",
+  "main": "./build/index.cjs",
+  "module": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "exports": {
+    "development": {
+      "import": {
+        "types": "./build/index.d.ts",
+        "default": "./build/dev.js"
+      },
+      "require": {
+        "types": "./build/index.d.cts",
+        "default": "./build/dev.cjs"
+      }
+    },
+    "import": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    },
+    "require": {
+      "types": "./build/index.d.cts",
+      "default": "./build/index.cjs"
+    }
+  },
+  "nx": {
+    "targets": {
+      "test:build": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  },
+  "devDependencies": {
+    "solid-js": "^1.7.8",
+    "tsup-preset-solid": "^2.1.0",
+    "vite-plugin-solid": "^2.7.0"
+  },
+  "dependencies": {
+    "@tanstack/form-core": "workspace:*",
+    "@tanstack/solid-store": "^0.2.1"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.6.0"
+  }
+}

packages/solid-form/src/createField.tsx

@@ -0,0 +1,196 @@
+import { FieldApi } from '@tanstack/form-core'
+import {
+  createComponent,
+  createComputed,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+} from 'solid-js'
+import { formContext, useFormContext } from './formContext'
+
+import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'
+import type { JSXElement } from 'solid-js'
+import type { CreateFieldOptions } from './types'
+
+declare module '@tanstack/form-core' {
+  // eslint-disable-next-line no-shadow
+  interface FieldApi<
+    TParentData,
+    TName extends DeepKeys<TParentData>,
+    ValidatorType,
+    FormValidator,
+    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+  > {
+    Field: FieldComponent<TData, FormValidator>
+  }
+}
+
+export type CreateField<TParentData> = <
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  FormValidator,
+>(
+  opts: () => { name: Narrow<TName> } & CreateFieldOptions<
+    TParentData,
+    TName,
+    ValidatorType,
+    FormValidator
+  >,
+) => () => FieldApi<
+  TParentData,
+  TName,
+  ValidatorType,
+  FormValidator,
+  DeepValue<TParentData, TName>
+>
+
+// ugly way to trick solid into triggering updates for changes on the fieldApi
+function makeFieldReactive<FieldApiT extends FieldApi<any, any, any, any>>(
+  fieldApi: FieldApiT,
+): () => FieldApiT {
+  const [flag, setFlag] = createSignal(false)
+  const fieldApiMemo = createMemo(() => [flag(), fieldApi] as const)
+  const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f))
+  onCleanup(unsubscribeStore)
+  return () => fieldApiMemo()[1]
+}
+
+export function createField<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  FormValidator,
+>(
+  opts: () => CreateFieldOptions<
+    TParentData,
+    TName,
+    ValidatorType,
+    FormValidator
+  >,
+): () => FieldApi<
+  TParentData,
+  TName,
+  ValidatorType,
+  FormValidator
+  // Omit<typeof opts, 'onMount'> & {
+  //   form: FormApi<TParentData>
+  // }
+> {
+  // Get the form API either manually or from context
+  const { formApi, parentFieldName } = useFormContext()
+
+  const options = opts()
+  const name = (
+    typeof options.index === 'number'
+      ? [parentFieldName, options.index, options.name]
+      : [parentFieldName, options.name]
+  )
+    .filter((d) => d !== undefined)
+    .join('.')
+
+  const fieldApi = new FieldApi({
+    ...options,
+    form: formApi,
+    name: name as typeof options.name,
+  })
+  fieldApi.Field = Field as never
+
+  /**
+   * fieldApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   *
+   * createComputed to make sure this effect runs before render effects
+   */
+  createComputed(() => fieldApi.update({ ...opts(), form: formApi }))
+
+  // Instantiates field meta and removes it when unrendered
+  onMount(() => onCleanup(fieldApi.mount()))
+
+  return makeFieldReactive(fieldApi)
+}
+
+type FieldComponentProps<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  FormValidator,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = {
+  children: (
+    fieldApi: () => FieldApi<
+      TParentData,
+      TName,
+      ValidatorType,
+      FormValidator,
+      TData
+    >,
+  ) => JSXElement
+} & (TParentData extends any[]
+  ? {
+      name?: TName
+      index: number
+    }
+  : {
+      name: TName
+      index?: never
+    }) &
+  Omit<
+    CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>,
+    'name' | 'index'
+  >
+
+export type FieldComponent<TParentData, FormValidator> = <
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>({
+  children,
+  ...fieldOptions
+}: FieldComponentProps<
+  TParentData,
+  TName,
+  ValidatorType,
+  FormValidator,
+  TData
+>) => JSXElement
+
+export function Field<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  FormValidator,
+>(
+  props: {
+    children: (
+      fieldApi: () => FieldApi<
+        TParentData,
+        TName,
+        ValidatorType,
+        FormValidator
+      >,
+    ) => JSXElement
+  } & CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>,
+) {
+  const fieldApi = createField<
+    TParentData,
+    TName,
+    ValidatorType,
+    FormValidator
+  >(() => {
+    const { children, ...fieldOptions } = props
+    return fieldOptions
+  })
+
+  return (
+    <formContext.Provider
+      value={{
+        formApi: fieldApi().form,
+        parentFieldName: String(fieldApi().name),
+      }}
+    >
+      {/* createComponent to make sure the signals in the children component are not tracked */}
+      {createComponent(() => props.children(fieldApi), {})}
+    </formContext.Provider>
+  )
+}

packages/solid-form/src/createForm.tsx

@@ -0,0 +1,53 @@
+import type { FormOptions, FormState } from '@tanstack/form-core'
+import { FormApi, functionalUpdate } from '@tanstack/form-core'
+import { createComputed, type JSXElement } from 'solid-js'
+import { useStore } from '@tanstack/solid-store'
+import {
+  Field,
+  createField,
+  type CreateField,
+  type FieldComponent,
+} from './createField'
+import { formContext } from './formContext'
+
+type NoInfer<T> = [T][T extends any ? 0 : never]
+
+declare module '@tanstack/form-core' {
+  // eslint-disable-next-line no-shadow
+  interface FormApi<TFormData, ValidatorType> {
+    Provider: (props: { children: any }) => any
+    Field: FieldComponent<TFormData, ValidatorType>
+    createField: CreateField<TFormData>
+    useStore: <TSelected = NoInfer<FormState<TFormData>>>(
+      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
+    ) => () => TSelected
+    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
+      children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement
+    }) => any
+  }
+}
+
+export function createForm<TData, FormValidator>(
+  opts?: () => FormOptions<TData, FormValidator>,
+): FormApi<TData, FormValidator> {
+  const options = opts?.()
+  const formApi = new FormApi<TData, FormValidator>(options)
+
+  formApi.Provider = function Provider(props) {
+    return <formContext.Provider {...props} value={{ formApi: formApi }} />
+  }
+  formApi.Field = Field as any
+  formApi.createField = createField as CreateField<TData>
+  formApi.useStore = (selector) => useStore(formApi.store, selector)
+  formApi.Subscribe = (props) =>
+    functionalUpdate(props.children, useStore(formApi.store, props.selector))
+
+  /**
+   * formApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  createComputed(() => formApi.update(opts?.()))
+
+  return formApi
+}

packages/solid-form/src/createFormFactory.ts

@@ -0,0 +1,31 @@
+import type { FormApi, FormOptions } from '@tanstack/form-core'
+
+import {
+  type CreateField,
+  type FieldComponent,
+  Field,
+  createField,
+} from './createField'
+import { createForm } from './createForm'
+import { mergeProps } from 'solid-js'
+
+export type FormFactory<TFormData, FormValidator> = {
+  createForm: (
+    opts?: () => FormOptions<TFormData, FormValidator>,
+  ) => FormApi<TFormData, FormValidator>
+  createField: CreateField<TFormData>
+  Field: FieldComponent<TFormData, FormValidator>
+}
+
+export function createFormFactory<TFormData, FormValidator>(
+  defaultOpts?: () => FormOptions<TFormData, FormValidator>,
+): FormFactory<TFormData, FormValidator> {
+  return {
+    createForm: (opts) =>
+      createForm<TFormData, FormValidator>(() =>
+        mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {}),
+      ),
+    createField,
+    Field: Field as never,
+  }
+}

packages/solid-form/src/formContext.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'solid-js'
+import type { FormApi } from '@tanstack/form-core'
+
+type FormContextType =
+  | undefined
+  | {
+      formApi: FormApi<any, any>
+      parentFieldName?: string
+    }
+
+export const formContext = createContext<FormContextType>(undefined)
+
+export function useFormContext() {
+  const formApi: FormContextType = useContext(formContext)
+
+  if (!formApi)
+    throw new Error(`You are trying to use the form API outside of a form!`)
+
+  return formApi
+}

packages/solid-form/src/index.ts

@@ -0,0 +1,27 @@
+export type {
+  DeepKeys,
+  DeepValue,
+  FieldApiOptions,
+  FieldInfo,
+  FieldMeta,
+  FieldOptions,
+  FieldState,
+  FormOptions,
+  FormState,
+  RequiredByKey,
+  Updater,
+  UpdaterFn,
+  ValidationCause,
+  ValidationError,
+  ValidationMeta,
+} from '@tanstack/form-core'
+
+export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core'
+
+export { createForm } from './createForm'
+
+export type { CreateField, FieldComponent } from './createField'
+export { createField, Field } from './createField'
+
+export type { FormFactory } from './createFormFactory'
+export { createFormFactory } from './createFormFactory'

packages/solid-form/src/tests/createField.test-d.tsx

@@ -0,0 +1,68 @@
+import { assertType } from 'vitest'
+import { createForm } from '../createForm'
+
+it('should type state.value properly', () => {
+  function Comp() {
+    const form = createForm(
+      () =>
+        ({
+          defaultValues: {
+            firstName: 'test',
+            age: 84,
+          },
+        }) as const,
+    )
+
+    return (
+      <form.Provider>
+        <form.Field
+          name="firstName"
+          children={(field) => {
+            assertType<'test'>(field().state.value)
+          }}
+        />
+        <form.Field
+          name="age"
+          children={(field) => {
+            assertType<84>(field().state.value)
+          }}
+        />
+      </form.Provider>
+    )
+  }
+})
+
+it('should type onChange properly', () => {
+  function Comp() {
+    const form = createForm(
+      () =>
+        ({
+          defaultValues: {
+            firstName: 'test',
+            age: 84,
+          },
+        }) as const,
+    )
+
+    return (
+      <form.Provider>
+        <form.Field
+          name="firstName"
+          onChange={(val) => {
+            assertType<'test'>(val)
+            return null
+          }}
+          children={(field) => null}
+        />
+        <form.Field
+          name="age"
+          onChange={(val) => {
+            assertType<84>(val)
+            return null
+          }}
+          children={(field) => null}
+        />
+      </form.Provider>
+    )
+  }
+})

packages/solid-form/src/tests/createField.test.tsx

@@ -0,0 +1,376 @@
+import { render, waitFor } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import { createFormFactory } from '..'
+import { sleep } from './utils'
+
+const user = userEvent.setup()
+
+describe('createField', () => {
+  it('should allow to set default value', () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue="FirstName"
+            children={(field) => {
+              return (
+                <input
+                  data-testid="fieldinput"
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                />
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('FirstName')
+  })
+
+  it('should use field default value first', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm(() => ({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      }))
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue="otherName"
+            children={(field) => {
+              return (
+                <input
+                  data-testid="fieldinput"
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onChange={(e) => field().handleChange(e.target.value)}
+                />
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('otherName')
+  })
+
+  it('should not validate on change if isTouched is false', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            onChange={(value) => (value.includes('other') ? error : undefined)}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().setValue(e.currentTarget.value)}
+                />
+                <p>{field().getMeta().errors}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, queryByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    await user.type(input, 'other')
+    expect(queryByText(error)).not.toBeInTheDocument()
+  })
+
+  it('should validate on change if isTouched is true', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChange={(value) => (value.includes('other') ? error : undefined)}
+            children={(field) => {
+              return (
+                <div>
+                  <input
+                    data-testid="fieldinput"
+                    name={field().name}
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onInput={(e) => field().setValue(e.currentTarget.value)}
+                  />
+                  <p>{field().getMeta().errorMap.onChange}</p>
+                </div>
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate on change and on blur', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChange={(value) =>
+              value.includes('other') ? onChangeError : undefined
+            }
+            onBlur={(value) =>
+              value.includes('other') ? onBlurError : undefined
+            }
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                />
+                <p>{field().getMeta().errorMap.onChange}</p>
+                <p>{field().getMeta().errorMap.onBlur}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    // @ts-expect-error unsure why the 'vitest/globals' in tsconfig doesnt work here
+    await user.click(document.body)
+    expect(queryByText(onBlurError)).toBeInTheDocument()
+  })
+
+  it('should validate async on change', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChangeAsync={async () => {
+              await sleep(10)
+              return error
+            }}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                />
+                <p>{field().getMeta().errorMap.onChange}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate async on change and async on blur', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChangeAsync={async () => {
+              await sleep(10)
+              return onChangeError
+            }}
+            onBlurAsync={async () => {
+              await sleep(10)
+              return onBlurError
+            }}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                />
+                <p>{field().getMeta().errorMap?.onChange}</p>
+                <p>{field().getMeta().errorMap?.onBlur}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await waitFor(() => getByText(onChangeError))
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    // @ts-expect-error unsure why the 'vitest/globals' in tsconfig doesnt work here
+    await user.click(document.body)
+    await waitFor(() => getByText(onBlurError))
+    expect(getByText(onBlurError)).toBeInTheDocument()
+  })
+
+  it('should validate async on change with debounce', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const mockFn = vi.fn()
+    const error = 'Please enter a different value'
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChangeAsyncDebounceMs={100}
+            onChangeAsync={async () => {
+              mockFn()
+              await sleep(10)
+              return error
+            }}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                />
+                <p>{field().getMeta().errors}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText } = render(() => <Comp />)
+    const input = getByTestId('fieldinput')
+    await user.type(input, 'other')
+    // mockFn will have been called 5 times without onChangeAsyncDebounceMs
+    expect(mockFn).toHaveBeenCalledTimes(0)
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
+})

packages/solid-form/src/tests/createForm.test.tsx

@@ -0,0 +1,116 @@
+import { render, screen, waitFor } from '@solidjs/testing-library'
+import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+import { createFormFactory, createForm } from '..'
+
+const user = userEvent.setup()
+
+describe('createForm', () => {
+  it('preserves field state', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm()
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue={''}
+            children={(field) => (
+              <input
+                data-testid="fieldinput"
+                value={field().state.value}
+                onBlur={field().handleBlur}
+                onChange={(e) => field().handleChange(e.currentTarget.value)}
+              />
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    render(() => <Comp />)
+    const input = screen.getByTestId('fieldinput')
+    expect(screen.queryByText('FirstName')).not.toBeInTheDocument()
+    await user.type(input, 'FirstName')
+    expect(input).toHaveValue('FirstName')
+  })
+
+  it('should allow default values to be set', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.createForm(() => ({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      }))
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            children={(field) => {
+              return <p>{field().state.value}</p>
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { findByText, queryByText } = render(() => <Comp />)
+    expect(await findByText('FirstName')).toBeInTheDocument()
+    expect(queryByText('LastName')).not.toBeInTheDocument()
+  })
+
+  it('should handle submitting properly', async () => {
+    let submittedData = null as { firstName: string } | null
+    function Comp() {
+      const form = createForm(() => ({
+        defaultValues: {
+          firstName: 'FirstName',
+        },
+        onSubmit: (data) => {
+          submittedData = data
+        },
+      }))
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            children={(field) => {
+              return (
+                <input
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onChange={(e) => field().handleChange(e.target.value)}
+                  placeholder={'First name'}
+                />
+              )
+            }}
+          />
+          <button onClick={form.handleSubmit}>Submit</button>
+        </form.Provider>
+      )
+    }
+
+    const { findByPlaceholderText, getByText } = render(() => <Comp />)
+    const input = await findByPlaceholderText('First name')
+    await user.clear(input)
+    await user.type(input, 'OtherName')
+    await user.click(getByText('Submit'))
+    expect(submittedData?.firstName).toEqual('OtherName')
+  })
+})

packages/solid-form/src/tests/createFormFactory.test.tsx

@@ -0,0 +1,38 @@
+import { render } from '@solidjs/testing-library'
+import '@testing-library/jest-dom'
+import { createFormFactory } from '..'
+
+describe('createFormFactory', () => {
+  it('should allow default values to be set', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person, unknown>(() => ({
+      defaultValues: {
+        firstName: 'FirstName',
+        lastName: 'LastName',
+      },
+    }))
+
+    function Comp() {
+      const form = formFactory.createForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            children={(field) => {
+              return <p>{field().state.value}</p>
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { findByText, queryByText } = render(() => <Comp />)
+    expect(await findByText('FirstName')).toBeInTheDocument()
+    expect(queryByText('LastName')).not.toBeInTheDocument()
+  })
+})

packages/solid-form/src/tests/utils.ts

@@ -0,0 +1,5 @@
+export function sleep(timeout: number): Promise<void> {
+  return new Promise((resolve, _reject) => {
+    setTimeout(resolve, timeout)
+  })
+}

packages/solid-form/src/types.ts

@@ -0,0 +1,11 @@
+import type { FieldOptions, DeepKeys, DeepValue } from '@tanstack/form-core'
+
+export type CreateFieldOptions<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  FormValidator,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {
+  mode?: 'value' | 'array'
+}

packages/solid-form/tsconfig.eslint.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".eslintrc.cjs", "tsup.config.js"]
+}

packages/solid-form/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["vitest/globals"],
+    "outDir": "./build/lib"
+  },
+  "include": ["src"]
+}

packages/solid-form/tsup.config.js

@@ -0,0 +1,24 @@
+// @ts-check
+
+import { defineConfig } from 'tsup'
+import { generateTsupOptions, parsePresetOptions } from 'tsup-preset-solid'
+
+const preset_options = {
+  entries: {
+    entry: 'src/index.ts',
+    dev_entry: true,
+  },
+  cjs: true,
+  drop_console: true,
+}
+
+export default defineConfig(() => {
+  const parsed_data = parsePresetOptions(preset_options)
+  const tsup_options = generateTsupOptions(parsed_data)
+
+  tsup_options.forEach((tsup_option) => {
+    tsup_option.outDir = 'build'
+  })
+
+  return tsup_options
+})

packages/solid-form/vitest.config.ts

@@ -0,0 +1,15 @@
+import solid from 'vite-plugin-solid'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    name: 'solid-form',
+    dir: './src',
+    watch: false,
+    setupFiles: [],
+    environment: 'jsdom',
+    globals: true,
+    coverage: { provider: 'istanbul' },
+  },
+  plugins: [solid()],
+})

pnpm-workspace.yaml

@@ -2,7 +2,4 @@ packages:
   - 'packages/**'
   - 'examples/react/**'
   - 'examples/solid/**'
-  - 'examples/svelte/**'
   - 'examples/vue/**'
-  - '!examples/vue/2*'
-  - '!examples/vue/nuxt*'

scripts/config.ts

@@ -23,13 +23,13 @@ export const packages: Package[] = [
     name: '@tanstack/yup-form-adapter',
     packageDir: 'yup-form-adapter',
   },
+  {
+    name: '@tanstack/solid-form',
+    packageDir: 'solid-form',
+  },
   // {
-  //   name: '@tanstack/solid-store',
+  //   name: '@tanstack/svelte-form',
-  //   packageDir: 'solid-store',
+  //   packageDir: 'svelte-form',
-  // },
-  // {
-  //   name: '@tanstack/svelte-store',
-  //   packageDir: 'svelte-store',
   // },
 ]
 

tsconfig.base.json

@@ -18,6 +18,7 @@
       "@tanstack/form-core": ["packages/form-core"],
       "@tanstack/react-form": ["packages/react-form"],
       "@tanstack/vue-form": ["packages/vue-form"],
+      "@tanstack/solid-form": ["packages/solid-form"],
       "@tanstack/yup-form-adapter": ["packages/yup-form-adapter"],
       "@tanstack/zod-form-adapter": ["packages/zod-form-adapter"]
     }

tsconfig.json

@@ -3,7 +3,8 @@
   "references": [
     { "path": "packages/form-core" },
     { "path": "packages/react-form" },
-    { "path": "packages/vue-form" }
+    { "path": "packages/vue-form" },
+    { "path": "packages/solid-form" }
   ]
   // "include": ["examples/*"]
   // "exclude": ["node_modules"]