Use uris over using node paths module

vscode.Uri.joinPath is the prefered method for working with paths as it supports web properly
gongdongho12 · Aug 6, 2020 · ba0294c · ba0294c
1 parent 8e1a291
commit ba0294c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 28 deletions.
diff --git 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
diff --git 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
@@ -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);