[@labs/react] type event callbacks #2648

taylor-vann · 2022-03-19T01:44:51Z

This PR is a retcon of PR #2445

users explicitly define event types in event callbacks
default event type expected from a PropName map is (e: Event) => void
user can declare a event map interface like {propName: EventType, ...}
will be expressed as {prop: (e: EventType) => void, ...} in the React Component Props
user prop type is used despite existing or expected React Type
example: {'onChange': Event} will eclipse React.FormEvent<HTMLInputElement> with a DOM Event

This should allow clients to explicitly define event types in react event callbacks like the example below:

  interface MyElementEvents {
    onClick: MouseEvent;  
    onKeyDown: KeyboardEvent;
  }

  const myElementPropNames = {
    onClick: 'click', // (e: MouseEvent) => void
    onKeyDown: 'keydown',  // (e: KeyboardEvent) => void
  }; 
  
  const myComponent = createComponent<MyComponent, MyElementEvents>(
    myElementPropNames,
    ...,
  )

Without generics, the typing defaults to Event:

  const myElementPropNames = {
    onClick: 'click', // (e: Event) => void
    onKeyDown: 'keydown',  // (e: Event) => void
  }; 
  
  const myComponent = createComponent(
    myElementPropNames,
    ...,
  )

Undefined, 'missing', or types that don't extend from Event also default to Event in the EventMap:

  interface MyElementEvents {
    onClick: MouseEvent; 
    onNotAnEventType: any; 
  }

  const myElementPropNames = {
    onClick: 'click', // (e: MouseEvent) => void
    onKeyDown: 'keydown',  // defaults to (e: Event) => void
    onNotAnEventType: 'not-event-type',  // defaults to (e: Event) => void
  }; 
  
  const myComponent = createComponent<MyComponent, MyElementEvents>(
    myElementPropNames,
    ...,
  )

changeset-bot · 2022-03-19T01:44:53Z

🦋 Changeset detected

Latest commit: cd0934c

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2022-03-19T01:45:17Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: unsure 🔍 -12% - +5% (-4.36ms - +1.73ms)
^{this-change vs tip-of-tree}

render

