Extension/feature description

It would be great if the general ideas/guidance around incorporating a web framework (i.e. React, Vue, etc.) into webview-based extensions were captured in stand-alone documentation for developers to reference.

Use case

It will be impossible for us to keep up with and maintain an ever-growing catalog of sample extensions that cater to new web frameworks. It would instead be better if the directions on how to use any web framework in webview extensions were provided.

Misc

I think the currently maintained framework samples (i.e. React) and future planned framework samples (i.e. Svelte, Vue, Angular, and maybe SolidJS) can be still included as a tangible example/reference to aid these docs. But after those are completed I imagine we would no longer actively create/maintain future framework-based samples––only vanilla JS/TS samples.

The one exception that might be considered is if someone from the community contributes a PR with a new web framework sample or a sample demonstrating a helpful scenario/VS Code API in a web framework.

Reference

I've already written about this topic a bit on Twitter, so hopefully, this can act as a starting point for documentation.

Is it possible to add a vanilla JS sample with Vite + React?

We have Vite + React, but it is with TypeScript (https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/frameworks/hello-world-react-vite)

VSCode plugin development is already very difficult, making it with typescript verbose samples is even worse

Describe the bug

hello-world-react-cra sample shows nothing.

To reproduce

Execute the following commands at my local terminal:

$ git clone https://github.com/microsoft/vscode-webview-ui-toolkit-samples.git
$ cd vscode-webview-ui-toolkit-samples/frameworks/hello-world-react-cra
$ npm install
$ cd webview-ui
$ npm install
$ cd ..
$ code .

Open the sample with VSCode and press F5 key.

Expected behavior

I want the panel to show the followings:

• h1 "Hello World!" header
• "Howdy!" VSCodeButton

Screenshots

Desktop (please complete the following information):

• OS Version: macOS 13.4.1 (c)
• Toolkit Version: (Where should I check?)

Additional context

• Node: v18.17.1
• npm: 9.6.7

Describe the bug

en.json is called by main.ts in a webview but access is denied
i use angular framework

To reproduce

use standard i18n module

Expected behavior

having status 200 :) on local ressources i tried :

but it did'nt worked

Desktop (please complete the following information):

