https://github.com/WebReflection/signal

An extremely basic signals implementation.
https://github.com/WebReflection/signal

javascript signals

Last synced: 3 months ago
JSON representation

An extremely basic signals implementation.

• Host: GitHub
• URL: https://github.com/WebReflection/signal
• Owner: WebReflection
• License: isc
• Created: 2022-12-21T07:34:45.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-18T12:40:18.000Z (7 months ago)
• Last Synced: 2024-05-18T21:41:03.003Z (6 months ago)
• Topics: javascript, signals
• Language: JavaScript
• Homepage: https://calendar.perfplanet.com/2022/signals-the-nitty-gritty/
• Size: 276 KB
• Stars: 53
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @webreflection/signal

[![Coverage Status](https://coveralls.io/repos/github/WebReflection/signal/badge.svg?branch=main)](https://coveralls.io/github/WebReflection/signal?branch=main) [![build status](https://github.com/WebReflection/signal/actions/workflows/node.js.yml/badge.svg)](https://github.com/WebReflection/signal/actions)

**Social Media Photo by [Louis Reed](https://unsplash.com/@_louisreed) on [Unsplash](https://unsplash.com/)**

A minimalistic signals implementation, derived from the post [Signals: the nitty-gritty](https://calendar.perfplanet.com/2022/signals-the-nitty-gritty/), which size, once minified and brotlied, is 528 bytes.

  * no automatic effect disposal except when an outer effect has inner effects and the outer effect `dispose()` is invoked

  * computed are lazily initialied but updated per each signal change they depend on, unless a `batch` operation is updating all inner signals at once

  * no fancy features from other libraries

For anything more complex please check [usignal](https://github.com/WebReflection/usignal#readme) out.

### exports

  * `signal(value)` to create a new signal with a reactive `.value`

  * `computed(fn[, initialValue])` to create a computed signal with a read-only `.value`

  * `effect(fn)` to create an effect and return a dispose function

  * `batch(fn)` to update multiple signals at once and invoke related effects once

  * `untracked(fn)` to make a callback that can read some signals without subscription to them

  * `Signal` to compare via `instanceof Signal` instances

  * `Computed` to compare via `instanceof Computed` instances

*Computed* accepts an initial value to pass to the callback. The callback will keep receiving the previous value on each new invoke.

### example

```js

// import {signal, effect} from 'https://unpkg.com/@webreflection/signal';

// const {signal, effect} = require('@webreflection/signal');

import {signal, effect} from '@webreflection/signal';

const single = signal(1);

const double = signal(10);

const triple = signal(100);

const dispose1 = effect(() => {

  console.log(`

  #1 effect

    single: ${single}

    double: ${double}

  `);

});

const dispose2 = effect(() => {

  console.log(`

  #2 effect

    double: ${double}

    triple: ${triple}

  `);

});

++double.value;

// logs single 1, double 11

// logs double 11, triple 100

dispose2();

++double.value;

// logs single 1, double 11

```