feat: upgrade to Angular 13 (#169)

.gitignore

@@ -1,3 +1,4 @@
+/.angular/cache
 node_modules
 .vscode
 /dist-test

README.md

@@ -5,6 +5,35 @@
 [![@ngneat/until-destroy](https://github.com/ngneat/until-destroy/workflows/@ngneat/until-destroy/badge.svg)](https://github.com/ngneat/until-destroy/actions/workflows/until-destroy.yml)
 [![npm](https://img.shields.io/npm/dm/@ngneat/until-destroy?style=plastic)](https://www.npmjs.com/package/@ngneat/until-destroy)
 
+## Compatibility with Angular Versions
+
+<table>
+  <thead>
+    <tr>
+      <th>@ngneat/until-destroy</th>
+      <th>Angular</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        8.x
+      </td>
+      <td>
+        >= 10.0.5 < 13
+      </td>
+    </tr>
+    <tr>
+      <td>
+        9.x
+      </td>
+      <td>
+        >= 13
+      </td>
+    </tr>
+  </tbody>
+</table>
+
 ## Table of contents
 
 - [Angular 10 Compatibility](#angular-10-compatibility)
@@ -35,9 +64,7 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 @Component({})
 export class InboxComponent {
   ngOnInit() {
-    interval(1000)
-      .pipe(untilDestroyed(this))
-      .subscribe();
+    interval(1000).pipe(untilDestroyed(this)).subscribe();
   }
 }
 ```
@@ -61,7 +88,7 @@ You can set the `arrayName` property if you want to unsubscribe from each subscr
 export class HomeComponent {
   subscriptions = [
     fromEvent(document, 'click').subscribe(),
-    fromEvent(document, 'mousemove').subscribe()
+    fromEvent(document, 'mousemove').subscribe(),
   ];
 
   // You can still use the operator
@@ -96,14 +123,12 @@ export class HomeComponent {
 @Injectable()
 export class InboxService {
   constructor() {
-    interval(1000)
-      .pipe(untilDestroyed(this))
-      .subscribe();
+    interval(1000).pipe(untilDestroyed(this)).subscribe();
   }
 }
 
 @Component({
-  providers: [InboxService]
+  providers: [InboxService],
 })
 export class InboxComponent {
   constructor(inboxService: InboxService) {}
@@ -145,9 +170,7 @@ import { untilDestroyed } from 'ngx-take-until-destroy';
 
 export class Widget {
   constructor() {
-    interval(1000)
-      .pipe(untilDestroyed(this, 'destroy'))
-      .subscribe(console.log);
+    interval(1000).pipe(untilDestroyed(this, 'destroy')).subscribe(console.log);
   }
 
   // The name needs to be the same as the second parameter

angular.json

@@ -1,26 +1,6 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
-  "cli": {
-    "defaultCollection": "@nrwl/angular"
-  },
-  "defaultProject": "until-destroy",
-  "schematics": {
-    "@nrwl/angular:application": {
-      "style": "scss",
-      "linter": "eslint",
-      "unitTestRunner": "jest",
-      "e2eTestRunner": "cypress"
-    },
-    "@nrwl/angular:library": {
-      "style": "scss",
-      "linter": "eslint",
-      "unitTestRunner": "jest"
-    },
-    "@nrwl/angular:component": {
-      "style": "scss"
-    }
-  },
   "projects": {
     "integration": {
       "projectType": "application",
@@ -107,7 +87,9 @@
           },
           "outputs": ["{options.outputFile}"]
         }
-      }
+      },
+      "tags": ["app"],
+      "implicitDependencies": ["until-destroy"]
     },
     "integration-e2e": {
       "projectType": "application",
@@ -129,7 +111,9 @@
           },
           "outputs": ["{options.outputFile}"]
         }
-      }
+      },
+      "tags": ["app"],
+      "implicitDependencies": ["integration"]
     },
     "until-destroy": {
       "projectType": "library",
@@ -160,7 +144,9 @@
           },
           "outputs": ["{options.outputFile}"]
         }
-      }
+      },
+      "tags": ["lib"],
+      "implicitDependencies": []
     },
     "until-destroy-migration": {
       "projectType": "library",
@@ -193,7 +179,9 @@
           },
           "outputs": ["{options.outputFile}"]
         }
-      }
+      },
+      "tags": ["lib"],
+      "implicitDependencies": []
     }
   }
 }

apps/integration/jest.config.js

@@ -14,5 +14,8 @@ module.exports = {
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment',
   ],
-  transform: { '^.+\\.(ts|js|html)$': 'jest-preset-angular' },
+  transform: {
+    '^.+.(ts|mjs|js|html)$': 'jest-preset-angular',
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
 };

apps/integration/tsconfig.editor.json

@@ -1,4 +1,3 @@
-
 {
   "extends": "./tsconfig.json",
   "include": ["**/*.ts"],

apps/integration/tsconfig.spec.json

@@ -5,5 +5,5 @@
     "types": ["jest", "node"]
   },
   "files": ["src/test-setup.ts"],
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
+  "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
 }

libs/until-destroy-migration/jest.config.js

@@ -10,8 +10,9 @@ module.exports = {
   },
   coverageDirectory: '../../coverage/libs/until-destroy-migration',
   transform: {
-    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
+    '^.+.(ts|mjs|js|html)$': 'jest-preset-angular',
   },
+  transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
   snapshotSerializers: [
     'jest-preset-angular/build/serializers/no-ng-attributes',
     'jest-preset-angular/build/serializers/ng-snapshot',

libs/until-destroy-migration/src/index.ts

@@ -1,10 +1,11 @@
 #!/usr/bin/env node
 
 import * as fs from 'fs';
-import * as glob from 'glob';
 import * as minimist from 'minimist';
 import { ClassDeclaration, Project, QuoteKind, SourceFile } from 'ts-morph';
 
+const glob = require('glob');
+
 const { base = 'src/app', removeOnDestroy } = minimist(process.argv.slice(2));
 
 const hasUntilDestroy =
@@ -17,8 +18,8 @@ const project = new Project({
   },
 });
 
-glob(`${base}/**/*.ts`, {}, (_, files) => {
-  files.forEach((path) => {
+glob(`${base}/**/*.ts`, {}, (_: NodeJS.ErrnoException, files: string[]) => {
+  files.forEach(path => {
     fs.readFile(path, 'utf8', (_, text) => {
       if (!hasUntilDestroy.test(text)) return;
 
@@ -39,7 +40,7 @@ export function transformCode(code: string, filePath: string, removeOnDestroy =
   const sourceFile = project.createSourceFile(filePath, code, { overwrite: true });
   replaceOldImport(sourceFile);
 
-  sourceFile.getClasses().forEach((classDeclaration) => {
+  sourceFile.getClasses().forEach(classDeclaration => {
     addUntilDestroyDecorator(classDeclaration);
 
     if (removeOnDestroy) {
@@ -76,7 +77,7 @@ function addUntilDestroyDecorator(classDeclaration: ClassDeclaration) {
 function removeOnDestroyImplements(classDeclaration: ClassDeclaration) {
   const onDestroyImplementClause = classDeclaration
     .getImplements()
-    .find((impl) => impl.getText() === 'OnDestroy');
+    .find(impl => impl.getText() === 'OnDestroy');
   onDestroyImplementClause && classDeclaration.removeImplements(onDestroyImplementClause);
 }
 
@@ -89,7 +90,7 @@ function removeOnDestroyImport(sourceFile: SourceFile) {
 
   const onDestroyImportSpecifier = importClause
     .getNamedImports()
-    .find((node) => node.getText() === 'OnDestroy');
+    .find(node => node.getText() === 'OnDestroy');
   if (!onDestroyImportSpecifier) return;
 
   onDestroyImportSpecifier.remove();

libs/until-destroy-migration/tsconfig.spec.json

@@ -5,5 +5,5 @@
     "types": ["jest", "node"]
   },
   "files": ["src/test-setup.ts"],
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
+  "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
 }

libs/until-destroy/jest.config.js

@@ -14,5 +14,8 @@ module.exports = {
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment',
   ],
-  transform: { '^.+\\.(ts|js|html)$': 'jest-preset-angular' },
+  transform: {
+    '^.+.(ts|mjs|js|html)$': 'jest-preset-angular',
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
 };

libs/until-destroy/tsconfig.lib.json

@@ -1,4 +1,3 @@
-
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
@@ -12,7 +11,7 @@
     "types": ["node"]
   },
   "angularCompilerOptions": {
-    "enableIvy": false,
+    "compilationMode": "partial",
     "annotateForClosureCompiler": true,
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
@@ -21,5 +20,5 @@
     "enableResourceInlining": true
   },
   "include": ["**/*.ts"],
-  "exclude": ["**/*.spec.ts"]
+  "exclude": ["**/*.spec.ts", "**/*.test.ts"]
 }

libs/until-destroy/tsconfig.spec.json

@@ -5,5 +5,5 @@
     "types": ["jest", "node"]
   },
   "files": ["src/test-setup.ts"],
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
+  "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
 }

nx.json

@@ -15,29 +15,32 @@
     "default": {
       "runner": "@nrwl/workspace/tasks-runners/default",
       "options": {
-        "cacheableOperations": ["build", "lint", "test", "e2e"]
+        "cacheableOperations": ["build", "lint", "test", "e2e"],
+        "parallel": 1
       }
     }
   },
-  "projects": {
-    "integration": {
-      "tags": ["app"],
-      "implicitDependencies": ["until-destroy"]
-    },
-    "integration-e2e": {
-      "tags": ["app"],
-      "implicitDependencies": ["integration"]
+  "affected": {
+    "defaultBase": "master"
+  },
+  "cli": {
+    "defaultCollection": "@nrwl/angular"
+  },
+  "defaultProject": "until-destroy",
+  "generators": {
+    "@nrwl/angular:application": {
+      "style": "scss",
+      "linter": "eslint",
+      "unitTestRunner": "jest",
+      "e2eTestRunner": "cypress"
     },
-    "until-destroy": {
-      "tags": ["lib"],
-      "implicitDependencies": []
+    "@nrwl/angular:library": {
+      "style": "scss",
+      "linter": "eslint",
+      "unitTestRunner": "jest"
     },
-    "until-destroy-migration": {
-      "tags": ["lib"],
-      "implicitDependencies": []
+    "@nrwl/angular:component": {
+      "style": "scss"
     }
-  },
-  "affected": {
-    "defaultBase": "master"
   }
 }