Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[labs/react] Fix type compatibility with Preact when adding children #4142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
augustjk merged 4 commits into from
Aug 28, 2023
Merged

[labs/react] Fix type compatibility with Preact when adding children #4142

augustjk merged 4 commits into from
Aug 28, 2023

Conversation

@augustjk
Copy link
Member

@augustjk augustjk commented Aug 25, 2023 •
edited
Loading

Fixes #4138

Content placed in children position in JSX are typed differently depending on whether it's React or Preact project. Children typing in Preact projects were incompatible with children prop of our wrapped components as they only accepted React.ReactNode which was more restrictive than what Preact considers as valid renderable child.

This PR adds children typing that's compatible with both React and Preact.

Testing for this fix working in Preact was done manually in a working branch for #4111. I'd be okay with holding off on merging this until I can do the updates to that branch to demonstrate the fix.
Mentioned PR has been merged and this branch has been rebased to that.

@augustjk augustjk requested a review from kevinpschaaf as a code owner August 25, 2023 18:17
@changeset-bot
Copy link

changeset-bot bot commented Aug 25, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: 5bfa53e

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
Copy link
Contributor

github-actions bot commented Aug 25, 2023 •
edited
Loading

📊 Tachometer Benchmark Results

Summary

nop-update

  • this-change, tip-of-tree, previous-release: unsure 🔍 -10% - +3% (-2.00ms - +0.54ms)
    this-change vs tip-of-tree

