Skip to content

Commit ad2d0d7

Browse files
committed
Move experimental APIs to stable for React 18
See facebook/react#21488.
1 parent 8a92a62 commit ad2d0d7

File tree

9 files changed

+186
-7
lines changed

9 files changed

+186
-7
lines changed

types/react-is/index.d.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
1-
// Type definitions for react-is 17.0
1+
// Type definitions for react-is 18.0
22
// Project: https://reactjs.org/
33
// Definitions by: Avi Vahl <https://github.com/AviVahl>
44
// Christian Chown <https://github.com/christianchown>
55
// Sebastian Silbermann <https://github.com/eps1lon>
66
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
77
// TypeScript Version: 2.8
88

9-
// NOTE: Users of the React 18 alpha should add a reference
10-
// to 'react-is/next' in their project. See next.d.ts's top comment
11-
// for reference and documentation on how exactly to do it.
12-
139
export as namespace ReactIs;
1410

1511
import {
@@ -33,6 +29,7 @@ export function isProfiler(value: any): value is ReactElement;
3329
export function isPortal(value: any): value is ReactElement;
3430
export function isStrictMode(value: any): value is ReactElement;
3531
export function isSuspense(value: any): value is ReactElement;
32+
export function isSuspenseList(value: any): value is ReactElement;
3633

3734
export const AsyncMode: symbol;
3835
export const ContextConsumer: symbol;
@@ -46,3 +43,4 @@ export const Portal: symbol;
4643
export const Profiler: symbol;
4744
export const StrictMode: symbol;
4845
export const Suspense: symbol;
46+
export const SuspenseList: symbol;

types/react-is/test/react-is-tests.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -96,3 +96,7 @@ ReactIs.typeOf(MemoComponent) === ReactIs.Memo; // true
9696
// Suspense
9797
ReactIs.isForwardRef(<React.Suspense fallback={<FunctionComponent />} />); // true
9898
ReactIs.typeOf(<React.Suspense fallback={<FunctionComponent />} />) === ReactIs.Suspense; // true
99+
100+
// SuspenseList
101+
ReactIs.isSuspenseList(<React.SuspenseList children={<div />} />); // true
102+
ReactIs.typeOf(<React.SuspenseList children={<div />} />) === ReactIs.SuspenseList; // true

types/react-is/tsconfig.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
},
2121
"files": [
2222
"index.d.ts",
23-
"test/react-is-tests.tsx",
24-
"test/next-tests.tsx"
23+
"test/react-is-tests.tsx"
2524
]
2625
}

