diff --git a/docs/framework/angular/quick-start.md b/docs/framework/angular/quick-start.md index 06b708b7..b4b48695 100644 --- a/docs/framework/angular/quick-start.md +++ b/docs/framework/angular/quick-start.md @@ -32,10 +32,10 @@ export class AppComponent {} **store.ts** ```typescript -import { Store } from '@tanstack/angular-store'; +import { createStore } from '@tanstack/angular-store'; // You can instantiate the store outside of Angular components too! -export const store = new Store({ +export const store = createStore({ dogs: 0, cats: 0, }); diff --git a/docs/framework/angular/reference/functions/injectStore.md b/docs/framework/angular/reference/functions/injectStore.md index 91883003..25d7acf3 100644 --- a/docs/framework/angular/reference/functions/injectStore.md +++ b/docs/framework/angular/reference/functions/injectStore.md @@ -14,7 +14,7 @@ function injectStore( options?): Signal; ``` -Defined in: [index.ts:19](https://github.com/TanStack/store/blob/main/packages/angular-store/src/index.ts#L19) +Defined in: [index.ts:21](https://github.com/TanStack/store/blob/main/packages/angular-store/src/index.ts#L21) ### Type Parameters @@ -30,7 +30,7 @@ Defined in: [index.ts:19](https://github.com/TanStack/store/blob/main/packages/a #### store -`Store`\<`TState`, `any`\> +`Atom`\<`TState`\> #### selector? @@ -53,7 +53,7 @@ function injectStore( options?): Signal; ``` -Defined in: [index.ts:24](https://github.com/TanStack/store/blob/main/packages/angular-store/src/index.ts#L24) +Defined in: [index.ts:26](https://github.com/TanStack/store/blob/main/packages/angular-store/src/index.ts#L26) ### Type Parameters @@ -69,7 +69,7 @@ Defined in: [index.ts:24](https://github.com/TanStack/store/blob/main/packages/a #### store -`Derived`\<`TState`, `any`\> +`Atom`\<`TState`\> | `ReadonlyAtom`\<`TState`\> #### selector? diff --git a/docs/framework/preact/quick-start.md b/docs/framework/preact/quick-start.md index 96e19d2e..841fcab7 100644 --- a/docs/framework/preact/quick-start.md +++ b/docs/framework/preact/quick-start.md @@ -7,10 +7,10 @@ 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"; +import { createStore, useStore } from "@tanstack/preact-store"; // You can instantiate the store outside of Preact components too! -export const store = new Store({ +export const store = createStore({ dogs: 0, cats: 0, }); diff --git a/docs/framework/preact/reference/functions/shallow.md b/docs/framework/preact/reference/functions/shallow.md index 8284ccaf..447361a3 100644 --- a/docs/framework/preact/reference/functions/shallow.md +++ b/docs/framework/preact/reference/functions/shallow.md @@ -9,7 +9,7 @@ title: shallow function shallow(objA, objB): boolean; ``` -Defined in: [index.ts:130](https://github.com/TanStack/store/blob/main/packages/preact-store/src/index.ts#L130) +Defined in: [index.ts:121](https://github.com/TanStack/store/blob/main/packages/preact-store/src/index.ts#L121) ## Type Parameters diff --git a/docs/framework/preact/reference/functions/useStore.md b/docs/framework/preact/reference/functions/useStore.md index 22d4ed55..43e5e115 100644 --- a/docs/framework/preact/reference/functions/useStore.md +++ b/docs/framework/preact/reference/functions/useStore.md @@ -5,80 +5,39 @@ title: useStore # Function: useStore() -## Call Signature - -```ts -function useStore( - store, - selector?, - options?): TSelected; -``` - -Defined in: [index.ts:104](https://github.com/TanStack/store/blob/main/packages/preact-store/src/index.ts#L104) - -### 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( store, - selector?, - options?): TSelected; + selector, + options): TSelected; ``` -Defined in: [index.ts:109](https://github.com/TanStack/store/blob/main/packages/preact-store/src/index.ts#L109) +Defined in: [index.ts:105](https://github.com/TanStack/store/blob/main/packages/preact-store/src/index.ts#L105) -### Type Parameters +## Type Parameters -#### TState +### TState `TState` -#### TSelected +### TSelected `TSelected` = `NoInfer`\<`TState`\> -### Parameters +## Parameters -#### store +### store -`Derived`\<`TState`, `any`\> +`Atom`\<`TState`\> | `ReadonlyAtom`\<`TState`\> -#### selector? +### selector (`state`) => `TSelected` -#### options? +### options -`UseStoreOptions`\<`TSelected`\> +`UseStoreOptions`\<`TSelected`\> = `{}` -### Returns +## Returns `TSelected` diff --git a/docs/framework/react/quick-start.md b/docs/framework/react/quick-start.md index 50baa085..bab45973 100644 --- a/docs/framework/react/quick-start.md +++ b/docs/framework/react/quick-start.md @@ -8,10 +8,10 @@ The basic react app example to get started with the TanStack react-store. ```tsx import React from "react"; import ReactDOM from "react-dom/client"; -import { Store, useStore } from "@tanstack/react-store"; +import { createStore, useStore } from "@tanstack/react-store"; // You can instantiate the store outside of React components too! -export const store = new Store({ +export const store = createStore({ dogs: 0, cats: 0, }); diff --git a/docs/framework/solid/quick-start.md b/docs/framework/solid/quick-start.md index 6d2da158..67819d76 100644 --- a/docs/framework/solid/quick-start.md +++ b/docs/framework/solid/quick-start.md @@ -6,12 +6,12 @@ id: quick-start The basic Solid app example to get started with the TanStack Solid-store. ```jsx -import { Store, useStore } from '@tanstack/solid-store'; +import { createStore, useStore } from '@tanstack/solid-store'; // You can instantiate the store outside of Solid components too! -export const store = new Store({ -  cats: 0, -  dogs: 0 +export const store = createStore({ + cats: 0, + dogs: 0 }) export const Display = (props) => { diff --git a/docs/framework/solid/reference/functions/shallow.md b/docs/framework/solid/reference/functions/shallow.md index 4f071a7a..47dd9156 100644 --- a/docs/framework/solid/reference/functions/shallow.md +++ b/docs/framework/solid/reference/functions/shallow.md @@ -9,7 +9,7 @@ title: shallow function shallow(objA, objB): boolean; ``` -Defined in: [index.tsx:49](https://github.com/TanStack/store/blob/main/packages/solid-store/src/index.tsx#L49) +Defined in: [index.tsx:39](https://github.com/TanStack/store/blob/main/packages/solid-store/src/index.tsx#L39) ## Type Parameters diff --git a/docs/framework/solid/reference/functions/useStore.md b/docs/framework/solid/reference/functions/useStore.md index dc667d6b..f3f14328 100644 --- a/docs/framework/solid/reference/functions/useStore.md +++ b/docs/framework/solid/reference/functions/useStore.md @@ -5,80 +5,39 @@ title: useStore # Function: useStore() -## Call Signature - ```ts function useStore( store, - selector?, -options?): Accessor; + selector, +options): Accessor; ``` Defined in: [index.tsx:16](https://github.com/TanStack/store/blob/main/packages/solid-store/src/index.tsx#L16) -### Type Parameters - -#### TState - -`TState` - -#### TSelected - -`TSelected` = `NoInfer`\<`TState`\> - -### Parameters - -#### store - -`Store`\<`TState`, `any`\> - -#### selector? - -(`state`) => `TSelected` - -#### options? - -`UseStoreOptions`\<`TSelected`\> - -### Returns - -`Accessor`\<`TSelected`\> - -## Call Signature - -```ts -function useStore( - store, - selector?, -options?): Accessor; -``` - -Defined in: [index.tsx:21](https://github.com/TanStack/store/blob/main/packages/solid-store/src/index.tsx#L21) - -### Type Parameters +## Type Parameters -#### TState +### TState `TState` -#### TSelected +### TSelected `TSelected` = `NoInfer`\<`TState`\> -### Parameters +## Parameters -#### store +### store -`Derived`\<`TState`, `any`\> +`Atom`\<`TState`\> | `ReadonlyAtom`\<`TState`\> -#### selector? +### selector (`state`) => `TSelected` -#### options? +### options -`UseStoreOptions`\<`TSelected`\> +`UseStoreOptions`\<`TSelected`\> = `{}` -### Returns +## Returns `Accessor`\<`TSelected`\> diff --git a/docs/framework/svelte/quick-start.md b/docs/framework/svelte/quick-start.md index b74fedc5..3c126fb2 100644 --- a/docs/framework/svelte/quick-start.md +++ b/docs/framework/svelte/quick-start.md @@ -7,10 +7,10 @@ The basic Svelte app example to get started with the TanStack svelte-store. **store.ts** ```ts -import { Store } from '@tanstack/svelte-store'; +import { createStore } from '@tanstack/svelte-store'; // You can instantiate the store outside of Svelte files too! -export const store = new Store({ +export const store = createStore({ dogs: 0, cats: 0, }); diff --git a/docs/framework/svelte/reference/functions/shallow.md b/docs/framework/svelte/reference/functions/shallow.md index 0fcd2973..dcff0745 100644 --- a/docs/framework/svelte/reference/functions/shallow.md +++ b/docs/framework/svelte/reference/functions/shallow.md @@ -9,7 +9,7 @@ title: shallow function shallow(objA, objB): boolean; ``` -Defined in: [index.svelte.ts:51](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L51) +Defined in: [index.svelte.ts:41](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L41) ## Type Parameters diff --git a/docs/framework/svelte/reference/functions/useStore.md b/docs/framework/svelte/reference/functions/useStore.md index cb2b354b..0f47b631 100644 --- a/docs/framework/svelte/reference/functions/useStore.md +++ b/docs/framework/svelte/reference/functions/useStore.md @@ -5,91 +5,44 @@ title: useStore # Function: useStore() -## Call Signature - ```ts function useStore( store, - selector?, - options?): object; + selector, + options): object; ``` Defined in: [index.svelte.ts:14](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L14) -### Type Parameters - -#### TState - -`TState` - -#### TSelected - -`TSelected` = `NoInfer`\<`TState`\> - -### Parameters - -#### store - -`Store`\<`TState`, `any`\> - -#### selector? - -(`state`) => `TSelected` - -#### options? - -`UseStoreOptions`\<`TSelected`\> - -### Returns - -`object` - -#### current - -```ts -readonly current: TSelected; -``` - -## Call Signature - -```ts -function useStore( - store, - selector?, - options?): object; -``` - -Defined in: [index.svelte.ts:19](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L19) - -### Type Parameters +## Type Parameters -#### TState +### TState `TState` -#### TSelected +### TSelected `TSelected` = `NoInfer`\<`TState`\> -### Parameters +## Parameters -#### store +### store -`Derived`\<`TState`, `any`\> +`Atom`\<`TState`\> | `ReadonlyAtom`\<`TState`\> -#### selector? +### selector (`state`) => `TSelected` -#### options? +### options -`UseStoreOptions`\<`TSelected`\> +`UseStoreOptions`\<`TSelected`\> = `{}` -### Returns +## Returns `object` -#### current +### current ```ts readonly current: TSelected; diff --git a/docs/framework/vue/quick-start.md b/docs/framework/vue/quick-start.md index 3f0d858d..3d96a5f0 100644 --- a/docs/framework/vue/quick-start.md +++ b/docs/framework/vue/quick-start.md @@ -24,10 +24,10 @@ import Display from './Display.vue'; **store.js** ```js -import { Store } from '@tanstack/vue-store'; +import { createStore } from '@tanstack/vue-store'; // You can instantiate the store outside of Vue components too! -export const store = new Store({ +export const store = createStore({ dogs: 0, cats: 0, }); diff --git a/docs/framework/vue/reference/functions/shallow.md b/docs/framework/vue/reference/functions/shallow.md index 48ef7d1e..4381e76a 100644 --- a/docs/framework/vue/reference/functions/shallow.md +++ b/docs/framework/vue/reference/functions/shallow.md @@ -9,7 +9,7 @@ title: shallow function shallow(objA, objB): boolean; ``` -Defined in: [index.ts:55](https://github.com/TanStack/store/blob/main/packages/vue-store/src/index.ts#L55) +Defined in: [index.ts:45](https://github.com/TanStack/store/blob/main/packages/vue-store/src/index.ts#L45) ## Type Parameters diff --git a/docs/framework/vue/reference/functions/useStore.md b/docs/framework/vue/reference/functions/useStore.md index fb924f0c..978581ca 100644 --- a/docs/framework/vue/reference/functions/useStore.md +++ b/docs/framework/vue/reference/functions/useStore.md @@ -5,80 +5,39 @@ title: useStore # Function: useStore() -## Call Signature - ```ts function useStore( store, - selector?, -options?): Readonly>; + selector, +options): Readonly>; ``` Defined in: [index.ts:16](https://github.com/TanStack/store/blob/main/packages/vue-store/src/index.ts#L16) -### Type Parameters - -#### TState - -`TState` - -#### TSelected - -`TSelected` = `NoInfer`\<`TState`\> - -### Parameters - -#### store - -`Store`\<`TState`, `any`\> - -#### selector? - -(`state`) => `TSelected` - -#### options? - -`UseStoreOptions`\<`TSelected`\> - -### Returns - -`Readonly`\<`Ref`\<`TSelected`\>\> - -## Call Signature - -```ts -function useStore( - store, - selector?, -options?): Readonly>; -``` - -Defined in: [index.ts:21](https://github.com/TanStack/store/blob/main/packages/vue-store/src/index.ts#L21) - -### Type Parameters +## Type Parameters -#### TState +### TState `TState` -#### TSelected +### TSelected `TSelected` = `NoInfer`\<`TState`\> -### Parameters +## Parameters -#### store +### store -`Derived`\<`TState`, `any`\> +`Atom`\<`TState`\> | `ReadonlyAtom`\<`TState`\> -#### selector? +### selector (`state`) => `TSelected` -#### options? +### options -`UseStoreOptions`\<`TSelected`\> +`UseStoreOptions`\<`TSelected`\> = `{}` -### Returns +## Returns `Readonly`\<`Ref`\<`TSelected`\>\> diff --git a/docs/quick-start.md b/docs/quick-start.md index 22a62e72..595c8e69 100644 --- a/docs/quick-start.md +++ b/docs/quick-start.md @@ -12,9 +12,9 @@ It can be used with any of our framework adapters, but can also be used in vanil You'll start by creating a new store instance, which is a wrapper around your data: ```typescript -import { Store } from '@tanstack/store'; +import { createStore } from '@tanstack/store'; -const countStore = new Store(0); +const countStore = createStore(0); console.log(countStore.state); // 0 countStore.setState(() => 1); @@ -32,30 +32,6 @@ const unsub = countStore.subscribe(() => { unsub(); ``` -You can even transform the data before it's updated: - -```typescript -const count = new Store(12, { - updateFn: (prevValue) => (updateValue) => { - return updateValue(prevValue) + previous; - } -}); - -count.setState(() => 12); -// count.state === 24 -``` - -And implement a primitive form of derived state: - -```typescript -let double = 0; -const count = new Store(0, { - onUpdate: () => { - double = count.state * 2; - } -}) -``` - ### Batch Updates You can batch updates to a store by using the `batch` function: @@ -70,84 +46,49 @@ batch(() => { }); ``` -## Derived +## Derived Stores -You can also use the `Derived` class to create derived values that lazily update when their dependencies change: +You can create derived stores that automatically update when their dependencies change: ```typescript -const count = new Store(0); +const count = createStore(0); -const double = new Derived({ - fn: () => count.state * 2, - // Must explicitly list dependencies - deps: [count] -}); - -// Must mount the derived value to start listening for updates -const unmount = double.mount(); +const double = createStore(() => count.state * 2); -// Later, to cleanup -unmount(); +console.log(double.state); // 0 +count.setState(() => 5); +console.log(double.state); // 10 ``` ### Previous Derived Value -You can access the previous value of a derived computation by using the `prevVal` argument passed to the `fn` function: +You can access the previous value of a derived computation by using the `prev` argument passed to the function: ```typescript -const count = new Store(1); +const count = createStore(1); -const double = new Derived({ - fn: ({ prevVal }) => { - return count.state + (prevVal ?? 0); - }, - deps: [count] +const sum = createStore((prev) => { + return count.state + (prev ?? 0); }); -double.mount(); -double.state; // 1 +console.log(sum.state); // 1 count.setState(() => 2); -double.state; // 3 +console.log(sum.state); // 3 ``` -### Dependency Values +## Subscriptions -You can access the values of the dependencies of a derived computation by using the `prevDepVals` and `currDepVals` arguments passed to the `fn` function: +You can subscribe to store changes to perform side effects: ```typescript -const count = new Store(1); +const count = createStore(0); -const double = new Derived({ - fn: ({ prevDepVals, currDepVals }) => { - return (prevDepVals[0] ?? 0) + currDepVals[0]; - }, - deps: [count] +const unsubscribe = count.subscribe((state) => { + console.log('The count is now:', state); }); -double.mount(); -double.state; // 1 -count.setState(() => 2); -double.state; // 3 -``` - -## Effects - -You can also use the `Effect` class to manage side effects across multiple stores and derived values: - -```typescript -const effect = new Effect({ - fn: () => { - console.log('The count is now:', count.state); - }, - // Array of `Store`s or `Derived`s - deps: [count], - // Should effect run immediately, default is false - eager: true -}) - -// Must mount the effect to start listening for updates -const unmount = effect.mount(); +count.setState(() => 5); // Logs: "The count is now: 5" // Later, to cleanup -unmount(); +unsubscribe(); ``` diff --git a/examples/angular/simple/src/app/store.ts b/examples/angular/simple/src/app/store.ts index b05d5fb8..b5db6000 100644 --- a/examples/angular/simple/src/app/store.ts +++ b/examples/angular/simple/src/app/store.ts @@ -1,13 +1,13 @@ -import { Store } from '@tanstack/angular-store' +import { createAtom } from '@tanstack/angular-store' // You can instantiate a Store outside of Angular components too! -export const store = new Store({ +export const store = createAtom({ dogs: 0, cats: 0, }) export function updateState(animal: 'dogs' | 'cats') { - store.setState((state) => { + store.set((state) => { return { ...state, [animal]: state[animal] + 1, diff --git a/examples/preact/simple/src/index.tsx b/examples/preact/simple/src/index.tsx index ffc07839..247e23a7 100644 --- a/examples/preact/simple/src/index.tsx +++ b/examples/preact/simple/src/index.tsx @@ -1,7 +1,7 @@ import { render } from 'preact' -import { Store, useStore } from '@tanstack/preact-store' +import { createAtom, useStore } from '@tanstack/preact-store' -export const store = new Store({ +export const store = createAtom({ count: 0, }) @@ -10,7 +10,9 @@ function Counter() { return (
Count: {count}
-
diff --git a/examples/react/simple/src/index.tsx b/examples/react/simple/src/index.tsx index cbf83568..95d9db4e 100644 --- a/examples/react/simple/src/index.tsx +++ b/examples/react/simple/src/index.tsx @@ -1,9 +1,9 @@ import { scan } from 'react-scan' // dev-tools for demo import ReactDOM from 'react-dom/client' -import { Store, useStore } from '@tanstack/react-store' +import { createAtom, useStore } from '@tanstack/react-store' // You can use instantiate a Store outside of React components too! -export const store = new Store({ +export const store = createAtom({ dogs: 0, cats: 0, }) @@ -19,7 +19,7 @@ const Display = ({ animal }: DisplayProps) => { } const updateState = (animal: 'dogs' | 'cats') => { - store.setState((state) => { + store.set((state) => { return { ...state, [animal]: state[animal] + 1, diff --git a/examples/solid/simple/src/index.tsx b/examples/solid/simple/src/index.tsx index c99f311b..c0d080f2 100644 --- a/examples/solid/simple/src/index.tsx +++ b/examples/solid/simple/src/index.tsx @@ -1,8 +1,8 @@ -import { Store, useStore } from '@tanstack/solid-store' +import { createAtom, useStore } from '@tanstack/solid-store' import { render } from 'solid-js/web' // You can instantiate a Store outside of Solid components too! -export const store = new Store({ +export const store = createAtom({ cats: 0, dogs: 0, }) @@ -28,7 +28,7 @@ export const Button = (props: ButtonProps) => { return (