A single-file <1kb min+gzip simplified implementation of the reactive core of Solid, optimized for clean code.
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.
Compared to how Solid
's reactivity system actually works there are the following (known) differences:
createSignal
, createEffect
, createMemo
, createRoot
, createContext
, useContext
, onCleanup
, onError
, batch
and untrack
.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.createEffect
doesn't schedule effects, they are executed immediately just like memos. In Solid
they are scheduled if they exist inside a root.createEffect
and createMemo
don'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.createContext
gives you get
/set
functions instead of a Provider
component, as the Provider
component only really makes sense in a UI context and Solid
doesn't expose a lower-level context primitive.createContext
's set
function will register the context value with the parent observer, so you need to create a custom parent observer yourself (which is basically what Provider
does), if you need that.Flimsy
uses a MobX
-like propagation algorithm, where computations in the reactive graph are marked stale/ready, Solid
should work similarly, but I don't understand it well enough to know what the differences may be.Flimsy
doesn't care about performance nor memory usage, it instead optimizes for clean code.Flimsy
is probably buggier, hence the name, though if you'd like to use this in production please open an issue, I'll wire it with oby
'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, Flimsy
is isomorphic.npm install --save flimsy
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 () );
});
MIT © Fabio Spampinato