lit-element-list: unsure 🔍 -2% - +4% (-1.97ms - +3.64ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -2% - +7% (-0.90ms - +2.66ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -4% - +13% (-0.59ms - +1.83ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -3% - +1% (-2.31ms - +0.91ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -3% - +2% (-2.28ms - +1.45ms)
^{this-change vs tip-of-tree}

update

lit-element-list: unsure 🔍 -2% - +1% (-20.91ms - +8.72ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -3% - +9% (-3.02ms - +9.15ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -2% - +1% (-6.75ms - +3.71ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -3% - +1% (-4.20ms - +1.67ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -1% - +1% (-8.91ms - +11.02ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: unsure 🔍 -2% - +1% (-23.10ms - +8.73ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -2% - +1% (-20.27ms - +5.68ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 98.0.4758.102
Sample size: 50
Built by: Benchmarks #2578
Commit: ead1621

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	92.94ms - 97.17ms	-	unsure 🔍 -2% - +4% -1.97ms - +3.64ms	faster ✔ 19% - 23% 22.25ms - 28.39ms
tip-of-tree tip-of-tree	92.37ms - 96.07ms	unsure 🔍 -4% - +2% -3.64ms - +1.97ms	-	faster ✔ 20% - 24% 23.27ms - 29.05ms
previous-release previous-release	118.16ms - 122.60ms	slower ❌ 23% - 30% 22.25ms - 28.39ms	slower ❌ 24% - 31% 23.27ms - 29.05ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	894.94ms - 915.72ms	-	unsure 🔍 -2% - +1% -20.91ms - +8.72ms	faster ✔ 7% - 10% 69.66ms - 101.21ms
tip-of-tree tip-of-tree	900.86ms - 921.99ms	unsure 🔍 -1% - +2% -8.72ms - +20.91ms	-	faster ✔ 6% - 10% 63.45ms - 95.23ms
previous-release previous-release	978.90ms - 1002.64ms	slower ❌ 8% - 11% 69.66ms - 101.21ms	slower ❌ 7% - 11% 63.45ms - 95.23ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	987.00ms - 1008.94ms	-	unsure 🔍 -2% - +1% -23.10ms - +8.73ms	faster ✔ 4% - 7% 43.85ms - 76.88ms
tip-of-tree tip-of-tree	993.62ms - 1016.68ms	unsure 🔍 -1% - +2% -8.73ms - +23.10ms	-	faster ✔ 3% - 7% 36.29ms - 70.07ms
previous-release previous-release	1045.99ms - 1070.67ms	slower ❌ 4% - 8% 43.85ms - 76.88ms	slower ❌ 4% - 7% 36.29ms - 70.07ms	-

lit-html-kitchen-sink

Browser: chrome-headless 98.0.4758.102
Sample size: 30
Built by: Benchmarks #2578
Commit: ead1621

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	37.08ms - 40.18ms	-	unsure 🔍 -2% - +7% -0.90ms - +2.66ms	faster ✔ 10% - 18% 4.15ms - 8.45ms
tip-of-tree tip-of-tree	36.86ms - 38.63ms	unsure 🔍 -7% - +2% -2.66ms - +0.90ms	-	faster ✔ 13% - 19% 5.44ms - 8.92ms
previous-release previous-release	43.43ms - 46.42ms	slower ❌ 10% - 22% 4.15ms - 8.45ms	slower ❌ 14% - 24% 5.44ms - 8.92ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	104.48ms - 114.15ms	-	unsure 🔍 -3% - +9% -3.02ms - +9.15ms	unsure 🔍 -8% - +6% -8.69ms - +6.55ms
tip-of-tree tip-of-tree	102.55ms - 109.95ms	unsure 🔍 -8% - +3% -9.15ms - +3.02ms	-	unsure 🔍 -10% - +2% -11.09ms - +2.82ms
previous-release previous-release	104.50ms - 116.28ms	unsure 🔍 -6% - +8% -6.55ms - +8.69ms	unsure 🔍 -3% - +11% -2.82ms - +11.09ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	32.67ms - 36.34ms	-	unsure 🔍 -12% - +5% -4.36ms - +1.73ms	faster ✔ 6% - 18% 2.04ms - 7.14ms
tip-of-tree tip-of-tree	33.40ms - 38.25ms	unsure 🔍 -5% - +13% -1.73ms - +4.36ms	-	faster ✔ 1% - 16% 0.27ms - 6.27ms
previous-release previous-release	37.32ms - 40.86ms	slower ❌ 5% - 21% 2.04ms - 7.14ms	slower ❌ 0% - 18% 0.27ms - 6.27ms	-

lit-html-repeat

Browser: chrome-headless 98.0.4758.102
Sample size: 30
Built by: Benchmarks #2578
Commit: ead1621

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	12.97ms - 15.34ms	-	unsure 🔍 -4% - +13% -0.59ms - +1.83ms	faster ✔ 3% - 20% 0.49ms - 3.22ms
tip-of-tree tip-of-tree	13.30ms - 13.78ms	unsure 🔍 -13% - +4% -1.83ms - +0.59ms	-	faster ✔ 12% - 19% 1.75ms - 3.19ms
previous-release previous-release	15.33ms - 16.69ms	slower ❌ 2% - 24% 0.49ms - 3.22ms	slower ❌ 13% - 24% 1.75ms - 3.19ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	374.90ms - 381.88ms	-	unsure 🔍 -2% - +1% -6.75ms - +3.71ms	faster ✔ 30% - 32% 166.61ms - 176.61ms
tip-of-tree tip-of-tree	376.02ms - 383.81ms	unsure 🔍 -1% - +2% -3.71ms - +6.75ms	-	faster ✔ 30% - 32% 164.79ms - 175.38ms
previous-release previous-release	546.41ms - 553.59ms	slower ❌ 44% - 47% 166.61ms - 176.61ms	slower ❌ 43% - 47% 164.79ms - 175.38ms	-

lit-html-template-heavy

Browser: chrome-headless 98.0.4758.102
Sample size: 50
Built by: Benchmarks #2578
Commit: ead1621

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	66.89ms - 69.17ms	-	unsure 🔍 -3% - +1% -2.31ms - +0.91ms	faster ✔ 16% - 21% 13.39ms - 17.33ms
tip-of-tree tip-of-tree	67.60ms - 69.87ms	unsure 🔍 -1% - +3% -0.91ms - +2.31ms	-	faster ✔ 15% - 20% 12.68ms - 16.63ms
previous-release previous-release	81.78ms - 85.00ms	slower ❌ 19% - 26% 13.39ms - 17.33ms	slower ❌ 18% - 24% 12.68ms - 16.63ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	143.57ms - 147.19ms	-	unsure 🔍 -3% - +1% -4.20ms - +1.67ms	faster ✔ 12% - 15% 19.40ms - 25.64ms
tip-of-tree tip-of-tree	144.33ms - 148.96ms	unsure 🔍 -1% - +3% -1.67ms - +4.20ms	-	faster ✔ 11% - 15% 17.81ms - 24.69ms
previous-release previous-release	165.35ms - 170.44ms	slower ❌ 13% - 18% 19.40ms - 25.64ms	slower ❌ 12% - 17% 17.81ms - 24.69ms	-

reactive-element-list

Browser: chrome-headless 98.0.4758.102
Sample size: 50
Built by: Benchmarks #2578
Commit: ead1621

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	64.68ms - 67.84ms	-	unsure 🔍 -3% - +2% -2.28ms - +1.45ms	unsure 🔍 -3% - +3% -2.15ms - +2.04ms
tip-of-tree tip-of-tree	65.68ms - 67.67ms	unsure 🔍 -2% - +3% -1.45ms - +2.28ms	-	unsure 🔍 -2% - +3% -1.34ms - +2.06ms
previous-release previous-release	64.93ms - 67.70ms	unsure 🔍 -3% - +3% -2.04ms - +2.15ms	unsure 🔍 -3% - +2% -2.06ms - +1.34ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	902.27ms - 914.70ms	-	unsure 🔍 -1% - +1% -8.91ms - +11.02ms	unsure 🔍 -2% - +0% -21.58ms - +4.14ms
tip-of-tree tip-of-tree	899.64ms - 915.22ms	unsure 🔍 -1% - +1% -11.02ms - +8.91ms	-	unsure 🔍 -3% - +0% -23.46ms - +3.92ms
previous-release previous-release	905.94ms - 928.46ms	unsure 🔍 -0% - +2% -4.14ms - +21.58ms	unsure 🔍 -0% - +3% -3.92ms - +23.46ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1019.42ms - 1038.35ms	-	unsure 🔍 -2% - +1% -20.27ms - +5.68ms	unsure 🔍 -1% - +2% -9.11ms - +16.28ms
tip-of-tree tip-of-tree	1027.31ms - 1045.05ms	unsure 🔍 -1% - +2% -5.68ms - +20.27ms	-	unsure 🔍 -0% - +2% -1.37ms - +23.14ms
previous-release previous-release	1016.84ms - 1033.75ms	unsure 🔍 -2% - +1% -16.28ms - +9.11ms	unsure 🔍 -2% - +0% -23.14ms - +1.37ms	-

_{tachometer-reporter-action v2 for Benchmarks}

justinfagnani

Looks really good @taylor-vann !

Just some naming suggestions and a typing simplification.

packages/labs/react/src/create-component.ts

packages/labs/react/README.md

packages/labs/react/src/create-component.ts

packages/labs/react/README.md

taylor-vann

Changes addressed :)

packages/labs/react/src/create-component.ts

taylor-vann

addressed changes :)

justinfagnani

Awesome!

taylor-vann · 2022-03-28T17:58:29Z

Thanks @justinfagnani @WickyNilliams @sorvell for helping me get this across the finish line

WickyNilliams · 2022-03-28T18:02:54Z

Really nice how small this change was in the end! Thanks for this, very much appreciated

WickyNilliams · 2022-03-29T07:33:15Z

No rush, but i'm curious what the plan/schedule is for releasing this? Thanks again!

taylor-vann · 2022-04-04T18:31:19Z

#2700

@WickyNilliams sorry for the delay but this change has made it to the release in the version mentioned above :)

WickyNilliams · 2022-04-04T19:35:59Z

Awesome thanks!

type event callbacks

3913075

taylor-vann requested a review from justinfagnani as a code owner March 19, 2022 01:44

taylor-vann changed the title ~~type event callbacks~~ [@labs/react] type event callbacks Mar 19, 2022

taylor-vann mentioned this pull request Mar 19, 2022

[@lit-labs/react] support custom events #2445

Closed

taylor-vann requested a review from sorvell March 19, 2022 01:47

taylor-vann added 8 commits March 23, 2022 10:20

remove any

aaa3daa

remove any

71fe54b

add readme details for TS

ad09025

syntax and description changes in README

d59b782

syntax and explanation corrections

e1bac51

add changeset

f9d5f75

reword readme additions

8575b0b

better readme wording

70af6e7

justinfagnani requested changes Mar 25, 2022

View reviewed changes

address requested changes

3223b49

taylor-vann commented Mar 25, 2022

View reviewed changes

changes addressed

82f548d

justinfagnani requested changes Mar 26, 2022

View reviewed changes

packages/labs/react/src/create-component.ts Outdated Show resolved Hide resolved

drop unnecessary type

cd0934c

taylor-vann commented Mar 27, 2022

View reviewed changes

justinfagnani approved these changes Mar 27, 2022

View reviewed changes

taylor-vann merged commit 7cb492a into main Mar 28, 2022

taylor-vann deleted the labs-react__typed_events branch March 28, 2022 17:57

This was referenced Mar 31, 2022

Version Packages #2687

Closed

Version Packages #2700

Merged

[@labs/react] type event callbacks #2648

[@labs/react] type event callbacks #2648

Uh oh!

Conversation

taylor-vann commented Mar 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Mar 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Mar 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Tachometer Benchmark Results

Summary

nop-update

render

update

update-reflect

Results

render

update

update-reflect

render

update

nop-update

render

update

render

update

render

update

update-reflect

Uh oh!

justinfagnani left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

taylor-vann left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

taylor-vann left a comment

Choose a reason for hiding this comment

Uh oh!

justinfagnani left a comment

Choose a reason for hiding this comment

Uh oh!

taylor-vann commented Mar 28, 2022

Uh oh!

WickyNilliams commented Mar 28, 2022

Uh oh!

WickyNilliams commented Mar 29, 2022

Uh oh!

taylor-vann commented Apr 4, 2022

Uh oh!

WickyNilliams commented Apr 4, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

taylor-vann commented Mar 19, 2022 •

edited

Loading

changeset-bot bot commented Mar 19, 2022 •

edited

Loading

github-actions bot commented Mar 19, 2022 •

edited

Loading