Setup Husky and Prettier

.eslintignore

@@ -1,3 +1,5 @@
 node_modules
 dist
 dist-app
+package.json
+package-lock.json

.eslintrc

@@ -1,20 +1,21 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
-  "plugins": [
-    "@typescript-eslint"
-  ],
+  "plugins": ["@typescript-eslint"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended"
   ],
   "rules": {
     "max-len": ["error", { "code": 120 }],
-    "quotes": ["error", "single"],
+    "quotes": ["error", "single", { "avoidEscape": true }],
     "semi": ["error", "always"],
     "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ]
   },
   "overrides": [
     {

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*.ts": "npm run lint",
+  "*.{ts,js,html,scss,md,json}": "prettier --write"
+}

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "trailingComma": "none"
+}

demo/app/app-routing.module.ts

@@ -24,5 +24,4 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes, { useHash: true })],
   exports: [RouterModule]
 })
-export class AppRoutingModule {
-}
+export class AppRoutingModule {}

demo/app/app.component.html

@@ -2,13 +2,10 @@
   <app-nav></app-nav>
 
   <div class="container mb-5">
-
     <router-outlet></router-outlet>
-
   </div>
 </div>
 
 <div *ngIf="!hasLayout" class="no-layout">
   <router-outlet></router-outlet>
 </div>
-

demo/app/app.component.ts

@@ -1,5 +1,10 @@
 import { Component, AfterViewInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, NavigationStart, Router, Event } from '@angular/router';
