Angular 16

.github/workflows/ci.yml

@@ -4,7 +4,7 @@ on:
   pull_request:
   push:
     branches:
-      - "master"
+      - 'master'
   workflow_dispatch:
     inputs:
       cause:
@@ -33,10 +33,12 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
-      - run: npm install
-      - run: npm test
+      - run: npm run ci:lib
       - run: npm run build:lib
+      - run: npm run ci:demo
       - run: npm run build:demo
+      - run: npm run ci:tests
+      - run: npm test
 
       - uses: actions/upload-artifact@master
         with:
@@ -47,7 +49,6 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
     steps:
-
       - name: Set env BRANCH
         run: echo "BRANCH=$(echo $GITHUB_REF | cut -d'/' -f 3)" >> $GITHUB_ENV
 

.github/workflows/deploy-manual.yml

@@ -17,8 +17,8 @@ jobs:
 
       - name: Install and Build 🔧
         run: |
-          npm install
-          npm run build:lib
+          npm ci:lib
+          npm ci:demo
           npm run build:demo
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@4.1.0

.gitignore

@@ -6,7 +6,7 @@
 *scroll-*.tgz
 
 # dependencies
-/node_modules
+node_modules
 
 # IDEs and editors
 /.idea

demo/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

angular.json → demo/angular.json

@@ -3,63 +3,27 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "scroller": {
-      "projectType": "library",
-      "root": "scroller",
-      "sourceRoot": "scroller/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "scroller/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "scroller/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "scroller/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "tests/_index.ts",
-            "tsConfig": "tests/tsconfig.spec.json",
-            "karmaConfig": "tests/karma.conf.js"
-          }
-        }
-      }
-    },
     "demo": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:application": {
           "strict": true
         }
       },
-      "root": "demo",
-      "sourceRoot": "demo",
+      "root": ".",
+      "sourceRoot": ".",
       "prefix": "app",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/demo",
-            "index": "demo/index.html",
-            "main": "demo/main.ts",
-            "polyfills": "demo/polyfills.ts",
-            "tsConfig": "demo/tsconfig.app.json",
-            "assets": [
-              "demo/favicon.ico",
-              "demo/assets"
-            ],
-            "styles": [
-              "demo/styles.css"
-            ],
+            "outputPath": "../dist/demo",
+            "index": "index.html",
+            "main": "main.ts",
+            "polyfills": "polyfills.ts",
+            "tsConfig": "tsconfig.json",
+            "assets": ["favicon.ico", "assets"],
+            "styles": ["styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -78,8 +42,8 @@
               ],
               "fileReplacements": [
                 {
-                  "replace": "demo/environments/environment.ts",
-                  "with": "demo/environments/environment.prod.ts"
+                  "replace": "environments/environment.ts",
+                  "with": "environments/environment.prod.ts"
                 }
               ],
               "outputHashing": "all",
@@ -110,6 +74,5 @@
         }
       }
     }
-  },
-  "defaultProject": "scroller"
+  }
 }

demo/app/samples/adapter/adapter-relax.component.ts

