Upgrade to VS Code's webview API

[mjbvz]

Hi, I'm on the VS Code team. I noticed that your extension uses the vscode.previewHtml command which is deprecated and which we are actively working to remove: microsoft/vscode#62630

We've developed a webview API that provides a much better developer experience and offers a number of important security and compatibility benefits over previewHtml. We cannot fix previewHtml without breaking backwards compatibility, and have instead opted to remove it.

To ensure that your extension continues to work properly in VS Code, please try upgrading to use the new Webview API. You can find documentation on the API usage here. Let me know if you have any questions or concerns about this migration

[rkeithhill]

Thanks for the heads up!

[mjbvz]

Just a heads up: in VS Code 1.32 (the February update), using the previewHtml command will show an alert to the user, although the command should still work. We plan to remove the command entirely with VS Code 1.33 (March update)

[rkeithhill]

I started the switch over but am having a bit of a tough go at it. Folks who use this feature with the PowerShell extension expect to be able to run their own personal JavaScript files (not under some extension's subdir). They tend to put these JS files in a workspace or their home dir. I guess I could inline the JavaScript in the HTML?

[wycats]

I discovered this problem after trying to understand why this wasn't working. What's the status of this?

[TylerLeonhardt]

@mjbvz do you have any insight on how we could accomplish running a users own personal js files (besides just inlining)?

[TylerLeonhardt]

@wycats it is indeed broken as of 1.33 of vscode. We'll get it fixed but there might be some breaking changes that come with it as the underlying API is very different.

[mjbvz]

@TylerLeonhardt Your webview can pass any set of paths to localResourceRoots. Try passing in the path to the user scripts

[TylerLeonhardt]

@mjbvz that sadly doesn't seem to work:

See the variables section:

The URI to my js file is there... but the function defined in said js file is not available

[mjbvz]

Are the scripts also referenced on the page using vscode-resource URIs? Can you share a branch that has your current code?

[TylerLeonhardt]

Ah... wasn't also including them in the body of the html... sorry about that.

Now that I've referenced them using vscode-resource:///full/path/to/fdsa.js everything works as expected!

[TylerLeonhardt]

There doesn't seem to be a way to update the localResourceRoots once you've already created a webview. Is that true, @mjbvz? That field in webviewPanel.webview.options.localResourceRoots seems to be readonly.

[mjbvz]

The options objects are immutable but Webview.options is mutable

[TylerLeonhardt]

#1919 fixed in this.