Derived Stores

[crutchcorn]

This PR implements an initial Derived class implementation:

const count = new Store(10);

const doubleCount = new Derived({
  deps: [count],
  fn: () => count.state * 2,
})

// .mount is required for Derived to subscribe to `count`
const _cleanupDerivedListeners = doubleCount.mount();


const effect = new Effect(() => {
  deps: [doubleCount],
  fn: () => console.log(doubleCount.state))
})

// .mount is required for Effect to subscribe to `doubleCount`
const _cleanupEffectListeners = effect.mount();

count.setState(() => 20);

Note

This API of mount seems wonky for application use because, well, it is. It's intended for other libraries like TanStack Form and TanStack Table's internals.

We may introduce a more application-friendly Derived and Effect API for usage in apps, but it's not clear yet what that looks like. Please feel free to jump into the discussion here for more

TODO

• Write docs for the frameworks in Quick Start
• Write docs for Derived State that includes prevVal and prevVals
• Write framework tests for Derived to make sure it continues to work
  • React
  • Angular
  • Solid
  • Svelte
  • Vue
• Migrate Derived/Effect's side effects to explicit mount and unmount methods
• Add previousValues to Derived

Edgecase Handling

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]

View your CI Pipeline Execution ↗ for commit 1aab40c.

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	1m 10s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	16s	View ↗

---

☁️ Nx Cloud last updated this comment at 2024-12-26 18:37:25 UTC

[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