Skip to content

Commit e72d955

Browse files
theVedantaKevinVandyautofix-ci[bot]
authored
feat: add Preact adapter (#254)
* initial setup -- eslint + vite config + simple plugins * vite config issue * revert * removed all react dependencies / plugins * removed all react dependencies / plugins * removed eslint plugin * simple version of the uSES hook with selector * removed use-sync-external-store dependency * removed use-sync-external-store dependency * removed react-hook eslint rules * tests + versions mismatches + tseslint * ci: apply automated fixes and generate docs * add preact generated docs * add overrides to root package json --------- Co-authored-by: Kevin Van Cott <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 3f73e32 commit e72d955

28 files changed

+2606
-198
lines changed

‎docs/config.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,15 @@
6767
"to": "framework/svelte/quick-start"
6868
}
6969
]
70+
},
71+
{
72+
"label": "preact",
73+
"children": [
74+
{
75+
"label": "Quick Start",
76+
"to": "framework/preact/quick-start"
77+
}
78+
]
7079
}
7180
]
7281
},
@@ -175,6 +184,23 @@
175184
"to": "framework/svelte/reference/functions/shallow"
176185
}
177186
]
187+
},
188+
{
189+
"label": "preact",
190+
"children": [
191+
{
192+
"label": "Preact Reference",
193+
"to": "framework/preact/reference/index"
194+
},
195+
{
196+
"label": "Functions / useStore",
197+
"to": "framework/preact/reference/functions/usestore"
198+
},
199+
{
200+
"label": "Functions / shallow",
201+
"to": "framework/preact/reference/functions/shallow"
202+
}
203+
]
178204
}
179205
]
180206
},
@@ -226,6 +252,15 @@
226252
"to": "framework/solid/examples/simple"
227253
}
228254
]
255+
},
256+
{
257+
"label": "preact",
258+
"children": [
259+
{
260+
"label": "Simple",
261+
"to": "framework/preact/examples/simple"
262+
}
263+
]
229264
}
230265
]
231266
}

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
title: Quick Start
3+
id: quick-start
4+
---
5+
6+
The basic preact app example to get started with the TanStack preact-store.
7+
8+
```tsx
9+
import { render } from "preact";
10+
import { Store, useStore } from "@tanstack/preact-store";
11+
12+
// You can instantiate the store outside of Preact components too!
13+
export const store = new Store({
14+
dogs: 0,
15+
cats: 0,
16+
});
17+
18+
// This will only re-render when `state[animal]` changes. If an unrelated store property changes, it won't re-render
19+
20+
const Display = ({ animal }) => {
21+
const count = useStore(store, (state) => state[animal]);
22+
return <div>{`${animal}: ${count}`}</div>;
23+
};
24+
25+
const updateState = (animal) => {
26+
store.setState((state) => {
27+
return {
28+
...state,
29+
[animal]: state[animal] + 1,
30+
};
31+
});
32+
};
33+
const Increment = ({ animal }) => (
34+
<button onClick={() => updateState(animal)}>My Friend Likes {animal}</button>
35+
);
36+
37+
function App() {
38+
return (
39+
<div>
40+
<h1>How many of your friends like cats or dogs?</h1>
41+
<p>
42+
Press one of the buttons to add a counter of how many of your friends
43+
like cats or dogs
44+
</p>
45+
<Increment animal="dogs" />
46+
<Display animal="dogs" />
47+
<Increment animal="cats" />
48+
<Display animal="cats" />
49+
</div>
50+
);
51+
}
52+
53+
render(<App />, document.getElementById("root"));
54+
```
55+

