TanStack · crutchcorn · Mar 13, 2024 · Jan 21, 2024 · Jan 21, 2024 · Jan 22, 2024
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -98,7 +98,7 @@ body:
   - type: dropdown
     id: adapter
     attributes:
-      label: Tanstack Form adapter
+      label: TanStack Form adapter
       description: |
         Please let us know which adapter of TanStack Form you were using when the issue occurred.
       options:

diff --git a/docs/config.json b/docs/config.json
@@ -53,6 +53,15 @@
               "to": "framework/solid/quick-start"
             }
           ]
+        },
+        {
+          "label": "lit",
+          "children": [
+            {
+              "label": "Quick Start",
+              "to": "framework/lit/quick-start"
+            }
+          ]
         }
       ]
     },
@@ -278,6 +287,19 @@
               "to": "framework/solid/examples/valibot"
             }
           ]
+        },
+        {
+          "label": "lit",
+          "children": [
+            {
+              "label": "Simple",
+              "to": "framework/lit/examples/simple"
+            },
+            {
+              "label": "UI Libraries",
+              "to": "framework/lit/examples/ui-libraries"
+            }
+          ]
         }
       ]
     }

diff --git a/docs/framework/lit/quick-start.md b/docs/framework/lit/quick-start.md
@@ -0,0 +1,65 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+
+The bare minimum to get started with TanStack Form is to create a `TanstackFormController`:
+
+```ts
+interface Employee {
+  firstName: string
+  lastName: string
+  employed: boolean
+  jobTitle: string
+}
+
+#form = new TanstackFormController(this, {
+  defaultValues: {
+    employees: [] as Employee[],
+  },
+})
+```
+
+In this example `this` references the instance of your `LitElement` in which you want to use TanStack Form.
+
+To wire a form element in your template up with TanStack Form, use the `field` method of `TanstackFormController`:
+
+```ts
+export class TestForm extends LitElement {
+  render() {
+    return html`
+ <p>Please enter your first name></p>
+ ${this.form.field(
+      {
+        name: `firstName`,
+        validators: {
+          onChange: ({ value }) =>
+            value.length < 3 ? 'Not long enough' : undefined,
+        },
+      },
+      (field: FieldApi<Employee, 'firstName'>) => {
+        return html` <div>
+              <label>First Name</label>
+              <input
+                id="firstName"
+                type="text"
+                placeholder="First Name"
+                @blur="${() => field.handleBlur()}"
+                .value="${field.getValue()}"
+                @input="${(event: InputEvent) => {
+                  if (event.currentTarget) {
+                    const newValue = (event.currentTarget as HTMLInputElement).value;
+                    field.handleChange(newValue);
+                  }
+                }}"
+              />
+            </div>`
+      },
+    )}`;
+  }
+}
+```
+
+The first parameter of `field` is `FieldOptions` and the second is callback to render your element. Be aware that you need
+to handle updating the element and form yourself as seen in the example above.
diff --git a/docs/framework/react/guides/react-native.md b/docs/framework/react/guides/react-native.md
@@ -3,7 +3,7 @@ id: react-native
 title: Usage with React Native
 ---
 
-Tanstack Form is headless and it should support React Native out-of-the-box without needing any additional configuration.
+TanStack Form is headless and it should support React Native out-of-the-box without needing any additional configuration.
 
 Here is an example:
 

diff --git a/examples/lit/simple/.eslintrc.cjs b/examples/lit/simple/.eslintrc.cjs
@@ -0,0 +1,15 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+  rules: {
+    'react/no-children-prop': 'off',
+  },
+}
+
+module.exports = config
diff --git a/examples/lit/simple/.gitignore b/examples/lit/simple/.gitignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/lit/simple/README.md b/examples/lit/simple/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/lit/simple/index.html b/examples/lit/simple/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit + TS</title>
+    <script type="module" src="/src/index.ts"></script>
+  </head>
+  <body>
+    <tanstack-form-demo> </tanstack-form-demo>
+  </body>
+</html>
diff --git a/examples/lit/simple/package.json b/examples/lit/simple/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@tanstack/form-example-lit-simple",
+  "version": "0.0.1",
+  "main": "src/index.jsx",
+  "scripts": {
+    "dev": "vite --port=3001",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "tsc"
+  },
+  "dependencies": {
+    "@tanstack/lit-form": "<1.0.0",
+    "lit": "^3.1.1"
+  },
+  "devDependencies": {
+    "vite": "^5.0.10"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}