ionic-team / stencil-component-starter

Minimal starter project for building shareable web components with Stencil
https://github.com/ionic-team/stencil
MIT License
278 stars 128 forks source link

fix(): change src barrel file to export all type declarations #113

Closed tanner-reits closed 1 year ago

tanner-reits commented 2 years ago

This commit changes the index.ts file auto-generated in the src directory to export all exportable declarations from the component.d.ts file. This makes for a better developer experience as all types will be automatically exported from the root of output target directories (e.g. custom event types)

Changed behavior

With this change, everything marked as export from the component.d.ts file will now be exported from the index.ts file. This continues to include the Components and JSX definitions that were previously exported by name. But, this will now also include any custom events and (soon) types used as a part of custom events.

For instance, if there is a Stencil component with an @Event() output:

export type MyCustomEventType = {
  name: string;
  value: number;
}

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  @Event() myEvent: EventEmitter<MyCustomEventType>:

  // All your other component stuff here
}

The component.d.ts file would generate type definitions such as:

export interface MyComponentCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLMyComponentAElement;
} 

This type will now be re-exported by the barrel file. In addition, once this PR is merged, the component.d.ts file will also re-export the custom event types used in component event emitter definitions so consuming applications can easily use them to define expected metadata structure. So, the index.ts file will then also export those types.

Testing

  1. Pull/fork this code to be used as a Stencil project (this is essentially what the "create Stencil" CLI app does when choosing a component starter).
  2. Modify the MyComponent component to include an @Event()definition.
  3. Build the project and verify the contents of dist/types/index.ts is export * from './components';
  4. Locally package the build and consume in a separate project.
  5. Verify Components, JSX, and MyComponentCustomEvent can all be imported from the package types (i.e. something like import { Components, JSX, MyComponentCustomEvent} from '@my-test-package/types';)
tanner-reits commented 2 years ago

This can be merged now, but this change is helpful for an upcoming Stencil PR that deals with exporting custom event types