How to use in vanilla html?

[ghost]

Describe the bug

When I try to use the vscode webview components in my vanilla app, I get the error,

controller.js:363 Uncaught Error: Missing FASTElement definition.
    at Function.forCustomElement (controller.js:363:19)
    at new <anonymous> (fast-element.js:9:24)
    at new FoundationElement (foundation-element.js:14:9)
    at new _Button (button.form-associated.js:3:1)
    at new C (form-associated.js:19:13)
    at new FormAssociatedButton (button.form-associated.js:12:9)
    at new Button (button.js:14:9)
    at new Button2 (index.js:12:8)
    at main.ts:4:16

To reproduce

1. git clone https://github.com/axelthat2/vscode-bug
2. Open developer tools and you can see the error.

Expected behavior

Web components to work.

Screenshots

Desktop (please complete the following information):

• OS Version: macOS 12.2.1
• Toolkit Version: ^0.9.1

[hawkticehurst]

Hey, @axelthat2 I checked out your repo (thanks for providing a reproduction of the issue!) and it seems like a simple case of using the incorrect functions/API to set up the components properly.

Change your src/main.ts file to include the following:

import { provideVSCodeDesignSystem, vsCodeButton } from "@vscode/webview-ui-toolkit"

provideVSCodeDesignSystem().register(vsCodeButton());

Also if you want to use other components, simply import the desired component function (always in the form vsCode{ComponentName} and then add it to the register method.

import { 
  provideVSCodeDesignSystem, 
  vsCodeButton, 
  vsCodeCheckbox,
  // Import other component functions –– always in the form `vsCode{ComponentName}`
} from "@vscode/webview-ui-toolkit"

provideVSCodeDesignSystem()
  .register(
    vsCodeButton(), 
    vsCodeCheckbox(),
    // Register other component functions here
  );

[hawkticehurst]

I'm also going to go ahead and close this issue and open a new one about updating our documentation to better highlight this information since up to this point this method of using the toolkit components isn't that well documented, except in fairly deep issue threads and also in the FAST getting started guide (which I don't expect most toolkit users to ever see).

With that said, if you have any more questions, comments, concerns, etc. about this specific issue feel free to add more comments to this thread and I'll keep an eye on it over the next couple of days!

[ghost]

Thank you so much. That helps a lot. I tried going through the toolkit docs and couldn't find anything. Adding doc for this issue will be so much great. Again thank you for your swift response.

[hawkticehurst]

You're welcome, happy to hear it was helpful!