feat(smartAutocomplete): View data update on file change (#103)

* fix(viewData): update on file change With the new WebView Api, seems like we have to manually update the WebView's html * fix(aureliaViewData): Don't update webview panel on close
aurelia · Aug 17, 2019 · 26dcb05 · 26dcb05
1 parent 2a91268
commit 26dcb05
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 19 deletions.
diff --git a/src/client/Preview/Register.ts b/src/client/Preview/Register.ts
@@ -3,47 +3,63 @@ import {TextDocumentContentProvider} from './TextDocumentContentProvider';
 
 export function registerPreview(context, window, client) {
 
+  const aureliaViewDataPanelType = 'aureliaViewData';
+
   let previewUri = vscode.Uri.parse('aurelia-preview://authority/aurelia-preview');
 
   let provider = new TextDocumentContentProvider(client);
   let registration = vscode.workspace.registerTextDocumentContentProvider('aurelia-preview', provider);
+  let isPanelVisible: boolean = false;
+  let panel: vscode.WebviewPanel;
+
+  function fillWebViewHtml(bodyContent: string): string {
+    return `
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Cat Coding</title>
+        </head>
+        ${bodyContent}
+      </html>
+    `;
+  }
 
   vscode.workspace.onDidChangeTextDocument((e: vscode.TextDocumentChangeEvent) => {
+    if (!isPanelVisible) return;
     if (e.document === vscode.window.activeTextEditor.document) {
-      provider.update(previewUri);
+      provider.update(previewUri).then(success => {
+        panel.webview.html = fillWebViewHtml(success);
+      });
     }
   });
 
-  vscode.window.onDidChangeTextEditorSelection((e: vscode.TextEditorSelectionChangeEvent) => {
-    if (e.textEditor === vscode.window.activeTextEditor) {
-      provider.update(previewUri);
-    }
+  vscode.window.onDidChangeActiveTextEditor((editor: vscode.TextEditor) => {
+    setTimeout(() => {
+      if (!isPanelVisible) return;
+      if (editor === vscode.window.activeTextEditor) {
+        provider.update(previewUri).then(success => {
+          panel.webview.html = fillWebViewHtml(success);
+        });
+      }
+    }, 0);
   });
 
   context.subscriptions.push(vscode.commands.registerCommand('aurelia.showViewProperties', () => {
 
     const smartAutocomplete = vscode.workspace.getConfiguration().get('aurelia.featureToggles.smartAutocomplete');
     if (smartAutocomplete) {
-      const panel = vscode.window.createWebviewPanel(
-        'aureliaViewData',
+      panel = vscode.window.createWebviewPanel(
+        aureliaViewDataPanelType,
         'Aurelia view data',
         vscode.ViewColumn.Two,
       );
 
       provider.provideTextDocumentContent(previewUri)
         .then(
           (success) => {
-            panel.webview.html = `
-              <!DOCTYPE html>
-              <html lang="en">
-                <head>
-                    <meta charset="UTF-8">
-                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                    <title>Cat Coding</title>
-                </head>
-                ${success}
-              </html>
-            `
+            panel.webview.html = fillWebViewHtml(success);
           },
           (reason) => {
             window.showErrorMessage(reason);
@@ -52,8 +68,23 @@ export function registerPreview(context, window, client) {
       return vscode.window.showWarningMessage('This command requires the experimental feature "smartAutocomplete" to be enabled');
     }
 
+    /**
+     * Set panel visible flag to true, if
+     * - we have the correct WebView type (multiple WebView types possible)
+     * - and panel itself is not active
+     */
+    panel.onDidChangeViewState(event => {
+      const correctPanelType = (event.webviewPanel.viewType === aureliaViewDataPanelType);
+      /** Don't update panel if the panel itself is 'active' */
+      const panelNotActive = !event.webviewPanel.active
+      isPanelVisible = correctPanelType && panelNotActive;
+    });
+
+    panel.onDidDispose(event => {
+      isPanelVisible = false;
+    });
 
-	}));
+  }));
 
 }
 
diff --git a/src/client/Preview/TextDocumentContentProvider.ts b/src/client/Preview/TextDocumentContentProvider.ts
@@ -119,5 +119,6 @@
 
 		public update(uri: vscode.Uri) {
 			this._onDidChange.fire(uri);
+      return this.provideTextDocumentContent(uri);
 		}
 	}