Support JSX.ElementType #3048

naari3 · 2023-06-04T06:50:07Z

What:

Support for JSX.ElementType that introduced in TypeScript 5.1

Why:

Until now, JSX type checking was provided by checking as JSX.Element.
From TypeScript 5.1 onward, by declaring JSX.ElementType, it will be possible to more flexibly check elements that can be handled on the jsx runtime side.

In React, this allows ReactNode to be used directly in the return value of function components. We would like to do the same for @emotion/react/jsx-runtime.

How:

In @types/react, JSX.ElementType has been declared since 18.2.8, and I have copied the definition from the 18.2.8. because I don't know how to handle the @types/react version in emotion.
If you don't mind updating @types/react, I can change it to use React.JSX.ElementType directly after updating!

Checklist:

Documentation
Tests
Code complete
Changeset

closes #3049

changeset-bot · 2023-06-04T06:50:10Z

🦋 Changeset detected

Latest commit: f3c4c64

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

This PR includes changesets to release 1 package

Name	Type
@emotion/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

codesandbox-ci · 2023-06-04T06:52:04Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f3c4c64:

Sandbox	Source
Emotion	Configuration
Emotion issue template	Issue #3049
Emotion issue template	Issue #3049

packages/react/types/jsx-namespace.d.ts

Andarist · 2023-06-04T22:33:07Z

packages/react/types/jsx-namespace.d.ts

@@ -18,7 +18,12 @@ type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
 type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
 type ReactJSXIntrinsicElements = JSX.IntrinsicElements

+// based on the code from @types/react@18.2.8
+// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
+type ReactJSXElementType = string | React.JSXElementConstructor<any>


Hm, likely we could do some hacks with @ts-ignore to "detect" if the type is there in React's JSX but perhaps it's not worth it and copy-paste is fine. I'll give this a thought.

yeah, I feel like copying it is probably the right approach tbh

naari3 · 2023-06-05T04:00:37Z

Hmm, why is this error happening here?

