Skip to content

Commit 99a576c

Browse files
crutchcorncrutchcorn
authored
docs: drastically improve the Lit examples, added Array (#1668)
* docs: drastically improve the Lit examples, added Array * chore: fix CI
1 parent 424ebfa commit 99a576c

File tree

11 files changed

+308
-268
lines changed

11 files changed

+308
-268
lines changed

‎docs/config.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -611,6 +611,10 @@
611611
"label": "Simple",
612612
"to": "framework/lit/examples/simple"
613613
},
614+
{
615+
"label": "Array",
616+
"to": "framework/lit/examples/array"
617+
},
614618
{
615619
"label": "UI Libraries",
616620
"to": "framework/lit/examples/ui-libraries"

‎examples/lit/array/.eslintrc.cjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// @ts-check
2+
3+
/** @type {import('eslint').Linter.Config} */
4+
const config = {}
5+
6+
module.exports = config

‎examples/lit/array/.gitignore

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
pnpm-lock.yaml
15+
yarn.lock
16+
package-lock.json
17+
18+
# misc
19+
.DS_Store
20+
.env.local
21+
.env.development.local
22+
.env.test.local
23+
.env.production.local
24+
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*

‎examples/lit/array/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install`
6+
- `npm run dev`

‎examples/lit/array/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Lit + TS</title>
8+
<script type="module" src="/src/index.ts"></script>
9+
</head>
10+
<body>
11+
<tanstack-form-demo> </tanstack-form-demo>
12+
</body>
13+
</html>

‎examples/lit/array/package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "@tanstack/form-example-lit-array",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite --port=3001",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"test:types": "tsc"
10+
},
11+
"dependencies": {
12+
"@tanstack/lit-form": "^1.15.1",
13+
"lit": "^3.3.0"
14+
},
15+
"devDependencies": {
16+
"vite": "^6.3.5"
17+
},
18+
"browserslist": {
19+
"production": [
20+
">0.2%",
21+
"not dead",
22+
"not op_mini all"
23+
],
24+
"development": [
25+
"last 1 chrome version",
26+
"last 1 firefox version",
27+
"last 1 safari version"
28+
]
29+
}
30+
}

‎examples/lit/array/src/index.ts

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { LitElement, html } from 'lit'
2+
import { customElement } from 'lit/decorators.js'
3+
4+
import { TanStackFormController } from '@tanstack/lit-form'
5+
import { repeat } from 'lit/directives/repeat.js'
6+
7+
interface Person {
8+
name: string
9+
age: number
10+
}
11+
12+
const defaultPeople: { people: Array<Person> } = { people: [] }
13+
14+
@customElement('tanstack-form-demo')
15+
export class TanStackFormDemo extends LitElement {
16+
#form = new TanStackFormController(this, {
17+
defaultValues: defaultPeople,
18+
onSubmit({ value }) {
19+
alert(JSON.stringify(value))
20+
},
21+
})
22+
23+
render() {
24+
return html`
25+
<div>
26+
<form
27+
@submit=${(e: Event) => {
28+
e.preventDefault()
29+
e.stopPropagation()
30+
this.#form.api.handleSubmit()
31+
}}
32+
>
33+
${this.#form.field(
34+
{
35+
name: 'people',
36+
},
37+
(peopleField) => {
38+
return html`<div>
39+
${repeat(
40+
peopleField.state.value,
41+
(_, index) => index,
42+
(_, index) => {
43+
return html`
44+
${this.#form.field(
45+
{
46+
name: `people[${index}].name`,
47+
},
48+
(field) => {
49+
return html`<div>
50+
<div>
51+
<label>
52+
<div>Name for person ${index}</div>
53+
<input
54+
type="text"
55+
placeholder="First Name"
56+
.value="${field.state.value}"
57+
@blur="${() => field.handleBlur()}"
58+
@input="${(e: Event) => {
59+
const target = e.target as HTMLInputElement
60+
field.handleChange(target.value)
61+
}}"
62+
/>
63+
</label>
64+
</div>
65+
</div>`
66+
},
67+
)}
68+
`
69+
},
70+
)}
71+
72+
<button
73+
type="button"
74+
@click=${() => {
75+
peopleField.pushValue({
76+
name: '',
77+
age: 0,
78+
})
79+
}}
80+
>
81+
Add person
82+
</button>
83+
</div> `
84+
},
85+
)}
86+
87+
<button type="submit" ?disabled=${this.#form.api.state.isSubmitting}>
88+
${this.#form.api.state.isSubmitting ? '...' : 'Submit'}
89+
</button>
90+
</form>
91+
</div>
92+
`
93+
}
94+
}

‎examples/lit/array/tsconfig.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"experimentalDecorators": true,
5+
"useDefineForClassFields": false,
6+
"module": "ESNext",
7+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
8+
"skipLibCheck": true,
9+
10+
/* Bundler mode */
11+
"moduleResolution": "Bundler",
12+
"allowImportingTsExtensions": true,
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"noEmit": true,
16+
17+
/* Linting */
18+
"strict": true,
19+
"noUnusedLocals": true,
20+
"noUnusedParameters": true,
21+
"noFallthroughCasesInSwitch": true
22+
},
23+
"include": ["src"]
24+
}

0 commit comments

Comments
 (0)