Skip to content

Commit 692e672

Browse files
crutchcornautofix-ci[bot]coderabbitai[bot]
authored
Add Lit Store Adapter (#320)
* feat: add initial Lit Store useSelector * chore: update generate-docs * ci: apply automated fixes and generate docs * chore: update generate-docs * ci: apply automated fixes and generate docs * feat: add Atom directive to Lit * ci: apply automated fixes and generate docs * chore: add Lit example * ci: apply automated fixes and generate docs * docs: add quick start docs for lit * chore: fix docs gen * chore: fix type tests in Lit * chore: fix tests * ci: apply automated fixes and generate docs * chore: add changeset * Apply suggestions from code review Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent 58b29da commit 692e672

27 files changed

Lines changed: 839 additions & 0 deletions

‎.changeset/polite-hats-beg.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@tanstack/lit-store': patch
3+
---
4+
5+
Initial release

‎docs/config.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,15 @@
7676
"to": "framework/preact/quick-start"
7777
}
7878
]
79+
},
80+
{
81+
"label": "lit",
82+
"children": [
83+
{
84+
"label": "Quick Start",
85+
"to": "framework/lit/quick-start"
86+
}
87+
]
7988
}
8089
]
8190
},
@@ -141,6 +150,15 @@
141150
"to": "framework/preact/reference/index"
142151
}
143152
]
153+
},
154+
{
155+
"label": "lit",
156+
"children": [
157+
{
158+
"label": "Lit Reactive Controllers",
159+
"to": "framework/lit/reference/index"
160+
}
161+
]
144162
}
145163
]
146164
},
@@ -472,6 +490,23 @@
472490
"to": "framework/preact/reference/interfaces/UseSelectorOptions"
473491
}
474492
]
493+
},
494+
{
495+
"label": "lit",
496+
"children": [
497+
{
498+
"label": "TanStackStoreSelector",
499+
"to": "framework/lit/reference/classes/TanStackStoreSelector"
500+
},
501+
{
502+
"label": "TanStackStoreAtom",
503+
"to": "framework/lit/reference/classes/TanStackStoreAtom"
504+
},
505+
{
506+
"label": "UseSelectorOptions",
507+
"to": "framework/lit/reference/interfaces/UseSelectorOptions"
508+
}
509+
]
475510
}
476511
]
477512
},
@@ -628,6 +663,15 @@
628663
"to": "framework/preact/examples/store-context"
629664
}
630665
]
666+
},
667+
{
668+
"label": "lit",
669+
"children": [
670+
{
671+
"label": "Simple",
672+
"to": "framework/lit/examples/simple"
673+
}
674+
]
631675
}
632676
]
633677
}

