feat: ssr and remix support

release
hemengke1997 · May 29, 2024 · 041020c · 041020c
1 parent 16a93d4
commit 041020c
Show file tree

Hide file tree

Showing 29 changed files with 2,442 additions and 307 deletions.
diff --git a/packages/istanbul-widget/CHANGELOG.md b/packages/istanbul-widget/CHANGELOG.md
@@ -1,5 +1,10 @@
 # istanbul-widget
 
+## 1.8.0
+### Minor Changes
+
+- ssr support
+
 ## 1.7.0
 
 ### Minor Changes

diff --git a/packages/istanbul-widget/package.json b/packages/istanbul-widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "istanbul-widget",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "收集 istanbul 代码覆盖率的web小组件",
   "type": "module",
   "keywords": [
@@ -15,18 +15,16 @@
     "directory": "packages/istanbul-widget"
   },
   "files": [
-    "components.d.ts",
-    "dist",
-    "lib.d.ts"
+    "*.d.ts",
+    "dist"
   ],
   "main": "./dist/istanbul-widget.lib.js",
   "module": "./dist/esm/istanbul-widget.js",
   "types": "./dist/istanbul-widget.d.ts",
   "exports": {
-    "./package.json": "./package.json",
     ".": {
       "types": "./dist/istanbul-widget.d.ts",
-      "require": "./dist/istanbul-widget.lib.js",
+      "require": "./dist/istanbul-widget.lib.cjs",
       "import": "./dist/esm/istanbul-widget.js",
       "default": "./dist/esm/istanbul-widget.js"
     },
@@ -37,10 +35,11 @@
     },
     "./lib": {
       "types": "./dist/istanbul-widget.d.ts",
-      "require": "./dist/istanbul-widget.lib.js",
+      "require": "./dist/istanbul-widget.lib.cjs",
       "import": "./dist/istanbul-widget.lib.js",
-      "default": "./dist/istanbul-widget.lib.js"
+      "default": "./dist/istanbul-widget.lib.cjs"
     },
