Derived Stores

[crutchcorn]

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:

[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:

[tannerlinsley]

Woo! 🏎️

[eneajaho]

Angular is the fastest, nice 😄!

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit fa65a7e. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3
• nx run-many --target=build --exclude=examples/**

---

Sent with 💌 from NxCloud.

[lucasmotta]

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

[AndrejNemec]

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

+1

[pkg-pr-new]

commit: fa65a7e

@tanstack/angular-store

pnpm add https://pkg.pr.new/@tanstack/angular-store@40

@tanstack/react-store

pnpm add https://pkg.pr.new/@tanstack/react-store@40

@tanstack/solid-store

pnpm add https://pkg.pr.new/@tanstack/solid-store@40

@tanstack/store

pnpm add https://pkg.pr.new/@tanstack/store@40

@tanstack/svelte-store

pnpm add https://pkg.pr.new/@tanstack/svelte-store@40

@tanstack/vue-store

pnpm add https://pkg.pr.new/@tanstack/vue-store@40

Open in Stackblitz

[KevinVandy]

would it be better if this had a flat options style like useQuery now does?

new Derived({
  storeKey: [],
  storeFn: () => alert("expensive")
  ...options
})

[tannerlinsley]

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<any> | Store<any>> + +export class Derived<TState> { + _store!: Store<TState> + rootStores = new Set<Store<unknown>>() + deps: Deps + + // Functions representing the subscriptions. Call a function to cleanup + _subscriptions: Array<() => void> = [] + + // What store called the current update, if any + _whatStoreIsCurrentlyInUse: Store<unknown> | 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: ***@***.***>

[crutchcorn]

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