feat: add Derived class, Effect class, multi-store batching

* feat!: initial work on adding derived signals * chore: add tests to derived state * fix: add cleanup edgecase * fix: edgecase where using derived and store for base * docs: update docs link * chore: refactor derived class * chore: further refactors * chore: refactor work to make things a bit cleaner * chore: minor renaming and cleanup * chore: add initial benchmarks * chore: add Angular * chore: update benchmark package versions * chore: fix ci * chore: move to proper derived store * fix: avoid issues with what signal is being written * chore: ignore benchmark file in test coverage * chore: rename TSX to TS * feat: add Effect * Fix eslint, sherif, and knip * chore: migrate from forEach to for of loop * ci: apply automated fixes * improve Vue performance (#122) * feat: add lazyness to derived (#109) * feat: add lazyness to derived * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * chore: migrate to options object over positional arguments * ci: apply automated fixes * chore: fix sherif * docs: add autogenerated docs for effect and derived * chore: migrate derived and effect to have cleanup and mount as distinct steps * ci: apply automated fixes and generate docs * feat: add previous and current value to the store * feat: add ability to track previous and new values of deps * ci: apply automated fixes and generate docs * chore: fix build * ci: apply automated fixes and generate docs * feat: add ability to get previous value from derived fn * ci: apply automated fixes and generate docs * feat: add proper typings to derived state * ci: apply automated fixes and generate docs * chore: fix potentially faulty TState inferencing * ci: apply automated fixes and generate docs * chore: fix usage for TypeScript 4.9 * ci: apply automated fixes and generate docs * chore: fix knip * chore: more work to support TS5 * chore: fix usage of import and require type * chore!: drop TypeScript 4.9 support * ci: apply automated fixes and generate docs * fix: prevState now works as intended * chore!: remove store.batch, add in temporary scheduler, skip intentionally broken tests * ci: apply automated fixes and generate docs * chore: add working unregister from graph * chore: hooman attempt * chore: cursor attempt * chore: code cleanup and add back batch tests * chore: fix listener recieving old values * chore: fix laziness * ci: apply automated fixes and generate docs * chore!: fix timings and temporarily(?) remove lazy prop * ci: apply automated fixes and generate docs * chore: migrate useStore in React to support Derived values stores as well * ci: apply automated fixes and generate docs * chore: fix CI tests * chore: add Angular store Derived support * ci: apply automated fixes and generate docs * chore: fix issues with Solid store tests * ci: apply automated fixes and generate docs * chore: fix useStore from Vue * ci: apply automated fixes and generate docs * chore: svelte works with useStore now * ci: apply automated fixes and generate docs * chore: add demo of useStore working as-intended * chore: fix CI * fix: issues with unmounting and remounting derived values * ci: apply automated fixes and generate docs * chore: add failing tests * fix: issues with out-of-order mounting should be fixed * ci: apply automated fixes and generate docs * chore: add tests * ci: apply automated fixes and generate docs * chore: add another failing test * ci: apply automated fixes and generate docs * chore: initial work to refactor away from Derived having an internal Store * chore: test refactor of Derived to not include a Store * fix: issues with recomputing should now be resolved * ci: apply automated fixes and generate docs * chore: add failing test * ci: apply automated fixes and generate docs * fix: add fix to broken test * ci: apply automated fixes and generate docs * fix: batched values do not break prevDepVals and currDepVals anymore * chore: fix CI * ci: apply automated fixes and generate docs * docs: finish vanilla JS quick-start guide --------- Co-authored-by: Lachlan Collins <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Zain Wania <[email protected]>
TanStack · Dec 26, 2024 · 4c5a3cb · 4c5a3cb
1 parent 38ab8d3
commit 4c5a3cb
Show file tree

Hide file tree

Showing 61 changed files with 2,492 additions and 317 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -16,6 +16,10 @@
         {
           "label": "Installation",
           "to": "installation"
+        },
+        {
+          "label": "Quick Start",
+          "to": "quick-start"
         }
       ],
       "frameworks": [
@@ -77,9 +81,21 @@
           "label": "Classes / Store",
           "to": "reference/classes/store"
         },
