Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Derived Stores #40

Open
wants to merge 95 commits into
base: main
Choose a base branch
from
Open

Derived Stores #40

wants to merge 95 commits into from

Conversation

crutchcorn
Copy link
Member

@crutchcorn crutchcorn commented Feb 7, 2024

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:

"a" is the root node with "b" and "c" relying on it. Then "d" relies on both "b" and "c"

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 crutchcorn force-pushed the derived-diamond-problem branch from c0c0d1c to 790303c Compare February 7, 2024 09:42
@crutchcorn
Copy link
Member Author

image

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:

image

@tannerlinsley
Copy link
Contributor

Woo! 🏎️

@eneajaho
Copy link

Angular is the fastest, nice 😄!

Copy link

nx-cloud bot commented Feb 17, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit cc45169. 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


🟥 Failed Commands
nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3
✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

@lucasmotta
Copy link

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

@AndrejNemec
Copy link

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

+1

crutchcorn and others added 2 commits August 12, 2024 14:33
# Conflicts:
#	.eslintrc.cjs
#	knip.json
#	package.json
#	packages/solid-store/package.json
#	packages/store/package.json
#	packages/store/src/index.ts
#	packages/store/src/tests/index.test.tsx
#	packages/store/tests/derived.bench.ts
#	packages/store/tests/derived.test.ts
#	packages/store/tests/effect.test.ts
#	packages/store/tests/index.test.tsx
#	packages/store/tests/store.test.ts
#	packages/vue-store/package.json
#	pnpm-lock.yaml
crutchcorn and others added 30 commits November 29, 2024 16:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants