[labs/react] Remove custom children type and include our own copy of `PropsWithoutRef` for usage with `preact/compat` #4172

augustjk · 2023-09-01T19:13:54Z

Instead of trying to figure out React-Preact compatible types ourselves like the franken-child type, it would be better for us to defer to preact/compat typings that provide their versions of React types.

Due to preactjs/preact#4124, we need to use our own copy of PropsWithoutRef type for proper type checking to occur with preact/compat.

This will also ensure we don't mix React and Preact types for users of TS >= 5.1 where the types become further incompatible.

Tested with our examples/preact project configured now to use preact/compat. I have also tested this after manually updating the typescript dependency version for the example project.

…Ref`

changeset-bot · 2023-09-01T19:13:57Z

🦋 Changeset detected

Latest commit: 2e6f5e7

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-09-01T19:14:11Z

📊 Tachometer Benchmark Results

Summary

nop-update

this-change, tip-of-tree, previous-release: unsure 🔍 -6% - +9% (-1.05ms - +1.73ms)
^{this-change vs tip-of-tree}

render

this-change: 69.22ms - 73.14ms
this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +6% (-0.80ms - +1.46ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -2% - +0% (-1.18ms - +0.23ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -4% - +0% (-1.57ms - +0.02ms)
^{this-change vs tip-of-tree}

update

this-change: 667.09ms - 681.11ms
this-change, tip-of-tree, previous-release: unsure 🔍 -4% - +5% (-2.80ms - +3.25ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +1% (-2.70ms - +1.08ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +0% (-7.30ms - +1.86ms)
^{this-change vs tip-of-tree}

update-reflect

this-change: 640.68ms - 649.78ms
this-change, tip-of-tree, previous-release: unsure 🔍 -0% - +1% (-1.94ms - +5.25ms)
^{this-change vs tip-of-tree}

Results

this-change

Browser: chrome-headless 116.0.5845.140
Sample size: 50
Built by: Benchmarks #5476
Commit: 2e6f5e7

render

Version	Avg time	vs
	69.22ms - 73.14ms	-

update

Version	Avg time	vs
	667.09ms - 681.11ms	-

update-reflect

Version	Avg time	vs
	640.68ms - 649.78ms	-

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

Browser: chrome-headless 116.0.5845.140
Sample size: 30
Built by: Benchmarks #5476
Commit: 2e6f5e7

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	25.93ms - 27.55ms	-	unsure 🔍 -3% - +6% -0.80ms - +1.46ms	unsure 🔍 -4% - +4% -1.20ms - +1.10ms
tip-of-tree tip-of-tree	25.62ms - 27.19ms	unsure 🔍 -5% - +3% -1.46ms - +0.80ms	-	unsure 🔍 -6% - +3% -1.52ms - +0.74ms
previous-release previous-release	25.98ms - 27.61ms	unsure 🔍 -4% - +5% -1.10ms - +1.20ms	unsure 🔍 -3% - +6% -0.74ms - +1.52ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	68.87ms - 73.20ms	-	unsure 🔍 -4% - +5% -2.80ms - +3.25ms	unsure 🔍 -3% - +5% -1.86ms - +3.66ms
tip-of-tree tip-of-tree	68.70ms - 72.93ms	unsure 🔍 -5% - +4% -3.25ms - +2.80ms	-	unsure 🔍 -3% - +5% -2.04ms - +3.40ms
previous-release previous-release	68.43ms - 71.85ms	unsure 🔍 -5% - +3% -3.66ms - +1.86ms	unsure 🔍 -5% - +3% -3.40ms - +2.04ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	18.61ms - 20.59ms	-	unsure 🔍 -6% - +9% -1.05ms - +1.73ms	unsure 🔍 -6% - +9% -1.15ms - +1.68ms
tip-of-tree tip-of-tree	18.28ms - 20.23ms	unsure 🔍 -9% - +5% -1.73ms - +1.05ms	-	unsure 🔍 -8% - +7% -1.48ms - +1.32ms
previous-release previous-release	18.33ms - 20.34ms	unsure 🔍 -9% - +6% -1.68ms - +1.15ms	unsure 🔍 -7% - +8% -1.32ms - +1.48ms	-

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

Browser: chrome-headless 116.0.5845.140
Sample size: 50
Built by: Benchmarks #5476
Commit: 2e6f5e7

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	46.83ms - 47.78ms	-	unsure 🔍 -2% - +0% -1.18ms - +0.23ms	unsure 🔍 -3% - +0% -1.44ms - +0.03ms
tip-of-tree tip-of-tree	47.26ms - 48.30ms	unsure 🔍 -0% - +3% -0.23ms - +1.18ms	-	unsure 🔍 -2% - +1% -1.00ms - +0.54ms
previous-release previous-release	47.44ms - 48.57ms	unsure 🔍 -0% - +3% -0.03ms - +1.44ms	unsure 🔍 -1% - +2% -0.54ms - +1.00ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	98.05ms - 100.24ms	-	unsure 🔍 -3% - +1% -2.70ms - +1.08ms	unsure 🔍 -3% - +1% -2.98ms - +0.84ms
tip-of-tree tip-of-tree	98.41ms - 101.50ms	unsure 🔍 -1% - +3% -1.08ms - +2.70ms	-	unsure 🔍 -2% - +2% -2.47ms - +1.94ms
previous-release previous-release	98.65ms - 101.79ms	unsure 🔍 -1% - +3% -0.84ms - +2.98ms	unsure 🔍 -2% - +2% -1.94ms - +2.47ms	-

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

Browser: chrome-headless 116.0.5845.140
Sample size: 50
Built by: Benchmarks #5476
Commit: 2e6f5e7

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	42.02ms - 43.11ms	-	unsure 🔍 -4% - +0% -1.57ms - +0.02ms	unsure 🔍 -2% - +2% -0.75ms - +0.71ms
tip-of-tree tip-of-tree	42.75ms - 43.92ms	unsure 🔍 -0% - +4% -0.02ms - +1.57ms	-	unsure 🔍 -0% - +4% -0.01ms - +1.52ms
previous-release previous-release	42.09ms - 43.07ms	unsure 🔍 -2% - +2% -0.71ms - +0.75ms	unsure 🔍 -3% - -0% -1.52ms - +0.01ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	650.19ms - 657.13ms	-	unsure 🔍 -1% - +0% -7.30ms - +1.86ms	unsure 🔍 -1% - +1% -5.02ms - +3.99ms
tip-of-tree tip-of-tree	653.39ms - 659.37ms	unsure 🔍 -0% - +1% -1.86ms - +7.30ms	-	unsure 🔍 -0% - +1% -1.94ms - +6.35ms
previous-release previous-release	651.30ms - 657.05ms	unsure 🔍 -1% - +1% -3.99ms - +5.02ms	unsure 🔍 -1% - +0% -6.35ms - +1.94ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	661.99ms - 666.83ms	-	unsure 🔍 -0% - +1% -1.94ms - +5.25ms	unsure 🔍 -0% - +1% -2.52ms - +4.36ms
tip-of-tree tip-of-tree	660.09ms - 665.41ms	unsure 🔍 -1% - +0% -5.25ms - +1.94ms	-	unsure 🔍 -1% - +0% -4.35ms - +2.87ms
previous-release previous-release	661.05ms - 665.93ms	unsure 🔍 -1% - +0% -4.36ms - +2.52ms	unsure 🔍 -0% - +1% -2.87ms - +4.35ms	-

_{tachometer-reporter-action v2 for Benchmarks}

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

AndrewJakubowicz

Fantastic investigating and solution!

AndrewJakubowicz

Nice!

packages/labs/react/package.json

justinfagnani

LGTM, with a question on if the new file needs to be in the rollup config entrypoints.

We're not publishing in exports, so it doesn't matter that much, but we are putting the file in the top-level, so someone not using package exports could import this file.

justinfagnani · 2023-09-05T20:51:17Z

packages/labs/react/rollup.config.js

+    'index',
+    'create-component',
+    'use-controller',
+    'props-without-ref',


Should this be listed as an entrypoint?

+1. We should keep exports and entrypoints in sync.

I reverted entrypoints so it doesn't contain the new file "props-without-ref"

Remove the new file from entrypoint

augustjk · 2023-09-06T06:34:16Z

LGTM, with a question on if the new file needs to be in the rollup config entrypoints.

We're not publishing in exports, so it doesn't matter that much, but we are putting the file in the top-level, so someone not using package exports could import this file.

It's included as rollup config to generate the js and js.map files but it is type only. I wasn't sure if the type import would resolve with just the d.ts file present. It's an empty file so i think it's no harm to have it emit and included in the package without any package export mapping.

justinfagnani · 2023-09-06T17:15:26Z

It's included as rollup config to generate the js and js.map files but it is type only.

Ah. In that case I'd like to use import type to note that it will elide the import completely, and then skip the .js files. But...

Can we just inline the type into create-component.ts? We can still indicate that we copied it from DefinitelyTyped with a link to the file. It's only ~60 chars or so.

AndrewJakubowicz · 2023-09-06T22:38:25Z

Can we just inline the type into create-component.ts?

This is my fault since I asked to keep the license with the copied source code. By copying the code & license into a separate file it's easier to delete in the future when the type is included in preact's compatibility types.

+1 to import type

justinfagnani · 2023-09-07T16:01:31Z

Since it's a one-liner, can we just inline something?

Here's a version that's not a copy that distributes Omit:

type DistributiveOmit<T, K extends string | number | symbol> = T extends any ? Omit<T, K> : T;

// usage
export type OmitRef<T> = DistributiveOmit<T, 'ref'>;

The only difference is that in editors if you hover over the type you'll always see the OmitRef<..., 'ref'> even if the original type didn't have ref in it. I don't think this is bad, considering the only place we use the type is in a complex type anyway.

This was tested by updating example/preact to 5.2 and ensuring it builds correctly with `build:ts`.

AndrewJakubowicz · 2023-09-11T18:51:16Z

Applied code review feedback. @justinfagnani, I needed to tweak the type slightly more to get the generic distributive omit to type check.

Test plan

I manually tested this change against examples/preact with TypeScript 5.2 and the error no longer occurs.
Requesting re-review from @justinfagnani or @rictic .

justinfagnani

thanks!

augustjk added 3 commits September 1, 2023 11:51

Remove custom children type and include our own copy of `PropsWithout…

