Skip to content

Commit 463ffd3

Browse files
fredericbahrfredericbahr
committed
docs: add lit docs
1 parent 13cc421 commit 463ffd3

9 files changed

Lines changed: 306 additions & 11 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ An immutable, reactive data store with framework adapters that powers the core o
4040

4141
- Fine‑grained updates for performant state management
4242
- Flexible primitives for building custom state logic
43-
- Works across frameworks like React, Solid, Vue, Angular & Svelte
43+
- Works across frameworks like React, Solid, Vue, Angular, Svelte & Lit
4444
- Lightweight and standalone — use it in any app or as a library foundation
4545

4646
### <a href="https://tanstack.com/store">Read the docs →</b></a>

‎docs/config.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"label": "react",
2828
"children": [
2929
{
30-
"label": "Quick Start",
30+
"label": "Quick Start - React",
3131
"to": "framework/react/quick-start"
3232
}
3333
]
@@ -36,7 +36,7 @@
3636
"label": "vue",
3737
"children": [
3838
{
39-
"label": "Quick Start",
39+
"label": "Quick Start - Vue",
4040
"to": "framework/vue/quick-start"
4141
}
4242
]
@@ -45,7 +45,7 @@
4545
"label": "solid",
4646
"children": [
4747
{
48-
"label": "Quick Start",
48+
"label": "Quick Start - Solid",
4949
"to": "framework/solid/quick-start"
5050
}
5151
]
@@ -54,7 +54,7 @@
5454
"label": "angular",
5555
"children": [
5656
{
57-
"label": "Quick Start",
57+
"label": "Quick Start - Angular",
5858
"to": "framework/angular/quick-start"
5959
}
6060
]
@@ -63,7 +63,7 @@
6363
"label": "svelte",
6464
"children": [
6565
{
66-
"label": "Quick Start",
66+
"label": "Quick Start - Svelte",
6767
"to": "framework/svelte/quick-start"
6868
}
6969
]
@@ -72,7 +72,7 @@
7272
"label": "preact",
7373
"children": [
7474
{
75-
"label": "Quick Start",
75+
"label": "Quick Start - Preact",
7676
"to": "framework/preact/quick-start"
7777
}
7878
]
@@ -81,7 +81,7 @@
8181
"label": "lit",
8282
"children": [
8383
{
84-
"label": "Quick Start",
84+
"label": "Quick Start - Lit",
8585
"to": "framework/lit/quick-start"
8686
}
8787
]

