feat: html report

packages/ui/client/composables/client.ts → packages/ui/client/composables/client/index.ts

@@ -2,8 +2,9 @@ import { createClient, getTasks } from '@vitest/ws-client'
 import type { WebSocketStatus } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { reactive } from 'vue'
-import type { RunState } from '../../types'
-import { activeFileId } from './params'
+import type { RunState } from '../../../types'
+import { activeFileId } from '../params'
+import { createStaticClient } from './static'
 import type { File, ResolvedConfig } from '#types'
 
 export const PORT = import.meta.hot ? '51204' : location.port
@@ -12,17 +13,24 @@ export const ENTRY_URL = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${
 
 export const testRunState: Ref<RunState> = ref('idle')
 
-export const client = createClient(ENTRY_URL, {
-  reactive: reactive as any,
-  handlers: {
-    onTaskUpdate() {
-      testRunState.value = 'running'
-    },
-    onFinished() {
-      testRunState.value = 'idle'
-    },
-  },
-})
+export const client = (function createVitestClient() {
+  if (__REPORT__) {
+    return createStaticClient()
+  }
+  else {
+    return createClient(ENTRY_URL, {
+      reactive: reactive as any,
+      handlers: {
+        onTaskUpdate() {
+          testRunState.value = 'running'
+        },
+        onFinished() {
+          testRunState.value = 'idle'
+        },
+      },
+    })
+  }
+})()
 
 export const config = shallowRef<ResolvedConfig>({} as any)
 export const status = ref<WebSocketStatus>('CONNECTING')
@@ -60,11 +68,15 @@ watch(
   (ws) => {
     status.value = 'CONNECTING'
 
-    ws.addEventListener('open', () => {
+    ws.addEventListener('open', async () => {
       status.value = 'OPEN'
       client.state.filesMap.clear()
-      client.rpc.getFiles().then(files => client.state.collectFiles(files))
-      client.rpc.getConfig().then(_config => config.value = _config)
+      const [files, _config] = await Promise.all([
+        client.rpc.getFiles(),
+        client.rpc.getConfig(),
+      ])
+      client.state.collectFiles(files)
+      config.value = _config
     })
 
     ws.addEventListener('close', () => {

packages/ui/client/composables/client/static.ts

@@ -0,0 +1,84 @@
+import type { BirpcReturn } from 'birpc'
+import type { VitestClient } from '@vitest/ws-client'
+import type { WebSocketHandlers } from 'vitest/src/api/types'
+import { parse } from 'flatted'
+import type { File, ModuleGraphData, ResolvedConfig } from 'vitest/src/types'
+import { StateManager } from '../../../../vitest/src/node/state'
+
+interface HTMLReportMetadata {
+  paths: string[]
+  files: File[]
+  config: ResolvedConfig
+  moduleGraph: Record<string, ModuleGraphData>
+}
+
+const noop: any = () => {}
+const asyncNoop: any = () => Promise.resolve()
+
+export function createStaticClient(): VitestClient {
+  const ctx = reactive({
+    state: new StateManager(),
+    waitForConnection,
+    reconnect,
+    ws: new EventTarget(),
+  }) as VitestClient
+
+  ctx.state.filesMap = reactive(ctx.state.filesMap)
+  ctx.state.idMap = reactive(ctx.state.idMap)
+
+  let metadata!: HTMLReportMetadata
+
+  const rpc = {
+    getFiles: () => {
+      return metadata.files
+    },
+    getPaths: async () => {
+      return metadata.paths
+    },
+    getConfig: () => {
+      return metadata.config
+    },
+    getModuleGraph: async (id) => {
+      return metadata.moduleGraph[id]
+    },
+    getTransformResult: async (id) => {
+      return {
+        code: id,
+        source: '',
+      }
+    },
+    readFile: async (id) => {
+      return Promise.resolve(id)
+    },
+    onWatcherStart: asyncNoop,
+    onFinished: asyncNoop,
+    onCollected: asyncNoop,
+    onTaskUpdate: noop,
+    writeFile: asyncNoop,
+    rerun: asyncNoop,
+    updateSnapshot: asyncNoop,
+  } as WebSocketHandlers
+
+  ctx.rpc = rpc as any as BirpcReturn<WebSocketHandlers>
+
+  let openPromise: Promise<void>
+
+  function reconnect() {
+    registerMetadata()
+  }
+
+  async function registerMetadata() {
+    const res = await fetch(window.METADATA_PATH!)
+    metadata = parse(await res.text()) as HTMLReportMetadata
+    const event = new Event('open')
+    ctx.ws.dispatchEvent(event)
+  }
+
+  registerMetadata()
+
+  function waitForConnection() {
+    return openPromise
+  }
+
+  return ctx
+}

packages/ui/client/shim.d.ts

@@ -7,3 +7,9 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+const __REPORT__: boolean
+
+declare interface Window {
+  METADATA_PATH?: string
+}

packages/ui/index.html

@@ -9,13 +9,14 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400&display=swap" rel="stylesheet">
     <script>
-      (function() {
+      (function () {
         const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
         const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
         if (setting === 'dark' || (prefersDark && setting !== 'light'))
           document.documentElement.classList.toggle('dark', true)
       })()
     </script>
+    <!-- !LOAD_METADATA! -->
   </head>
   <body>
     <div id="app"></div>

packages/ui/package.json

@@ -24,12 +24,15 @@
     "dist"
   ],
   "scripts": {
-    "build": "rimraf dist && pnpm build:node && pnpm build:client",
+    "build": "rimraf dist && pnpm build:node && pnpm build:client && pnpm build:report",
     "build:client": "vite build",
+    "build:report": "vite build -c vite.report.config.ts",
     "build:node": "rollup -c",
     "dev:client": "vite",
+    "dev:report": "vite  -c vite.report.config.ts",
     "dev": "rollup -c --watch --watch.include=node",
     "dev:ui": "run-p dev dev:client",
+    "dev:ui-report": "run-p dev dev:report",
     "test:run": "cypress run --component",
     "test:open": "cypress open --component",
     "prepublishOnly": "pnpm build"
@@ -66,6 +69,7 @@
     "vite": "^3.2.3",
     "vite-plugin-pages": "^0.27.1",
     "vue": "^3.2.41",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "defu": "^6.1.1"
   }
 }

packages/ui/vite.config.ts

@@ -18,6 +18,9 @@ export const config: UserConfig = {
       '@vitest/ws-client': `${resolve(__dirname, '../ws-client/src/index.ts')}`,
     },
   },
+  define: {
+    __REPORT__: false,
+  },
   plugins: [
     Vue(),
     Unocss({

packages/ui/vite.report.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import defu from 'defu'
+import { config } from './vite.config'
+
+export default defineConfig(defu({
+  base: './',
+  build: {
+    outDir: 'dist/report',
+  },
+  define: {
+    __REPORT__: true,
+  },
+  plugins: [
+    {
+      name: 'debug-html-report',
+      transformIndexHtml(html) {
+        return html.replace('<!-- !LOAD_METADATA! -->', '<script>window.METADATA_PATH="/html.meta.json"</script>')
+      },
+    },
+  ],
+}, config))

packages/vitest/package.json

@@ -76,9 +76,10 @@
     "node": ">=v14.16.0"
   },
   "scripts": {
-    "build": "rimraf dist && rollup -c",
+    "build": "rimraf dist && rollup -c && pnpm copy",
     "dev": "NODE_OPTIONS=\"--max-old-space-size=8192\" rollup -c --watch -m inline",
-    "prepublishOnly": "pnpm build"
+    "prepublishOnly": "pnpm build",
+    "copy": "esno scripts/copy-ui-to-vitest.ts"
   },
   "peerDependencies": {
     "@edge-runtime/vm": "*",

packages/vitest/scripts/copy-ui-to-vitest.ts

@@ -0,0 +1,24 @@
+import { fileURLToPath } from 'url'
+import fs from 'fs'
+import { resolve } from 'pathe'
+import fg from 'fast-glob'
+
+const root = resolve(fileURLToPath(import.meta.url), '../../../../packages')
+
+const ui = resolve(root, 'ui/dist/report')
+const vitest = resolve(root, 'vitest/dist/html-report/')
+
+const files = fg.sync('**/*', { cwd: ui })
+const originFiles = fg.sync('**/*', { cwd: vitest })
+
+originFiles.forEach((f) => {
+  fs.unlinkSync(resolve(vitest, f))
+})
+
+if (!fs.existsSync(resolve(vitest, 'assets')))
+  fs.mkdirSync(resolve(vitest, 'assets'), { recursive: true })
+
+files.forEach((f) => {
+  fs.copyFileSync(resolve(ui, f), resolve(vitest, f))
+})
+

packages/vitest/src/api/setup.ts

@@ -10,6 +10,42 @@ import type { Vitest } from '../node'
 import type { File, ModuleGraphData, Reporter, TaskResultPack, UserConsoleLog } from '../types'
 import type { TransformResultWithSource, WebSocketEvents, WebSocketHandlers } from './types'
 
+export async function getModuleGraph(ctx: Vitest, id: string): Promise<ModuleGraphData> {
+  const graph: Record<string, string[]> = {}
+  const externalized = new Set<string>()
+  const inlined = new Set<string>()
+
+  function clearId(id?: string | null) {
+    return id?.replace(/\?v=\w+$/, '') || ''
+  }
+  async function get(mod?: ModuleNode, seen = new Map<ModuleNode, string>()) {
+    if (!mod || !mod.id)
+      return
+    if (seen.has(mod))
+      return seen.get(mod)
+    let id = clearId(mod.id)
+    seen.set(mod, id)
+    const rewrote = await ctx.vitenode.shouldExternalize(id)
+    if (rewrote) {
+      id = rewrote
+      externalized.add(id)
+      seen.set(mod, id)
+    }
+    else {
+      inlined.add(id)
+    }
+    const mods = Array.from(mod.importedModules).filter(i => i.id && !i.id.includes('/vitest/dist/'))
+    graph[id] = (await Promise.all(mods.map(m => get(m, seen)))).filter(Boolean) as string[]
+    return id
+  }
+  await get(ctx.server.moduleGraph.getModuleById(id))
+  return {
+    graph,
+    externalized: Array.from(externalized),
+    inlined: Array.from(inlined),
+  }
+}
+
 export function setup(ctx: Vitest) {
   const wss = new WebSocketServer({ noServer: true })
 
@@ -75,39 +111,7 @@ export function setup(ctx: Vitest) {
           }
         },
         async getModuleGraph(id: string): Promise<ModuleGraphData> {
-          const graph: Record<string, string[]> = {}
-          const externalized = new Set<string>()
-          const inlined = new Set<string>()
-
-          function clearId(id?: string | null) {
-            return id?.replace(/\?v=\w+$/, '') || ''
-          }
-          async function get(mod?: ModuleNode, seen = new Map<ModuleNode, string>()) {
-            if (!mod || !mod.id)
-              return
-            if (seen.has(mod))
-              return seen.get(mod)
-            let id = clearId(mod.id)
-            seen.set(mod, id)
-            const rewrote = await ctx.vitenode.shouldExternalize(id)
-            if (rewrote) {
-              id = rewrote
-              externalized.add(id)
-              seen.set(mod, id)
-            }
-            else {
-              inlined.add(id)
-            }
-            const mods = Array.from(mod.importedModules).filter(i => i.id && !i.id.includes('/vitest/dist/'))
-            graph[id] = (await Promise.all(mods.map(m => get(m, seen)))).filter(Boolean) as string[]
-            return id
-          }
-          await get(ctx.server.moduleGraph.getModuleById(id))
-          return {
-            graph,
-            externalized: Array.from(externalized),
-            inlined: Array.from(inlined),
-          }
+          return getModuleGraph(ctx, id)
         },
         updateSnapshot(file?: File) {
           if (!file)

packages/vitest/src/node/core.ts

@@ -341,9 +341,11 @@ export class Vitest {
       this.cache.results.updateResults(files)
       await this.cache.results.writeToCache()
     })()
-      .finally(() => {
+      .finally(async () => {
         this.runningPromise = undefined
         this.state.finishCollectingPaths()
+        if (!this.config.browser)
+          await this.report('onFinally')
       })
 
     return await this.runningPromise