fix(ngx-selecto): reduce change detection cycles and teardown event listeners once the view is removed (#134)

Author: arturovt

packages/ngx-selecto/README.md

@@ -1,120 +1,3 @@
+# ngx-selecto
 
-<p align="middle" ><img src="https://daybrush.com/selecto/images/logo.png" /></p>
-<h2 align="middle">Angular Selecto</h2>
-<p align="middle">
-<a href="https://www.npmjs.com/package/ngx-selecto" target="_blank"><img src="https://img.shields.io/npm/v/ngx-selecto.svg?style=flat-square&color=007acc&label=version" alt="npm version" /></a>
-<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square"/>
-<a href="https://github.com/daybrush/selecto/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/daybrush/selecto.svg?style=flat-square&label=license&color=08CE5D"/></a>
-<a href="https://github.com/daybrush/selecto/tree/master/packages/react-selecto" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
-<a href="https://github.com/daybrush/selecto/tree/master/packages/preact-selecto" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
-<a href="https://github.com/daybrush/selecto/tree/master/packages/ngx-selecto" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
-<a href="https://github.com/daybrush/selecto/tree/master/packages/vue-selecto" target="_blank"><img
-    alt="Vue"
-    src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984"></a>
-<a href="https://github.com/daybrush/selecto/tree/master/packages/svelte-selecto" target="_blank"><img
-    alt="Svelte"
-    src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a>
-<a href="https://github.com/daybrush/selecto/tree/master/packages/lit-selecto" target="_blank"><img
-    alt="Lit"
-    src="https://img.shields.io/static/v1.svg?label=&message=Lit&style=flat-square&color=4E8EE0"></a>
-</p>
-<p align="middle">Angular Selecto is an Angular Component that allows you to select elements in the drag area using the mouse or touch.</p>
-
-<p align="middle">
-    <a href="https://daybrush.com/selecto" target="_blank"><strong>Demo</strong></a> /
-    <a href="https://daybrush.com/selecto/release/latest/doc/" target="_blank"><strong>API</strong></a> /
-    <a href="https://github.com/daybrush/scena" target="_blank"><strong>Main Project</strong></a>
-</p>
-
-## ⚙️ Installation
-### npm
-```bash
-$ npm install ngx-selecto
-```
-
-## 🚀 How to use
-```js
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { NgxSelectoComponent, NgxSelectoModule } from "ngx-selecto";
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    NgxSelectoComponent,
-  ],
-  imports: [
-    BrowserModule,
-    // NgxSelectoModule,
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-### Template
-```html
-<ngx-selecto
-    [container]="document.body"
-    dragContainer=".elements"
-    [selectableTargets]='[".target", document.querySelector(".target2")]'
-    [selectByClick]="true"
-    [selectFromInside]="true"
-    [continueSelect]="false"
-    [toggleContinueSelect]="'shift'"
-    [keyContainer]="window"
-    [hitRate]="100"
-    (dragStart)="onDragStart($event)"
-    (selectStart)="onSelectStart($event)"
-    (select)="onSelect($event)"
-    (selectEnd)="onSelectEnd($event)"
-></ngx-selecto>
-```
-
-## ⚙️ Developments
-### `ng serve`
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## ⭐️ Show Your Support
-Please give a ⭐️ if this project helped you!
-
-
-## 👏 Contributing
-
-If you have any questions or requests or want to contribute to `selecto` or other packages, please write the [issue](https://github.com/daybrush/selecto/issues) or give me a Pull Request freely.
-
-## 🐞 Bug Report
-
-If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/selecto/issues) on GitHub.
-
-
-## 📝 License
-
-This project is [MIT](https://github.com/daybrush/selecto/blob/master/LICENSE) licensed.
-
-```
-MIT License
-
-Copyright (c) 2020 Daybrush
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-```
-
+See [readme](./projects/ngx-selecto/README.md) for more info.

packages/ngx-selecto/projects/ngx-selecto/src/lib/ngx-selecto.component.ts

@@ -1,10 +1,24 @@
 import {
-  Component, ElementRef,
-  AfterViewInit, OnDestroy, OnChanges, SimpleChanges, ViewChild, Input, Output, EventEmitter,
+  Component,
+  ElementRef,
+  AfterViewInit,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  ViewChild,
+  EventEmitter,
+  NgZone,
 } from '@angular/core';
+import { Subject, fromEvent } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import VanillaSelecto, {
-  CLASS_NAME, OPTIONS, SelectoOptions, PROPERTIES, EVENTS,
+  CLASS_NAME,
+  OPTIONS,
+  SelectoOptions,
+  PROPERTIES,
+  EVENTS,
 } from 'selecto';
+
 import { ANGULAR_SELECTO_INPUTS, ANGULAR_SELECTO_OUTPUTS } from './consts';
 import { NgxSelectoInterface } from './ngx-selecto.interface';
 
@@ -15,23 +29,24 @@ import { NgxSelectoInterface } from './ngx-selecto.interface';
   `,
   inputs: ANGULAR_SELECTO_INPUTS,
   outputs: ANGULAR_SELECTO_OUTPUTS,
-  styles: []
 })
 export class NgxSelectoComponent
   extends NgxSelectoInterface
   implements OnDestroy, AfterViewInit, OnChanges {
-  @ViewChild('el', { static: false }) elRef!: ElementRef;
+  @ViewChild('el', { static: true }) elRef!: ElementRef<HTMLElement>;
 
   public selectionClassName = CLASS_NAME;
 
-  constructor() {
+  private destroy$ = new Subject<void>();
+
+  constructor(private ngZone: NgZone) {
     super();
+
     EVENTS.forEach(name => {
       (this as any)[name] = new EventEmitter();
     });
   }
 
-
   ngAfterViewInit(): void {
     const options: Partial<SelectoOptions> = {};
 
@@ -40,19 +55,24 @@ export class NgxSelectoComponent
         (options as any)[name] = this[name];
       }
     });
