fix(core): properly remove event listeners when disposing (#163)

* fix(core): properly remove event listeners when disposing
ghiscoding · Nov 19, 2020 · ecfb9a7 · ecfb9a7
1 parent 0ecbc7e
commit ecfb9a7
Show file tree

Hide file tree

Showing 47 changed files with 967 additions and 836 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -8,4 +8,5 @@
 *.map
 *.md
 *.zip
+*.spec.ts
 **/dist/*.*
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/event.service.ts b/examples/webpack-demo-vanilla-bundle/src/examples/event.service.ts
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example02.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example02.ts
@@ -1,5 +1,6 @@
 import {
   Aggregators,
+  BindingEventService,
   Column,
   FieldType,
   Filters,
@@ -11,7 +12,7 @@ import {
   SlickDataView,
   SlickGrid,
   SortComparers,
-  SortDirectionNumber
+  SortDirectionNumber,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { FileExportService } from '@slickgrid-universal/file-export';
@@ -20,12 +21,11 @@ import { Slicker, SlickerGridInstance, SlickVanillaGridBundle } from '@slickgrid
 import { ExampleGridOptions } from './example-grid-options';
 import '../material-styles.scss';
 import './example02.scss';
-import { EventService } from './event.service';
 
 const NB_ITEMS = 500;
 
 export class Example2 {
-  private eventService: EventService;
+  private _bindingEventService: BindingEventService;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
@@ -44,16 +44,16 @@ export class Example2 {
   }
 
   constructor() {
-    this.eventService = new EventService();
+    this._bindingEventService = new BindingEventService();
   }
 
   attached() {
     this.initializeGrid();
     this.dataset = this.loadData(NB_ITEMS);
     const gridContainerElm = document.querySelector<HTMLDivElement>(`.grid2`);
 
-    this.eventService.addElementEventListener(gridContainerElm, 'onbeforeexporttoexcel', () => console.log('onBeforeExportToExcel'));
-    this.eventService.addElementEventListener(gridContainerElm, 'onafterexporttoexcel', () => console.log('onAfterExportToExcel'));
+    this._bindingEventService.bind(gridContainerElm, 'onbeforeexporttoexcel', () => console.log('onBeforeExportToExcel'));
+    this._bindingEventService.bind(gridContainerElm, 'onafterexporttoexcel', () => console.log('onAfterExportToExcel'));
     this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
 
     // you could group by duration on page load (must be AFTER the DataView is created, so after GridBundle)
@@ -62,6 +62,7 @@ export class Example2 {
 
   dispose() {
     this.sgb?.dispose();
+    this._bindingEventService.unbindAll();
   }
 
   initializeGrid() {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts
@@ -1,5 +1,6 @@
 import {
   Aggregators,
+  BindingEventService,
   Column,
   Editors,
   FieldType,
@@ -22,7 +23,6 @@ import { Slicker, SlickerGridInstance, SlickVanillaGridBundle } from '@slickgrid
 import { ExampleGridOptions } from './example-grid-options';
 import '../salesforce-styles.scss';
 import './example03.scss';
-import { EventService } from './event.service';
 
 // using external SlickGrid JS libraries
 declare const Slick: SlickNamespace;
@@ -38,7 +38,7 @@ interface ReportItem {
 }
 
 export class Example3 {
-  private eventService: EventService;
+  private _bindingEventService: BindingEventService;
   columnDefinitions: Column<ReportItem>[];
   gridOptions: GridOption;
   dataset: any[];
@@ -52,25 +52,25 @@ export class Example3 {
   selectedGroupingFields: Array<string | GroupingGetterFunction> = ['', '', ''];
 
   constructor() {
-    this.eventService = new EventService();
+    this._bindingEventService = new BindingEventService();
   }
 
   attached() {
     this.initializeGrid();
     this.dataset = this.loadData(500);
     const gridContainerElm = document.querySelector<HTMLDivElement>(`.grid3`);
 
-    this.eventService.addElementEventListener(gridContainerElm, 'onclick', this.handleOnClick.bind(this));
-    this.eventService.addElementEventListener(gridContainerElm, 'oncellchange', this.handleOnCellChange.bind(this));
-    this.eventService.addElementEventListener(gridContainerElm, 'onvalidationerror', this.handleValidationError.bind(this));
-    this.eventService.addElementEventListener(gridContainerElm, 'onitemdeleted', this.handleItemDeleted.bind(this));
-    this.eventService.addElementEventListener(gridContainerElm, 'onslickergridcreated', this.handleOnSlickerGridCreated.bind(this));
+    this._bindingEventService.bind(gridContainerElm, 'onclick', this.handleOnClick.bind(this));
+    this._bindingEventService.bind(gridContainerElm, 'oncellchange', this.handleOnCellChange.bind(this));
+    this._bindingEventService.bind(gridContainerElm, 'onvalidationerror', this.handleValidationError.bind(this));
+    this._bindingEventService.bind(gridContainerElm, 'onitemdeleted', this.handleItemDeleted.bind(this));
+    this._bindingEventService.bind(gridContainerElm, 'onslickergridcreated', this.handleOnSlickerGridCreated.bind(this));
     this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
   }
 
   dispose() {
     this.sgb?.dispose();
-    this.eventService.unbindAllEvents();
+    this._bindingEventService.unbindAll();
   }
 
   initializeGrid() {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts
@@ -1,5 +1,6 @@
 import {
   AutocompleteOption,
+  BindingEventService,
   Column,
   ColumnEditorDualInput,
   Editors,
@@ -13,7 +14,6 @@ import {
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
-import { EventService } from './event.service';
 import { ExampleGridOptions } from './example-grid-options';
 import './example02.scss';
 
@@ -42,7 +42,7 @@ const customEditableInputFormatter = (_row: number, _cell: number, _value: any,
 };
 
 export class Example4 {
-  private eventService: EventService;
+  private _bindingEventService: BindingEventService;
   columnDefinitions: Column<ReportItem>[];
   gridOptions: GridOption;
   dataset: any[];
@@ -55,22 +55,22 @@ export class Example4 {
   sgb: SlickVanillaGridBundle;
 
   constructor() {
-    this.eventService = new EventService();
+    this._bindingEventService = new BindingEventService();
   }
 
   attached() {
     const dataset = this.initializeGrid();
     const gridContainerElm = document.querySelector<HTMLDivElement>(`.grid4`);
 
-    // this.eventService.addElementEventListener(gridContainerElm, 'onclick', handleOnClick);
-    this.eventService.addElementEventListener(gridContainerElm, 'onvalidationerror', this.handleOnValidationError.bind(this));
-    this.eventService.addElementEventListener(gridContainerElm, 'onitemdeleted', this.handleOnItemDeleted.bind(this));
+    // this._bindingEventService.bind(gridContainerElm, 'onclick', handleOnClick);
+    this._bindingEventService.bind(gridContainerElm, 'onvalidationerror', this.handleOnValidationError.bind(this));
+    this._bindingEventService.bind(gridContainerElm, 'onitemdeleted', this.handleOnItemDeleted.bind(this));
     this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, dataset);
   }
 
   dispose() {
     this.sgb?.dispose();
-    this.eventService.unbindAllEvents();
+    this._bindingEventService.unbindAll();
   }
 
   initializeGrid() {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
@@ -1,4 +1,5 @@
 import {
+  BindingEventService,
   Column,
   Editors,
   Filters,
@@ -8,33 +9,33 @@ import {
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
-import { EventService } from './event.service';
 
 import { ExampleGridOptions } from './example-grid-options';
 
 export class Example7 {
-  private eventService: EventService;
+  private _bindingEventService: BindingEventService;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
   sgb: SlickVanillaGridBundle;
   duplicateTitleHeaderCount = 1;
 
   constructor() {
-    this.eventService = new EventService();
+    this._bindingEventService = new BindingEventService();
   }
 
   attached() {
     this.initializeGrid();
     this.dataset = this.loadData(500);
     const gridContainerElm = document.querySelector<HTMLDivElement>(`.grid7`);
-    this.eventService.addElementEventListener(gridContainerElm, 'oncellchange', this.handleOnCellChange.bind(this));
-    this.eventService.addElementEventListener(gridContainerElm, 'onvalidationerror', this.handleValidationError.bind(this));
+    this._bindingEventService.bind(gridContainerElm, 'oncellchange', this.handleOnCellChange.bind(this));
+    this._bindingEventService.bind(gridContainerElm, 'onvalidationerror', this.handleValidationError.bind(this));
     this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
   }
 
   dispose() {
     this.sgb?.dispose();
+    this._bindingEventService.unbindAll();
   }
 
   initializeGrid() {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example09.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example09.ts
@@ -1,13 +1,12 @@
-import { Column, FieldType, Filters, GridOption, GridStateChange, Metrics, OperatorType, } from '@slickgrid-universal/common';
+import { BindingEventService, Column, FieldType, Filters, GridOption, GridStateChange, Metrics, OperatorType, } from '@slickgrid-universal/common';
 import { GridOdataService, OdataServiceApi, OdataOption } from '@slickgrid-universal/odata';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
-import { EventService } from './event.service';
 import { ExampleGridOptions } from './example-grid-options';
 
 const defaultPageSize = 20;
 
 export class Example09 {
-  private eventService: EventService;
+  private _bindingEventService: BindingEventService;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   metrics: Metrics;
@@ -21,23 +20,24 @@ export class Example09 {
   statusClass = 'is-success';
 
   constructor() {
-    this.eventService = new EventService();
+    this._bindingEventService = new BindingEventService();
   }
 
   attached() {
     this.initializeGrid();
     const gridContainerElm = document.querySelector<HTMLDivElement>(`.grid9`);
 
-    this.eventService.addElementEventListener(gridContainerElm, 'ongridstatechanged', this.gridStateChanged.bind(this));
-    // this.eventService.addElementEventListener(gridContainerElm, 'onbeforeexporttoexcel', () => console.log('onBeforeExportToExcel'));
-    // this.eventService.addElementEventListener(gridContainerElm, 'onafterexporttoexcel', () => console.log('onAfterExportToExcel'));
+    this._bindingEventService.bind(gridContainerElm, 'ongridstatechanged', this.gridStateChanged.bind(this));
+    // this._bindingEventService.bind(gridContainerElm, 'onbeforeexporttoexcel', () => console.log('onBeforeExportToExcel'));
+    // this._bindingEventService.bind(gridContainerElm, 'onafterexporttoexcel', () => console.log('onAfterExportToExcel'));
     this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, []);
   }
 
   dispose() {
     if (this.sgb) {
       this.sgb?.dispose();
     }
+    this._bindingEventService.unbindAll();
   }
 
   initializeGrid() {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example10.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example10.ts
@@ -1,4 +1,5 @@
 import {
+  BindingEventService,
   Column,
   FieldType,
   Filters,
@@ -16,13 +17,12 @@ import * as moment from 'moment-mini';
 import { ExampleGridOptions } from './example-grid-options';
 import { TranslateService } from '../translate.service';
 import './example10.scss';
-import { EventService } from './event.service';
 
 const defaultPageSize = 20;
 const GRAPHQL_QUERY_DATASET_NAME = 'users';
 
 export class Example10 {
-  private eventService: EventService;
+  private _bindingEventService: BindingEventService;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset = [];
@@ -39,7 +39,7 @@ export class Example10 {
   translateService: TranslateService;
 
   constructor() {
-    this.eventService = new EventService();
+    this._bindingEventService = new BindingEventService();
     // get the Translate Service from the window object,
     // it might be better with proper Dependency Injection but this project doesn't have any at this point
     this.translateService = (<any>window).TranslateService;
@@ -52,16 +52,16 @@ export class Example10 {
     if (this.sgb) {
       this.sgb?.dispose();
     }
-    this.eventService.unbindAllEvents();
+    this._bindingEventService.unbindAll();
     //   this.saveCurrentGridState();
   }
 
   attached() {
     this.initializeGrid();
     const gridContainerElm = document.querySelector<HTMLDivElement>(`.grid10`);
 
-    // this.eventService.addElementEventListener(gridContainerElm, 'onbeforeexporttoexcel', () => console.log('onBeforeExportToExcel'));
-    // this.eventService.addElementEventListener(gridContainerElm, 'onafterexporttoexcel', () => console.log('onAfterExportToExcel'));
+    // this._bindingEventService.bind(gridContainerElm, 'onbeforeexporttoexcel', () => console.log('onBeforeExportToExcel'));
+    // this._bindingEventService.bind(gridContainerElm, 'onafterexporttoexcel', () => console.log('onAfterExportToExcel'));
     this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
   }
 

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11-modal.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example11-modal.ts
@@ -1,19 +1,20 @@
 import {
+  BindingEventService,
   Column,
+  DOMEvent,
+  emptyElement,
   Formatter,
   Formatters,
   GridOption,
-  emptyElement,
 } from '@slickgrid-universal/common';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
 import '../salesforce-styles.scss';
 import './example11-modal.scss';
-import { EventService } from './event.service';
 
 export class Example11Modal {
-  private eventService: EventService;
+  private _bindingEventService: BindingEventService;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   sgb: SlickVanillaGridBundle;
@@ -22,7 +23,7 @@ export class Example11Modal {
   selectedIds: string[] = [];
 
   constructor() {
-    this.eventService = new EventService();
+    this._bindingEventService = new BindingEventService();
   }
 
   attached() {
@@ -35,7 +36,7 @@ export class Example11Modal {
       if (bindings.columnDefinitions) {
         this.columnDefinitions = bindings.columnDefinitions;
         this.gridContainerElm = document.querySelector<HTMLDivElement>(`.modal-grid`);
-        this.eventService.addElementEventListener(this.gridContainerElm, 'onvalidationerror', this.handleValidationError.bind(this));
+        this._bindingEventService.bind(this.gridContainerElm, 'onvalidationerror', this.handleValidationError.bind(this));
 
         const dataset = [this.createEmptyItem(bindings.columnDefinitions)];
         this.sgb = new Slicker.GridBundle(this.gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, dataset);
@@ -50,7 +51,7 @@ export class Example11Modal {
 
   dispose() {
     this.sgb?.dispose();
-    this.eventService.unbindAllEvents();
+    this._bindingEventService.unbindAll();
     this.gridContainerElm = null;
   }
 
@@ -144,7 +145,7 @@ export class Example11Modal {
   private bindCloseBulmaModal(callback?: () => void) {
     const modalCloseBtnElms = document.querySelectorAll<HTMLButtonElement>('.close, .delete, .modal-close');
 
-    window.addEventListener('click', (event: any) => {
+    window.addEventListener('click', (event: DOMEvent<HTMLInputElement>) => {
       if (event.target.className === 'modal-background') {
         this.closeBulmaModal(callback);
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,4 +8,5 @@ @@
     *.map
     *.md
     *.zip
+    *.spec.ts
     **/dist/*.*