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

* fix: registered external resouces should keep singleton ref

package.json

@@ -91,11 +91,11 @@
     ]
   },
   "dependencies": {
-    "@slickgrid-universal/common": "~3.6.0",
-    "@slickgrid-universal/custom-footer-component": "~3.6.0",
-    "@slickgrid-universal/empty-warning-component": "~3.6.0",
-    "@slickgrid-universal/event-pub-sub": "~3.6.0",
-    "@slickgrid-universal/pagination-component": "~3.6.0",
+    "@slickgrid-universal/common": "~3.7.0",
+    "@slickgrid-universal/custom-footer-component": "~3.7.0",
+    "@slickgrid-universal/empty-warning-component": "~3.7.0",
+    "@slickgrid-universal/event-pub-sub": "~3.7.0",
+    "@slickgrid-universal/pagination-component": "~3.7.0",
     "dequal": "^2.0.3",
     "dompurify": "^3.0.6",
     "font-awesome": "^4.7.0",
@@ -110,13 +110,13 @@
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@slickgrid-universal/composite-editor-component": "~3.6.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "~3.6.0",
-    "@slickgrid-universal/excel-export": "~3.6.0",
-    "@slickgrid-universal/graphql": "~3.6.0",
-    "@slickgrid-universal/odata": "~3.6.0",
-    "@slickgrid-universal/rxjs-observable": "~3.6.0",
-    "@slickgrid-universal/text-export": "~3.6.0",
+    "@slickgrid-universal/composite-editor-component": "~3.7.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "~3.7.0",
+    "@slickgrid-universal/excel-export": "~3.7.0",
+    "@slickgrid-universal/graphql": "~3.7.0",
+    "@slickgrid-universal/odata": "~3.7.0",
+    "@slickgrid-universal/rxjs-observable": "~3.7.0",
+    "@slickgrid-universal/text-export": "~3.7.0",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",

src/examples/slickgrid/Example12.tsx

@@ -192,7 +192,7 @@ class Example12 extends React.Component<Props, State> {
         sanitizeDataExport: true
       },
       excelExportOptions: { exportWithFormatter: true, sanitizeDataExport: true },
-      registerExternalResources: [this.excelExportService, this.textExportService],
+      externalResources: [this.excelExportService, this.textExportService],
     };
 
     this.setState((state: State) => ({
@@ -336,4 +336,4 @@ class Example12 extends React.Component<Props, State> {
   }
 }
 
-export default withTranslation()(Example12);
+export default withTranslation()(Example12);

src/examples/slickgrid/Example13.tsx

@@ -202,7 +202,7 @@ export default class Example13 extends React.Component<Props, State> {
       enableTextExport: true,
       excelExportOptions: { sanitizeDataExport: true },
       textExportOptions: { sanitizeDataExport: true },
-      registerExternalResources: [this.excelExportService, this.textExportService],
+      externalResources: [this.excelExportService, this.textExportService],
     };
 
     this.setState((state: State) => ({

src/examples/slickgrid/Example14.tsx

@@ -70,7 +70,7 @@ export default class Example14 extends React.Component {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       explicitInitialization: true,
       colspanCallback: this.renderDifferentColspan
     };
@@ -101,7 +101,7 @@ export default class Example14 extends React.Component {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       gridMenu: { hideClearFrozenColumnsCommand: false },
       headerMenu: { hideFreezeColumnsCommand: false }
     };

src/examples/slickgrid/Example18.tsx

@@ -250,7 +250,7 @@ export default class Example18 extends React.Component<Props, State> {
       enableExcelExport: true,
       excelExportOptions: { sanitizeDataExport: true },
       textExportOptions: { sanitizeDataExport: true },
-      registerExternalResources: [this.excelExportService, this.textExportService],
+      externalResources: [this.excelExportService, this.textExportService],
     };
 
     this.setState((state: State) => ({

src/examples/slickgrid/Example23.tsx

@@ -214,7 +214,7 @@ class Example23 extends React.Component<Props, State> {
           { columnId: 'duration', direction: 'ASC' },
         ],
       },
-      registerExternalResources: [new SlickCustomTooltip(), new ExcelExportService()],
+      externalResources: [new SlickCustomTooltip(), new ExcelExportService()],
     };
 
     this.setState((state: State, props: Props) => ({

src/examples/slickgrid/Example24.tsx

@@ -304,7 +304,7 @@ class Example24 extends React.Component<Props, State> {
         // you can customize how the header titles will be styled (defaults to Bold)
         columnHeaderStyle: { font: { bold: true, italic: true } }
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       i18n: i18next,
 
       enableContextMenu: true,

src/examples/slickgrid/Example27.tsx

@@ -152,7 +152,7 @@ export default class Example27 extends React.Component<Props, State> {
       },
       enableExcelExport: true,
       excelExportOptions: { exportWithFormatter: true, sanitizeDataExport: true },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
     };
 
     this.setState((state: State) => ({

src/examples/slickgrid/Example28.tsx

@@ -153,7 +153,7 @@ export default class Example28 extends React.Component<Props, State> {
         exportWithFormatter: true,
         sanitizeDataExport: true
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       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

src/examples/slickgrid/Example30.tsx

@@ -403,7 +403,7 @@ export default class Example30 extends React.Component<Props, State> {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      registerExternalResources: [new ExcelExportService(), this.compositeEditorInstance],
+      externalResources: [new ExcelExportService(), this.compositeEditorInstance],
       enableFiltering: true,
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)

src/examples/slickgrid/Example31.tsx

@@ -163,7 +163,7 @@ export default class Example31 extends React.Component<Props, State> {
           this.displaySpinner(false);
         }
       } as OdataServiceApi,
-      registerExternalResources: [new RxJsResource()]
+      externalResources: [new RxJsResource()]
     };
 
     this.setState((state: State) => ({
@@ -588,4 +588,4 @@ export default class Example31 extends React.Component<Props, State> {
       </div>
     );
   }
-}
+}

src/examples/slickgrid/Example32.tsx

@@ -362,7 +362,7 @@ export default class Example32 extends React.Component<Props, State> {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       enableFiltering: true,
       enableRowSelection: true,
       enableCheckboxSelector: true,

src/examples/slickgrid/Example33.tsx

@@ -331,7 +331,7 @@ export default class Example32 extends React.Component<Props, State> {
         exportWithFormatter: true
       },
       // 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()],
+      externalResources: [new SlickCustomTooltip(), new ExcelExportService()],
       customTooltip: {
         formatter: this.tooltipFormatter.bind(this) as Formatter,
         headerFormatter: this.headerFormatter,

src/examples/slickgrid/Example4.tsx

@@ -235,7 +235,7 @@ export default class Example4 extends React.Component<Props, State> {
           { columnId: 'complete', direction: 'ASC' }
         ],
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
     };
   }
 

src/examples/slickgrid/Example6.tsx

@@ -315,7 +315,7 @@ class Example6 extends React.Component<Props, State> {
           };
         });
         if (this.state.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.reactGrid?.paginationService?.setCursorPageInfo((mockedResult.data[GRAPHQL_QUERY_DATASET_NAME].pageInfo));

src/slickgrid-react/components/slickgrid-react.tsx

@@ -275,6 +275,14 @@ export class SlickgridReact extends React.Component<SlickgridReactProps, State>
     // we only want to do this check once in the constructor
     this._hideHeaderRowAfterPageLoad = (props.gridOptions?.showHeaderRow === false);
 
+    // save resource refs to register before the grid options are merged and possibly deep copied
+    // since a deep copy of grid options would lose original resource refs but we want to keep them as singleton
+    this._registeredResources = props.gridOptions?.externalResources || props.gridOptions?.registerExternalResources || [];
+    /* istanbul ignore if */
+    if (props.gridOptions?.registerExternalResources) {
+      console.warn('[Slickgrid-Universal] Please note that the grid option `registerExternalResources` was deprecated, please use `externalResources` instead.');
+    }
+
     this._gridOptions = this.mergeGridOptions(props.gridOptions || {});
 
     // initialize and assign all Service Dependencies
@@ -384,6 +392,14 @@ export class SlickgridReact extends React.Component<SlickgridReactProps, State>
       }
     }
 
+    // save resource refs to register before the grid options are merged and possibly deep copied
+    // since a deep copy of grid options would lose original resource refs but we want to keep them as singleton
+    this._registeredResources = this.gridOptions?.externalResources || this.gridOptions?.registerExternalResources || [];
+    /* istanbul ignore if */
+    if (this.gridOptions?.registerExternalResources) {
+      console.warn('[Slickgrid-React] Please note that the grid option `registerExternalResources` was deprecated and will be removed in next major, please use `externalResources` instead.');
+    }
+
     this.initialization(this._eventHandler);
     this._isGridInitialized = true;
 
@@ -622,15 +638,7 @@ export class SlickgridReact extends React.Component<SlickgridReactProps, State>
     this.serviceList = [];
 
     // dispose all registered external resources
-    if (Array.isArray(this._registeredResources)) {
-      while (this._registeredResources.length > 0) {
-        const resource = this._registeredResources.pop();
-        if (resource?.dispose) {
-          resource.dispose();
-        }
-      }
-      this._registeredResources = [];
-    }
+    this.disposeExternalResources();
 
     // dispose the Components
     this.slickEmptyWarning?.dispose();
@@ -678,6 +686,18 @@ export class SlickgridReact extends React.Component<SlickgridReactProps, State>
     this.componentWillUnmount(shouldEmptyDomElementContainer);
   }
 
+  disposeExternalResources() {
+    if (Array.isArray(this._registeredResources)) {
+      while (this._registeredResources.length > 0) {
+        const res = this._registeredResources.pop();
+        if (res?.dispose) {
+          res.dispose();
+        }
+      }
+    }
+    this._registeredResources = [];
+  }
+
   componentDidUpdate(prevProps: SlickgridReactProps) {
     // get the grid options (order of precedence is Global Options first, then user option which could overwrite the Global options)
     if (this.props.gridOptions !== prevProps.gridOptions) {
@@ -1405,10 +1425,21 @@ export class SlickgridReact extends React.Component<SlickgridReactProps, State>
     return options;
   }
 
+  /** Add a register a new external resource, user could also optional dispose all previous resources before pushing any new resources to the resources array list. */
+  registerExternalResources(resources: ExternalResource[], disposePreviousResources = false) {
+    if (disposePreviousResources) {
+      this.disposeExternalResources();
+    }
+    resources.forEach(res => this._registeredResources.push(res));
+    this.initializeExternalResources(resources);
+  }
+
+  resetExternalResources() {
+    this._registeredResources = [];
+  }
+
   /** Pre-Register any Resource that don't require SlickGrid to be instantiated (for example RxJS Resource) */
   protected preRegisterResources() {
-    this._registeredResources = this.gridOptions.registerExternalResources || [];
-
     // bind & initialize all Components/Services that were tagged as enabled
     // register all services by executing their init method and providing them with the Grid object
     if (Array.isArray(this._registeredResources)) {
@@ -1420,6 +1451,16 @@ export class SlickgridReact extends React.Component<SlickgridReactProps, State>
     }
   }
 
+  protected initializeExternalResources(resources: ExternalResource[]) {
+    if (Array.isArray(resources)) {
+      for (const resource of resources) {
+        if (this.grid && typeof resource.init === 'function') {
+          resource.init(this.grid, this.props.containerService);
+        }
+      }
+    }
+  }
+
   protected registerResources() {
     // at this point, we consider all the registered services as external services, anything else registered afterward aren't external
     if (Array.isArray(this._registeredResources)) {
@@ -1450,13 +1491,7 @@ export class SlickgridReact extends React.Component<SlickgridReactProps, State>
 
     // bind & initialize all Components/Services that were tagged as enabled
     // register all services by executing their init method and providing them with the Grid object
-    if (Array.isArray(this._registeredResources)) {
-      for (const resource of this._registeredResources) {
-        if (this.grid && typeof resource.init === 'function') {
-          resource.init(this.grid, this.props.containerService);
-        }
-      }
-    }
+    this.initializeExternalResources(this._registeredResources);
   }
 
   /** Register the RxJS Resource in all necessary services which uses */