feat(web): support for using lynx.queueMicrotask.

.changeset/cuddly-beans-enter.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-worker-runtime": patch
+---
+
+feat: support for using `lynx.queueMicrotask`.

cspell.jsonc

@@ -135,6 +135,7 @@
     // lighthouse CI
     "lhci",
     "lh",
+    "queueMicrotask",
   ],
   // Glob
   "ignorePaths": [

packages/web-platform/web-tests/tests/react.spec.ts

@@ -35,7 +35,7 @@
 
 const expectHasText = async (page: Page, text: string) => {
   const hasText = (await page.getByText(text).count()) === 1;
   await expect(hasText).toBe(true);
 };
 
 const expectNoText = async (page: Page, text: string) => {
@@ -602,7 +602,7 @@
         document.querySelector('lynx-view')!.remove();
       });
       await wait(50);
       expect(message).toContain('fin');
       expect(page.workers().length).toStrictEqual(1);
     });
 
@@ -933,7 +933,7 @@
         globalThis.lynxView.sendGlobalEvent('event-test', ['change']);
       });
       await wait(100);
       await expect(target).toHaveCSS(
         'background-color',
         'rgb(0, 128, 0)',
       ); // green;
@@ -956,6 +956,15 @@
       await wait(100);
       await expect(result).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
     });
+    test(
+      'api-queueMicrotask',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await wait(200);
+        const target = page.locator('#target');
+        await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
+      },
+    );
   });
 
   test.describe('configs', () => {
@@ -1137,7 +1146,7 @@
       await wait(100);
       const target = page.locator('#target');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('pink');
     });
@@ -2077,7 +2086,7 @@
           await page.locator('.focus').click({ force: true });
           await wait(100);
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('bindfocus');
         },
       );
       // input/focus test-case end
@@ -2088,7 +2097,7 @@
         await page.locator('input').click({ force: true });
         await wait(100);
         const result = await page.locator('.result').first().innerText();
         expect(result).toBe('bindfocus');
       });
       // input/bindfocus test-case end
 
@@ -2098,7 +2107,7 @@
         await page.locator('input').press('Enter');
         await wait(100);
         const result = await page.locator('.result').first().innerText();
         expect(result).toBe('bindconfirm');
       });
       // input/bindconfirm test-case end
 

packages/web-platform/web-tests/tests/react/api-queueMicrotask/index.jsx

@@ -0,0 +1,26 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root, useEffect, useState } from '@lynx-js/react';
+
+function App() {
+  const [color, setColor] = useState('pink');
+  useEffect(() => {
+    lynx.queueMicrotask(() => {
+      setColor('green');
+    });
+  }, []);
+
+  return (
+    <view
+      id='target'
+      style={{
+        height: '100px',
+        width: '100px',
+        background: color,
+      }}
+    />
+  );
+}
+
+root.render(<App></App>);

packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/createBackgroundLynx.ts

@@ -43,5 +43,8 @@ export function createBackgroundLynx(
       mainThreadRpc,
       config.customSections,
     ),
+    queueMicrotask: (callback: () => void) => {
+      queueMicrotask(callback);
+    },
   };
 }