Publish toolkit components as wrapped React components

[hawkticehurst]

Feature/component description

As members of the community have been testing out the fast-react-wrapper in order to use the toolkit components inside React-based webview extensions the process of getting correctly set up has proven to be a bit difficult.

In order to ease some of the pain points and boilerplate currently required to get set up, we would like to explore taking on the responsibility of wrapping the toolkit components and publishing them so devs simply need to import the React toolkit component they desire.

Extra Context / Details / Thoughts

Ideally, the components can be imported using the following syntax (with the notable part being the /react sub-directory inside the toolkit package):

import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";

Since this package will be consumed inside React and I believe (???) there is a reasonable expectation of being able to use ES Module syntax I'm going to say we probably don't need to provide a bundled Rollup version of the React components and can instead focus all our attention on using the TypeScript compiler to build a set of ESM-based components within a react sub-directory.

With that said, I'm open to listening to arguments/use cases advocating for having a bundled Rollup version of the React components.

More thoughts will be included in the comments as I think of them.

[hawkticehurst]

Oh, also cc @mattrothenberg.

I just realized I can't seem to add you as an Assignee for this issue because I assume you're not a part of the Microsoft GH org.

[mattrothenberg]

No problem! Starring this issue and will post updates as I make them. Stay tuned.

[hawkticehurst]

Also, a final thought for the moment is an implementation detail for @mattrothenberg:

In terms of defining the actual wrapped component code, I think I would prefer for it to live inside a src/index-react.ts file that pulls in all the toolkit components, wraps them with the fast-react-wrapper, and then exports those newly created React components.

Not super sure if there will be any gotchas with making sure that tsconfigs don't clash, but assuming it's possible, defining the wrapping and exporting code inside one file directly inside src would be ideal imo.

[mattrothenberg]

@hawkticehurst Agreed with this approach.

[hawkticehurst]

No problem! Starring this issue and will post updates as I make them. Stay tuned.

Woo, thank you!! 🎉

Also obviously feel free to reach out with any Qs you might have as you get oriented with the repo.