• OS Version: _[e.g. windows 11
• Toolkit Version: "@vscode/webview-ui-toolkit": "^1.2.2"

Additional context

Add any other context about the problem here.

Extension/feature description

In association with this issue from the main toolkit repo, update all extensions that use esbuild to include a mainFields property.

Sample Extension Description

To demonstrate the toolkit's ability to be used within UI libraries/frameworks, the hello-world extension should be re-implemented with a handful of popular frameworks that extension authors use.

The current list of frameworks includes:

• React
• Vue
• Svelte
• Angular

If there's a framework that you would like to see sample documentation for feel free to leave a comment on this thread and it will be considered.

Describe the bug

I developed an extension in vscode with the webview-ui-toolkit library, then i package it with vsce package.
When I generate the .vsix extension and install it in local to test, it doesn't take the correct visual.

To reproduce

• build successfully
• run: vsce package
• the extension.vsix generated
• open vscode studio and install new extension with : install from VSIX...

Expected behavior

Here is the visual in local, with debug mode. I want to have the same result with the packaging extension.

Screenshots

The result of the extension installed

Desktop (please complete the following information):

OS Version: Windows 10 Home
Toolkit Version: npm 9.2.0 , node v19.3.0

Additional context

package.json file

Extension/feature description

One of the old angular versions is demonstrated that is outdated, would be nice to see extension example working with up-to-date code.

Describe the bug

When building the hello-world-angular sample per the instructions it fails as it is unable to resolve the Angular dependencies.

To reproduce

npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/hello-world-angular hello-world
cd hello-world
npm run install:all <- Fails on this step
npm run build:webview
code .

Expected behavior

The sample project should build and run successfully

Screenshots

Desktop (please complete the following information):

• OS Version: Windows 10 Home
• Toolkit Version: npm 8.19.2

Additional context

Add any other context about the problem here.

Describe the bug

When running the Hello World React Vite sample, I am getting the following CSP error:

index.js:87 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://*.vscode-cdn.net". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

qg @ index.js:87

To reproduce

Follow the instructions as mentioned in the Hello World React Vite Readme

Pasted below for convenience:

# Copy sample extension locally
npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/hello-world-react-vite hello-world

# Navigate into sample directory
cd hello-world

# Install dependencies for both the extension and webview UI source code
npm run install:all

# Build webview UI source code
npm run build:webview

# Open sample in VS Code
code .

Now launch the extension.

CMD + P: > Hello World React + Vite Show

Open the developer tools:

CMD + P: > Developer: Toggle Developer Tools

Check console for an error related to CSP.

Expected behavior

No error message should appear in the developer console.

Screenshots

Desktop (please complete the following information):

• OS Version: 14.2.1 Sonoma
• Toolkit Version: how do i find this? happy to provide but i'm unsure how to get this information.

Additional context

This should be reproducible just from the sample repository. I'm not really sure if this is an error coming from the hello world extension itself, or somewhere else.

I'm happy to answer more questions and provide more context as needed.

Extension/feature description

To demonstrate the toolkit's ability to fetch resources (images,...) from local media folder.

Use case

Would be nice if weather-webview sample to get sunny, cloudy, ... icons from local media folder.
In other words let's media/main.js function getWeatherIcon(weatherData) get material from local.

Extension/feature description

npm --prefix generates cmd, ps1 and etc files... read more here

https://stackoverflow.com/questions/50653324/why-does-npm-install-a-bunch-of-cmd-files-on-my-project-root-folder

solution

replace package json scripts with

    "install:all": "npm install && cd webview-ui && npm install",
    "start:webview": "cd webview-ui && npm run start",
    "build:webview": "cd webview-ui && npm run build",
    "vscode:prepublish": "npm run compile",

Describe the bug

The HelloWorld samples, based on HelloWorldPanel.ts, appear to fail to properly dispose content.

This is caused by incorrectly registering null for thisArg when signing up for onDidDispose notification. Later call to this._panel.dispose() throws unhandled exception (because this is null) resulting in bypass of the remainder of the cleanup logic.

(See constructor implementation in HelloWorldPanel.ts across the various sub-projects.)

NOTE #102 submitted in October to address the problem in the basic sample, but problem exists in (at least) all of the HelloWorld samples too.

To reproduce

1. Build and launch default/hello-world sample.
2. Open Developer Tools (Ctrl+Shift+I on Windows)
3. Run "Hello World: Show" command
4. Close the resulting panel.

Here you'll see unhandled exception stacktrace appear in the developer tools console. As a result, the second half of the disposal logic (the while loop) fails to run.

Expected behavior

No null dereference, no exception, proper disposal.

Desktop

• OS Version: Windows 11, 22H2, build 22621.819
• Toolkit Version: 1.2.0

Additional context

Sample code is an especially bad place to maintain incorrect behavior since it's likely to be copied/pasted/reused many times over and in difficult-to-track ways.

@hawkticehurst

Describe the bug

Cannot add vscode webview ui, such as <vscode-button> by simply adding provideVSCodeDesignSystem().register(vsCodeButton()); to new Angular component. Throws error:

To reproduce

1. Create new Angular component. (The main component works alright)
2. Add provideVSCodeDesignSystem().register(vsCodeButton()); to the beginning of the component. Add <vscode-button> to HTML template. My example:

import {Component, Input, OnInit} from '@angular/core';
import {Source} from 'cabinet-node';
import {faInfo} from "@fortawesome/free-solid-svg-icons";
import {provideVSCodeDesignSystem, vsCodeButton} from "@vscode/webview-ui-toolkit";
import { vscode } from "src/app/utilities/vscode";

// In order to use the Webview UI Toolkit web components they
// must be registered with the browser (i.e. webview) using the
// syntax below.
provideVSCodeDesignSystem().register(vsCodeButton());

@Component({
  selector: 'app-card-source',
  templateUrl: './card-source.component.html',
  styleUrls: ['./card-source.component.css']
})
export class CardSourceComponent implements OnInit {
  faInfo = faInfo;
  // @ts-ignore
  @Input() source : Source | null = null;
  showSourceFullText = false;

  constructor() { }

  ngOnInit(): void {
  }

}

5. Throws the above error.

Expected behavior

That I can use things like after registration.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS Version: [e.g. macOS 11.3.1]
• Toolkit Version: [e.g. 0.5.0]

Additional context

Add any other context about the problem here.

Sample Extension Description

Implement the default hello-world sample extension using Svelte to demonstrate how extension authors can scaffold a Svelte-based webview extension and use the toolkit with that extension.

Describe the bug

can't get a clean build (on windows)

node --version v14.20.0
npm --version 6.14.17

npm run install:all

[email protected] install:all C:\na\code\vscode-ext\hello-world
npm install && npm --prefix ./webview-ui install ./webview-ui

npm WARN deprecated [email protected]: This package has been renamed to @vscode/test-electron, please update to the new name
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

added 184 packages from 150 contributors and audited 186 packages in 14.802s

28 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\nice-napi):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"!win32","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-windows-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"win32","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-windows-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"win32","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-openbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"openbsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-sunos-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"sunos","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-netbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"netbsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-linux-s390x):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"s390x"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-linux-mips64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"mips64el"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-linux-ppc64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"ppc64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-linux-riscv64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"riscv64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-linux-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-linux-arm):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"arm"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-linux-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-linux-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-darwin-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-freebsd-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"freebsd","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-freebsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"freebsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-darwin-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\esbuild-android-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"android","arch":"arm64"} (current: {"os":"win32","arch":"x64"})

