This PR implements an initial Derived class implementation:

const count = new Store(10);

const doubleCount = new Derived([count], () => {
  return count.state * 2;
})

doubleCount.subscribe(() => console.log(doubleCount.state));
count.setState(() => 20);

This Derived implementation even solves the diamond problem:

Where writes to "a" will call "d" twice (with a flicker of incorrect data known as a "Glitch") because of the dual-derived nature. Our implementation does not have this problem and therefore can be considered "glitch-free"

This is a push-based/hot signals implementation

Benchmarks

Due to the relatively naive nature of this code (I wrote it in one night at ~midnight) there are performance implication in using this. Namely, in our benchmarks we are a far cry from Angular or Solid's implementation, but come close to Vue's implementation:

Feb 07 '24 09:02 crutchcorn

I've increased our performance and reduced our bundle size. We're no-longer the slowest on our own benchmark and are even 1.5x faster than Vue:

Feb 09 '24 02:02 crutchcorn

Woo! 🏎️

Feb 09 '24 07:02 tannerlinsley

Angular is the fastest, nice 😄!

Feb 16 '24 11:02 eneajaho

View your CI Pipeline Execution ↗ for commit 6099591e52db0cee439c45ab0c8a1e4d38a3bbe3.

☁️ Nx Cloud last updated this comment at 2024-12-26 22:20:01 UTC

Feb 17 '24 03:02 nx-cloud[bot]

Out of curiosity, what's the state of this PR and what's stopping it from being reviewed/merged?

Jul 15 '24 13:07 lucasmotta

Out of curiosity, what's the state of this PR and what's stopping it from being reviewed/merged?

+1

Aug 07 '24 12:08 AndrejNemec

npm i https://pkg.pr.new/@tanstack/angular-store@40

npm i https://pkg.pr.new/@tanstack/solid-store@40

npm i https://pkg.pr.new/@tanstack/store@40

npm i https://pkg.pr.new/@tanstack/react-store@40

npm i https://pkg.pr.new/@tanstack/vue-store@40

npm i https://pkg.pr.new/@tanstack/svelte-store@40

commit: 6099591

Aug 12 '24 20:08 pkg-pr-new[bot]

I would prefer it I think

Tanner Linsley TanStack LLC On Aug 17, 2024 at 9:28 AM -0600, Kevin Van Cott @.***>, wrote:

@KevinVandy commented on this pull request. In packages/store/src/derived.ts:

+}

+export type Deps = Array<Derived | Store> + +export class Derived<TState> {

• _store!: Store<TState>
• rootStores = new Set<Store>()
• deps: Deps
• // Functions representing the subscriptions. Call a function to cleanup
• _subscriptions: Array<() => void> = []
• // What store called the current update, if any
• _whatStoreIsCurrentlyInUse: Store | null = null
• constructor(deps: Deps, fn: () => TState, options?: DerivedOptions<TState>) { would it be better if this had a flat options style like useQuery now does? new Derived({ storeKey: [], storeFn: () => alert("expensive") ...options }) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

Aug 17 '24 17:08 tannerlinsley

I was originally holding off as performance didn't seem up-to-snuff, but comparing it against the TS39 Polyfill, it seems that we're roughly double the speed of that, so I want to merge this in so we can start using ASAP

Source of the benchmarks:

https://github.com/crutchcorn/js-reactivity-benchmark/tree/tanstack

Nov 25 '24 09:11 crutchcorn