extract flushMicrotask as a helper, improve implementation

Author: vursen

packages/react-components/src/renderers/useRenderer.ts

@@ -9,6 +9,7 @@ import {
 } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import type { Slice, WebComponentRenderer } from './renderer.js';
+import { flushMicrotask } from '../utils/flushMicrotask.js';
 
 export type UseRendererResult<W extends WebComponentRenderer> = readonly [
   portals?: ReadonlyArray<ReactElement | null>,
@@ -28,22 +29,6 @@ export type RendererConfig = {
   renderMode?: 'default' | 'sync' | 'microtask';
 };
 
-const renderQueue: Array<(...args: any[]) => any> = [];
-
-function flushMicrotask(callback: (...args: any[]) => any) {
-  renderQueue.push(callback);
-
-  if (renderQueue.length === 1) {
-    queueMicrotask(() => {
-      flushSync(() => {
-        while (renderQueue.length) {
-          renderQueue.shift()!();
-        }
-      });
-    });
-  }
-}
-
 export function useRenderer<P extends {}, W extends WebComponentRenderer>(
   node: ReactNode,
   convert?: (props: Slice<Parameters<W>, 1>) => PropsWithChildren<P>,

packages/react-components/src/utils/flushMicrotask.ts

@@ -0,0 +1,18 @@
+import { flushSync } from 'react-dom';
+
+let callbackQueue: Function[] = [];
+
+export function flushMicrotask(callback: Function) {
+  callbackQueue.push(callback);
+
+  if (callbackQueue.length === 1) {
+    queueMicrotask(() => {
+      const queue = callbackQueue;
+      callbackQueue = [];
+
+      flushSync(() => {
+        queue.forEach((callback) => callback());
+      });
+    });
+  }
+}