chore: release

packages/istanbul-widget/CHANGELOG.md

@@ -1,5 +1,18 @@
 # istanbul-widget
 
+## 1.4.0
+
+### Minor Changes
+
+- feat
+
+  - debug mode
+  - html+dom plugin
+
+- refactor
+
+  - istanbulWidget.event.on ===> istanbulWidget.on
+
 ## 1.3.3
 
 ### Patch Changes

packages/istanbul-widget/README.md

@@ -119,9 +119,73 @@ interface IstanbulWidgetOptions {
    * 插件顺序
    */
   pluginOrder?: (PluginName | string)[]
+  /**
+   * 打印调试信息
+   * @default false
+   */
+  debug?: boolean
 }
 ```
 
+## 编写插件
+
+支持 react插件 和 原生html+dom插件
+
+```tsx
+import { IstanbulWidget } from 'istanbul-widget'
+import { Button } from 'istanbul-widget/components'
+
+function ReactPlugin() {
+  return <Button size={'sm'}>this is react Plugin</Button>
+}
+
+// 自定义react插件
+const reactPlugin = new IstanbulWidget.IstanbulWidgetReactPlugin('react_plugin', 'React Plugin', ReactPlugin)
+
+reactPlugin.on('init', () => {
+  console.log('react plugin inited')
+})
+
+// 自定义html插件
+const htmlEl = document.createElement('div')
+htmlEl.innerHTML = 'this is html plugin'
+const htmlPlugin = new IstanbulWidget.IstanbulWidgetPlugin('html_plugin', 'HTML Plugin', htmlEl)
+
+htmlPlugin.on('init', () => {
+  console.log('html plugin inited')
+})
+
+const istanbulWidget = new IstanbulWidget({
+  defaultPosition: {
+    x: 0,
+    y: 100,
+  },
+  plugin: {
+    // 上报按钮
+    report: {
+      onReport(coverage) {
+        console.log('上报', coverage)
+        throw new Error('上报失败')
+      },
+    },
+    // 设置插件
+    setting: {
+      requireReporter: true,
+    },
+    buttonGroup: [
+      {
+        text: '额外按钮 - 1',
+        onClick() {
+          console.log('1')
+        },
+      },
+    ],
+  },
+})
+
+istanbulWidget.addPlugin(reactPlugin)
+istanbulWidget.addPlugin(htmlPlugin)
+```
 
 ## 截图
 

packages/istanbul-widget/dev.tsx

@@ -1,15 +1,24 @@
 import { Button } from './src/components/ui'
 import { IstanbulWidget } from './src/istanbul-widget'
 
-function MyPlugin() {
-  return <Button size={'sm'}>this is my Plugin</Button>
+function ReactPlugin() {
+  return <Button size={'sm'}>this is react Plugin</Button>
 }
 
-// 自定义插件
-const myPlugin = new IstanbulWidget.IstanbulWidgetReactPlugin('my_plugin', 'My Plugin', MyPlugin)
+// 自定义react插件
+const reactPlugin = new IstanbulWidget.IstanbulWidgetReactPlugin('react_plugin', 'React Plugin', ReactPlugin)
 
-myPlugin.event.on('init', () => {
-  console.log('my plugin inited')
+reactPlugin.on('init', () => {
+  console.log('react plugin inited')
+})
+
+// 自定义html插件
+const htmlEl = document.createElement('div')
+htmlEl.innerHTML = 'this is html plugin'
+const htmlPlugin = new IstanbulWidget.IstanbulWidgetPlugin('html_plugin', 'HTML Plugin', htmlEl)
+
+htmlPlugin.on('init', () => {
+  console.log('html plugin inited')
 })
 
 const istanbulWidget = new IstanbulWidget({
@@ -44,6 +53,9 @@ const istanbulWidget = new IstanbulWidget({
       },
     ],
   },
+  pluginOrder: ['report', 'react_plugin', 'html_plugin', 'buttonGroup', 'setting'],
+  debug: true,
 })
 
-istanbulWidget.addPlugin(myPlugin)
+istanbulWidget.addPlugin(reactPlugin)
+istanbulWidget.addPlugin(htmlPlugin)

packages/istanbul-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "istanbul-widget",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "type": "module",
   "files": [
     "**"
@@ -47,10 +47,11 @@
     "@radix-ui/react-toast": "^1.1.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "consola": "^3.2.3",
     "context-state": "^2.3.1",
+    "eventemitter3": "^5.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "strict-event-emitter": "^0.5.1",
     "tailwind-merge": "^2.2.2",
     "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7"

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

@@ -1,6 +1,7 @@
 import { useDebounceFn, useLatest, useSetState } from '@minko-fe/react-hook'
 import { createContainer } from 'context-state'
 import { useToast } from '@/components/ui'
+import { IstanbulWidget } from './core'
 import { type IstanbulWidgetOptions, type PluginName, type PluginType, type ReportParams } from './options.interface'
 
 export type InitialWidgetProps = IstanbulWidgetOptions & {
@@ -59,7 +60,7 @@ function useContext(initialValues: InitialWidgetProps) {
             description: '上报失败，请打开控制台查看原因',
             variant: 'destructive',
           })
-        console.error('[istanbul-widget]:', e)
+        IstanbulWidget.logger.error('[istanbul-widget]:', e)
       } finally {
         // after report
         await Promise.all(reportActions.after.map(async (action) => await action.fn(latestParams)))

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

@@ -78,7 +78,7 @@ export default function IstanbulWidget() {
                 style={{
                   backgroundColor: 'rgba(0, 0, 0, 0.25)',
                 }}
-                id='__iw-icon'
+                id={`${ISTANBUL_WIDGET_ID}__icon`}
               >
                 <div className='iw-icon-[vscode-icons--file-type-testjs] iw-w-full iw-h-full'></div>
               </div>
@@ -88,12 +88,15 @@ export default function IstanbulWidget() {
           <PopoverContent sideOffset={2}>
             <div
               className='iw-flex iw-items-center iw-space-x-2 iw-rounded-md iw-p-2 iw-text-xs iw-shadow'
-              id={`${ISTANBUL_WIDGET_ID}_popover`}
+              id={`${ISTANBUL_WIDGET_ID}__popover`}
             >
               {Object.entries(pluginList).map(([_, plugin]) => {
                 return (
                   <PopoverClose asChild key={plugin.id}>
-                    <div id={plugin.id}></div>
+                    <div
+                      id={plugin.domID}
+                      ref={(el) => el && plugin.htmlElement && el.appendChild(plugin.htmlElement)}
+                    />
                   </PopoverClose>
                 )
               })}

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

@@ -1,11 +1,12 @@
 import { deepMerge, isArray, isFunction, isObject, set } from '@minko-fe/lodash-pro'
+import { type ConsolaInstance, LogLevels, createConsola } from 'consola'
 import { ButtonGroupPlugin } from '@/plugins/button-group/ButtonGroupPlugin'
 import { ReportPlugin } from '@/plugins/report/ReportPlugin'
 import { SettingPlugin } from '@/plugins/setting/SettingPlugin'
 import { ISTANBUL_WIDGET_ID } from '@/utils/const'
 import { $ } from '@/utils/query'
 import Context from './Context'
-import { type IstanbulWidgetOptions, type PluginName } from './options.interface'
+import { type IstanbulWidgetOptions, type PluginName, type PluginType } from './options.interface'
 import { IstanbulWidgetPlugin } from './plugin/IstanbulWidgetPlugin'
 import { IstanbulWidgetReactPlugin } from './plugin/IstanbulWidgetReactPlugin'
 import { type CompInstance, render } from './render'
@@ -41,9 +42,16 @@ export class IstanbulWidget {
 
   public static Context: typeof Context
 
+  public static logger: ConsolaInstance
+
   constructor(opts: IstanbulWidgetOptions) {
+    IstanbulWidget.logger = createConsola({
+      level: opts.debug ? LogLevels.debug : LogLevels.box,
+      fancy: true,
+    })
+
     if (!!IstanbulWidget.instance && IstanbulWidget.instance instanceof IstanbulWidget) {
-      console.debug('[istanbul-widget] IstanbulWidget is already exists.')
+      IstanbulWidget.logger.debug('[istanbul-widget] IstanbulWidget is already exists.')
       return IstanbulWidget.instance
     }
 
@@ -76,16 +84,16 @@ export class IstanbulWidget {
         _onload()
       }
     } else {
-      let _timer
+      let _timer: number
       const _pollingDocument = () => {
         if (!!document && document.readyState === 'complete') {
           _timer && clearTimeout(_timer)
           _onload()
         } else {
-          _timer = setTimeout(_pollingDocument, 1)
+          _timer = window.setTimeout(_pollingDocument, 1)
         }
       }
-      _timer = setTimeout(_pollingDocument, 1)
+      _timer = window.setTimeout(_pollingDocument, 1)
     }
   }
 
@@ -123,7 +131,7 @@ export class IstanbulWidget {
    */
   private _addBuiltInPlugins() {
     // add default report plugin
-    this.addPlugin(new ReportPlugin(`${ISTANBUL_WIDGET_ID}_report__`, '上报插件'))
+    this.addPlugin(new ReportPlugin('report', '上报插件'))
 
     // add other built-in plugins according to user's config
     const list = this.option.defaultPlugins
@@ -149,9 +157,9 @@ export class IstanbulWidget {
       for (let i = 0; i < list.length; i++) {
         const pluginConf = plugins[list[i]]
         if (pluginConf) {
-          this.addPlugin(new pluginConf.proto(`${ISTANBUL_WIDGET_ID}_${list[i]}__`, pluginConf.name, pluginConf.props))
+          this.addPlugin(new pluginConf.proto(list[i], pluginConf.name, pluginConf.props))
         } else {
-          console.debug('[istanbul-widget] Unrecognized default plugin ID:', list[i])
+          IstanbulWidget.logger.debug('[istanbul-widget] Unrecognized default plugin ID:', list[i])
         }
       }
     }
@@ -163,7 +171,7 @@ export class IstanbulWidget {
   public addPlugin(plugin: IstanbulWidgetPlugin) {
     // ignore this plugin if it has already been installed
     if (this.pluginList[plugin.id] !== undefined) {
-      console.debug(`[istanbul-widget] Plugin \`${plugin.id}\` has already been added.`)
+      IstanbulWidget.logger.debug(`[istanbul-widget] Plugin \`${plugin.id}\` has already been added.`)
       return false
     }
     this.pluginList[plugin.id] = plugin
