#10 load vega libs for preview from ext. scripts folder

package.json

@@ -2,7 +2,7 @@
   "name": "vscode-vega-viewer",
   "displayName": "Vega Viewer",
   "description": "Vega Viewer",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "publisher": "RandomFractalsInc",
   "author": "Taras Novak",
   "contributors": [
@@ -125,5 +125,9 @@
     "typescript": "^3.2.2",
     "vscode": "^1.1.26"
   },
-  "dependencies": {}
+  "dependencies": {
+    "vega": "^4.4.0",
+    "vega-lite": "^3.0.0-rc12",
+    "vega-embed": "^3.29.1"
+  }
 }

src/extension.ts

@@ -32,7 +32,7 @@ export function activate(context: ExtensionContext) {
 
   // register Vega preview serializer for restore on vscode restart
   window.registerWebviewPanelSerializer('vega.preview', 
-    new VegaPreviewSerializer(previewTemplate.content));
+    new VegaPreviewSerializer(context.extensionPath, previewTemplate.content));
 
   // Vega: Preview command
   let vegaWebview: Disposable = commands.registerCommand('vega.preview', (uri) => {
@@ -46,7 +46,8 @@ export function activate(context: ExtensionContext) {
         return;
       }
     }
-    const preview: VegaPreview = new VegaPreview(resource, viewColumn, previewTemplate.content);
+    const preview: VegaPreview = 
+      new VegaPreview(context.extensionPath, resource, viewColumn, previewTemplate.content);
     previewManager.add(preview);
     return preview.webview;
   });

src/vega.preview.ts

@@ -5,7 +5,6 @@ import {
   Disposable, 
   Uri, 
   ViewColumn, 
-  Memento,
   WorkspaceFolder, 
   Webview,
   WebviewPanel, 
@@ -17,19 +16,24 @@ import * as path from 'path';
 import { previewManager } from './preview.manager';
 
 export class VegaPreviewSerializer implements WebviewPanelSerializer {
-  constructor(private template: string) {
+  constructor(private extensionPath: string, private template: string) {
   }
 
   async deserializeWebviewPanel(webviewPanel: WebviewPanel, state: any) {
     // console.log('vega.viewer:deserialize:', state.uri.toString());
     previewManager.add(
-      new VegaPreview( Uri.parse(state.uri),
-        webviewPanel.viewColumn, this.template, webviewPanel
+      new VegaPreview(
+        this.extensionPath, 
+        Uri.parse(state.uri),
+        webviewPanel.viewColumn, 
+        this.template, 
+        webviewPanel
     ));
   }
 }
 export class VegaPreview {
 
+  private _extensionPath: string;
   private _uri: Uri;
   private _previewUri: Uri;
   private _fileName: string;
@@ -38,13 +42,17 @@ export class VegaPreview {
   private _panel: WebviewPanel;
   protected _disposables: Disposable[] = [];
 
-  constructor(uri: Uri, viewColumn: ViewColumn, 
+  constructor(extensionPath: string, 
+    uri: Uri, viewColumn: ViewColumn, 
     template: string, panel?: WebviewPanel) {
+    this._extensionPath = extensionPath;
     this._uri = uri;
     this._fileName = path.basename(uri.fsPath);
     this._previewUri = this._uri.with({scheme: 'vega'});
     this._title = `Preview ${this._fileName}`;
-    this._html = template;
+    const scriptsPath: string = Uri.file(path.join(this._extensionPath, 'scripts'))
+      .with({scheme: 'vscode-resource'}).toString(true);
+    this._html = template.replace(/\{scripts\}/g, scriptsPath);
     this._panel = panel;
     this.initWebview(viewColumn);
     this.configure();
@@ -95,6 +103,8 @@ export class VegaPreview {
     else if (!this.uri.scheme || this.uri.scheme === 'file') {
       localResourceRoots.push(Uri.file(path.dirname(this.uri.fsPath)));
     }
+    // add vega preview js scripts
+    localResourceRoots.push(Uri.file(path.join(this._extensionPath, 'scripts')));
     // console.log(localResourceRoots);
     return localResourceRoots;
   }

templates/vega.preview.html

@@ -4,15 +4,15 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="Content-Security-Policy" 
-      content="default-src * vscode-resource: https: 'unsafe-inline' 'unsafe-eval'; img-src vscode-resource: https:; connect-src vscode-resource: https:;">
+      content="default-src * vscode-resource: https: 'unsafe-inline' 'unsafe-eval'; script-src vscode-resource: https: 'unsafe-inline' 'unsafe-eval'; img-src vscode-resource: https:; connect-src vscode-resource: https:;">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vega Preview</title>
     <meta name="description" content="Vega is a declarative format for creating, saving, and sharing visualization designs. With Vega, visualizations are described in JSON, and generate interactive views using either HTML5 Canvas or SVG.">
     <base href="https://vega.github.io/" target="_blank" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
-    <script src="https://cdn.jsdelivr.net/npm/vega@4.4"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc10"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
+    <script src="{scripts}/vega.min.js"></script>
+    <script src="{scripts}/vega-lite.min.js"></script>
+    <script src="{scripts}/vega-embed.min.js"></script>
     <style>
       body {
         background: white;

tsconfig.json

@@ -20,6 +20,5 @@
     ".vscode-test",
     "templates",
     "src/test/examples",
-
   ]
 }