Automatic event types and targets

[louwers]

Backward compatible version of #108.

• Read event type off HTMLElement. This way, you don't have to manually specify it (which is especially painful in JavaScript).
• Set target on the event automatically as well, so you also don't need to manually set that.
• Make a special case for oninput. Use InputEvent there.

Tested with TS examples and bau-kit for backward compatibility. Looks good.

In a follow-up PR all the explicit types could be removed. They are no longer needed.

[FredericHeem]

There are some build error with this PR:

lerna run build

> @grucloud/[email protected] build /Users/fredericheem/bau/bau-ui/examples/bau-storybook
       > tsc && vite build
       
       src/pages/radioButtonGroup/radioButtonGroup-statefull.ts(29,26): error TS2345: Argument of type '{ oninput: ({ target }: { target: HTMLInputElement; }) => string; name: string; value: string; radios: { value: string; Label: () => string; }[]; }' is not assignable to parameter of type '({ name: string; value?: any; oninput?: ((event: any) => any) | undefined; radios: RadioItem[]; } & DefaultDesignProps & PropsAll<HTMLElement>) | undefined'.
         Type '{ oninput: ({ target }: { target: HTMLInputElement; }) => string; name: string; value: string; radios: { value: string; Label: () => string; }[]; }' is not assignable to type 'undefined'.
       src/pages/radioButtonGroup/radioButtonGroup-url.ts(40,26): error TS2345: Argument of type '{ oninput: ({ target }: { target: HTMLInputElement; }) => void; name: string; value: string | null; radios: { value: string; Label: () => string; }[]; }' is not assignable to parameter of type '({ name: string; value?: any; oninput?: ((event: any) => any) | undefined; radios: RadioItem[]; } & DefaultDesignProps & PropsAll<HTMLElement>) | undefined'.
         Type '{ oninput: ({ target }: { target: HTMLInputElement; }) => void; name: string; value: string | null; radios: { value: string; Label: () => string; }[]; }' is not assignable to type 'undefined'.

[louwers]

Not on my machine...

Could you provide some info how you set up the project? I haven't used lerna before.

~/src/bau % npx lerna run build
lerna notice cli v6.6.2
lerna notice filter excluding []

✔  @grucloud/bau-css:build (957ms)
✔  @grucloud/bau:build (1s)
✔  bau-ts-test:build (1s)
✔  frontendmentor-bento-grid:build (3s)
✔  react-bau-css:build (3s)
✔  bau-ui-template-js:build (3s)
✔  @grucloud/bau-router:build (3s)
✔  bau-bau-css:build (3s)
✔  bausaurus-doc:build (4s)
✔  vanillajs-bau-css:build (4s)
✔  bausaurus-template:build (4s)
✔  bau-button:build (4s)
✔  bau-tailwind-example:build (5s)
✔  frontendmentor-age-calculator-app:build (5s)
✔  frontendmentor-blog-preview-card:build (5s)
✔  bau-ace-editor-example:build (5s)
✔  bau-ui-template-ts:build (5s)
✔  bau-astro-simple:build (5s)
✔  bau-d3-example:build (6s)
✔  bau-counter-example:build (3s)
✔  bau-fetch-data:build (3s)
✔  bau-form-login:build (3s)
✔  bau-form-stateless-login:build (3s)
✔  frontendmentor-calculator:build (5s)
✔  grid-layout:build (4s)
✔  frontendmentor-contact-form:build (5s)
✔  exchange-rate:build (5s)
✔  frontendmentor-faq-accordion:build (5s)
✔  frontendmentor-ip-address-tracker:build (4s)
✔  bau-highlight:build (5s)
✔  list-drag-drop:build (4s)
✔  frontendmentor-interactive-comments-section:build (5s)
✔  frontendmentor-interactive-rating-component:build (5s)
✔  bau-mathml:build (4s)
✔  frontendmentor-job-listings-with-filtering:build (5s)
✔  frontendmentor-launch-countdown-timer:build (5s)
✔  bau-lifecycle-example:build (5s)
✔  bau-playground:build (4s)
✔  frontendmentor-mortgage-repayment-calculator:build (5s)
✔  frontendmentor-multi-step-form:build (6s)
✔  new-year-countdown:build (5s)
✔  frontendmentor-newsletter-signup-form:build (6s)
✔  bau-kit:build (3s)
✔  frontendmentor-product-list-cart:build (5s)
✔  bau-todo-minimal:build (4s)
✔  van-playground:build (4s)
✔  bau-tree-view:build (4s)
✔  frontendmentor-product-preview-card:build (6s)
✔  frontendmentor-recipe-page:build (6s)
✔  frontendmentor-result-summary-component:build (5s)
✔  frontendmentor-social-link-profile:build (5s)
✔  @grucloud/bau-ui-storybook:build (5s)
✔  frontendmentor-e-commerce-product-page:build (4s)
✔  frontendmentor-rest-countries:build (4s)
✔  gcmp:build (5s)

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

Lerna (powered by Nx) Successfully ran target build for 55 projects (17s)

[louwers]

Also no problems on CI...

[FredericHeem]

I was able to reproduce the error with your repo, are you on the right branch ?

[FredericHeem]

fixed in PR #144

Thanks a lot!

[louwers]

@FredericHeem Curious... How do I set up lerna?

Could you maybe add a few words to the README.md for developers?