@@ -183,7 +191,8 @@ export class IstanbulWidget {
     set(this.compInstance.pluginList, plugin.id, {
       id: plugin.id,
       name: plugin.name,
-    })
+      domID: plugin.domID,
+    } as PluginType)
 
     this.compInstance.pluginList = this._reorderPluginList(this.compInstance.pluginList)
 
@@ -194,12 +203,17 @@ export class IstanbulWidget {
       })
       .then(() => {
         // start init
-        plugin.event.emit('init')
+        plugin.emit('init')
         // render
-        plugin.event.emit('render', () => {})
+        plugin.emit('render', ({ htmlElement }) => {
+          if (htmlElement) {
+            this.compInstance.pluginList[plugin.id].htmlElement = htmlElement
+            this.compInstance.update({ pluginList: this.compInstance.pluginList })
+          }
+        })
         // end init
         plugin.isReady = true
-        plugin.event.emit('ready')
+        plugin.emit('ready')
       })
   }
 
@@ -211,17 +225,19 @@ export class IstanbulWidget {
       this._initPlugin(this.pluginList[id])
     }
 
-    this.triggerEvent('ready')
+    this.emitEvent('ready')
 
-    if (process.env.NODE_ENV === 'development') {
-      console.log(`[istanbul-widget]: v${this.version}`)
-    }
+    IstanbulWidget.logger.debug(`[istanbul-widget]: v${this.version}`)
   }
 
   /**
-   * Trigger a `istanbulWidget.option` event.
+   * emit a `istanbulWidget.option` event
+   * @example
+   * ```js
+   * istanbulWidget.emitEvent('ready') // will emit `istanbulWidget.option.onReady()`
+   * ```
    */
-  public triggerEvent(eventName: string, param?: any) {
+  public emitEvent(eventName: string, param?: any) {
     eventName = `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`
     if (isFunction(this.option[eventName])) {
       setTimeout(() => {
@@ -275,7 +291,7 @@ export class IstanbulWidget {
 
   public static set instance(value: IstanbulWidget | undefined) {
     if (value !== undefined && !(value instanceof IstanbulWidget)) {
-      console.debug(
+      IstanbulWidget.logger.debug(
         '[istanbul-widget] Cannot set `IstanbulWidget.instance` because the value is not the instance of IstanbulWidget.',
       )
       return

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

@@ -70,6 +70,11 @@ export interface IstanbulWidgetOptions {
    * 插件顺序
    */
   pluginOrder?: (PluginName | string)[]
+  /**
+   * 打印调试信息
+   * @default false
+   */
+  debug?: boolean
 }
 
 export type ReportParams = {
@@ -145,6 +150,8 @@ export type Position = {
 export type PluginType = {
   id: string
   name: string
+  domID: string
+  htmlElement?: HTMLElement
 }
 
 export type PluginName = Exclude<IstanbulWidgetOptions['defaultPlugins'], undefined>[number]