npm ERR! code EEXIST
npm ERR! path C:\na\code\vscode-ext\hello-world\webview-ui\node_modules@babel\parser\bin\babel-parser.js
npm ERR! dest C:\na\code\vscode-ext\hello-world\webview-ui\parser.cmd
npm ERR! EEXIST: file already exists, cmd shim 'C:\na\code\vscode-ext\hello-world\webview-ui\node_modules@babel\parser\bin\babel-parser.js' -> 'C:\na\code\vscode-ext\hello-world\webview-ui\parser.cmd'
npm ERR! File exists: C:\na\code\vscode-ext\hello-world\webview-ui\parser.cmd
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\na\AppData\Roaming\npm-cache_logs\2022-09-06T20_35_38_801Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install:all: npm install && npm --prefix ./webview-ui install ./webview-ui
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install:all script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\na\AppData\Roaming\npm-cache_logs\2022-09-06T20_35_38_947Z-debug.log

Desktop (please complete the following information):

• OS Version: windows
• Toolkit Version:
  node --version v14.20.0
  npm --version 6.14.17

Extension/feature description

In Notepad example
https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/default/notepad

1. How can we show alert when user is trying to close webview without saving? like in default editor
2. Italic title option for readonly mode like in editor
3. Dirty Indicator (black dot beside title) for unsaved mode like in default editor

Use case

I am creator of Thunder Client extension, I am unable to do all the above listed features in my extension

if you can enable above features for webview then we can better design extensions that work like default editor

Extension/feature description

Update the toolkit.d.ts file in the Solid sample to improve type annotations.

Reference: shoelace-style/shoelace#770 (reply in thread)

Describe the bug

When trying to load toolkit.js as described in the examples results in a 404 error from VSCode server.

To reproduce

Using the following code

 const toolkitUri = getUri(webview, extensionUri, [
      '..',
      '..',
      'node_modules',
      '@vscode',
      'webview-ui-toolkit',
      'dist',
      'toolkit.js',
    ]);

here https://github.com/ccontrols/structured-types/blob/44e4ff0bfc3d06a138c39bd47b635627bffd17ea/packages/vscode-plugin/src/ContentProvider.ts#L122

Expected behavior

Copying toolkit.js to the dist folder of the extension works

Screenshots

Feature request

Add action oriented phrasing in all sample extension commands: <sample-name>: <verb> <noun(s)>

E.g. Notepad: Open notepad or All Components: Open component gallery