‎docs/framework/lit/reference/classes/TanStackStoreAtom.md‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
id: TanStackStoreAtom
3+
title: TanStackStoreAtom
4+
---
5+
6+
# Class: TanStackStoreAtom\<TValue\>
7+
8+
Defined in: [tan-stack-store-atom.ts:29](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-atom.ts#L29)
9+
10+
Subscribes a Lit host to a writable atom and exposes its current value
11+
along with a stable setter.
12+
13+
Use this when an element needs to both read and update the same writable
14+
atom. The host will only re-render when the atom's value actually changes
15+
(according to the configured `compare` function).
16+
17+
## Example
18+
19+
```ts
20+
class CounterEl extends LitElement {
21+
`#count` = new TanStackStoreAtom(this, () => countAtom)
22+
23+
render() {
24+
return html`
25+
<button @click=${() => this.#count.set((prev) => prev + 1)}>
26+
${this.#count.value}
27+
</button>
28+
`
29+
}
30+
}
31+
```
32+
33+
## Type Parameters
34+
35+
### TValue
36+
37+
`TValue`
38+
39+
## Constructors
40+
41+
### Constructor
42+
43+
```ts
44+
new TanStackStoreAtom<TValue>(
45+
host,
46+
getAtom,
47+
options?): TanStackStoreAtom<TValue>;
48+
```
49+
50+
Defined in: [tan-stack-store-atom.ts:32](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-atom.ts#L32)
51+
52+
#### Parameters
53+
54+
##### host
55+
56+
`ReactiveControllerHost`
57+
58+
##### getAtom
59+
60+
() => `Atom`\<`TValue`\> \| `undefined`
61+
62+
##### options?
63+
64+
[`UseSelectorOptions`](../interfaces/UseSelectorOptions.md)\<`TValue`\>
65+
66+
#### Returns
67+
68+
`TanStackStoreAtom`\<`TValue`\>
69+
70+
## Accessors
71+
72+
### value
73+
74+
#### Get Signature
75+
76+
```ts
77+
get value(): TValue | undefined;
78+
```
79+
80+
Defined in: [tan-stack-store-atom.ts:43](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-atom.ts#L43)
81+
82+
##### Returns
83+
84+
`TValue` \| `undefined`
85+
86+
## Methods
87+
88+
### set()
89+
90+
#### Call Signature
91+
92+
```ts
93+
set(value): void;
94+
```
95+
96+
Defined in: [tan-stack-store-atom.ts:47](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-atom.ts#L47)
97+
98+
##### Parameters
99+
100+
###### value
101+
102+
`TValue`
103+
104+
##### Returns
105+
106+
`void`
107+
108+
#### Call Signature
109+
110+
```ts
111+
set(updater): void;
112+
```
113+
114+
Defined in: [tan-stack-store-atom.ts:48](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-atom.ts#L48)
115+
116+
##### Parameters
117+
118+
###### updater
119+
120+
(`prev`) => `TValue`
121+
122+
##### Returns
123+
124+
`void`

‎docs/framework/lit/reference/classes/TanStackStoreSelector.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
id: TanStackStoreSelector
3+
title: TanStackStoreSelector
4+
---
5+
6+
# Class: TanStackStoreSelector\<TSource, TSelected\>
7+
8+
Defined in: [tan-stack-store-selector.ts:22](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L22)
9+
10+
## Type Parameters
11+
12+
### TSource
13+
14+
`TSource`
15+
16+
### TSelected
17+
18+
`TSelected` = `NoInfer`\<`TSource`\>
19+
20+
## Implements
21+
22+
- `ReactiveController`
23+
24+
## Constructors
25+
26+
### Constructor
27+
28+
```ts
29+
new TanStackStoreSelector<TSource, TSelected>(
30+
host,
31+
getStore,
32+
selector,
33+
options?): TanStackStoreSelector<TSource, TSelected>;
34+
```
35+
36+
Defined in: [tan-stack-store-selector.ts:35](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L35)
37+
38+
#### Parameters
39+
40+
##### host
41+
42+
`ReactiveControllerHost`
43+
44+
##### getStore
45+
46+
() => `SelectionSource`\<`TSource`\> \| `undefined`
47+
48+
##### selector
49+
50+
(`snapshot`) => `TSelected`
51+
52+
##### options?
53+
54+
[`UseSelectorOptions`](../interfaces/UseSelectorOptions.md)\<`TSelected`\>
55+
56+
#### Returns
57+
58+
`TanStackStoreSelector`\<`TSource`, `TSelected`\>
59+
60+
## Methods
61+
62+
### hostDisconnected()
63+
64+
```ts
65+
hostDisconnected(): void;
66+
```
67+
68+
Defined in: [tan-stack-store-selector.ts:72](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L72)
69+
70+
Called when the host is disconnected from the component tree. For custom
71+
element hosts, this corresponds to the `disconnectedCallback()` lifecycle,
72+
which is called the host or an ancestor component is disconnected from the
73+
document.
74+
75+
#### Returns
76+
77+
`void`
78+
79+
#### Implementation of
80+
81+
```ts
82+
ReactiveController.hostDisconnected
83+
```
84+
85+
***
86+
87+
### hostUpdate()
88+
89+
```ts
90+
hostUpdate(): void;
91+
```
92+
93+
Defined in: [tan-stack-store-selector.ts:48](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L48)
94+
95+
Called during the client-side host update, just before the host calls
96+
its own update.
97+
98+
Code in `update()` can depend on the DOM as it is not called in
99+
server-side rendering.
100+
101+
#### Returns
102+
103+
`void`
104+
105+
#### Implementation of
106+
107+
```ts
108+
ReactiveController.hostUpdate
109+
```

‎docs/framework/lit/reference/index.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
id: "@tanstack/lit-store"
3+
title: "@tanstack/lit-store"
4+
---
5+
6+
# @tanstack/lit-store
7+
8+
## Classes
9+
10+
- [TanStackStoreAtom](classes/TanStackStoreAtom.md)
11+
- [TanStackStoreSelector](classes/TanStackStoreSelector.md)
12+
13+
## Interfaces
14+
15+
- [UseSelectorOptions](interfaces/UseSelectorOptions.md)

‎docs/framework/lit/reference/interfaces/UseSelectorOptions.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
id: UseSelectorOptions
3+
title: UseSelectorOptions
4+
---
5+
6+
# Interface: UseSelectorOptions\<TSelected\>
7+
8+
Defined in: [tan-stack-store-selector.ts:3](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L3)
9+
10+
## Type Parameters
11+
12+
### TSelected
13+
14+
`TSelected`
15+
16+
## Properties
17+
18+
### compare()?
19+
20+
```ts
21+
optional compare: (a, b) => boolean;
22+
```
23+
24+
Defined in: [tan-stack-store-selector.ts:4](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L4)
25+
26+
#### Parameters
27+
28+
##### a
29+
30+
`TSelected`
31+
32+
##### b
33+
34+
`TSelected`
35+
36+
#### Returns
37+
38+
`boolean`

‎docs/installation.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,11 @@ npm install @tanstack/svelte-store
5252
```
5353

5454
TanStack Store is compatible with Svelte 5.
55+
56+
## Lit
57+
58+
```sh
59+
npm install @tanstack/lit-store
60+
```
61+
62+
TanStack Store is compatible with Lit 3.

‎docs/overview.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ title: Overview
33
id: overview
44
---
55

6-
TanStack Store is a framework agnostic data store that ships with framework specific adapters for major frameworks like React, Solid, Vue, Angular, and Svelte.
6+
TanStack Store is a framework agnostic data store that ships with framework specific adapters for major frameworks like React, Solid, Vue, Angular, Svelte and Lit.
77

8-
TanStack Store is primarily used for state management internally for most framework agnostic TanStack libraries. It can also be used as a standalone library for any framework or application.
8+
TanStack Store is primarily used for state management internally for most framework agnostic TanStack libraries. It can also be used as a standalone library for any framework or application.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@
7575
"@tanstack/solid-store": "workspace:*",
7676
"@tanstack/store": "workspace:*",
7777
"@tanstack/svelte-store": "workspace:*",
78-
"@tanstack/vue-store": "workspace:*"
78+
"@tanstack/vue-store": "workspace:*",
79+
"@tanstack/lit-store": "workspace:*"
7980
},
8081
"pnpm": {
8182
"packageExtensions": {

0 commit comments

Comments
 (0)