hb1998 / react-component-tree

React Component Viewer - A convenient way to traverse your React app in VS Code
https://marketplace.visualstudio.com/items?itemName=HabeebArul.react-component-tree
MIT License
22 stars 6 forks source link

Support Undestructued Props / Typescript Props #21

Open gaurangrshah opened 5 months ago

gaurangrshah commented 5 months ago

Is your feature request related to a problem? Please describe. We as a guideline do not de-structure our props inline in the function component statement. If I am not mistaken this extension seems to expect that props are de-structured inline. I believe this is because we use typescript to define our props and their types as shown in the example below.

Describe the solution you'd like Here's an example of a component where we don't de-structure the props directly.

type BannerContentProps = React.PropsWithChildren<{
  heading?: string;
  description?: string;
  href?: string;
  label?: string;
}>;

function BannerContent(props: BannerContentProps) {
  return (
    <div className="flex flex-col justify-center gap-y-2 mr-2 flex-1 text-sm">
      <strong>{props.heading ?? "Transparency"}</strong>
      <p className="">
        {props.description ?? "We use cookies to improve your experience."} By
        using our site, you agree to our{" "}
        <Link
          href={props.href ?? "/privacy"}
          className="text-primary-500 dark:text-primary-400 hover:underline text-gray-500"
        >
          {props.label ?? "privacy policy"}
        </Link>
        .
      </p>
    </div>
  );
}
hb1998 commented 5 months ago

let me have a look