bug: DOMAttributes interface missing onTransitionStart and onTransitionCancel events

[nwhittaker]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.0.2

Current Behavior

Cannot use JSX to attach transitioncancel and transitionstart event handlers.

Expected Behavior

Can use JSX to attach transitionstart and transitioncancel event handlers.

System Info

System: node 18.16.1
    Platform: darwin (22.6.0)
   CPU Model: Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz (16 cpus)
    Compiler: ~/my-first-stencil-project/node_modules/@stencil/core/compiler/stencil.js
       Build: 1690208707
     Stencil: 4.0.2 😈
  TypeScript: 5.0.4
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.19.1

Steps to Reproduce

1. Checkout the nwhittaker/stencil repo.
2. Switch to the bugs/jsx-events-transition branch.
3. Run npm start and see TypeScript errors in terminal

Code Reproduction URL

https://github.com/nwhittaker/stencil

Additional Information

Terminal output:

my-first-stencil-project % npm start

> my-first-stencil-project@0.0.1 start
> stencil build --dev --watch --serve

[22:04.7]  @stencil/core
[22:04.9]  v4.0.2 😈
[22:06.1]  build, my-first-stencil-project, dev mode, started ...
[22:06.1]  transpile started ...
[22:07.6]  transpile finished in 1.53 s

[ ERROR ]  TypeScript: src/components/my-component/my-component.tsx:11:12
           Type '{ onTransitionCancel: () => void; }' is not assignable to type
           'HTMLAttributes<HTMLDivElement>'.Property 'onTransitionCancel' does not exist on type
           'HTMLAttributes<HTMLDivElement>'. Did you mean 'onTransitionEnd'?

     L10:  return [
     L11:    <div onTransitionCancel={() => {}} />,
     L12:    <div onTransitionCancelCapture={() => {}} />,

[ ERROR ]  TypeScript: src/components/my-component/my-component.tsx:12:12
           Type '{ onTransitionCancelCapture: () => void; }' is not assignable to type
           'HTMLAttributes<HTMLDivElement>'.Property 'onTransitionCancelCapture' does not exist on type
           'HTMLAttributes<HTMLDivElement>'. Did you mean 'onTransitionEndCapture'?

     L11:  <div onTransitionCancel={() => {}} />,
     L12:  <div onTransitionCancelCapture={() => {}} />,
     L13:  <div onTransitionEnd={() => {}} />,

[ ERROR ]  TypeScript: src/components/my-component/my-component.tsx:15:12
           Type '{ onTransitionStart: () => void; }' is not assignable to type
           'HTMLAttributes<HTMLDivElement>'.Property 'onTransitionStart' does not exist on type
           'HTMLAttributes<HTMLDivElement>'. Did you mean 'onAnimationStart'?

     L14:  <div onTransitionEndCapture={() => {}} />,
     L15:  <div onTransitionStart={() => {}} />,
     L16:  <div onTransitionStartCapture={() => {}} />,

[ ERROR ]  TypeScript: src/components/my-component/my-component.tsx:16:12
           Type '{ onTransitionStartCapture: () => void; }' is not assignable to type
           'HTMLAttributes<HTMLDivElement>'.Property 'onTransitionStartCapture' does not exist on type
           'HTMLAttributes<HTMLDivElement>'. Did you mean 'onAnimationStartCapture'?

     L15:    <div onTransitionStart={() => {}} />,
     L16:    <div onTransitionStartCapture={() => {}} />,
     L17:  ]

[22:07.6]  build failed, watching for changes... in 1.54 s

[rwaskiewicz]

Thanks @nwhittaker! I was able to reproduce this with the provided repro case, and have labeled it to get ingested into our internal backlog. Thanks again!

[rwaskiewicz]

@nwhittaker I've put up #4645, which should fix this issue. If you're able to, would you mind giving a dev-build of Stencil a try to help me verify the fix?

npm i @stencil/core@4.0.3-dev.1690838047.8cfce58

Thanks!

[nwhittaker]

@rwaskiewicz, I verified on my branch that the TypeScript errors clear up with that dev-build, thanks!

[rwaskiewicz]

Excellent, thanks! I'll queue this up for merge now, and should be going out in the next Stencil release

[rwaskiewicz]

The fix associated with this issue has been included in this morning's 4.0.4 release.