[labs/react] Fixes `WebComponentProps` type to accept `ref` prop #4061

augustjk · 2023-08-01T01:13:17Z

Using React.DetailedHTMLProps includes the optional ref prop with a ref that should return the element class itself. This is the same type used for built-in elements in React.JSX.IntrinsicElements.

We only need the React.DetailedHTMLProps for WebComponentProps meant to be used for IntrinsicElements whereas the internal type for the component props still just needs the React.HTMLAttributes as we did before. So I added a ElementProps type that's shared between those.

Test for this could be better but I just added a small build-time check for now.

I want to better refactor the test to really separately test the different parts of create-component.ts instead of the single test render harness trying pass props to a div, an x-foo, and the wrapped component like this

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

Lines 126 to 132 in 47b4891

    
           root.render( 
        
             <> 
        
               <div {...(props as React.HTMLAttributes<HTMLDivElement>)} />, 
        
               <x-foo {...props} /> 
        
               <BasicElementComponent {...props} />, 
        
             </> 
        
           );

but that should be its own PR.

changeset-bot · 2023-08-01T01:13:21Z

🦋 Changeset detected

Latest commit: de031b8

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-08-01T01:13:35Z

📊 Tachometer Benchmark Results

Summary

nop-update

this-change, tip-of-tree, previous-release: unsure 🔍 -9% - +8% (-2.24ms - +1.83ms)
^{this-change vs tip-of-tree}

render

