dhilt · dhilt · Apr 10, 2022 · Dec 12, 2021 · Dec 12, 2021 · Dec 12, 2021
diff --git a/.editorconfig b/.editorconfig
@@ -8,6 +8,9 @@ indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.ts]
+quote_type = single
+
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false
diff --git a/.github/stale.yml b/.github/stale.yml
@@ -1,5 +1,5 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 90
+daysUntilStale: 60
 # Number of days of inactivity before a stale issue is closed
 daysUntilClose: 7
 # Issues with these labels will never be considered stale

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -4,8 +4,6 @@ on:
   push:
     branches:
       - "**"
-  pull_request:
-    branches: [ master ]
   workflow_dispatch:
     inputs:
       cause:
@@ -18,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
     steps:
       - name: Dispatched?
         if: ${{ github.event_name == 'workflow_dispatch' }}
@@ -36,13 +34,13 @@ jobs:
 
       - run: npm install
       - run: npm test
-      - run: npm run build
-      - run: npm run build-app
+      - run: npm run build:lib
+      - run: npm run build:demo
 
       - uses: actions/upload-artifact@master
         with:
-          name: my-dist
-          path: dist-app
+          name: demo-dist
+          path: dist/demo
 
   deploy:
     needs: build
@@ -72,12 +70,12 @@ jobs:
         if: env.NEED == 'true'
         uses: actions/download-artifact@master
         with:
-          name: my-dist
-          path: dist-app
+          name: demo-dist
+          path: dist-demo-app
 
       - name: Deploy
         if: env.NEED == 'true'
         uses: JamesIves/github-pages-deploy-action@4.1.0
         with:
           branch: gh-pages
-          folder: dist-app
+          folder: dist-demo-app
diff --git a/.github/workflows/deploy-manual.yml b/.github/workflows/deploy-manual.yml
@@ -1,4 +1,4 @@
-name: ngx-ui-scroll demo app manual deploy
+name: ngx-ui-scroll demo app manual deployment
 
 on:
   workflow_dispatch:
@@ -18,9 +18,10 @@ jobs:
       - name: Install and Build 🔧
         run: |
           npm install
-          npm run build-app
+          npm run build:lib
+          npm run build:demo
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@4.1.0
         with:
           branch: gh-pages
-          folder: dist-app
+          folder: dist/demo
diff --git a/.gitignore b/.gitignore
@@ -4,7 +4,6 @@
 /dist
 /dist-app
 *scroll-*.tgz
-debug.log
 
 # dependencies
 /node_modules
@@ -17,18 +16,16 @@ debug.log
 *.launch
 .settings/
 *.sublime-workspace
