fix: registered external resouces should keep singleton ref (#1242)

* fix: registered external resouces should keep singleton ref
ghiscoding · Dec 2, 2023 · adf2054 · adf2054
1 parent 8ae3927
commit adf2054
Show file tree

Hide file tree

Showing 23 changed files with 88 additions and 50 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example02.ts b/examples/vite-demo-vanilla-bundle/src/examples/example02.ts
@@ -201,7 +201,7 @@ export default class Example2 {
         }
       },
       textExportOptions: { filename: 'my-export', sanitizeDataExport: true },
-      registerExternalResources: [this.excelExportService, new TextExportService()],
+      externalResources: [this.excelExportService, new TextExportService()],
       showCustomFooter: true, // display some metrics in the bottom custom footer
       customFooterOptions: {
         // optionally display some text on the left footer container

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts
@@ -292,7 +292,7 @@ export default class Example3 {
       excelExportOptions: {
         exportWithFormatter: true
       },
-      registerExternalResources: [new TextExportService(), this.excelExportService],
+      externalResources: [new TextExportService(), this.excelExportService],
       enableFiltering: true,
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.ts b/examples/vite-demo-vanilla-bundle/src/examples/example04.ts
@@ -366,7 +366,7 @@ export default class Example4 {
         exportWithFormatter: true,
         sanitizeDataExport: true
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)
         selectActiveRow: false

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example05.ts b/examples/vite-demo-vanilla-bundle/src/examples/example05.ts
@@ -217,7 +217,7 @@ export default class Example5 {
       enableExcelExport: true,
       textExportOptions: { exportWithFormatter: true },
       excelExportOptions: { exportWithFormatter: true },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       enableFiltering: true,
       showCustomFooter: true, // display some metrics in the bottom custom footer
       customFooterOptions: {

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example06.ts b/examples/vite-demo-vanilla-bundle/src/examples/example06.ts
@@ -39,7 +39,7 @@ export default class Example6 {
     this.datasetFlat = [];
     this.datasetHierarchical = this.mockDataset();
     const gridContainerElm = document.querySelector('.grid6') as HTMLDivElement;
-    this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, null as any, this.datasetHierarchical);
+    this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, undefined, this.datasetHierarchical);
     document.body.classList.add('material-theme');
   }
 
@@ -127,7 +127,7 @@ export default class Example6 {
       gridMenu: {
         iconCssClass: 'mdi mdi-dots-grid',
       },
-      registerExternalResources: [new ExcelExportService(), new TextExportService()],
+      externalResources: [new ExcelExportService(), new TextExportService()],
       enableFiltering: true,
       enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
       multiColumnSort: false, // multi-column sorting is not supported with Tree Data, so you need to disable it

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts
@@ -309,7 +309,7 @@ export default class Example7 {
       enableFiltering: true,
       enableTranslate: true,
       translater: this.translateService, // pass the TranslateService instance to the grid
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       enableCellNavigation: true,
       enableCheckboxSelector: true,
       enableRowSelection: true,

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example08.ts b/examples/vite-demo-vanilla-bundle/src/examples/example08.ts
@@ -69,7 +69,7 @@ export default class Example08 {
         exportWithFormatter: true,
         sanitizeDataExport: true
       },
-      registerExternalResources: [new TextExportService(), new ExcelExportService()],
+      externalResources: [new TextExportService(), new ExcelExportService()],
       enableCellNavigation: true,
       enableColumnReorder: false,
       enableSorting: true,

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example10.ts b/examples/vite-demo-vanilla-bundle/src/examples/example10.ts
@@ -270,7 +270,7 @@ export default class Example10 {
       setTimeout(() => {
         this.graphqlQuery = this.gridOptions.backendServiceApi!.service.buildQuery();
         if (this.isWithCursor) {
-          // When using cursor pagination, the pagination service needs to updated with the PageInfo data from the latest request
+          // When using cursor pagination, the pagination service needs to be updated with the PageInfo data from the latest request
           // This might be done automatically if using a framework specific slickgrid library
           // Note because of this timeout, this may cause race conditions with rapid clicks!
           this.sgb?.paginationService.setCursorPageInfo((mockedResult.data[GRAPHQL_QUERY_DATASET_NAME].pageInfo));

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts
@@ -295,7 +295,7 @@ export default class Example11 {
       excelExportOptions: {
         exportWithFormatter: true
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       enableFiltering: true,
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts
@@ -422,7 +422,7 @@ export default class Example12 {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      registerExternalResources: [new ExcelExportService(), this.compositeEditorInstance],
+      externalResources: [new ExcelExportService(), this.compositeEditorInstance],
       enableFiltering: true,
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts
@@ -436,7 +436,7 @@ export default class Example14 {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       enableFiltering: true,
       enableRowSelection: true,
       enableCheckboxSelector: true,

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example15.ts b/examples/vite-demo-vanilla-bundle/src/examples/example15.ts
@@ -175,7 +175,7 @@ export default class Example15 {
           this.getCustomerCallback(response);
         }
       } as OdataServiceApi,
-      registerExternalResources: [new RxJsResource(), new SlickCustomTooltip()]
+      externalResources: [new RxJsResource(), new SlickCustomTooltip()]
     };
   }
 

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts
@@ -340,7 +340,7 @@ export default class Example16 {
         thousandSeparator: ' '
       },
       // Custom Tooltip options can be defined in a Column or Grid Options or a mixed of both (first options found wins)
-      registerExternalResources: [new SlickCustomTooltip(), new ExcelExportService(), new TextExportService()],
+      externalResources: [new SlickCustomTooltip(), new ExcelExportService(), new TextExportService()],
       customTooltip: {
         formatter: this.tooltipFormatter.bind(this),
         headerFormatter: this.headerFormatter,

diff --git a/packages/common/src/extensions/slickContextMenu.ts b/packages/common/src/extensions/slickContextMenu.ts
@@ -211,7 +211,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass<ContextMenu> {
                   format: FileType.csv,
                 });
               } else {
-                throw new Error(`[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Context Menu. Example:: this.gridOptions = { enableTextExport: true, registerExternalResources: [new TextExportService()] };`);
+                throw new Error(`[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Context Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };`);
               }
             },
           }
@@ -236,7 +236,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass<ContextMenu> {
               if (excelService?.exportToExcel) {
                 excelService.exportToExcel();
               } else {
-                throw new Error(`[Slickgrid-Universal] You must register the ExcelExportService to properly use Export to Excel in the Context Menu. Example:: this.gridOptions = { enableExcelExport: true, registerExternalResources: [new ExcelExportService()] };`);
+                throw new Error(`[Slickgrid-Universal] You must register the ExcelExportService to properly use Export to Excel in the Context Menu. Example:: this.gridOptions = { enableExcelExport: true, externalResources: [new ExcelExportService()] };`);
               }
             },
           }
@@ -264,7 +264,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass<ContextMenu> {
                   format: FileType.txt,
                 });
               } else {
-                throw new Error(`[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Context Menu. Example:: this.gridOptions = { enableTextExport: true, registerExternalResources: [new TextExportService()] };`);
+                throw new Error(`[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Context Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };`);
               }
             },
           }

diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts
@@ -768,15 +768,15 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
               format: FileType.csv,
             });
           } else {
-            console.error(`[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, registerExternalResources: [new TextExportService()] };`);
+            console.error(`[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };`);
           }
           break;
         case 'export-excel':
           const excelService: ExcelExportService = registeredResources.find((service: any) => service.className === 'ExcelExportService');
           if (excelService?.exportToExcel) {
             excelService.exportToExcel();
           } else {
-            console.error(`[Slickgrid-Universal] You must register the ExcelExportService to properly use Export to Excel in the Grid Menu. Example:: this.gridOptions = { enableExcelExport: true, registerExternalResources: [new ExcelExportService()] };`);
+            console.error(`[Slickgrid-Universal] You must register the ExcelExportService to properly use Export to Excel in the Grid Menu. Example:: this.gridOptions = { enableExcelExport: true, externalResources: [new ExcelExportService()] };`);
           }
           break;
         case 'export-text-delimited':
