fix(core): use regular imports instead of require to load plugins

- replace all require(plugin) since that is not tree shakable and imports are

Author: ghiscoding

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts

@@ -66,12 +66,8 @@ const extensionServiceStub = {
 } as unknown as ExtensionService;
 
 const mockExtensionUtility = {
-  loadExtensionDynamically: jest.fn(),
   translateItems: jest.fn(),
 } as unknown as ExtensionUtility;
-export class ExtensionUtilityStub {
-  loadExtensionDynamically() { }
-}
 
 const groupingAndColspanServiceStub = {
   init: jest.fn(),
@@ -483,15 +479,13 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
 
     describe('use grouping', () => {
       it('should load groupItemMetaProvider to the DataView when using "draggableGrouping" feature', () => {
-        const extensionSpy = jest.spyOn(mockExtensionUtility, 'loadExtensionDynamically');
         const dataviewSpy = jest.spyOn(mockDataViewImplementation.prototype, 'constructor');
         const groupMetaSpy = jest.spyOn(mockGroupItemMetaProviderImplementation.prototype, 'constructor');
         const sharedMetaSpy = jest.spyOn(SharedService.prototype, 'groupItemMetadataProvider', 'set');
 
         component.gridOptions.draggableGrouping = {};
         component.ngAfterViewInit();
 
-        expect(extensionSpy).toHaveBeenCalledWith('groupItemMetaProvider');
         expect(dataviewSpy).toHaveBeenCalledWith({ groupItemMetadataProvider: expect.anything(), inlineFilters: false });
         expect(groupMetaSpy).toHaveBeenCalledWith();
         expect(sharedMetaSpy).toHaveBeenCalledWith(mockGroupItemMetaProvider);
@@ -500,15 +494,13 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
       });
 
       it('should load groupItemMetaProvider to the DataView when using "enableGrouping" feature', () => {
-        const extensionSpy = jest.spyOn(mockExtensionUtility, 'loadExtensionDynamically');
         const dataviewSpy = jest.spyOn(mockDataViewImplementation.prototype, 'constructor');
         const groupMetaSpy = jest.spyOn(mockGroupItemMetaProviderImplementation.prototype, 'constructor');
         const sharedMetaSpy = jest.spyOn(SharedService.prototype, 'groupItemMetadataProvider', 'set');
 
         component.gridOptions.enableGrouping = true;
         component.ngAfterViewInit();
 
-        expect(extensionSpy).toHaveBeenCalledWith('groupItemMetaProvider');
         expect(dataviewSpy).toHaveBeenCalledWith({ groupItemMetadataProvider: expect.anything(), inlineFilters: false });
         expect(groupMetaSpy).toHaveBeenCalledWith();
         expect(sharedMetaSpy).toHaveBeenCalledWith(mockGroupItemMetaProvider);

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts

@@ -73,7 +73,6 @@ const extensionServiceStub = {
 } as unknown as ExtensionService;
 
 const extensionUtilityStub = {
-  loadExtensionDynamically: jest.fn(),
   translateItems: jest.fn(),
 } as unknown as ExtensionUtility;
 

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -6,6 +6,7 @@ import 'slickgrid/lib/jquery.mousewheel';
 import 'slickgrid/slick.core';
 import 'slickgrid/slick.grid';
 import 'slickgrid/slick.dataview';
+import 'slickgrid/slick.groupitemmetadataprovider';
 
 // ...then everything else...
 import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, Output, OnDestroy, OnInit, Optional } from '@angular/core';
@@ -24,7 +25,6 @@ import {
   ColumnEditor,
   CustomFooterOption,
   DataViewOption,
-  ExtensionName,
   GraphqlPaginatedResult,
   GraphqlResult,
   GridOption,
@@ -78,7 +78,6 @@ import { RowSelectionExtension } from '../extensions/rowSelectionExtension';
 // using external non-typed js libraries
 declare const Slick: any;
 declare const $: any;
-declare function require(name: string);
 
 const slickgridEventPrefix = 'sg';
 
@@ -807,7 +806,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
       let dataViewOptions: DataViewOption = { inlineFilters: dataviewInlineFilters };
 
       if (this.gridOptions.draggableGrouping || this.gridOptions.enableGrouping) {
-        this.extensionUtility.loadExtensionDynamically(ExtensionName.groupItemMetaProvider);
         this.groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
         this.sharedService.groupItemMetadataProvider = this.groupItemMetadataProvider;
         dataViewOptions = { ...dataViewOptions, groupItemMetadataProvider: this.groupItemMetadataProvider };

src/app/modules/angular-slickgrid/extensions/__tests__/autoTooltipExtension.spec.ts

@@ -2,7 +2,6 @@ import { TestBed } from '@angular/core/testing';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { GridOption } from '../../models/gridOption.interface';
 import { AutoTooltipExtension } from '../autoTooltipExtension';
-import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
 
 declare const Slick: any;
@@ -17,17 +16,17 @@ const mockAddon = jest.fn().mockImplementation(() => ({
   destroy: jest.fn()
 }));
 
-jest.mock('slickgrid/plugins/slick.autotooltips', () => mockAddon);
-Slick.AutoTooltips = mockAddon;
-
 describe('autoTooltipExtension', () => {
+  jest.mock('slickgrid/plugins/slick.autotooltips', () => mockAddon);
+  Slick.AutoTooltips = mockAddon;
+
   let translate: TranslateService;
   let extension: AutoTooltipExtension;
   const gridOptionsMock = { enableAutoTooltip: true } as GridOption;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [AutoTooltipExtension, ExtensionUtility, SharedService],
+      providers: [AutoTooltipExtension, SharedService],
       imports: [TranslateModule.forRoot()]
     });
     extension = TestBed.get(AutoTooltipExtension);

src/app/modules/angular-slickgrid/extensions/__tests__/cellMenuExtension.spec.ts

@@ -4,7 +4,7 @@ import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { CellMenuExtension } from '../cellMenuExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
-import { Column, GridOption, MenuCommandItemCallbackArgs, MenuOptionItemCallbackArgs } from '../../models';
+import { Column, GridOption } from '../../models';
 
 declare const Slick: any;
 
@@ -37,12 +37,13 @@ const mockAddon = jest.fn().mockImplementation(() => ({
   onOptionSelected: new Slick.Event(),
 }));
 
-jest.mock('slickgrid/plugins/slick.cellmenu', () => mockAddon);
-Slick.Plugins = {
-  CellMenu: mockAddon
-};
 
 describe('CellMenuExtension', () => {
+  jest.mock('slickgrid/plugins/slick.cellmenu', () => mockAddon);
+  Slick.Plugins = {
+    CellMenu: mockAddon
+  };
+
   const columnsMock: Column[] = [{ id: 'field1', field: 'field1', width: 100, nameKey: 'TITLE' }, { id: 'field2', field: 'field2', width: 75 }];
   let extensionUtility: ExtensionUtility;
   let translate: TranslateService;

src/app/modules/angular-slickgrid/extensions/__tests__/checkboxSelectorExtension.spec.ts

@@ -1,8 +1,7 @@
 import { TestBed } from '@angular/core/testing';
-import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { GridOption } from '../../models/gridOption.interface';
 import { CheckboxSelectorExtension } from '../checkboxSelectorExtension';
-import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
 import { Column } from '../../models';
 
@@ -27,24 +26,23 @@ const mockSelectionModel = jest.fn().mockImplementation(() => ({
   destroy: jest.fn()
 }));
 
-jest.mock('slickgrid/plugins/slick.checkboxselectcolumn', () => mockAddon);
-Slick.CheckboxSelectColumn = mockAddon;
-
-jest.mock('slickgrid/plugins/slick.rowselectionmodel', () => mockSelectionModel);
-Slick.RowSelectionModel = mockSelectionModel;
 
 describe('checkboxSelectorExtension', () => {
-  let translate: TranslateService;
+  jest.mock('slickgrid/plugins/slick.checkboxselectcolumn', () => mockAddon);
+  Slick.CheckboxSelectColumn = mockAddon;
+
+  jest.mock('slickgrid/plugins/slick.rowselectionmodel', () => mockSelectionModel);
+  Slick.RowSelectionModel = mockSelectionModel;
+
   let extension: CheckboxSelectorExtension;
   const gridOptionsMock = { enableCheckboxSelector: true } as GridOption;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [CheckboxSelectorExtension, ExtensionUtility, SharedService],
+      providers: [CheckboxSelectorExtension, SharedService],
       imports: [TranslateModule.forRoot()]
     });
     extension = TestBed.get(CheckboxSelectorExtension);
-    translate = TestBed.get(TranslateService);
   });
 
   it('should return null after calling "create" method when either the column definitions or the grid options is missing', () => {

src/app/modules/angular-slickgrid/extensions/__tests__/columnPickerExtension.spec.ts

@@ -22,12 +22,12 @@ const mockAddon = jest.fn().mockImplementation(() => ({
   onColumnsChanged: new Slick.Event(),
 }));
 
-jest.mock('slickgrid/controls/slick.columnpicker', () => mockAddon);
-Slick.Controls = {
-  ColumnPicker: mockAddon
-};
-
 describe('columnPickerExtension', () => {
+  jest.mock('slickgrid/controls/slick.columnpicker', () => mockAddon);
+  Slick.Controls = {
+    ColumnPicker: mockAddon
+  };
+
   const columnsMock: Column[] = [{ id: 'field1', field: 'field1', width: 100, nameKey: 'TITLE' }, { id: 'field2', field: 'field2', width: 75 }];
   let extensionUtility: ExtensionUtility;
   let translate: TranslateService;
@@ -103,21 +103,21 @@ describe('columnPickerExtension', () => {
 
     it(`should call internal event handler subscribe and expect the "onColumnsChanged" grid option to be called when addon notify is called
     and it should override "visibleColumns" when array passed as arguments is bigger than previous visible columns`, () => {
-      const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
-      const onColumnSpy = jest.spyOn(SharedService.prototype.gridOptions.columnPicker, 'onColumnsChanged');
-      const visibleColsSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
-
-      const instance = extension.register();
-      instance.onColumnsChanged.notify({ columnId: 'field1', showing: true, columns: columnsMock, grid: gridStub }, new Slick.EventData(), gridStub);
-
-      expect(handlerSpy).toHaveBeenCalledTimes(1);
-      expect(handlerSpy).toHaveBeenCalledWith(
-        { notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
-        expect.anything()
-      );
-      expect(onColumnSpy).toHaveBeenCalledWith(expect.anything(), { columnId: 'field1', showing: true, columns: columnsMock, grid: gridStub });
-      expect(visibleColsSpy).toHaveBeenCalledWith(columnsMock);
-    });
+        const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
+        const onColumnSpy = jest.spyOn(SharedService.prototype.gridOptions.columnPicker, 'onColumnsChanged');
+        const visibleColsSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
+
+        const instance = extension.register();
+        instance.onColumnsChanged.notify({ columnId: 'field1', showing: true, columns: columnsMock, grid: gridStub }, new Slick.EventData(), gridStub);
+
+        expect(handlerSpy).toHaveBeenCalledTimes(1);
+        expect(handlerSpy).toHaveBeenCalledWith(
+          { notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
+          expect.anything()
+        );
+        expect(onColumnSpy).toHaveBeenCalledWith(expect.anything(), { columnId: 'field1', showing: true, columns: columnsMock, grid: gridStub });
+        expect(visibleColsSpy).toHaveBeenCalledWith(columnsMock);
+      });
 
     it('should call internal "onColumnsChanged" event and expect "readjustFrozenColumnIndexWhenNeeded" method to be called when the grid is detected to be a frozen grid', () => {
       gridOptionsMock.frozenColumn = 0;

src/app/modules/angular-slickgrid/extensions/__tests__/contextMenuExtension.spec.ts

@@ -5,7 +5,7 @@ import { ContextMenuExtension } from '../contextMenuExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
 import { ExcelExportService, ExportService, TreeDataService } from '../../services';
-import { Column, DelimiterType, FileType, GridOption, MenuCommandItem, MenuCommandItemCallbackArgs, MenuOptionItemCallbackArgs } from '../../models';
+import { Column, DelimiterType, FileType, GridOption, MenuCommandItem, } from '../../models';
 import { Formatters } from '../../formatters';
 
 declare const Slick: any;
@@ -64,14 +64,13 @@ const mockAddon = jest.fn().mockImplementation(() => ({
   onOptionSelected: new Slick.Event(),
 }));
 
-jest.mock('slickgrid/plugins/slick.contextmenu', () => mockAddon);
-Slick.Plugins = {
-  ContextMenu: mockAddon
-};
-
 describe('contextMenuExtension', () => {
+  jest.mock('slickgrid/plugins/slick.contextmenu', () => mockAddon);
+  Slick.Plugins = {
+    ContextMenu: mockAddon
+  };
+
   const columnsMock: Column[] = [{ id: 'field1', field: 'field1', width: 100, nameKey: 'TITLE' }, { id: 'field2', field: 'field2', width: 75 }];
-  let extensionUtility: ExtensionUtility;
   let translate: TranslateService;
   let extension: ContextMenuExtension;
   const sharedService = new SharedService();
@@ -133,7 +132,6 @@ describe('contextMenuExtension', () => {
         imports: [TranslateModule.forRoot()]
       });
       extension = TestBed.get(ContextMenuExtension);
-      extensionUtility = TestBed.get(ExtensionUtility);
       translate = TestBed.get(TranslateService);
       translate.setTranslation('fr', {
         TITLE: 'Titre',

src/app/modules/angular-slickgrid/extensions/__tests__/draggableGroupingExtension.spec.ts

@@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { GridOption } from '../../models/gridOption.interface';
 import { DraggableGroupingExtension } from '../draggableGroupingExtension';
 import { ExtensionUtility } from '../extensionUtility';
@@ -19,11 +19,10 @@ const mockAddon = jest.fn().mockImplementation(() => ({
   onGroupChanged: new Slick.Event(),
 }));
 
-jest.mock('slickgrid/plugins/slick.draggablegrouping', () => mockAddon);
-Slick.DraggableGrouping = mockAddon;
-
 describe('draggableGroupingExtension', () => {
-  let translate: TranslateService;
+  jest.mock('slickgrid/plugins/slick.draggablegrouping', () => mockAddon);
+  Slick.DraggableGrouping = mockAddon;
+
   let extension: DraggableGroupingExtension;
   const gridOptionsMock = {
     enableDraggableGrouping: true,
@@ -42,7 +41,6 @@ describe('draggableGroupingExtension', () => {
       imports: [TranslateModule.forRoot()]
     });
     extension = TestBed.get(DraggableGroupingExtension);
-    translate = TestBed.get(TranslateService);
   });
 
   it('should return null after calling "create" method when the grid options is missing', () => {