## 1.5.1

type-script-helper/src/WebViewPanel.ts

@@ -0,0 +1,166 @@
+import * as vscode from "vscode";
+import { getNonce } from "./getNonce";
+import { apiBaseUrl } from "./constants";
+import { PostMessage } from "./PostMessage";
+
+export function refreshWebView(extensionContext: vscode.ExtensionContext): undefined {
+  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>`;
+  }
+}