@@ -787,7 +787,7 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
               format: FileType.txt,
             });
           } else {
-            console.error(`[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, registerExternalResources: [new TextExportService()] };`);
+            console.error(`[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };`);
           }
           break;
         case 'toggle-filter':

diff --git a/packages/common/src/interfaces/gridOption.interface.ts b/packages/common/src/interfaces/gridOption.interface.ts
@@ -551,9 +551,12 @@ export interface GridOption {
   /** Preselect certain rows by their row index ("enableCheckboxSelector" must be enabled) */
   preselectedRows?: number[];
 
-  /** Register any external Resources (Components, Services) like the ExcelExportService, TextExportService, SlickCompositeEditorComponent, ... */
+  /** @deprecated @use `externalResources` instead. */
   registerExternalResources?: ExternalResource[];
 
+  /** Register any external Resources (Components, Services) like the ExcelExportService, TextExportService, SlickCompositeEditorComponent, ... */
+  externalResources?: ExternalResource[];
+
   /** Defaults to true, should we reset (rollback) the search filter input value to its previous value when the `onBeforeSearchChange` event bubbling is prevented? */
   resetFilterSearchValueAfterOnBeforeCancellation?: boolean;
 

diff --git a/packages/custom-tooltip-plugin/README.md b/packages/custom-tooltip-plugin/README.md
@@ -46,7 +46,7 @@ export class MyExample {
         formatter: tooltipTaskFormatter,
         // ...
       },
-      registerExternalResources: [new SlickCustomTooltip(), this.excelExportService],
+      externalResources: [new SlickCustomTooltip(), this.excelExportService],
     };
   }
 }