Also consider prepending some extension commands with "Webview UI Toolkit", such as Webview UI Toolkit: Open all components gallery (which has already been implemented as of #55).

cc @daviddossett for any other thoughts

Sample Extension Description

Once a set of design patterns and guidelines has been created in the Toolkit Figma, a handful of extensions should be created to demonstrate those patterns/guidelines in code.

Describe the bug

Using allComponents does not work

To reproduce

In App.svelte

<script>
//   provideVSCodeDesignSystem().register(vsCodeButton());
//   provideVSCodeDesignSystem().register(vsCodeOption());
  provideVSCodeDesignSystem().register(allComponents.register());
</script>

<main>
  <h1>Hello world!</h1>
  <vscode-button on:click={handleHowdyClick}>Howdy!</vscode-button>
  <vscode-option selected>OPTIONNNN</vscode-option>
</main>

Screenshots

Result is :

If added elements one by one :

Desktop (please complete the following information):

• OS Version: macOS 10.15.7

Sample Extension Description
Implement the default hello-world sample extension using SolidJs to demonstrate how extension authors can scaffold a SolidJs-based webview extension and use the toolkit with that extension.

Sample Extension Description

Implement the default hello-world sample extension using Angular to demonstrate how extension authors can scaffold a Angular-based webview extension and use the toolkit with that extension.

Describe the bug

I'm getting errors when I use @vscode/webview-ui-toolkit UI elements in angular form.

second form generated with basic html elements works fine.

To reproduce

create a simple from and use it in the app.component.html

\hello-world\webview-ui\src\app\app.component.ts

  profileForm = new FormGroup({
    firstName: new FormControl(""),
    lastName: new FormControl(""),
  });

  onSubmit() {
    //console.warn(this.profileForm.value);
    vscode.postMessage({
      command: "form submitted",
      text: this.profileForm.value,
    });
  }

\hello-world\webview-ui\src\app\app.component.html

  <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <vscode-text-field formControlName="firstName" placeholder="first name"
      >First Name:</vscode-text-field
    >
    <br />
    <vscode-text-field formControlName="lastName" placeholder="last name"
      >Last Name:</vscode-text-field
    >
    <br />
    <vscode-button type="submit" [disabled]="!profileForm.valid">Submit</vscode-button>
  </form>

Screenshots

Update the notepad sample extension by wrapping webview panel logic in a class like all the other sample extensions.

Extension/feature description

All sample extensions are currently lacking any form of CSP for resources. This needs to be changed.

Use case

Extension security is a really important part of extension development and it should be well demonstrated and documented in our samples.

Sample Extension Description

Implement the default hello-world sample extension using Vue to demonstrate how extension authors can scaffold a Vue-based webview extension and use the toolkit with that extension.

Feature/component description

Can you provide notes example with CustomEditor API like below one

https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/default/notepad

Use case

I am creator of Thunder Client extension, I can't find example how to use CustomEditor api with virtual document similar to Notes app

I want to use the following functionality in my extension

• show alert when user is trying to close webview without saving? like in default editor
• Italic title option for readonly mode like in editor
• Dirty Indicator (black dot beside title) for unsaved mode like in default editor

Describe the bug

My extension based on the Svelte hello world project does not package properly into a .vsix. When I open it with a zip utility I can see that the non-webview resources are there (and work fine) but the webview portion (bundle.js and bundle.css) of the vsix are NOT present in the vsix. When I install the vsix and run it, it generates a 404 at runtime.

My extension runs fine in debuge mode (F5) as does the Svelte hello-world project. The webview-ui/public/out resources are present and seem to be properly built, specifically bundle.js and bundle.css.

The same issue is present in both my vsix and the vsix generated from the stock Svelte hello-world project.

I tried adding a "files" section to my root package.json. It had no effect.

To reproduce

run vsce package on Svelte hello-world project, then install the resulting vsix and attempt to invoke the extension. A blank tab is rendered when the "Howdy" button was expected. The console shows a 404 for the webview assets.

rename the .vsix to .zip. Open it with a zip utility. The Svelte-based assets are not there, while the extension "backend" code is there, as expected.

Expected behavior

After building a vsix with vsce package, I expect to be able to install it and invoke it.

Extension/feature description

improve current extension samples to be able to attach debugger for web components like angular.

Use case

It would be very helpful to show an example when the vs code runs the extension debug session and attached breakpoints for the SPA apps angular works out of the box in the provided examples.

Button not styled

Logs :

Sample Extension Description

Implement the default hello-world sample extension using React to demonstrate how extension authors can scaffold a React-based webview extension and use the toolkit with that extension.