Test: Webview UI Toolkit

[daviddossett]

Refs: #94741

• macOS @alexdima
• linux @deepak1556
• windows @rchiodo

Complexity: 4

Authors: @hawkticehurst, @daviddossett

Create Issue in toolkit repo

---

The Webview UI Toolkit for Visual Studio Code is a component library made for building webview-based extension UI that matches the native look and behavior of Visual Studio Code itself.

Ahead of a preview release, we want to ensure that developers can easily install the toolkit and get started by following a simple guide.

Here are the scenarios to test:

• Find the Getting Started Guide in the toolkit repo.
• Follow the guide to create a new extension that installs and uses the toolkit.
• Trigger a "Hello world" notification by clicking the vscode-button in the extension using vscode.window.showInformationMessage
• Switch to dark, light, and high-contrast themes and verify that elements appear as expected.
• Add an instance of each remaining component to the webview HTML and verify they render as expected. Browse the docs to see examples of each component's "Basic Usage".
• Try different ways to break the components!

[gjsjohnmurray]

Tantalising info here, but the toolkit repo link gives me a 404, so I guess it isn't open source yet.

[daviddossett]

@alexdima @deepak1556 @rchiodo please push this to the end of your items to test. The package won't be ready until Tues AM PST due to a publishing snafu.

cc @hawkticehurst

[rchiodo]

@daviddossett do you have an ETA? Should I wait till PM?

Npm package gives me a 404:

D:\Source\test_webview_toolkit\webview-helloworld>npm install --save @microsoft/vscode-webview-ui-toolkit
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@microsoft%2fvscode-webview-ui-toolkit - Not found
npm ERR! 404
npm ERR! 404  '@microsoft/vscode-webview-ui-toolkit@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\aku91\AppData\Roaming\npm-cache\_logs\2021-09-28T17_02_46_677Z-debug.log

[daviddossett]

I think that would be ideal, yes. We just cleared the 24hr period where we couldn't republish. It should be up soon. @hawkticehurst can update this thread when it's ready.

[hawkticehurst]

Was finally able to publish! @alexdima @deepak1556 @rchiodo you're good to go!

[hawkticehurst]

Also as a quick heads up @misolori just pointed out an error with part one of the getting started guide, so I'll be pushing a quick change for that momentarily.

[hawkticehurst]

Alright, the guide issue has been fixed!

[deepak1556]

Really well crafted starter documentation and playground setup 👍

[gjsjohnmurray]

Really well crafted starter documentation and playground setup

Itching to take a look, When will the repo go public?

[daviddossett]

Itching to take a look, When will the repo go public?

Stay tuned! Very soon.

[gjsjohnmurray]

Stay tuned! Very soon.

Confirming that it is now available 🎉