Update to angular 15 (close #111, close #107)

diprokon · Feb 20, 2023 · f3adbaf · f3adbaf
1 parent 1c9c27a
commit f3adbaf
Show file tree

Hide file tree

Showing 25 changed files with 3,470 additions and 3,588 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Support for Angular and Angular Material 15 ([#107](https://github.com/diprokon/ng-table-virtual-scroll/issues/107), [#111](https://github.com/diprokon/ng-table-virtual-scroll/issues/111))
+
+### Removed
+
+- Support for Angular 14 and less
+
 ## [1.5.1] - 2023-02-18
 
 ### Fixed

diff --git a/README.md b/README.md
@@ -25,10 +25,14 @@ An Angular Directive, which allow to use [virtual scrolling](https://material.an
 $ npm install -save ng-table-virtual-scroll
 ```
 
-_For angular version 12 (or less), please use library version __1.3.\*___
-```bash
-$ npm install -save [email protected].*
-```
+_**Version compatibility**_
+
+| Angular version | Library version |
+|-----------------|-----------------|
+| \>= 15          | latest          |
+| 13 - 14         | 1.5.*           |
+| <= 12           | 1.3.*           |
+
 
 <a name="usage"/>
 

diff --git a/angular.json b/angular.json
@@ -140,6 +140,8 @@
     }
   },
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }
diff --git a/package.json b/package.json
@@ -37,17 +37,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.3.8",
-    "@angular/cdk": "^13.3.7",
-    "@angular/common": "^13.3.8",
-    "@angular/compiler": "^13.3.8",
-    "@angular/core": "^13.3.8",
-    "@angular/forms": "^13.3.8",
-    "@angular/material": "^13.3.7",
-    "@angular/platform-browser": "^13.3.8",
-    "@angular/platform-browser-dynamic": "^13.3.8",
-    "@angular/router": "^13.3.8",
-    "@stackblitz/sdk": "^1.6.0",
+    "@angular/animations": "^15.1.4",
+    "@angular/cdk": "^15.1.4",
+    "@angular/common": "^15.1.4",
+    "@angular/compiler": "^15.1.4",
+    "@angular/core": "^15.1.4",
+    "@angular/forms": "^15.1.4",
+    "@angular/material": "^15.1.4",
+    "@angular/platform-browser": "^15.1.4",
+    "@angular/platform-browser-dynamic": "^15.1.4",
+    "@angular/router": "^15.1.4",
+    "@stackblitz/sdk": "^1.8.2",
     "highlight.js": "^11.5.1",
     "ngx-highlightjs": "^6.1.2",
     "raw-loader": "^4.0.2",
@@ -56,27 +56,27 @@
     "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^13.1.0",
-    "@angular-builders/jest": "^13.0.4",
-    "@angular-devkit/build-angular": "^13.3.5",
-    "@angular-eslint/builder": "13.5.0",
-    "@angular-eslint/eslint-plugin": "13.5.0",
-    "@angular-eslint/eslint-plugin-template": "13.5.0",
-    "@angular-eslint/schematics": "13.5.0",
-    "@angular-eslint/template-parser": "13.5.0",
-    "@angular/cli": "^13.3.5",
-    "@angular/compiler-cli": "^13.3.8",
-    "@angular/language-service": "^13.3.8",
-    "@types/jest": "^27.5.1",
+    "@angular-builders/custom-webpack": "^15.0.0",
+    "@angular-builders/jest": "^15.0.0",
+    "@angular-devkit/build-angular": "^15.1.5",
+    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/template-parser": "15.2.1",
+    "@angular/cli": "^15.1.5",
+    "@angular/compiler-cli": "^15.1.4",
+    "@angular/language-service": "^15.1.4",
+    "@types/jest": "^29.4.0",
     "@types/node": "^14.18.1",
-    "@typescript-eslint/eslint-plugin": "5.27.1",
-    "@typescript-eslint/parser": "5.27.1",
-    "cypress": "^12.3.0",
-    "eslint": "^8.17.0",
-    "jest": "^27.5.1",
-    "jest-preset-angular": "^11.1.2",
-    "ng-packagr": "^13.3.1",
-    "ts-node": "~10.7.0",
-    "typescript": "~4.6.*"
+    "@typescript-eslint/eslint-plugin": "5.52.0",
+    "@typescript-eslint/parser": "5.52.0",
+    "cypress": "^12.5.1",
+    "eslint": "^8.34.0",
+    "jest": "^29.4.3",
+    "jest-preset-angular": "^12.2.6",
+    "ng-packagr": "^15.1.2",
+    "ts-node": "~10.9.1",
+    "typescript": "~4.8.*"
   }
 }
diff --git a/projects/demo-page/src/app/app.component.html b/projects/demo-page/src/app/app.component.html
@@ -2,7 +2,7 @@
 
 <div class="main-wrapper">
   <div class="main-content docs">
-    <nav mat-tab-nav-bar>
+    <nav mat-tab-nav-bar [tabPanel]="tabPanel">
       <a mat-tab-link
          *ngFor="let link of navLinks"
          [routerLink]="link.path"
@@ -12,6 +12,8 @@
         {{link.label}}
       </a>
     </nav>
-    <router-outlet></router-outlet>
+    <mat-tab-nav-panel #tabPanel>
+      <router-outlet></router-outlet>
+    </mat-tab-nav-panel>
   </div>
 </div>
diff --git a/projects/demo-page/src/app/code-example/code-example.component.ts b/projects/demo-page/src/app/code-example/code-example.component.ts
@@ -1,7 +1,7 @@
-import { Component, ComponentFactoryResolver, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
-import { Example } from '../examples';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { Component, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import {Clipboard} from '@angular/cdk/clipboard';
+import { Example } from '../examples';
 import { StackblitzService } from '../services';
 
 @Component({
@@ -36,16 +36,14 @@ export class CodeExampleComponent implements OnInit {
   ];
 
   constructor(
-    private factoryResolver: ComponentFactoryResolver,
     private snackbar: MatSnackBar,
     private clipboard: Clipboard,
     private stackblitzService: StackblitzService,
   ) {
   }
 
   ngOnInit() {
-    const factory = this.factoryResolver.resolveComponentFactory(this.example.component);
-    this.container.createComponent(factory);
+    this.container.createComponent(this.example.component);
   }
 
   copySource(text: string) {

diff --git a/projects/demo-page/src/app/examples/index.ts b/projects/demo-page/src/app/examples/index.ts
@@ -1,3 +1,4 @@
+import { Type } from '@angular/core';
 import { BaseExampleComponent } from './base-example/base-example.component';
 import { CdkExampleComponent } from './cdk-example/cdk-example.component';
 import { FilterSortSelectExampleComponent } from './filter-sort-select-example/filter-sort-select-example.component';
@@ -8,15 +9,15 @@ import { StickyExampleComponent } from './sticky-example/sticky-example.componen
 export * from './examples.module';
 
 export interface Example {
-  component: any;
+  component: Type<any>;
   ts: string;
   html: string;
   css: string;
   name: string;
   title: string;
 }
 
-function getExample(title: string, component, name: string): Example {
+function getExample(title: string, component: Type<any>, name: string): Example {
   return {
     title,
     name,

diff --git a/projects/demo-page/src/app/overview/overview.component.html b/projects/demo-page/src/app/overview/overview.component.html
@@ -1,5 +1,7 @@
 <p>
-  The <code>ng-table-virtual-scroll</code> package provides an opportunity to use <a href="https://material.angular.io" target="_blank">Angular Material </a>
+  The <code>ng-table-virtual-scroll</code> package provides an opportunity to use <a href="https://material.angular.io"
+                                                                                     target="_blank">Angular
+  Material </a>
   <a href="https://material.angular.io/cdk/scrolling" target="_blank"><code>cdk-virtual-scroll-viewport</code></a> with
   <a href="https://material.angular.io/components/table" target="_blank"><code>mat-table</code></a>
 </p>
@@ -11,11 +13,35 @@ <h3>Installation</h3>
   <br>
   <code>$ npm install -save ng-table-virtual-scroll</code>
 </p>
-<p>
-  <small>
-    <b>Note</b>: for angular version <= 12, please use library version <code>1.3.*</code>
-  </small>
-</p>
+
+<h4>Version compatibility</h4>
+
+<table mat-table
+       [dataSource]="versionCompatibility"
+       class="mat-elevation-z2">
+  <tr mat-header-row *matHeaderRowDef="versionCompatibilityColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: versionCompatibilityColumns;"></tr>
+
+  <ng-container matColumnDef="ng">
+    <th mat-header-cell
+        *matHeaderCellDef
+        class="col-sm">Angular Version</th>
+    <td mat-cell
+        *matCellDef="let element"
+        class="col-sm">{{element[0]}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="lib">
+    <th mat-header-cell
+        *matHeaderCellDef
+        class="col-sm">Library Version</th>
+    <td mat-cell
+        *matCellDef="let element"
+        class="col-sm">{{element[1]}}</td>
+  </ng-container>
+
+</table>
+
 
 <p>
   To make it work in your project:
@@ -28,16 +54,19 @@ <h3>Installation</h3>
     <b>Note</b>: you need to install and configure
     <a href="https://material.angular.io/cdk/scrolling" target="_blank"><code>cdk-virtual-scroll-viewport</code></a>
     <b> (ScrollingModule)</b> and
-    <a href="https://material.angular.io/components/table" target="_blank"><code>mat-table</code></a> <b> (MatTableModule)</b> before.
+    <a href="https://material.angular.io/components/table" target="_blank"><code>mat-table</code></a> <b>
+    (MatTableModule)</b> before.
     <code>TableVirtualScroll</code> only make them work together properly
   </small>
 </p>
 <p>
   2) Use <code>tvsItemSize</code> directive on <code>&lt;cdk-virtual-scroll-viewport&gt;</code>
 </p>
 <p>
-  3) Use <code>new TableVirtualScrollDataSource()</code> as <code>[dataSource]</code> of a <code>&lt;table mat-table&gt;</code>, or
-  <code>new CdkTableVirtualScrollDataSource()</code> as <code>[dataSource]</code> of a <code>&lt;table cdk-table&gt;</code>
+  3) Use <code>new TableVirtualScrollDataSource()</code> as <code>[dataSource]</code> of a <code>&lt;table
+  mat-table&gt;</code>, or
+  <code>new CdkTableVirtualScrollDataSource()</code> as <code>[dataSource]</code> of a <code>&lt;table
+  cdk-table&gt;</code>
 </p>
 
 <h3>tvsItemSize directive</h3>
@@ -57,15 +86,17 @@ <h3>tvsItemSize directive</h3>
   <code>footerHeight</code> - the footer row height in px (default: 48)
   <br>
   <small>
-    <b>Note</b>: <code>tvsItemSize</code>/<code>headerHeight</code>/<code>footerHeight</code> properties only required for calculations - you need to style your table separately by css
+    <b>Note</b>: <code>tvsItemSize</code>/<code>headerHeight</code>/<code>footerHeight</code> properties only required
+    for calculations - you need to style your table separately by css
   </small>
 </p>
 <p>
   <code>headerEnabled</code> - is the header row in the table (default: true)
   <br>
   <code>footerEnabled</code> - is the footer row in the table (default: false)
   <br>
-  <code>bufferMultiplier</code> - the size of rendered buffer (default: 0.7). The '<code>bufferMultiplier * visibleRowsCount</code>'
+  <code>bufferMultiplier</code> - the size of rendered buffer (default: 0.7). The '<code>bufferMultiplier *
+  visibleRowsCount</code>'
   number of rows will be rendered before and after visible part of the table
 </p>
 
@@ -78,5 +109,6 @@ <h3>VirtualTableDataSource</h3>
 <p>
   The <code>tvsItemSize</code> requires the <code>VirtualTableDataSource</code> to be provide as <code>mat-table[dataSource]</code>
   (<code>CdkTableVirtualScrollDataSource</code> for <code>cdk-table[dataSource]</code>) .
-  It is the same as the <code>MatTableDataSource</code>, but with few adjustments which was made so the virtual scroll could work.
+  It is the same as the <code>MatTableDataSource</code>, but with few adjustments which was made so the virtual scroll
+  could work.
 </p>
diff --git a/projects/demo-page/src/app/overview/overview.component.ts b/projects/demo-page/src/app/overview/overview.component.ts
@@ -21,4 +21,11 @@ export class AppModule { }
 })
 export class OverviewComponent {
   snippets = snippets;
+
+  versionCompatibilityColumns = ['ng', 'lib'];
+  versionCompatibility = Object.entries({
+    '\>= 15': 'latest',
+    '13 - 14': '1.5.*',
+    '<= 12': '1.3.*'
+  });
 }
diff --git a/projects/demo-page/src/app/services/stackblitz.service.ts b/projects/demo-page/src/app/services/stackblitz.service.ts
@@ -1,9 +1,9 @@
-import { Inject, Injectable } from '@angular/core';
+import { APP_BASE_HREF } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
 import stackBlitzSDK from '@stackblitz/sdk';
 import { Example } from '../examples';
 import { Utils } from '../utils';
-import { APP_BASE_HREF } from '@angular/common';
 
 function trimEndSlash(url: string): string {
   if (url[url.length - 1] === '/') {
@@ -14,14 +14,8 @@ function trimEndSlash(url: string): string {
 
 const templatePath = '/assets/stackblitz/';
 const templateFiles = [
-  '.editorconfig',
-  '.gitignore',
   'angular.json',
-  '.browserslistrc',
   'package.json',
-  'tsconfig.json',
-  'tsconfig.app.json',
-  'tslint.json',
   'src/index.html',
   'src/styles.scss',
   'src/polyfills.ts',
@@ -32,6 +26,10 @@ const replaceFilesPath = [
   'src/index.html',
 ];
 
+function getFilePath(example: Example, ext: 'ts' | 'css' | 'html') {
+  return `src/app/${example.name}.component.${ext}`;
+}
+
 
 @Injectable({
   providedIn: 'root'
@@ -47,18 +45,22 @@ export class StackblitzService {
   }
 
   open(example: Example): void {
-    stackBlitzSDK.openProject({
-      files: this.getFiles(example),
-      title: 'ng-table-virtual-scroll | ' + example.title,
-      description: example.title,
-      template: 'angular-cli',
-      tags: ['angular', 'material', 'virtual scroll', 'table', 'ng-table-virtual-scroll'],
-      dependencies: {
-        '@angular/cdk': '^11.2.5',
-        '@angular/material': '^11.2.5',
-        'ng-table-virtual-scroll': '*'
+    stackBlitzSDK.openProject(
+      {
+        files: this.getFiles(example),
+        title: 'ng-table-virtual-scroll | ' + example.title,
+        description: example.title,
+        template: 'angular-cli',
+        dependencies: {
+          '@angular/cdk': '*',
+          '@angular/material': '*',
+          'ng-table-virtual-scroll': '*'
+        }
       },
-    });
+      {
+        openFile: [getFilePath(example, 'ts'), getFilePath(example, 'html')]
+      }
+    );
   }
 
   private setFiles(): void {
@@ -72,8 +74,8 @@ export class StackblitzService {
   }
 
   private getFiles(example: Example): { [path: string]: string } {
-    const exampleFiles = ['ts', 'css', 'html'].reduce((files, ext) => {
-      files[`src/app/${example.name}.component.${ext}`] = example[ext];
+    const exampleFiles = (['ts', 'css', 'html'] as const).reduce((files, ext) => {
+      files[getFilePath(example, ext)] = example[ext];
       return files;
     }, {});
     const replacedFiles = replaceFilesPath.reduce((files, path) => {