+    "./package.json": "./package.json",
     "./*": "./*"
   },
   "sideEffects": [
@@ -71,7 +70,7 @@
   "dependencies": {
     "@iconify-json/vscode-icons": "^1.1.34",
     "@minko-fe/lodash-pro": "^0.3.3",
-    "@minko-fe/react-hook": "^0.3.5",
+    "@minko-fe/react-hook": "^0.3.6",
     "@neodrag/react": "^2.0.4",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -98,7 +97,7 @@
     "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-react": "^4.3.0",
     "autoprefixer": "^10.4.19",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^6.2.0",
     "postcss": "^8.4.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/packages/istanbul-widget/src/core/IstanbulWidget.tsx b/packages/istanbul-widget/src/core/IstanbulWidget.tsx
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from 'react'
+import { memo, useLayoutEffect, useRef, useState } from 'react'
 import { Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Toaster } from '@/components/ui/toaster'
 import { ISTANBUL_WIDGET_ID } from '@/utils/const'
@@ -7,7 +7,7 @@ import Context from './Context'
 import Draggable from './components/Draggable'
 import { type Position } from './options.interface'
 
-export default function IstanbulWidgetComponent() {
+function IstanbulWidgetComponent() {
   const { theme, pluginList } = Context.usePicker(['theme', 'pluginList'])
 
   const [popoverOpen, setPopoverOpen] = useState(false)
@@ -108,3 +108,5 @@ export default function IstanbulWidgetComponent() {
     </>
   )
 }
+
+export default memo(IstanbulWidgetComponent)
diff --git a/packages/istanbul-widget/src/core/core.ts b/packages/istanbul-widget/src/core/core.ts
@@ -17,7 +17,7 @@ export class IstanbulWidget {
   public isInited: boolean = false
   public option = {
     theme: 'dark',
-    target: document.body,
+    target: 'body',
     float: {
       offsetX: 8,
     },
@@ -125,7 +125,7 @@ export class IstanbulWidget {
   }
 
   /**
-   * Add built-in plugins.
+   * Add built-in plugins
    */
   private _addBuiltInPlugins() {
     // add default report plugin
@@ -164,7 +164,7 @@ export class IstanbulWidget {
   }
 
   /**
-   * Add a new plugin.
+   * Add a new plugin
    */
   public addPlugin(plugin: IstanbulWidgetPlugin) {
     // ignore this plugin if it has already been installed
@@ -181,7 +181,7 @@ export class IstanbulWidget {
   }
 
   /**
-   * Init a plugin.
+   * Init a plugin
    */
   private _initPlugin<T extends IstanbulWidgetPlugin>(plugin: T) {
     plugin.istanbulWidget = this
@@ -245,8 +245,8 @@ export class IstanbulWidget {
   }
 
   /**
-   * Sorting plugin list by option `pluginOrder`.
-   * Plugin not listed in `pluginOrder` will be put last.
+   * Sorting plugin list by option `pluginOrder`
+   * Plugin not listed in `pluginOrder` will be put last
    */
   private _reorderPluginList(pluginList: { [pluginID: string]: any }) {
     if (!isArray(this.option.pluginOrder)) {

diff --git a/packages/istanbul-widget/src/core/dom/react-render.ts b/packages/istanbul-widget/src/core/dom/react-render.ts
@@ -25,7 +25,7 @@ export function reactdomRender(
   }
 
   if (sync) {
-    flushSync(render)
+    Promise.resolve().then(() => flushSync(render))
   } else {
     render()
   }

diff --git a/packages/istanbul-widget/src/istanbul-widget.iife.ts b/packages/istanbul-widget/src/istanbul-widget.iife.ts
@@ -1,5 +1,13 @@
-// @ts-nocheck
-
+import { isBrowser } from '@minko-fe/lodash-pro'
 import { IstanbulWidget } from './core/core'
 
-window.IstanbulWidget = IstanbulWidget
+declare global {
+  interface Window {
+    IstanbulWidget: typeof IstanbulWidget
+  }
+}
+
+// ssr support
+if (isBrowser()) {
+  window.IstanbulWidget = IstanbulWidget
+}
diff --git a/packages/istanbul-widget/tsup.config.ts b/packages/istanbul-widget/tsup.config.ts
@@ -13,10 +13,11 @@ const common = (option: Options): Options => ({
     __VERSION__: JSON.stringify(pkg.version),
   },
   plugins: [...(option.plugins || []), cssLegacy()],
+  treeshake: true,
 })
 
 const lib = (option: Options): Options => ({
-  format: 'esm',
+  format: ['cjs', 'esm'],
   entry: {
     'istanbul-widget.lib': 'src/istanbul-widget.ts',
   },
@@ -27,7 +28,7 @@ const lib = (option: Options): Options => ({
           'istanbul-widget': 'src/istanbul-widget.ts',
         },
       },
-  noExternal: Object.keys(pkg.dependencies) || [],
+  outExtension: ({ format }) => ({ js: format === 'esm' ? '.js' : '.cjs' }),
   splitting: false,
   minify: false,
   injectStyle: true,
@@ -60,15 +61,15 @@ export default defineConfig((option) => {
   return [
     {
       ...common(option),
-      ...esm(option),
+      ...lib(option),
     },
     {
       ...common(option),
-      ...lib(option),
+      ...iife(option),
     },
     {
       ...common(option),
-      ...iife(option),
+      ...esm(option),
     },
   ]
 })
diff --git a/packages/vite-plugin-istanbul-widget/CHANGELOG.md b/packages/vite-plugin-istanbul-widget/CHANGELOG.md
@@ -1,5 +1,15 @@
 # vite-plugin-istanbul-widget
 
+## 1.8.0
+### Minor Changes
+
+- remix support
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+
 ## 1.7.2
 ### Patch Changes
 

diff --git a/packages/vite-plugin-istanbul-widget/README.md b/packages/vite-plugin-istanbul-widget/README.md
@@ -2,7 +2,7 @@
 
 > 集成了 istanbul-widget 和 vite-plugin-istanbul 的vite插件
 >
-> 额外支持astro
+> 额外支持astro/remix
 
 ## 安装
 
@@ -44,10 +44,17 @@ export default defineConfig((env) => ({
 }))
 ```
 
+## Astro项目
+
 ### astro.config
 
 [参考配置](../../playground/astro-app/astro.config.ts)
 
+## Remix项目
+
+### vite.config
+[参考配置](../../playground/remix-app/vite.config.ts)
+
 ```ts
 import react from '@astrojs/react'
 import { defineConfig } from 'astro/config'

diff --git a/packages/vite-plugin-istanbul-widget/package.json b/packages/vite-plugin-istanbul-widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-istanbul-widget",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "集成了 istanbul-widget 和 vite-plugin-istanbul 的vite插件",
   "type": "module",
   "keywords": [
@@ -17,8 +17,7 @@
     "directory": "packages/vite-plugin-istanbul-widget"
   },
   "files": [
-    "astro.d.ts",
-    "client.d.ts",
+    "*.d.ts",
     "dist"
   ],
   "main": "./dist/index.cjs",
@@ -37,6 +36,17 @@
       "import": "./dist/astro.js",
       "default": "./dist/astro.js"
     },
+    "./remix": {
+      "types": "./remix.d.ts",
+      "require": "./dist/remix.cjs",
+      "import": "./dist/remix.js",
+      "default": "./dist/remix.js"
+    },
+    "./remix/client": {
+      "require": "./dist/remix/client.cjs",
+      "import": "./dist/remix/client.js",
+      "default": "./dist/remix/client.js"
+    },
     "./client": {
       "types": "./client.d.ts"
     }
@@ -47,30 +57,43 @@
   },
   "peerDependencies": {
     "astro": "^3 || ^4",
+    "react": ">=18",
+    "typescript": ">=4",
     "vite": "^4 || ^5"
   },
   "peerDependenciesMeta": {
     "astro": {
       "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
     }
   },
   "dependencies": {
     "@istanbuljs/load-nyc-config": "1.1.0",
     "@minko-fe/lodash-pro": "^0.3.3",
     "debug": "^4.3.4",
+    "es-module-lexer": "^1.5.3",
     "espree": "10.0.1",
     "execa": "^8.0.1",
     "istanbul-lib-instrument": "6.0.2",
     "istanbul-widget": "workspace:*",
+    "magic-string": "^0.30.10",
     "picocolors": "1.0.0",
     "source-map": "0.7.4",
     "test-exclude": "6.0.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",
     "@types/node": "^20.12.12",
+    "@types/react": "^18.3.3",
     "@types/serialize-javascript": "5.0.4",
+    "react": "^18.3.1",
     "serialize-javascript": "6.0.2",
+    "typescript": "^5.4.5",
     "vite-plugin-istanbul": "6.0.0"
   }
 }
diff --git a/packages/vite-plugin-istanbul-widget/remix.d.ts b/packages/vite-plugin-istanbul-widget/remix.d.ts
@@ -0,0 +1 @@
+export * from './dist/remix.d'
diff --git a/packages/vite-plugin-istanbul-widget/src/index.ts b/packages/vite-plugin-istanbul-widget/src/index.ts
@@ -1,15 +1,11 @@
 import type { Plugin } from 'vite'
 import { isArray, set } from '@minko-fe/lodash-pro'
-import fs from 'node:fs'
 import istanbul from 'vite-plugin-istanbul'
 import { type VitePluginIstanbulWidgetOptions } from './types'
 import { checkPluginEnabled, ensureArray, getCommitId, resolveInlineScript, resolveOptions } from './utils'
 import { debug } from './utils/debug'
 
 export const vendor = 'vendor'
-export const virtualIstanbulWidgetId = 'virtual:istanbul-widget'
-const resolvedVirtualIstanbulWidgetId = `\0${virtualIstanbulWidgetId}.js`
-
 export function istanbulWidget(opts: VitePluginIstanbulWidgetOptions): any {
   const { enabled, fullReport, istanbulPluginConfig, istanbulWidgetConfig, checkProd, delayIstanbulWidgetInit } =
     resolveOptions(opts)
@@ -24,28 +20,13 @@ export function istanbulWidget(opts: VitePluginIstanbulWidgetOptions): any {
       enforce: 'pre',
       async config(c) {
         if (c.build?.ssr) return
-        if (!c.build?.sourcemap) {
-          c.build ??= {}
-          c.build.sourcemap = 'hidden'
-        }
+
         return {
           define: {
             __GIT_COMMIT_ID__: JSON.stringify(await getCommitId()),
           },
         }
       },
-      resolveId(id) {
-        if (id === virtualIstanbulWidgetId) {
-          return resolvedVirtualIstanbulWidgetId
-        }
-      },
-      load(id) {
-        if (id === resolvedVirtualIstanbulWidgetId && istanbulWidgetConfig !== false) {
-          const js = resolveInlineScript('lib', istanbulWidgetConfig).src
-          const content = fs.readFileSync(js, 'utf-8')
-          return content
-        }
-      },
       transformIndexHtml: {
         order: 'pre',
         handler(html) {
@@ -91,7 +72,6 @@ export function istanbulWidget(opts: VitePluginIstanbulWidgetOptions): any {
         order: 'post',
         handler(c) {
           c.build ??= {}
-          c.build.sourcemap = false
 
           if (!c.build.ssr) {
             if (fullReport) {