+import {
+  ActivatedRoute,
+  NavigationStart,
+  Router,
+  Event
+} from '@angular/router';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
@@ -8,29 +13,25 @@ import { filter } from 'rxjs/operators';
   templateUrl: './app.component.html'
 })
 export class AppComponent implements AfterViewInit, OnDestroy {
-
   hasLayout = true;
   private subscriptions: Subscription[] = [];
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor(private route: ActivatedRoute, private router: Router) {
     this.subscriptions.push(
-      router.events.pipe(
-        filter((event: Event) => event instanceof NavigationStart)
-      ).subscribe((event: Event) => {
-        const url = (event as NavigationStart).url;
-        this.hasLayout = !(url === '/window' || url === '/test');
-        if (url === '/window') {
-          document.body.classList.add('entire-window');
-        } else {
-          document.body.classList.remove('entire-window');
-        }
-        if (!url.includes('#')) {
-          window.scrollTo(0, 0);
-        }
-      })
+      router.events
+        .pipe(filter((event: Event) => event instanceof NavigationStart))
+        .subscribe((event: Event) => {
+          const url = (event as NavigationStart).url;
+          this.hasLayout = !(url === '/window' || url === '/test');
+          if (url === '/window') {
+            document.body.classList.add('entire-window');
+          } else {
+            document.body.classList.remove('entire-window');
+          }
+          if (!url.includes('#')) {
+            window.scrollTo(0, 0);
+          }
+        })
     );
     if ('scrollRestoration' in history) {
       history.scrollRestoration = 'manual';
@@ -39,7 +40,7 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 
   ngAfterViewInit() {
     this.subscriptions.push(
-      this.route.fragment.subscribe((hash) => {
+      this.route.fragment.subscribe(hash => {
         if (hash) {
           setTimeout(() => {
             const cmp = document.getElementById(hash);
@@ -55,7 +56,8 @@ export class AppComponent implements AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
+    this.subscriptions.forEach((subscription: Subscription) =>
+      subscription.unsubscribe()
+    );
   }
-
 }

demo/app/app.module.ts

@@ -43,7 +43,7 @@ import { AppRoutingModule } from './app-routing.module';
     ...demos.common,
     ...demos.datasource,
     ...demos.adapter,
-    ...demos.experimental,
+    ...demos.experimental
   ],
   imports: [
     BrowserModule,
@@ -53,10 +53,7 @@ import { AppRoutingModule } from './app-routing.module';
     UiScrollModule,
     AppRoutingModule
   ],
-  providers: [
-    RemoteDataService
-  ],
+  providers: [RemoteDataService],
   bootstrap: [AppComponent]
 })
-export class AppModule {
-}
+export class AppModule {}

demo/app/demos.ts

@@ -10,9 +10,8 @@ import { DemoDifferentHeightsComponent } from './samples/common/different-height
 import { DemoWindowViewportComponent } from './samples/common/window-viewport.component';
 
 import { DemoDatasourceSignaturesComponent } from './samples/datasource/datasource-signatures.component';
-import {
-  DemoBidirectionalUnlimitedDatasourceComponent
-} from './samples/datasource/bidirectional-unlimited-datasource.component';
+// eslint-disable-next-line max-len
+import { DemoBidirectionalUnlimitedDatasourceComponent } from './samples/datasource/bidirectional-unlimited-datasource.component';
 import { DemoLimitedDatasourceComponent } from './samples/datasource/limited-datasource.component';
 import { DemoPositiveLimitedDatasourceComponent } from './samples/datasource/positive-limited-datasource.component';
 import { DemoRemoteDatasourceComponent } from './samples/datasource/remote-datasource.component';
@@ -57,7 +56,7 @@ const common = [
   DemoInfiniteComponent,
   DemoHorizontalComponent,
   DemoDifferentHeightsComponent,
-  DemoWindowViewportComponent,
+  DemoWindowViewportComponent
 ];
 
 const datasource = [
@@ -67,7 +66,7 @@ const datasource = [
   DemoPositiveLimitedDatasourceComponent,
   DemoRemoteDatasourceComponent,
   DemoInvertedDatasourceComponent,
-  DemoPagesDatasourceComponent,
+  DemoPagesDatasourceComponent
 ];
 
 const adapter = [
@@ -90,7 +89,7 @@ const adapter = [
   DemoRemoveComponent,
   DemoReplaceComponent,
   DemoClipComponent,
-  DemoUpdateComponent,
+  DemoUpdateComponent
 ];
 
 const experimental = [
@@ -99,7 +98,7 @@ const experimental = [
   DemoAdapterFixPositionComponent,
   DemoAdapterFixUpdaterComponent,
   DemoAdapterFixScrollToItemComponent,
-  DemoOnBeforeClipSettingComponent,
+  DemoOnBeforeClipSettingComponent
 ];
 
 export default {

demo/app/routes.ts

@@ -31,7 +31,7 @@ const globalScope = {
   experimental: {
     id: 'experimental',
     name: 'Experimental'
-  },
+  }
 };
 
 const datasourceScope = {
@@ -69,7 +69,7 @@ const datasourceScope = {
     id: 'pages',
     name: 'Pages',
     scope: globalScope.datasource.id
-  },
+  }
 };
 
 const settingsScope = {
@@ -122,7 +122,7 @@ const settingsScope = {
     id: 'window-viewport',
     name: 'Entire window scrollable',
     scope: globalScope.settings.id
-  },
+  }
 };
 
 const adapterPropsScope = {
@@ -165,7 +165,7 @@ const adapterPropsScope = {
     id: 'first-last-visible-items',
     name: 'First and last visible items',
     scope: globalScope.adapterProps.id
-  },
+  }
 };
 
 const adapterMethodsScope = {
@@ -228,7 +228,7 @@ const adapterMethodsScope = {
     id: 'update',
     name: 'Update',
     scope: globalScope.adapterMethods.id
-  },
+  }
 };
 
 const experimentalScope = {
@@ -261,7 +261,7 @@ const experimentalScope = {
     id: 'onBeforeClip-setting',
     name: 'onBeforeClip setting',
     scope: globalScope.experimental.id
-  },
+  }
 };
 
 const demos = {
@@ -275,7 +275,7 @@ const demos = {
   },
   adapter: {
     ...globalScope.adapter,
-    map: [],
+    map: []
   },
   adapterProps: {
     ...globalScope.adapterProps,

demo/app/samples/adapter.component.html

@@ -1,28 +1,28 @@
 <h1>Angular UI Scroll Adapter Demos</h1>
 
 <p>
-  <em>Adapter</em> is&nbsp;a&nbsp;special object to&nbsp;assess and manipulate the Scroller.
-  The API it&nbsp;provides is&nbsp; discussed on&nbsp;this page.
-  In order to get an access to the <em>Adapter</em> API,
-  the <em>Datasource</em> has to be instantiated via operator <em>new</em>:
+  <em>Adapter</em> is&nbsp;a&nbsp;special object to&nbsp;assess and manipulate
+  the Scroller. The API it&nbsp;provides is&nbsp; discussed on&nbsp;this page.
+  In order to get an access to the <em>Adapter</em> API, the
+  <em>Datasource</em> has to be instantiated via operator <em>new</em>:
 </p>
 
-<pre>{{datasourceSample}}</pre>
+<pre>{{ datasourceSample }}</pre>
 
 <p>
   For better typings it is recommended to provide also data item type argument:
 </p>
 
-<pre>{{datasourceTypedSample}}</pre>
+<pre>{{ datasourceTypedSample }}</pre>
 
 <p>
-  The constructor argument is&nbsp;an&nbsp;object of&nbsp;<em>IDatasource</em> type which
-  must include <em>get</em> method property and
-  may include <em>settings</em> object property.
-  The Scroller's augments the result <em>Datasource</em> object
-  with the <em>Adapter</em> object property during instantiating.
-  So, after the <em>Datasource</em> object had been instantiated, we&nbsp;may access
-  <em>this.datasource.adapter</em> property object with its API methods and properties.
+  The constructor argument is&nbsp;an&nbsp;object of&nbsp;<em>IDatasource</em>
+  type which must include <em>get</em> method property and may include
+  <em>settings</em> object property. The Scroller's augments the result
+  <em>Datasource</em> object with the <em>Adapter</em> object property during
+  instantiating. So, after the <em>Datasource</em> object had been instantiated,
+  we&nbsp;may access <em>this.datasource.adapter</em> property object with its
+  API methods and properties.
 </p>
 
 <app-demo-init></app-demo-init>

demo/app/samples/adapter.component.ts

@@ -5,14 +5,12 @@ import { Component } from '@angular/core';
   templateUrl: './adapter.component.html'
 })
 export class AdapterComponent {
-
-  constructor() {
-  }
+  constructor() {}
 
   datasourceSample = `  import { Datasource } from 'ngx-ui-scroll';
 
   datasource = new Datasource({ get, settings });`;
 
-  datasourceTypedSample = 'datasource = new Datasource<MyItem>({ get, settings });';
-
+  datasourceTypedSample =
+    'datasource = new Datasource<MyItem>({ get, settings });';
 }