Flimsy
A single-file <1kb min+gzip simplified implementation of the reactive core of Solid, optimized for clean code.
Check out the annotated source, if you'd like to more in depth understand how Solid works, or if you'd like to write something similar yourself, this should be a good starting point for you.
Comparison
Compared to how Solid's reactivity system actually works there are the following (known) differences:
- "Only" these functions are implemented:
createSignal,createEffect,createMemo,createRoot,createContext,useContext,onCleanup,onError,batchanduntrack. createSignal's setter doesn't give you the current updated value inside a batch, but instead gives you the same value that the getter would give you.createEffectdoesn't schedule effects, they are executed immediately just like memos. InSolidthey are scheduled if they exist inside a root.createEffectandcreateMemodon't pass the previous execution's return value to your function, just put the value in a variable outside of the function yourself to remember it, if you need that.createContextgives youget/setfunctions instead of aProvidercomponent, as theProvidercomponent only really makes sense in a UI context andSoliddoesn't expose a lower-level context primitive.createContext'ssetfunction will register the context value with the parent observer, so you need to create a custom parent observer yourself (which is basically whatProviderdoes), if you need that.Flimsyuses aMobX-like propagation algorithm, where computations in the reactive graph are marked stale/ready,Solidshould work similarly, but I don't understand it well enough to know what the differences may be.Flimsydoesn't care about performance nor memory usage, it instead optimizes for clean code.Flimsyis probably buggier, hence the name, though if you'd like to use this in production please open an issue, I'll wire it withoby's extensive test suite.Solid's reactivity system doesn't do anything on the server by default, you'll have to explicitly use the browser build to make it work,Flimsyis isomorphic.
Install
npm install --save flimsy
Usage
You should be able to use these functions pretty much just like you would use Solid's, for example:
import {createSignal, createEffect, createMemo} from 'flimsy';
// Make a counter, a memo from the counter, and log both in an effect
const [count, setCount] = createSignal ( 0 );
const double = createMemo ( () => count () * 2 );
createEffect ( () => {
console.log ( 'count', count () );
console.log ( 'double', double () );
});
License
MIT © Fabio Spampinato
20 Feb 25, 2023
26.2k Jan 6, 2023
768 Dec 28, 2022
13 Oct 6, 2022
60 Aug 5, 2022
6.1k Jan 5, 2023
12.5k Jan 9, 2023
4 Jan 6, 2023
2 Aug 14, 2022
62 Dec 30, 2022
140 Jan 8, 2023
1.2k Dec 30, 2022
36 Dec 15, 2022
29 Dec 17, 2022
40 Dec 9, 2022
9.4k Jan 9, 2023
599 Dec 28, 2022
116 Dec 23, 2022
90 Dec 9, 2022
810 Jan 7, 2023
3 Aug 3, 2021
2 Oct 28, 2021
37 Oct 8, 2022
1 Dec 7, 2021
1.4k Dec 30, 2022
7 Oct 21, 2022
52 Sep 19, 2022