GithubHelp home page GithubHelp logo

kevinbuhmann / subscription-tracker Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 29 KB

A lifecycle-based cleanup strategy for RxJS Observables in Angular apps.

License: MIT License

TypeScript 100.00%
angular rxjs unsubscribe cleanup destroy lifecycle

subscription-tracker's Introduction

subscription-tracker

npm version Build Status codecov

A lifecycle-based cleanup strategy for RxJS Observables in Angular apps.

subscription-tracker automatically destroys subscriptions the component (or app) that created them is destroyed by the Angular framework.

Installation

npm install --save subscription-tracker or yarn add subscription-tracker

Usage

  1. Create a BaseComponent class that extends SubscriptionTrackerBaseComponent in the root of your project.
import { SubscriptionTrackerBaseComponent } from 'subscription-tracker';

export abstract class BaseComponent extends SubscriptionTrackerBaseComponent {
}
  1. Change all .subscribe(...) usages to .subscribeAndTrack(this, ...). You will need to extend your new BaseComponent. I recomened making all of your app's components extend BaseComponent. Do not subscribe in services. (Better yet, try to subscribe in templates using the async pipe as much as possible.)
import { Component, OnInit } from '@angular/core';

import { BaseComponent } from './base.component';
import { SettingsService } from './common/core/services/settings.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent extends BaseComponent implements OnInit {
  constructor(private readonly settingsService: SettingsService) {
    super();
  }

  ngOnInit() {
    this.settingsService.updateSettings().subscribeAndTrack(this);
  }
}
  1. Add the no-subscribe rule to your tslint.json configuration. This rule will warn you if you use .subscribe(...) instead of .subscribeAndTrack(this, ...)
{
  "rulesDirectory": [
    "node_modules/subscription-tracker/dist/tslint-rules"
  ],
  "rules": {
    "no-subscribe": true,
  }
}

What if I absolutely need to subscribe outside of a componment?

Subscriptions outside of a component should be very rare -- only when absolutely required. But when you need to subscribe outside of a component, use GlobalSubscriptionTracker. This service will wait until the Angular platform is destroyed before unsubscribing from any subscriptions.

  1. Provide GlobalSubscriptionTracker in your AppModule or wherever you provide shared services.
import { NgModule } from '@angular/core';
import { GlobalSubscriptionTracker } from 'subscription-tracker';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    ...
    GlobalSubscriptionTracker
  ]
  entryComponents: [AppComponent],
  bootstrap: [AppComponent],
  exports: [AppComponent]
})
export class AppModule { }
  1. Use GlobalSubscriptionTracker only when you cannot tie a subscription to the lifecycle of a particular component. Rememeber, you can use the root AppComponent for most subscription that need to live for the entire time the app is active.
export function authServiceInitFactory(injector: Injector) {
  return () => {
    const authService = injector.get(AuthService);
    const globalSubscriptionTracker = injector.get(GlobalSubscriptionTracker);

    authService.credentials.subscribeAndTrack(globalSubscriptionTracker);
  };
}

export const authServiceInitProvider: Provider = {
  provide: APP_INITIALIZER,
  multi: true,
  useFactory: authServiceInitFactory,
  deps: [Injector]
};

subscription-tracker's People

Stargazers

 avatar

Watchers

 avatar

subscription-tracker's Issues

Support RxJS 6.x

Looks like the type signature breaks in RxJS 6 and .pipe is not known

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.