Merge pull request #1643 from ghiscoding/bugfix/settimeout-types

fix: use setTimeout/setInterval from window object with correct TS type
ghiscoding · Aug 17, 2024 · 14c04d7 · 14c04d7
2 parents 5cbaf31 + 7fc57ce
commit 14c04d7
Show file tree

Hide file tree

Showing 40 changed files with 184 additions and 194 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/package.json b/examples/vite-demo-vanilla-bundle/package.json
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@types/fnando__sparkline": "^0.3.7",
-    "@types/node": "^20.15.0",
+    "@types/node": "^22.4.0",
     "@types/whatwg-fetch": "^0.0.33",
     "sass": "^1.77.8",
     "typescript": "^5.5.4",

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example02.ts b/examples/vite-demo-vanilla-bundle/src/examples/example02.ts
@@ -188,7 +188,7 @@ export default class Example02 {
           collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
 
           // Select Filters can also support collection that are async, it could be a Promise (shown below) or Fetch result
-          // collectionAsync: new Promise<any>(resolve => setTimeout(() => {
+          // collectionAsync: new Promise<any>(resolve => window.setTimeout(() => {
           //   resolve([{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }]);
           // }, 250)),
         },

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example05.ts b/examples/vite-demo-vanilla-bundle/src/examples/example05.ts
@@ -72,7 +72,7 @@ export default class Example05 {
   }
 
   hideSpinner() {
-    setTimeout(() => this.loadingClass = '', 200); // delay the hide spinner a bit to avoid show/hide too quickly
+    window.setTimeout(() => this.loadingClass = '', 200); // delay the hide spinner a bit to avoid show/hide too quickly
   }
 
   showSpinner() {

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example06.ts b/examples/vite-demo-vanilla-bundle/src/examples/example06.ts
@@ -298,7 +298,7 @@ export default class Example06 {
       this.sgb.datasetHierarchical = this.datasetHierarchical;
 
       // scroll into the position where the item was added with a delay since it needs to recreate the tree grid
-      setTimeout(() => {
+      window.setTimeout(() => {
         const rowIndex = this.sgb.dataView?.getRowById(newId) as number;
         this.sgb.slickGrid?.scrollRowIntoView(rowIndex + 3);
       }, 0);

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts
@@ -207,7 +207,7 @@ export default class Example07 {
 
           // Select Editor can also support collection that are async, it could be a Promise (shown below) or Fetch result
           enableRenderHtml: true,
-          collectionAsync: new Promise<any>(resolve => setTimeout(() => {
+          collectionAsync: new Promise<any>(resolve => window.setTimeout(() => {
             resolve([
               { value: true, label: 'True', labelSuffix: `<i class="mdi mdi-check mdi-16px"></i> ` },
               { value: false, label: 'False', labelSuffix: `<i class="mdi mdi-close mdi-16px"></i> ` }
@@ -241,7 +241,7 @@ export default class Example07 {
 
           // OR 2- use a Promise
           collectionAsync: new Promise<any>((resolve) => {
-            setTimeout(() => {
+            window.setTimeout(() => {
               resolve(Array.from(Array((this.dataset || []).length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
             }, 500);
           }),
@@ -266,7 +266,7 @@ export default class Example07 {
         filter: {
           // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA),
           collectionAsync: new Promise((resolve) => {
-            setTimeout(() => {
+            window.setTimeout(() => {
               resolve(Array.from(Array((this.dataset || []).length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
             });
           }),
@@ -363,7 +363,7 @@ export default class Example07 {
     const newRows = this.loadData(1, lastRowIndex);
 
     // wrap into a timer to simulate a backend async call
-    setTimeout(() => {
+    window.setTimeout(() => {
       // at any time, we can poke the "collection" property and modify it
       const requisiteColumnDef = this.columnDefinitions.find((column: Column) => column.id === 'prerequisites') as Column;
       if (requisiteColumnDef) {

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example09.ts b/examples/vite-demo-vanilla-bundle/src/examples/example09.ts
@@ -386,7 +386,7 @@ export default class Example09 {
       }
       const updatedData = filteredData.slice(firstRow, firstRow + top);
 
-      setTimeout(() => {
+      window.setTimeout(() => {
         const backendResult = { query };
         if (!this.isCountEnabled) {
           backendResult['totalRecordCount'] = countTotalItems;

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example10.ts b/examples/vite-demo-vanilla-bundle/src/examples/example10.ts
@@ -302,7 +302,7 @@ export default class Example10 {
     };
 
     return new Promise<GraphqlPaginatedResult>(resolve => {
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.graphqlQuery = this.gridOptions.backendServiceApi!.service.buildQuery();
         if (this.isWithCursor) {
           // When using cursor pagination, the pagination service needs to be updated with the PageInfo data from the latest request
@@ -377,7 +377,7 @@ export default class Example10 {
       { columnId: 'name', direction: 'asc' },
       { columnId: 'company', direction: SortDirection.DESC }
     ]);
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.sgb?.paginationService?.changeItemPerPage(20);
       this.sgb?.paginationService?.goToPageNumber(2);
     });

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11-modal.ts b/examples/vite-demo-vanilla-bundle/src/examples/example11-modal.ts
@@ -40,7 +40,7 @@ export default class Example11Modal {
         this.sgb = new Slicker.GridBundle(this.gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, dataset);
 
         // force editor to open (top-left)
-        setTimeout(() => this.sgb.slickGrid?.gotoCell(0, 0, true), 50);
+        window.setTimeout(() => this.sgb.slickGrid?.gotoCell(0, 0, true), 50);
       }
       this.remoteCallbackFn = bindings.remoteCallback;
       this.selectedIds = bindings.selectedIds || [];

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts
@@ -988,7 +988,7 @@ export default class Example12 {
         break;
     }
 
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.compositeEditorInstance?.openDetails({
         headerTitle: modalTitle,
         modalType,
@@ -1021,7 +1021,7 @@ export default class Example12 {
 
             // simulate a backend server call which will reject if the "% Complete" is below 50%
             return new Promise((resolve, reject) => {
-              setTimeout(
+              window.setTimeout(
                 () => (formValues.percentComplete >= 50) ? resolve(true) : reject('Unfortunately we only accept a minimum of 50% Completion...'),
                 serverResponseDelay
               );
@@ -1031,7 +1031,7 @@ export default class Example12 {
             // we'll just apply the change without any rejection from the server and
             // note that we also have access to the "dataContext" which is only available for these modal
             console.log(`${modalType} item data context`, dataContextOrUpdatedDatasetPreview);
-            return new Promise(resolve => setTimeout(() => resolve(true), serverResponseDelay));
+            return new Promise(resolve => window.setTimeout(() => resolve(true), serverResponseDelay));
           }
         }
       });

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts
@@ -548,7 +548,7 @@ export default class Example14 {
   }
 
   hideSpinner() {
-    setTimeout(() => this.loadingClass = '', 200); // delay the hide spinner a bit to avoid show/hide too quickly
+    window.setTimeout(() => this.loadingClass = '', 200); // delay the hide spinner a bit to avoid show/hide too quickly
   }
 
   showSpinner() {

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example15.ts b/examples/vite-demo-vanilla-bundle/src/examples/example15.ts
@@ -383,7 +383,7 @@ export default class Example15 {
       }
       const updatedData = filteredData.slice(firstRow, firstRow + top);
 
-      setTimeout(() => {
+      window.setTimeout(() => {
         let countPropName = 'totalRecordCount';
         if (this.isCountEnabled) {
           countPropName = (this.odataVersion === 4) ? '@odata.count' : 'odata.count';

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts
@@ -76,7 +76,7 @@ export default class Example16 {
           // you will need to provide an `asyncPost` function returning a Promise and also `asyncPostFormatter` formatter to display the result once the Promise resolves
           formatter: () => `<div><span class="mdi mdi-load mdi-spin-1s"></span> loading...</div>`,
           asyncProcess: () => new Promise(resolve => {
-            setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), this.serverApiDelay);
+            window.setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), this.serverApiDelay);
           }),
           asyncPostFormatter: this.tooltipTaskAsyncFormatter,
 
@@ -191,7 +191,7 @@ export default class Example16 {
 
           // 2- delay the opening by a simple Promise and `setTimeout`
           asyncProcess: () => new Promise(resolve => {
-            setTimeout(() => resolve({}), this.serverApiDelay); // delayed by half a second
+            window.setTimeout(() => resolve({}), this.serverApiDelay); // delayed by half a second
           }),
           asyncPostFormatter: this.tooltipFormatter.bind(this),
         },
@@ -246,7 +246,7 @@ export default class Example16 {
 
           // OR 2- use a Promise
           collectionAsync: new Promise<any>((resolve) => {
-            setTimeout(() => {
+            window.setTimeout(() => {
               resolve(Array.from(Array((this.dataset || []).length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
             }, 500);
           }),
@@ -263,7 +263,7 @@ export default class Example16 {
         filter: {
           // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA),
           collectionAsync: new Promise((resolve) => {
-            setTimeout(() => {
+            window.setTimeout(() => {
               resolve(Array.from(Array((this.dataset || []).length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
             });
           }),

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example18.ts b/examples/vite-demo-vanilla-bundle/src/examples/example18.ts
@@ -88,7 +88,7 @@ export default class Example18 {
   minChangePerCycle = 0;
   maxChangePerCycle = 10;
   refreshRate = 75;
-  timer: any;
+  timer: number;
   toggleClassName = this.isFullScreen ? 'mdi mdi-arrow-collapse' : 'mdi mdi-arrow-expand';
   sgb: SlickVanillaGridBundle;
 
@@ -100,7 +100,7 @@ export default class Example18 {
     this.dataset = this.getData(NB_ITEMS);
     this.sgb = new Slicker.GridBundle(document.querySelector(`.grid18`) as HTMLDivElement, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
 
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.startSimulation();
     }, this.refreshRate);
     document.body.classList.add('material-theme');
@@ -304,11 +304,11 @@ export default class Example18 {
       // but the cell highlight actually does that for us so we can skip it
     }
 
-    this.timer = setTimeout(this.startSimulation.bind(this), this.refreshRate || 0);
+    this.timer = window.setTimeout(this.startSimulation.bind(this), this.refreshRate || 0);
   }
 
   stopSimulation() {
-    clearTimeout(this.timer);
+    window.clearTimeout(this.timer);
   }
 
   findColumnById(columnName: string): Column {
@@ -323,7 +323,7 @@ export default class Example18 {
         this.sgb.slickGrid?.setCellCssStyles(`highlight_${[column.id]}${row}`, hash);
 
         // remove highlight after x amount of time
-        setTimeout(() => this.removeCellStyling(item, column, row), this.highlightDuration);
+        window.setTimeout(() => this.removeCellStyling(item, column, row), this.highlightDuration);
       }
     }
   }

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example20.ts b/examples/vite-demo-vanilla-bundle/src/examples/example20.ts
@@ -32,7 +32,7 @@ export default class Example20 {
 
     // not sure why but ShadowDOM seems a little slower to render,
     // let's wrap the grid resize in a delay & show the grid only after the resize
-    setTimeout(async () => {
+    window.setTimeout(async () => {
       this.sgb = new Slicker.GridBundle(shadowObj.gridContainer as HTMLDivElement, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
       await this.sgb.resizerService.resizeGrid(150);
       shadowObj.gridContainer.style.opacity = '1';

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example21.ts b/examples/vite-demo-vanilla-bundle/src/examples/example21.ts
@@ -256,7 +256,7 @@ export default class Example21 {
 
     // fill the template on async delay
     return new Promise((resolve) => {
-      setTimeout(() => {
+      window.setTimeout(() => {
         const itemDetail = item;
 
         // let's add some extra properties to our item for a better async simulation
@@ -310,7 +310,7 @@ export default class Example21 {
       this.statusClass = 'notification is-light is-danger is-narrow';
 
       // remove message after 2sec.
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.status = '';
         this.statusClass = '';
       }, 2000);

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example22.ts b/examples/vite-demo-vanilla-bundle/src/examples/example22.ts
@@ -266,7 +266,7 @@ export default class Example22 {
 
 function fakeFetch(_input: string | URL | Request, _init?: RequestInit | undefined): Promise<Response> {
   return new Promise((resolve) => {
-    setTimeout(() => {
+    window.setTimeout(() => {
       resolve(new Response(JSON.stringify({ status: 200, message: 'success' })));
       // reduces the delay for automated Cypress tests
     }, (window as any).Cypress ? 10 : 500);

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example26.ts b/examples/vite-demo-vanilla-bundle/src/examples/example26.ts
@@ -366,7 +366,7 @@ export default class Example26 {
       }
       const updatedData = filteredData.slice(firstRow, firstRow + top);
 
-      setTimeout(() => {
+      window.setTimeout(() => {
         const backendResult = { query };
         backendResult['value'] = updatedData;
         backendResult['@odata.count'] = countTotalItems;

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example27.ts b/examples/vite-demo-vanilla-bundle/src/examples/example27.ts
@@ -313,7 +313,7 @@ export default class Example27 {
     };
 
     return new Promise<GraphqlPaginatedResult>(resolve => {
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.graphqlQuery = this.gridOptions.backendServiceApi!.service.buildQuery();
         resolve(mockedResult);
       }, this.serverWaitDelay);

diff --git a/examples/vite-demo-vanilla-bundle/src/renderer.ts b/examples/vite-demo-vanilla-bundle/src/renderer.ts
@@ -72,7 +72,7 @@ export class Renderer {
     let output = '';
 
     // // wait a cycle so that the View is rendered before observing anything
-    // setTimeout(() => {
+    //window.setTimeout(() => {
     //   const elements = document.querySelectorAll<HTMLElement>(`[${eventName}\\\.${eventType}]`);
     //   let args: any = /\(\s*([^)]+?)\s*\)/.exec(fnArgs);
     //   if (args?.[1]) {
@@ -96,7 +96,7 @@ export class Renderer {
    */
   parsePropertyBinding(match: string, domAttribute: string, bindingType: string, variableName: string) {
     // wait a cycle so that the View is rendered before observing anything
-    setTimeout(() => {
+    window.setTimeout(() => {
       const elements = document.querySelectorAll<HTMLElement>(`[${domAttribute}\\.${bindingType}=${variableName}]`);
       const attribute = domAttribute.toLowerCase();
 

diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "@lerna-lite/run": "^3.8.0",
     "@lerna-lite/watch": "^3.8.0",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.15.0",
+    "@types/node": "^22.4.0",
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^13.13.3",