-
-# IDE - VSCode
 .vscode/*
 
 # misc
 /.sass-cache
 /connect.lock
 /coverage
-/libpeerconnection.log
-npm-debug.log
-testem.log
 /typings
+.angular
+*.log
+temp
 
 # System Files
 .DS_Store
@@ -41,5 +38,3 @@ firebase.json
 
 # environment
 .env
-
-temp
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Denis Hilt (https://github.com/dhilt)
+Copyright (c) 2022 Denis Hilt (https://github.com/dhilt)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/Procfile b/Procfile
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 [![ngx-ui-scroll CI](https://github.com/dhilt/ngx-ui-scroll/actions/workflows/ci.yml/badge.svg)](https://github.com/dhilt/ngx-ui-scroll/actions/workflows/ci.yml)
 [![npm version](https://badge.fury.io/js/ngx-ui-scroll.svg)](https://www.npmjs.com/package/ngx-ui-scroll)
 
-# NgxUiScroll
+# ngx-ui-scroll
 
-Unlimited bidirectional virtual scrolling over limited viewport. A directive for [Angular](https://angular.io/) framework. Built with [angular-library-starter](https://github.com/robisim74/angular-library-starter). Inspired by [angular-ui-scroll](https://github.com/angular-ui/ui-scroll) (AngularJS, since 2013). Demo is available at [dhilt.github.io/ngx-ui-scroll](https://dhilt.github.io/ngx-ui-scroll/). Since v2.0.0, the core of the ngx-ui-scroll library lives and develops as a separate zero-dependency npm package [vscroll](https://github.com/dhilt/vscroll).
+A directive for [Angular](https://angular.io/) framework to provide unlimited bidirectional virtual scrolling over limited viewport. Built on top of [vscroll](https://github.com/dhilt/vscroll) native virtual scrolling engine. Demo is available at [dhilt.github.io/ngx-ui-scroll](https://dhilt.github.io/ngx-ui-scroll/). 
 
 <p dir="rtl">
 <sub>can donate? go <b><a href="https://github.com/dhilt/ngx-ui-scroll?sponsor=1">here</a></b></sub><sub> 👉 <br>make open-source world better</sub></p>
@@ -16,20 +16,20 @@ Unlimited bidirectional virtual scrolling over limited viewport. A directive for
 - [Settings](#settings)
 - [Adapter API](#adapter-api)
 - [Development](#development)
-
 <br>
 
 <a name="compatibility" id="compatibility"></a>
 ### Compatibility
 
+The ngx-ui-scroll library has no breaking changes in its API, but there are inevitable changes in how it is built and distributed to the host app depending on the version of the Angular.
+
 |ngx-ui-scroll|Angular|compiled|support|notes|
 |:--|:--|:--|:--|:--|
 |v1|5-12|View Engine|no|no dependencies (vscroll is not extracted)|
 |v2|5-12|View Engine|maintenance|vscroll is a bundle-dependency|
 |v3|12+|Ivy|active|vscroll is a peer-dependency|
 
-So if the consumer app is view-engine compatible, you should use v2 which is in maintenance mode and under [v2-legacy](https://github.com/dhilt/ngx-ui-scroll/tree/v2-legacy) branch.
-
+So if the consumer app is view-engine compatible, you should use ngx-ui-scroll v2 which is in maintenance mode and under [v2-legacy](https://github.com/dhilt/ngx-ui-scroll/tree/v2-legacy) branch.
 
 ### Motivation
 
@@ -100,7 +100,7 @@ where the viewport is a scrollable area of finite height:
 
 If the height of the viewport is not constrained, it will pull the entire content of the datasource and no scrollbar will appear.
 
-\*uiScroll acts like \*ngFor, but the datasource is an object of special type (IDatasource). It implements method _get_ to be used by the \*uiScroll directive to access the data by _index_ and _count_ parameters. The directive calls `Datasource.get` method each time a user scrolls to the edge of visible element list. That's the API provided by the \*uiScroll directive.
+\*uiScroll acts like \*ngFor in its simplest form, where the datasource is an object of special type (IDatasource), which implements the _get_ method used by the \*uiScroll directive to access data by _index_ and _count_ parameters. The directive calls the `Datasource.get` method each time the user scrolls the list of visible elements to the edge.
 
 ```javascript
 import { IDatasource } from 'ngx-ui-scroll';
@@ -244,9 +244,8 @@ There are some npm scripts available from package.json:
 
 - `npm start` to run demo App on port 4200
 - `npm test` to run Karma tests
-- `npm run build` to build the ngx-ui-scroll module into the ./dist folder
-- `npm run pack:install` to build tar-gzipped version of package and install it locally into ./node_modules
-- `npm run build-app` to build demo App into the ./dist-app folder
+- `npm run build:lib` to build the ngx-ui-scroll module into the ./dist/scroller folder
+- `npm run build:demo` to build the demo App into the ./dist/demo folder
 
 Along with settings object the datasource implementation may include also devSettings object: 
 
@@ -269,13 +268,13 @@ The development settings are not documented. Information about it can be taken d
 Below is the quick guide for vscroll/ngx-ui-scroll integrated development (this is relevant since ngx-ui-scroll v2 depends on vscroll):
 
  - clone both ngx-ui-scroll and [vscroll](https://github.com/dhilt/vscroll) repositories into the same folder
- - replace "vscroll" import with local sources [here](https://github.com/dhilt/ngx-ui-scroll/blob/v2.0.0-rc.10/src/vscroll.ts#L17) and [here](https://github.com/dhilt/ngx-ui-scroll/blob/v2.0.0-rc.10/tests/miscellaneous/vscroll.ts#L16).
+ - replace "vscroll" import with local sources [here](https://github.com/dhilt/ngx-ui-scroll/blob/v3.0.0-rc.1/src/vscroll.ts#L19) and [here](https://github.com/dhilt/ngx-ui-scroll/blob/v3.0.0-rc.1/tests/miscellaneous/vscroll.ts#L17).
 
 Also, there are some environment variables for additional customization of the dev process. In accordance with [dotenv](https://www.npmjs.com/package/dotenv) approach, the `.env` file should be placed in the root folder, and it may contain the following variables.
 
 |Name|Value|Description|
 |:--|:----|:----------|
-|DEV_SERVER_PORT|4200|Port the dev server (webpack) will use. Need to run `npm run start-env` instead of `npm run` to make this setting work.|
+|DEV_SERVER_PORT|4200|Port the dev server (webpack) will use. Need to run `npm run start:env` instead of `npm run` to make this setting work.|
 |TEST_BROWSER|default&nbsp;&#124; chrome&nbsp;&#124; firefox|Platform for running tests. By default a headless chrome is used; "chrome" or "firefox" are for running tests in real (chrome/ff) browser |
 |TEST_SERVER_PORT|9876|Port that will be used by non-default testing browser |
 

diff --git a/angular.json b/angular.json
@@ -3,83 +3,113 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "ngx-ui-scroll-demo-app": {
-      "root": "",
-      "sourceRoot": "./",
+    "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",
+      "prefix": "app",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist-app",
+            "outputPath": "dist/demo",
             "index": "demo/index.html",
             "main": "demo/main.ts",
-            "tsConfig": "demo/tsconfig.app.json",
             "polyfills": "demo/polyfills.ts",
+            "tsConfig": "demo/tsconfig.app.json",
             "assets": [
-              "demo/assets",
-              "demo/favicon.ico"
+              "demo/favicon.ico",
+              "demo/assets"
             ],
             "styles": [
               "demo/styles.css"
             ],
-            "scripts": [],
-            "aot": false,
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
+            "scripts": []
           },
           "configurations": {
             "production": {
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1mb",
+                  "maximumError": "2mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "demo/environments/environment.ts",
                   "with": "demo/environments/environment.prod.ts"
                 }
-              ]
+              ],
+              "outputHashing": "all",
+              "sourceMap": true
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
           },
-          "defaultConfiguration": ""
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "ngx-ui-scroll-demo-app:build"
-          },
           "configurations": {
             "production": {
-              "browserTarget": "ngx-ui-scroll-demo-app:build:production"
+              "browserTarget": "demo:build:production"
+            },
+            "development": {
+              "browserTarget": "demo:build:development"
             }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "ngx-ui-scroll-demo-app:build"
-          }
+          },
+          "defaultConfiguration": "development"
         }
       }
     }
   },
-  "defaultProject": "ngx-ui-scroll-demo-app",
-  "schematics": {
-    "@schematics/angular:component": {
-      "prefix": "app",
-      "styleext": "css"
-    },
-    "@schematics/angular:directive": {
-      "prefix": "app"
-    }
-  }
+  "defaultProject": "scroller"
 }