feat: add Lit adapter for Tanstack form (#577)

* Initial Lit commit

* Fix tests

* Fix types

* Remove unused packages

* Remove unused packages

* Run prettier

* Removed tsup

* Change exports

* Add simple example

* Prettier

* New example

* Add docs

* feat: support array notation in DeepKeys and DeepValue types

* fix: support numerical values for arrays in DeepValue better

* feat!: remove form.Provider from React package

* chore: fix utils tests in regards to arrays

* feat!: remove form.Provider from Solid package

* chore!: proof of working arrays in react

* Update docs/framework/lit/quick-start.md

Co-authored-by: fuko <[email protected]>

* Update packages/lit-form/src/tanstack-form-controller.ts

Co-authored-by: fuko <[email protected]>

* Update docs/framework/lit/quick-start.md

Co-authored-by: fuko <[email protected]>

* Add textarea
Fix issue in ControlValueAccessor

* chore: change Vue behavior and types

* chore: fix CI, apply formatter, etc

* docs: remove mention of provider from docs

* chore: add test to React array usage

* test: add test to Solid form

* chore: fix Solid test

* chore: add array test to Vue

* chore: fix CI

* docs: add array example to react docs

* docs: improve the React basic concepts example

* chore: add React array example

* docs: add SolidJS example and docs

* chore: add Vue example

* docs: add array guide to Vue

* chore: fix CI

* chore: fix CI issues

* chore: fix CI

* chore: add back errorText to UI library demo

* chore: add back error validation in simple demo

* chore: fix default value issues

* docs: remove mention of bind in quickstart docs

* docs: add to publish and docs

---------

Co-authored-by: Corbin Crutchley <[email protected]>
Co-authored-by: fuko <[email protected]>

.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:

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"
+            }
+          ]
         }
       ]
     }

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.

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:
 

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

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*

examples/lit/simple/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`

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>

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"
+    ]
+  }
+}