fix(browser): print correct transformed module graph (#5833)

sheremet-va · web-flow · commit a758157563e8 · 2024-06-03T17:19:31.000+02:00
diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
@@ -113,7 +113,7 @@ function relativeToRoot(path?: string) {
 
     <div flex flex-col flex-1 overflow="hidden">
       <div v-if="hasGraphBeenDisplayed" :flex-1="viewMode === 'graph' && ''">
-        <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" data-testid="graph" />
+        <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" data-testid="graph" :project-name="current.file.projectName || ''" />
       </div>
       <ViewEditor v-if="viewMode === 'editor'" :key="current.filepath" :file="current" data-testid="editor" @draft="onDraft" />
       <ViewConsoleOutput v-else-if="viewMode === 'console'" :file="current" data-testid="console" />
diff --git a/packages/ui/client/components/ModuleTransformResultView.vue b/packages/ui/client/components/ModuleTransformResultView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { client } from '~/composables/client'
+import { client, browserState } from '~/composables/client'
 
-const props = defineProps<{ id: string }>()
+const props = defineProps<{ id: string; projectName: string }>()
 const emit = defineEmits<{ (e: 'close'): void }>()
 
-const result = asyncComputed(() => client.rpc.getTransformResult(props.id))
+const result = asyncComputed(() => client.rpc.getTransformResult(props.projectName, props.id, !!browserState))
 const ext = computed(() => props.id?.split(/\./g).pop() || 'js')
 
 const source = computed(() => result.value?.source?.trim() || '')
diff --git a/packages/ui/client/components/views/ViewModuleGraph.vue b/packages/ui/client/components/views/ViewModuleGraph.vue
@@ -7,6 +7,7 @@ import type { ModuleGraph, ModuleGraphController, ModuleLink, ModuleNode, Module
 
 const props = defineProps<{
   graph: ModuleGraph
+  projectName: string
 }>()
 
 const { graph } = toRefs(props)
@@ -161,7 +162,7 @@ function bindOnClick(selection: Selection<SVGCircleElement, ModuleNode, SVGGElem
     <Modal v-model="modalShow" direction="right">
       <template v-if="selectedModule">
         <Suspense>
-          <ModuleTransformResultView :id="selectedModule" @close="modalShow = false" />
+          <ModuleTransformResultView :id="selectedModule" :project-name="projectName" @close="modalShow = false" />
         </Suspense>
       </template>
     </Modal>
diff --git a/packages/vitest/src/api/setup.ts b/packages/vitest/src/api/setup.ts
@@ -67,8 +67,12 @@ export function setup(ctx: Vitest, _server?: ViteDevServer) {
         getConfig() {
           return ctx.config
         },
-        async getTransformResult(id) {
-          const result: TransformResultWithSource | null | undefined = await ctx.vitenode.transformRequest(id)
+        async getTransformResult(projectName: string, id, browser = false) {
+          const project = ctx.getProjectByName(projectName)
+          const result: TransformResultWithSource | null | undefined
+            = browser
+              ? await project.browser!.transformRequest(id)
+              : await project.vitenode.transformRequest(id)
           if (result) {
             try {
               result.source = result.source || (await fs.readFile(id, 'utf-8'))
diff --git a/packages/vitest/src/api/types.ts b/packages/vitest/src/api/types.ts
@@ -16,7 +16,7 @@ export interface WebSocketHandlers {
   getPaths: () => string[]
   getConfig: () => ResolvedConfig
   getModuleGraph: (projectName: string, id: string, browser?: boolean) => Promise<ModuleGraphData>
-  getTransformResult: (id: string) => Promise<TransformResultWithSource | undefined>
+  getTransformResult: (projectName: string, id: string, browser?: boolean) => Promise<TransformResultWithSource | undefined>
   readTestFile: (id: string) => Promise<string | null>
   saveTestFile: (id: string, content: string) => Promise<void>
   rerun: (files: string[]) => Promise<void>
