🐛 Bug Report

Hi, over on the Webview UI Toolkit we're hoping to ship a set of React components using the fast-react-wrapper.

As we've been working towards this we've run into an issue where wrapped toolkit components do not have any type annotations/information for any of their attributes resulting in TypeScript intellisense/build errors.

We've also had some people from our community try out the fast-react-wrapper all with the same results.

I'm still not completely sure if this is an issue with the fast-react-wrapper itself or how the toolkit is implemented (I suspect it might actually be the latter since the toolkit is closely modeled after the FAST Components repo and that doesn't have the same issue).

Any help in determining what the issue is and how to fix it would be greatly appreciated! Thanks!

💻 Repro or Code Sample

Here's a simple example of wrapping a <vscode-button> and using it in a counter component.

// Inside toolkit.ts file

import React from "react";
import { provideReactWrapper } from "@microsoft/fast-react-wrapper";
import { provideVSCodeDesignSystem, vsCodeButton } from "@vscode/webview-ui-toolkit";

const { wrap } = provideReactWrapper(React, provideVSCodeDesignSystem());

// Toolkit Components
export const VSCodeButton = wrap(vsCodeButton());

// Inside Counter.tsx file

import { useState } from "react";
import { VSCodeButton } from "./toolkit";

export function Counter() {
  const [count, setCount] = useState(0);

  function incrementCount() {
    setCount(count + 1);
  }

  // ❗️❗️ ERROR HERE ❗️❗️
  //
  // The `appearance` attribute and any other vscode-button attributes (both custom and
  // default attributes) will have an intellisense type error and will not build
  //
  // Note: A screenshot of the intellisense/build error can be found below
  return (
    <VSCodeButton appearance="secondary" onClick={incrementCount}>
      The count is: {count}
    </VSCodeButton>
  ); 
}

🤔 Expected Behavior

Wrapped components should have complete/correct type annotations for all of their attributes.

😯 Current Behavior

Here's a simple example of a component attribute and the associated error message:

💁 Possible Solution

🔦 Context

Our hope is to ship a set of React components from the Webview UI Toolkit package.

🌍 Your Environment

• OS & Device: MacOS on MacBook Pro
• Browser: VS Code Webview (Chromium-based iirc?)
• Version: FAST Element (v1.6.0) & FAST Foundation (v2.21.0)