feat: add Preact adapter

docs/config.json

@@ -67,6 +67,15 @@
               "to": "framework/svelte/quick-start"
             }
           ]
+        },
+        {
+          "label": "preact",
+          "children": [
+            {
+              "label": "Quick Start",
+              "to": "framework/preact/quick-start"
+            }
+          ]
         }
       ]
     },
@@ -175,6 +184,23 @@
               "to": "framework/svelte/reference/functions/shallow"
             }
           ]
+        },
+        {
+          "label": "preact",
+          "children": [
+            {
+              "label": "Preact Reference",
+              "to": "framework/preact/reference/index"
+            },
+            {
+              "label": "Functions / useStore",
+              "to": "framework/preact/reference/functions/usestore"
+            },
+            {
+              "label": "Functions / shallow",
+              "to": "framework/preact/reference/functions/shallow"
+            }
+          ]
         }
       ]
     },
@@ -226,6 +252,15 @@
               "to": "framework/solid/examples/simple"
             }
           ]
+        },
+        {
+          "label": "preact",
+          "children": [
+            {
+              "label": "Simple",
+              "to": "framework/preact/examples/simple"
+            }
+          ]
         }
       ]
     }

docs/framework/preact/quick-start.md

@@ -0,0 +1,55 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+The basic preact app example to get started with the TanStack preact-store.
+
+```tsx
+import { render } from "preact";
+import { Store, useStore } from "@tanstack/preact-store";
+
+// You can instantiate the store outside of Preact components too!
+export const store = new Store({
+  dogs: 0,
+  cats: 0,
+});
+
+// This will only re-render when `state[animal]` changes. If an unrelated store property changes, it won't re-render
+
+const Display = ({ animal }) => {
+  const count = useStore(store, (state) => state[animal]);
+  return <div>{`${animal}: ${count}`}</div>;
+};
+
+const updateState = (animal) => {
+  store.setState((state) => {
+    return {
+      ...state,
+      [animal]: state[animal] + 1,
+    };
+  });
+};
+const Increment = ({ animal }) => (
+  <button onClick={() => updateState(animal)}>My Friend Likes {animal}</button>
+);
+
+function App() {
+  return (
+    <div>
+      <h1>How many of your friends like cats or dogs?</h1>
+      <p>
+        Press one of the buttons to add a counter of how many of your friends
+        like cats or dogs
+      </p>
+      <Increment animal="dogs" />
+      <Display animal="dogs" />
+      <Increment animal="cats" />
+      <Display animal="cats" />
+    </div>
+  );
+}
+
+render(<App />, document.getElementById("root"));
+```
+

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

@@ -0,0 +1,32 @@
+---
+id: shallow
+title: shallow
+---
+
+# Function: shallow()
+
+```ts
+function shallow<T>(objA, objB): boolean;
+```
+
+Defined in: [index.ts:67](https://github.com/TanStack/store/blob/main/packages/preact-store/src/index.ts#L67)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Parameters
+
+### objA
+
+`T`
+
+### objB
+
+`T`
+
+## Returns
+
+`boolean`

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

@@ -0,0 +1,84 @@
+---
+id: useStore
+title: useStore
+---
+
+# Function: useStore()
+
+## Call Signature
+
+```ts
+function useStore<TState, TSelected>(
+   store, 
+   selector?, 
+   options?): TSelected;
+```
+
+Defined in: [index.ts:41](https://github.com/TanStack/store/blob/main/packages/preact-store/src/index.ts#L41)
+
+### Type Parameters
+
+#### TState
+
+`TState`
+
+#### TSelected
+
+`TSelected` = `NoInfer`\<`TState`\>
+
+### Parameters
+
+#### store
+
+`Store`\<`TState`, `any`\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+#### options?
+
+`UseStoreOptions`\<`TSelected`\>
+
+### Returns
+
+`TSelected`
+
+## Call Signature
+
+```ts
+function useStore<TState, TSelected>(
+   store, 
+   selector?, 
+   options?): TSelected;
+```
+
+Defined in: [index.ts:46](https://github.com/TanStack/store/blob/main/packages/preact-store/src/index.ts#L46)
+
+### Type Parameters
+
+#### TState
+
+`TState`
+
+#### TSelected
+
+`TSelected` = `NoInfer`\<`TState`\>
+
+### Parameters
+
+#### store
+
+`Derived`\<`TState`, `any`\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+#### options?
+
+`UseStoreOptions`\<`TSelected`\>
+
+### Returns
+
+`TSelected`

docs/framework/preact/reference/index.md

@@ -0,0 +1,11 @@
+---
+id: "@tanstack/preact-store"
+title: "@tanstack/preact-store"
+---
+
+# @tanstack/preact-store
+
+## Functions
+
+- [shallow](../functions/shallow.md)
+- [useStore](../functions/useStore.md)

docs/installation.md

@@ -13,6 +13,14 @@ npm install @tanstack/react-store
 
 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).
 
+## Preact
+
+```sh
+npm install @tanstack/preact-store
+```
+
+TanStack Store is compatible with Preact 10+.
+
 ## Vue
 
 ```sh

examples/preact/simple/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/preact/simple/README.md

@@ -0,0 +1,15 @@
+# `create-preact`
+
+<h2 align="center">
+  <img height="256" width="256" src="./src/assets/preact.svg">
+</h2>
+
+<h3 align="center">Get started using Preact and Vite!</h3>
+
+## Getting Started
+
+- `pnpm dev` - Starts a dev server at http://localhost:5173/
+
+- `pnpm build` - Builds for production, emitting to `dist/`
+
+- `pnpm preview` - Starts a server at http://localhost:4173/ to test production build locally

examples/preact/simple/index.html

@@ -0,0 +1,14 @@
+<!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" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Vite + Preact</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

examples/preact/simple/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@tanstack/store-example-preact-simple",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3002",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/preact-store": "^0.8.0",
+    "preact": "^10.27.2"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
+    "@types/node": "^24.1.0",
+    "eslint": "^9.37.0",
+    "eslint-config-preact": "^2.0.0",
+    "typescript": "5.6.3",
+    "vite": "^6.3.6"
+  },
+  "eslintConfig": {
+    "extends": "preact"
+  }
+}

examples/preact/simple/src/index.tsx

@@ -0,0 +1,21 @@
+import { render } from 'preact'
+import { Store, useStore } from '@tanstack/preact-store'
+
+export const store = new Store({
+  count: 0,
+})
+
+function Counter() {
+  const count = useStore(store, (state) => state.count)
+  return (
+    <div>
+      <div>Count: {count}</div>
+      <button onClick={() => store.setState((s) => ({ count: s.count + 1 }))}>
+        Increment
+      </button>
+    </div>
+  )
+}
+
+const root = document.body
+render(<Counter />, root)

examples/preact/simple/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "allowJs": true,
+    "checkJs": true,
+    "strict": true,
+
+    /* Preact Config */
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "skipLibCheck": true
+  },
+  "include": ["node_modules/vite/client.d.ts", "**/*"]
+}