Fine-Grained Reactivity Demo

A typed ECMAScript¹ demo of fine-grained reactive programming.

• The Inspiration: Finding Fine-Grained Reactive Programming (or on gitconnected.com) - How It Works (... but what does that look like in detail?) - 2021-02-09: A Hands-on Introduction to Fine-Grained Reactivity.
• The Opportunity: A pre-existing exercise-centric test specification - Implement a basic reactive system (... I wish this was phrased in terms of fine-grained reactive programming).
• The Motivation: The exercise hasn't been implemented for the TypeScript track (... hmmm ...).
• The Sources: solid/src/reactive/signal.ts and Reactivity.
• The Result: The React Exercise (PR) on the exercism.io TypeScript track and this repository (the core is found in reactivity/reactivity.js).

$ cd fine-grained-reactivity-demo
$ npm i
added 411 packages from 225 contributors and audited 412 packages in 3.726s
found 0 vulnerabilities

$ npm run lint
> npm run lint:types && npm run lint:es
> cd ./reactivity && npm run lint:types
> ../node_modules/.bin/tsc
> eslint ./reactivity

$ npm run test
> cd ./reactivity && npm run test
> ../node_modules/.bin/ava --config ava.config.js
  ✔ A signal has a value
  ✔ A signal's value can be set
  ✔ A memo calculates an initial value
  ✔ A memo takes signals in the correct order
  ✔ A memo's value updates when it's signal is changed
  ✔ A memo can depend on other memos
  ✔ A memo fires an effect
  ✔ An effect fires only when the memo's value changes
  ✔ An effect does not report a stale value
  ✔ Effects can fire from distinct sources
  ✔ An effect fires even if the value it evaluates to doesn't change
  ✔ Effects can be added and removed
  ✔ Removing an effect multiple times doesn't interfere with other effects
  ✔ Effects should only be called once, even when multiple dependencies change
  ✔ Effect on a stable source doesn't fire - even when that source's sources vary
  ─

  15 tests passed
$

1: Originally authored in TypeScript. After this tweet this repository was converted to typed ECMAScript. For a somewhat simplified version in TypeScript see here. For a fundamental introduction please refer to Building a Reactive Library from Scratch (2021-02-18);