fix(datasource): sync with latest Angular and rxjs

Author: matheo

libs/datasource/README.md

@@ -8,7 +8,7 @@ This library provides an abstract `ReactiveDataSource` and `MatDataSource` class
 
 You can pass it to a Material Table:
 
-```
+```html
 <mat-datasource [dataSource]="source">
   <mat-table [dataSource]="source">
     ...
@@ -20,12 +20,11 @@ You can pass it to a Material Table:
     ></mat-paginator>
   </footer>
 </mat-datasource>
-
 ```
 
 Or consume it via the `dataSource` pipe:
 
-```
+```html
 <ng-container *ngIf="source | dataSource as items">
   <mat-nav-list>
     <mat-list-item *ngFor="let item of items">
@@ -38,7 +37,7 @@ Or consume it via the `dataSource` pipe:
 ## Demo
 
 An example of how it can work with a Firebase backend it's here:  
-https://stackblitz.com/edit/matdatasource
+<https://stackblitz.com/edit/matdatasource>
 
 And the concepts behind are explained here:  
-https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6
+<https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6>

libs/datasource/jest.config.js renamed to libs/datasource/jest.config.ts

@@ -1,23 +1,22 @@
-module.exports = {
+/* eslint-disable */
+export default {
   displayName: 'datasource',
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {},
   coverageDirectory: '../../coverage/libs/datasource',
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ],
   transform: {
-    '^.+.(ts|mjs|js|html)$': [
+    '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',
       {
-        stringifyContentPathRegex: '\\.(html|svg)$',
-
         tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
       },
     ],
   },
-  transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
 };

libs/datasource/project.json

@@ -7,24 +7,24 @@
   "targets": {
     "build": {
       "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
       "options": {
         "tsConfig": "libs/datasource/tsconfig.lib.json",
-        "project": "libs/datasource/ng-package.json",
-        "buildableProjectDepsInPackageJsonType": "dependencies",
-        "updateBuildableProjectDepsInPackageJson": true
+        "project": "libs/datasource/ng-package.json"
       },
       "configurations": {
         "production": {
           "tsConfig": "libs/datasource/tsconfig.lib.prod.json"
         }
-      }
+      },
+      "defaultConfiguration": "production"
     },
     "test": {
       "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "libs/datasource/jest.config.js"
-      },
-      "outputs": ["{workspaceRoot}/coverage/libs/datasource"]
+        "jestConfig": "libs/datasource/jest.config.ts"
+      }
     }
   },
   "tags": ["shared"]

libs/datasource/src/lib/container.ts

@@ -3,7 +3,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   Input,
-  ViewEncapsulation
+  ViewEncapsulation,
 } from '@angular/core';
 import { MatDataSource } from './datasource';
 import { missingDataSourceInput } from './messages';
@@ -13,13 +13,13 @@ import { missingDataSourceInput } from './messages';
   templateUrl: './container.html',
   styleUrls: ['./container.scss', './directives.scss', './overlay.scss'],
   host: {
-    class: 'mat-datasource'
+    class: 'mat-datasource',
   },
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataSourceContainer<REQ, RAW, RES> implements AfterContentInit {
-  @Input() dataSource: MatDataSource<REQ, RAW, RES>;
+  @Input({ required: true }) dataSource!: MatDataSource<REQ, RAW, RES>;
 
   @Input() diameter = 40;
   @Input() strokeWidth = 5;

libs/datasource/src/lib/datasource-logger.ts

@@ -13,7 +13,7 @@ export class DataSourceLogger {
   set config(config: DataSourceConfig) {
     this._config = config;
   }
-  private _config: DataSourceConfig;
+  private _config!: DataSourceConfig;
 
   constructor(private sourceName: string, private _intl?: MatDataSourceIntl) {}
 
@@ -45,12 +45,12 @@ export class DataSourceLogger {
     );
   }
 
-  getTimeoutError(attempt: number) {
+  getTimeoutError(attempt: number): string {
     switch (attempt) {
       case 0:
-        return this._intl?.waitMsg || this._config.waitMsg;
+        return this._intl?.waitMsg || this._config.waitMsg || '';
       case 1:
-        return this._intl?.delayMsg || this._config.delayMsg;
+        return this._intl?.delayMsg || this._config.delayMsg || '';
       default:
         throw new Error(this._intl?.timeoutMsg || this._config.timeoutMsg);
     }

libs/datasource/src/lib/datasource-pipe.ts

@@ -4,10 +4,9 @@ import {
   Pipe,
   PipeTransform,
   Type,
-  ɵisObservable,
   ɵstringify as stringify,
 } from '@angular/core';
-import { Observable, SubscriptionLike } from 'rxjs';
+import { Observable, SubscriptionLike, isObservable } from 'rxjs';
 import { ReactiveDataSource } from './datasource-reactive';
 
 export function invalidPipeArgumentError(type: Type<any>, value: Object) {
@@ -100,7 +99,7 @@ export class DataSourcePipe implements OnDestroy, PipeTransform {
   }
 
   private _selectStrategy(obj: ReactiveDataSource<any, any, any>): any {
-    if (ɵisObservable(obj.change$)) {
+    if (isObservable(obj.change$)) {
       return _observableStrategy;
     }
 
@@ -109,7 +108,7 @@ export class DataSourcePipe implements OnDestroy, PipeTransform {
 
   private _dispose(): void {
     this._strategy.dispose(this._subscription!);
-    this._obj.disconnect();
+    this._obj?.disconnect();
     this._latestValue = null;
     this._subscription = null;
     this._obj = null;

libs/datasource/src/lib/datasource.ts

@@ -104,7 +104,7 @@ export abstract class MatDataSource<REQ = any, RAW = any, RES = any>
   get outputMsg() {
     return this._outputMsg;
   }
-  protected _outputMsg: string;
+  protected _outputMsg: string = '';
 
   /**
    * Accessors
@@ -155,7 +155,7 @@ export abstract class MatDataSource<REQ = any, RAW = any, RES = any>
    */
   protected defaults: Partial<REQ> = {};
   protected overrides: Partial<REQ> = {};
-  protected arguments: REQ & DataSourceOpts;
+  protected arguments?: REQ & DataSourceOpts;
 
   /**
    * Error control vars.
@@ -227,9 +227,9 @@ export abstract class MatDataSource<REQ = any, RAW = any, RES = any>
   ): string {
     const src: DataSourceStream<REQ | DataSourceOpts> = isObservable(stream)
       ? {
-          name: this._streams.length.toString(),
-          stream,
-        }
+        name: this._streams.length.toString(),
+        stream,
+      }
       : stream;
 
     this._logger.check(this._triggered, addWhenRunning(src.name || src.stream));
@@ -311,9 +311,9 @@ export abstract class MatDataSource<REQ = any, RAW = any, RES = any>
       ...this.overrides,
     } as any;
 
-    delete this.arguments.forceReload;
+    delete this.arguments?.forceReload;
 
-    return this.arguments;
+    return this.args;
   }
 
   private _isEqual(): (prev: REQ, curr: REQ) => boolean {
@@ -342,28 +342,27 @@ export abstract class MatDataSource<REQ = any, RAW = any, RES = any>
     return merge(
       query,
       // timers check
-      timer(this.config.waitMs, this.config.intervalMs).pipe(
+      timer(this.config.waitMs ?? 5000, this.config.intervalMs || 10000).pipe(
         takeUntil(query),
-        take(3) // by default: 5s, 15s, 25s
-      )
-    ).pipe(
-      // delay check
-      tap((val) => {
-        if (typeof val !== 'number') {
-          this._logger.print(queryResponse(), val);
-        } else {
-          this._logger.print(queryTimeout(), val);
+        take(3), // by default: 5s, 15s, 25s
+        tap((sequence) => {
+          this._logger.print(queryTimeout(), sequence);
           try {
-            this._outputMsg = this._logger.getTimeoutError(val);
-          } catch (e) {
-            this._logger.addError('timeout', e.message);
+            this._outputMsg = this._logger.getTimeoutError(sequence);
+          } catch (e: unknown) {
+            if (e instanceof Error) {
+              this._logger.addError('timeout', e.message);
+            }
             this._loading = false;
           }
           this._change$.next({});
-        }
-      }),
-      // discard timer result
-      filter<RAW>((result) => typeof result !== 'number'),
+        }),
+        filter((result: number | RAW): result is RAW => {
+          return typeof result !== 'number';
+        })
+      )
+    ).pipe(
+      tap((result) => this._logger.print(queryResponse(), result)),
       catchError((err) => {
         // isolate query error
         this._logger.handleError('query', err);

libs/datasource/src/lib/mappers.ts

@@ -4,7 +4,7 @@ import { pipe } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 
 /**
- * Premade Mappers
+ * Pre-made Mappers
  */
 
 export function mapPaginator(pageSize: number) {

libs/datasource/src/lib/overlay.ts

@@ -6,7 +6,7 @@ import {
   HostBinding,
   Input,
   OnDestroy,
-  ViewEncapsulation
+  ViewEncapsulation,
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -17,20 +17,21 @@ import { missingDataSourceInput } from './messages';
   selector: 'mat-datasource-overlay',
   templateUrl: './overlay.html',
   host: {
-    class: 'mat-datasource-overlay'
+    class: 'mat-datasource-overlay',
   },
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataSourceOverlay<REQ, RAW, RES>
-  implements AfterContentInit, OnDestroy {
-  @Input() dataSource: MatDataSource<REQ, RAW, RES>;
+  implements AfterContentInit, OnDestroy
+{
+  @Input({ required: true }) dataSource!: MatDataSource<REQ, RAW, RES>;
 
-  @Input() diameter: number;
-  @Input() strokeWidth: number;
+  @Input() diameter?: number;
+  @Input() strokeWidth?: number;
 
   @HostBinding('style.display')
-  _display: string;
+  _display?: string;
 
   private onDestroy = new Subject<void>();
 

libs/datasource/tsconfig.json

@@ -1,7 +1,17 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": [],
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
   "files": [],
+  "include": [],
   "references": [
     {
       "path": "./tsconfig.lib.json"
@@ -13,7 +23,10 @@
       "path": "./tsconfig.spec.json"
     }
   ],
-  "compilerOptions": {
-    "target": "es2020"
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }

libs/datasource/tsconfig.lib.json

@@ -7,14 +7,13 @@
     "declarationMap": true,
     "inlineSources": true,
     "useDefineForClassFields": false,
-    "types": [],
-    "lib": ["dom", "es2018"]
+    "types": []
   },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "enableResourceInlining": true
-  },
-  "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
   "include": ["**/*.ts"]
 }

libs/datasource/tsconfig.lib.prod.json

@@ -1,9 +1,7 @@
 {
   "extends": "./tsconfig.lib.json",
   "compilerOptions": {
-    "declarationMap": false,
-    "useDefineForClassFields": false,
-    "target": "ES2022"
+    "declarationMap": false
   },
   "angularCompilerOptions": {
     "compilationMode": "partial"

libs/datasource/tsconfig.spec.json

@@ -3,8 +3,14 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
+    "target": "es2016",
     "types": ["jest", "node"]
   },
   "files": ["src/test-setup.ts"],
-  "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
 }