‎docs/framework/lit/quick-start.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
title: Quick Start
3+
id: quick-start
4+
---
5+
6+
The basic Lit app example to get started with TanStack `lit-store`.
7+
8+
```ts
9+
import { LitElement, html } from 'lit'
10+
import { customElement, property } from 'lit/decorators.js'
11+
import { TanStackStoreSelector, createStore } from '@tanstack/lit-store'
12+
13+
// You can instantiate a Store outside of Lit components too!
14+
export const store = createStore({
15+
dogs: 0,
16+
cats: 0,
17+
})
18+
19+
type Animal = 'dogs' | 'cats'
20+
21+
const updateState = (animal: Animal) => {
22+
store.setState((state) => ({
23+
...state,
24+
[animal]: state[animal] + 1,
25+
}))
26+
}
27+
28+
// This will only re-render when `state[animal]` changes. If an unrelated
29+
// store property changes, it won't re-render.
30+
@customElement('animal-display')
31+
export class AnimalDisplay extends LitElement {
32+
@property({ type: String }) animal: Animal = 'dogs'
33+
34+
// Subscribes the host to changes in `state[animal]` only.
35+
_ = new TanStackStoreSelector(
36+
this,
37+
() => store,
38+
(state) => state[this.animal],
39+
)
40+
41+
render() {
42+
return html`<div>${this.animal}: ${store.state[this.animal]}</div>`
43+
}
44+
}
45+
46+
@customElement('animal-increment')
47+
export class AnimalIncrement extends LitElement {
48+
@property({ type: String }) animal: Animal = 'dogs'
49+
50+
render() {
51+
return html`
52+
<button @click=${() => updateState(this.animal)}>
53+
My Friend Likes ${this.animal}
54+
</button>
55+
`
56+
}
57+
}
58+
59+
@customElement('tanstack-store-demo')
60+
export class TanStackStoreDemo extends LitElement {
61+
render() {
62+
return html`
63+
<div>
64+
<h1>How many of your friends like cats or dogs?</h1>
65+
<p>
66+
Press one of the buttons to add a counter of how many of your
67+
friends like cats or dogs
68+
</p>
69+
<animal-increment animal="dogs"></animal-increment>
70+
<animal-display animal="dogs"></animal-display>
71+
<animal-increment animal="cats"></animal-increment>
72+
<animal-display animal="cats"></animal-display>
73+
</div>
74+
`
75+
}
76+
}
77+
```
78+
79+
Then mount the root element in your HTML:
80+
81+
```html
82+
<tanstack-store-demo></tanstack-store-demo>
83+
<script type="module" src="/src/index.ts"></script>
84+
```

‎examples/lit/simple/.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/simple/.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/simple/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/simple/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-store-demo></tanstack-store-demo>
12+
</body>
13+
</html>

‎examples/lit/simple/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-simple",
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-store": "^0.13.1",
13+
"lit": "^3.3.1"
14+
},
15+
"devDependencies": {
16+
"vite": "^7.2.2"
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/simple/src/index.ts‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { LitElement, html } from 'lit'
2+
import { customElement, property } from 'lit/decorators.js'
3+
import { TanStackStoreSelector, createStore } from '@tanstack/lit-store'
4+
5+
// You can instantiate a Store outside of Lit components too!
6+
export const store = createStore({
7+
dogs: 0,
8+
cats: 0,
9+
})
10+
11+
type Animal = 'dogs' | 'cats'
12+
13+
const updateState = (animal: Animal) => {
14+
store.setState((state) => ({
15+
...state,
16+
[animal]: state[animal] + 1,
17+
}))
18+
}
19+
20+
// This will only re-render when `state[animal]` changes. If an unrelated store
21+
// property changes, it won't re-render.
22+
@customElement('animal-display')
23+
export class AnimalDisplay extends LitElement {
24+
@property({ type: String }) animal: Animal = 'dogs'
25+
26+
// Subscribes the host to changes in `state[animal]` only.
27+
_ = new TanStackStoreSelector(
28+
this,
29+
() => store,
30+
(state) => state[this.animal],
31+
)
32+
33+
render() {
34+
return html`<div>${this.animal}: ${store.state[this.animal]}</div>`
35+
}
36+
}
37+
38+
@customElement('animal-increment')
39+
export class AnimalIncrement extends LitElement {
40+
@property({ type: String }) animal: Animal = 'dogs'
41+
42+
render() {
43+
return html`
44+
<button @click=${() => updateState(this.animal)}>
45+
My Friend Likes ${this.animal}
46+
</button>
47+
`
48+
}
49+
}
50+
51+
@customElement('tanstack-store-demo')
52+
export class TanStackStoreDemo extends LitElement {
53+
render() {
54+
return html`
55+
<div>
56+
<h1>How many of your friends like cats or dogs?</h1>
57+
<p>
58+
Press one of the buttons to add a counter of how many of your friends
59+
like cats or dogs
60+
</p>
61+
<animal-increment animal="dogs"></animal-increment>
62+
<animal-display animal="dogs"></animal-display>
63+
<animal-increment animal="cats"></animal-increment>
64+
<animal-display animal="cats"></animal-display>
65+
</div>
66+
`
67+
}
68+
}

‎examples/lit/simple/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)