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 <[email protected]>
TanStack · Oct 30, 2023 · 6050fea · 6050fea
1 parent 1b394a7
commit 6050fea
Show file tree

Hide file tree

Showing 67 changed files with 5,165 additions and 1,868 deletions.
diff --git a/docs/config.json b/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"
+            }
+          ]
+        }
+      ]
     }
   ]
 }
diff --git a/docs/framework/react/quick-start.md b/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: '',
     },

diff --git a/docs/framework/solid/quick-start.md b/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!
diff --git a/docs/framework/solid/reference/Field.md b/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)
diff --git a/docs/framework/solid/reference/createField.md b/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)
diff --git a/docs/framework/solid/reference/createForm.md b/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)
diff --git a/docs/framework/solid/reference/createFormFactory.md b/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)
diff --git a/docs/framework/solid/reference/fieldApi.md b/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)
diff --git a/docs/framework/solid/reference/formApi.md b/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)
diff --git a/docs/framework/vue/quick-start.md b/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: '',
   },

diff --git a/docs/installation.md b/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
 ```
diff --git a/docs/overview.md b/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) =>

diff --git a/examples/react/simple/src/index.tsx b/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) =>

diff --git a/examples/react/yup/src/index.tsx b/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

diff --git a/examples/react/zod/src/index.tsx b/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

diff --git a/examples/solid/simple/.gitignore b/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?
diff --git a/examples/solid/simple/README.md b/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)
diff --git a/examples/solid/simple/index.html b/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>
diff --git a/examples/solid/simple/package.json b/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"
+        ]
+      }
+    }
+  }
+}