fix: fallback to setTimeout when queueMicrotask fails in SF (#2017)

Author: ghiscoding

packages/common/src/editors/dateEditor.ts

@@ -1,6 +1,6 @@
 import { parse } from '@formkit/tempo';
 import { BindingEventService } from '@slickgrid-universal/binding';
-import { createDomElement, emptyElement, extend, setDeepValue } from '@slickgrid-universal/utils';
+import { createDomElement, emptyElement, extend, queueMicrotaskOrSetTimeout, setDeepValue } from '@slickgrid-universal/utils';
 import { Calendar, type FormatDateString, type Options } from 'vanilla-calendar-pro';
 
 import { Constants } from './../constants.js';
@@ -206,7 +206,7 @@ export class DateEditor implements Editor {
         }
       }) as EventListener);
 
-      queueMicrotask(() => {
+      queueMicrotaskOrSetTimeout(() => {
         this.calendarInstance = new Calendar(this._inputElm, this._pickerMergedOptions);
         this.calendarInstance.init();
         if (!compositeEditorOptions) {
@@ -226,7 +226,7 @@ export class DateEditor implements Editor {
   }
 
   destroy(): void {
-    queueMicrotask(() => {
+    queueMicrotaskOrSetTimeout(() => {
       this.hide();
       this.calendarInstance?.destroy();
       emptyElement(this._editorInputGroupElm);

packages/common/src/services/filter.service.ts

@@ -1,5 +1,5 @@
 import { type BasePubSubService } from '@slickgrid-universal/event-pub-sub';
-import { extend, stripTags } from '@slickgrid-universal/utils';
+import { extend, queueMicrotaskOrSetTimeout, stripTags } from '@slickgrid-universal/utils';
 import { dequal } from 'dequal/lite';
 
 import { Constants } from '../constants.js';
@@ -858,7 +858,7 @@ export class FilterService {
       // and we did not have time to convert it to a flat dataset yet (for SlickGrid to use),
       // we would end up calling the pre-filter too early because these pre-filter works only a flat dataset
       // for that use case (like Example 6), we can queue a microtask to be executed at the end of current task
-      queueMicrotask(() => this.refreshTreeDataFilters());
+      queueMicrotaskOrSetTimeout(() => this.refreshTreeDataFilters());
     }
   }
 

packages/common/src/services/pagination.service.ts

@@ -14,6 +14,7 @@ import type { SharedService } from './shared.service.js';
 import { propertyObserver } from './observers.js';
 import type { Observable, RxJsFacade } from './rxjsFacade.js';
 import { type SlickDataView, SlickEventHandler, type SlickGrid } from '../core/index.js';
+import { queueMicrotaskOrSetTimeout } from '@slickgrid-universal/utils';
 
 export class PaginationService {
   protected _eventHandler: SlickEventHandler;
@@ -143,7 +144,7 @@ export class PaginationService {
           };
         }
       });
-      queueMicrotask(() => {
+      queueMicrotaskOrSetTimeout(() => {
         if (this.dataView) {
           this.dataView.setRefreshHints({ isFilterUnchanged: true });
           this.dataView.setPagingOptions({ pageSize: this.paginationOptions.pageSize, pageNum: this._pageNumber - 1 }); // dataView page starts at 0 instead of 1

packages/utils/src/__tests__/utils.spec.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it, test } from 'vitest';
+import { beforeEach, describe, expect, it, test, vi } from 'vitest';
 
 import {
   addToArrayWhenNotExists,
@@ -26,6 +26,7 @@ import {
   toSnakeCase,
   uniqueArray,
   uniqueObjectArray,
+  queueMicrotaskOrSetTimeout,
 } from '../utils.js';
 
 function removeExtraSpaces(text: string) {
@@ -661,6 +662,57 @@ describe('Service/Utilies', () => {
     });
   });
 
+  describe('queueMicrotaskOrSetTimeout() method', () => {
+    it('use queueMicrotask() when available', () =>
+      new Promise((done: any) => {
+        const callback = vi.fn();
+
+        // Mock queueMicrotask
+        const queueMicrotaskSpy = vi.spyOn(global, 'queueMicrotask');
+
+        // Call the function being tested
+        queueMicrotaskOrSetTimeout(callback);
+
+        // Wait for the callback to be executed
+        setTimeout(() => {
+          expect(queueMicrotaskSpy).toHaveBeenCalledWith(callback);
+          expect(callback).toHaveBeenCalledTimes(1);
+          queueMicrotaskSpy.mockRestore();
+          done();
+        }, 10);
+      }));
+
+    it('use setTimeout() fallback when queueMicrotask() is not available', () =>
+      new Promise((done: any) => {
+        const callback = vi.fn();
+
+        // Mock queueMicrotask
+        const queueMicrotaskSpy = vi.spyOn(global, 'queueMicrotask');
+        queueMicrotaskSpy.mockImplementation(() => {
+          // Simulate queueMicrotask throwing an error
+          throw new Error('queueMicrotask not available');
+        });
+
+        // Mock setTimeout
+        const setTimeoutSpy = vi.spyOn(global, 'setTimeout');
+
+        // Call the function being tested
+        queueMicrotaskOrSetTimeout(callback);
+
+        // Assertions
+        expect(queueMicrotaskSpy).toHaveBeenCalledWith(callback);
+        expect(setTimeoutSpy).toHaveBeenCalledWith(expect.any(Function), 0);
+
+        // Wait for the callback to be executed
+        setTimeout(() => {
+          expect(callback).toHaveBeenCalledTimes(1);
+          queueMicrotaskSpy.mockRestore();
+          setTimeoutSpy.mockRestore();
+          done();
+        }, 10);
+      }));
+  });
+
   describe('removeAccentFromText() method', () => {
     it('should return a normalized string without accent', () => {
       const input1 = 'José';

packages/utils/src/utils.ts

@@ -240,6 +240,15 @@ export function parseBoolean(input: any): boolean {
   return /(true|1)/i.test(input + '');
 }
 
+/** use `queueMicrotask()` when available, otherwise fallback to `setTimeout` for Salesforce LWC locker service */
+export function queueMicrotaskOrSetTimeout(callback: () => void): void {
+  try {
+    queueMicrotask(callback);
+  } catch {
+    setTimeout(callback, 0);
+  }
+}
+
 /**
  * Remove any accents from a string by normalizing it
  * @param {String} text - input text

packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts

@@ -53,7 +53,7 @@ import {
   SlickGrid,
   unsubscribeAll,
 } from '@slickgrid-universal/common';
-import { extend } from '@slickgrid-universal/utils';
+import { extend, queueMicrotaskOrSetTimeout } from '@slickgrid-universal/utils';
 import { EventNamingStyle, EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
@@ -197,7 +197,7 @@ export class SlickVanillaGridBundle<TData = any> {
 
       // we also need to reset/refresh the Tree Data filters because if we inserted new item(s) then it might not show up without doing this refresh
       // however we need to queue our process until the flat dataset is ready, so we can queue a microtask to execute the DataView refresh only after everything is ready
-      queueMicrotask(() => {
+      queueMicrotaskOrSetTimeout(() => {
         const flatDatasetLn = this.dataView?.getItemCount() ?? 0;
         if (flatDatasetLn > 0 && (flatDatasetLn !== prevFlatDatasetLn || !isDatasetEqual)) {
           this.filterService.refreshTreeDataFilters();
@@ -967,7 +967,7 @@ export class SlickVanillaGridBundle<TData = any> {
         const process = isExecuteCommandOnInit ? (backendApi.process?.(query) ?? null) : (backendApi.onInit?.(query) ?? null);
 
         // wrap this inside a microtask to be executed at the end of the task and avoid timing issue since the gridOptions needs to be ready before running this onInit
-        queueMicrotask(() => {
+        queueMicrotaskOrSetTimeout(() => {
           const backendUtilityService = this.backendUtilityService as BackendUtilityService;
           // keep start time & end timestamps & return it after process execution
           const startTime = new Date();