Skip to content

Commit d1994c4

Browse files
DiegoAndaiDiegoAndai
authored
Improved compatibility with the upcoming @types/react for React 19 (#3206)
1 parent 56109e7 commit d1994c4

File tree

14 files changed

+168
-41
lines changed

14 files changed

+168
-41
lines changed

‎.changeset/curly-houses-jump.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@emotion/styled': patch
3+
'@emotion/react': patch
4+
---
5+
6+
Improved compatibility with the upcoming `@types/react` for React 19 where the global `JSX` namespace doesn't exist anymore

‎.yarn/patches/@definitelytyped-dtslint-npm-0.0.112-1e6b842976.patch‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
diff --git a/dist/lint.js b/dist/lint.js
2+
index ae29f2a0936fe8e4dee9b4a607ed5c611872d30d..96746c55f2df24c6d09ee30ff85e404138ad0fbe 100644
3+
--- a/dist/lint.js
4+
+++ b/dist/lint.js
5+
@@ -107,9 +107,9 @@ function startsWithDirectory(filePath, dirPath) {
6+
return normalFilePath.startsWith(normalDirPath + "/") || normalFilePath.startsWith(normalDirPath + "\\");
7+
}
8+
function testNoTsIgnore(text) {
9+
- const tsIgnore = "ts-ignore";
10+
- const pos = text.indexOf(tsIgnore);
11+
- return pos === -1 ? undefined : { pos, message: "'ts-ignore' is forbidden." };
12+
+ // const tsIgnore = "ts-ignore";
13+
+ // const pos = text.indexOf(tsIgnore);
14+
+ // return pos === -1 ? undefined : { pos, message: "'ts-ignore' is forbidden." };
15+
}
16+
function testNoTslintDisables(text) {
17+
const tslintDisable = "tslint:disable";

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@
184184
"@testing-library/react": "13.0.0-alpha.5",
185185
"@types/jest": "^29.5.12",
186186
"@types/node": "^12.20.37",
187-
"@types/react": "^18.0.9",
187+
"@types/react": "18.2.6",
188188
"@typescript-eslint/eslint-plugin": "^7.13.0",
189189
"@typescript-eslint/parser": "^7.13.0",
190190
"babel-check-duplicated-nodes": "^1.0.0",
@@ -239,5 +239,8 @@
239239
"unified": "^6.1.6",
240240
"webpack-bundle-analyzer": "3.3.2"
241241
},
242-
"packageManager": "yarn@3.2.3"
242+
"packageManager": "yarn@3.2.3",
243+
"resolutions": {
244+
"@definitelytyped/dtslint@0.0.112": "patch:@definitelytyped/dtslint@npm%3A0.0.112#./.yarn/patches/@definitelytyped-dtslint-npm-0.0.112-1e6b842976.patch"
245+
}
243246
}

‎packages/native/types/tslint.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"no-null-undefined-union": false,
2121
"no-unnecessary-generics": false,
2222
"strict-export-declare-modifiers": false,
23-
"unnecessary-bind": false
23+
"unnecessary-bind": false,
24+
"ban-ts-ignore": false
2425
}
2526
}

‎packages/react/types/helper.d.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import * as React from 'react'
1+
import { ReactJSX } from './jsx-namespace'
22

33
/**
44
* @desc Utility type for getting props type of React component.
55
* It takes `defaultProps` into an account - making props with defaults optional.
66
*/
77
export type PropsOf<
8-
C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
9-
> = JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>
8+
C extends keyof ReactJSX.IntrinsicElements | React.JSXElementConstructor<any>
9+
> = ReactJSX.LibraryManagedAttributes<C, React.ComponentProps<C>>
1010

1111
// We need to use this version of Omit as it's distributive (Will preserve unions)
1212
export type DistributiveOmit<T, U> = T extends any

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

Lines changed: 69 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,81 @@ import 'react'
22
import { Interpolation } from '@emotion/serialize'
33
import { Theme } from '@emotion/react'
44

