bug: DOMAttributes interface missing onTransitionStart and onTransitionCancel events #4643
Description
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.1Steps to Reproduce
- Checkout the
nwhittaker/stencilrepo. - Switch to the
bugs/jsx-events-transitionbranch. - Run
npm startand 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