Skip to content

Commit

Permalink
Move experimental APIs to stable for React 18
Browse files Browse the repository at this point in the history
  • Loading branch information
steinybot committed Aug 10, 2022
1 parent 8a92a62 commit ad2d0d7
Show file tree
Hide file tree
Showing 9 changed files with 186 additions and 7 deletions.
8 changes: 3 additions & 5 deletions types/react-is/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
// Type definitions for react-is 17.0
// Type definitions for react-is 18.0
// Project: https://reactjs.org/
// Definitions by: Avi Vahl <https://github.com/AviVahl>
// Christian Chown <https://github.com/christianchown>
// Sebastian Silbermann <https://github.com/eps1lon>
// 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 {
Expand All @@ -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;
Expand All @@ -46,3 +43,4 @@ export const Portal: symbol;
export const Profiler: symbol;
export const StrictMode: symbol;
export const Suspense: symbol;
export const SuspenseList: symbol;
4 changes: 4 additions & 0 deletions types/react-is/test/react-is-tests.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,3 +96,7 @@ ReactIs.typeOf(MemoComponent) === ReactIs.Memo; // true
// Suspense
ReactIs.isForwardRef(<React.Suspense fallback={<FunctionComponent />} />); // true
ReactIs.typeOf(<React.Suspense fallback={<FunctionComponent />} />) === ReactIs.Suspense; // true

// SuspenseList
ReactIs.isSuspenseList(<React.SuspenseList children={<div />} />); // true
ReactIs.typeOf(<React.SuspenseList children={<div />} />) === ReactIs.SuspenseList; // true
3 changes: 1 addition & 2 deletions types/react-is/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
},
"files": [
"index.d.ts",
"test/react-is-tests.tsx",
"test/next-tests.tsx"
"test/react-is-tests.tsx"
]
}
48 changes: 48 additions & 0 deletions types/react-is/v17/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
// Type definitions for react-is 17.0
// Project: https://reactjs.org/
// Definitions by: Avi Vahl <https://github.com/AviVahl>
// Christian Chown <https://github.com/christianchown>
// Sebastian Silbermann <https://github.com/eps1lon>
// 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<any>;
export function isMemo(value: any): value is MemoExoticComponent<any>;
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;
File renamed without changes.
File renamed without changes.
98 changes: 98 additions & 0 deletions types/react-is/v17/test/react-is-tests.tsx
Original file line number Diff line number Diff line change
@@ -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<any>;
children?: React.ReactNode | undefined;
}

class ClassComponent extends React.Component<CompProps> {
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(<React.unstable_AsyncMode />); // true
// ReactIs.typeOf(<React.unstable_AsyncMode />) === ReactIs.AsyncMode; // true

// Context
const ThemeContext = React.createContext('blue');

ReactIs.isContextConsumer(<ThemeContext.Consumer children={FunctionComponent} />); // true
ReactIs.isContextProvider(<ThemeContext.Provider children={<FunctionComponent />} value='black' />); // true
ReactIs.typeOf(<ThemeContext.Consumer children={FunctionComponent} />) === ReactIs.ContextConsumer; // true
ReactIs.typeOf(<ThemeContext.Provider children={<FunctionComponent />} value='black' />) === ReactIs.ContextProvider; // true

// Element
ReactIs.isElement(<div />); // true
ReactIs.typeOf(<div />) === ReactIs.Element; // true

// Fragment
ReactIs.isFragment(<></>); // true
ReactIs.typeOf(<></>) === ReactIs.Fragment; // true

// Portal
const div = document.createElement('div');
const portal = ReactDOM.createPortal(<div />, div);

ReactIs.isPortal(portal); // true
ReactIs.typeOf(portal) === ReactIs.Portal; // true

// StrictMode
ReactIs.isStrictMode(<React.StrictMode />); // true
ReactIs.typeOf(<React.StrictMode />) === 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(<ForwardRefComponent />); // true
ReactIs.typeOf(<ForwardRefComponent />) === 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(<React.Suspense fallback={<FunctionComponent />} />); // true
ReactIs.typeOf(<React.Suspense fallback={<FunctionComponent />} />) === ReactIs.Suspense; // true
31 changes: 31 additions & 0 deletions types/react-is/v17/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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"
]
}
1 change: 1 addition & 0 deletions types/react-is/v17/tslint.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{ "extends": "@definitelytyped/dtslint/dt.json" }

0 comments on commit ad2d0d7

Please sign in to comment.