Merge remote-tracking branch 'upstream/master'

# Conflicts:
#	projects/ngx-sub-form/src/lib/ngx-sub-form.types.ts

.travis.yml

@@ -1,22 +1,27 @@
 sudo: false
 
-dist: trusty
+dist: bionic
 
 language: node_js
 node_js:
-  - '10'
+  - '12'
 
 # https://github.com/cypress-io/cypress/issues/4069
 addons:
   apt:
     packages:
       - libgconf-2-4
+  chrome: stable
 
 cache:
   directories:
     - ~/.cache
     - node_modules
 
+before_install:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH="$HOME/.yarn/bin:$PATH"
+
 install:
   - yarn --frozen-lockfile --non-interactive --no-progress
 
@@ -28,7 +33,7 @@ script:
   - yarn run readme:check
   - yarn run lib:test:ci
   # build
-  - yarn run lib:build:prod
+  - yarn run lib:build:prod:view-engine
   - yarn run demo:build:prod --progress=false --base-href "https://cloudnc.github.io/ngx-sub-form/"
   # e2e tests
   - sed -i 's/<base href="https:\/\/cloudnc.github.io\/ngx-sub-form\/">/<base href="\/">/g' dist/ngx-sub-form-demo/index.html

README.md

@@ -29,7 +29,8 @@ Install the [npm package](https://www.npmjs.com/package/ngx-sub-form): `ngx-sub-
 _Note about the versions:_
 
 Angular <= 7: `2.7.1`  
-Angular >= 8: Latest
+Angular 8.x : `4.x`  
+Angular >= 9: Latest
 
 ## Demo
 

angular.json

@@ -17,6 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "outputPath": "dist/ngx-sub-form-demo",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -48,6 +49,10 @@
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
                 }
               ]
             }
