yo-vscode/type-script-helper/src/WebViewPanel.ts

import * as vscode from "vscode";
import { getNonce } from "./getNonce";
import { apiBaseUrl } from "./constants";
import { PostMessage } from "./PostMessage";

export function refreshWebView(extensionContext: vscode.ExtensionContext): any {
  WebViewPanel.kill();
  WebViewPanel.createOrShow(extensionContext);
}

export class WebViewPanel {
  /**
   * Track the currently panel. Only allow a single panel to exist at a time.
   */
  public static currentPanel: WebViewPanel | undefined;

  public static readonly viewType = "web-view-panel";

  private _disposables: vscode.Disposable[] = [];

  public static createOrShow(extensionContext: vscode.ExtensionContext) {
    const column = vscode.window.activeTextEditor
      ? vscode.window.activeTextEditor.viewColumn
      : undefined;

    // If we already have a panel, show it.
    if (WebViewPanel.currentPanel) {
      WebViewPanel.currentPanel._panel.reveal(column);
      WebViewPanel.currentPanel._update();
      return;
    }

    // Otherwise, create a new panel.
    const panel = vscode.window.createWebviewPanel(
      WebViewPanel.viewType,
      "Web-View-Panel",
      column || vscode.ViewColumn.One,
      {
        // Enable javascript in the webview
        enableScripts: true,

        // And restrict the webview to only loading content from our extension's `media` directory.
        localResourceRoots: [
          vscode.Uri.joinPath(extensionContext.extensionUri, "media"),
          vscode.Uri.joinPath(extensionContext.extensionUri, "out/compiled"),
        ],
      }
    );

    WebViewPanel.currentPanel = new WebViewPanel(panel, extensionContext);
  }

  public static kill() {
    WebViewPanel.currentPanel?.dispose();
    WebViewPanel.currentPanel = undefined;
  }

  public static revive(panel: vscode.WebviewPanel, extensionContext: vscode.ExtensionContext) {
    WebViewPanel.currentPanel = new WebViewPanel(panel, extensionContext);
  }

  private constructor(private readonly _panel: vscode.WebviewPanel, private readonly _extensionContext: vscode.ExtensionContext) {

    // Set the webview's initial html content
    this._update();

    // Listen for when the panel is disposed
    // This happens when the user closes the panel or when the panel is closed programmatically
    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);

    // // Handle messages from the webview
    // this._panel.webview.onDidReceiveMessage(
    //   (message) => {
    //     switch (message.command) {
    //       case "alert":
    //         vscode.window.showErrorMessage(message.text);
    //         return;
    //     }
    //   },
    //   null,
    //   this._disposables
    // );
  }

  public dispose() {
    WebViewPanel.currentPanel = undefined;

    // Clean up our resources
    this._panel.dispose();

    while (this._disposables.length) {
      const x = this._disposables.pop();
      if (x) {
        x.dispose();
      }
    }
  }

  private async _update() {
    const webview = this._panel.webview;

    this._panel.webview.html = this._getHtmlForWebview(webview);
    webview.onDidReceiveMessage(async (postMessage: PostMessage) => {
      switch (postMessage.type) {        
        case "on-info":
          if (!postMessage.value)
            return;
          vscode.window.showInformationMessage(postMessage.value);
          break;
        case "on-error":
          if (!postMessage.value)
            return;
          vscode.window.showErrorMessage(postMessage.value);
          break;
        default:
          vscode.window.showErrorMessage(postMessage.type);
          break;
      }
    });
  }

  private _getHtmlForWebview(webview: vscode.Webview) {
    const styleResetUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "reset.css")
    );
    const styleVSCodeUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "vscode.css")
    );

    const scriptUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionContext.extensionUri, "out", "compiled/DisplayDate.js")
    );
    const styleMainUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionContext.extensionUri, "out", "compiled/DisplayDate.css")
    );

    // Use a nonce to only allow a specific script to be run.
    const nonce = getNonce();

    return `<!DOCTYPE html>
			<html lang="en">
			<head>
				<meta charset="UTF-8">
				<!--
					Use a content security policy to only allow loading images from https or from our extension directory,
					and only allow scripts that have a specific nonce.
        -->
        <meta http-equiv="Content-Security-Policy"
          content="img-src https: data:;
          style-src 'unsafe-inline' ${webview.cspSource};
          script-src 'nonce-${nonce}';">
				<meta name="viewport" content="width=device-width, initial-scale=1.0">
				<link href="${styleResetUri}" rel="stylesheet">
				<link href="${styleVSCodeUri}" rel="stylesheet">
        <link href="${styleMainUri}" rel="stylesheet">
        <script nonce="${nonce}">
          const acquiredVsCodeApi = acquireVsCodeApi();
          const apiBaseUrl = ${JSON.stringify(apiBaseUrl)}
        </script>
			</head>
      <body>
				<script nonce="${nonce}" src="${scriptUri}"></script>
			</body>
			</html>`;
  }
}