+        {
+          "label": "Classes / Derived",
+          "to": "reference/classes/derived"
+        },
+        {
+          "label": "Classes / Effect",
+          "to": "reference/classes/effect"
+        },
         {
           "label": "Interfaces / StoreOptions",
           "to": "reference/interfaces/storeoptions"
+        },
+        {
+          "label": "Interfaces / DerivedOptions",
+          "to": "reference/interfaces/derivedoptions"
         }
       ],
       "frameworks": [

diff --git a/docs/framework/angular/quick-start.md b/docs/framework/angular/quick-start.md
@@ -3,7 +3,7 @@ title: Quick Start
 id: quick-start
 ---
 
-The basic angular app example to get started with the Tanstack angular-store.
+The basic angular app example to get started with the TanStack angular-store.
 
 **app.component.ts**
 ```angular-ts

diff --git a/docs/framework/angular/reference/functions/injectstore.md b/docs/framework/angular/reference/functions/injectstore.md
@@ -5,39 +5,76 @@ title: injectStore
 
 # Function: injectStore()
 
+## Call Signature
+
 ```ts
-function injectStore<TState, TSelected, TUpdater>(
+function injectStore<TState, TSelected>(
    store, 
-   selector, 
-options): Signal<TSelected>
+   selector?, 
+options?): Signal<TSelected>
 ```
 
-## Type Parameters
+### Type Parameters
 
 • **TState**
 
 • **TSelected** = `NoInfer`\<`TState`\>
 
-• **TUpdater** *extends* `AnyUpdater` = `AnyUpdater`
+### Parameters
+
+#### store
+
+`Store`\<`TState`, `any`\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+#### options?
+
+`CreateSignalOptions`\<`TSelected`\> & `object`
+
+### Returns
+
+`Signal`\<`TSelected`\>
+
+### Defined in
+
+[index.ts:19](https://github.com/TanStack/store/blob/main/packages/angular-store/src/index.ts#L19)
+
+## Call Signature
+
+```ts
+function injectStore<TState, TSelected>(
+   store, 
+   selector?, 
+options?): Signal<TSelected>
+```
+
+### Type Parameters
+
+• **TState**
+
+• **TSelected** = `NoInfer`\<`TState`\>
 
-## Parameters
+### Parameters
 
-### store
+#### store
 
-`Store`\<`TState`, `TUpdater`\>
+`Derived`\<`TState`, `any`\>
 
-### selector
+#### selector?
 
 (`state`) => `TSelected`
 
-### options
+#### options?
 
-`CreateSignalOptions`\<`TSelected`\> & `object` = `...`
+`CreateSignalOptions`\<`TSelected`\> & `object`
 
-## Returns
+### Returns
 
 `Signal`\<`TSelected`\>
 
-## Defined in
+### Defined in
 
-[index.ts:17](https://github.com/TanStack/store/blob/main/packages/angular-store/src/index.ts#L17)
+[index.ts:24](https://github.com/TanStack/store/blob/main/packages/angular-store/src/index.ts#L24)
diff --git a/docs/framework/react/quick-start.md b/docs/framework/react/quick-start.md
@@ -3,7 +3,7 @@ title: Quick Start
 id: quick-start
 ---
 
-The basic react app example to get started with the Tanstack react-store.
+The basic react app example to get started with the TanStack react-store.
 
 ```tsx
 import React from "react";
@@ -56,4 +56,4 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
 
 
-```
+```
diff --git a/docs/framework/react/reference/functions/shallow.md b/docs/framework/react/reference/functions/shallow.md
@@ -29,4 +29,4 @@ function shallow<T>(objA, objB): boolean
 
 ## Defined in
 
-[index.ts:30](https://github.com/TanStack/store/blob/main/packages/react-store/src/index.ts#L30)
+[index.ts:34](https://github.com/TanStack/store/blob/main/packages/react-store/src/index.ts#L34)
diff --git a/docs/framework/react/reference/functions/usestore.md b/docs/framework/react/reference/functions/usestore.md
@@ -5,32 +5,62 @@ title: useStore
 
 # Function: useStore()
 
+## Call Signature
+
 ```ts
-function useStore<TState, TSelected, TUpdater>(store, selector): TSelected
+function useStore<TState, TSelected>(store, selector?): TSelected
 ```
 
-## Type Parameters
+### Type Parameters
 
 • **TState**
 
 • **TSelected** = `NoInfer`\<`TState`\>
 
-• **TUpdater** *extends* `AnyUpdater` = `AnyUpdater`
-
-## Parameters
+### Parameters
 
-### store
+#### store
 
-`Store`\<`TState`, `TUpdater`\>
+`Store`\<`TState`, `any`\>
 
-### selector
+#### selector?
 
 (`state`) => `TSelected`
 
-## Returns
+### Returns
 
 `TSelected`
 
-## Defined in
+### Defined in
 
 [index.ts:11](https://github.com/TanStack/store/blob/main/packages/react-store/src/index.ts#L11)
+
+## Call Signature
+
+```ts
+function useStore<TState, TSelected>(store, selector?): TSelected
+```
+
+### Type Parameters
+
+• **TState**
+
+• **TSelected** = `NoInfer`\<`TState`\>
+
+### Parameters
+
+#### store
+
+`Derived`\<`TState`, `any`\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+`TSelected`
+
+### Defined in
+
+[index.ts:15](https://github.com/TanStack/store/blob/main/packages/react-store/src/index.ts#L15)
diff --git a/docs/framework/solid/quick-start.md b/docs/framework/solid/quick-start.md
@@ -3,7 +3,7 @@ title: Quick Start
 id: quick-start
 ---
 
-The basic Solid app example to get started with the Tanstack Solid-store.
+The basic Solid app example to get started with the TanStack Solid-store.
 
 ```jsx
 import { useStore, Store } from '@tanstack/solid-store';

diff --git a/docs/framework/solid/reference/functions/usestore.md b/docs/framework/solid/reference/functions/usestore.md
@@ -5,32 +5,62 @@ title: useStore
 
 # Function: useStore()
 
+## Call Signature
+
 ```ts
-function useStore<TState, TSelected, TUpdater>(store, selector): Accessor<TSelected>
+function useStore<TState, TSelected>(store, selector?): Accessor<TSelected>
 ```
 
-## Type Parameters
+### Type Parameters
 
 • **TState**
 
 • **TSelected** = `NoInfer`\<`TState`\>
 
-• **TUpdater** *extends* `AnyUpdater` = `AnyUpdater`
-
-## Parameters
+### Parameters
 
-### store
+#### store
 
-`Store`\<`TState`, `TUpdater`\>
+`Store`\<`TState`, `any`\>
 
-### selector
+#### selector?
 
 (`state`) => `TSelected`
 
-## Returns
+### Returns
 
 `Accessor`\<`TSelected`\>
 
-## Defined in
+### Defined in
 
 [index.tsx:13](https://github.com/TanStack/store/blob/main/packages/solid-store/src/index.tsx#L13)
+
+## Call Signature
+
+```ts
+function useStore<TState, TSelected>(store, selector?): Accessor<TSelected>
+```
+
+### Type Parameters
+
+• **TState**
+
+• **TSelected** = `NoInfer`\<`TState`\>
+
+### Parameters
+
+#### store
+
+`Derived`\<`TState`, `any`\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+`Accessor`\<`TSelected`\>
+
+### Defined in
+
+[index.tsx:17](https://github.com/TanStack/store/blob/main/packages/solid-store/src/index.tsx#L17)
diff --git a/docs/framework/svelte/quick-start.md b/docs/framework/svelte/quick-start.md
@@ -3,7 +3,7 @@ title: Quick Start
 id: quick-start
 ---
 
-The basic Svelte app example to get started with the Tanstack svelte-store.
+The basic Svelte app example to get started with the TanStack svelte-store.
 
 **store.ts**
 ```ts
@@ -65,4 +65,4 @@ export function updateState(animal: 'cats' | 'dogs') {
 </script>
 
 <button onclick={() => updateState(animal)}>My Friend Likes { animal }</button>
-```
+```
diff --git a/docs/framework/svelte/reference/functions/shallow.md b/docs/framework/svelte/reference/functions/shallow.md
@@ -29,4 +29,4 @@ function shallow<T>(objA, objB): boolean
 
 ## Defined in
 
-[index.svelte.ts:39](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L39)
+[index.svelte.ts:43](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L43)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,4 +29,4 @@ function shallow<T>(objA, objB): boolean

		## Defined in

		[index.ts:30](https://github.com/TanStack/store/blob/main/packages/react-store/src/index.ts#L30)
		[index.ts:34](https://github.com/TanStack/store/blob/main/packages/react-store/src/index.ts#L34)