Skip to content

Commit db8f227

Browse files
committed
Update react-is implementation
- `react-is` has changed the `REACT_ELEMENT_TYPE` symbol from `'react.element'` to `'react.transitional.element'`. We want our changes to be non-breaking and backwards-compatible so we conditionally set the `REACT_ELEMENT_TYPE` based on the detected version of React.
1 parent cc26e52 commit db8f227

File tree

1 file changed

+51
-67
lines changed

1 file changed

+51
-67
lines changed

src/utils/react-is.ts

Lines changed: 51 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,95 @@
11
import type { ElementType, MemoExoticComponent, ReactElement } from 'react'
2+
import * as React from 'react'
23

34
// Directly ported from:
4-
// https://unpkg.com/browse/react-is@18.3.0-canary-ee68446ff-20231115/cjs/react-is.production.js
5+
// https://unpkg.com/browse/react-is@19.0.0/cjs/react-is.production.js
56
// It's very possible this could change in the future, but given that
67
// we only use these in `connect`, this is a low priority.
78

8-
const REACT_ELEMENT_TYPE = Symbol.for('react.element')
9-
const REACT_PORTAL_TYPE = Symbol.for('react.portal')
10-
const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment')
11-
const REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode')
12-
const REACT_PROFILER_TYPE = Symbol.for('react.profiler')
13-
const REACT_PROVIDER_TYPE = Symbol.for('react.provider')
14-
const REACT_CONTEXT_TYPE = Symbol.for('react.context')
15-
const REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context')
16-
const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref')
17-
const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense')
18-
const REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list')
19-
const REACT_MEMO_TYPE = Symbol.for('react.memo')
20-
const REACT_LAZY_TYPE = Symbol.for('react.lazy')
21-
const REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen')
22-
const REACT_CLIENT_REFERENCE = Symbol.for('react.client.reference')
9+
export const IS_REACT_19 = /* @__PURE__ */ React.version.startsWith('19')
10+
11+
const REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for(
12+
IS_REACT_19 ? 'react.transitional.element' : 'react.element',
13+
)
14+
const REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for('react.portal')
15+
const REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for('react.fragment')
16+
const REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for('react.strict_mode')
17+
const REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for('react.profiler')
18+
const REACT_CONSUMER_TYPE = /* @__PURE__ */ Symbol.for('react.consumer')
19+
const REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for('react.context')
20+
const REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for('react.forward_ref')
21+
const REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for('react.suspense')
22+
const REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for(
23+
'react.suspense_list',
24+
)
25+
const REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for('react.memo')
26+
const REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for('react.lazy')
27+
const REACT_OFFSCREEN_TYPE = /* @__PURE__ */ Symbol.for('react.offscreen')
28+
const REACT_CLIENT_REFERENCE = /* @__PURE__ */ Symbol.for(
29+
'react.client.reference',
30+
)
2331

2432
export const ForwardRef = REACT_FORWARD_REF_TYPE
2533
export const Memo = REACT_MEMO_TYPE
2634

2735
export function isValidElementType(type: any): type is ElementType {
28-
if (typeof type === 'string' || typeof type === 'function') {
29-
return true
30-
} // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
31-
32-
if (
36+
return typeof type === 'string' ||
37+
typeof type === 'function' ||
3338
type === REACT_FRAGMENT_TYPE ||
3439
type === REACT_PROFILER_TYPE ||
3540
type === REACT_STRICT_MODE_TYPE ||
3641
type === REACT_SUSPENSE_TYPE ||
3742
type === REACT_SUSPENSE_LIST_TYPE ||
38-
type === REACT_OFFSCREEN_TYPE
39-
) {
40-
return true
41-
}
42-
43-
if (typeof type === 'object' && type !== null) {
44-
if (
45-
type.$$typeof === REACT_LAZY_TYPE ||
46-
type.$$typeof === REACT_MEMO_TYPE ||
47-
type.$$typeof === REACT_PROVIDER_TYPE ||
48-
type.$$typeof === REACT_CONTEXT_TYPE ||
49-
type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
50-
// types supported by any Flight configuration anywhere since
51-
// we don't know which Flight build this will end up being used
52-
// with.
53-
type.$$typeof === REACT_CLIENT_REFERENCE ||
54-
type.getModuleId !== undefined
55-
) {
56-
return true
57-
}
58-
}
59-
60-
return false
43+
type === REACT_OFFSCREEN_TYPE ||
44+
(typeof type === 'object' &&
45+
type !== null &&
46+
(type.$$typeof === REACT_LAZY_TYPE ||
47+
type.$$typeof === REACT_MEMO_TYPE ||
48+
type.$$typeof === REACT_CONTEXT_TYPE ||
49+
type.$$typeof === REACT_CONSUMER_TYPE ||
50+
type.$$typeof === REACT_FORWARD_REF_TYPE ||
51+
type.$$typeof === REACT_CLIENT_REFERENCE ||
52+
type.getModuleId !== undefined))
53+
? !0
54+
: !1
6155
}
6256

6357
function typeOf(object: any): symbol | undefined {
6458
if (typeof object === 'object' && object !== null) {
65-
const $$typeof = object.$$typeof
59+
const { $$typeof } = object
6660

6761
switch ($$typeof) {
68-
case REACT_ELEMENT_TYPE: {
69-
const type = object.type
70-
71-
switch (type) {
62+
case REACT_ELEMENT_TYPE:
63+
switch (((object = object.type), object)) {
7264
case REACT_FRAGMENT_TYPE:
7365
case REACT_PROFILER_TYPE:
7466
case REACT_STRICT_MODE_TYPE:
7567
case REACT_SUSPENSE_TYPE:
7668
case REACT_SUSPENSE_LIST_TYPE:
77-
return type
78-
79-
default: {
80-
const $$typeofType = type && type.$$typeof
81-
82-
switch ($$typeofType) {
83-
case REACT_SERVER_CONTEXT_TYPE:
69+
return object
70+
default:
71+
switch (((object = object && object.$$typeof), object)) {
8472
case REACT_CONTEXT_TYPE:
8573
case REACT_FORWARD_REF_TYPE:
8674
case REACT_LAZY_TYPE:
8775
case REACT_MEMO_TYPE:
88-
case REACT_PROVIDER_TYPE:
89-
return $$typeofType
90-
76+
return object
77+
case REACT_CONSUMER_TYPE:
78+
return object
9179
default:
9280
return $$typeof
9381
}
94-
}
9582
}
96-
}
97-
98-
case REACT_PORTAL_TYPE: {
83+
case REACT_PORTAL_TYPE:
9984
return $$typeof
100-
}
10185
}
10286
}
103-
104-
return undefined
10587
}
10688

10789
export function isContextConsumer(object: any): object is ReactElement {
108-
return typeOf(object) === REACT_CONTEXT_TYPE
90+
return IS_REACT_19
91+
? typeOf(object) === REACT_CONSUMER_TYPE
92+
: typeOf(object) === REACT_CONTEXT_TYPE
10993
}
11094

11195
export function isMemo(object: any): object is MemoExoticComponent<any> {

0 commit comments

Comments
 (0)