diff --git a/packages/excel-export/README.md b/packages/excel-export/README.md
@@ -38,7 +38,7 @@ export class MyExample {
       excelExportOptions: {
         sanitizeDataExport: true
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
     }
   }
 }
@@ -61,7 +61,7 @@ export class MyExample {
       excelExportOptions: {
         sanitizeDataExport: true
       },
-      registerExternalResources: [this.excelExportService],
+      externalResources: [this.excelExportService],
     }
   }
 

diff --git a/packages/rxjs-observable/README.md b/packages/rxjs-observable/README.md
@@ -49,7 +49,7 @@ export class MyExample {
       } as OdataServiceApi,
 
       // ...
-      registerExternalResources: [new RxJsResource()],
+      externalResources: [new RxJsResource()],
     };
   }
 }

diff --git a/packages/text-export/README.md b/packages/text-export/README.md
@@ -42,7 +42,7 @@ export class MyExample {
       textExportOptions: {
         sanitizeDataExport: true
       },
-      registerExternalResources: [new TextExportService()],
+      externalResources: [new TextExportService()],
     }
   }
 }
@@ -65,7 +65,7 @@ export class MyExample {
       textExportOptions: {
         sanitizeDataExport: true
       },
-      registerExternalResources: [this.exportService],
+      externalResources: [this.exportService],
     }
   }
 

diff --git a/packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid.spec.ts b/packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid.spec.ts
@@ -756,7 +756,8 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
         const mockColDefs = [{ id: 'gender', field: 'gender', editor: { model: Editors.text, collectionAsync: of(mockCollection) } }] as Column[];
 
         const rxjsMock = new RxJsResourceStub();
-        component.gridOptions = { registerExternalResources: [rxjsMock] } as unknown as GridOption;
+        component.gridOptions = { externalResources: [rxjsMock] } as unknown as GridOption;
+        component.registerExternalResources([rxjsMock], true);
         component.initialization(divContainer, slickEventHandler);
         component.columnDefinitions = mockColDefs;
 
@@ -975,7 +976,9 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
         const sortServiceSpy = jest.spyOn(sortServiceStub, 'addRxJsResource');
         const paginationServiceSpy = jest.spyOn(paginationServiceStub, 'addRxJsResource');
 
-        component.gridOptions = { registerExternalResources: [rxjsMock] } as unknown as GridOption;
+        component.gridOptions = { externalResources: [rxjsMock] } as unknown as GridOption;
+        component.resetExternalResources();
+        component.registerExternalResources([rxjsMock], true);
         component.initialization(divContainer, slickEventHandler);
 
         expect(backendUtilitySpy).toHaveBeenCalled();
@@ -1258,7 +1261,8 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
         jest.spyOn((component.gridOptions as any).backendServiceApi.service, 'buildQuery').mockReturnValue(query);
         const backendExecuteSpy = jest.spyOn(backendUtilityServiceStub, 'executeBackendProcessesCallback');
 
-        component.gridOptions.registerExternalResources = [rxjsMock];
+        component.gridOptions.externalResources = [rxjsMock];
+        component.registerExternalResources([rxjsMock], true);
         component.gridOptions.backendServiceApi!.service.options = { executeProcessCommandOnInit: true };
         component.initialization(divContainer, slickEventHandler);
 
@@ -1319,7 +1323,8 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
         jest.spyOn((component.gridOptions as any).backendServiceApi.service, 'buildQuery').mockReturnValue(query);
         const backendErrorSpy = jest.spyOn(backendUtilityServiceStub, 'onBackendError');
 
-        component.gridOptions.registerExternalResources = [rxjsMock];
+        component.gridOptions.externalResources = [rxjsMock];
+        component.registerExternalResources([rxjsMock], true);
         component.gridOptions.backendServiceApi!.service.options = { executeProcessCommandOnInit: true };
         component.initialization(divContainer, slickEventHandler);