Merge pull request #23 from ngbox/feat/zoneless

Handled change detection in zoneless apps

angular.json

@@ -26,11 +26,9 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular-builders/jest:run",
           "options": {
-            "main": "projects/ng-observe/src/test.ts",
-            "tsConfig": "projects/ng-observe/tsconfig.spec.json",
-            "karmaConfig": "projects/ng-observe/karma.conf.js"
+            "no-cache": true
           }
         },
         "lint": {
@@ -40,9 +38,7 @@
               "projects/ng-observe/tsconfig.lib.json",
               "projects/ng-observe/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         }
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-observe",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -24,22 +24,17 @@
     "zone.js": "~0.11.3"
   },
   "devDependencies": {
+    "@angular-builders/jest": "^12.0.0",
     "@angular-devkit/build-angular": "~0.1102.3",
     "@angular/cli": "~11.2.3",
     "@angular/compiler-cli": "~11.2.4",
-    "@types/jasmine": "~3.6.0",
+    "@types/jest": "^26.0.23",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "copyfiles": "^2.4.1",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.1.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "jest": "^26.6.3",
     "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
     "ng-packagr": "^11.0.0",
-    "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~4.1.5"

projects/ng-observe/jest.config.js

@@ -0,0 +1,7 @@
+const { globals } = require('jest-preset-angular/jest-preset.js');
+
+module.exports = {
+  globals,
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['<rootDir>/projects/ng-observe/setup-jest.ts'],
+};

projects/ng-observe/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-observe",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Angular reactivity streamlined...",
   "keywords": [
     "angular",

projects/ng-observe/setup-jest.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

projects/ng-observe/src/lib/ng-observe.spec.ts

@@ -50,8 +50,8 @@ describe('Observe Value', () => {
   });
 
   it('should create an observed value', () => {
-    expect(isCollection(component.text)).toBeFalse();
-    expect(component.text instanceof Observed).toBeTrue();
+    expect(isCollection(component.text)).toBe(false);
+    expect(component.text instanceof Observed).toBe(true);
   });
 
   it('should unwrap observed value', () => {
@@ -131,11 +131,11 @@ describe('Observe Collection', () => {
   });
 
   it('should create an observed collection', () => {
-    expect(isCollection({})).toBeFalse();
-    expect(isCollection([])).toBeFalse();
-    expect(isCollection(component.state)).toBeTrue();
-    expect(component.text instanceof Observed).toBeTrue();
-    expect(component.values.text instanceof Observed).toBeTrue();
+    expect(isCollection({})).toBe(false);
+    expect(isCollection([])).toBe(false);
+    expect(isCollection(component.state)).toBe(true);
+    expect(component.text instanceof Observed).toBe(true);
+    expect(component.values.text instanceof Observed).toBe(true);
   });
 
   it('should unwrap observed value', () => {
@@ -173,3 +173,5 @@ describe('Observe Collection', () => {
     expect(service['hooks'].size).toBe(1);
   });
 });
+
+// Could not find a way to test zoneless implementation yet

projects/ng-observe/src/lib/ng-observe.ts

@@ -1,5 +1,12 @@
-import type { OnDestroy } from '@angular/core';
-import { ChangeDetectorRef, Inject, Injectable, InjectionToken } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Inject,
+  Injectable,
+  InjectionToken,
+  NgZone,
+  OnDestroy,
+  Optional,
+} from '@angular/core';
 import { isObservable, Observable, Subscription } from 'rxjs';
 
 export const HASH_FN = new InjectionToken<HashFn>('HASH_FN', {
@@ -13,7 +20,7 @@ const BRAND = '__ngObserve__';
 @Injectable()
 export class ObserveService implements OnDestroy {
   private hooks = new Map<string | number, () => void>();
-  private noop = () => {};
+  private detectChanges = () => this.cdRef.detectChanges();
 
   collection: ObserveCollectionFn = (sources, options = {} as any) => {
     const sink: any = Array.isArray(sources) ? [] : {};
@@ -44,7 +51,15 @@ export class ObserveService implements OnDestroy {
     return toValue(sink, 'value');
   };
 
-  constructor(private cdRef: ChangeDetectorRef, @Inject(HASH_FN) private hash: HashFn) {}
+  constructor(
+    private cdRef: ChangeDetectorRef,
+    @Inject(HASH_FN) private hash: HashFn,
+    @Optional() zone: NgZone
+  ) {
+    if (zone instanceof NgZone) {
+      this.detectChanges = () => this.cdRef.markForCheck();
+    }
+  }
 
   private createUniqueId(key: string | number | symbol): string {
     try {
@@ -61,9 +76,10 @@ export class ObserveService implements OnDestroy {
       { uniqueId = this.createUniqueId(key), errorHandler = () => {} }: ObserveValueOptions = {}
     ) => {
       let subscription = new Subscription();
+      const noop = () => {};
       const unsubscribe = () => subscription.unsubscribe();
       const complete = () => {
-        (this.hooks.get(uniqueId) || this.noop)();
+        (this.hooks.get(uniqueId) || noop)();
         this.hooks.delete(uniqueId);
       };
 
@@ -74,7 +90,7 @@ export class ObserveService implements OnDestroy {
       subscription = source.subscribe({
         next: x => {
           sink[key] = x;
-          this.cdRef.markForCheck();
+          this.detectChanges();
         },
         error: errorHandler,
         complete,
@@ -133,21 +149,15 @@ type Observe = <Value>(
 
 export type ObservableCollection<Collection> = Collection extends Array<infer Value>
   ? Array<Observable<Value>>
-  : {
-      [Key in keyof Collection]: Observable<Collection[Key]>;
-    };
+  : { [Key in keyof Collection]: Observable<Collection[Key]> };
 
 export type ObserveCollectionOptions<Collection> = Collection extends Array<any>
   ? Array<ObserveValueOptions>
-  : {
-      [Key in keyof Collection]?: ObserveValueOptions;
-    };
+  : { [Key in keyof Collection]?: ObserveValueOptions };
 
 export type ObservedValues<Collection> = Collection extends Array<infer Value>
   ? Array<Observed<Value>>
-  : {
-      [Key in keyof Collection]: Observed<Collection[Key]>;
-    };
+  : { [Key in keyof Collection]: Observed<Collection[Key]> };
 
 export interface ObserveValueOptions {
   errorHandler?: (err: any) => void;

projects/ng-observe/tsconfig.lib.json

@@ -8,18 +8,12 @@
     "declarationMap": true,
     "inlineSources": true,
     "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
+    "lib": ["dom", "es2018"]
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "enableResourceInlining": true
   },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
+  "exclude": ["**/*.spec.ts"]
 }

projects/ng-observe/tsconfig.spec.json

@@ -3,15 +3,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jest"],
+    "emitDecoratorMetadata": true
   },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
 }

tsconfig.json

@@ -19,7 +19,8 @@
     "importHelpers": true,
     "target": "es2015",
     "module": "es2020",
-    "lib": ["es2018", "dom"]
+    "lib": ["es2018", "dom"],
+    "types": ["jest"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,