chore: release

packages/istanbul-widget/CHANGELOG.md

@@ -1,5 +1,11 @@
 # istanbul-widget
 
+## 1.5.4
+
+### Patch Changes
+
+- fix: react-dom asyn render leading to issue in safari
+
 ## 1.5.3
 
 ### Patch Changes

packages/istanbul-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "istanbul-widget",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "type": "module",
   "homepage": "https://github.com/hemengke1997/istanbul-toolkit/tree/master/packages/istanbul-widget",
   "files": [

packages/istanbul-widget/src/core/core.ts

@@ -68,7 +68,7 @@ export class IstanbulWidget {
     this._addBuiltInPlugins()
 
     // try to init
-    const _onload = () => {
+    const _onload = async () => {
       if (this.isInited) {
         return
       }
@@ -96,7 +96,7 @@ export class IstanbulWidget {
     }
   }
 
-  private _initComponent() {
+  private async _initComponent() {
     if (!$.one(`#${ISTANBUL_WIDGET_ID}`)) {
       let target: HTMLElement = document.body
       if (typeof this.option.target === 'string') {

packages/istanbul-widget/src/core/dom/react-render.ts

@@ -0,0 +1,23 @@
+import { type ReactElement } from 'react'
+import { flushSync } from 'react-dom'
+import ReactDOM, { type Root } from 'react-dom/client'
+
+const MARK = '__istanbul_widget_root__'
+
+type ContainerType = (Element | DocumentFragment) & {
+  [MARK]?: Root
+}
+
+export function reactdomRender(node: ReactElement, container: ContainerType) {
+  flushSync(() => {
+    const root = container[MARK] || ReactDOM.createRoot(container)
+    root.render(node)
+    container[MARK] = root
+  })
+}
+
+export async function reactdomUnmount(container: ContainerType) {
+  await Promise.resolve()
+  container[MARK]?.unmount()
+  delete container[MARK]
+}

packages/istanbul-widget/src/core/plugin/IstanbulWidgetPlugin.ts

@@ -6,7 +6,7 @@ import { type IstanbulWidget } from '../core'
 type Events = {
   init: []
   ready: []
-  render: [callback: (res: { htmlElement: HTMLElement | undefined }) => void]
+  render: [callback: (res: { htmlElement: HTMLElement | undefined }) => void | Promise<void>]
 }
 
 export class IstanbulWidgetPlugin {
@@ -96,8 +96,8 @@ export class IstanbulWidgetPlugin {
   }
 
   public onRender() {
-    this.on('render', (callback) => {
-      callback({ htmlElement: this.htmlElement })
+    this.on('render', async (callback) => {
+      await callback({ htmlElement: this.htmlElement })
     })
   }
 

packages/istanbul-widget/src/core/plugin/IstanbulWidgetReactPlugin.ts

@@ -1,15 +1,14 @@
 import React from 'react'
-import ReactDOM from 'react-dom/client'
 import { $ } from '@/utils/query'
 import { IstanbulWidget } from '../core'
+import { reactdomRender, reactdomUnmount } from '../dom/react-render'
 import { type PluginType } from '../options.interface'
 import { IstanbulWidgetPlugin } from './IstanbulWidgetPlugin'
 
 export type IstanbulWidgetReactPluginProps = {} & PluginType
 
 export class IstanbulWidgetReactPlugin<T extends {} = {}> extends IstanbulWidgetPlugin {
-  private _root!: ReactDOM.Root
-
+  private _root!: HTMLDivElement
   constructor(
     /**
      * 插件id
@@ -35,16 +34,18 @@ export class IstanbulWidgetReactPlugin<T extends {} = {}> extends IstanbulWidget
   onRender() {
     this.on('render', () => {
       const el = document.createElement('div')
-      const root = ReactDOM.createRoot(el)
-      root.render(
+
+      this._root = el
+
+      reactdomRender(
         React.createElement(this.Component, {
           ...((this.initialProps || {}) as T),
           id: this.id,
           name: this.name,
           domID: this.domID,
         }),
+        el,
       )
-      this._root = root
 
       const target = $.queryEl(`#${this.domID}`)
       target.appendChild(el)
@@ -57,7 +58,7 @@ export class IstanbulWidgetReactPlugin<T extends {} = {}> extends IstanbulWidget
     if (!this._root) {
       IstanbulWidget.logger.warn('[istanbul-widget]: init component first')
     } else {
-      this._root.unmount()
+      reactdomUnmount(this._root)
     }
   }
 }

packages/istanbul-widget/src/core/render.tsx

@@ -1,7 +1,7 @@
-import ReactDOM from 'react-dom/client'
 import { ISTANBUL_WIDGET_ID } from '@/utils/const'
 import Context, { type InitialWidgetProps } from './Context'
 import IstanbulWidget from './IstanbulWidget'
+import { reactdomRender, reactdomUnmount } from './dom/react-render'
 import { type PluginType } from './options.interface'
 
 export type CompInstance = {
@@ -19,19 +19,20 @@ export function render({
   const container = document.createElement('div')
   container.id = ISTANBUL_WIDGET_ID
   target.appendChild(container)
-  const reactRoot = ReactDOM.createRoot(container)
-  reactRoot.render(
+
+  reactdomRender(
     <Context.Provider value={coreOptions}>
       <IstanbulWidget />
     </Context.Provider>,
+    container,
   )
 
   return {
     destroy() {
-      reactRoot.unmount()
+      reactdomUnmount(container)
     },
-    update(newProps) {
-      reactRoot.render(
+    async update(newProps) {
+      reactdomRender(
         <Context.Provider
           value={{
             ...coreOptions,
@@ -40,12 +41,9 @@ export function render({
         >
           <IstanbulWidget />
         </Context.Provider>,
+        container,
       )
-      return new Promise((resolve) => {
-        requestIdleCallback(() => {
-          resolve(true)
-        })
-      })
+      return true
     },
   }
 }

packages/vite-plugin-istanbul-widget/CHANGELOG.md

@@ -1,5 +1,12 @@
 # vite-plugin-istanbul-widget
 
+## 1.5.6
+
+### Patch Changes
+
+- Updated dependencies
+  - istanbul-widget@1.5.4
+
 ## 1.5.5
 
 ### Patch Changes

packages/vite-plugin-istanbul-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-istanbul-widget",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "type": "module",
   "homepage": "https://github.com/hemengke1997/istanbul-toolkit/tree/master/packages/vite-plugin-istanbul-widget",
   "main": "./dist/index.cjs",