➤ YN0000: [@emotion/react]: Process started
➤ YN0000: [@emotion/react]: dtslint@0.0.112
➤ YN0000: [@emotion/react]: Error: /home/runner/work/emotion/emotion/packages/react/types/tests.tsx:259:3
➤ YN0000: [@emotion/react]: ERROR: 259:3  expect  TypeScript@4.7 compile error: 
➤ YN0000: [@emotion/react]: 'OtherComponent' cannot be used as a JSX component.
➤ YN0000: [@emotion/react]:   Its type '{ <Tag extends ElementType<any>>(props: AllHTMLAttributes<HTMLInputElement> | ComponentPropsWithRef<Tag>, ref: any): Element; displayName?: string | undefined; }' is not a valid JSX element type.
➤ YN0000: [@emotion/react]:     Type '{ <Tag extends ElementType<any>>(props: AllHTMLAttributes<HTMLInputElement> | ComponentPropsWithRef<Tag>, ref: any): Element; displayName?: string | undefined; }' is not assignable to type '(props: any) => ReactElement<any, any> | null'.
➤ YN0000: [@emotion/react]:       Target signature provides too few arguments. Expected 2 or more, but got 1.
➤ YN0000: [@emotion/react]: 
➤ YN0000: [@emotion/react]:     at testTypesVersion (/home/runner/work/emotion/emotion/node_modules/@definitelytyped/dtslint/dist/index.js:194:15)
➤ YN0000: [@emotion/react]:     at async runTests (/home/runner/work/emotion/emotion/node_modules/@definitelytyped/dtslint/dist/index.js:170:13)
➤ YN0000: [@emotion/react]:     at async main (/home/runner/work/emotion/emotion/node_modules/@definitelytyped/dtslint/dist/index.js:[79](https://github.com/emotion-js/emotion/actions/runs/5172904991/jobs/9317682961?pr=3048#step:4:80):9)
➤ YN0000: [@emotion/react]: Process exited (exit code 1), completed in 20s 272ms

naari3 · 2023-06-05T04:43:13Z

I don't know much about JS and TS, but it is hard to believe that this Pull Request change affects React.ElementType, so I thinking it was a @definitelytyped/dtslint issue and I updated to 0.0.115 and this error did not occur.
I don't know the details of why this problem no longer occurs with 0.0.115.

On the other hand, when I updated to the latest 0.0.163, I get the error everywhere. These seemed to be caused by existing type definitions that were now working fine.

naari3 · 2023-06-05T04:43:24Z

Sorry, I see that it has fallen unchanged in CI... On my local, the problem remains at 0.0.112 and remains resolved at 0.0.115.

Do you know anything about this?(why is this error occurring in the first place, Etc.)

Andarist · 2023-06-05T08:39:04Z

I think that this particular test case that is failing can be removed, this will revert~ Fix TypeScript support for custom components with non-standard declarations #2181 (cc @101arrowz) but that seems to be the correct thing to do. That PR was enabling something that isn't quite type-safe.
so why introducing the JSX.ElementType here is creating a problem in the first place? With ElementType in place the tagType is being checked against elementTypeConstraint to see if it's assignable to it, whereas previously only return types were compared by TS using checkJsxReturnAssignableToAppropriateBound (see source code here)
it happens so that we have @types/react@18.0.14 installed here and that defines type JSXElementConstructor<P> = ((props: P) => React.ReactElement<any, any> | null) | (new (props: P) => React.Component<any, any>) but the current @types/react@18.2.8 have a slightly different definition, see here.
We can update @types/react as part of this PR (it has no effect on our consumers anyway, locally it's just a dev dependency and we forward whatever definitions are installed in consuming projects), which would fix the caught issue. The point is that how @types/react got adjusted 2 weeks ago is a temporary~ thing (see the PR here) so the test that is failing right now can stop working at just any time in the future
we can double-check how those 2 JSXElementConstructor "perform" against this component in this TS playground. Why do I think that this definition isn't type-safe? This particular definition has a required second parameter in the signature of type any. This makes it somewhat OK since u forgo all the type safety with any anyway but if that would be unknown or just any other type then things could break badly. With JSX we are handing out functions to some runtime (in this case it's React) and that runtime is meant to call those functions on our behalf. But React can't call our functions with arbitrary extra arguments and yet our signatures might depend on them. In practice, this doesn't quite happen often and it's not a common problem but from the types PoV this is just wrong. It seems that TS has traditionally allowed this (see the playground here with the required string in the signature used as JSX element). The recent changes to JSX.ElementType will allow people to avoid such invalid combinations in the future (and already do it for cases with 3+ function parameters)

see also: emotion-js#3048 (comment)

naari3 · 2023-06-05T14:37:34Z

@Andarist Wow, I am very happy to see a fairly thorough explanation! Thank you very much!

I tried each of the things you taught me, but this time I just decided to delete the test case.

Once I updated @types/react, this dragged the test cases in packages/native to fail. Probably due to the relationship between @types/react and @types/react-native, but I thought it was too broad to do in this PR.

If the test in the emotion fails, I thought about changing the ElementType as you said, but since that was not the case, I think we should leave it as is for the time being.

Andarist

LGTM

naari3 · 2023-06-06T06:39:38Z

Thank you for your kind review, I'm so very happy! is there anything else I need to do to get this PR merged?

karlhorky · 2023-06-07T09:05:30Z

Thanks for the PR, review and merge @naari3, @Andarist, @emmatown ! 🙌

Looking forward to trying this out in @emotion/react@11.11.1 after #3051 gets merged!

Support JSX.ElementType

44da1d6

Andarist reviewed Jun 4, 2023

View reviewed changes

packages/react/types/jsx-namespace.d.ts Show resolved Hide resolved

Andarist reviewed Jun 4, 2023

View reviewed changes

Andarist mentioned this pull request Jun 4, 2023

Fix compat with @types/react@18.2.8 #3050

Closed

4 tasks

Reexport ElementType

1787ed7

naari3 force-pushed the main branch from 6cfc6d3 to 341facc Compare June 5, 2023 04:28

naari3 mentioned this pull request Jun 5, 2023

@types/react@18.2.8 + jsxImportSource: @emotion/react = Its return type 'ReactNode' is not a valid JSX element. #3049

Closed

Remove failing test case due to type safe concerns

c38b0e1

see also: emotion-js#3048 (comment)

naari3 force-pushed the main branch from 341facc to c38b0e1 Compare June 5, 2023 14:27

Create wicked-boxes-lick.md

f3c4c64

Andarist approved these changes Jun 5, 2023

View reviewed changes

Andarist merged commit 9357f33 into emotion-js:main Jun 7, 2023
13 checks passed

github-actions bot mentioned this pull request Jun 7, 2023

Version Packages #3051

Merged

scttcper mentioned this pull request Oct 30, 2023

deps(ui): Bump emotion packages getsentry/sentry#59061

Closed

itsdouges mentioned this pull request Jan 23, 2024

Fix r18 JSX namespace types atlassian-labs/compiled#1617

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support JSX.ElementType #3048

Support JSX.ElementType #3048

naari3 commented Jun 4, 2023 •

edited

changeset-bot bot commented Jun 4, 2023 •

edited

codesandbox-ci bot commented Jun 4, 2023 •

edited

Andarist Jun 4, 2023

emmatown Jun 5, 2023

naari3 commented Jun 5, 2023

naari3 commented Jun 5, 2023

naari3 commented Jun 5, 2023 •

edited

Andarist commented Jun 5, 2023

naari3 commented Jun 5, 2023

Andarist left a comment

naari3 commented Jun 6, 2023

karlhorky commented Jun 7, 2023

Support JSX.ElementType #3048

Support JSX.ElementType #3048

Conversation

naari3 commented Jun 4, 2023 • edited

changeset-bot bot commented Jun 4, 2023 • edited

🦋 Changeset detected

codesandbox-ci bot commented Jun 4, 2023 • edited

Andarist Jun 4, 2023

Choose a reason for hiding this comment

emmatown Jun 5, 2023

Choose a reason for hiding this comment

naari3 commented Jun 5, 2023

naari3 commented Jun 5, 2023

naari3 commented Jun 5, 2023 • edited

Andarist commented Jun 5, 2023

naari3 commented Jun 5, 2023

Andarist left a comment

Choose a reason for hiding this comment

naari3 commented Jun 6, 2023

karlhorky commented Jun 7, 2023

naari3 commented Jun 4, 2023 •

edited

changeset-bot bot commented Jun 4, 2023 •

edited

codesandbox-ci bot commented Jun 4, 2023 •

edited

naari3 commented Jun 5, 2023 •

edited