fix(reporter/html): optimize module graph data by storing per environment

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

@@ -1,23 +1,24 @@
 import type { VitestClient } from '@vitest/ws-client'
 import type { BirpcReturn } from 'birpc'
 import type {
-  ModuleGraphData,
   RunnerTestFile,
   SerializedConfig,
   WebSocketEvents,
   WebSocketHandlers,
 } from 'vitest'
+import type { SerializedProjectEnvironmentModules } from '../../../../vitest/src/utils/module-graph-serialization'
 import { decompressSync, strFromU8 } from 'fflate'
 import { parse } from 'flatted'
 import { reactive } from 'vue'
+import { deriveModuleGraphData } from '../../../../vitest/src/utils/module-graph-serialization'
 import { StateManager } from '../../../../ws-client/src/state'
 
 interface HTMLReportMetadata {
   paths: string[]
   files: RunnerTestFile[]
   config: SerializedConfig
   projects: string[]
-  moduleGraph: Record<string, Record<string, ModuleGraphData>>
+  environmentModules: Record<string, SerializedProjectEnvironmentModules>
   unhandledErrors: unknown[]
   // filename -> source
   sources: Record<string, string>
@@ -55,8 +56,8 @@ export function createStaticClient(): VitestClient {
     getResolvedProjectLabels: () => {
       return []
     },
-    getModuleGraph: async (projectName, id) => {
-      return metadata.moduleGraph[projectName]?.[id]
+    getModuleGraph: async (projectName, id, browser) => {
+      return deriveModuleGraphData(metadata.environmentModules[projectName], id, browser)
     },
     getUnhandledErrors: () => {
       return metadata.unhandledErrors

packages/ui/node/reporter.ts

@@ -1,5 +1,6 @@
-import type { ModuleGraphData, RunnerTestFile, SerializedConfig } from 'vitest'
+import type { RunnerTestFile, SerializedConfig } from 'vitest'
 import type { HTMLOptions, Reporter, Vitest } from 'vitest/node'
+import type { SerializedProjectEnvironmentModules } from '../../vitest/src/utils/module-graph-serialization'
 import { existsSync, promises as fs } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import { promisify } from 'node:util'
@@ -8,7 +9,7 @@
 import { dirname, relative, resolve } from 'pathe'
 import { globSync } from 'tinyglobby'
 import c from 'tinyrainbow'
-import { getModuleGraph } from '../../vitest/src/utils/graph'
+import { serializeProjectModules } from '../../vitest/src/utils/module-graph-serialization'
 
 interface PotentialConfig {
   outputFile?: string | Partial<Record<string, string>>
@@ -31,7 +32,7 @@
   files: RunnerTestFile[]
   config: SerializedConfig
   projects: string[]
-  moduleGraph: Record<string, Record<string, ModuleGraphData>>
+  environmentModules: Record<string, SerializedProjectEnvironmentModules>
   unhandledErrors: unknown[]
   // filename -> source
   sources: Record<string, string>
@@ -66,28 +67,22 @@
   }
 
   async onTestRunEnd(): Promise<void> {
+    const environmentModules: Record<string, SerializedProjectEnvironmentModules> = {}
+    this.ctx.projects.forEach((project) => {
+      environmentModules[project.name] = serializeProjectModules(project)
+    })
+
     const result: HTMLReportData = {
       paths: this.ctx.state.getPaths(),
       files: this.ctx.state.getFiles(),
       config: this.ctx.getRootProject().serializedConfig,
       unhandledErrors: this.ctx.state.getUnhandledErrors(),
       projects: this.ctx.projects.map(p => p.name),
-      moduleGraph: {},
+      environmentModules,
       sources: {},
     }
-    const promises: Promise<void>[] = []
-
-    promises.push(...result.files.map(async (file) => {
-      const projectName = file.projectName || ''
-      const resolvedConfig = this.ctx.getProjectByName(projectName).config
-      const browser = resolvedConfig.browser.enabled
-      result.moduleGraph[projectName] ??= {}
-      result.moduleGraph[projectName][file.filepath] = await getModuleGraph(
-        this.ctx,
-        projectName,
-        file.filepath,
-        browser,
-      )
+
+    await Promise.all(result.files.map(async (file) => {
       if (!result.sources[file.filepath]) {
         try {
           result.sources[file.filepath] = await fs.readFile(file.filepath, {
@@ -100,7 +95,6 @@
       }
     }))
 
-    await Promise.all(promises)
     await this.writeReport(stringify(result))
   }
 

packages/vitest/src/node/reporters/blob.ts

@@ -1,6 +1,6 @@
 import type { File } from '@vitest/runner'
 import type { SerializedError } from '@vitest/utils'
-import type { DevEnvironment, EnvironmentModuleNode } from 'vite'
+import type { SerializedProjectEnvironmentModules } from '../../utils/module-graph-serialization'
 import type { Vitest } from '../core'
 import type { TestProject } from '../project'
 import type { Reporter } from '../types/reporter'
@@ -10,6 +10,7 @@
 import { parse, stringify } from 'flatted'
 import { dirname, resolve } from 'pathe'
 import { getOutputFile } from '../../utils/config-helpers'
+import { deserializeEnvironmentModuleGraph, serializeProjectModules } from '../../utils/module-graph-serialization'
 
 export interface BlobOptions {
   outputFile?: string
@@ -57,29 +58,7 @@
 
     const environmentModules: MergeReportEnvironmentModules = {}
     this.ctx.projects.forEach((project) => {
-      const serializedProject: MergeReportEnvironmentModules[string] = {
-        environments: {},
-        external: [],
-      }
-      Object.entries(project.vite.environments).forEach(([environmentName, environment]) => {
-        serializedProject.environments[environmentName] = serializeEnvironmentModuleGraph(
-          environment,
-        )
-      })
-
-      if (project.browser?.vite.environments.client) {
-        serializedProject.browser = serializeEnvironmentModuleGraph(
-          project.browser.vite.environments.client,
-        )
-      }
-
-      for (const [id, value] of project._resolver.externalizeCache.entries()) {
-        if (typeof value === 'string') {
-          serializedProject.external.push([id, value])
-        }
-      }
-
-      environmentModules[project.name] = serializedProject
+      environmentModules[project.name] = serializeProjectModules(project)
     })
 
     const report = [
@@ -228,101 +207,5 @@
 ]
 
 interface MergeReportEnvironmentModules {
-  [projectName: string]: {
-    environments: {
-      [environmentName: string]: SerializedEnvironmentModuleGraph
-    }
-    browser?: SerializedEnvironmentModuleGraph
-    external: [id: string, externalized: string][]
-  }
-}
-
-type SerializedEnvironmentModuleNode = [
-  id: number,
-  file: number,
-  url: number,
-  importedIds: number[],
-]
-
-interface SerializedEnvironmentModuleGraph {
-  idTable: string[]
-  modules: SerializedEnvironmentModuleNode[]
-}
-
-function serializeEnvironmentModuleGraph(
-  environment: DevEnvironment,
-): SerializedEnvironmentModuleGraph {
-  const idTable: string[] = []
-  const idMap = new Map<string, number>()
-
-  const getIdIndex = (id: string) => {
-    const existing = idMap.get(id)
-    if (existing != null) {
-      return existing
-    }
-    const next = idTable.length
-    idMap.set(id, next)
-    idTable.push(id)
-    return next
-  }
-
-  const modules: SerializedEnvironmentModuleNode[] = []
-  for (const [id, mod] of environment.moduleGraph.idToModuleMap.entries()) {
-    if (!mod.file) {
-      continue
-    }
-
-    const importedIds: number[] = []
-    for (const importedNode of mod.importedModules) {
-      if (importedNode.id) {
-        importedIds.push(getIdIndex(importedNode.id))
-      }
-    }
-
-    modules.push([
-      getIdIndex(id),
-      getIdIndex(mod.file),
-      getIdIndex(mod.url),
-      importedIds,
-    ])
-  }
-
-  return {
-    idTable,
-    modules,
-  }
-}
-
-function deserializeEnvironmentModuleGraph(
-  environment: DevEnvironment,
-  serialized: SerializedEnvironmentModuleGraph,
-): void {
-  const nodesById = new Map<string, EnvironmentModuleNode>()
-
-  serialized.modules.forEach(([id, file, url]) => {
-    const moduleId = serialized.idTable[id]
-    const filePath = serialized.idTable[file]
-    const urlPath = serialized.idTable[url]
-    const moduleNode = environment.moduleGraph.createFileOnlyEntry(filePath)
-    moduleNode.url = urlPath
-    moduleNode.id = moduleId
-    moduleNode.transformResult = {
-      // print error checks that transformResult is set
-      code: ' ',
-      map: null,
-    }
-    environment.moduleGraph.idToModuleMap.set(moduleId, moduleNode)
-    nodesById.set(moduleId, moduleNode)
-  })
-
-  serialized.modules.forEach(([id, _file, _url, importedIds]) => {
-    const moduleId = serialized.idTable[id]
-    const moduleNode = nodesById.get(moduleId)!
-    importedIds.forEach((importedIdIndex) => {
-      const importedId = serialized.idTable[importedIdIndex]
-      const importedNode = nodesById.get(importedId)!
-      moduleNode.importedModules.add(importedNode)
-      importedNode.importers.add(moduleNode)
-    })
-  })
+  [projectName: string]: SerializedProjectEnvironmentModules
 }