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": "[email protected]"
242+
"packageManager": "[email protected]",
243+
"resolutions": {
244+
"@definitelytyped/[email protected]": "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/[email protected]
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/[email protected]
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

‎packages/styled/types/tests.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const Container3 = styled.div(({ theme }) => ({
6363
const Box = styled('div', {
6464
shouldForwardProp: (
6565
propName
66-
): propName is Exclude<keyof JSX.IntrinsicElements['div'], 'color'> =>
66+
): propName is Exclude<keyof React.JSX.IntrinsicElements['div'], 'color'> =>
6767
propName !== 'color'
6868
})<{ color: Array<string> }>(props => ({
6969
color: props.color[0]

‎packages/styled/types/tslint.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
"check-preblock"
1818
],
1919
"no-unnecessary-generics": false,
20-
"unnecessary-bind": false
20+
"unnecessary-bind": false,
21+
"ban-ts-ignore": false,
22+
"no-empty-interface": false,
23+
"strict-export-declare-modifiers": false
2124
}
2225
}

‎site/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@types/js-yaml": "^4.0.5",
2020
"@types/node": "^12.20.37",
2121
"@types/prismjs": "^1.26.0",
22-
"@types/react": "^18.0.9",
22+
"@types/react": "18.2.6",
2323
"@types/remark-prism": "^1.3.3",
2424
"facepaint": "^1.2.1",
2525
"gray-matter": "^4.0.3",

‎yarn.lock

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2580,6 +2580,27 @@ __metadata:
25802580
languageName: node
25812581
linkType: hard
25822582

2583+
"@definitelytyped/dtslint@patch:@definitelytyped/dtslint@npm%3A0.0.112#./.yarn/patches/@definitelytyped-dtslint-npm-0.0.112-1e6b842976.patch::locator=emotion-monorepo%40workspace%3A.":
2584+
version: 0.0.112
2585+
resolution: "@definitelytyped/dtslint@patch:@definitelytyped/dtslint@npm%3A0.0.112#./.yarn/patches/@definitelytyped-dtslint-npm-0.0.112-1e6b842976.patch::version=0.0.112&hash=753776&locator=emotion-monorepo%40workspace%3A."
2586+
dependencies:
2587+
"@definitelytyped/dts-critic": ^0.0.112
2588+
"@definitelytyped/header-parser": ^0.0.112
2589+
"@definitelytyped/typescript-versions": ^0.0.112
2590+
"@definitelytyped/utils": ^0.0.112
2591+
fs-extra: ^6.0.1
2592+
json-stable-stringify: ^1.0.1
2593+
strip-json-comments: ^2.0.1
2594+
tslint: 5.14.0
2595+
yargs: ^15.1.0
2596+
peerDependencies:
2597+
typescript: ">= 3.0.0-dev || >= 3.1.0-dev || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.7.0-dev || >= 3.8.0-dev || >= 3.9.0-dev || >= 4.0.0-dev"
2598+
bin:
2599+
dtslint: dist/index.js
2600+
checksum: 531e55134c34b4be44bd5aedb193b5dd99c098a374d1725e53bfc567a6bad8da6d314a7446f1480b2502afc6ed579555b4a8b31c40513f68dc7e679b51784c5f
2601+
languageName: node
2602+
linkType: hard
2603+
25832604
"@definitelytyped/header-parser@npm:^0.0.112":
25842605
version: 0.0.112
25852606
resolution: "@definitelytyped/header-parser@npm:0.0.112"
@@ -6354,14 +6375,14 @@ __metadata:
63546375
languageName: node
63556376
linkType: hard
63566377

6357-
"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.0.9":
6358-
version: 18.0.14
6359-
resolution: "@types/react@npm:18.0.14"
6378+
"@types/react@npm:*, @types/react@npm:18.2.6, @types/react@npm:>=16":
6379+
version: 18.2.6
6380+
resolution: "@types/react@npm:18.2.6"
63606381
dependencies:
63616382
"@types/prop-types": "*"
63626383
"@types/scheduler": "*"
63636384
csstype: ^3.0.2
6364-
checksum: 608eb57a383eedc54c79949673e5e8314f6b0c61542bff58721c8c47a18c23e2832e77c656050c2c2c004b62cf25582136c7c56fe1b6263a285c065fae31dbcf
6385+
checksum: dea9d232d8df7ac357367a69dcb557711ab3d5501807ffa77cebeee73d49ee94d095f298e36853c63ed47cce097eee4c7eae2aaa8c02fac3f0171ec1b523a819
63656386
languageName: node
63666387
linkType: hard
63676388

@@ -12617,7 +12638,7 @@ __metadata:
1261712638
"@testing-library/react": 13.0.0-alpha.5
1261812639
"@types/jest": ^29.5.12
1261912640
"@types/node": ^12.20.37
12620-
"@types/react": ^18.0.9
12641+
"@types/react": 18.2.6
1262112642
"@typescript-eslint/eslint-plugin": ^7.13.0
1262212643
"@typescript-eslint/parser": ^7.13.0
1262312644
babel-check-duplicated-nodes: ^1.0.0
@@ -12689,7 +12710,7 @@ __metadata:
1268912710
"@types/js-yaml": ^4.0.5
1269012711
"@types/node": ^12.20.37
1269112712
"@types/prismjs": ^1.26.0
12692-
"@types/react": ^18.0.9
12713+
"@types/react": 18.2.6
1269312714
"@types/remark-prism": ^1.3.3
1269412715
facepaint: ^1.2.1
1269512716
gray-matter: ^4.0.3

0 commit comments

Comments
 (0)