[labs/react] Update react versions used for testing and add type as peer dependency #4000

augustjk · 2023-07-07T22:29:38Z

The version of React we use for testing has been bumped to 18. To make this work:

Added a bespoke WTR config that bundles the test files with React.
This was needed as React added package exports preventing module resolution into the actual umd dist files we used to have but still only exports cjs.
This also feels more realistic and the code more idiomatic to write.
Rewrote the deprecated ReactDOM.render() calls to use createRoot() from react-dom/client.
We also reuse the render root across multiple renders within the same test.
Related to above, render() calls were no longer synchronous (likely to support React's new ability to batch multiple setState calls) so to make sure we do DOM assertions after React has finished rendering, use act() from react-dom/test-utils where needed.
https://legacy.reactjs.org/docs/testing-recipes.html#act
This also required adding a global flag up top as described here: https://react.dev/blog/2022/03/08/react-18-upgrade-guide#configuring-your-testing-environment
useController test required a bit of tweak as React 18 strict mode also reruns effects.

Additionally, we already had direct usage of typings from @types/react in consumer facing code like

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

Lines 53 to 58 in 012e8bc

    
           export type ReactWebComponent< 
        
             I extends HTMLElement, 
        
             E extends EventNames = {} 
        
           > = React.ForwardRefExoticComponent< 
        
             React.PropsWithoutRef<WebComponentProps<I, E>> & React.RefAttributes<I> 
        
           >;

But we only had @types/react listed in dev dependencies. This was moved as a peer dependency.

I do want to revisit dropping this all-together to use generic types that can accept both React and Preact types.

changeset-bot · 2023-07-07T22:29:41Z

🦋 Changeset detected

Latest commit: f9fc913

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	Patch

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-07T22:30:00Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: faster ✔ 1% - 18% (0.30ms - 5.13ms)
^{this-change vs tip-of-tree}

render

lit-element-list: 78.20ms - 82.08ms
lit-html-kitchen-sink: unsure 🔍 -8% - +8% (-3.00ms - +2.94ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -5% - +1% (-0.61ms - +0.07ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: faster ✔ 1% - 5% (0.34ms - 3.36ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -3% - +2% (-1.35ms - +0.96ms)
^{this-change vs tip-of-tree}

update

lit-element-list: 900.67ms - 919.29ms
lit-html-kitchen-sink: unsure 🔍 -6% - +2% (-6.32ms - +2.36ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -5% - +1% (-18.39ms - +4.47ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -4% - +1% (-5.36ms - +1.41ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -2% - +1% (-18.31ms - +11.88ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: 845.88ms - 859.75ms
reactive-element-list: unsure 🔍 -2% - +1% (-17.07ms - +9.72ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #5063
Commit: 8ba7221

render

Version	Avg time	vs
	78.20ms - 82.08ms	-

update

Version	Avg time	vs
	900.67ms - 919.29ms	-

update-reflect

Version	Avg time	vs
	845.88ms - 859.75ms	-

lit-html-kitchen-sink

Browser: chrome-headless 114.0.5735.198
Sample size: 30
Built by: Benchmarks #5063
Commit: 8ba7221

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	33.96ms - 38.22ms	-	unsure 🔍 -8% - +8% -3.00ms - +2.94ms	unsure 🔍 -15% - +1% -6.04ms - +0.39ms
tip-of-tree tip-of-tree	34.05ms - 38.20ms	unsure 🔍 -8% - +8% -2.94ms - +3.00ms	-	unsure 🔍 -15% - +1% -5.96ms - +0.38ms
previous-release previous-release	36.51ms - 41.32ms	unsure 🔍 -1% - +17% -0.39ms - +6.04ms	unsure 🔍 -1% - +17% -0.38ms - +5.96ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	94.69ms - 101.79ms	-	unsure 🔍 -6% - +2% -6.32ms - +2.36ms	unsure 🔍 -7% - +3% -7.18ms - +2.79ms
tip-of-tree tip-of-tree	97.72ms - 102.72ms	unsure 🔍 -2% - +6% -2.36ms - +6.32ms	-	unsure 🔍 -4% - +4% -4.51ms - +4.09ms
previous-release previous-release	96.94ms - 103.93ms	unsure 🔍 -3% - +7% -2.79ms - +7.18ms	unsure 🔍 -4% - +5% -4.09ms - +4.51ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	23.64ms - 27.15ms	-	faster ✔ 1% - 18% 0.30ms - 5.13ms	unsure 🔍 -14% - +4% -3.93ms - +1.15ms
tip-of-tree tip-of-tree	26.45ms - 29.77ms	slower ❌ 1% - 21% 0.30ms - 5.13ms	-	unsure 🔍 -5% - +14% -1.15ms - +3.81ms
previous-release previous-release	24.95ms - 28.63ms	unsure 🔍 -5% - +16% -1.15ms - +3.93ms	unsure 🔍 -13% - +4% -3.81ms - +1.15ms	-

lit-html-repeat

Browser: chrome-headless 114.0.5735.198
Sample size: 30
Built by: Benchmarks #5063
Commit: 8ba7221

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	11.38ms - 11.78ms	-	unsure 🔍 -5% - +1% -0.61ms - +0.07ms	unsure 🔍 -3% - +2% -0.40ms - +0.25ms
tip-of-tree tip-of-tree	11.58ms - 12.13ms	unsure 🔍 -1% - +5% -0.07ms - +0.61ms	-	unsure 🔍 -2% - +5% -0.18ms - +0.57ms
previous-release previous-release	11.40ms - 11.91ms	unsure 🔍 -2% - +3% -0.25ms - +0.40ms	unsure 🔍 -5% - +1% -0.57ms - +0.18ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	344.95ms - 360.28ms	-	unsure 🔍 -5% - +1% -18.39ms - +4.47ms	unsure 🔍 -5% - +2% -17.49ms - +6.72ms
tip-of-tree tip-of-tree	351.10ms - 368.06ms	unsure 🔍 -1% - +5% -4.47ms - +18.39ms	-	unsure 🔍 -3% - +4% -11.06ms - +14.22ms
previous-release previous-release	348.63ms - 367.37ms	unsure 🔍 -2% - +5% -6.72ms - +17.49ms	unsure 🔍 -4% - +3% -14.22ms - +11.06ms	-

lit-html-template-heavy

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #5063
Commit: 8ba7221

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	58.04ms - 60.11ms	-	faster ✔ 1% - 5% 0.34ms - 3.36ms	unsure 🔍 -4% - +0% -2.56ms - +0.29ms
tip-of-tree tip-of-tree	59.83ms - 62.02ms	slower ❌ 1% - 6% 0.34ms - 3.36ms	-	unsure 🔍 -1% - +4% -0.76ms - +2.19ms
previous-release previous-release	59.23ms - 61.19ms	unsure 🔍 -1% - +4% -0.29ms - +2.56ms	unsure 🔍 -4% - +1% -2.19ms - +0.76ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	128.72ms - 133.20ms	-	unsure 🔍 -4% - +1% -5.36ms - +1.41ms	unsure 🔍 -3% - +2% -3.41ms - +2.80ms
tip-of-tree tip-of-tree	130.40ms - 135.48ms	unsure 🔍 -1% - +4% -1.41ms - +5.36ms	-	unsure 🔍 -1% - +4% -1.65ms - +4.99ms
previous-release previous-release	129.13ms - 133.41ms	unsure 🔍 -2% - +3% -2.80ms - +3.41ms	unsure 🔍 -4% - +1% -4.99ms - +1.65ms	-

reactive-element-list

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #5063
Commit: 8ba7221

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	50.87ms - 52.60ms	-	unsure 🔍 -3% - +2% -1.35ms - +0.96ms	unsure 🔍 -4% - +2% -1.93ms - +0.83ms
tip-of-tree tip-of-tree	51.17ms - 52.69ms	unsure 🔍 -2% - +3% -0.96ms - +1.35ms	-	unsure 🔍 -3% - +2% -1.67ms - +0.96ms
previous-release previous-release	51.21ms - 53.36ms	unsure 🔍 -2% - +4% -0.83ms - +1.93ms	unsure 🔍 -2% - +3% -0.96ms - +1.67ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	913.83ms - 934.19ms	-	unsure 🔍 -2% - +1% -18.31ms - +11.88ms	unsure 🔍 -1% - +2% -10.00ms - +18.13ms
tip-of-tree tip-of-tree	916.08ms - 938.37ms	unsure 🔍 -1% - +2% -11.88ms - +18.31ms	-	unsure 🔍 -1% - +2% -7.50ms - +22.06ms
previous-release previous-release	910.24ms - 929.65ms	unsure 🔍 -2% - +1% -18.13ms - +10.00ms	unsure 🔍 -2% - +1% -22.06ms - +7.50ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	883.09ms - 903.71ms	-	unsure 🔍 -2% - +1% -17.07ms - +9.72ms	unsure 🔍 -2% - +2% -14.36ms - +15.62ms
tip-of-tree tip-of-tree	888.53ms - 905.64ms	unsure 🔍 -1% - +2% -9.72ms - +17.07ms	-	unsure 🔍 -1% - +2% -9.54ms - +18.15ms
previous-release previous-release	881.89ms - 903.66ms	unsure 🔍 -2% - +2% -15.62ms - +14.36ms	unsure 🔍 -2% - +1% -18.15ms - +9.54ms	-

_{tachometer-reporter-action v2 for Benchmarks}

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

augustjk · 2023-07-08T01:25:08Z

This ended up needing a lot of additional changes, particularly this: b4ef3c2
As the newer version of @types/react got hoisted up to the root of the monorepo, it ended up conflicting with @types/trusted-types.
Since TS digs into all global declaration files by default, I needed to add explicit "types" fields to many tsconfig. Hat tip to @AndrewJakubowicz for describing the issue and solution here #3894

This arguably could be its own PR, but it's really only a problem because of the react types so unsure if it really should be separated out.

augustjk · 2023-07-12T22:27:28Z

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

+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    await renderReactComponent({id: null as any});


I'm not sure that these should explicitly be expecting TS error which implies that we're testing that the typing of the created component should not be allowed to take null as the value of these HTML attributes.
My thought is we're only concerned with testing runtime behavior of what happens if null is somehow provided.

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

packages/labs/react/web-test-runner.config.js

augustjk · 2023-07-19T17:46:56Z

Also resolve #3560

AndrewJakubowicz

Nice! Thanks for splitting out the other changes. It made this much easier to review!

AndrewJakubowicz · 2023-07-19T18:53:24Z

packages/labs/react/tsconfig.json

    "jsx": "react",
    "noImplicitOverride": true,
-    "types": ["mocha", "react", "react-dom"]
+    "skipLibCheck": true,


Why was this needed? Is there an issue with the react, and react-dom types being checked as they've been removed from the types array?

react and react-dom could be removed from types as we're not relying on them being available as UMD globals.
skipLibCheck was needed because some React internal typings after updating to 18.2 were causing errors, possibly incompatible with our other tsconfig options.

augustjk requested a review from justinfagnani July 7, 2023 22:29

augustjk requested a review from kevinpschaaf as a code owner July 7, 2023 22:29

augustjk commented Jul 7, 2023

View reviewed changes

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

augustjk force-pushed the labs-react-18 branch from 70493bb to 585f608 Compare July 8, 2023 01:22

augustjk requested a review from benjamind as a code owner July 8, 2023 01:22

augustjk commented Jul 12, 2023

View reviewed changes

AndrewJakubowicz reviewed Jul 13, 2023

View reviewed changes

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

This was referenced Jul 14, 2023

[labs/testing] Utility for testing ensuring components are fully rendered before asserting #4022

Open

[all] Add explicit "types" to tsconfig #4025

Merged

augustjk added 2 commits July 18, 2023 10:00

Update react dependencies and move @type/react to peer

6acbe78

Rename React to ReactModule

a71eee4

augustjk force-pushed the labs-react-18 branch from 585f608 to 7c1f1d1 Compare July 18, 2023 17:03

augustjk added 5 commits July 18, 2023 10:07

Update package and test files for react 18

a68da53

Add changeset

c9b291d

Clean up build script

89a7eab

Split out labs/react test from common

1ac6f10

Update @types/react in labs/ssr-react

a786de1

augustjk force-pushed the labs-react-18 branch from 7c1f1d1 to a786de1 Compare July 18, 2023 17:20

AndrewJakubowicz reviewed Jul 19, 2023

View reviewed changes

packages/labs/react/web-test-runner.config.js Outdated Show resolved Hide resolved

AndrewJakubowicz reviewed Jul 19, 2023

View reviewed changes

packages/labs/react/web-test-runner.config.js Show resolved Hide resolved

Fix license year

f9fc913

augustjk removed the request for review from benjamind July 19, 2023 17:28

augustjk linked an issue Jul 19, 2023 that may be closed by this pull request

[labs/react] Bundle tests #3560

Closed

1 task

AndrewJakubowicz approved these changes Jul 19, 2023

View reviewed changes

augustjk merged commit 2118aeb into main Jul 19, 2023

augustjk deleted the labs-react-18 branch July 19, 2023 23:21

lit-robot mentioned this pull request Aug 2, 2023

Version Packages #4066

Merged

augustjk mentioned this pull request Nov 8, 2023

[@labs/react] update react to 18 #3349

Closed

	export type ReactWebComponent<
	I extends HTMLElement,
	E extends EventNames = {}
	> = React.ForwardRefExoticComponent<
	React.PropsWithoutRef<WebComponentProps<I, E>> & React.RefAttributes<I>
	>;

		// eslint-disable-next-line @typescript-eslint/no-explicit-any
		await renderReactComponent({id: null as any});

[labs/react] Update react versions used for testing and add type as peer dependency #4000

[labs/react] Update react versions used for testing and add type as peer dependency #4000

Uh oh!

Conversation

augustjk commented Jul 7, 2023

Uh oh!

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

Uh oh!

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

Uh oh!

Uh oh!

augustjk Jul 12, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

augustjk commented Jul 19, 2023

Uh oh!

AndrewJakubowicz left a comment

Choose a reason for hiding this comment

Uh oh!

AndrewJakubowicz Jul 19, 2023

Choose a reason for hiding this comment

Uh oh!

augustjk Jul 19, 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot bot commented Jul 7, 2023 •

edited

Loading

github-actions bot commented Jul 7, 2023 •

edited

Loading

augustjk commented Jul 8, 2023 •

edited

Loading

augustjk Jul 19, 2023 •

edited

Loading