5+
type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
6+
? true
7+
: false
8+
59
type WithConditionalCSSProp<P> = 'className' extends keyof P
610
? string extends P['className' & keyof P]
711
? { css?: Interpolation<Theme> }
812
: {}
913
: {}
1014

11-
// unpack all here to avoid infinite self-referencing when defining our own JSX namespace
12-
type ReactJSXElement = JSX.Element
13-
type ReactJSXElementClass = JSX.ElementClass
14-
type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty
15-
type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute
16-
type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>
17-
type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
18-
type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
19-
type ReactJSXIntrinsicElements = JSX.IntrinsicElements
20-
21-
// based on the code from @types/react@18.2.8
22-
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
23-
type ReactJSXElementType = string | React.JSXElementConstructor<any>
15+
// unpack all here to avoid infinite self-referencing when defining our own JSX namespace for the pre-React 19 case
16+
type ReactJSXElement = true extends IsPreReact19
17+
? /** @ts-ignore */
18+
JSX.Element
19+
: /** @ts-ignore */
20+
React.JSX.Element
21+
type ReactJSXElementClass = true extends IsPreReact19
22+
? /** @ts-ignore */
23+
JSX.ElementClass
24+
: /** @ts-ignore */
25+
React.JSX.ElementClass
26+
type ReactJSXElementAttributesProperty = true extends IsPreReact19
27+
? /** @ts-ignore */
28+
JSX.ElementAttributesProperty
29+
: /** @ts-ignore */
30+
React.JSX.ElementAttributesProperty
31+
type ReactJSXElementChildrenAttribute = true extends IsPreReact19
32+
? /** @ts-ignore */
33+
JSX.ElementChildrenAttribute
34+
: /** @ts-ignore */
35+
React.JSX.ElementChildrenAttribute
36+
type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19
37+
? /** @ts-ignore */
38+
JSX.LibraryManagedAttributes<C, P>
39+
: /** @ts-ignore */
40+
React.JSX.LibraryManagedAttributes<C, P>
41+
type ReactJSXIntrinsicAttributes = true extends IsPreReact19
42+
? /** @ts-ignore */
43+
JSX.IntrinsicAttributes
44+
: /** @ts-ignore */
45+
React.JSX.IntrinsicAttributes
46+
type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19
47+
? /** @ts-ignore */
48+
JSX.IntrinsicClassAttributes<T>
49+
: /** @ts-ignore */
50+
React.JSX.IntrinsicClassAttributes<T>
51+
type ReactJSXIntrinsicElements = true extends IsPreReact19
52+
? /** @ts-ignore */
53+
JSX.IntrinsicElements
54+
: /** @ts-ignore */
55+
React.JSX.IntrinsicElements
56+
57+
type ReactJSXElementType = true extends IsPreReact19
58+
? // based on the code from @types/react@18.2.8
59+
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
60+
string | React.JSXElementConstructor<any>
61+
: /** @ts-ignore */
62+
React.JSX.ElementType
63+
64+
export namespace ReactJSX {
65+
type ElementType = ReactJSXElementType
66+
interface Element extends ReactJSXElement {}
67+
interface ElementClass extends ReactJSXElementClass {}
68+
interface ElementAttributesProperty
69+
extends ReactJSXElementAttributesProperty {}
70+
interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
71+
72+
type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<C, P>
73+
74+
interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
75+
interface IntrinsicClassAttributes<T>
76+
extends ReactJSXIntrinsicClassAttributes<T> {}
77+
78+
type IntrinsicElements = ReactJSXIntrinsicElements
79+
}
2480

2581
export namespace EmotionJSX {
2682
type ElementType = ReactJSXElementType

‎packages/react/types/tslint.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"no-unnecessary-generics": false,
2424
"no-empty-interface": false,
2525
"strict-export-declare-modifiers": false,
26-
"unnecessary-bind": false
26+
"unnecessary-bind": false,
27+
"ban-ts-ignore": false
2728
}
2829
}

