Extensions VS Code

import * as vscode from 'vscode'
import { FileTodos } from './workspace-scan'
 
export class StatsPanel {
  private static current: StatsPanel | undefined
  private readonly panel: vscode.WebviewPanel
 
  static show(context: vscode.ExtensionContext, files: FileTodos[]) {
    if (StatsPanel.current) {
      StatsPanel.current.panel.reveal(vscode.ViewColumn.Beside)
      StatsPanel.current.update(files)
      return
    }
    StatsPanel.current = new StatsPanel(context, files)
  }
 
  private constructor(private readonly context: vscode.ExtensionContext, files: FileTodos[]) {
    this.panel = vscode.window.createWebviewPanel(
      'todoRadar.stats',
      'TODO Radar — Statistiques',
      vscode.ViewColumn.Beside,
      {
        enableScripts: true,
        localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, 'media')],
      }
    )
 
    this.panel.webview.html = this.getHtml()
    this.panel.onDidDispose(() => (StatsPanel.current = undefined), null, context.subscriptions)
    this.update(files)
  }
 
  update(files: FileTodos[]) {
    // envoyé à la webview, détaillé plus bas
  }
 
  private getHtml(): string {
    return '' // détaillé plus bas
  }
}

private getHtml(): string {
  const webview = this.panel.webview
  const media = (file: string) =>
    webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'media', file))
 
  const nonce = crypto.randomUUID().replace(/-/g, '')
 
  return /* html */ `<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'none';
                 style-src ${webview.cspSource};
                 img-src ${webview.cspSource} https:;
                 script-src 'nonce-${nonce}';">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="${media('stats.css')}" rel="stylesheet">
  <title>Statistiques</title>
</head>
<body>
  <h1>Marqueurs du projet</h1>
  <div id="summary"></div>
  <ol id="files"></ol>
  <script nonce="${nonce}" src="${media('stats.js')}"></script>
</body>
</html>`
}

body {
  font-family: var(--vscode-font-family);
  font-size: var(--vscode-font-size);
  color: var(--vscode-foreground);
  background: var(--vscode-editor-background);
  padding: 0 1rem;
}
 
.bar {
  height: 0.5rem;
  background: var(--vscode-charts-yellow);
  border-radius: 2px;
}
 
a {
  color: var(--vscode-textLink-foreground);
}
 
li {
  border-bottom: 1px solid var(--vscode-panel-border);
  padding: 0.5rem 0;
}

update(files: FileTodos[]) {
  const byTag: Record<string, number> = {}
  for (const f of files) for (const m of f.matches) byTag[m.tag] = (byTag[m.tag] ?? 0) + 1
 
  const topFiles = files
    .map((f) => ({ path: vscode.workspace.asRelativePath(f.uri), uri: f.uri.toString(), count: f.matches.length }))
    .sort((a, b) => b.count - a.count)
    .slice(0, 10)
 
  this.panel.webview.postMessage({ type: 'stats', byTag, topFiles })
}

this.panel.webview.onDidReceiveMessage(
  async (message: { type: string; uri?: string }) => {
    if (message.type === 'open' && message.uri) {
      await vscode.window.showTextDocument(vscode.Uri.parse(message.uri), {
        viewColumn: vscode.ViewColumn.One,
      })
    }
  },
  null,
  context.subscriptions
)

const vscode = acquireVsCodeApi()
 
const summary = document.getElementById('summary')
const list = document.getElementById('files')
 
function render({ byTag, topFiles }) {
  summary.textContent = Object.entries(byTag)
    .map(([tag, count]) => `${tag} : ${count}`)
    .join(' · ')
 
  const max = Math.max(1, ...topFiles.map((f) => f.count))
  list.replaceChildren(
    ...topFiles.map((file) => {
      const li = document.createElement('li')
      const link = document.createElement('a')
      link.href = '#'
      link.textContent = `${file.path} (${file.count})`
      link.addEventListener('click', (e) => {
        e.preventDefault()
        vscode.postMessage({ type: 'open', uri: file.uri })
      })
      const bar = document.createElement('div')
      bar.className = 'bar'
      bar.style.width = `${(file.count / max) * 100}%`
      li.append(link, bar)
      return li
    })
  )
}
 
window.addEventListener('message', (event) => {
  if (event.data.type === 'stats') {
    render(event.data)
    vscode.setState(event.data)
  }
})
 
// Restaurer l'affichage si l'onglet a été masqué puis réaffiché
const previous = vscode.getState()
if (previous) render(previous)

context.subscriptions.push(
  vscode.commands.registerCommand('todo-radar.showStats', async () => {
    const files = await scanWorkspace()
    StatsPanel.show(context, files)
  })
)

{
  "command": "todo-radar.showStats",
  "title": "Afficher les statistiques",
  "category": "TODO Radar",
  "icon": "$(graph)"
}