# llms-full (private-aware)
> Built from GitHub files and website pages. Large files may be truncated.

--- docs/installation.md ---
---
title: Installation
id: installation
---

You can install TanStack Store with any [NPM](https://npmjs.com) package manager.

## React

```sh
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
npm install @tanstack/vue-store
```

TanStack Store is compatible with Vue 2 and 3.

## Angular

```sh
npm install @tanstack/angular-store
```

TanStack Store is compatible with Angular 19+

## SolidJS

```sh
npm install @tanstack/solid-store
```

TanStack Store is compatible with Solid and SolidStart.

## Svelte

```sh
npm install @tanstack/svelte-store
```

TanStack Store is compatible with Svelte 5.


## Links discovered
- [NPM](https://npmjs.com)
- [Discord](https://tlinz.com/discord)

--- docs/overview.md ---
---
title: Overview
id: overview
---

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

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.

--- docs/reference/index.md ---
---
id: "@tanstack/store"
title: "@tanstack/store"
---

# @tanstack/store

## Classes

- [Derived](classes/Derived.md)
- [Effect](classes/Effect.md)
- [Store](classes/Store.md)

## Interfaces

- [DerivedFnProps](interfaces/DerivedFnProps.md)
- [DerivedOptions](interfaces/DerivedOptions.md)
- [StoreOptions](interfaces/StoreOptions.md)

## Type Aliases

- [UnwrapDerivedOrStore](type-aliases/UnwrapDerivedOrStore.md)
- [Updater](type-aliases/Updater.md)

## Variables

- [\_\_depsThatHaveWrittenThisTick](variables/depsThatHaveWrittenThisTick.md)
- [\_\_derivedToStore](variables/derivedToStore.md)
- [\_\_storeToDerived](variables/storeToDerived.md)

## Functions

- [batch](functions/batch.md)
- [isUpdaterFunction](functions/isUpdaterFunction.md)


## Links discovered
- [Derived](https://github.com/tanstack/store/blob/main/docs/reference/classes/Derived.md)
- [Effect](https://github.com/tanstack/store/blob/main/docs/reference/classes/Effect.md)
- [Store](https://github.com/tanstack/store/blob/main/docs/reference/classes/Store.md)
- [DerivedFnProps](https://github.com/tanstack/store/blob/main/docs/reference/interfaces/DerivedFnProps.md)
- [DerivedOptions](https://github.com/tanstack/store/blob/main/docs/reference/interfaces/DerivedOptions.md)
- [StoreOptions](https://github.com/tanstack/store/blob/main/docs/reference/interfaces/StoreOptions.md)
- [UnwrapDerivedOrStore](https://github.com/tanstack/store/blob/main/docs/reference/type-aliases/UnwrapDerivedOrStore.md)
- [Updater](https://github.com/tanstack/store/blob/main/docs/reference/type-aliases/Updater.md)
- [\_\_depsThatHaveWrittenThisTick](https://github.com/tanstack/store/blob/main/docs/reference/variables/depsThatHaveWrittenThisTick.md)
- [\_\_derivedToStore](https://github.com/tanstack/store/blob/main/docs/reference/variables/derivedToStore.md)
- [\_\_storeToDerived](https://github.com/tanstack/store/blob/main/docs/reference/variables/storeToDerived.md)
- [batch](https://github.com/tanstack/store/blob/main/docs/reference/functions/batch.md)
- [isUpdaterFunction](https://github.com/tanstack/store/blob/main/docs/reference/functions/isUpdaterFunction.md)

--- docs/framework/angular/reference/index.md ---
---
id: "@tanstack/angular-store"
title: "@tanstack/angular-store"
---

# @tanstack/angular-store

## Functions

- [injectStore](functions/injectStore.md)


## Links discovered
- [injectStore](https://github.com/tanstack/store/blob/main/docs/framework/angular/reference/functions/injectStore.md)

--- docs/framework/preact/reference/index.md ---
---
id: "@tanstack/preact-store"
title: "@tanstack/preact-store"
---

# @tanstack/preact-store

## Functions

- [shallow](functions/shallow.md)
- [useStore](functions/useStore.md)


## Links discovered
- [shallow](https://github.com/tanstack/store/blob/main/docs/framework/preact/reference/functions/shallow.md)
- [useStore](https://github.com/tanstack/store/blob/main/docs/framework/preact/reference/functions/useStore.md)

--- docs/framework/react/reference/index.md ---
---
id: "@tanstack/react-store"
title: "@tanstack/react-store"
---

# @tanstack/react-store

## Functions

- [shallow](functions/shallow.md)
- [useStore](functions/useStore.md)


## Links discovered
- [shallow](https://github.com/tanstack/store/blob/main/docs/framework/react/reference/functions/shallow.md)
- [useStore](https://github.com/tanstack/store/blob/main/docs/framework/react/reference/functions/useStore.md)

--- docs/framework/solid/reference/index.md ---
---
id: "@tanstack/solid-store"
title: "@tanstack/solid-store"
---

# @tanstack/solid-store

## Functions

- [shallow](functions/shallow.md)
- [useStore](functions/useStore.md)


## Links discovered
- [shallow](https://github.com/tanstack/store/blob/main/docs/framework/solid/reference/functions/shallow.md)
- [useStore](https://github.com/tanstack/store/blob/main/docs/framework/solid/reference/functions/useStore.md)

--- docs/framework/svelte/reference/index.md ---
---
id: "@tanstack/svelte-store"
title: "@tanstack/svelte-store"
---

# @tanstack/svelte-store

## Functions

- [shallow](functions/shallow.md)
- [useStore](functions/useStore.md)


## Links discovered
- [shallow](https://github.com/tanstack/store/blob/main/docs/framework/svelte/reference/functions/shallow.md)
- [useStore](https://github.com/tanstack/store/blob/main/docs/framework/svelte/reference/functions/useStore.md)

--- docs/framework/vue/reference/index.md ---
---
id: "@tanstack/vue-store"
title: "@tanstack/vue-store"
---

# @tanstack/vue-store

## Functions

- [shallow](functions/shallow.md)
- [useStore](functions/useStore.md)


## Links discovered
- [shallow](https://github.com/tanstack/store/blob/main/docs/framework/vue/reference/functions/shallow.md)
- [useStore](https://github.com/tanstack/store/blob/main/docs/framework/vue/reference/functions/useStore.md)

--- scripts/generate-docs.ts ---
import { resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { generateReferenceDocs } from '@tanstack/typedoc-config'

const __dirname = fileURLToPath(new URL('.', import.meta.url))

await generateReferenceDocs({
  packages: [
    {
      name: 'store',
      entryPoints: [resolve(__dirname, '../packages/store/src/index.ts')],
      tsconfig: resolve(__dirname, '../packages/store/tsconfig.docs.json'),
      outputDir: resolve(__dirname, '../docs/reference'),
    },
    {
      name: 'angular-store',
      entryPoints: [
        resolve(__dirname, '../packages/angular-store/src/index.ts'),
      ],
      tsconfig: resolve(
        __dirname,
        '../packages/angular-store/tsconfig.docs.json',
      ),
      outputDir: resolve(__dirname, '../docs/framework/angular/reference'),
      exclude: ['packages/store/**/*'],
    },
    {
      name: 'react-store',
      entryPoints: [resolve(__dirname, '../packages/react-store/src/index.ts')],
      tsconfig: resolve(
        __dirname,
        '../packages/react-store/tsconfig.docs.json',
      ),
      outputDir: resolve(__dirname, '../docs/framework/react/reference'),
      exclude: ['packages/store/**/*'],
    },
    {
      name: 'preact-store',
      entryPoints: [
        resolve(__dirname, '../packages/preact-store/src/index.ts'),
      ],
      tsconfig: resolve(
        __dirname,
        '../packages/preact-store/tsconfig.docs.json',
      ),
      outputDir: resolve(__dirname, '../docs/framework/preact/reference'),
      exclude: ['packages/store/**/*'],
    },
    {
      name: 'solid-store',
      entryPoints: [
        resolve(__dirname, '../packages/solid-store/src/index.tsx'),
      ],
      tsconfig: resolve(
        __dirname,
        '../packages/solid-store/tsconfig.docs.json',
      ),
      outputDir: resolve(__dirname, '../docs/framework/solid/reference'),
      exclude: ['packages/store/**/*'],
    },
    {
      name: 'svelte-store',
      entryPoints: [
        resolve(__dirname, '../packages/svelte-store/src/index.ts'),
      ],
      tsconfig: resolve(
        __dirname,
        '../packages/svelte-store/tsconfig.docs.json',
      ),
      outputDir: resolve(__dirname, '../docs/framework/svelte/reference'),
      exclude: ['packages/store/**/*'],
    },
    {
      name: 'vue-store',
      entryPoints: [resolve(__dirname, '../packages/vue-store/src/index.ts')],
      tsconfig: resolve(__dirname, '../packages/vue-store/tsconfig.docs.json'),
      outputDir: resolve(__dirname, '../docs/framework/vue/reference'),
      exclude: ['packages/store/**/*'],
    },
  ],
})

console.log('\n✅ All markdown files have been processed!')

process.exit(0)


--- examples/angular/simple/README.md ---
# Simple

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.1.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.


## Links discovered
- [Angular CLI](https://github.com/angular/angular-cli)
- [Karma](https://karma-runner.github.io)
- [Angular CLI Overview and Command Reference](https://angular.io/cli)

--- examples/preact/simple/README.md ---
# `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/react/simple/README.md ---
# Example

To run this example:

- `npm install`
- `npm run dev`


--- examples/solid/simple/README.md ---
## Usage

```bash
$ npm install # or pnpm install or yarn install
```

### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)

## Available Scripts

In the project directory, you can run:

### `npm run dev`

Runs the app in the development mode.<br>
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.

### `npm run build`

Builds the app for production to the `dist` folder.<br>
It correctly bundles Solid in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!

## Deployment

Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html)


## Links discovered
- [Solid Website](https://solidjs.com)
- [Discord](https://discord.com/invite/solidjs)
- [http://localhost:5173](http://localhost:5173)
- [documentations](https://vitejs.dev/guide/static-deploy.html)

--- examples/svelte/simple/README.md ---
# Svelte + TS + Vite

This template should help get you started developing with Svelte and TypeScript in Vite.

## Recommended IDE Setup

[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).

## Need an official Svelte framework?

Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.

## Technical considerations

**Why use this over SvelteKit?**

- It brings its own routing solution which might not be preferable for some users.
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.

This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.

Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.

**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**

Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.

**Why include `.vscode/extensions.json`?**

Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.

**Why enable `allowJs` in the TS template?**

While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.

**Why is HMR not preserving my local component state?**

HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).

If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.

```ts
// store.ts
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)
```


## Links discovered
- [VS Code](https://code.visualstudio.com/)
- [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
- [SvelteKit](https://github.com/sveltejs/kit#readme)
- [here](https://github.com/rixo/svelte-hmr#svelte-hmr)

--- examples/vue/simple/README.md ---
# Basic example

To run this example:

- `npm install` or `yarn` or `pnpm i`
- `npm run dev` or `yarn dev` or `pnpm dev`


--- examples/preact/simple/index.html ---
<!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/react/simple/index.html ---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/emblem-light.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <title>TanStack Store React Simple Example App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>


--- examples/solid/simple/index.html ---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TanStack Store Solid Simple Example App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>


--- examples/svelte/simple/index.html ---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TanStack Store Svelte Simple Example App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>


--- CONTRIBUTING.md ---
# Contributing

- Clone the repo
  - `gh repo clone TanStack/store`
- Ensure `node` is installed
  - https://nodejs.org/en/
- Ensure `pnpm` is installed
  - https://pnpm.io/installation
  - Why? We use `pnpm` to manage workspace dependencies. It's easily the best monorepo/workspace experience available as of when this was written.
- Install dependencies
  - `pnpm install`
  - This installs dependencies for all of the packages in the monorepo, even examples!
  - Dependencies inside of the packages and examples are automatically linked together as local/dynamic dependencies.
- Run the build or dev watcher
  - `pnpm build` or
  - `pnpm dev`
- Navigate to an example
  - `cd examples/react/basic`
- Run the example
  - `pnpm dev`
- Make changes to the code
  - If you ran `pnpm dev` the dev watcher will automatically rebuild the code that has changed


--- .github/pull_request_template.md ---
## 🎯 Changes

<!-- What changes are made in this PR? Describe the change and its motivation. -->

## ✅ Checklist

- [ ] I have followed the steps in the [Contributing guide](https://github.com/TanStack/store/blob/main/CONTRIBUTING.md).
- [ ] I have tested this code locally with `pnpm test:pr`.

## 🚀 Release Impact

- [ ] This change affects published code, and I have generated a [changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).
- [ ] This change is docs/CI/dev-only (no release).


## Links discovered
- [Contributing guide](https://github.com/TanStack/store/blob/main/CONTRIBUTING.md)
- [changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)

--- README.md ---
<img src="https://static.scarf.sh/a.png?x-pxid=d988eb79-b0fc-4a2b-8514-6a1ab932d188" />

<div align="center">
  <img src="./media/header_store.png" alt="TanStack Store" />
</div>

<br />

<div align="center">
<a href="https://npmjs.com/package/@tanstack/store" target="\_parent">
<img alt="npm downloads" src="https://img.shields.io/npm/dm/@tanstack/store.svg" />
</a>
<a href="https://github.com/tanstack/store" target="\_parent">
<img alt="github stars" src="https://img.shields.io/github/stars/tanstack/store.svg?style=social&label=Star" />
</a>
<a href="https://bundlephobia.com/result?p=@tanstack/store" target="\_parent">
<img alt="bundle size" src="https://badgen.net/bundlephobia/minzip/@tanstack/store" />
</a>
</div>

<div align="center">
<a href="#badge">
<img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
</a>
<a href="https://bestofjs.org/projects/tanstack-store"><img src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%store%26since=daily" alt="Best of JS" /></a>
<a href="https://twitter.com/tan_stack" target="\_parent">
<img alt="" src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social&label=Follow @TanStack" />
</a>
</div>

<div align="center">

### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)

</div>

# TanStack Store

An immutable, reactive data store with framework adapters that powers the core of the TanStack ecosystem.

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

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

## Get Involved

- We welcome issues and pull requests!
- Participate in [GitHub discussions](https://github.com/TanStack/store/discussions)
- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions

## Partners

<table align="center">
  <tr>
    <td>
        <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS">
			<picture>
			  <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" />
			  <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" />
			  <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
			</picture>        
		</a>
    </td>
    <td padding="20">
      <a href="https://www.cloudflare.com?utm_source=tanstack">
         <picture>
		  <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" />
		  <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" />
		  <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
		</picture>
      </a>
    </td>
  </tr>
</table>

<div align="center">
<img src="./media/partner_logo.svg" alt="Store & you?" height="65">
<p>
We're looking for TanStack Store Partners to join our mission! Partner with us to push the boundaries of TanStack Store and build amazing things together.
</p>
<a href="mailto:partners@tanstack.com?subject=TanStack Store Partnership"><b>LET'S CHAT</b></a>
</div>

## Explore the TanStack Ecosystem

- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
- <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching
- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
- <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering

… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>

<!-- Use the force, Luke! -->


## Links discovered
- [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
- [GitHub discussions](https://github.com/TanStack/store/discussions)
- [Discord](https://discord.com/invite/WrRKjPJ)
- [CONTRIBUTING.md](https://github.com/tanstack/store/blob/main/CONTRIBUTING.md)
- [<img alt="npm downloads" src="https://img.shields.io/npm/dm/@tanstack/store.svg" />](https://npmjs.com/package/@tanstack/store)
- [<img alt="github stars" src="https://img.shields.io/github/stars/tanstack/store.svg?style=social&label=Star" />](https://github.com/tanstack/store)
- [<img alt="bundle size" src="https://badgen.net/bundlephobia/minzip/@tanstack/store" />](https://bundlephobia.com/result?p=@tanstack/store)
- [<img src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%store%26since=daily" alt="Best of JS" />](https://bestofjs.org/projects/tanstack-store)
- [<img alt="" src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social&label=Follow @TanStack" />](https://twitter.com/tan_stack)
- [Read the docs →</b>](https://tanstack.com/store)
- [<picture> <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" /> <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" /> <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" /> </picture>](https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS)
- [<picture> <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" /> <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" /> <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" /> </picture>](https://www.cloudflare.com?utm_source=tanstack)
- [<b>TanStack Config</b>](https://github.com/tanstack/config)
- [<b>TanStack DB</b>](https://github.com/tanstack/db)
- [<b>TanStack DevTools</b>](https://github.com/tanstack/devtools)
- [<b>TanStack Form</b>](https://github.com/tanstack/form)
- [<b>TanStack Pacer</b>](https://github.com/tanstack/pacer)
- [<b>TanStack Query</b>](https://github.com/tanstack/query)
- [<b>TanStack Ranger</b>](https://github.com/tanstack/ranger)
- [<b>TanStack Router</b>](https://github.com/tanstack/router)
- [<b>TanStack Start</b>](https://github.com/tanstack/router)
- [<b>TanStack Table</b>](https://github.com/tanstack/table)
- [<b>TanStack Virtual</b>](https://github.com/tanstack/virtual)
- [<b>TanStack.com »</b>](https://tanstack.com)

--- eslint.config.js ---
// @ts-check

import { tanstackConfig } from '@tanstack/eslint-config'

export default [...tanstackConfig]


--- scripts/verify-links.ts ---
import { existsSync, readFileSync, statSync } from 'node:fs'
import { extname, resolve } from 'node:path'
import { glob } from 'tinyglobby'
// @ts-ignore Could not find a declaration file for module 'markdown-link-extractor'.
import markdownLinkExtractor from 'markdown-link-extractor'

const errors: Array<{
  file: string
  link: string
  resolvedPath: string
  reason: string
}> = []

function isRelativeLink(link: string) {
  return (
    !link.startsWith('/') &&
    !link.startsWith('http://') &&
    !link.startsWith('https://') &&
    !link.startsWith('//') &&
    !link.startsWith('#') &&
    !link.startsWith('mailto:')
  )
}

/** Remove any trailing .md */
function stripExtension(p: string): string {
  return p.replace(`${extname(p)}`, '')
}

function relativeLinkExists(link: string, file: string): boolean {
  // Remove hash if present
  const linkWithoutHash = link.split('#')[0]
  // If the link is empty after removing hash, it's not a file
  if (!linkWithoutHash) return false

  // Strip the file/link extensions
  const filePath = stripExtension(file)
  const linkPath = stripExtension(linkWithoutHash)

  // Resolve the path relative to the markdown file's directory
  // Nav up a level to simulate how links are resolved on the web
  let absPath = resolve(filePath, '..', linkPath)

  // Ensure the resolved path is within /docs
  const docsRoot = resolve('docs')
  if (!absPath.startsWith(docsRoot)) {
    errors.push({
      link,
      file,
      resolvedPath: absPath,
      reason: 'Path outside /docs',
    })
    return false
  }

  // Check if this is an example path
  const isExample = absPath.includes('/examples/')

  let exists = false

  if (isExample) {
    // Transform /docs/framework/{framework}/examples/ to /examples/{framework}/
    absPath = absPath.replace(
      /\/docs\/framework\/([^/]+)\/examples\//,
      '/examples/$1/',
    )
    // For examples, we want to check if the directory exists
    exists = existsSync(absPath) && statSync(absPath).isDirectory()
  } else {
    // For non-examples, we want to check if the .md file exists
    if (!absPath.endsWith('.md')) {
      absPath = `${absPath}.md`
    }
    exists = existsSync(absPath)
  }

  if (!exists) {
    errors.push({
      link,
      file,
      resolvedPath: absPath,
      reason: 'Not found',
    })
  }
  return exists
}

async function verifyMarkdownLinks() {
  // Find all markdown files in docs directory
  const markdownFiles = await glob('docs/**/*.md', {
    ignore: ['**/node_modules/**'],
  })

  console.log(`Found ${markdownFiles.length} markdown files\n`)

  // Process each file
  for (const file of markdownFiles) {
    const content = readFileSync(file, 'utf-8')
    const links: Array<string> = markdownLinkExtractor(content)

    const relativeLinks = links.filter((link: string) => {
      return isRelativeLink(link)
    })

    if (relativeLinks.length > 0) {
      relativeLinks.forEach((link) => {
        relativeLinkExists(link, file)
      })
    }
  }

  if (errors.length > 0) {
    console.log(`\n❌ Found ${errors.length} broken links:`)
    errors.forEach((err) => {
      console.log(
        `${err.file}\n  link:      ${err.link}\n  resolved:  ${err.resolvedPath}\n  why:       ${err.reason}\n`,
      )
    })
    process.exit(1)
  } else {
    console.log('\n✅ No broken links found!')
  }
}

verifyMarkdownLinks().catch(console.error)


--- vitest.workspace.ts ---
import { defineWorkspace } from 'vitest/config'

export default defineWorkspace([
  './packages/store/vite.config.ts',
  './packages/svelte-store/vite.config.ts',
  './packages/solid-store/vite.config.ts',
  './packages/vue-store/vite.config.ts',
  './packages/angular-store/vite.config.ts',
  './packages/react-store/vite.config.ts',
  './packages/preact-store/vite.config.ts',
])


--- packages/angular-store/eslint.config.js ---
// @ts-check

import rootConfig from '../../eslint.config.js'

export default [...rootConfig]


--- packages/preact-store/eslint.config.js ---
// @ts-check

// @ts-ignore: no types for eslint-config-preact
import preact from 'eslint-config-preact'
import rootConfig from '../../eslint.config.js'
// eslint-config-preact uses typescript-eslint under the hood
import tseslint from 'typescript-eslint'

export default [
  ...rootConfig,
  ...preact,
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        project: true,
      },
    },
    plugins: {
      'typescript-eslint': tseslint.plugin,
    },
    rules: {
      // Disable base rule to prevent overload false positives
      'no-redeclare': 'off',
      // TS-aware version handles overloads correctly
      '@typescript-eslint/no-redeclare': 'error',
    },
  },
]


--- packages/react-store/eslint.config.js ---
// @ts-check

import pluginReact from '@eslint-react/eslint-plugin'
import pluginReactHooks from 'eslint-plugin-react-hooks'
import rootConfig from '../../eslint.config.js'

export default [
  ...rootConfig,
  {
    files: ['**/*.{ts,tsx}'],
    ...pluginReact.configs.recommended,
  },
  {
    plugins: {
      'react-hooks': pluginReactHooks,
    },
    rules: {
      'react-hooks/exhaustive-deps': 'error',
      'react-hooks/rules-of-hooks': 'error',
    },
  },
]


--- packages/solid-store/eslint.config.js ---
// @ts-check

import rootConfig from '../../eslint.config.js'

export default [...rootConfig]


--- packages/store/eslint.config.js ---
// @ts-check

import rootConfig from '../../eslint.config.js'

export default [...rootConfig]


--- packages/svelte-store/eslint.config.js ---
// @ts-check

import pluginSvelte from 'eslint-plugin-svelte'
import rootConfig from '../../eslint.config.js'

export default [
  ...rootConfig,
  ...pluginSvelte.configs['flat/recommended'],
  {
    rules: {
      'svelte/block-lang': ['error', { script: ['ts'] }],
      'svelte/no-svelte-internal': 'error',
      'svelte/valid-compile': 'off',
    },
  },
]


--- packages/vue-store/eslint.config.js ---
// @ts-check

import rootConfig from '../../eslint.config.js'

export default [...rootConfig]


--- packages/svelte-store/svelte.config.js ---
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

const config = {
  preprocess: vitePreprocess(),
}

export default config


--- packages/angular-store/vite.config.ts ---
import { defineConfig } from 'vitest/config'
import packageJson from './package.json'

export default defineConfig({
  test: {
    name: packageJson.name,
    dir: './tests',
    watch: false,
    environment: 'jsdom',
    setupFiles: ['./tests/test-setup.ts'],
    coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
    typecheck: { enabled: true },
    globals: true,
  },
})


--- packages/preact-store/vite.config.ts ---
import { defineConfig, mergeConfig } from 'vitest/config'
import { tanstackViteConfig } from '@tanstack/vite-config'
import preact from '@preact/preset-vite'
import packageJson from './package.json'

const config = defineConfig({
  plugins: [preact()],
  test: {
    name: packageJson.name,
    dir: './tests',
    watch: false,
    environment: 'jsdom',
    setupFiles: ['./tests/test-setup.ts'],
    coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
    typecheck: { enabled: true },
  },
})

export default mergeConfig(
  config,
  tanstackViteConfig({
    entry: './src/index.ts',
    srcDir: './src',
  }),
)
