signal-factory

Depreciado por conta de bugs relacionados ao vite, agora a store que antes estava nessa lib é a simorg-store

--

Descrição

signal-factory é uma biblioteca framework agnostica usada para criar bibliotecas com state management que não precisam definir qual framework elas estão utilizando, ou seja, para criar outras biblitecas agnósticas

Tipagem de um signal

``ts
type ReadableSignal = {
get: () => T;
subscribe: (callback: (value: T) => void) => () => void;
};

interface WritableSignal extends ReadableSignal {
set: (value: T) => void;
}
`

O signal-factory é usado para evitar duplicar esse código entre as storage-versioning, glhera-query, glhera-router

O mais importante é entender o conceito por trás do signal-factory para evitar duplicar código na maior parte do tempo você pode simplesmente copiar o código do signal-factory e usá-lo

signal-factory faz parte da stack do glhera

Configurando reatividade (signals)

Possui o método setSignalFactory para configurar o tipo de signal que será usado pela aplicação, podendo variar entre Vue, Angular, SolidJS, PreactJS Signals

signal-factory/store

A api do signal-factory oferece um selector

`ts
import { store, selector, multiSelector } from 'signal-factory/store';

const mySignal1 = store(1);
const mySignal2 = store(2);

// Para valores únicos
const singleValue = selector(mySignal1, (value) => value + 1);

// Api conveniente para múltiplos valores
// Inspirada do Recoil e Jotai
const multiValue = multiSelector((get) => get(mySignal1) + get(mySignal2));
`

$3

React não tem suporte nativo para signals, porém é possível usar @preact/signals-react e usar igual ao Preact

Aí é só usar o código abaixo

`ts
import { signal } from '@preact/signals-react';

setSignalFactory(signal);
`

$3

Adicionar para o preact com signals é muito simples, de onde a api foi inspirada

`ts
import { signal } from '@preact/signals';

setSignalFactory(signal);
`

Você pode usar também o hook do signal-factory/preact com signal-factory/store e ao invés de usar o @preact/signals você pode usar o store para criar os signals

A vantagem dessa abordagem é que ela é explícita do que store está sendo subscrito comparado @preact/signals, e ele também não modifica o render interno do preact, podendo salvar performance em algumas circunstancias

`tsx
import { store } from 'signal-factory/store';
import { useSubSignals } from 'signal-factory/preact';

// Já vem pré-definido com esse modo
setSignalFactory(store);

//
// Depois

// Nesse exemplo estamos definindo o counter como global, mas é melhor defini-lo com context
// É mais verboso com context, mas ajuda para testes e SSR, se você não usará testes ou SSR
// sinta-se a vontade de usar como singleton

const counter = store(1);

//

export function Component() {
useSubSignals(() => [someSignal]);

return counter.value++}>Count {counter.value};
}
`

$3

Você pode usar o wrapper usando ref do signal-factory

`ts
import { signal } from 'signal-factory/vue';

setSignalFactory(signal);
`

$3

Você pode simplesmente usar o store que já vem pré-definido no signal-factory/store

Ou no caso do Svelte você pode adaptar o writable

Lembrando que o store que o signal-factory é praticamente a mesma coisa que o writable do Svelte com excessão de que você tem acesso ao método .get()

`ts
import { store } from 'signal-factory/store';

setSignalFactory(store);
`

$3

Você pode usar o wrapper solid do signal-factory

`ts
import { signal } from 'signal-factory/solid';

setSignalFactory(signal);
`

$3

Você pode usar o wrapper angular do signal-factory

`ts
import { signal } from 'signal-factory/angular';

setSignalFactory(signal);
`

Testing

A api prove um wrapper para poder vizualizar o número de subscrições e o histórico de valores de um signal/store

`ts
import { testWrapper } from 'signal-factory/testing';
import { store } from 'signal-factory/store';

const wrapped = testWrapper(store(1));

wrapped.value = 2;

wrapped.history; // [1, 2]

wrapped.subscribe((value) => console.log(value));

wrapped.count; // 1
``