From ba0294cbcd5e659bbc4adab13ee78c8347ad77fc Mon Sep 17 00:00:00 2001 From: Matt Bierner Date: Thu, 6 Aug 2020 13:55:57 -0700 Subject: [PATCH] Use uris over using node paths module vscode.Uri.joinPath is the prefered method for working with paths as it supports web properly --- webview-sample/README.md | 2 +- webview-sample/package-lock.json | 12 +++--------- webview-sample/package.json | 5 ++--- webview-sample/src/extension.ts | 27 ++++++++++++--------------- 4 files changed, 18 insertions(+), 28 deletions(-) diff --git a/webview-sample/README.md b/webview-sample/README.md index dfe5e4614..1e2ea222e 100644 --- a/webview-sample/README.md +++ b/webview-sample/README.md @@ -26,7 +26,7 @@ Demonstrates VS Code's [webview API](https://code.visualstudio.com/api/extension ## Running the example -- Open this example in VS Code 1.25+ +- Open this example in VS Code 1.47+ - `npm install` - `npm run watch` or `npm run compile` - `F5` to start debugging diff --git a/webview-sample/package-lock.json b/webview-sample/package-lock.json index e81de551c..6be656daa 100644 --- a/webview-sample/package-lock.json +++ b/webview-sample/package-lock.json @@ -48,16 +48,10 @@ "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==", "dev": true }, - "@types/node": { - "version": "12.12.35", - "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.35.tgz", - "integrity": "sha512-ASYsaKecA7TUsDrqIGPNk3JeEox0z/0XR/WsJJ8BIX/9+SkMSImQXKWfU/yBrSyc7ZSE/NPqLu36Nur0miCFfQ==", - "dev": true - }, "@types/vscode": { - "version": "1.38.0", - "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.38.0.tgz", - "integrity": "sha512-aGo8LQ4J1YF0T9ORuCO+bhQ5sGR1MXa7VOyOdEP685se3wyQWYUExcdiDi6rvaK61KUwfzzA19JRLDrUbDl7BQ==", + "version": "1.47.0", + "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.47.0.tgz", + "integrity": "sha512-nJA37ykkz9FYA0ZOQUSc3OZnhuzEW2vUhUEo4MiduUo82jGwwcLfyvmgd/Q7b0WrZAAceojGhZybg319L24bTA==", "dev": true }, "@typescript-eslint/eslint-plugin": { diff --git a/webview-sample/package.json b/webview-sample/package.json index 1f766aac5..628b31006 100644 --- a/webview-sample/package.json +++ b/webview-sample/package.json @@ -4,7 +4,7 @@ "version": "0.0.1", "publisher": "vscode-samples", "engines": { - "vscode": "^1.38.0" + "vscode": "^1.47.0" }, "categories": [ "Other" @@ -41,11 +41,10 @@ }, "dependencies": {}, "devDependencies": { - "@types/node": "^12.12.0", "@typescript-eslint/eslint-plugin": "^3.0.2", "@typescript-eslint/parser": "^3.0.2", "eslint": "^7.1.0", "typescript": "^3.9.4", - "@types/vscode": "^1.38.0" + "@types/vscode": "^1.47.0" } } diff --git a/webview-sample/src/extension.ts b/webview-sample/src/extension.ts index b85edab13..84b143805 100644 --- a/webview-sample/src/extension.ts +++ b/webview-sample/src/extension.ts @@ -1,6 +1,5 @@ -import * as path from 'path'; import * as vscode from 'vscode'; - + const cats = { 'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif', 'Compiling Cat': 'https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif', @@ -10,7 +9,7 @@ const cats = { export function activate(context: vscode.ExtensionContext) { context.subscriptions.push( vscode.commands.registerCommand('catCoding.start', () => { - CatCodingPanel.createOrShow(context.extensionPath); + CatCodingPanel.createOrShow(context.extensionUri); }) ); @@ -27,7 +26,7 @@ export function activate(context: vscode.ExtensionContext) { vscode.window.registerWebviewPanelSerializer(CatCodingPanel.viewType, { async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) { console.log(`Got state: ${state}`); - CatCodingPanel.revive(webviewPanel, context.extensionPath); + CatCodingPanel.revive(webviewPanel, context.extensionUri); } }); } @@ -45,10 +44,10 @@ class CatCodingPanel { public static readonly viewType = 'catCoding'; private readonly _panel: vscode.WebviewPanel; - private readonly _extensionPath: string; + private readonly _extensionUri: vscode.Uri; private _disposables: vscode.Disposable[] = []; - public static createOrShow(extensionPath: string) { + public static createOrShow(extensionUri: vscode.Uri) { const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined; @@ -69,20 +68,20 @@ class CatCodingPanel { enableScripts: true, // And restrict the webview to only loading content from our extension's `media` directory. - localResourceRoots: [vscode.Uri.file(path.join(extensionPath, 'media'))] + localResourceRoots: [vscode.Uri.joinPath(extensionUri, 'media')] } ); - CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionPath); + CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri); } - public static revive(panel: vscode.WebviewPanel, extensionPath: string) { - CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionPath); + public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) { + CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri); } - private constructor(panel: vscode.WebviewPanel, extensionPath: string) { + private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) { this._panel = panel; - this._extensionPath = extensionPath; + this._extensionUri = extensionUri; // Set the webview's initial html content this._update(); @@ -163,9 +162,7 @@ class CatCodingPanel { private _getHtmlForWebview(webview: vscode.Webview, catGifPath: string) { // Local path to main script run in the webview - const scriptPathOnDisk = vscode.Uri.file( - path.join(this._extensionPath, 'media', 'main.js') - ); + const scriptPathOnDisk = vscode.Uri.joinPath(this._extensionUri, 'media', 'main.js'); // And the uri we use to load this script in the webview const scriptUri = webview.asWebviewUri(scriptPathOnDisk);