effecto patronum ✨
☄️ Effector utility library delivering modularity and convenience
Table of contents
Usage
npm install patronum
yarn add patronum
Import function by its name from patronum
:
import { delay } from 'patronum/delay';
Also use can import it from index:
Be careful, with this method, all functions will be at your bundle
import { delay } from 'patronum';
import { createEvent } from 'effector';
import { condition } from 'patronum/condition';
const trigger = createEvent<string>();
const longString = createEvent<string>();
const shortString = createEvent<string>();
condition({
source: trigger,
if: (string) => string.length > 8,
then: longString,
else: shortString,
});
import { createEvent } from 'effector';
import { delay } from 'patronum/delay';
const trigger = createEvent<string>();
const delayed = delay(trigger, 300);
delayed.watch((payload) => console.info('triggered', payload));
trigger('hello');
import { createEvent } from 'effector';
import { debounce } from 'patronum/debounce';
const trigger = createEvent<number>();
const target = debounce(trigger, 200);
target.watch((payload) => console.info('debounced', payload));
trigger(1);
trigger(2);
trigger(3);
trigger(4);
import { createEvent } from 'effector';
import { throttle } from 'patronum/throttle';
const trigger = createEvent<number>();
const target = throttle(trigger, 200);
target.watch((payload) => console.info('throttled', payload));
trigger(1);
trigger(2);
trigger(3);
trigger(4);
import { createStore, createEvent, createEffect } from 'effector';
import { debug } from 'patronum/debug';
const event = createEvent();
const effect = createEffect().use((payload) =>
Promise.resolve('result' + payload),
);
const $store = createStore(0)
.on(event, (state, value) => state + value)
.on(effect.done, (state) => state * 10);
debug($store, event, effect);
event(5);
effect('demo');
import { createEvent, createEffect } from 'effector';
import { status } from 'patronum/status';
const effect = createEffect().use(() => Promise.resolve(null));
const $status = status(effect);
$status.watch((value) => console.log(`status: ${value}`));
effect();
import { createEvent, createStore } from 'effector';
import { spread } from 'patronum/spread';
const trigger = createEvent<{ first: string; second: string }>();
const $first = createStore('');
const $second = createStore('');
spread(trigger, {
first: $first,
second: $second,
});
trigger({ first: 'Hello', second: 'World' });
$first.getState();
$second.getState();
No tests yet
import { createStore } from 'effector';
import { reshape } from 'patronum/reshape';
const $original = createStore<string>('Hello world');
const parts = reshape($original, {
length: (string) => string.length,
first: (string) => string.split(' ')[0] || '',
second: (string) => string.split(' ')[1] || '',
});
parts.length.watch(console.info);
parts.first.watch(console.log);
parts.second.watch(console.log);
No tests yet
import { createEvent } from 'effector';
import { splitMap } from 'patronum/splitmap';
const nameReceived = createEvent<string>();
const received = splitMap(nameReceived, {
firstName: (string) => string.split(' ')[0],
lastName: (string) => string.split(' ')[1],
});
received.firstName.watch((first) => console.info('firstname received', first));
received.lastName.watch((last) => console.info('lastname received', last));
nameReceived('Sergey');
nameReceived('Sergey Sova');