Update to Angular 10 (angular-split#275)

beeman · Gregg B. Jensen · web-flow · commit d1b505ed7c7c · 2020-11-22T00:38:25.000-05:00
Co-authored-by: Gregg B. Jensen &lt;GJensen@experlogix.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+<a name="5.0.0-beta.1"></a>
+
+# 5.0.0-beta.1 (2020-09-06)
+
+- **Fix** Make type of gutterSize getter/setter consistent
+
+<a name="5.0.0-beta.0"></a>
+
+# 5.0.0-beta.0 (2020-08-30)
+
+- **Chore** Update project to Angular 10 [#256](https://github.com/angular-split/angular-split/issues/256) thanks to [greggbjensen](https://github.com/greggbjensen)!
+
 <a name="4.0.0"></a>
 
 # 4.0.0 (2020-07-24)
diff --git a/angular.json b/angular.json
@@ -10,7 +10,7 @@
       "prefix": "app",
       "schematics": {
         "@schematics/angular:component": {
-          "styleext": "scss"
+          "style": "scss"
         }
       },
       "architect": {
@@ -77,7 +77,7 @@
       "prefix": "app-lazy",
       "schematics": {
         "@schematics/angular:component": {
-          "styleext": "scss"
+          "style": "scss"
         }
       },
       "architect": {
@@ -140,7 +140,7 @@
       "prefix": "app-lazy2",
       "schematics": {
         "@schematics/angular:component": {
-          "styleext": "scss"
+          "style": "scss"
         }
       },
       "architect": {
diff --git a/cypress/integration/5.style.spec.js b/cypress/integration/5.style.spec.js
diff --git a/package.json b/package.json
@@ -27,46 +27,46 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "8.2.14",
-    "@angular/common": "8.2.14",
-    "@angular/compiler": "8.2.14",
-    "@angular/core": "8.2.14",
-    "@angular/forms": "8.2.14",
-    "@angular/platform-browser": "8.2.14",
-    "@angular/platform-browser-dynamic": "8.2.14",
-    "@angular/router": "8.2.14",
+    "@angular/animations": "10.2.3",
+    "@angular/common": "10.2.3",
+    "@angular/compiler": "10.2.3",
+    "@angular/core": "10.2.3",
+    "@angular/forms": "10.2.3",
+    "@angular/platform-browser": "10.2.3",
+    "@angular/platform-browser-dynamic": "10.2.3",
+    "@angular/router": "10.2.3",
     "angular-cli-ghpages": "^0.6.2",
     "bootstrap": "4.3.1",
     "core-js": "2.6.5",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.11",
     "lodash": "4.17.19",
-    "marked": "0.6.1",
+    "marked": "1.1.1",
     "ngx-bootstrap": "3.2.0",
     "prettier": "^2.0.5",
-    "rxjs": "6.6.0",
-    "zone.js": "0.9.1"
+    "rxjs": "6.6.2",
+    "zone.js": "0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.803.29",
-    "@angular-devkit/build-ng-packagr": "0.803.29",
-    "@angular/cli": "8.3.29",
-    "@angular/compiler-cli": "8.2.14",
-    "@angular/language-service": "8.2.14",
-    "@types/node": "10.12.3",
-    "codelyzer": "4.5.0",
-    "concurrently": "4.0.1",
+    "@angular-devkit/build-angular": "0.1002.0",
+    "@angular-devkit/build-ng-packagr": "0.1002.0",
+    "@angular/cli": "10.2.0",
+    "@angular/compiler-cli": "10.2.3",
+    "@angular/language-service": "10.2.3",
+    "@types/node": "14.0.27",
+    "codelyzer": "^6.0.0",
+    "concurrently": "5.3.0",
     "cpx": "1.5.0",
-    "cypress": "3.2.0",
-    "http-server": "0.11.1",
-    "ng-packagr": "5.7.1",
-    "npm-run-all": "4.1.3",
-    "ts-node": "7.0.1",
-    "tsickle": "0.35.0",
-    "tslib": "1.13.0",
-    "tslint": "5.11.0",
-    "typescript": "3.5.3",
-    "webpack-bundle-analyzer": "3.3.2"
+    "cypress": "4.12.1",
+    "http-server": "^0.12.3",
+    "ng-packagr": "^10.0.3",
+    "npm-run-all": "4.1.5",
+    "ts-node": "8.10.2",
+    "tsickle": "0.39.1",
+    "tslib": "^2.0.1",
+    "tslint": "~6.1.3",
+    "typescript": "3.9.7",
+    "webpack-bundle-analyzer": "3.8.0"
   },
   "husky": {
     "hooks": {
diff --git a/projects/angular-split/package.json b/projects/angular-split/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-split",
-  "version": "4.0.0",
+  "version": "5.0.0-beta.1",
   "description": "Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.",
   "author": "bertrandg",
   "repository": {
@@ -27,8 +27,11 @@
   ],
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@angular/common": ">=8.0.0",
-    "@angular/core": ">=8.0.0",
+    "@angular/common": ">=9.0.0",
+    "@angular/core": ">=9.0.0",
     "rxjs": ">=6.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
   }
 }
diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts
@@ -122,15 +122,15 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
 
   ////
 
-  private _gutterSize: number = 11
+  private _gutterSize: number | null = 11
 
   @Input() set gutterSize(v: number | null) {
     this._gutterSize = getInputPositiveNumber(v, 11)
 
     this.build(false, false)
   }
 
-  get gutterSize(): number {
+  get gutterSize(): number | null {
     return this._gutterSize
   }
 
diff --git a/projects/angular-split/tsconfig.lib.json b/projects/angular-split/tsconfig.lib.json
@@ -20,7 +20,8 @@
     "strictMetadataEmit": true,
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "enableIvy": false
   },
   "exclude": ["src/test.ts", "**/*.spec.ts"]
 }
diff --git a/src_app/.browserslistrc b/src_app/.browserslistrc
diff --git a/src_app/app/component/examples/classAccess.route.component.ts b/src_app/app/component/examples/classAccess.route.component.ts
@@ -112,7 +112,7 @@ import { AComponent } from './AComponent'
   </div>`,
 })
 export class ClassAccessComponent extends AComponent implements AfterViewInit {
-  @ViewChild(SplitComponent, { static: false }) splitEl: SplitComponent
+  @ViewChild(SplitComponent) splitEl: SplitComponent
   @ViewChildren(SplitAreaDirective) areasEl: QueryList<SplitAreaDirective>
 
   ngAfterViewInit() {
diff --git a/src_app/app/component/examples/geekDemo.route.component.ts b/src_app/app/component/examples/geekDemo.route.component.ts
@@ -166,7 +166,7 @@ import { AComponent } from './AComponent'
     </div>`,
 })
 export class GeekDemoComponent extends AComponent {
-  @ViewChild(SortableComponent, { static: false }) sortableComponent: SortableComponent
+  @ViewChild(SortableComponent) sortableComponent: SortableComponent
 
   d = {
     dir: 'horizontal',
diff --git a/src_app/app/component/examples/gutterClick.route.component.ts b/src_app/app/component/examples/gutterClick.route.component.ts
@@ -122,8 +122,8 @@ export class GutterClickComponent extends AComponent implements AfterViewInit, O
   ]
   sub: Subscription
 
-  @ViewChild('mySplit', { static: false }) mySplitEl: SplitComponent
-  @ViewChild('logs', { static: false }) logsEl: ElementRef
+  @ViewChild('mySplit') mySplitEl: SplitComponent
+  @ViewChild('logs') logsEl: ElementRef
 
   ngAfterViewInit() {
     this.sub = this.mySplitEl.dragProgress$.subscribe((data) => {
diff --git a/src_app/app/component/examples/iframe.route.component.ts b/src_app/app/component/examples/iframe.route.component.ts
@@ -56,7 +56,7 @@ import { AComponent } from './AComponent'
 })
 export class IframeComponent extends AComponent {
   showIframeHider = false
-  @ViewChild(SplitComponent, { static: false }) split: SplitComponent
+  @ViewChild(SplitComponent) split: SplitComponent
 
   dragStartHandler($event: IOutputData) {
     console.log('dragStartHandler', { event: $event })
diff --git a/src_app/app/component/examples/simple.route.component.ts b/src_app/app/component/examples/simple.route.component.ts
@@ -104,9 +104,9 @@ import { AComponent } from './AComponent'
     </div>`,
 })
 export class SimpleComponent extends AComponent {
-  @ViewChild('split', { static: false }) split: SplitComponent
-  @ViewChild('area1', { static: false }) area1: SplitAreaDirective
-  @ViewChild('area2', { static: false }) area2: SplitAreaDirective
+  @ViewChild('split') split: SplitComponent
+  @ViewChild('area1') area1: SplitAreaDirective
+  @ViewChild('area2') area2: SplitAreaDirective
 
   direction: string = 'horizontal'
   sizes = {
diff --git a/src_app/app/component/examples/sync.route.component.ts b/src_app/app/component/examples/sync.route.component.ts
@@ -44,9 +44,9 @@ import { formatDate } from '../../service/utils'
     </div>`,
 })
 export class SyncComponent extends AComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('mySplitA', { static: false }) mySplitAEl: SplitComponent
-  @ViewChild('mySplitB', { static: false }) mySplitBEl: SplitComponent
-  @ViewChild('mySplitC', { static: false }) mySplitCEl: SplitComponent
+  @ViewChild('mySplitA') mySplitAEl: SplitComponent
+  @ViewChild('mySplitB') mySplitBEl: SplitComponent
+  @ViewChild('mySplitC') mySplitCEl: SplitComponent
 
   sizes = [25, 75]
   sub: Subscription
diff --git a/src_app/app/component/examples/transitions.route.component.ts b/src_app/app/component/examples/transitions.route.component.ts
@@ -249,7 +249,7 @@ export class TransitionsComponent extends AComponent {
   }
   logMessages: Array<{ type: string; text: string }> = []
 
-  @ViewChild('logs', { static: false }) logsEl: ElementRef
+  @ViewChild('logs') logsEl: ElementRef
 
   log(e) {
     this.logMessages.push({ type: 'transitionEnd', text: `${formatDate(new Date())} > transitionEnd event > ${e}` })
diff --git a/src_app/app/component/home/home.route.component.ts b/src_app/app/component/home/home.route.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, VERSION } from '@angular/core'
 
 @Component({
   selector: 'sp-home',
@@ -33,6 +33,7 @@ import { Component } from '@angular/core'
           <img src="/assets/logo.svg" height="100" class="m-auto" alt="" />
           <h1 class="mt-3">angular-split</h1>
           <h4>Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.</h4>
+          <h5 class="mt-3 text-muted">Running on Angular v{{ version }}.</h5>
           <a href="https://www.npmjs.com/package/angular-split"
             ><img
               src="https://img.shields.io/npm/v/angular-split/latest.svg?style=flat-square"
@@ -83,6 +84,7 @@ import { Component } from '@angular/core'
   `,
 })
 export class HomeComponent {
+  version = VERSION.full
   code1 = `npm install angular-split`
 
   code2 = `import { AngularSplitModule } from 'angular-split';
diff --git a/src_lazy_app/.browserslistrc b/src_lazy_app/.browserslistrc
diff --git a/src_lazy_app2/.browserslistrc b/src_lazy_app2/.browserslistrc
diff --git a/tslint.json b/tslint.json
@@ -44,7 +44,6 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-initializer": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
     "one-line": [true, "check-open-brace", "check-catch", "check-else", "check-whitespace"],
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -122,15 +122,15 @@ export class SplitComponent implements AfterViewInit, OnDestroy {`
`122`	`122`
`123`	`123`	`////`
`124`	`124`
`125`		`- private _gutterSize: number = 11`
	`125`	`+ private _gutterSize: number \| null = 11`
`126`	`126`
`127`	`127`	`@Input() set gutterSize(v: number \| null) {`
`128`	`128`	`this._gutterSize = getInputPositiveNumber(v, 11)`
`129`	`129`
`130`	`130`	`this.build(false, false)`
`131`	`131`	`}`
`132`	`132`
`133`		`- get gutterSize(): number {`
	`133`	`+ get gutterSize(): number \| null {`
`134`	`134`	`return this._gutterSize`
`135`	`135`	`}`
`136`	`136`