break-stuff/cem-tools

[custom-element-jsx-integration] export a type of component properties

odanado opened this issue · 5 comments

In the typedef file generated by custom-element-jsx-integration, the types of the component's properties are not exported.

type ${component.name}Props = {

The types of component properties can be used for example in Storybook.

// Button.stories.ts

import type { Meta, StoryObj } from '@storybook/web-components';
import { Button } from './Button';

// I want to use auto-generated types here.
type ButtonProps = {
  primary: boolean;
}

const meta = {
  title: 'Example/Button',
} satisfies Meta<ButtonProps>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    primary: true,
  },
};

We should be able to do that.

As a side note, if you haven't seen it already, I have a set of Storybook helpers for web component integration.

https://www.npmjs.com/package/wc-storybook-helpers

I didn't know about wc-storybook-helpers. Thank you!

I have tried wc-storybook-helpers.
However, wc-storybook-helpers does not provide type information, so I thought it lacked the functionality to build Story types.

For example, the following Story type would suggest properties such as title and dir that are not defined by the component.

type Story = StoryObj<MyElement & typeof args>;
 2024-05-07 18 42 42

Could I create a pull request to export the type information of the component's Props?

What are you using to build your components?

As a side note - title and dir are valid properties for your component types because custom elements extend HTMLElement where those properties exist.

I use lit.

As a side note - title and dir are valid properties for your component types because custom elements extend HTMLElement where those properties exist.

Yes, I understand this.

However, since the component developer is only interested in the Props of the component, I think it would be ideal if title and dir were not suggested to reduce noise.