How do you list all of the props of a component?

Context

I really like WebC and I love that it's decoupled from 11ty. I find the authoring experiencing very similar to writing Astro components, but I can take this with me anywhere. I'm still figuring out all the different ways it works through work on my website, but I can already see its potential in this being a tool to author framework-independent components.

What I'm trying to achieve

As a part of research I've been doing on building a component library framework-independently that is still SSR friendly, I'm working on generating React components (and others in the future) from the WebC compiler output. I'm doing it this way because:

• We use React, where I work, and they'd like something that they can just drop in and use. We have a lot of "presentational" components like Box, Grid, etc and even if I generate a React component for this, it'll get serialized away when used with something like Astro or React Server Components.
• I want to provide a solution that is closer to the web platform for maximum portability in the future. I think this can make our React dependence a little weaker and I think that can provide some of our teams the flexibility to experiment with other technologies like 11ty.
• The built-in CSS scoping functionality is nice and straightforward, and can help us build our design system while staying close to the platform without opting for CSS-in-JS solutions.
• I see WebC as an effective way to share markup. Even for interactive components, I can share custom elements with nested markup to maximize it's SSR and progressive enhancement story.
• Even if we don't adopt it where I work, the WebC component can serve as a reference implementation because it's just HTML.

Repo:
🔗 https://github.com/hasanhaja/webcc

Problem

• Does the WebC compiler support introspecting the component to output a list of all the props and attributes that are to be passed into the component?

I've started aggragating a list of APIs to poke at here, but I haven't gotten anything to work yet.

Example of why I'm after this is below. I'd like to be able to convert this:

<div>
  <p @text="greeting"></p>
  <p @text="message"></p>
</div>

To this:

type ComponentWithPropsProps = {greeting: string; message: string;};

export const ComponentWithProps = ({ greeting, message }) => (
  <>
    <div>
      <p>{greeting}</p>
      <p>{message}</p>
    </div>
  </>
);

export default ComponentWithProps;

I currently have this working, but I expect a .json file to be provided that matches the schema. This isn't very ergonomic and I would like the "WebCC" tool (I haven't been able to come up with a better name yet 😅) to just work out of the box.

In general, I'm not 100% sure about my approach, so I would also really appreciate any pointers and general feedback you have

Start by reviewing the WebC compiler output and the APIs being aggregated in issue #10, then compare them with the requested prop and attribute list. Done would require a decided approach for exposing component introspection and producing the requested schema, but this issue names no implementation files or tests.