render

  • this-change: 66.84ms - 69.34ms
  • this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +6% (-0.74ms - +1.70ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +3% (-0.52ms - +1.38ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +3% (-0.30ms - +1.17ms)
    this-change vs tip-of-tree

update

  • this-change: 663.22ms - 674.10ms
  • this-change, tip-of-tree, previous-release: unsure 🔍 -5% - +4% (-3.59ms - +2.56ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +2% (-0.87ms - +1.98ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +1% (-4.17ms - +8.47ms)
    this-change vs tip-of-tree

update-reflect

  • this-change: 643.50ms - 650.18ms
  • this-change, tip-of-tree, previous-release: unsure 🔍 -0% - +1% (-0.94ms - +7.53ms)
    this-change vs tip-of-tree

Results

this-change

render

VersionAvg timevs
66.84ms - 69.34ms-

update

VersionAvg timevs
663.22ms - 674.10ms-

update-reflect

VersionAvg timevs
643.50ms - 650.18ms-
this-change, tip-of-tree, previous-release

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
26.12ms - 27.85ms-unsure 🔍
-3% - +6%
-0.74ms - +1.70ms		unsure 🔍
-1% - +8%
-0.32ms - +2.08ms
tip-of-tree
tip-of-tree		25.64ms - 27.37msunsure 🔍
-6% - +3%
-1.70ms - +0.74ms		-unsure 🔍
-3% - +6%
-0.79ms - +1.59ms
previous-release
previous-release		25.28ms - 26.93msunsure 🔍
-8% - +1%
-2.08ms - +0.32ms		unsure 🔍
-6% - +3%
-1.59ms - +0.79ms		-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
67.23ms - 71.27ms-unsure 🔍
-5% - +4%
-3.59ms - +2.56ms		unsure 🔍
-9% - +0%
-6.88ms - +0.13ms
tip-of-tree
tip-of-tree		67.45ms - 72.08msunsure 🔍
-4% - +5%
-2.56ms - +3.59ms		-unsure 🔍
-9% - +1%
-6.54ms - +0.83ms
previous-release
previous-release		69.76ms - 75.49msunsure 🔍
-0% - +10%
-0.13ms - +6.88ms		unsure 🔍
-1% - +9%
-0.83ms - +6.54ms		-

nop-update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
18.85ms - 20.65ms-unsure 🔍
-10% - +3%
-2.00ms - +0.54ms		unsure 🔍
-2% - +12%
-0.31ms - +2.22ms
tip-of-tree
tip-of-tree		19.58ms - 21.38msunsure 🔍
-3% - +10%
-0.54ms - +2.00ms		-slower ❌
2% - 16%
0.42ms - 2.95ms
previous-release
previous-release		17.90ms - 19.68msunsure 🔍
-11% - +1%
-2.22ms - +0.31ms		faster ✔
2% - 14%
0.42ms - 2.95ms		-
this-change, tip-of-tree, previous-release

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
46.93ms - 48.51ms-unsure 🔍
-1% - +3%
-0.52ms - +1.38ms		unsure 🔍
-3% - +2%
-1.23ms - +0.92ms
tip-of-tree
tip-of-tree		46.76ms - 47.81msunsure 🔍
-3% - +1%
-1.38ms - +0.52ms		-unsure 🔍
-3% - +1%
-1.49ms - +0.31ms
previous-release
previous-release		47.14ms - 48.61msunsure 🔍
-2% - +3%
-0.92ms - +1.23ms		unsure 🔍
-1% - +3%
-0.31ms - +1.49ms		-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
97.43ms - 99.76ms-unsure 🔍
-1% - +2%
-0.87ms - +1.98ms		unsure 🔍
-2% - +2%
-1.67ms - +2.01ms
tip-of-tree
tip-of-tree		97.22ms - 98.86msunsure 🔍
-2% - +1%
-1.98ms - +0.87ms		-unsure 🔍
-2% - +1%
-2.02ms - +1.26ms
previous-release
previous-release		97.00ms - 99.85msunsure 🔍
-2% - +2%
-2.01ms - +1.67ms		unsure 🔍
-1% - +2%
-1.26ms - +2.02ms		-
this-change, tip-of-tree, previous-release

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
42.99ms - 44.11ms-unsure 🔍
-1% - +3%
-0.30ms - +1.17ms		unsure 🔍
-1% - +2%
-0.56ms - +0.88ms
tip-of-tree
tip-of-tree		42.64ms - 43.60msunsure 🔍
-3% - +1%
-1.17ms - +0.30ms		-unsure 🔍
-2% - +1%
-0.94ms - +0.39ms
previous-release
previous-release		42.93ms - 43.85msunsure 🔍
-2% - +1%
-0.88ms - +0.56ms		unsure 🔍
-1% - +2%
-0.39ms - +0.94ms		-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
658.23ms - 668.06ms-unsure 🔍
-1% - +1%
-4.17ms - +8.47ms		unsure 🔍
-0% - +1%
-3.10ms - +8.66ms
tip-of-tree
tip-of-tree		657.02ms - 664.96msunsure 🔍
-1% - +1%
-8.47ms - +4.17ms		-unsure 🔍
-1% - +1%
-4.49ms - +5.75ms
previous-release
previous-release		657.13ms - 663.59msunsure 🔍
-1% - +0%
-8.66ms - +3.10ms		unsure 🔍
-1% - +1%
-5.75ms - +4.49ms		-

update-reflect

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
664.14ms - 670.88ms-unsure 🔍
-0% - +1%
-0.94ms - +7.53ms		unsure 🔍
-0% - +1%
-1.87ms - +7.95ms
tip-of-tree
tip-of-tree		661.65ms - 666.79msunsure 🔍
-1% - +0%
-7.53ms - +0.94ms		-unsure 🔍
-1% - +1%
-4.66ms - +4.15ms
previous-release
previous-release		660.89ms - 668.05msunsure 🔍
-1% - +0%
-7.95ms - +1.87ms		unsure 🔍
-1% - +1%
-4.15ms - +4.66ms		-

tachometer-reporter-action v2 for Benchmarks

AndrewJakubowicz
AndrewJakubowicz approved these changes Aug 25, 2023
View reviewed changes
Copy link
Contributor

@AndrewJakubowicz AndrewJakubowicz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

It might be nice to land the Preact example, then land this with the children added to the example, but not too fussed with order.

Great stuff!

@augustjk augustjk mentioned this pull request Aug 28, 2023
Merged
@augustjk augustjk force-pushed the labs-react-children-type branch from e3a7f34 to 5bfa53e Compare August 28, 2023 21:35
@augustjk
Copy link
Member Author

augustjk commented Aug 28, 2023

Rebased off of main with preact example merged, and addressed TODO that adds an element child to the wrapped component. Type test for it is passing. https://github.com/lit/lit/actions/runs/6005198623/job/16287421462?pr=4142#step:8:305

@augustjk augustjk merged commit 170e916 into main Aug 28, 2023
@augustjk augustjk deleted the labs-react-children-type branch August 28, 2023 21:55
@lit-robot lit-robot mentioned this pull request Aug 30, 2023
Merged
This was referenced Sep 12, 2023
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@AndrewJakubowicz AndrewJakubowicz AndrewJakubowicz approved these changes

@justinfagnani justinfagnani Awaiting requested review from justinfagnani

@kevinpschaaf kevinpschaaf Awaiting requested review from kevinpschaaf kevinpschaaf is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[labs/react] Typescript errors with react wrapped component in Vite Preact Typescript template

2 participants

@augustjk @AndrewJakubowicz