search

microsoft / vscode-webview-ui-toolkit

A component library for building webview-based extensions in Visual Studio Code.
MIT License
2.02k stars 144 forks source link

Examples of how to use the framework with react/vue etc #283

Closed xsteadybcgo closed 3 years ago

xsteadybcgo commented 3 years ago

Feature/component description

I can't wait to put it into my vs code extension development, my webview uses react and I want to use these components in a jsx way instead of a template string, I didn't find an answer in the documentation for this way

Use case

import { vsCodeBadge as VsCodeBadge } from '@vscode/webview-ui-toolkit/dist/dts/badge';

function Demo() {
  return <VsCodeBadge> demo </VsCodeBadge>
}

It seems to be not possible.

hawkticehurst commented 1 year ago

Hey @lppedd, have you seen our Angular extension sample? It demonstrates how to correctly configure an Angular app to use web components.

One of the most important things (if I recall correctly) is to set the schema option in app.module.ts. By default custom elements (aka web components) don't work in Angular without this setting configured.

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // <-- make sure to configure this!
})
export class AppModule {}

A big caveat

If you're trying to use Angular 15+, I believe there's an unresolved upstream issue that is causing toolkit components to not work.

Angular 15+ adopted a newer version of TypeScript that likely included a breaking change that conflicts with the version of TypeScript that FAST (the web component framework we use to build the toolkit) uses.

chrisdholt commented 1 year ago

A big caveat

If you're trying to use Angular 15+, I believe there's an unresolved upstream issue that is causing toolkit components to not work.

Angular 15+ adopted a newer version of TypeScript that likely included a breaking change that conflicts with the version of TypeScript that FAST (the web component framework we use to build the toolkit) uses.

@hawkticehurst I think we've got this solved for your version if you want to give it a go and see if the issue is resolved which I'm betting would be a big help :)

lppedd commented 1 year ago

@hawkticehurst hey, thanks! Now that you mentioned it, I can see the app component is using a web component in its template. Didn't even notice it the first time, sorry.

I'll give it a go on Angular 17 anyway, let's see.

hawkticehurst commented 1 year ago

Oh yay! Thanks for the heads up @chrisdholt, I'll definitely give it a shot!

Also to clarify, you're saying to just upgrade to the latest stable version of FAST Foundation (v2.49) correct?

hawkticehurst commented 1 year ago

I'll give it a go on Angular 17 anyway, let's see.

Nice, please do let me know how it goes!

chrisdholt commented 1 year ago

Oh yay! Thanks for the heads up @chrisdholt, I'll definitely give it a shot!

Also to clarify, you're saying to just upgrade to the latest stable version of FAST Foundation (v2.49) correct?

Yeah, there were a couple issues IIRC so I'm not 100%, but I know one issue with typings has been fixed there.

hawkticehurst commented 1 year ago

Awesome, I'll give it a shot in the next few days and report back