Adding state persist example

webview-sample/README.md

@@ -10,6 +10,8 @@ Demonstrates VS Code's [webview API](https://code.visualstudio.com/docs/extensio
 - Sending messages from a webview to an extension.
 - Using a basic content security policy.
 - Webview lifecycle and handling dispose.
+- Saving and restoring state when the panel goes into the background. (Requires VS Code 1.25+)
+- Serialization and persistence across VS Code reboots. (Requires VS Code 1.25+)
 
 ## Running the example
 

webview-sample/media/main.js

@@ -3,12 +3,19 @@
 (function () {
     const vscode = acquireVsCodeApi();
 
+    const oldState = vscode.getState && vscode.getState();
+
     const counter = document.getElementById('lines-of-code-counter');
-    let currentCount = 0;
+    console.log(oldState);
+    let currentCount = (oldState && oldState.count) || 0;
+    counter.textContent = currentCount;
 
     setInterval(() => {
         counter.textContent = currentCount++;
 
+        // Update state
+        vscode.setState && vscode.setState({ count: currentCount });
+
         // Alert the extension when the cat introduces a bug
         if (Math.random() < Math.min(0.001 * currentCount, 0.05)) {
             // Send a message back to the extension

webview-sample/package.json

@@ -11,7 +11,8 @@
   ],
   "activationEvents": [
     "onCommand:catCoding.start",
-    "onCommand:catCoding.doRefactor"
+    "onCommand:catCoding.doRefactor",
+    "onWebviewPanel:catCoding"
   ],
   "main": "./out/src/extension",
   "contributes": {

webview-sample/src/extension.ts

@@ -18,6 +18,17 @@ export function activate(context: vscode.ExtensionContext) {
             CatCodingPanel.currentPanel.doRefactor();
         }
     }));
+
+    // Serializers only introduced in VS Code 1.25+
+    if ((vscode.window as any).registerWebviewPanelSerializer) {
+        // Make sure we register a serilizer in activation event
+        (vscode.window as any).registerWebviewPanelSerializer(CatCodingPanel.viewType, {
+            async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
+                console.log(`Got state: ${state}`);
+                CatCodingPanel.revive(webviewPanel, context.extensionPath);
+            }
+        });
+    }
 }
 
 /**
@@ -29,7 +40,7 @@ class CatCodingPanel {
      */
     public static currentPanel: CatCodingPanel | undefined;
 
-    private static readonly viewType = 'catCoding';
+    public static readonly viewType = 'catCoding';
 
     private readonly _panel: vscode.WebviewPanel;
     private readonly _extensionPath: string;
@@ -39,28 +50,36 @@ class CatCodingPanel {
         const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined;
 
         // If we already have a panel, show it.
-        // Otherwise, create a new panel.
         if (CatCodingPanel.currentPanel) {
             CatCodingPanel.currentPanel._panel.reveal(column);
-        } else {
-            CatCodingPanel.currentPanel = new CatCodingPanel(extensionPath, column || vscode.ViewColumn.One);
+            return;
         }
-    }
 
-    private constructor(extensionPath: string, column: vscode.ViewColumn) {
-        this._extensionPath = extensionPath;
-
-        // Create and show a new webview panel
-        this._panel = vscode.window.createWebviewPanel(CatCodingPanel.viewType, "Cat Coding", column, {
+        // Otherwise, create a new panel.
+        const panel = vscode.window.createWebviewPanel(CatCodingPanel.viewType, "Cat Coding", column || vscode.ViewColumn.One, {
             // Enable javascript in the webview
             enableScripts: true,
 
             // And restric the webview to only loading content from our extension's `media` directory.
             localResourceRoots: [
-                vscode.Uri.file(path.join(this._extensionPath, 'media'))
+                vscode.Uri.file(path.join(extensionPath, 'media'))
             ]
         });
 
+        CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionPath);
+    }
+
+    public static revive(panel: vscode.WebviewPanel, extensionPath: string) {
+        CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionPath);
+    }
+
+    private constructor(
+        panel: vscode.WebviewPanel,
+        extensionPath: string
+    ) {
+        this._panel = panel;
+        this._extensionPath = extensionPath;
+
         // Set the webview's initial html content 
         this._update();