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

taylor-vann · 2022-01-25T07:16:53Z

In regards to issue #2129

Allow Custom Events to be passed as arguments in event listeners.

changeset-bot · 2022-01-25T07:16:55Z

🦋 Changeset detected

Latest commit: 7d6412f

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-01-25T07:17:16Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: unsure 🔍 -6% - +1% (-1.81ms - +0.21ms)
^{this-change vs tip-of-tree}

render

lit-element-list: unsure 🔍 -1% - +2% (-1.09ms - +1.86ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -3% - +2% (-1.10ms - +0.78ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -3% - +2% (-0.38ms - +0.27ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -3% - +1% (-1.88ms - +0.57ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -2% - +2% (-1.11ms - +1.44ms)
^{this-change vs tip-of-tree}

update

lit-element-list: unsure 🔍 -1% - +1% (-9.73ms - +8.65ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -4% - +4% (-4.20ms - +3.71ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -2% - +1% (-6.34ms - +4.12ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -3% - +1% (-3.79ms - +1.33ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -1% - +1% (-4.75ms - +13.06ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: unsure 🔍 -1% - +1% (-9.11ms - +5.39ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -1% - +1% (-8.69ms - +10.79ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 98.0.4758.102
Sample size: 50
Built by: Benchmarks #2535
Commit: 56e34eb

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	88.88ms - 90.92ms	-	unsure 🔍 -1% - +2% -1.09ms - +1.86ms	faster ✔ 19% - 21% 21.10ms - 24.34ms
tip-of-tree tip-of-tree	88.45ms - 90.58ms	unsure 🔍 -2% - +1% -1.86ms - +1.09ms	-	faster ✔ 19% - 22% 21.46ms - 24.75ms
previous-release previous-release	111.37ms - 113.87ms	slower ❌ 23% - 27% 21.10ms - 24.34ms	slower ❌ 24% - 28% 21.46ms - 24.75ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	890.77ms - 902.35ms	-	unsure 🔍 -1% - +1% -9.73ms - +8.65ms	faster ✔ 7% - 9% 67.92ms - 84.72ms
tip-of-tree tip-of-tree	889.96ms - 904.23ms	unsure 🔍 -1% - +1% -8.65ms - +9.73ms	-	faster ✔ 7% - 9% 66.40ms - 85.17ms
previous-release previous-release	966.79ms - 978.97ms	slower ❌ 8% - 9% 67.92ms - 84.72ms	slower ❌ 7% - 10% 66.40ms - 85.17ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	985.78ms - 995.80ms	-	unsure 🔍 -1% - +1% -9.11ms - +5.39ms	faster ✔ 4% - 5% 39.27ms - 53.63ms
tip-of-tree tip-of-tree	987.41ms - 997.89ms	unsure 🔍 -1% - +1% -5.39ms - +9.11ms	-	faster ✔ 4% - 5% 37.24ms - 51.93ms
previous-release previous-release	1032.09ms - 1042.39ms	slower ❌ 4% - 5% 39.27ms - 53.63ms	slower ❌ 4% - 5% 37.24ms - 51.93ms	-

lit-html-kitchen-sink

Browser: chrome-headless 98.0.4758.102
Sample size: 30
Built by: Benchmarks #2535
Commit: 56e34eb

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	35.78ms - 37.29ms	-	unsure 🔍 -3% - +2% -1.10ms - +0.78ms	faster ✔ 14% - 20% 6.00ms - 8.90ms
tip-of-tree tip-of-tree	36.13ms - 37.25ms	unsure 🔍 -2% - +3% -0.78ms - +1.10ms	-	faster ✔ 14% - 19% 5.93ms - 8.65ms
previous-release previous-release	42.74ms - 45.22ms	slower ❌ 16% - 25% 6.00ms - 8.90ms	slower ❌ 16% - 24% 5.93ms - 8.65ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	99.66ms - 106.07ms	-	unsure 🔍 -4% - +4% -4.20ms - +3.71ms	unsure 🔍 -10% - -0% -11.37ms - +0.04ms
tip-of-tree tip-of-tree	100.79ms - 105.43ms	unsure 🔍 -4% - +4% -3.71ms - +4.20ms	-	faster ✔ 0% - 10% 0.16ms - 10.68ms
previous-release previous-release	103.81ms - 113.25ms	unsure 🔍 -0% - +11% -0.04ms - +11.37ms	slower ❌ 0% - 10% 0.16ms - 10.68ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	31.25ms - 32.18ms	-	unsure 🔍 -6% - +1% -1.81ms - +0.21ms	faster ✔ 12% - 16% 4.19ms - 6.18ms
tip-of-tree tip-of-tree	31.61ms - 33.41ms	unsure 🔍 -1% - +6% -0.21ms - +1.81ms	-	faster ✔ 9% - 15% 3.12ms - 5.64ms
previous-release previous-release	36.01ms - 37.78ms	slower ❌ 13% - 20% 4.19ms - 6.18ms	slower ❌ 9% - 18% 3.12ms - 5.64ms	-

lit-html-repeat

Browser: chrome-headless 98.0.4758.102
Sample size: 30
Built by: Benchmarks #2535
Commit: 56e34eb

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	13.02ms - 13.44ms	-	unsure 🔍 -3% - +2% -0.38ms - +0.27ms	faster ✔ 9% - 13% 1.33ms - 1.87ms
tip-of-tree tip-of-tree	13.03ms - 13.54ms	unsure 🔍 -2% - +3% -0.27ms - +0.38ms	-	faster ✔ 8% - 12% 1.24ms - 1.85ms
previous-release previous-release	14.65ms - 15.01ms	slower ❌ 10% - 14% 1.33ms - 1.87ms	slower ❌ 9% - 14% 1.24ms - 1.85ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	366.76ms - 373.74ms	-	unsure 🔍 -2% - +1% -6.34ms - +4.12ms	faster ✔ 30% - 32% 158.80ms - 172.73ms
tip-of-tree tip-of-tree	367.46ms - 375.26ms	unsure 🔍 -1% - +2% -4.12ms - +6.34ms	-	faster ✔ 30% - 32% 157.47ms - 171.84ms
previous-release previous-release	529.99ms - 542.05ms	slower ❌ 43% - 47% 158.80ms - 172.73ms	slower ❌ 42% - 47% 157.47ms - 171.84ms	-

lit-html-template-heavy

Browser: chrome-headless 98.0.4758.102
Sample size: 50
Built by: Benchmarks #2535
Commit: 56e34eb

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	64.75ms - 66.47ms	-	unsure 🔍 -3% - +1% -1.88ms - +0.57ms	faster ✔ 16% - 19% 12.82ms - 15.71ms
tip-of-tree tip-of-tree	65.39ms - 67.14ms	unsure 🔍 -1% - +3% -0.57ms - +1.88ms	-	faster ✔ 15% - 19% 12.15ms - 15.06ms
previous-release previous-release	78.71ms - 81.03ms	slower ❌ 19% - 24% 12.82ms - 15.71ms	slower ❌ 18% - 23% 12.15ms - 15.06ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	143.88ms - 147.28ms	-	unsure 🔍 -3% - +1% -3.79ms - +1.33ms	faster ✔ 13% - 15% 21.32ms - 26.33ms
tip-of-tree tip-of-tree	144.90ms - 148.72ms	unsure 🔍 -1% - +3% -1.33ms - +3.79ms	-	faster ✔ 12% - 15% 19.94ms - 25.24ms
previous-release previous-release	167.56ms - 171.24ms	slower ❌ 15% - 18% 21.32ms - 26.33ms	slower ❌ 13% - 17% 19.94ms - 25.24ms	-

reactive-element-list

Browser: chrome-headless 98.0.4758.102
Sample size: 50
Built by: Benchmarks #2535
Commit: 56e34eb

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	62.36ms - 64.27ms	-	unsure 🔍 -2% - +2% -1.11ms - +1.44ms	unsure 🔍 -3% - +1% -2.08ms - +0.57ms
tip-of-tree tip-of-tree	62.31ms - 63.99ms	unsure 🔍 -2% - +2% -1.44ms - +1.11ms	-	unsure 🔍 -3% - +0% -2.17ms - +0.32ms
previous-release previous-release	63.16ms - 64.99ms	unsure 🔍 -1% - +3% -0.57ms - +2.08ms	unsure 🔍 -1% - +3% -0.32ms - +2.17ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	901.56ms - 913.62ms	-	unsure 🔍 -1% - +1% -4.75ms - +13.06ms	unsure 🔍 -2% - +0% -14.47ms - +3.17ms
tip-of-tree tip-of-tree	896.88ms - 909.99ms	unsure 🔍 -1% - +1% -13.06ms - +4.75ms	-	faster ✔ 0% - 2% 0.61ms - 18.99ms
previous-release previous-release	906.80ms - 919.68ms	unsure 🔍 -0% - +2% -3.17ms - +14.47ms	slower ❌ 0% - 2% 0.61ms - 18.99ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1028.44ms - 1041.41ms	-	unsure 🔍 -1% - +1% -8.69ms - +10.79ms	unsure 🔍 -1% - +1% -9.44ms - +9.97ms
tip-of-tree tip-of-tree	1026.60ms - 1041.14ms	unsure 🔍 -1% - +1% -10.79ms - +8.69ms	-	unsure 🔍 -1% - +1% -11.03ms - +9.46ms
previous-release previous-release	1027.44ms - 1041.88ms	unsure 🔍 -1% - +1% -9.97ms - +9.44ms	unsure 🔍 -1% - +1% -9.46ms - +11.03ms	-

_{tachometer-reporter-action v2 for Benchmarks}

This reverts commit 12f4d04.

…vents

taylor-vann · 2022-02-20T01:59:46Z

this PR is ready for another review :)

WickyNilliams · 2022-03-03T11:45:18Z

So what is the result of this? That you can instead accept CustomEvent as a param? Can you manually configure types beyond that? e.g if you have class MyEvent extends Event {}

taylor-vann · 2022-03-03T18:24:22Z

@WickyNilliams Yes :)

Currently a user could extend an event like you pointed out (probably a more durable typing).

This PR would allow someone to provide an event listener and a custom event listener.

taylor-vann · 2022-03-17T18:29:15Z

Component properties now reflect in the react component props through the props map.

const propsMap = {
  onFoo: 'foo', // <- expects (e: KeyboardEvent) => {}
  onBar: 'bar', // <- expects (e: CustomEvent<string>) => {}
};

sorvell

It seems like there are some stylistic changes in this PR that aren't directly related to fixing the core issue of typing the event arguments. Please separate those changes into a separate PR and focus this PR exclusively to fixing the referenced issue. That will make it easier to review. Thanks.

taylor-vann

lots of changes, needs another look

taylor-vann · 2022-03-19T00:48:47Z

@sorvell I can make another PR that's no problem

taylor-vann · 2022-03-19T01:46:03Z

@justinfagnani @sorvell
more concise PR #2648

taylor-vann · 2022-03-23T19:37:59Z

closing for: #2648 2648

taylor-vann added 5 commits January 24, 2022 15:18

use typescript's EventListener over function expression

3381cbb

use typescript's EventListener over function expression

2661323

add custom event listeners to expected event types

5ce23b0

opt for if returns over if elses

2fc623d

opt for if returns over if elses

37d8f1f

taylor-vann requested a review from justinfagnani as a code owner January 25, 2022 07:16

taylor-vann requested review from sorvell and removed request for justinfagnani January 25, 2022 07:17

taylor-vann requested a review from justinfagnani January 25, 2022 18:30

taylor-vann added 2 commits January 26, 2022 10:10

Merge branch 'main' into labs-react__support-custom-events

45efa63

generate changeset, patch bump

12f4d04

taylor-vann force-pushed the labs-react__support-custom-events branch from dfda940 to 12f4d04 Compare January 26, 2022 19:03

taylor-vann added 16 commits January 26, 2022 12:51

Revert "generate changeset, patch bump"

8ae83e3

This reverts commit 12f4d04.

generate changeset, minor bump

56fd947

remove <unknown> type for refs, add generic element

0a9f6dd

remove casting from forwarded ref props

59d47e8

use typings through react functions

10e5cca

builds and passes tests

821d51a

builds and passes tests

9cc8877

trade any-ies for more explicit types

c6e9cee

remove unnecessary ref typecast

9f66c86

explicitly state react props as type

7cd0ebb

separate element props from user props from component props

5b17ba9

wawypoint before adjusting class types in component

3c3c70d

formatting

a3db07d

remove stringvalued type

4cbab57

change events to eventNames to avoid confusing with types or actual e…

e902e9d

…vents

change description

8d1730a

uncomment test assertion

0a10feb

taylor-vann changed the title ~~Labs react - support custom events~~ [@lit-labs/react] support custom events Feb 22, 2022

taylor-vann requested a review from justinfagnani March 3, 2022 18:31

taylor-vann added 5 commits March 7, 2022 14:30

Merge branch 'main' into labs-react__support-custom-events

5cc171e

webcomponent events reflect in react props, breaks but good break

a0b05fd

webcomponent property types are reflected in react props

00c36d9

properties now reflect through react types

54c4db5

organize types, improve type names

8e2a1bd

taylor-vann mentioned this pull request Mar 17, 2022

[@lit-labs/react]: awkward types when component event name clashes with built-in event name #2592

Closed

6 tasks

taylor-vann added 8 commits March 17, 2022 14:21

override expected react property types

eb7245a

remove unnecessary explicit typing

8380c38

improve name for ommited react props

59c7d2d

remove key to type inferencing, let client overrwite anything

23d2981

remove unnecessary types

34d37b3

explicit type map adds typing to missing events

fbd862e

add explanation of typing

c1f0c95

prepare for review

7d6412f

sorvell requested changes Mar 19, 2022

View reviewed changes

taylor-vann commented Mar 19, 2022

View reviewed changes

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

taylor-vann mentioned this pull request Mar 19, 2022

[@labs/react] type event callbacks #2648

Merged

taylor-vann closed this Mar 23, 2022

taylor-vann deleted the labs-react__support-custom-events branch March 28, 2022 18:08

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

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

Uh oh!

Conversation

taylor-vann commented Jan 25, 2022

Uh oh!

changeset-bot bot commented Jan 25, 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 Jan 25, 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!

taylor-vann commented Feb 20, 2022

Uh oh!

WickyNilliams commented Mar 3, 2022

Uh oh!

taylor-vann commented Mar 3, 2022

Uh oh!

taylor-vann commented Mar 17, 2022

Uh oh!

sorvell left a comment

Choose a reason for hiding this comment

Uh oh!

taylor-vann left a comment

Choose a reason for hiding this comment

Uh oh!

taylor-vann commented Mar 19, 2022

Uh oh!

taylor-vann commented Mar 19, 2022

Uh oh!

taylor-vann commented Mar 23, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot bot commented Jan 25, 2022 •

edited

Loading

github-actions bot commented Jan 25, 2022 •

edited

Loading