-    this.selecto = new VanillaSelecto({
+
+    this.selecto = this.ngZone.runOutsideAngular(() => new VanillaSelecto({
       ...options,
       portalContainer: this.elRef.nativeElement,
-    });
+    }));
 
     const selecto = this.selecto;
 
     EVENTS.forEach(name => {
-      selecto.on(name, e => {
-        this[name].emit(e as any);
+      fromEvent(selecto, name).pipe(takeUntil(this.destroy$)).subscribe(event => {
+        const emitter = this[name];
+        if (emitter && (emitter.observed || emitter.observers.length > 0)) {
+          this.ngZone.run(() => emitter.emit(event as any));
+        }
       });
     });
   }
+
   ngOnChanges(changes: SimpleChanges): void {
     const selecto = this.selecto;
 
@@ -71,7 +91,9 @@ export class NgxSelectoComponent
       (selecto as any)[name] = currentValue;
     }
   }
+
   ngOnDestroy() {
+    this.destroy$.next();
     this.selecto.destroy();
   }
 }

packages/ngx-selecto/projects/ngx-selecto/src/lib/ngx-selecto.module.ts

@@ -1,12 +1,8 @@
 import { NgModule } from '@angular/core';
 import { NgxSelectoComponent } from './ngx-selecto.component';
 
-
-
 @NgModule({
   declarations: [NgxSelectoComponent],
-  imports: [
-  ],
-  exports: [NgxSelectoComponent]
+  exports: [NgxSelectoComponent],
 })
-export class NgxSelectoModule { }
+export class NgxSelectoModule {}

packages/ngx-selecto/projects/ngx-selecto/src/lib/ngx-selecto.service.spec.ts

@@ -2,6 +2,5 @@
  * Public API Surface of ngx-selecto
  */
 
-export * from './lib/ngx-selecto.service';
 export * from './lib/ngx-selecto.component';
 export * from './lib/ngx-selecto.module';

packages/ngx-selecto/projects/ngx-selecto/src/lib/ngx-selecto.service.ts

@@ -1,33 +1,38 @@
 import { Component } from '@angular/core';
-import { OnSelectEnd, OnSelect } from '../../projects/ngx-selecto/src/public-api';
+import { OnKeyEvent, OnSelect, OnSelectEnd } from 'selecto';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   dragContainer = window;
-  onKeydown() {
+
+  onKeydown(event: OnKeyEvent) {
     document.querySelector('.button')!.classList.add('selected');
   }
-  onKeyup() {
+
+  onKeyup(event: OnKeyEvent) {
     document.querySelector('.button')!.classList.remove('selected');
   }
+
   onSelectStart(e: OnSelect) {
     console.log('start', e);
-    e.added.forEach(el => {
+    e.added.forEach((el) => {
       el.classList.add('selected');
     });
-    e.removed.forEach(el => {
+    e.removed.forEach((el) => {
       el.classList.remove('selected');
     });
   }
+
   onSelectEnd(e: OnSelectEnd) {
     console.log('end', e);
-    e.afterAdded.forEach(el => {
+    e.afterAdded.forEach((el) => {
       el.classList.add('selected');
     });
-    e.afterRemoved.forEach(el => {
+    e.afterRemoved.forEach((el) => {
       el.classList.remove('selected');
     });
   }

packages/ngx-selecto/projects/ngx-selecto/src/public-api.ts

@@ -12,10 +12,7 @@
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "paths": {
-      "ngx-selecto": [
-        "dist/ngx-selecto/ngx-selecto",
-        "dist/ngx-selecto"
-      ]
+      "ngx-selecto": ["projects/ngx-selecto/src/public-api.ts"]
     },
     "declaration": false,
     "downlevelIteration": true,
@@ -24,10 +21,7 @@
     "importHelpers": true,
     "target": "es2017",
     "module": "es2020",
-    "lib": [
-      "es2020",
-      "dom"
-    ]
+    "lib": ["es2020", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,