Use ng packagr for angular plugin (#223)

* Update angular-imask (#212) * Update angular-imask * Fix build * Fix build * Remove unused angularCompilerOptions * Remove tslib * Update README.md * update deps * fix angular plugin build * angular: fix umd Id * fix angular plugin build
uNmAnNeR · Jul 31, 2019 · ca06717 · ca06717
1 parent f103ced
commit ca06717
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 67 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/angular-imask/.npmignore b/packages/angular-imask/.npmignore
@@ -3,3 +3,4 @@
 !README.md
 !dist
 !dist/**/*
+dist/package.json
diff --git a/packages/angular-imask/ng-package.json b/packages/angular-imask/ng-package.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist",
+  "lib": {
+    "entryFile": "src/index.ts",
+    "umdModuleIds": {
+      "imask": "IMask"
+    }
+  },
+  "whitelistedNonPeerDependencies": ["imask"]
+}
diff --git a/packages/angular-imask/package.json b/packages/angular-imask/package.json
@@ -4,12 +4,12 @@
   "license": "MIT",
   "version": "5.1.8",
   "description": "Angular IMask Plugin",
-  "main": "dist/angular-imask.umd.js",
+  "main": "dist/bundles/angular-imask.umd.js",
   "repository": "https://github.com/uNmAnNeR/imaskjs/tree/master/packages/angular-imask",
-  "module": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "module": "dist/fesm5/angular-imask.js",
+  "typings": "dist/angular-imask.d.ts",
   "scripts": {
-    "build": "rimraf dist && ngc && rollup -c"
+    "build": "ng-packagr --config tsconfig.json"
   },
   "keywords": [
     "angular",
@@ -19,23 +19,31 @@
     "mask"
   ],
   "peerDependencies": {
-    "@angular/common": ">=4.0.0",
-    "@angular/core": ">=4.0.0",
-    "@angular/forms": ">=4.0.0",
-    "@angular/platform-browser": ">=4.0.0"
+    "@angular/common": ">=6.0.0",
+    "@angular/core": ">=6.0.0",
+    "@angular/forms": ">=6.0.0",
+    "@angular/platform-browser": ">=6.0.0"
   },
   "devDependencies": {
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/compiler-cli": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "rimraf": "^2.6.2",
-    "rxjs": "^5.5.3",
-    "typescript": "^3.5.2"
+    "@angular/common": "^8.1.2",
+    "@angular/compiler": "^8.1.2",
+    "@angular/compiler-cli": "^8.1.2",
+    "@angular/core": "^8.1.2",
+    "@angular/forms": "^8.1.2",
+    "@angular/platform-browser": "^8.1.2",
+    "ng-packagr": "^5.3.0",
+    "rxjs": "^6.5.2",
+    "tsickle": "^0.36.0",
+    "typescript": "<3.5.0",
+    "zone.js": "^0.9.1"
   },
   "dependencies": {
     "imask": "file:../imask"
-  }
+  },
+  "es2015": "dist/fesm2015/angular-imask.js",
+  "esm5": "dist/esm5/angular-imask.js",
+  "esm2015": "dist/esm2015/angular-imask.js",
+  "fesm5": "dist/fesm5/angular-imask.js",
+  "fesm2015": "dist/fesm2015/angular-imask.js",
+  "metadata": "dist/angular-imask.metadata.json"
 }
diff --git a/packages/angular-imask/rollup.config.js b/packages/angular-imask/rollup.config.js
diff --git a/packages/angular-imask/src/imask.directive.ts b/packages/angular-imask/src/imask.directive.ts
@@ -1,7 +1,7 @@
 import {
   Directive, ElementRef, Input, Output, forwardRef, Provider, Renderer2,
   EventEmitter, OnDestroy, OnChanges, AfterViewInit,
-  Optional, Inject
+  Optional, Inject, SimpleChanges,
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor, COMPOSITION_BUFFER_MODE } from '@angular/forms';
 import { ɵgetDOM as getDOM } from '@angular/platform-browser';
