feat: add delayIstanbulWidgetInit option to support scenarios that …

…might block js

release

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

@@ -1,5 +1,12 @@
 # vite-plugin-istanbul-widget
 
+## 1.7.0
+
+### Minor Changes
+
+- feat: add `delayIstanbulWidgetInit` option to support scenarios that might block js
+- add debug mode
+
 ## 1.6.3
 
 ### Patch Changes

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

@@ -131,5 +131,10 @@ type VitePluginIstanbulWidgetOptions = {
    * @description false 则关闭 istanbul-widget 控件
    */
   istanbulWidgetConfig: IstanbulWidgetOptions | false
+  /**
+   * 延迟istanbul-widget初始化(ms)
+   * @default 0
+   */
+  delayIstanbulWidgetInit?: number
 }
 ```

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

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-istanbul-widget",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "description": "集成了 istanbul-widget 和 vite-plugin-istanbul 的vite插件",
   "type": "module",
   "keywords": [
@@ -57,6 +57,7 @@
   "dependencies": {
     "@istanbuljs/load-nyc-config": "1.1.0",
     "@minko-fe/lodash-pro": "^0.3.2",
+    "debug": "^4.3.4",
     "espree": "10.0.1",
     "istanbul-lib-instrument": "6.0.2",
     "istanbul-widget": "workspace:*",
@@ -65,6 +66,7 @@
     "test-exclude": "6.0.0"
   },
   "devDependencies": {
+    "@types/debug": "^4.1.12",
     "@types/node": "^20.12.12",
     "@types/serialize-javascript": "5.0.4",
     "serialize-javascript": "6.0.2",

packages/vite-plugin-istanbul-widget/src/astro/index.ts

@@ -2,6 +2,7 @@ import type { AstroIntegration } from 'astro'
 import { vendor, istanbulWidget as viteIstanbulWidget } from '../index'
 import { type VitePluginIstanbulWidgetOptions } from '../types'
 import { ensureArray, resolveInlineScript } from '../utils'
+import { debug } from '../utils/debug'
 
 export function istanbulWidget(opts: VitePluginIstanbulWidgetOptions): any {
   return {
@@ -28,7 +29,11 @@ export function istanbulWidget(opts: VitePluginIstanbulWidgetOptions): any {
                 transform(code, id) {
                   if (opts.istanbulWidgetConfig !== false) {
                     if (id === 'astro:scripts/page.js') {
-                      const { script } = resolveInlineScript('lib', opts.istanbulWidgetConfig)
+                      debug('istanbulWidget transform:', id)
+
+                      const { script } = resolveInlineScript('lib', opts.istanbulWidgetConfig, {
+                        delayIstanbulWidgetInit: opts.delayIstanbulWidgetInit,
+                      })
 
                       code = /*js*/ `${script}
                       \n${code}`
@@ -82,4 +87,4 @@ export function istanbulWidget(opts: VitePluginIstanbulWidgetOptions): any {
   } as AstroIntegration
 }
 
-export const exclude = [/istanbul-widget\..*\.js/]
+export const exclude = [/istanbul-widget.*\.js/]

packages/vite-plugin-istanbul-widget/src/index.ts

@@ -4,6 +4,7 @@ import fs from 'node:fs'
 import istanbul from 'vite-plugin-istanbul'
 import { type VitePluginIstanbulWidgetOptions } from './types'
 import { ensureArray, getCommitId, resolveInlineScript } from './utils'
+import { debug } from './utils/debug'
 
 export const vendor = 'vendor'
 export const virtualIstanbulWidgetId = 'virtual:istanbul-widget'
@@ -16,12 +17,15 @@ export function istanbulWidget(opts: VitePluginIstanbulWidgetOptions): any {
     istanbulPluginConfig,
     istanbulWidgetConfig,
     checkProd = true,
+    delayIstanbulWidgetInit = 0,
   } = opts || {}
 
   if (checkProd && process.env.NODE_ENV === 'production') return undefined
 
   if (!enabled) return undefined
 
+  debug('istanbulWidget options:', opts)
+
   return [
     {
       name: 'vite:plugin-istanbul-widget:pre',
@@ -53,7 +57,7 @@ export function istanbulWidget(opts: VitePluginIstanbulWidgetOptions): any {
         order: 'pre',
         handler(html) {
           if (istanbulWidgetConfig !== false) {
-            const { src, script } = resolveInlineScript('min', istanbulWidgetConfig)
+            const { src, script } = resolveInlineScript('min', istanbulWidgetConfig, { delayIstanbulWidgetInit })
             return {
               html,
               tags: [
@@ -70,7 +74,6 @@ export function istanbulWidget(opts: VitePluginIstanbulWidgetOptions): any {
                   tag: 'script',
                   attrs: {
                     type: 'module',
-                    defer: true,
                   },
                   injectTo: 'body',
                   children: script,

packages/vite-plugin-istanbul-widget/src/types.d.ts

@@ -27,4 +27,9 @@ export type VitePluginIstanbulWidgetOptions = {
    * @description false 则关闭 istanbul-widget 控件
    */
   istanbulWidgetConfig: IstanbulWidgetOptions | false
+  /**
+   * 延迟istanbul-widget初始化(ms)
+   * @default 0
+   */
+  delayIstanbulWidgetInit?: number
 }

packages/vite-plugin-istanbul-widget/src/utils/debug.ts

@@ -0,0 +1,3 @@
+import createDebug from 'debug'
+
+export const debug = createDebug('vite-plugin-istanbul-widget')

packages/vite-plugin-istanbul-widget/src/utils/index.ts

@@ -4,31 +4,53 @@ import { createRequire } from 'node:module'
 import path from 'node:path'
 import serialize from 'serialize-javascript'
 import { normalizePath } from 'vite'
+import { debug } from './debug'
 
 export function getCommitId() {
   try {
-    return execSync('git rev-parse HEAD').toString().trim()
+    const commitid = execSync('git rev-parse HEAD').toString().trim()
+    debug(`Resolved git HEAD: ${commitid}`)
+    return commitid
   } catch (e) {
     console.error(`Failed to resolve git HEAD:\n${e}`)
   }
 }
 
-export function resolveInlineScript(mode: 'lib' | 'min', config: IstanbulWidgetOptions) {
+export function resolveInlineScript(
+  mode: 'lib' | 'min',
+  config: IstanbulWidgetOptions,
+  options?: {
+    delayIstanbulWidgetInit?: number
+  },
+) {
   const require = createRequire(import.meta.url)
+  const { delayIstanbulWidgetInit = 0 } = options || {}
 
   const istanbulWidgetPath = normalizePath(
     `/@fs/${path.join(path.dirname(require.resolve('istanbul-widget')), `istanbul-widget.${mode}.js`)}`,
   )
 
+  debug('istanbul-widget path:', istanbulWidgetPath)
+
   const map = {
     lib: {
       src: istanbulWidgetPath,
-      script: /*js*/ `import { IstanbulWidget } from "${istanbulWidgetPath}";
-      new IstanbulWidget(${serialize(config)});`,
+      script: /*js*/ `
+        import { IstanbulWidget } from "${istanbulWidgetPath}";
+        const timer = setTimeout(() => {
+          new IstanbulWidget(${serialize(config)});
+          clearTimeout(timer);
+        }, ${delayIstanbulWidgetInit});
+      `,
     },
     min: {
       src: istanbulWidgetPath,
-      script: /*js*/ `new window.IstanbulWidget(${serialize(config)});`,
+      script: /*js*/ `
+        const timer = setTimeout(() => {
+          new window.IstanbulWidget(${serialize(config)});
+          clearTimeout(timer);
+        }, ${delayIstanbulWidgetInit});
+      `,
     },
   }
 

packages/vite-plugin-istanbul-widget/src/utils/logger.ts

@@ -0,0 +1,5 @@
+import { createLogger } from 'vite'
+
+export const logger = createLogger('info', {
+  prefix: '[vite-plugin-istanbul-widget]',
+})