msig
v0.0.15
Published
The tiny expressive universal signals library you wish you had but only discovered now.
Downloads
16
Maintainers
Readme
msig
The tiny expressive universal signals library you wish you had but only discovered now.
This is a port of the Solid.js Signals API you can use anywhere.
Installation
npm add msig
Usage
You can use the library in a similar (not exactly the same) way to the Solid.js API.
import { createSignal, createMemo } from "msig";
const [a, setA] = createSignal(3);
const [b, setB] = createSignal(4);
const total = createMemo(() => a() * b());
createEffect(() => {
console.log(total());
}); // logs -> "12"
setA(4); // logs -> "16"
setB(2); // logs -> "8"
Once you have created your reactive system you can expose the output signals using the adaptor for your platform of choice. Here is an example for React:
import React from "react";
import { createSignal, useSignal } from "msig";
// Note the following is in "global" scope
const [count, setCount] = createSignal(0);
function increment() {
setCount((c) => c + 1);
}
function decrement() {
setCount((c) => c - 1);
}
export function Counter() {
const countSig = useSignal(count);
return (
<div>
<div>{countSig}</div>
<button onChange={increment}>+</button>
<button onChange={decrement}>-</button>
</div>
);
}
Features
The following solid.js reactive primitives have been implemented
- [x]
createSignal
- [x]
createEffect
- [x]
createMemo
- [x]
createResource
Adaptors
Adaptors have been created for:
- [ ] React (@msig/react)
- [ ] Solid (@msig/solid)
- [ ] Vue (@msig/vue)
- [ ] Angular (@msig/angular)