‎packages/styled/types/base.d.ts‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import * as React from 'react'
55
import { ComponentSelector, Interpolation } from '@emotion/serialize'
66
import { PropsOf, Theme } from '@emotion/react'
7+
import { ReactJSXIntrinsicElements } from './jsx-namespace'
78

89
export {
910
ArrayInterpolation,
@@ -49,9 +50,9 @@ export interface StyledComponent<
4950
withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
5051
component: C
5152
): StyledComponent<ComponentProps & PropsOf<C>>
52-
withComponent<Tag extends keyof JSX.IntrinsicElements>(
53+
withComponent<Tag extends keyof ReactJSXIntrinsicElements>(
5354
tag: Tag
54-
): StyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]>
55+
): StyledComponent<ComponentProps, ReactJSXIntrinsicElements[Tag]>
5556
}
5657

5758
/**
@@ -169,23 +170,26 @@ export interface CreateStyled {
169170
>
170171

171172
<
172-
Tag extends keyof JSX.IntrinsicElements,
173-
ForwardedProps extends keyof JSX.IntrinsicElements[Tag] &
174-
string = keyof JSX.IntrinsicElements[Tag] & string
173+
Tag extends keyof ReactJSXIntrinsicElements,
174+
ForwardedProps extends keyof ReactJSXIntrinsicElements[Tag] &
175+
string = keyof ReactJSXIntrinsicElements[Tag] & string
175176
>(
176177
tag: Tag,
177-
options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>
178+
options: FilteringStyledOptions<
179+
ReactJSXIntrinsicElements[Tag],
180+
ForwardedProps
181+
>
178182
): CreateStyledComponent<
179183
{ theme?: Theme; as?: React.ElementType },
180-
Pick<JSX.IntrinsicElements[Tag], ForwardedProps>
184+
Pick<ReactJSXIntrinsicElements[Tag], ForwardedProps>
181185
>
182186

183-
<Tag extends keyof JSX.IntrinsicElements>(
187+
<Tag extends keyof ReactJSXIntrinsicElements>(
184188
tag: Tag,
185-
options?: StyledOptions<JSX.IntrinsicElements[Tag]>
189+
options?: StyledOptions<ReactJSXIntrinsicElements[Tag]>
186190
): CreateStyledComponent<
187191
{ theme?: Theme; as?: React.ElementType },
188-
JSX.IntrinsicElements[Tag]
192+
ReactJSXIntrinsicElements[Tag]
189193
>
190194
}
191195

‎packages/styled/types/index.d.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
import { Theme } from '@emotion/react'
55
import { CreateStyled as BaseCreateStyled, CreateStyledComponent } from './base'
6+
import { ReactJSXIntrinsicElements } from './jsx-namespace'
67

78
export {
89
ArrayInterpolation,
@@ -17,12 +18,12 @@ export {
1718
} from './base'
1819

1920
export type StyledTags = {
20-
[Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<
21+
[Tag in keyof ReactJSXIntrinsicElements]: CreateStyledComponent<
2122
{
2223
theme?: Theme
2324
as?: React.ElementType
2425
},
25-
JSX.IntrinsicElements[Tag]
26+
ReactJSXIntrinsicElements[Tag]
2627
>
2728
}
2829

‎packages/styled/types/jsx-namespace.d.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// this is basically a slimmed down copy of https://github.com/emotion-js/emotion/blob/main/packages/react/types/jsx-namespace.d.ts
2+
// it helps to avoid issues when combining newer `@emotion/styled` and older `@emotion/react` versions
3+
// in such setup, ReactJSX namespace won't exist in `@emotion/react` and that would lead to errors
4+
import 'react'
5+
6+
type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
7+
? true
8+
: false
9+
10+
export type ReactJSXIntrinsicElements = true extends IsPreReact19
11+
? /** @ts-ignore */
12+
JSX.IntrinsicElements
13+
: /** @ts-ignore */
14+
React.JSX.IntrinsicElements

0 commit comments

Comments
 (0)