✨ use MessageChannel when requestIdleCallback isn't available

Safari on desktop and mobile doesn't support requestIdleCallback. This adds supports for Safari.

src/nextTask.ts

@@ -0,0 +1,6 @@
+export default function nextTask(callback: () => void): void {
+    const channel = new MessageChannel()
+    channel.port2.postMessage(undefined)
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    channel.port1.onmessage = (): void => callback()
+}

src/phaseTracking.ts

@@ -7,6 +7,10 @@ export type IdlePhase = {
 let shouldRequestAnimationFrame = false
 
 const idlePhaseTracker = createPhaseTracker((callback: (idlePhase: IdlePhase) => void) => {
+    if (typeof requestIdleCallback === 'undefined') {
+        return
+    }
+
     const handleIdleCallback = (): void => {
         requestIdleCallback(
             (deadline) => {

src/yieldControl.ts

@@ -1,3 +1,4 @@
+import nextTask from './nextTask'
 import waitCallback from './waitCallback'
 import isTimeToYield from './isTimeToYield'
 import requestLaterMicrotask from './requestLaterMicrotask'
@@ -20,7 +21,11 @@ export default async function yieldControl(priority: 'user-visible' | 'backgroun
 }
 
 async function schedule(priority: 'user-visible' | 'background'): Promise<void> {
-    if (priority === 'user-visible') {
+    if (typeof requestIdleCallback === 'undefined') {
+        await waitCallback(requestAnimationFrame)
+
+        await waitCallback(nextTask)
+    } else if (priority === 'user-visible') {
         await waitCallback(requestLaterMicrotask)
 
         await waitCallback(requestIdleCallback, {

test.ts

@@ -331,6 +331,38 @@ describe('main-thread-scheduling', () => {
 
         expect(jestFn.mock.calls.length).toBe(1)
     })
+
+    it(`use MessageChannel when requstIdleCallback isn't available`, async () => {
+        const original = window.requestIdleCallback
+        // @ts-ignore
+        window.requestIdleCallback = undefined
+
+        const mock = createMessageChannelMock()
+
+        const jestFn = jest.fn()
+
+        ;(async () => {
+            await yieldControl('background')
+
+            jestFn()
+        })()
+
+        await wait()
+
+        requestAnimationFrameMock.callRequestAnimationFrame()
+
+        await wait()
+
+        mock.callMessage()
+
+        await wait()
+
+        expect(jestFn.mock.calls.length).toBe(1)
+
+        mock.mockRestore()
+
+        window.requestIdleCallback = original
+    })
 })
 
 // we use wait because:
@@ -447,6 +479,36 @@ function createRequestAnimationFrameMock() {
     }
 }
 
+function createMessageChannelMock() {
+    const messageChannels: MessageChannelMock[] = []
+
+    class MessageChannelMock {
+        port1: {
+            onmessage?: () => void
+        } = {}
+        port2 = {
+            postMessage() {},
+        }
+        constructor() {
+            messageChannels.push(this)
+        }
+    }
+
+    ;(global as any).MessageChannel = MessageChannelMock
+
+    return {
+        callMessage() {
+            for (const channel of messageChannels) {
+                channel.port1.onmessage?.()
+            }
+        },
+
+        mockRestore() {
+            ;(global as any).MessageChannel = undefined
+        },
+    }
+}
+
 function isTimeToYieldMocked(priority: 'background' | 'user-visible'): boolean {
     const originalDateNow = Date.now