types/react-is/v17/index.d.ts

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// Type definitions for react-is 17.0
2+
// Project: https://reactjs.org/
3+
// Definitions by: Avi Vahl <https://github.com/AviVahl>
4+
// Christian Chown <https://github.com/christianchown>
5+
// Sebastian Silbermann <https://github.com/eps1lon>
6+
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
7+
// TypeScript Version: 2.8
8+
9+
// NOTE: Users of the React 18 alpha should add a reference
10+
// to 'react-is/next' in their project. See next.d.ts's top comment
11+
// for reference and documentation on how exactly to do it.
12+
13+
export as namespace ReactIs;
14+
15+
import {
16+
LazyExoticComponent,
17+
MemoExoticComponent,
18+
ReactElement,
19+
ElementType
20+
} from "react";
21+
22+
export function typeOf(value: any): symbol | undefined;
23+
export function isValidElementType(value: any): value is ElementType;
24+
export function isAsyncMode(value: any): value is ReactElement;
25+
export function isContextConsumer(value: any): value is ReactElement;
26+
export function isContextProvider(value: any): value is ReactElement;
27+
export function isElement(value: any): value is ReactElement;
28+
export function isForwardRef(value: any): value is ReactElement;
29+
export function isFragment(value: any): value is ReactElement;
30+
export function isLazy(value: any): value is LazyExoticComponent<any>;
31+
export function isMemo(value: any): value is MemoExoticComponent<any>;
32+
export function isProfiler(value: any): value is ReactElement;
33+
export function isPortal(value: any): value is ReactElement;
34+
export function isStrictMode(value: any): value is ReactElement;
35+
export function isSuspense(value: any): value is ReactElement;
36+
37+
export const AsyncMode: symbol;
38+
export const ContextConsumer: symbol;
39+
export const ContextProvider: symbol;
40+
export const Element: symbol;
41+
export const ForwardRef: symbol;
42+
export const Fragment: symbol;
43+
export const Lazy: symbol;
44+
export const Memo: symbol;
45+
export const Portal: symbol;
46+
export const Profiler: symbol;
47+
export const StrictMode: symbol;
48+
export const Suspense: symbol;
File renamed without changes.
+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
import * as ReactIs from 'react-is';
4+
5+
// Below is taken from README of react-is
6+
// Determining if a Component is Valid
7+
8+
interface CompProps {
9+
forwardedRef: React.Ref<any>;
10+
children?: React.ReactNode | undefined;
11+
}
12+
13+
class ClassComponent extends React.Component<CompProps> {
14+
render() {
15+
return React.createElement('div');
16+
}
17+
}
18+
19+
const FunctionComponent = () => React.createElement('div');
20+
21+
const ForwardRefComponent = React.forwardRef((props, ref) =>
22+
React.createElement(ClassComponent, { forwardedRef: ref, ...props })
23+
);
24+
25+
const LazyComponent = React.lazy(() =>
26+
Promise.resolve({ default: ForwardRefComponent })
27+
);
28+
29+
const MemoComponent = React.memo(FunctionComponent);
30+
31+
const Context = React.createContext(false);
32+
33+
ReactIs.isValidElementType('div'); // true
34+
ReactIs.isValidElementType(ClassComponent); // true
35+
ReactIs.isValidElementType(FunctionComponent); // true
36+
ReactIs.isValidElementType(ForwardRefComponent); // true
37+
ReactIs.isValidElementType(Context.Provider); // true
38+
ReactIs.isValidElementType(Context.Consumer); // true
39+
ReactIs.isValidElementType(React.createFactory('div')); // true
40+
ReactIs.isValidElementType(LazyComponent);
41+
ReactIs.isValidElementType(MemoComponent);
42+
43+
// Determining an Element's Type
44+
45+
// AsyncMode - unstable_AsyncMode is not implemented in @types/react yet
46+
// ReactIs.isAsyncMode(<React.unstable_AsyncMode />); // true
47+
// ReactIs.typeOf(<React.unstable_AsyncMode />) === ReactIs.AsyncMode; // true
48+
49+
// Context
50+
const ThemeContext = React.createContext('blue');
51+
52+
ReactIs.isContextConsumer(<ThemeContext.Consumer children={FunctionComponent} />); // true
53+
ReactIs.isContextProvider(<ThemeContext.Provider children={<FunctionComponent />} value='black' />); // true
54+
ReactIs.typeOf(<ThemeContext.Consumer children={FunctionComponent} />) === ReactIs.ContextConsumer; // true
55+
ReactIs.typeOf(<ThemeContext.Provider children={<FunctionComponent />} value='black' />) === ReactIs.ContextProvider; // true
56+
57+
// Element
58+
ReactIs.isElement(<div />); // true
59+
ReactIs.typeOf(<div />) === ReactIs.Element; // true
60+
61+
// Fragment
62+
ReactIs.isFragment(<></>); // true
63+
ReactIs.typeOf(<></>) === ReactIs.Fragment; // true
64+
65+
// Portal
66+
const div = document.createElement('div');
67+
const portal = ReactDOM.createPortal(<div />, div);
68+
69+
ReactIs.isPortal(portal); // true
70+
ReactIs.typeOf(portal) === ReactIs.Portal; // true
71+
72+
// StrictMode
73+
ReactIs.isStrictMode(<React.StrictMode />); // true
74+
ReactIs.typeOf(<React.StrictMode />) === ReactIs.StrictMode; // true
75+
76+
// Verify typeOf accepts any type of value (taken from tests of react-is)
77+
ReactIs.typeOf('abc') === undefined;
78+
ReactIs.typeOf(true) === undefined;
79+
ReactIs.typeOf(123) === undefined;
80+
ReactIs.typeOf({}) === undefined;
81+
ReactIs.typeOf(null) === undefined;
82+
ReactIs.typeOf(undefined) === undefined;
83+
84+
// ForwardRef
85+
ReactIs.isForwardRef(<ForwardRefComponent />); // true
86+
ReactIs.typeOf(<ForwardRefComponent />) === ReactIs.ForwardRef; // true
87+
88+
// Lazy
89+
ReactIs.isLazy(LazyComponent); // true
90+
ReactIs.typeOf(LazyComponent) === ReactIs.Lazy; // true
91+
92+
// Memo
93+
ReactIs.isMemo(MemoComponent); // true
94+
ReactIs.typeOf(MemoComponent) === ReactIs.Memo; // true
95+
96+
// Suspense
97+
ReactIs.isForwardRef(<React.Suspense fallback={<FunctionComponent />} />); // true
98+
ReactIs.typeOf(<React.Suspense fallback={<FunctionComponent />} />) === ReactIs.Suspense; // true

types/react-is/v17/tsconfig.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"compilerOptions": {
3+
"module": "commonjs",
4+
"lib": [
5+
"es6",
6+
"dom"
7+
],
8+
"noImplicitAny": true,
9+
"noImplicitThis": true,
10+
"strictNullChecks": true,
11+
"baseUrl": "../../",
12+
"typeRoots": [
13+
"../../"
14+
],
15+
"paths": {
16+
"react": ["react/v17"],
17+
"react-dom": ["react-dom/v17"],
18+
"react-is/*": ["react-is/v17/*"]
19+
},
20+
"types": [],
21+
"noEmit": true,
22+
"forceConsistentCasingInFileNames": true,
23+
"strictFunctionTypes": true,
24+
"jsx": "preserve"
25+
},
26+
"files": [
27+
"index.d.ts",
28+
"test/react-is-tests.tsx",
29+
"test/next-tests.tsx"
30+
]
31+
}

types/react-is/v17/tslint.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{ "extends": "@definitelytyped/dtslint/dt.json" }

0 commit comments

Comments
 (0)