@@ -19,7 +19,7 @@ export class DemoAdapterRelaxComponent {
 
   datasource = new Datasource<MyItem>({
     get: (index, count, success) => {
-      const data = [];
+      const data: MyItem[] = [];
       for (let i = index; i < index + count; i++) {
         data.push({ id: i, text: 'item #' + i });
       }

demo/app/samples/adapter/append-prepend-sync.component.ts

@@ -196,7 +196,7 @@ async doAppend() {
 
   async doPrepend() {
     await this.datasource.adapter.relax();
-    const items = [];
+    const items: MyItem[] = [];
     for (let i = 0; i < this.inputPrepend; i++) {
       if (!this.increasePrepend) {
         this.MIN--;
@@ -220,7 +220,7 @@ async doAppend() {
 
   async doAppend() {
     await this.datasource.adapter.relax();
-    const items = [];
+    const items: MyItem[] = [];
     for (let i = 0; i < this.inputAppend; i++) {
       if (!this.decreaseAppend) {
         this.MAX++;

demo/app/samples/adapter/append-prepend.component.ts

@@ -32,7 +32,7 @@ export class DemoAppendPrependComponent {
 
   datasource = new Datasource<MyItem>({
     get: (index, count, success) => {
-      const data = [];
+      const data: MyItem[] = [];
       for (let i = index; i < index + count; i++) {
         data.push({ id: i, text: 'item #' + i });
       }

demo/app/samples/adapter/bof-eof.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { merge } from 'rxjs';
+import { merge, Observable } from 'rxjs';
 
 import { demos } from '../../routes';
 import {
@@ -28,7 +28,7 @@ export class DemoBofEofComponent {
     get: (index, count, success) => {
       const MIN = 1,
         MAX = 100;
-      const data = [];
+      const data: MyItem[] = [];
       const start = Math.max(MIN, index);
       const end = Math.min(index + count - 1, MAX);
       if (start <= end) {
@@ -45,7 +45,10 @@ export class DemoBofEofComponent {
 
   constructor() {
     const { eof$, bof$ } = this.datasource.adapter;
-    merge(bof$, eof$).subscribe(() => this.edgeCounter++);
+    merge(
+      bof$ as unknown as Observable<boolean>,
+      eof$ as unknown as Observable<boolean>
+    ).subscribe(() => this.edgeCounter++);
   }
 
   sources: DemoSources = [

demo/app/samples/adapter/check-size.component.ts

@@ -39,7 +39,7 @@ export class DemoCheckSizeComponent {
 
   datasource = new Datasource<MyItem>({
     get: (index, count, success) => {
-      const data = [];
+      const data: MyItem[] = [];
       for (let i = index; i < index + count; i++) {
         const found = this.data.find(item => item.id === i);
         if (found) {

demo/app/samples/adapter/first-last-visible-items.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { combineLatest } from 'rxjs';
+import { combineLatest, Observable } from 'rxjs';
 
 import { demos } from '../../routes';
 import {
@@ -8,6 +8,7 @@ import {
   DemoSourceType
 } from '../../shared/interfaces';
 import { datasourceGetCallbackInfinite } from '../../shared/datasource-get';
+import { IAdapterItem } from '../../../../scroller/src/vscroll';
 
 import { Datasource } from 'ngx-ui-scroll';
 
@@ -33,7 +34,10 @@ export class DemoFirstLastVisibleItemsComponent {
   constructor() {
     setTimeout(() => (this.init = true));
     const { firstVisible$, lastVisible$ } = this.datasource.adapter;
-    combineLatest([firstVisible$, lastVisible$]).subscribe(result => {
+    combineLatest([
+      firstVisible$ as unknown as Observable<IAdapterItem>,
+      lastVisible$ as unknown as Observable<IAdapterItem>
+    ]).subscribe(result => {
       const first = Number(result[0].$index);
       const last = Number(result[1].$index);
       this.visibleCount = !isNaN(first) && !isNaN(last) ? last - first + 1 : 0;

demo/app/samples/adapter/init.component.ts

@@ -4,6 +4,7 @@ import {
   ChangeDetectorRef
 } from '@angular/core';
 import { take } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 
 import { demos } from '../../routes';
 import {
@@ -107,9 +108,11 @@ constructor(public changeDetector: ChangeDetectorRef) {
 
   constructor(public changeDetector: ChangeDetectorRef) {
     const { adapter } = this.datasource;
-    adapter.init$.pipe(take(1)).subscribe(() => {
-      this.version = adapter.packageInfo.consumer.version;
-      this.changeDetector.detectChanges();
-    });
+    (adapter.init$ as unknown as Observable<boolean>)
+      .pipe(take(1))
+      .subscribe(() => {
+        this.version = adapter.packageInfo.consumer.version;
+        this.changeDetector.detectChanges();
+      });
   }
 }

demo/app/samples/adapter/insert.component.ts

@@ -170,7 +170,7 @@ async doInsert() {
     if (index < 0 || isNaN(count)) {
       return;
     }
-    const items = [];
+    const items: string[] = [];
     for (let i = 1; i <= count; i++) {
       this.MAX++;
       const newItem = itemData + ' ' + Array(i).fill('*').join('');
@@ -195,7 +195,7 @@ async doInsert() {
     if (index < 0 || isNaN(count)) {
       return;
     }
-    const items = [];
+    const items: string[] = [];
     for (let i = 1; i <= count; i++) {
       this.MIN2--;
       const newItem = itemData + ' ' + Array(i).fill('*').join('');

demo/app/samples/common/different-heights.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { merge } from 'rxjs';
+import { merge, Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { demos } from '../../routes';
@@ -31,8 +31,8 @@ export class DemoDifferentHeightsComponent {
 
   constructor() {
     merge(
-      this.datasourceAverage.adapter.init$,
-      this.datasourceFrequent.adapter.init$
+      this.datasourceAverage.adapter.init$ as unknown as Observable<boolean>,
+      this.datasourceFrequent.adapter.init$ as unknown as Observable<boolean>
     )
       .pipe(take(1))
       .subscribe(() => this.setupLog());
@@ -163,7 +163,7 @@ getData(index: number, count: number, isFrequent: boolean): MyItem[] {
     'Array.from({length: 100}).reduce((a, i, j) => a + j + 20 , 0) / 100; // 69.5px';
 
   getData(index: number, count: number, isFrequent: boolean): MyItem[] {
-    const data = [];
+    const data: MyItem[] = [];
     const start = Math.max(this.MIN, index);
     const end = Math.min(index + count - 1, this.MAX);
     for (let i = start; i <= end; i++) {

demo/app/samples/datasource/bidirectional-unlimited-datasource.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 import { demos } from '../../routes';
-import { DemoSources, DemoSourceType } from '../../shared/interfaces';
+import { DemoSources, DemoSourceType, MyItem } from '../../shared/interfaces';
 import { doLog } from '../../shared/datasource-get';
 
 import { IDatasource } from 'ngx-ui-scroll';
@@ -20,9 +20,9 @@ export class DemoBidirectionalUnlimitedDatasourceComponent {
 
   datasource: IDatasource = {
     get: (index, count, success) => {
-      const data = [];
+      const data: MyItem[] = [];
       for (let i = index; i <= index + count - 1; i++) {
-        data.push({ text: 'item #' + i });
+        data.push({ id: i, text: 'item #' + i });
       }
       doLog(this.demoContext, index, count, data.length);
       success(data);