Merge pull request #664 from ghiscoding/bugfix/remove-dynamically-load-plugins

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

Author: ghiscoding

README.md

@@ -50,9 +50,7 @@ If you are facing any issue with `ngx-translate` library while building your Ang
 |        7        |        11.x+        |
 
 ### Build Warnings (Angular 8+)
-Since Angular 8+, a few warnings started to appear when doing a Prod build and that was asked in a few separate issues. These warnings are **fine**, the reason is because Angular-Slickgrid loads all of the SlickGrid extensions dynamically [here](https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/modules/angular-slickgrid/extensions/extensionUtility.ts#L29) depending on which flags you use in the grid options, with `require('slickgrid/plugins/slick....');` and Angular is complaining about the use of `require` (even though in our case we load dynamically to avoid adding plugins code in your build that you might not even use).
-
-These warnings are **normal** so the best way to fix this, is to simply remove the warnings, all you have to do is to add a file named `ngcc.config.js` in your project root (same location as the `angular.json` file) with the following content (you can also see this [commit](https://github.com/ghiscoding/angular-slickgrid-demos/commit/1fe8092bcd2e99ede5ab048f4a7ebe6254e4bee0) which fixes the Angular-Slickgrid-Demos prod build):
+You might get warnings about SlickGrid while doing a build, most of them are fine and the best way to fix this, is to simply remove/ignore the warnings, all you have to do is to add a file named `ngcc.config.js` in your project root (same location as the `angular.json` file) with the following content (you can also see this [commit](https://github.com/ghiscoding/angular-slickgrid-demos/commit/1fe8092bcd2e99ede5ab048f4a7ebe6254e4bee0) which fixes the Angular-Slickgrid-Demos prod build):
 ```js
 module.exports = {
   packages: {

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', () => {