@@ -20,7 +20,7 @@ export const MASKEDINPUT_VALUE_ACCESSOR: Provider = {
   multi: true
 };
 
-const DEFAULT_IMASK_ELEMENT = elementRef => elementRef.nativeElement;
+const DEFAULT_IMASK_ELEMENT = (elementRef: any) => elementRef.nativeElement;
 @Directive({
   selector: '[imask]',
   host: {
@@ -32,15 +32,15 @@ const DEFAULT_IMASK_ELEMENT = elementRef => elementRef.nativeElement;
   providers: [MASKEDINPUT_VALUE_ACCESSOR]
 })
 export class IMaskDirective<Opts extends IMask.AnyMaskedOptions> implements ControlValueAccessor, AfterViewInit, OnDestroy, OnChanges {
-  maskRef: IMask.InputMask<Opts>;
+  maskRef?: IMask.InputMask<Opts>;
   onTouched: any;
   onChange: any;
-  private _viewInitialized;
-  private _composing;
-  private _writingValue;
-  private _writing;
+  private _viewInitialized: boolean;
+  private _composing: boolean;
+  private _writingValue: any;
+  private _writing: boolean;
 
-  @Input() imask: Opts;
+  @Input() imask?: Opts;
   @Input() unmask?: boolean|'typed';
   @Input() imaskElement: (elementRef: ElementRef, directiveRef: any) => IMask.MaskElement;
   @Output() accept: EventEmitter<any>;
@@ -49,7 +49,7 @@ export class IMaskDirective<Opts extends IMask.AnyMaskedOptions> implements Cont
   constructor(private _elementRef: ElementRef,
               private _renderer: Renderer2,
               @Optional() @Inject(COMPOSITION_BUFFER_MODE) private _compositionMode: boolean) {
-    // init here to support AOT
+    // init here to support AOT (TODO may be will work with ng-packgr - need to check)
     this.onTouched = () => {};
     this.onChange = () => {};
     this.imaskElement = DEFAULT_IMASK_ELEMENT;
@@ -92,7 +92,7 @@ export class IMaskDirective<Opts extends IMask.AnyMaskedOptions> implements Cont
     this._viewInitialized = true;
   }
 
-  ngOnChanges(changes) {
+  ngOnChanges(changes: SimpleChanges) {
     if (changes.elementRef && !this.imaskElement) this.imaskElement = DEFAULT_IMASK_ELEMENT;
 
     if (!changes.imask || !this._viewInitialized) return;
@@ -164,7 +164,7 @@ export class IMaskDirective<Opts extends IMask.AnyMaskedOptions> implements Cont
   }
 
   private initMask () {
-    this.maskRef = IMask(this.element, this.imask)
+    this.maskRef = IMask(this.element, this.imask as Opts)
       .on('accept', this._onAccept.bind(this))
       .on('complete', this._onComplete.bind(this));
   }

diff --git a/packages/angular-imask/tsconfig.json b/packages/angular-imask/tsconfig.json
@@ -1,31 +1,30 @@
 {
   "compilerOptions": {
+    "outDir": "dist",
+    "target": "es2015",
     "module": "es2015",
-    "target": "es5",
     "moduleResolution": "node",
+    "declaration": true,
     "sourceMap": true,
+    "inlineSources": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "stripInternal": true,
-    "declaration": true,
-    "outDir": "dist",
-    "lib": ["es2015", "dom"],
+    "strict": true,
     "baseUrl": ".",
     "paths": {
       "@angular/*": ["node_modules/@angular/*"],
       "rxjs/*": ["node_modules/rxjs/*"],
       "imask": ["../imask"]
-    }
+    },
+    "types": [],
+    "lib": ["dom", "es2018"]
   },
-  "files": [
-    "src/index.ts"
-  ],
   "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
     "skipTemplateCodegen": true,
-    "skipMetadataEmit": false,
-    "strictMetadataEmit" : true,
-    "annotationsAs": "decorators"
+    "strictMetadataEmit": true,
+    "strictInjectionParameters": true
   }
 }
diff --git a/packages/imask/package-lock.json b/packages/imask/package-lock.json