https://github.com/fabiospampinato/flimsy

A single-file <1kb min+gzip simplified implementation of the reactive core of Solid, optimized for clean code.
https://github.com/fabiospampinato/flimsy

reactivity simple solid tiny

Last synced: 9 days ago
JSON representation

A single-file <1kb min+gzip simplified implementation of the reactive core of Solid, optimized for clean code.

• Host: GitHub
• URL: https://github.com/fabiospampinato/flimsy
• Owner: fabiospampinato
• License: mit
• Created: 2022-08-13T14:18:30.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-02-07T23:02:51.000Z (9 months ago)
• Last Synced: 2024-05-01T12:39:14.186Z (7 months ago)
• Topics: reactivity, simple, solid, tiny
• Language: TypeScript
• Homepage:
• Size: 52.7 KB
• Stars: 177
• Watchers: 4
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

• awesome-tiny-js - flimsy - Signals from Solid (it _almost_ fit into UI frameworks category itself). Author warning: _it's probably buggy._ <img align="top" height="24" src="./img/flimsy.svg"> (State Managers / Signals)

README

        
# Flimsy

A single-file <1kb min+gzip simplified implementation of the reactive core of [`Solid`](https://www.solidjs.com), optimized for clean code.

Check out the [annotated source](/src/flimsy.annotated.ts), 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`, `getOwner`, `runWithOwner`, `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`](https://github.com/mobxjs/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 report a bug I'll look into it.

- `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.

## Install

```sh

npm install --save flimsy

```

## Usage

You should be able to use these functions pretty much just like you would use `Solid`'s, for example:

```ts

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