load-graph-base-html.ts

import { findNxPackagePath } from '@nx-console/shared-npm';
import { getNxWorkspacePath } from '@nx-console/vscode-configuration';
import { readFileSync } from 'fs';
import { dirname, join } from 'path';
import { Uri, Webview, window } from 'vscode';

export async function loadGraphBaseHtml(webview: Webview): Promise<string> {
  const workspacePath = await getNxWorkspacePath();
  const graphIndexPath = await findNxPackagePath(
    workspacePath,
    join('src', 'core', 'graph', 'index.html'),
  );
  if (!graphIndexPath) {
    window.showErrorMessage(
      'Error loading the nx graph. Did you run npm/yarn/pnpm install?',
    );
    return '';
  }
  const graphPath = dirname(graphIndexPath);

  const asWebviewUri = (path: string) =>
    webview.asWebviewUri(Uri.file(join(graphPath, path))).toString();

  let html = readFileSync(graphIndexPath, 'utf-8');
  html = html.replace(/environment.js/g, asWebviewUri('environment.js'));
  html = html.replace(/polyfills.js/g, asWebviewUri('polyfills.js'));
  html = html.replace(/runtime.js/g, asWebviewUri('runtime.js'));
  html = html.replace(/styles.js/g, asWebviewUri('styles.js'));
  html = html.replace(/styles.css/g, asWebviewUri('styles.css'));
  html = html.replace(/main.js/g, asWebviewUri('main.js'));

  html = html.replace(
    '</head>',
    /*html*/ `
  <style>
    #sidebar {
      display: none;
    }

    [data-cy="no-tasks-selected"] {
      display: none;
    }

    body {
      background-color: var(--vscode-editor-background) !important;
      color: var(--vscode-editor-foreground) !important;
    }
    html {
      font-size: var(--vscode-font-size) !important;
    }
  </style>
  </head>
  `,
  );

  html = html.replace(
    '</head>',
    /*html*/ `
  <script> 
    // communication with server through vscode api 
    // we send requests to vscode with an id 
    // as responses come in, we compare ids and resolve the promise
    const vscode = acquireVsCodeApi();
    const pendingRequests = new Map();

    window.externalApi = {}
    window.addEventListener('message', ({ data }) => {
      const { type, id, payload } = data;
      
      if (type.startsWith('request') && id && pendingRequests.has(id)) {
        const payloadParsed = JSON.parse(payload);
        const resolve = pendingRequests.get(id);
        resolve(payloadParsed);
        pendingRequests.delete(id);
      }
    });

    function sendRequest(type, payload) {
      return new Promise((resolve) => {
        const id = generateUniqueId();
        pendingRequests.set(id, resolve);
        vscode.postMessage({ type, id, payload });
      });
    }

    function generateUniqueId() {
      return Math.random().toString(36).substr(2, 9);
    }

    window.externalApi.loadProjectGraph = () => sendRequest('requestProjectGraph');
    window.externalApi.loadTaskGraph = () => sendRequest('requestTaskGraph');
    window.externalApi.loadExpandedTaskInputs = (taskId) => sendRequest('requestExpandedTaskInputs', taskId);
    window.externalApi.loadSourceMaps = () => sendRequest('requestSourceMaps');

    // set up interaction events (open project config, file click, ...)
    window.externalApi.graphInteractionEventListener = (message) => {
      vscode.postMessage(message)
    }

    window.environment = "nx-console"

    // waiting for nx graph to be ready
    async function waitForRouter() {
        if (window.externalApi && window.externalApi.router) {
            return;
        }
        const waitForRouterPromise = () => {
            return new Promise((resolve) => {
                const observer = new MutationObserver((mutationsList, observer) => {
                    if (window.externalApi && window.externalApi.router) {
                        observer.disconnect();
                        resolve();
                    }
                });
                observer.observe(document.body, { childList: true, subtree: true });
            });
        };
        await waitForRouterPromise();
    }
    window.waitForRouter = waitForRouter;
  </script>

  </head>
  `,
  );

  return html;
}