feat: add watch and buildAsObservable methods (#982)

At the moment, when doing having `watch`, the `build` promise will never get resolved due to that the observable never completes.

Exposing an observable sequence makes it also easier for consumers to `close` the `watch` and do more when an observable pipeline.

Author: alan-agius4

.gitignore

@@ -68,3 +68,6 @@ jspm_packages/
 .ng_build/
 .ng_pkg_build/
 dist/
+
+# Tests
+.tmp

integration/tsconfig.specs.json

@@ -2,7 +2,7 @@
   "buildOnSave": false,
   "compileOnSave": false,
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
     "allowJs": true,
     "experimentalDecorators": true,
     "lib": ["es2015", "es2016"],

integration/watch/basic.spec.ts

@@ -0,0 +1,56 @@
+import { expect } from 'chai';
+import { TestHarness } from './test-harness';
+
+describe('basic', () => {
+  const harness = new TestHarness('basic');
+
+  before(async () => {
+    await harness.initialize();
+  });
+
+  afterEach(() => {
+    harness.reset();
+  });
+
+  after(() => {
+    harness.dispose();
+  });
+
+  it("should perform initial compilation when 'watch' is started", () => {
+    harness.expectDtsToMatch('public_api', /title = "hello world"/);
+    harness.expectFesm5ToContain('basic', 'title', 'hello world');
+    harness.expectFesm2015ToContain('basic', 'title', 'hello world');
+    harness.expectMetadataToContain('basic', 'metadata.title', 'hello world');
+  });
+
+  describe('when file changes', () => {
+    it('should perform a partial compilation and emit the updated files', done => {
+      harness.copyTestCase('valid-text');
+
+      harness.onComplete(() => {
+        harness.expectDtsToMatch('public_api', /title = "foo bar"/);
+        harness.expectFesm5ToContain('basic', 'title', 'foo bar');
+        harness.expectFesm2015ToContain('basic', 'title', 'foo bar');
+        harness.expectMetadataToContain('basic', 'metadata.title', 'foo bar');
+        done();
+      });
+    });
+
+    it('should recover from errors', done => {
+      harness.copyTestCase('invalid-type');
+
+      harness.onComplete(() => {
+        harness.expectDtsToMatch('public_api', /title = "foo bar"/);
+        harness.expectFesm5ToContain('basic', 'title', 'foo bar');
+        harness.expectFesm2015ToContain('basic', 'title', 'foo bar');
+        harness.expectMetadataToContain('basic', 'metadata.title', 'foo bar');
+        done();
+      });
+
+      harness.onFailure(error => {
+        harness.copyTestCase('valid-text');
+        expect(error.message).to.match(/is not assignable to type 'boolean'/);
+      });
+    });
+  });
+});

integration/watch/basic/package.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../../src/package.schema.json",
+  "name": "basic",
+  "description": "A sample library testing Angular Package Format",
+  "version": "1.0.0-pre.0",
+  "private": true,
+  "repository": "https://github.com/dherges/ng-packagr.git",
+  "peerDependencies": {
+    "@angular/core": "^4.1.2",
+    "@angular/common": "^4.1.2"
+  },
+  "ngPackage": {
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }
+}

integration/watch/basic/public_api.ts

@@ -0,0 +1,2 @@
+export { PrimaryAngularModule } from './src/primary.module';
+export const title = 'hello world';

integration/watch/basic/src/primary.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ng-component',
+  template: '<h1>Angular!</h1>'
+})
+export class PrimaryAngularComponent {}

integration/watch/basic/src/primary.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PrimaryAngularComponent } from './primary.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [PrimaryAngularComponent],
+  exports: [PrimaryAngularComponent]
+})
+export class PrimaryAngularModule {}

integration/watch/basic/test_files/invalid-type/public_api.ts

@@ -0,0 +1,2 @@
+export { PrimaryAngularModule } from './src/primary.module';
+export const title: boolean = 'foo bar';

integration/watch/basic/test_files/valid-text/public_api.ts

@@ -0,0 +1,2 @@
+export { PrimaryAngularModule } from './src/primary.module';
+export const title = 'foo bar';

integration/watch/test-harness.ts

