|
| 1 | +import type { SourceModuleDiagnostic } from 'vitest-vscode-shared' |
| 2 | +import { relative } from 'node:path' |
| 3 | +import { pathToFileURL } from 'node:url' |
| 4 | +import * as vscode from 'vscode' |
| 5 | +import { getConfig } from './config' |
| 6 | +import { log } from './log' |
| 7 | + |
| 8 | +export class ImportsBreakdownProvider { |
| 9 | + private disposables: vscode.Disposable[] = [] |
| 10 | + private decorationType: vscode.TextEditorDecorationType |
| 11 | + |
| 12 | + private _decorations = new Map<string, vscode.DecorationOptions[]>() |
| 13 | + |
| 14 | + private showDecorations = getConfig().showImportsDuration |
| 15 | + |
| 16 | + constructor( |
| 17 | + private getSourceModuleDiagnostic: (moduleId: string) => Promise<SourceModuleDiagnostic>, |
| 18 | + ) { |
| 19 | + // Create a decoration type with gray color |
| 20 | + this.decorationType = vscode.window.createTextEditorDecorationType({ |
| 21 | + after: { |
| 22 | + color: '#808080', |
| 23 | + margin: '0 0 0 0.5em', |
| 24 | + }, |
| 25 | + }) |
| 26 | + |
| 27 | + // Update decorations when the active editor changes |
| 28 | + this.disposables.push( |
| 29 | + vscode.window.onDidChangeActiveTextEditor((editor) => { |
| 30 | + if (editor) { |
| 31 | + this.updateDecorations(editor) |
| 32 | + } |
| 33 | + }), |
| 34 | + ) |
| 35 | + |
| 36 | + // Update decorations when the document changes |
| 37 | + this.disposables.push( |
| 38 | + vscode.workspace.onDidChangeTextDocument((event) => { |
| 39 | + const editor = vscode.window.activeTextEditor |
| 40 | + if (editor && event.document === editor.document) { |
| 41 | + this.updateDecorations(editor) |
| 42 | + } |
| 43 | + }), |
| 44 | + ) |
| 45 | + |
| 46 | + this.disposables.push( |
| 47 | + vscode.workspace.onDidChangeConfiguration((event) => { |
| 48 | + if (event.affectsConfiguration('vitest.showImportsDuration')) { |
| 49 | + this.showDecorations = getConfig().showImportsDuration |
| 50 | + |
| 51 | + this.refreshCurrentDecorations() |
| 52 | + } |
| 53 | + }), |
| 54 | + ) |
| 55 | + |
| 56 | + // Update decorations for the currently active editor |
| 57 | + if (vscode.window.activeTextEditor) { |
| 58 | + this.updateDecorations(vscode.window.activeTextEditor) |
| 59 | + } |
| 60 | + } |
| 61 | + |
| 62 | + public refreshCurrentDecorations() { |
| 63 | + log.info('[DECOR] Reset all decorations.') |
| 64 | + this._decorations.clear() |
| 65 | + |
| 66 | + // Update decorations for the currently active editor |
| 67 | + if (vscode.window.activeTextEditor) { |
| 68 | + this.updateDecorations(vscode.window.activeTextEditor) |
| 69 | + } |
| 70 | + } |
| 71 | + |
| 72 | + private async updateDecorations(editor: vscode.TextEditor) { |
| 73 | + const document = editor.document |
| 74 | + if (!this.showDecorations || document.uri.scheme !== 'file' || !document.lineCount) { |
| 75 | + editor.setDecorations(this.decorationType, []) |
| 76 | + return |
| 77 | + } |
| 78 | + const fsPath = document.uri.fsPath |
| 79 | + if (this._decorations.has(fsPath)) { |
| 80 | + log.info('[DECOR] Decorations for', fsPath, 'are already cached. Displaying them.') |
| 81 | + editor.setDecorations(this.decorationType, this._decorations.get(fsPath)!) |
| 82 | + return |
| 83 | + } |
| 84 | + |
| 85 | + const diagnostic = await this.getSourceModuleDiagnostic(fsPath).catch(() => null) |
| 86 | + if (!diagnostic || !diagnostic.modules) { |
| 87 | + editor.setDecorations(this.decorationType, []) |
| 88 | + return |
| 89 | + } |
| 90 | + |
| 91 | + const decorations: vscode.DecorationOptions[] = [] |
| 92 | + |
| 93 | + // TODO: untracked modules somehow? |
| 94 | + diagnostic.modules.forEach((diagnostic) => { |
| 95 | + const range = new vscode.Range( |
| 96 | + diagnostic.start.line - 1, |
| 97 | + diagnostic.start.column, |
| 98 | + diagnostic.end.line - 1, |
| 99 | + diagnostic.end.column, |
| 100 | + ) |
| 101 | + |
| 102 | + const overallTime = diagnostic.totalTime + (diagnostic.transformTime || 0) |
| 103 | + let color: string | undefined |
| 104 | + if (overallTime >= 500) { |
| 105 | + color = 'rgb(248 113 113 / 0.8)' |
| 106 | + } |
| 107 | + else if (overallTime >= 100) { |
| 108 | + color = 'rgb(251 146 60 / 0.8)' |
| 109 | + } |
| 110 | + |
| 111 | + let diagnosticMessage = ` |
| 112 | +### VITEST DIAGNOSTIC |
| 113 | +- It took **${formatPreciseTime(diagnostic.totalTime)}** to import this module, including static imports. |
| 114 | +- It took **${formatPreciseTime(diagnostic.selfTime)}** to import this modules, excluding static imports. |
| 115 | +- It took **${formatPreciseTime(diagnostic.transformTime || 0)}** to transform this module.` |
| 116 | + |
| 117 | + if (diagnostic.external) { |
| 118 | + diagnosticMessage += `\n- This module was **externalized** to [${diagnostic.resolvedUrl}](${pathToFileURL(diagnostic.resolvedId).toString()})` |
| 119 | + } |
| 120 | + if (diagnostic.importer && document.fileName !== diagnostic.importer) { |
| 121 | + diagnosticMessage += `\n- This module was originally imported by [${relative(document.fileName, diagnostic.importer)}](${pathToFileURL(diagnostic.importer)})` |
| 122 | + } |
| 123 | + |
| 124 | + diagnosticMessage += `\n\nYou can disable diagnostic by setting [\`vitest.showImportsDuration\`](command:workbench.action.openSettings?%5B%22vitest.showImportsDuration%22%5D) option in your VSCode settings to \`false\`.` |
| 125 | + const ms = new vscode.MarkdownString(diagnosticMessage) |
| 126 | + ms.isTrusted = true |
| 127 | + |
| 128 | + decorations.push({ |
| 129 | + range, |
| 130 | + hoverMessage: ms, |
| 131 | + renderOptions: { |
| 132 | + after: { |
| 133 | + color, |
| 134 | + contentText: formatTime(overallTime), |
| 135 | + }, |
| 136 | + }, |
| 137 | + }) |
| 138 | + }) |
| 139 | + |
| 140 | + this._decorations.set(fsPath, decorations) |
| 141 | + |
| 142 | + editor.setDecorations(this.decorationType, decorations) |
| 143 | + } |
| 144 | + |
| 145 | + dispose() { |
| 146 | + this.decorationType.dispose() |
| 147 | + this.disposables.forEach(d => d.dispose()) |
| 148 | + } |
| 149 | +} |
| 150 | + |
| 151 | +function formatTime(time: number): string { |
| 152 | + if (time > 1000) { |
| 153 | + return `${(time / 1000).toFixed(2)}s` |
| 154 | + } |
| 155 | + return `${Math.round(time)}ms` |
| 156 | +} |
| 157 | + |
| 158 | +function formatPreciseTime(time: number): string { |
| 159 | + if (time > 1000) { |
| 160 | + return `${(time / 1000).toFixed(2)}s` |
| 161 | + } |
| 162 | + return `${time.toFixed(2)}ms` |
| 163 | +} |
0 commit comments