d5b7b16

…Ref`

Update examples/preact to use preact/compat and check for invalid prop

29a73b8

Add changeset

2660b99

augustjk requested review from AndrewJakubowicz and justinfagnani September 1, 2023 19:13

augustjk requested a review from kevinpschaaf as a code owner September 1, 2023 19:13

AndrewJakubowicz reviewed Sep 1, 2023

View reviewed changes

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

AndrewJakubowicz reviewed Sep 1, 2023

View reviewed changes

Split out PropsWithoutRef and add license

fa3e86d

augustjk requested a review from AndrewJakubowicz September 1, 2023 20:09

AndrewJakubowicz approved these changes Sep 1, 2023

View reviewed changes

packages/labs/react/package.json Show resolved Hide resolved

justinfagnani approved these changes Sep 5, 2023

View reviewed changes

Code review feedback

8b97794

Remove the new file from entrypoint

code review feedback

2e6f5e7

This was tested by updating example/preact to 5.2 and ensuring it builds correctly with `build:ts`.

AndrewJakubowicz requested review from justinfagnani and rictic September 11, 2023 20:35

AndrewJakubowicz self-assigned this Sep 11, 2023

justinfagnani approved these changes Sep 11, 2023

View reviewed changes

AndrewJakubowicz merged commit dc1d323 into main Sep 11, 2023

AndrewJakubowicz deleted the labs-react-preact-compat branch September 11, 2023 21:35

This was referenced Sep 12, 2023

Version Packages #4189

Closed

Version Packages #4192

Merged

ajmchambers mentioned this pull request Sep 14, 2023

updated @lit-labs/react for improved types with preact shoelace-style/shoelace#1565

Merged

augustjk mentioned this pull request Sep 26, 2023

Graduate react #4224

Merged

[labs/react] Remove custom children type and include our own copy of PropsWithoutRef for usage with preact/compat #4172

[labs/react] Remove custom children type and include our own copy of PropsWithoutRef for usage with preact/compat #4172

Uh oh!

Conversation

augustjk commented Sep 1, 2023

Uh oh!

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

AndrewJakubowicz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

justinfagnani left a comment

Choose a reason for hiding this comment

Uh oh!

justinfagnani Sep 5, 2023

Choose a reason for hiding this comment

Uh oh!

rictic Sep 5, 2023

Choose a reason for hiding this comment

Uh oh!

AndrewJakubowicz Sep 5, 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!

augustjk commented Sep 6, 2023

Uh oh!

justinfagnani commented Sep 6, 2023

Uh oh!

AndrewJakubowicz commented Sep 6, 2023

Uh oh!

justinfagnani commented Sep 7, 2023

Uh oh!

AndrewJakubowicz commented Sep 11, 2023

Test plan

Uh oh!

justinfagnani left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[labs/react] Remove custom children type and include our own copy of `PropsWithoutRef` for usage with `preact/compat` #4172

[labs/react] Remove custom children type and include our own copy of `PropsWithoutRef` for usage with `preact/compat` #4172

changeset-bot bot commented Sep 1, 2023 •

edited

Loading

github-actions bot commented Sep 1, 2023 •

edited

Loading

AndrewJakubowicz Sep 5, 2023 •

edited

Loading