[react] Add React.HTMLAttributes to component props #2123

justinfagnani · 2021-09-01T20:59:50Z

Fixes #2026

The React.HTMLAttributes type contains the built-in properties and event handlers and such, including the onFoo synthetic event handlers.

changeset-bot · 2021-09-01T20:59:52Z

🦋 Changeset detected

Latest commit: 24bcb31

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 · 2021-09-01T21:00:13Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: unsure 🔍 -10% - +5% (-5.46ms - +2.89ms)
^{this-change vs tip-of-tree}

render

lit-element-list: unsure 🔍 -1% - +5% (-1.22ms - +6.24ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -4% - +4% (-2.20ms - +2.13ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -6% - +1% (-0.93ms - +0.12ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -6% - +4% (-5.81ms - +3.47ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -0% - +5% (-0.14ms - +4.08ms)
^{this-change vs tip-of-tree}

update

lit-element-list: unsure 🔍 -2% - +4% (-26.74ms - +44.07ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -10% - +6% (-16.71ms - +9.91ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -3% - +2% (-15.10ms - +8.90ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -5% - +7% (-9.75ms - +13.37ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -2% - +5% (-21.94ms - +56.04ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: unsure 🔍 -3% - +2% (-28.90ms - +19.68ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -3% - +3% (-37.92ms - +31.51ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 92.0.4515.131
Sample size: 50
Built by: Benchmarks #1858
Commit: 6c1cce7

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	124.57ms - 130.96ms	-	unsure 🔍 -1% - +5% -1.22ms - +6.24ms	faster ✔ 19% - 24% 30.15ms - 40.22ms
tip-of-tree tip-of-tree	123.33ms - 127.17ms	unsure 🔍 -5% - +1% -6.24ms - +1.22ms	-	faster ✔ 21% - 25% 33.36ms - 42.03ms
previous-release previous-release	159.06ms - 166.84ms	slower ❌ 23% - 32% 30.15ms - 40.22ms	slower ❌ 26% - 34% 33.36ms - 42.03ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1073.41ms - 1135.60ms	-	unsure 🔍 -2% - +4% -26.74ms - +44.07ms	faster ✔ 4% - 11% 41.83ms - 131.95ms
tip-of-tree tip-of-tree	1078.92ms - 1112.76ms	unsure 🔍 -4% - +2% -44.07ms - +26.74ms	-	faster ✔ 5% - 11% 58.82ms - 132.29ms
previous-release previous-release	1158.79ms - 1224.00ms	slower ❌ 4% - 12% 41.83ms - 131.95ms	slower ❌ 5% - 12% 58.82ms - 132.29ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1087.37ms - 1120.36ms	-	unsure 🔍 -3% - +2% -28.90ms - +19.68ms	faster ✔ 4% - 8% 43.17ms - 94.92ms
tip-of-tree tip-of-tree	1090.65ms - 1126.31ms	unsure 🔍 -2% - +3% -19.68ms - +28.90ms	-	faster ✔ 3% - 8% 37.68ms - 91.18ms
previous-release previous-release	1152.97ms - 1192.85ms	slower ❌ 4% - 9% 43.17ms - 94.92ms	slower ❌ 3% - 8% 37.68ms - 91.18ms	-

lit-html-kitchen-sink

Browser: chrome-headless 92.0.4515.131
Sample size: 30
Built by: Benchmarks #1858
Commit: 6c1cce7

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	54.38ms - 57.27ms	-	unsure 🔍 -4% - +4% -2.20ms - +2.13ms	faster ✔ 19% - 29% 13.25ms - 21.96ms
tip-of-tree tip-of-tree	54.25ms - 57.48ms	unsure 🔍 -4% - +4% -2.13ms - +2.20ms	-	faster ✔ 19% - 29% 13.15ms - 21.98ms
previous-release previous-release	69.32ms - 77.54ms	slower ❌ 23% - 40% 13.25ms - 21.96ms	slower ❌ 23% - 40% 13.15ms - 21.98ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	162.31ms - 175.46ms	-	unsure 🔍 -10% - +6% -16.71ms - +9.91ms	unsure 🔍 -6% - +6% -10.58ms - +10.79ms
tip-of-tree tip-of-tree	160.72ms - 183.86ms	unsure 🔍 -6% - +10% -9.91ms - +16.71ms	-	unsure 🔍 -6% - +11% -10.81ms - +17.81ms
previous-release previous-release	160.36ms - 177.20ms	unsure 🔍 -6% - +6% -10.79ms - +10.58ms	unsure 🔍 -10% - +6% -17.81ms - +10.81ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	48.04ms - 52.40ms	-	unsure 🔍 -10% - +5% -5.46ms - +2.89ms	unsure 🔍 -11% - +5% -6.04ms - +2.48ms
tip-of-tree tip-of-tree	47.94ms - 55.07ms	unsure 🔍 -6% - +11% -2.89ms - +5.46ms	-	unsure 🔍 -11% - +9% -5.60ms - +4.61ms
previous-release previous-release	48.34ms - 55.66ms	unsure 🔍 -5% - +12% -2.48ms - +6.04ms	unsure 🔍 -9% - +11% -4.61ms - +5.60ms	-

lit-html-repeat

Browser: chrome-headless 92.0.4515.131
Sample size: 30
Built by: Benchmarks #1858
Commit: 6c1cce7

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	15.73ms - 16.41ms	-	unsure 🔍 -6% - +1% -0.93ms - +0.12ms	faster ✔ 7% - 13% 1.28ms - 2.36ms
tip-of-tree tip-of-tree	16.08ms - 16.88ms	unsure 🔍 -1% - +6% -0.12ms - +0.93ms	-	faster ✔ 5% - 11% 0.84ms - 1.99ms
previous-release previous-release	17.48ms - 18.31ms	slower ❌ 8% - 15% 1.28ms - 2.36ms	slower ❌ 5% - 12% 0.84ms - 1.99ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	471.50ms - 485.88ms	-	unsure 🔍 -3% - +2% -15.10ms - +8.90ms	faster ✔ 27% - 30% 174.29ms - 200.72ms
tip-of-tree tip-of-tree	472.19ms - 491.39ms	unsure 🔍 -2% - +3% -8.90ms - +15.10ms	-	faster ✔ 26% - 30% 169.74ms - 199.08ms
previous-release previous-release	655.11ms - 677.29ms	slower ❌ 36% - 42% 174.29ms - 200.72ms	slower ❌ 35% - 42% 169.74ms - 199.08ms	-

lit-html-template-heavy

Browser: chrome-headless 92.0.4515.131
Sample size: 50
Built by: Benchmarks #1858
Commit: 6c1cce7

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	84.63ms - 91.29ms	-	unsure 🔍 -6% - +4% -5.81ms - +3.47ms	faster ✔ 12% - 20% 12.16ms - 20.59ms
tip-of-tree tip-of-tree	85.90ms - 92.37ms	unsure 🔍 -4% - +7% -3.47ms - +5.81ms	-	faster ✔ 11% - 18% 11.06ms - 19.34ms
previous-release previous-release	101.75ms - 106.92ms	slower ❌ 13% - 24% 12.16ms - 20.59ms	slower ❌ 12% - 22% 11.06ms - 19.34ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	187.14ms - 206.59ms	-	unsure 🔍 -5% - +7% -9.75ms - +13.37ms	faster ✔ 5% - 15% 10.31ms - 33.99ms
tip-of-tree tip-of-tree	188.81ms - 201.30ms	unsure 🔍 -7% - +5% -13.37ms - +9.75ms	-	faster ✔ 7% - 15% 14.76ms - 33.16ms
previous-release previous-release	212.26ms - 225.77ms	slower ❌ 5% - 18% 10.31ms - 33.99ms	slower ❌ 7% - 17% 14.76ms - 33.16ms	-

reactive-element-list

Browser: chrome-headless 92.0.4515.131
Sample size: 50
Built by: Benchmarks #1858
Commit: 6c1cce7

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	86.69ms - 90.22ms	-	unsure 🔍 -0% - +5% -0.14ms - +4.08ms	unsure 🔍 -1% - +4% -0.54ms - +3.85ms
tip-of-tree tip-of-tree	85.32ms - 87.65ms	unsure 🔍 -5% - +0% -4.08ms - +0.14ms	-	unsure 🔍 -2% - +2% -2.07ms - +1.43ms
previous-release previous-release	85.49ms - 88.11ms	unsure 🔍 -4% - +1% -3.85ms - +0.54ms	unsure 🔍 -2% - +2% -1.43ms - +2.07ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1108.02ms - 1179.74ms	-	unsure 🔍 -2% - +5% -21.94ms - +56.04ms	unsure 🔍 -1% - +6% -15.98ms - +62.04ms
tip-of-tree tip-of-tree	1111.53ms - 1142.13ms	unsure 🔍 -5% - +2% -56.04ms - +21.94ms	-	unsure 🔍 -1% - +2% -15.70ms - +27.65ms
previous-release previous-release	1105.50ms - 1136.21ms	unsure 🔍 -5% - +1% -62.04ms - +15.98ms	unsure 🔍 -2% - +1% -27.65ms - +15.70ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1177.85ms - 1213.77ms	-	unsure 🔍 -3% - +3% -37.92ms - +31.51ms	unsure 🔍 -1% - +3% -17.27ms - +32.90ms
tip-of-tree tip-of-tree	1169.30ms - 1228.72ms	unsure 🔍 -3% - +3% -31.51ms - +37.92ms	-	unsure 🔍 -2% - +4% -23.47ms - +45.50ms
previous-release previous-release	1170.49ms - 1205.50ms	unsure 🔍 -3% - +1% -32.90ms - +17.27ms	unsure 🔍 -4% - +2% -45.50ms - +23.47ms	-

_{tachometer-reporter-action v2 for Benchmarks}

kevinpschaaf · 2021-09-02T01:30:36Z

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

@@ -174,7 +178,7 @@ export const createComponent = <I extends HTMLElement, E>(
        setProperty(
          this._element,
          prop,
-          this.props[prop as keyof ComponentProps],
+          this.props[prop as Exclude<keyof ComponentProps, symbol>],


What is this doing?

I was getting an error that symbol couldn't be used in an index type. I scanned, but couldn't figure which part of React.HTMLAttributes was including a symbol key, so I just... excluded it

I removed it and don't see the error now 🤷

kevinpschaaf

LGTM

[react] Add React.HTMLAttributes to component props

cf5d0c1

justinfagnani added this to the Lit RC.next milestone Sep 1, 2021

justinfagnani requested a review from sorvell September 1, 2021 20:59

google-cla bot added the cla: yes label Sep 1, 2021

Add changeset

f23340d

kevinpschaaf reviewed Sep 2, 2021

View reviewed changes

kevinpschaaf approved these changes Sep 2, 2021

View reviewed changes

Remove unnecessary Exclude<>

24bcb31

justinfagnani merged commit efe88ba into main Sep 2, 2021

justinfagnani deleted the react-types branch September 2, 2021 02:36

justinfagnani mentioned this pull request Sep 2, 2021

React wrapped components don't get HTML event types #2026

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[react] Add React.HTMLAttributes to component props #2123

[react] Add React.HTMLAttributes to component props #2123

justinfagnani commented Sep 1, 2021

changeset-bot bot commented Sep 1, 2021 •

edited

github-actions bot commented Sep 1, 2021 •

edited

📊 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

kevinpschaaf Sep 2, 2021

justinfagnani Sep 2, 2021

justinfagnani Sep 2, 2021

kevinpschaaf left a comment

[react] Add React.HTMLAttributes to component props #2123

[react] Add React.HTMLAttributes to component props #2123

Conversation

justinfagnani commented Sep 1, 2021

changeset-bot bot commented Sep 1, 2021 • edited

🦋 Changeset detected

github-actions bot commented Sep 1, 2021 • edited

📊 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

kevinpschaaf Sep 2, 2021

Choose a reason for hiding this comment

justinfagnani Sep 2, 2021

Choose a reason for hiding this comment

justinfagnani Sep 2, 2021

Choose a reason for hiding this comment

kevinpschaaf left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Sep 1, 2021 •

edited

github-actions bot commented Sep 1, 2021 •

edited