@@ -102,6 +107,11 @@
           "options": {
             "tsConfig": "projects/ngx-sub-form/tsconfig.lib.json",
             "project": "projects/ngx-sub-form/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ngx-sub-form/tsconfig.lib.prod.json"
+            }
           }
         },
         "test": {

package.json

@@ -20,10 +20,11 @@
     "demo:lint:check": "yarn run ng lint",
     "demo:lint:fix": "yarn run demo:lint:check --fix",
     "------------------ LIB ngx-sub-form ------------------": "",
-    "lib:build:prod": "yarn run ng build --project ngx-sub-form",
-    "lib:build:watch": "yarn run lib:build:prod --watch",
+    "lib:build:prod:ivy": "yarn run ng build --project ngx-sub-form",
+    "lib:build:prod:view-engine": "yarn run lib:build:prod:ivy --prod",
+    "lib:build:watch": "yarn run lib:build:prod:view-engine --watch",
     "lib:test:watch": "yarn run ng test --project ngx-sub-form",
-    "lib:test:ci": "yarn run ng test --project ngx-sub-form --watch false",
+    "lib:test:ci": "yarn run ng test --project ngx-sub-form --watch false --browsers=ChromeHeadless",
     "------------------ Quick Commands ------------------": "",
     "lint:fix": "yarn demo:lint:fix && yarn prettier:write",
     "semantic-release": "semantic-release",
@@ -34,56 +35,55 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "8.2.14",
-    "@angular/cdk": "8.2.3",
-    "@angular/common": "8.2.14",
-    "@angular/compiler": "8.2.14",
-    "@angular/core": "8.2.14",
-    "@angular/forms": "8.2.14",
-    "@angular/http": "7.2.15",
-    "@angular/material": "8.2.3",
-    "@angular/platform-browser": "8.2.14",
-    "@angular/platform-browser-dynamic": "8.2.14",
-    "@angular/router": "8.2.14",
-    "@types/uuid": "3.4.4",
-    "commitizen": "3.1.1",
-    "core-js": "3.1.3",
-    "fast-deep-equal": "3.0.1",
-    "rxjs": "6.5.2",
-    "uuid": "3.3.2",
-    "zone.js": "0.9.1"
+    "@angular/animations": "9.0.1",
+    "@angular/cdk": "9.0.0",
+    "@angular/common": "9.0.1",
+    "@angular/compiler": "9.0.1",
+    "@angular/core": "9.0.1",
+    "@angular/forms": "9.0.1",
+    "@angular/http": "7.2.16",
+    "@angular/material": "9.0.0",
+    "@angular/platform-browser": "9.0.1",
+    "@angular/platform-browser-dynamic": "9.0.1",
+    "@angular/router": "9.0.1",
+    "@types/uuid": "3.4.7",
+    "commitizen": "4.0.3",
+    "core-js": "3.6.4",
+    "fast-deep-equal": "3.1.1",
+    "rxjs": "6.5.4",
+    "tslib": "1.10.0",
+    "uuid": "3.4.0",
+    "zone.js": "0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.803.20",
-    "@angular-devkit/build-ng-packagr": "0.803.20",
-    "@angular/cli": "8.3.20",
-    "@angular/compiler-cli": "8.2.14",
-    "@angular/language-service": "8.2.14",
+    "@angular-devkit/build-angular": "0.900.1",
+    "@angular-devkit/build-ng-packagr": "0.900.1",
+    "@angular/cli": "9.0.1",
+    "@angular/compiler-cli": "9.0.1",
+    "@angular/language-service": "9.0.1",
     "@bahmutov/add-typescript-to-cypress": "2.1.2",
-    "@types/jasmine": "3.3.13",
-    "@types/jasminewd2": "2.0.6",
-    "@types/node": "12.0.7",
-    "codelyzer": "5.1.0",
-    "cypress": "3.2.0",
-    "cz-conventional-changelog": "2.1.0",
-    "embedme": "1.6.0",
+    "@types/jasmine": "3.5.5",
+    "@types/jasminewd2": "2.0.8",
+    "@types/node": "13.7.2",
+    "codelyzer": "5.2.1",
+    "cypress": "4.0.2",
+    "cz-conventional-changelog": "3.1.0",
+    "embedme": "1.20.0",
     "http-server-spa": "1.3.0",
-    "jasmine-core": "3.4.0",
+    "jasmine-core": "3.5.0",
     "jasmine-spec-reporter": "4.2.1",
-    "karma": "4.1.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.5",
-    "karma-jasmine": "2.0.1",
-    "karma-jasmine-html-reporter": "1.4.2",
-    "ng-packagr": "5.7.1",
+    "karma": "4.4.1",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage-istanbul-reporter": "2.1.1",
+    "karma-jasmine": "3.1.1",
+    "karma-jasmine-html-reporter": "1.5.2",
+    "ng-packagr": "9.0.1",
     "prettier": "1.19.1",
-    "semantic-release": "15.13.12",
-    "ts-node": "8.2.0",
+    "semantic-release": "17.0.4",
+    "ts-node": "8.6.2",
     "tsconfig-paths-webpack-plugin": "3.2.0",
-    "tsickle": "0.35.0",
-    "tslib": "1.10.0",
-    "tslint": "5.17.0",
-    "typescript": "3.4.5"
+    "tslint": "6.0.0",
+    "typescript": "3.7.5"
   },
   "repository": {
     "type": "git",

projects/ngx-sub-form/package.json

@@ -6,8 +6,8 @@
     "fast-deep-equal": "^3.0.1"
   },
   "peerDependencies": {
-    "@angular/common": "^8.0.0",
-    "@angular/core": "^8.0.0"
+    "@angular/common": "^9.0.0",
+    "@angular/core": "^9.0.0"
   },
   "keywords": [
     "Angular",

projects/ngx-sub-form/src/lib/ngx-automatic-root-form.component.spec.ts

@@ -112,7 +112,10 @@ describe(`NgxAutomaticRootFormComponent`, () => {
     componentFixture.detectChanges();
 
     setTimeout(() => {
-      expect(vehicleUpdatedSpy).toHaveBeenCalledWith(getNewCorrectValues());
+      // todo: after upgrading to ng 9 + all the deps the following
+      // is typed from chai instead of jasmine and it triggers errors
+      // it shouldn't block the new release though
+      (expect(vehicleUpdatedSpy) as any).toHaveBeenCalledWith(getNewCorrectValues());
       done();
     }, 0);
   });
@@ -125,13 +128,19 @@ describe(`NgxAutomaticRootFormComponent`, () => {
     componentFixture.detectChanges();
 
     setTimeout(() => {
-      expect(vehicleUpdatedSpy).not.toHaveBeenCalled();
+      // todo: after upgrading to ng 9 + all the deps the following
+      // is typed from chai instead of jasmine and it triggers errors
+      // it shouldn't block the new release though
+      (expect(vehicleUpdatedSpy) as any).not.toHaveBeenCalled();
 
       componentForm.formGroupControls.crewMemberCount.setValue(MAX_CREW_MEMBER_COUNT);
       // shouldn't require to call `componentForm.manualSave()`!
 
       setTimeout(() => {
-        expect(vehicleUpdatedSpy).toHaveBeenCalledWith({
+        // todo: after upgrading to ng 9 + all the deps the following
+        // is typed from chai instead of jasmine and it triggers errors
+        // it shouldn't block the new release though
+        (expect(vehicleUpdatedSpy) as any).toHaveBeenCalledWith({
           ...getNewIncorrectValues(),
           crewMemberCount: MAX_CREW_MEMBER_COUNT,
         });

projects/ngx-sub-form/src/lib/ngx-automatic-root-form.component.ts

@@ -1,6 +1,8 @@
-import { OnInit } from '@angular/core';
+import { OnInit, Directive } from '@angular/core';
 import { NgxRootFormComponent } from './ngx-root-form.component';
 
+@Directive()
+// tslint:disable-next-line: directive-class-suffix
 export abstract class NgxAutomaticRootFormComponent<ControlInterface, FormInterface = ControlInterface>
   extends NgxRootFormComponent<ControlInterface, FormInterface>
   implements OnInit {

projects/ngx-sub-form/src/lib/ngx-root-form.component.ts

@@ -1,10 +1,12 @@
-import { EventEmitter, OnInit, Input } from '@angular/core';
+import { EventEmitter, OnInit, Input, Component, Directive } from '@angular/core';
 import isEqual from 'fast-deep-equal';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
 import { NgxSubFormRemapComponent } from './ngx-sub-form.component';
 import { takeUntilDestroyed, isNullOrUndefined } from './ngx-sub-form-utils';
 
+@Directive()
+// tslint:disable-next-line: directive-class-suffix
 export abstract class NgxRootFormComponent<ControlInterface, FormInterface = ControlInterface>
   extends NgxSubFormRemapComponent<ControlInterface, FormInterface>
   implements OnInit {

projects/ngx-sub-form/src/lib/ngx-sub-form.component.ts

@@ -1,4 +1,4 @@
-import { OnDestroy } from '@angular/core';
+import { OnDestroy, Directive, Component } from '@angular/core';
 import {
   AbstractControl,
   AbstractControlOptions,
@@ -36,6 +36,8 @@ type FilterControlFunction<FormInterface> = (
   isCtrlWithinFormArray: boolean,
 ) => boolean;
 
+@Directive()
+// tslint:disable-next-line: directive-class-suffix
 export abstract class NgxSubFormComponent<ControlInterface, FormInterface = ControlInterface>
   implements ControlValueAccessor, Validator, OnDestroy, OnFormUpdate<FormInterface> {
   public get formGroupControls(): ControlsType<FormInterface> {
@@ -425,6 +427,8 @@ export abstract class NgxSubFormComponent<ControlInterface, FormInterface = Cont
   }
 }
 
+@Directive()
+// tslint:disable-next-line: directive-class-suffix
 export abstract class NgxSubFormRemapComponent<ControlInterface, FormInterface> extends NgxSubFormComponent<
   ControlInterface,
   FormInterface

projects/ngx-sub-form/src/lib/ngx-sub-form.types.spec.ts

@@ -0,0 +1,14 @@
+import { FormControl, FormGroup } from '@angular/forms';
+import { TypedFormGroup } from 'ngx-sub-form';
+
+describe(`TypedFormGroup`, () => {
+  it(`should be assignable to the base @angular/forms FormGroup`, () => {
+    let formGroup: FormGroup;
+
+    const typedFormGroup = new FormGroup({ foo: new FormControl() }) as TypedFormGroup<{ foo: true }>;
+
+    formGroup = typedFormGroup;
+
+    expect(true).toBe(true); // this is a type-only test, if the type breaks the test will not compile
+  });
+});

projects/ngx-sub-form/src/lib/ngx-sub-form.types.ts

@@ -5,7 +5,6 @@ import {
   ArrayPropertyValue,
   Controls,
   FormUpdate,
-  ControlsType,
   TypedFormGroup,
 } from './ngx-sub-form-utils';
 
@@ -15,7 +14,6 @@ export interface OnFormUpdate<FormInterface> {
   onFormUpdate?: (formUpdate: FormUpdate<FormInterface>) => void;
 }
 
-type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 type Nullable<T> = T | null;
 
 export type NullableObject<T> = { [P in keyof T]: Nullable<T[P]> };

projects/ngx-sub-form/tsconfig.lib.json

@@ -15,10 +15,9 @@
     "lib": ["dom", "es2018"]
   },
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
-    "fullTemplateTypeCheck": true,
+    "strictTemplates": true,
     "strictInjectionParameters": true,
     "enableResourceInlining": true
   },

projects/ngx-sub-form/tsconfig.lib.prod.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}

src/app/app.module.ts

@@ -2,18 +2,16 @@ import { LayoutModule } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import {
-  MatButtonModule,
-  MatCardModule,
-  MatFormFieldModule,
-  MatIconModule,
-  MatInputModule,
-  MatListModule,
-  MatSelectModule,
-  MatSidenavModule,
-  MatSlideToggleModule,
-  MatToolbarModule,
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';

src/tsconfig.app.json

@@ -4,5 +4,5 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
-  "exclude": ["test.ts", "**/*.spec.ts", "**/*.e2e.ts"]
+  "files": ["main.ts", "polyfills.ts"]
 }

tsconfig.json

@@ -5,7 +5,7 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,