@@ -0,0 +1,121 @@
+import * as fs from 'fs-extra';
+import * as sinon from 'sinon';
+import * as path from 'path';
+import * as log from '../../src/lib/util/log';
+import { expect } from 'chai';
+import { Subscription } from 'rxjs';
+import { ngPackagr } from '../../src/public_api';
+import { tap } from 'rxjs/operators';
+
+/**
+ * A testing harness class to setup the enviroment andtest the incremental builds.
+ */
+export class TestHarness {
+  private completeHandler = () => undefined;
+
+  private tmpPath = path.join(__dirname, '.tmp', this.testName);
+  private testSrc = path.join(__dirname, this.testName);
+  private ngPackagr$$: Subscription;
+
+  constructor(private testName: string) {}
+
+  initialize(): Promise<void> {
+    // the below is done in order to avoid poluting the test reporter with build logs
+    sinon.stub(log, 'msg');
+    sinon.stub(log, 'info');
+    sinon.stub(log, 'debug');
+    sinon.stub(log, 'success');
+    sinon.stub(log, 'warn');
+
+    this.emptyTestDirectory();
+    fs.copySync(this.testSrc, this.tmpPath);
+    return this.setUpNgPackagr();
+  }
+
+  dispose(): void {
+    this.reset();
+
+    if (this.ngPackagr$$) {
+      this.ngPackagr$$.unsubscribe();
+    }
+
+    this.emptyTestDirectory();
+  }
+
+  reset(): void {
+    this.completeHandler = () => undefined;
+  }
+
+  readFileSync(filePath: string, isJson = false): string | object {
+    const file = path.join(this.tmpPath, 'dist', filePath);
+    return isJson ? fs.readJsonSync(file) : fs.readFileSync(file, { encoding: 'utf-8' });
+  }
+
+  /**
+   * Copy a test case to it's temporary destination immediately.
+   */
+  copyTestCase(caseName: string) {
+    fs.copySync(path.join(this.testSrc, 'test_files', caseName), this.tmpPath);
+  }
+
+  expectFesm5ToContain(fileName: string, path: string, value: any): Chai.Assertion {
+    return expect(this.requireNoCache(`fesm5/${fileName}.js`)).to.have.nested.property(path, value);
+  }
+
+  expectFesm2015ToContain(fileName: string, path: string, value: any): Chai.Assertion {
+    return expect(this.requireNoCache(`fesm2015/${fileName}.js`)).to.have.nested.property(path, value);
+  }
+
+  expectDtsToMatch(fileName: string, regexp: RegExp): Chai.Assertion {
+    return expect(this.readFileSync(`${fileName}.d.ts`)).to.match(regexp);
+  }
+
+  expectMetadataToContain(fileName: string, path: string, value: any): Chai.Assertion {
+    const data = this.readFileSync(`${fileName}.metadata.json`, true);
+    return expect(data).to.have.nested.property(path, value);
+  }
+
+  /**
+   * Gets invoked when a compilation errors without any error
+   */
+  onComplete(done: () => void): void {
+    this.completeHandler = done;
+  }
+
+  /**
+   * Gets invoked when a compilation error occuries
+   */
+  onFailure(done: (error: Error) => void): void {
+    sinon.stub(log, 'error').callsFake(done);
+  }
+
+  /**
+   * Remove the entire directory for the current test case
+   */
+  emptyTestDirectory(): void {
+    fs.emptyDirSync(this.tmpPath);
+  }
+
+  private setUpNgPackagr(): Promise<void> {
+    return new Promise(resolve => {
+      this.ngPackagr$$ = ngPackagr()
+        .forProject(path.join(this.tmpPath, 'package.json'))
+        .watch()
+        .pipe(
+          tap(() => resolve()), // we are only interested when in the first builds, that's why we are resolving it.
+          tap(() => this.completeHandler())
+        )
+        .subscribe();
+    });
+  }
+
+  private requireNoCache(modulePath: string): any {
+    const moduleFile = this.buildFilePath(modulePath);
+    delete require.cache[path.resolve(moduleFile)];
+    return require(moduleFile);
+  }
+
+  private buildFilePath(filePath: string): string {
+    return path.join(this.tmpPath, 'dist', filePath);
+  }
+}

