Easy Signals

Easy Signals is a signal library with no dependencies for node, deno and browsers based on the Angular Signals.

Table of Contents

• Easy Signals
  • Table of Contents
  • Install
  • Usage
    • NodeJs
    • Angular
    • Angular (without Zone.js)
  • Signal Types
    • Signal
    • Computed
    • Effect
  • Signal Functions
    • asReadonly
    • set
    • update
    • mutate
  • Changelog
  • FAQs

Install

1npm install easy-signals

Usage

Example on how to use Easy Signals:

NodeJs

1import { signal, computed, effect } from 'easy-signals';
2
3const count = signal(0);
4const doubleCount = computed(() => count() * 2, count);
5effect(() => console.log("effect called, count: ", count()), count);
6console.log('doubleCount: ', doubleCount());
7count.update((val) => val + 1);
8console.log('doubleCount: ', doubleCount());
9count.update((val) => val + 1);
10console.log('doubleCount: ', doubleCount());
11count.set(10);

Angular

HTML:

1<p>Count is: {{ count() }}</p>
2<p>Double Count is: {{ doubleCount() }}</p>
3<button (click)="increment()">+1</button>

TypeScript:

1import { signal, computed, effect } from 'easy-signals';
2
3  count = signal(0);
4  doubleCount = computed(() => count() * 2, this.count);
5
6  increment() {
7    this.count.update((val) => val + 1);
8  }

Angular (without Zone.js)

HTML:

1<p>Count is: {{ count() }}</p>
2<p>Double Count is: {{ doubleCount() }}</p>
3<button (click)="increment()">+1</button>

TypeScript:

1import { signal, computed, effect } from 'easy-signals';
2
3  count = signal(0);
4  doubleCount = computed(() => count() * 2, this.count);
5
6  constructor(private cdr: ChangeDetectorRef) {
7    effect(() => {
8      this.cdr.detectChanges();
9    }, this.count, this.doubleCount);
10  }
11
12  increment() {
13    this.count.update((val) => val + 1);
14  }

1import { getFile, uploadFilesTo } from 'easy-file-picker';
2
3async getFile(): void {
4  const file = await getFile();
5  await uploadFilesTo("http://example.com", file);
6}

Signal Types

Signal

Creates a new Signal with a intialValue, the value can be changes using the set, update and mutate functions.

1function signal<T>(initialValue: T): Signal<T>

Computed

Creates a new ReadonlySignal where the value is the return of the computation function. The value is updates when the signals's values are updated.

1function computed<T>(computation: () => T,...signals: ReadonlySignal<any>[]): ReadonlySignal<T>

Effect

The effectFn function is called everytime the values from signals are updated.

1function effect(effectFn: () => void,...signals: ReadonlySignal<any>[]): void

Signal Functions

asReadonly

Transforms a Signal into a ReadonlySignal.

1function asReadonly: () => ReadonlySignal<T>

set

Sets a new Signal value.

1function set: (value: T) => void

update

Updates the Signal's value with the return of the updateFn function.

1function update: (updateFn: (value: T) => T) => void

mutate

Can be used to mutate the Signal's value using the mutatorFn function.

1function mutate: (mutatorFn: (value: T) => void) => void

Changelog

Version 0.1:

• published library

FAQs

No FAQs for now. (⌐■_■)