Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react): Update stable types for v17 #48971

Merged
merged 13 commits into from Nov 20, 2020
2 changes: 1 addition & 1 deletion types/react-dom/index.d.ts
@@ -1,4 +1,4 @@
// Type definitions for React (react-dom) 16.9
// Type definitions for React (react-dom) 17.0
// Project: https://reactjs.org
// Definitions by: Asana <https://asana.com>
// AssureSign <http://www.assuresign.com>
Expand Down
98 changes: 98 additions & 0 deletions types/react-dom/v16/index.d.ts
@@ -0,0 +1,98 @@
// Type definitions for React (react-dom) 16.9
// Project: https://reactjs.org
// Definitions by: Asana <https://asana.com>
// AssureSign <http://www.assuresign.com>
// Microsoft <https://microsoft.com>
// MartynasZilinskas <https://github.com/MartynasZilinskas>
// Josh Rutherford <https://github.com/theruther4d>
// Jessica Franco <https://github.com/Jessidhia>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8

// NOTE: Users of the `experimental` builds of React should add a reference
// to 'react-dom/experimental' in their project. See experimental.d.ts's top comment
// for reference and documentation on how exactly to do it.

export as namespace ReactDOM;

import {
ReactInstance, Component, ComponentState,
ReactElement, SFCElement, CElement,
DOMAttributes, DOMElement, ReactNode, ReactPortal
} from 'react';

export function findDOMNode(instance: ReactInstance | null | undefined): Element | null | Text;
export function unmountComponentAtNode(container: Element | DocumentFragment): boolean;

export function createPortal(children: ReactNode, container: Element, key?: null | string): ReactPortal;

export const version: string;
export const render: Renderer;
export const hydrate: Renderer;

export function unstable_batchedUpdates<A, B>(callback: (a: A, b: B) => any, a: A, b: B): void;
export function unstable_batchedUpdates<A>(callback: (a: A) => any, a: A): void;
export function unstable_batchedUpdates(callback: () => any): void;

export function unstable_renderSubtreeIntoContainer<T extends Element>(
parentComponent: Component<any>,
element: DOMElement<DOMAttributes<T>, T>,
container: Element,
callback?: (element: T) => any): T;
export function unstable_renderSubtreeIntoContainer<P, T extends Component<P, ComponentState>>(
parentComponent: Component<any>,
element: CElement<P, T>,
container: Element,
callback?: (component: T) => any): T;
export function unstable_renderSubtreeIntoContainer<P>(
parentComponent: Component<any>,
element: ReactElement<P>,
container: Element,
callback?: (component?: Component<P, ComponentState> | Element) => any): Component<P, ComponentState> | Element | void;

export interface Renderer {
// Deprecated(render): The return value is deprecated.
// In future releases the render function's return type will be void.

<T extends Element>(
element: DOMElement<DOMAttributes<T>, T>,
container: Element | DocumentFragment | null,
callback?: () => void
): T;

(
element: Array<DOMElement<DOMAttributes<any>, any>>,
container: Element | DocumentFragment | null,
callback?: () => void
): Element;

(
element: SFCElement<any> | Array<SFCElement<any>>,
container: Element | DocumentFragment | null,
callback?: () => void
): void;

<P, T extends Component<P, ComponentState>>(
element: CElement<P, T>,
container: Element | DocumentFragment | null,
callback?: () => void
): T;

(
element: Array<CElement<any, Component<any, ComponentState>>>,
container: Element | DocumentFragment | null,
callback?: () => void
): Component<any, ComponentState>;

<P>(
element: ReactElement<P>,
container: Element | DocumentFragment | null,
callback?: () => void
): Component<P, ComponentState> | Element | void;

(
element: ReactElement[],
container: Element | DocumentFragment | null,
callback?: () => void
): Component<any, ComponentState> | Element | void;
}
18 changes: 18 additions & 0 deletions types/react-dom/v16/node-stream/index.d.ts
@@ -0,0 +1,18 @@
import { ReactElement } from 'react';

/**
* Render a ReactElement to its initial HTML. This should only be used on the
* server.
* See https://facebook.github.io/react/docs/react-dom-stream.html#rendertostream
*/
export function renderToStream(element: ReactElement): any;

/**
* Similar to renderToStream, except this doesn't create extra DOM attributes
* such as data-react-id that React uses internally.
* See https://facebook.github.io/react/docs/react-dom-stream.html#rendertostaticstream
*/
export function renderToStaticStream(element: ReactElement): any;
export const version: string;

export as namespace ReactDOMNodeStream;
47 changes: 47 additions & 0 deletions types/react-dom/v16/server/index.d.ts
@@ -0,0 +1,47 @@
// forward declarations
declare global {
namespace NodeJS {
// tslint:disable-next-line:no-empty-interface
interface ReadableStream {}
}
}

import { ReactElement } from 'react';

/**
* Render a React element to its initial HTML. This should only be used on the server.
* React will return an HTML string. You can use this method to generate HTML on the server
* and send the markup down on the initial request for faster page loads and to allow search
* engines to crawl your pages for SEO purposes.
*
* If you call `ReactDOM.hydrate()` on a node that already has this server-rendered markup,
* React will preserve it and only attach event handlers, allowing you
* to have a very performant first-load experience.
*/
export function renderToString(element: ReactElement): string;

/**
* Render a React element to its initial HTML. Returns a Readable stream that outputs
* an HTML string. The HTML output by this stream is exactly equal to what
* `ReactDOMServer.renderToString()` would return.
*/
export function renderToNodeStream(element: ReactElement): NodeJS.ReadableStream;

/**
* Similar to `renderToString`, except this doesn't create extra DOM attributes
* such as `data-reactid`, that React uses internally. This is useful if you want
* to use React as a simple static page generator, as stripping away the extra
* attributes can save lots of bytes.
*/
export function renderToStaticMarkup(element: ReactElement): string;

/**
* Similar to `renderToNodeStream`, except this doesn't create extra DOM attributes
* such as `data-reactid`, that React uses internally. The HTML output by this stream
* is exactly equal to what `ReactDOMServer.renderToStaticMarkup()` would return.
*/
export function renderToStaticNodeStream(element: ReactElement): NodeJS.ReadableStream;

export const version: string;

export as namespace ReactDOMServer;