A tiny library to encapsulate side effects in a compact, reusable, testable and TypeScript-friendly style.
npm add side-effect-manager
Conventionally we write side effects like this:
class MyClass {
constructor() {
this.handleResize = () => {
console.log("resize");
};
window.addEventListener("resize", this.handleResize);
}
destroy() {
// cleanup side effects
window.removeEventListener("resize", this.handleResize);
}
}
This code style is scattered and hard-to-follow. The side effect handler has to be exposed to this
which leaves us many unwanted and uncompressible properties.
With side-effect-manager
we may write the same logic like this instead:
import { SideEffectManager } from "side-effect-manager";
class MyClass {
constructor() {
this.sideEffect = new SideEffectManager();
this.sideEffect.add(() => {
const handleResize = () => {
console.log("resize");
};
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
});
}
destroy() {
this.sideEffect.flushAll();
}
}
Or simply like this:
this.sideEffect.addEventListener(window, "resize", () => {
console.log("resize");
});
Not only the code is more compact and readable, variables can now be compressed as they are not properties.
Also the typing of listener can now be inferred from method so it is also more TypeScript friendly without the need to declare listener type specifically.
Add a side effect:
sideEffect.add(() => {
const subscription = observable$.subscribe(value => {
console.log(value);
});
return () => subscription.unsubscribe();
});
If the side effect returns a disposer function directly you can also:
import Emittery from "emittery";
import { Remitter } from "remitter";
const emittery = new Emittery();
const remitter = new Remitter();
sideEffect.addDisposer(
remitter.on("event1", eventData => console.log(eventData))
);
// Or an array of disposers
sideEffect.addDisposer([
remitter.on("event1", eventData => console.log(eventData)),
remitter.on("event2", eventData => console.log(eventData)),
emittery.on("event3", eventData => console.log(eventData)),
]);
There are also sugars for addEventListener
, setTimeout
and setInterval
.
sideEffect.setTimeout(() => {
console.log("timeout");
}, 2000);
Adding a side effect returns a disposerID
which can be used to remove
or flush
a side effect.
const disposerID = sideEffect.addEventListener(window, "resize", () => {
console.log("resize");
});
// Remove the side effect without running the disposer callback
sideEffect.remove(disposerID);
// Remove the side effect then run the disposer callback
sideEffect.flush(disposerID);
A disposerID
can also be set deliberately. Side effects with the same ID will be flushed before adding a new one.
function debounce(handler, timeout) {
sideEffect.setTimeout(handler, timeout, "my-timeout");
}
Similar to SideEffectManager
, AsyncSideEffectManager
can also handle async side effect cleanup nicely.
import { AsyncSideEffectManager } from "side-effect-manager";
const asyncSideEffect = new AsyncSideEffectManager();
asyncSideEffect.add(async () => {
// async side effect
return async () => {
// async cleanup
};
});
Yon can add or flush side effects with the same ID repeatably. AsyncSideEffectManager
will correctly schedule tasks and skip unnecessary tasks automatically.
const disposerID = asyncSideEffect.add(async () => {
// async side effect
return async () => {
// async cleanup
};
});
// Add side effect with same ID
asyncSideEffect.add(async () => {
// async side effect
return async () => {
// async cleanup
};
}, disposerID);
asyncSideEffect.flush(disposerID);
You can always await asyncSideEffect.finished
which will be updated and resolved after all tasks are finished.
await asyncSideEffect.finished;
joinDisposers
Join multiple disposers into on disposerjoinAsyncDisposers
Join multiple disposers into on disposer and wait until all disposers are resolved.