A utility for logically grouping the performance and destruction of side effects. Inspired by React's
componentWillUnmount(); and similarly Angular has
The problem with these functions is that often times the work that you have to do on "init" closely mirrors the work that you have to do on "destroy". So you end up with this highly coupled code split between two different functions.
Pedlar addresses that problem by letting you declare both the "init" and "destroy" logic at the same time in the same place. It's just not all run at the same time. The function that you pass to
perform() (the side effect) is run immediately, and the function that you return from the side effect is not run until you tell Pedlar to destroy that side effect.
Additionally, there's also usually an "update" life cycle function (
ngOnChanges()). Oftentimes identical or similar work takes place in the "update" and "init" functions. Pedlar also provides the ability to re-perform a particular effect at any time. It can even skip running the effect if dependencies that you specify have not changed!
# Install with yarnyarn add pedlar# Or install with npmnpm i pedlar
pedlar.perform// LOG: 'Side effect 1 performed'pedlar.perform// LOG: 'Side effect 2 performed'pedlar.destroyAll// LOG: 'Side effect 1 cleaned up!'// LOG: 'Side effect 2 cleaned up!'
Add and automatically remove an event
// Adds the click eventpedlar.addEventel, 'click',console.log'My button was clicked'// ...// Removes the click event, along with cleaning up all other side effectspedlar.destroyAll
Re-perform an event when dependencies have changed
consoleEffect = pedlar.perform,// LOG: 'Side effect performed'// You can avoid this initial run of the side effect by// calling `pedlar.create()` instead of `pedlar.perform()`consoleEffect.perform// Effect is not performed again, dependencies have not changedconsoleEffect.perform// LOG: 'Side effect cleaned up!'// LOG: 'Side effect performed'
A Pedlar Effect is the object returned from either
Pedlar.create(). It has two properties:
- id -
string- The ID of this effect. This ID can be passed to
Pedlar.destroy()to individually destroy this effect.
- perform -
(currentDependencies?) => void- Run the side effect. If dependencies are passed, the side effect will only be run if the dependencies have changed. If this is not the first time the side effect is being run, the destroyer (if one exists) will be executed before the side effect is re-run.
The side effect that you wish to run. This is a function that either returns nothing, or another function that cleans up the side effect.
create(sideEffect: PedlarSideEffect): PedlarEffect
PedlarEffect without initially running the side effect. You can optionally return a function from the
sideEffect that cleans it up. The side effect can be run at any time by invoking
perform(sideEffect: PedlarSideEffect, dependencies?: any): PedlarEffect
Perform a side effect. You can optionally return a function from the
sideEffect that cleans it up. The side effect can be re-run at any time by invoking
This is very similar to the
Pedlar.create() function, except that this also runs the side effect immediately.
Clean up a particular side effect that has been performed.
Clean up all side effects that have been performed since the last time this function was called.
addEvent(el, eventType, handler, options)
Perform the specific side effect of adding an event listener to an element. This event is then automatically removed when the side effect is destroyed.
||The element to add the event listener to|
||The type of event to add|
||The event handler|
||Optional. These options get passed directly through to the
addCustomEvent(el, eventType, handler, options)
addEvent() except that the
eventType argument accepts any string