SubSiphon is a lightweight utility to manage multiple RxJS Subscriptions. It lets you add subscriptions via numeric indexes or named keys and provides easy unsubscribe() and destroy() methods to clean them up.
npm install subsiphonimport { interval } from 'rxjs';
import { createSubSiphon } from 'subsiphon';
const siphon = createSubSiphon();
// Add subscriptions via index
siphon[0] = interval(1000).subscribe(val => console.log('Index 0:', val));
// Add subscriptions via "add" setter (auto-increment index)
siphon.add = interval(1500).subscribe(val => console.log('Auto index:', val));
// Add named subscriptions
siphon.anyName1 = interval(500).subscribe(val => console.log('Named:', val));
siphon.anyName2 = interval(500).subscribe(val => console.log('Named:', val));
// Access subscriptions
console.log('Keys:', Object.keys(siphon)); // ["0", "anyName1", "anyName2"]
// Unsubscribe all
siphon.unsubscribe();
// unsubscribe and clear all and reset
siphon.destroy();Use the @Siphon() decorator to automatically unsubscribe properties (including arrays) on ngOnDestroy:
import { Component, OnInit } from '@angular/core';
import { interval, Subscription } from 'rxjs';
import { Siphon } from 'subsiphon';
@Siphon({
log: true,
exclude: ['keepAlive']
})
@Component({
selector: 'app-demo',
template: `Check console for logs`,
})
export class DemoComponent implements OnInit {
intervalSub?: Subscription;
keepAlive?: Subscription;
list: Subscription[] = [];
ngOnInit(): void {
this.intervalSub = interval(1000).subscribe(console.log);
this.keepAlive = interval(4000).subscribe(console.log);
this.list.push(
interval(2000).subscribe(console.log),
interval(3000).subscribe(console.log)
);
}
ngOnDestroy(): void {
console.log('Component destroyed');
}
}You can also use the siphon() pipe operator to auto-unsubscribe observables:
import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';
import { siphon } from 'subsiphon';
@Component({
selector: 'app-stream',
template: `<p>Streaming...</p>`
})
export class StreamComponent implements OnInit {
ngOnInit(): void {
interval(1000)
.pipe(siphon(this))
.subscribe(val => console.log('Tick:', val));
}
ngOnDestroy(): void {
console.log('Component destroyed');
}
}- Add subscriptions using numeric indexes or named keys.
- Auto-increment
addsetter to append subscriptions easily. unsubscribe()to stop all active subscriptions.destroy()to clear and reset all subscriptions.- Decorator
@Siphon()for automatic Angular lifecycle management. siphon()RxJS operator to simplify auto-unsubscription.
Factory method to create a proxied SubSiphon instance:
const siphon = createSubSiphon();-
unsubscribe(): void- Unsubscribes from all active subscriptions.
-
destroy(): void- Unsubscribes and clears all internal references (resets the container).
siphon[0] = interval(1000).subscribe();siphon.add = interval(500).subscribe(); // assigns to first free numeric indexsiphon.myStream = interval(2000).subscribe();Pull requests and suggestions are welcome! Please file issues or submit PRs on GitHub.
Licensed under the MIT License.