[labs/react] Remove deprecated syntax and remove extra class component #4027

augustjk · 2023-07-18T17:32:20Z

Refactored to move implementation directly into render function of forwardRef rather than creating a class component. This removes an extra React component of the same name showing up in the component tree.
Removed deprecated old signature taking separate arguments.
Simplified typings for WebComponentProps and ReactWebComponent and added jsdoc.

changeset-bot · 2023-07-18T17:32:23Z

🦋 Changeset detected

Latest commit: b2954e2

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

This PR includes changesets to release 1 package

Name	Type
@lit-labs/react	Major

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 · 2023-07-18T17:32:43Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: faster ✔ 0% - 15% (0.04ms - 4.24ms)
^{this-change vs tip-of-tree}

render

lit-element-list: 96.49ms - 100.29ms
lit-html-kitchen-sink: unsure 🔍 -9% - +5% (-4.11ms - +2.39ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -7% - +4% (-0.94ms - +0.52ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -2% - +3% (-1.30ms - +1.91ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -3% - +1% (-2.02ms - +0.97ms)
^{this-change vs tip-of-tree}

update

lit-element-list: 1061.18ms - 1076.37ms
lit-html-kitchen-sink: unsure 🔍 -4% - +6% (-4.74ms - +6.43ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -2% - +4% (-7.83ms - +14.34ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -3% - +2% (-4.07ms - +2.51ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -0% - +2% (-2.26ms - +16.83ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: 1028.73ms - 1043.09ms
reactive-element-list: unsure 🔍 -1% - +2% (-6.24ms - +16.12ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #5071
Commit: 547fe6c

render

Version	Avg time	vs
	96.49ms - 100.29ms	-

update

Version	Avg time	vs
	1061.18ms - 1076.37ms	-

update-reflect

Version	Avg time	vs
	1028.73ms - 1043.09ms	-

lit-html-kitchen-sink

Browser: chrome-headless 114.0.5735.198
Sample size: 30
Built by: Benchmarks #5071
Commit: 547fe6c

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	43.38ms - 48.10ms	-	unsure 🔍 -9% - +5% -4.11ms - +2.39ms	unsure 🔍 -5% - +9% -2.34ms - +4.11ms
tip-of-tree tip-of-tree	44.37ms - 48.84ms	unsure 🔍 -5% - +9% -2.39ms - +4.11ms	-	unsure 🔍 -3% - +11% -1.39ms - +4.89ms
previous-release previous-release	42.65ms - 47.06ms	unsure 🔍 -9% - +5% -4.11ms - +2.34ms	unsure 🔍 -10% - +3% -4.89ms - +1.39ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	104.26ms - 111.24ms	-	unsure 🔍 -4% - +6% -4.74ms - +6.43ms	unsure 🔍 -4% - +4% -4.13ms - +4.09ms
tip-of-tree tip-of-tree	102.54ms - 111.27ms	unsure 🔍 -6% - +4% -6.43ms - +4.74ms	-	unsure 🔍 -5% - +4% -5.74ms - +4.01ms
previous-release previous-release	105.61ms - 109.93ms	unsure 🔍 -4% - +4% -4.09ms - +4.13ms	unsure 🔍 -4% - +5% -4.01ms - +5.74ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	24.62ms - 27.43ms	-	faster ✔ 0% - 15% 0.04ms - 4.24ms	unsure 🔍 -13% - +2% -3.58ms - +0.56ms
tip-of-tree tip-of-tree	26.60ms - 29.72ms	unsure 🔍 -0% - +17% +0.04ms - +4.24ms	-	unsure 🔍 -6% - +10% -1.55ms - +2.80ms
previous-release previous-release	26.02ms - 29.05ms	unsure 🔍 -2% - +14% -0.56ms - +3.58ms	unsure 🔍 -10% - +5% -2.80ms - +1.55ms	-

lit-html-repeat

Browser: chrome-headless 114.0.5735.198
Sample size: 30
Built by: Benchmarks #5071
Commit: 547fe6c

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	12.63ms - 13.27ms	-	unsure 🔍 -7% - +4% -0.94ms - +0.52ms	unsure 🔍 -3% - +6% -0.36ms - +0.79ms
tip-of-tree tip-of-tree	12.51ms - 13.81ms	unsure 🔍 -4% - +7% -0.52ms - +0.94ms	-	unsure 🔍 -3% - +10% -0.38ms - +1.23ms
previous-release previous-release	12.26ms - 13.21ms	unsure 🔍 -6% - +3% -0.79ms - +0.36ms	unsure 🔍 -9% - +3% -1.23ms - +0.38ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	352.52ms - 367.60ms	-	unsure 🔍 -2% - +4% -7.83ms - +14.34ms	slower ❌ 1% - 7% 4.10ms - 24.56ms
tip-of-tree tip-of-tree	348.68ms - 364.93ms	unsure 🔍 -4% - +2% -14.34ms - +7.83ms	-	slower ❌ 0% - 6% 0.41ms - 21.74ms
previous-release previous-release	338.82ms - 352.64ms	faster ✔ 1% - 7% 4.10ms - 24.56ms	faster ✔ 0% - 6% 0.41ms - 21.74ms	-

lit-html-template-heavy

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #5071
Commit: 547fe6c

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	66.47ms - 68.87ms	-	unsure 🔍 -2% - +3% -1.30ms - +1.91ms	unsure 🔍 -4% - +1% -3.02ms - +0.59ms
tip-of-tree tip-of-tree	66.30ms - 68.43ms	unsure 🔍 -3% - +2% -1.91ms - +1.30ms	-	unsure 🔍 -5% - +0% -3.23ms - +0.20ms
previous-release previous-release	67.54ms - 70.22ms	unsure 🔍 -1% - +4% -0.59ms - +3.02ms	unsure 🔍 -0% - +5% -0.20ms - +3.23ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	144.59ms - 149.15ms	-	unsure 🔍 -3% - +2% -4.07ms - +2.51ms	unsure 🔍 -4% - +1% -5.64ms - +1.80ms
tip-of-tree tip-of-tree	145.28ms - 150.02ms	unsure 🔍 -2% - +3% -2.51ms - +4.07ms	-	unsure 🔍 -3% - +2% -4.91ms - +2.63ms
previous-release previous-release	145.86ms - 151.72ms	unsure 🔍 -1% - +4% -1.80ms - +5.64ms	unsure 🔍 -2% - +3% -2.63ms - +4.91ms	-

reactive-element-list

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #5071
Commit: 547fe6c

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	63.28ms - 65.49ms	-	unsure 🔍 -3% - +1% -2.02ms - +0.97ms	unsure 🔍 -3% - +2% -1.74ms - +1.51ms
tip-of-tree tip-of-tree	63.90ms - 65.91ms	unsure 🔍 -2% - +3% -0.97ms - +2.02ms	-	unsure 🔍 -2% - +3% -1.15ms - +1.97ms
previous-release previous-release	63.31ms - 65.68ms	unsure 🔍 -2% - +3% -1.51ms - +1.74ms	unsure 🔍 -3% - +2% -1.97ms - +1.15ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1040.20ms - 1055.19ms	-	unsure 🔍 -0% - +2% -2.26ms - +16.83ms	unsure 🔍 -1% - +1% -12.59ms - +11.38ms
tip-of-tree tip-of-tree	1034.50ms - 1046.31ms	unsure 🔍 -2% - +0% -16.83ms - +2.26ms	-	unsure 🔍 -2% - +0% -18.95ms - +3.16ms
previous-release previous-release	1038.95ms - 1057.65ms	unsure 🔍 -1% - +1% -11.38ms - +12.59ms	unsure 🔍 -0% - +2% -3.16ms - +18.95ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1025.03ms - 1039.83ms	-	unsure 🔍 -1% - +2% -6.24ms - +16.12ms	unsure 🔍 -1% - +1% -10.68ms - +11.69ms
tip-of-tree tip-of-tree	1019.11ms - 1035.87ms	unsure 🔍 -2% - +1% -16.12ms - +6.24ms	-	unsure 🔍 -2% - +1% -16.30ms - +7.42ms
previous-release previous-release	1023.53ms - 1040.32ms	unsure 🔍 -1% - +1% -11.69ms - +10.68ms	unsure 🔍 -1% - +2% -7.42ms - +16.30ms	-

_{tachometer-reporter-action v2 for Benchmarks}

AndrewJakubowicz · 2023-07-18T20:15:04Z

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

  }

+  // But don't dirty check properties; elements are assumed to do this.
+  node[name as keyof E] = value as E[keyof E];


Raising this line above the check at 160 seems to maybe change logic? Is this expected?

All tests of expected behavior passes. I think it's a bit more correct to set the property to these nullish values then remove the attribute, rather than removing the attribute only and leaving the previous property values as it currently is.

Any way we can add a test for what we think is the more correct behavior? I think it'll matter for properties that don't reflect from an attribute, or have a name that differs from the attribute.

Like for props: {ariaChecked: null}? The new behavior should be correct where the old was wrong.

ariaChecked is kind of a weird one. React would normally not accept it as a valid prop on native elements and do nothing with it. It expects aria-checked as a prop to set that attribute, and if the user does that we'd never enter this logic and let React handle it.

Our wrapped component does accept ariaChecked as a prop since we find it in HTMLElement.prototype and set it. It's not quite the idiomatic React use case but since we're setting it we should remove. I can add a test for that.

So turns out el.ariaChecked = true doesn't reflect to aria-checked in Firefox so users shouldn't really be doing that.
Our types disallow ariaChecked to be passed in as a prop and only accepts aria-checked. I'm now thinking we shouldn't have to add a test for something users shouldn't do.

Edit: Doesn't hurt to add for Chrome/Safari behavior anyway. Added a test just to check for the absence of the attribute after setting and "unsetting" with undefined/null.

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

justinfagnani · 2023-07-19T07:04:18Z

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

+ * `onfoo` prop will have the type `(e: FooEvent) => void`.
+ */
 export type EventName<T extends Event = Event> = string & {
  __event_type: T;


while you're here, we'd normally write this as __eventType, ie the __ is a prefix, the whole identifier is not snake_case.

justinfagnani · 2023-07-19T07:14:00Z

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

  }

+  // But don't dirty check properties; elements are assumed to do this.
+  node[name as keyof E] = value as E[keyof E];


Any way we can add a test for what we think is the more correct behavior? I think it'll matter for properties that don't reflect from an attribute, or have a name that differs from the attribute.

Like for props: {ariaChecked: null}? The new behavior should be correct where the old was wrong.

justinfagnani · 2023-07-19T07:20:39Z

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

-  );
+    return React.createElement(tagName, {
+      ...reactProps,
+      ref: (node: I) => {


This creates a new closure every render. Can we hoist it?

It needs to be declared in the scope of the function component so we can assign to elementRef.current as well. I think a new closure every render here is unavoidable and using useCallback seems overkill for this.

AndrewJakubowicz

I love all the great React labs package improvements!

packages/labs/react/src/test/create-component_test.tsx

AndrewJakubowicz

Nice updates & nice test!

augustjk requested review from AndrewJakubowicz and justinfagnani July 18, 2023 17:32

augustjk requested a review from kevinpschaaf as a code owner July 18, 2023 17:32

AndrewJakubowicz reviewed Jul 18, 2023

View reviewed changes

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

justinfagnani approved these changes Jul 19, 2023

View reviewed changes

AndrewJakubowicz approved these changes Jul 19, 2023

View reviewed changes

Base automatically changed from labs-react-18 to main July 19, 2023 23:21

augustjk added 4 commits July 19, 2023 16:29

Refactor to remove class component

c22d7c0

Minor test fixes

97439d5

Add changeset

61f40b5

Rename __event_type to__eventType

bd84a2a

augustjk force-pushed the labs-react-refactor branch from 24f9c73 to bd84a2a Compare July 20, 2023 00:18

augustjk added 2 commits July 21, 2023 13:04

Additional comment for attribute removal in setProperty()

d79c1de

Add test for unsetting reflected attribute

b695f89

AndrewJakubowicz reviewed Jul 21, 2023

View reviewed changes

packages/labs/react/src/test/create-component_test.tsx Outdated Show resolved Hide resolved

Make comment more intelligible

2384cf7

AndrewJakubowicz reviewed Jul 21, 2023

View reviewed changes

packages/labs/react/src/test/create-component_test.tsx Outdated Show resolved Hide resolved

AndrewJakubowicz approved these changes Jul 21, 2023

View reviewed changes

Add check for aria property reflection

b2954e2

augustjk merged commit c28cb6e into main Jul 21, 2023

augustjk deleted the labs-react-refactor branch July 21, 2023 22:20

lit-robot mentioned this pull request Aug 2, 2023

Version Packages #4066

Merged

augustjk mentioned this pull request Aug 17, 2023

[labs/react] Figure out pattern and/or fix types for using a wrapped component in React and Preact #3289

Closed

1 task

web-padawan mentioned this pull request Dec 14, 2023

refactor!: use new Lit React package instead of Lit Labs vaadin/react-components#173

Merged

[labs/react] Remove deprecated syntax and remove extra class component #4027

[labs/react] Remove deprecated syntax and remove extra class component #4027

Uh oh!

Conversation

augustjk commented Jul 18, 2023

Uh oh!

changeset-bot bot commented Jul 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jul 18, 2023 • 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!

AndrewJakubowicz Jul 18, 2023

Choose a reason for hiding this comment

Uh oh!

augustjk Jul 18, 2023

Choose a reason for hiding this comment

Uh oh!

justinfagnani Jul 19, 2023

Choose a reason for hiding this comment

Uh oh!

augustjk Jul 20, 2023

Choose a reason for hiding this comment

Uh oh!

augustjk Jul 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

justinfagnani Jul 19, 2023

Choose a reason for hiding this comment

Uh oh!

justinfagnani Jul 19, 2023

Choose a reason for hiding this comment

Uh oh!

justinfagnani Jul 19, 2023

Choose a reason for hiding this comment

Uh oh!

augustjk Jul 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AndrewJakubowicz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

AndrewJakubowicz left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Jul 18, 2023 •

edited

Loading

github-actions bot commented Jul 18, 2023 •

edited

Loading

augustjk Jul 21, 2023 •

edited

Loading

augustjk Jul 20, 2023 •

edited

Loading