this-change: 91.04ms - 95.25ms
this-change, tip-of-tree, previous-release: unsure 🔍 -4% - +7% (-1.54ms - +2.81ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +6% (-2.08ms - +4.00ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -5% - +3% (-2.98ms - +1.63ms)
^{this-change vs tip-of-tree}

update

this-change: 967.32ms - 1000.96ms
this-change, tip-of-tree, previous-release: unsure 🔍 -4% - +9% (-3.30ms - +8.26ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -5% - +3% (-6.88ms - +4.10ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +3% (-30.62ms - +30.40ms)
^{this-change vs tip-of-tree}

update-reflect

this-change: 935.46ms - 963.47ms
this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +3% (-26.93ms - +30.31ms)
^{this-change vs tip-of-tree}

Results

this-change

Browser: chrome-headless 115.0.5790.102
Sample size: 50
Built by: Benchmarks #5139
Commit: de031b8

render

Version	Avg time	vs
	91.04ms - 95.25ms	-

update

Version	Avg time	vs
	967.32ms - 1000.96ms	-

update-reflect

Version	Avg time	vs
	935.46ms - 963.47ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 115.0.5790.102
Sample size: 30
Built by: Benchmarks #5139
Commit: de031b8

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	37.11ms - 40.49ms	-	unsure 🔍 -4% - +7% -1.54ms - +2.81ms	unsure 🔍 -4% - +9% -1.46ms - +3.29ms
tip-of-tree tip-of-tree	36.80ms - 39.54ms	unsure 🔍 -7% - +4% -2.81ms - +1.54ms	-	unsure 🔍 -5% - +6% -1.88ms - +2.44ms
previous-release previous-release	36.22ms - 39.56ms	unsure 🔍 -8% - +4% -3.29ms - +1.46ms	unsure 🔍 -6% - +5% -2.44ms - +1.88ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	90.46ms - 97.76ms	-	unsure 🔍 -4% - +9% -3.30ms - +8.26ms	unsure 🔍 -3% - +9% -2.99ms - +7.78ms
tip-of-tree tip-of-tree	87.15ms - 96.11ms	unsure 🔍 -9% - +3% -8.26ms - +3.30ms	-	unsure 🔍 -7% - +6% -6.06ms - +5.89ms
previous-release previous-release	87.76ms - 95.67ms	unsure 🔍 -8% - +3% -7.78ms - +2.99ms	unsure 🔍 -6% - +7% -5.89ms - +6.06ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	22.22ms - 24.50ms	-	unsure 🔍 -9% - +8% -2.24ms - +1.83ms	unsure 🔍 -8% - +9% -1.74ms - +2.06ms
tip-of-tree tip-of-tree	21.88ms - 25.26ms	unsure 🔍 -8% - +10% -1.83ms - +2.24ms	-	unsure 🔍 -8% - +11% -1.91ms - +2.63ms
previous-release previous-release	21.69ms - 24.73ms	unsure 🔍 -9% - +7% -2.06ms - +1.74ms	unsure 🔍 -11% - +8% -2.63ms - +1.91ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 115.0.5790.102
Sample size: 50
Built by: Benchmarks #5139
Commit: de031b8

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	60.28ms - 65.69ms	-	unsure 🔍 -3% - +6% -2.08ms - +4.00ms	unsure 🔍 -5% - +5% -3.27ms - +3.17ms
tip-of-tree tip-of-tree	60.64ms - 63.41ms	unsure 🔍 -6% - +3% -4.00ms - +2.08ms	-	unsure 🔍 -5% - +2% -3.23ms - +1.22ms
previous-release previous-release	61.29ms - 64.78ms	unsure 🔍 -5% - +5% -3.17ms - +3.27ms	unsure 🔍 -2% - +5% -1.22ms - +3.23ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	124.53ms - 131.93ms	-	unsure 🔍 -5% - +3% -6.88ms - +4.10ms	unsure 🔍 -5% - +4% -6.68ms - +5.76ms
tip-of-tree tip-of-tree	125.56ms - 133.68ms	unsure 🔍 -3% - +5% -4.10ms - +6.88ms	-	unsure 🔍 -4% - +6% -5.51ms - +7.37ms
previous-release previous-release	123.69ms - 133.69ms	unsure 🔍 -4% - +5% -5.76ms - +6.68ms	unsure 🔍 -6% - +4% -7.37ms - +5.51ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 115.0.5790.102
Sample size: 50
Built by: Benchmarks #5139
Commit: de031b8

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	60.45ms - 63.60ms	-	unsure 🔍 -5% - +3% -2.98ms - +1.63ms	unsure 🔍 -4% - +3% -2.20ms - +1.94ms
tip-of-tree tip-of-tree	61.01ms - 64.38ms	unsure 🔍 -3% - +5% -1.63ms - +2.98ms	-	unsure 🔍 -3% - +4% -1.62ms - +2.70ms
previous-release previous-release	60.81ms - 63.50ms	unsure 🔍 -3% - +4% -1.94ms - +2.20ms	unsure 🔍 -4% - +3% -2.70ms - +1.62ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	968.57ms - 1012.59ms	-	unsure 🔍 -3% - +3% -30.62ms - +30.40ms	unsure 🔍 -3% - +3% -30.03ms - +29.04ms
tip-of-tree tip-of-tree	969.56ms - 1011.82ms	unsure 🔍 -3% - +3% -30.40ms - +30.62ms	-	unsure 🔍 -3% - +3% -29.28ms - +28.50ms
previous-release previous-release	971.37ms - 1010.78ms	unsure 🔍 -3% - +3% -29.04ms - +30.03ms	unsure 🔍 -3% - +3% -28.50ms - +29.28ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	977.45ms - 1018.36ms	-	unsure 🔍 -3% - +3% -26.93ms - +30.31ms	unsure 🔍 -2% - +3% -24.16ms - +32.98ms
tip-of-tree tip-of-tree	976.21ms - 1016.23ms	unsure 🔍 -3% - +3% -30.31ms - +26.93ms	-	unsure 🔍 -3% - +3% -25.53ms - +30.98ms
previous-release previous-release	973.55ms - 1013.44ms	unsure 🔍 -3% - +2% -32.98ms - +24.16ms	unsure 🔍 -3% - +3% -30.98ms - +25.53ms	-

_{tachometer-reporter-action v2 for Benchmarks}

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

AndrewJakubowicz

Nice

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

augustjk added 3 commits July 31, 2023 17:14

Fix WebComponentProps type to allow adding ref

f48dad1

Add test for accepting ref in JSX

5dbd187

Add changeset

ffcba4d

augustjk requested review from AndrewJakubowicz and justinfagnani August 1, 2023 01:13

augustjk requested a review from kevinpschaaf as a code owner August 1, 2023 01:13

augustjk added 2 commits July 31, 2023 18:52

Fix return type of createComponent and add test to catch

6d5504f

Redo Props type to minimize diff

3264074

AndrewJakubowicz reviewed Aug 1, 2023

View reviewed changes

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

AndrewJakubowicz approved these changes Aug 1, 2023

View reviewed changes

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

Add comment to types

de031b8

augustjk merged commit 25d10ee into main Aug 1, 2023

augustjk deleted the react-wc-type branch August 1, 2023 19:11

AykutSarac mentioned this pull request Aug 1, 2023

React ref is not recognized by Baklava components Trendyol/baklava#394

Closed

lit-robot mentioned this pull request Aug 2, 2023

Version Packages #4066

Merged

	root.render(
	<>
	<div {...(props as React.HTMLAttributes<HTMLDivElement>)} />,
	<x-foo {...props} />
	<BasicElementComponent {...props} />,
	</>
	);

[labs/react] Fixes WebComponentProps type to accept ref prop #4061

[labs/react] Fixes WebComponentProps type to accept ref prop #4061

Uh oh!

Conversation

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

Uh oh!

Uh oh!

changeset-bot bot commented Aug 1, 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 Aug 1, 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

update-reflect

Uh oh!

Uh oh!

AndrewJakubowicz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

[labs/react] Fixes `WebComponentProps` type to accept `ref` prop #4061

[labs/react] Fixes `WebComponentProps` type to accept `ref` prop #4061

augustjk commented Aug 1, 2023 •

edited

Loading

changeset-bot bot commented Aug 1, 2023 •

edited

Loading

github-actions bot commented Aug 1, 2023 •

edited

Loading