package.json

@@ -130,8 +130,9 @@
     "integration:specs": "cross-env TS_NODE_PROJECT=integration/tsconfig.specs.json mocha --require ts-node/register \"integration/samples/*/specs/**/*.ts\"",
     "integration:consumers": "integration/consumers.sh",
     "integration:consumers:ngc": "ngc -p integration/consumers/tsc/tsconfig.json",
+    "integration:watch:specs": "cross-env TS_NODE_PROJECT=integration/tsconfig.specs.json mocha --timeout 10000 --require ts-node/register \"integration/watch/*.spec.ts\"",
     "test:specs": "cross-env TS_NODE_PROJECT=src/tsconfig.specs.json mocha --require ts-node/register \"src/**/*.spec.ts\"",
-    "test": "yarn build && yarn test:specs && yarn integration:samples && yarn integration:specs && yarn integration:consumers",
+    "test": "yarn build && yarn test:specs && yarn integration:samples && yarn integration:specs && yarn integration:watch:specs && yarn integration:consumers",
     "commitmsg": "commitlint -e",
     "precommit": "pretty-quick --staged",
     "gh-pages": "gh-pages -d docs/ghpages"

src/lib/ng-v5/package.transform.ts

@@ -1,4 +1,4 @@
-import { Observable, concat as concatStatic, from as fromPromise, of as observableOf, pipe, EMPTY } from 'rxjs';
+import { Observable, concat as concatStatic, from as fromPromise, of as observableOf, pipe, NEVER } from 'rxjs';
 import { concatMap, map, switchMap, takeLast, tap, mapTo, catchError, startWith, debounceTime } from 'rxjs/operators';
 import { BuildGraph } from '../brocc/build-graph';
 import { DepthBuilder } from '../brocc/depth';
@@ -122,14 +122,13 @@ const watchTransformFactory = (
       );
     }),
     switchMap(graph => {
-      const { url } = graph.find(isPackage) as PackageNode;
       return observableOf(graph).pipe(
         buildTransformFactory(project, analyseSourcesTransform, entryPointTransform),
         tap(() => log.msg(CompleteWaitingForFileChange)),
         catchError(error => {
           log.error(error);
           log.msg(FailedWaitingForFileChange);
-          return EMPTY;
+          return NEVER;
         })
       );
     })

src/lib/ng-v5/packagr.ts

@@ -1,5 +1,5 @@
 import { InjectionToken, Provider, ReflectiveInjector } from 'injection-js';
-import { of as observableOf } from 'rxjs';
+import { of as observableOf, Observable } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 import { BuildGraph } from '../brocc/build-graph';
 import { Transform } from '../brocc/transform';
@@ -90,20 +90,38 @@ export class NgPackagr {
    * @return A promisified result of the transformation pipeline.
    */
   public build(): Promise<void> {
+    return this.buildAsObservable().toPromise();
+  }
+
+  /**
+   * Builds and watch for changes by kick-starting the 'watch' transform over an (initially) empty `BuildGraph``
+   *
+   * @return An observable result of the transformation pipeline.
+   */
+  public watch(): Observable<void> {
+    this.providers.push(provideOptions({ watch: true }));
+
+    return this.buildAsObservable();
+  }
+
+  /**
+   * Builds the project by kick-starting the 'build' transform over an (initially) empty `BuildGraph``
+   *
+   * @return An observable result of the transformation pipeline.
+   */
+  public buildAsObservable(): Observable<void> {
     const injector = ReflectiveInjector.resolveAndCreate(this.providers);
     const buildTransformOperator = injector.get(this.buildTransform);
 
-    return observableOf(new BuildGraph())
-      .pipe(
-        buildTransformOperator,
-        catchError(err => {
-          // Report error and re-throw to subscribers
-          log.error(err);
-          throw err;
-        }),
-        map(() => undefined)
-      )
-      .toPromise();
+    return observableOf(new BuildGraph()).pipe(
+      buildTransformOperator,
+      catchError(err => {
+        // Report error and re-throw to subscribers
+        log.error(err);
+        throw err;
+      }),
+      map(() => undefined)
+    );
   }
 }