Jscodeshift-take-until-destroyed NPM

jscodeshift-take-until-destroyed

This codemod automates the migration to Angular's new takeUntilDestroyed operator. It replaces takeUntil with takeUntilDestroyed, removes the destroyed notifier argument, and adds a DestroyRef when required.

Installation

To install the codemod, use npm or yarn:

npm install --save-dev jscodeshift-take-until-destroyed
# or
yarn add --dev jscodeshift-take-until-destroyed

You'll also need jscodeshift, the framework powering this codemod:

npm install -g jscodeshift

Usage

Run the codemod using the jscodeshift CLI and specify the path to the files you want to transform:

jscodeshift -t ./node_modules/jscodeshift-take-until-destroyed/src/take-until-destroyed.ts src

Examples

`takeUntil(this.destroy$)` to `takeUntilDestroyed(this.destroyRef)`

When takeUntil is used with a Subject property, the codemod will replace it with takeUntilDestroyed and inject a DestroyRef.

Before:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { takeUntil, tap } from 'rxjs/operators';
import { Subject } from 'rxjs';

export class MyComponent implements OnInit, OnDestroy {
  destroy$ = new Subject<void>();

  ngOnInit(): void {
    this.obs$.pipe(takeUntil(this.destroy$)).subscribe((x) => console.log(x));
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

After:

import { Component, DestroyRef, inject, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { tap } from 'rxjs/operators';

export class MyComponent implements OnInit {
  private readonly destroyRef = inject(DestroyRef);

  ngOnInit(): void {
    this.obs$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((x) => console.log(x));
  }
}

`takeUntil(this.destroy$)` to `takeUntilDestroyed()`

When takeUntil is called with a Subject property in a constructor or property initializer, the codemod replaces it with takeUntilDestroyed without injecting a DestroyRef.

Before:

import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import { takeUntil, tap } from 'rxjs/operators';
import { Subject } from 'rxjs';

export class MyComponent implements OnDestroy {
  private destroy$ = new Subject<boolean>();
  private val$ = inject(ValService).obs$.pipe(takeUntil(this.destroy$));

  constructor() {
    obs$.pipe(takeUntil(this.destroy$)).subscribe((x) => console.log(x));
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

After:

import { Component, inject, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { tap } from 'rxjs/operators';

export class MyComponent {
  private val$ = inject(ValService).obs$.pipe(takeUntilDestroyed());

  constructor() {
    obs$.pipe(takeUntilDestroyed()).subscribe((x) => console.log(x));
  }
}