‎docs/framework/preact/reference/functions/shallow.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
id: shallow
3+
title: shallow
4+
---
5+
6+
# Function: shallow()
7+
8+
```ts
9+
function shallow<T>(objA, objB): boolean;
10+
```
11+
12+
Defined in: [index.ts:67](https://github.com/TanStack/store/blob/main/packages/preact-store/src/index.ts#L67)
13+
14+
## Type Parameters
15+
16+
### T
17+
18+
`T`
19+
20+
## Parameters
21+
22+
### objA
23+
24+
`T`
25+
26+
### objB
27+
28+
`T`
29+
30+
## Returns
31+
32+
`boolean`

‎docs/framework/preact/reference/functions/useStore.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
id: useStore
3+
title: useStore
4+
---
5+
6+
# Function: useStore()
7+
8+
## Call Signature
9+
10+
```ts
11+
function useStore<TState, TSelected>(
12+
store,
13+
selector?,
14+
options?): TSelected;
15+
```
16+
17+
Defined in: [index.ts:41](https://github.com/TanStack/store/blob/main/packages/preact-store/src/index.ts#L41)
18+
19+
### Type Parameters
20+
21+
#### TState
22+
23+
`TState`
24+
25+
#### TSelected
26+
27+
`TSelected` = `NoInfer`\<`TState`\>
28+
29+
### Parameters
30+
31+
#### store
32+
33+
`Store`\<`TState`, `any`\>
34+
35+
#### selector?
36+
37+
(`state`) => `TSelected`
38+
39+
#### options?
40+
41+
`UseStoreOptions`\<`TSelected`\>
42+
43+
### Returns
44+
45+
`TSelected`
46+
47+
## Call Signature
48+
49+
```ts
50+
function useStore<TState, TSelected>(
51+
store,
52+
selector?,
53+
options?): TSelected;
54+
```
55+
56+
Defined in: [index.ts:46](https://github.com/TanStack/store/blob/main/packages/preact-store/src/index.ts#L46)
57+
58+
### Type Parameters
59+
60+
#### TState
61+
62+
`TState`
63+
64+
#### TSelected
65+
66+
`TSelected` = `NoInfer`\<`TState`\>
67+
68+
### Parameters
69+
70+
#### store
71+
72+
`Derived`\<`TState`, `any`\>
73+
74+
#### selector?
75+
76+
(`state`) => `TSelected`
77+
78+
#### options?
79+
80+
`UseStoreOptions`\<`TSelected`\>
81+
82+
### Returns
83+
84+
`TSelected`

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
id: "@tanstack/preact-store"
3+
title: "@tanstack/preact-store"
4+
---
5+
6+
# @tanstack/preact-store
7+
8+
## Functions
9+
10+
- [shallow](../functions/shallow.md)
11+
- [useStore](../functions/useStore.md)

‎docs/installation.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,14 @@ npm install @tanstack/react-store
1313

1414
TanStack Store is compatible with React v16.8+ and is currently only compatible with ReactDOM only. If you would like to contribute to the React Native adapter, please reach out to us on [Discord](https://tlinz.com/discord).
1515

16+
## Preact
17+
18+
```sh
19+
npm install @tanstack/preact-store
20+
```
21+
22+
TanStack Store is compatible with Preact 10+.
23+
1624
## Vue
1725

1826
```sh

‎examples/preact/simple/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/preact/simple/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# `create-preact`
2+
3+
<h2 align="center">
4+
<img height="256" width="256" src="./src/assets/preact.svg">
5+
</h2>
6+
7+
<h3 align="center">Get started using Preact and Vite!</h3>
8+
9+
## Getting Started
10+
11+
- `pnpm dev` - Starts a dev server at http://localhost:5173/
12+
13+
- `pnpm build` - Builds for production, emitting to `dist/`
14+
15+
- `pnpm preview` - Starts a server at http://localhost:4173/ to test production build locally

‎examples/preact/simple/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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+
<meta name="color-scheme" content="light dark" />
8+
<title>Vite + Preact</title>
9+
</head>
10+
<body>
11+
<div id="app"></div>
12+
<script type="module" src="/src/index.tsx"></script>
13+
</body>
14+
</html>

‎examples/preact/simple/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@tanstack/store-example-preact-simple",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite --port=3002",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"@tanstack/preact-store": "^0.8.0",
12+
"preact": "^10.27.2"
13+
},
14+
"devDependencies": {
15+
"@preact/preset-vite": "^2.10.2",
16+
"@types/node": "^24.1.0",
17+
"eslint": "^9.37.0",
18+
"eslint-config-preact": "^2.0.0",
19+
"typescript": "5.6.3",
20+
"vite": "^6.3.6"
21+
},
22+
"eslintConfig": {
23+
"extends": "preact"
24+
}
25+
}

0 commit comments

Comments
 (0)