diff --git a/types/react-is/index.d.ts b/types/react-is/index.d.ts index cc7d946d02cf63..b23f4d8e1ccc5e 100644 --- a/types/react-is/index.d.ts +++ b/types/react-is/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-is 17.0 +// Type definitions for react-is 18.0 // Project: https://reactjs.org/ // Definitions by: Avi Vahl // Christian Chown @@ -6,10 +6,6 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 -// NOTE: Users of the React 18 alpha should add a reference -// to 'react-is/next' in their project. See next.d.ts's top comment -// for reference and documentation on how exactly to do it. - export as namespace ReactIs; import { @@ -33,6 +29,7 @@ export function isProfiler(value: any): value is ReactElement; export function isPortal(value: any): value is ReactElement; export function isStrictMode(value: any): value is ReactElement; export function isSuspense(value: any): value is ReactElement; +export function isSuspenseList(value: any): value is ReactElement; export const AsyncMode: symbol; export const ContextConsumer: symbol; @@ -46,3 +43,4 @@ export const Portal: symbol; export const Profiler: symbol; export const StrictMode: symbol; export const Suspense: symbol; +export const SuspenseList: symbol; diff --git a/types/react-is/test/react-is-tests.tsx b/types/react-is/test/react-is-tests.tsx index 86846fee3e333e..aeeea06cfe7ed8 100644 --- a/types/react-is/test/react-is-tests.tsx +++ b/types/react-is/test/react-is-tests.tsx @@ -96,3 +96,7 @@ ReactIs.typeOf(MemoComponent) === ReactIs.Memo; // true // Suspense ReactIs.isForwardRef(} />); // true ReactIs.typeOf(} />) === ReactIs.Suspense; // true + +// SuspenseList +ReactIs.isSuspenseList(} />); // true +ReactIs.typeOf(} />) === ReactIs.SuspenseList; // true diff --git a/types/react-is/tsconfig.json b/types/react-is/tsconfig.json index 8fbc77ee86591e..e8374f1677b438 100644 --- a/types/react-is/tsconfig.json +++ b/types/react-is/tsconfig.json @@ -20,7 +20,6 @@ }, "files": [ "index.d.ts", - "test/react-is-tests.tsx", - "test/next-tests.tsx" + "test/react-is-tests.tsx" ] } diff --git a/types/react-is/v17/index.d.ts b/types/react-is/v17/index.d.ts new file mode 100644 index 00000000000000..cc7d946d02cf63 --- /dev/null +++ b/types/react-is/v17/index.d.ts @@ -0,0 +1,48 @@ +// Type definitions for react-is 17.0 +// Project: https://reactjs.org/ +// Definitions by: Avi Vahl +// Christian Chown +// Sebastian Silbermann +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +// NOTE: Users of the React 18 alpha should add a reference +// to 'react-is/next' in their project. See next.d.ts's top comment +// for reference and documentation on how exactly to do it. + +export as namespace ReactIs; + +import { + LazyExoticComponent, + MemoExoticComponent, + ReactElement, + ElementType +} from "react"; + +export function typeOf(value: any): symbol | undefined; +export function isValidElementType(value: any): value is ElementType; +export function isAsyncMode(value: any): value is ReactElement; +export function isContextConsumer(value: any): value is ReactElement; +export function isContextProvider(value: any): value is ReactElement; +export function isElement(value: any): value is ReactElement; +export function isForwardRef(value: any): value is ReactElement; +export function isFragment(value: any): value is ReactElement; +export function isLazy(value: any): value is LazyExoticComponent; +export function isMemo(value: any): value is MemoExoticComponent; +export function isProfiler(value: any): value is ReactElement; +export function isPortal(value: any): value is ReactElement; +export function isStrictMode(value: any): value is ReactElement; +export function isSuspense(value: any): value is ReactElement; + +export const AsyncMode: symbol; +export const ContextConsumer: symbol; +export const ContextProvider: symbol; +export const Element: symbol; +export const ForwardRef: symbol; +export const Fragment: symbol; +export const Lazy: symbol; +export const Memo: symbol; +export const Portal: symbol; +export const Profiler: symbol; +export const StrictMode: symbol; +export const Suspense: symbol; diff --git a/types/react-is/next.d.ts b/types/react-is/v17/next.d.ts similarity index 100% rename from types/react-is/next.d.ts rename to types/react-is/v17/next.d.ts diff --git a/types/react-is/test/next-tests.tsx b/types/react-is/v17/test/next-tests.tsx similarity index 100% rename from types/react-is/test/next-tests.tsx rename to types/react-is/v17/test/next-tests.tsx diff --git a/types/react-is/v17/test/react-is-tests.tsx b/types/react-is/v17/test/react-is-tests.tsx new file mode 100644 index 00000000000000..86846fee3e333e --- /dev/null +++ b/types/react-is/v17/test/react-is-tests.tsx @@ -0,0 +1,98 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import * as ReactIs from 'react-is'; + +// Below is taken from README of react-is +// Determining if a Component is Valid + +interface CompProps { + forwardedRef: React.Ref; + children?: React.ReactNode | undefined; +} + +class ClassComponent extends React.Component { + render() { + return React.createElement('div'); + } +} + +const FunctionComponent = () => React.createElement('div'); + +const ForwardRefComponent = React.forwardRef((props, ref) => + React.createElement(ClassComponent, { forwardedRef: ref, ...props }) +); + +const LazyComponent = React.lazy(() => + Promise.resolve({ default: ForwardRefComponent }) +); + +const MemoComponent = React.memo(FunctionComponent); + +const Context = React.createContext(false); + +ReactIs.isValidElementType('div'); // true +ReactIs.isValidElementType(ClassComponent); // true +ReactIs.isValidElementType(FunctionComponent); // true +ReactIs.isValidElementType(ForwardRefComponent); // true +ReactIs.isValidElementType(Context.Provider); // true +ReactIs.isValidElementType(Context.Consumer); // true +ReactIs.isValidElementType(React.createFactory('div')); // true +ReactIs.isValidElementType(LazyComponent); +ReactIs.isValidElementType(MemoComponent); + +// Determining an Element's Type + +// AsyncMode - unstable_AsyncMode is not implemented in @types/react yet +// ReactIs.isAsyncMode(); // true +// ReactIs.typeOf() === ReactIs.AsyncMode; // true + +// Context +const ThemeContext = React.createContext('blue'); + +ReactIs.isContextConsumer(); // true +ReactIs.isContextProvider(} value='black' />); // true +ReactIs.typeOf() === ReactIs.ContextConsumer; // true +ReactIs.typeOf(} value='black' />) === ReactIs.ContextProvider; // true + +// Element +ReactIs.isElement(
); // true +ReactIs.typeOf(
) === ReactIs.Element; // true + +// Fragment +ReactIs.isFragment(<>); // true +ReactIs.typeOf(<>) === ReactIs.Fragment; // true + +// Portal +const div = document.createElement('div'); +const portal = ReactDOM.createPortal(
, div); + +ReactIs.isPortal(portal); // true +ReactIs.typeOf(portal) === ReactIs.Portal; // true + +// StrictMode +ReactIs.isStrictMode(); // true +ReactIs.typeOf() === ReactIs.StrictMode; // true + +// Verify typeOf accepts any type of value (taken from tests of react-is) +ReactIs.typeOf('abc') === undefined; +ReactIs.typeOf(true) === undefined; +ReactIs.typeOf(123) === undefined; +ReactIs.typeOf({}) === undefined; +ReactIs.typeOf(null) === undefined; +ReactIs.typeOf(undefined) === undefined; + +// ForwardRef +ReactIs.isForwardRef(); // true +ReactIs.typeOf() === ReactIs.ForwardRef; // true + +// Lazy +ReactIs.isLazy(LazyComponent); // true +ReactIs.typeOf(LazyComponent) === ReactIs.Lazy; // true + +// Memo +ReactIs.isMemo(MemoComponent); // true +ReactIs.typeOf(MemoComponent) === ReactIs.Memo; // true + +// Suspense +ReactIs.isForwardRef(} />); // true +ReactIs.typeOf(} />) === ReactIs.Suspense; // true diff --git a/types/react-is/v17/tsconfig.json b/types/react-is/v17/tsconfig.json new file mode 100644 index 00000000000000..24c806baafc67f --- /dev/null +++ b/types/react-is/v17/tsconfig.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../../", + "typeRoots": [ + "../../" + ], + "paths": { + "react": ["react/v17"], + "react-dom": ["react-dom/v17"], + "react-is/*": ["react-is/v17/*"] + }, + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "strictFunctionTypes": true, + "jsx": "preserve" + }, + "files": [ + "index.d.ts", + "test/react-is-tests.tsx", + "test/next-tests.tsx" + ] +} diff --git a/types/react-is/v17/tslint.json b/types/react-is/v17/tslint.json new file mode 100644 index 00000000000000..794cb4bf3e0782 --- /dev/null +++ b/types/react-is/v17/tslint.json @@ -0,0 +1 @@ +{ "extends": "@definitelytyped/dtslint/dt.json" }