[react] React 18 types

types/meteor/mongo.d.ts

@@ -174,7 +174,7 @@ declare module 'meteor/mongo' {
              * Constructor for a Collection
              * @param name The name of the collection. If null, creates an unmanaged (unsynchronized) local collection.
              */
-            new <T, U = T>(
+            new <T extends MongoNpmModule.Document, U = T>(
                 name: string | null,
                 options?: {
                     /**
@@ -199,7 +199,7 @@ declare module 'meteor/mongo' {
                 },
             ): Collection<T, U>;
         }
-        interface Collection<T, U = T> {
+        interface Collection<T extends MongoNpmModule.Document, U = T> {
             allow<Fn extends Transform<T> = undefined>(options: {
                 insert?: ((userId: string, doc: DispatchTransform<Fn, T, U>) => boolean) | undefined;
                 update?:

types/orbit-ui__react-components/tsconfig.json

@@ -13,7 +13,8 @@
         "forceConsistentCasingInFileNames": true,
         "jsx": "react",
         "paths": {
-            "@orbit-ui/*": ["orbit-ui__*"]
+            "@orbit-ui/*": ["orbit-ui__*"],
+            "react": ["react/v16"]
         }
     },
     "files": ["index.d.ts", "orbit-ui__react-components-tests.tsx"]

types/prop-types/index.d.ts

@@ -17,10 +17,9 @@ export interface ReactElementLike {
     key: string | number | null;
 }
 
-export interface ReactNodeArray extends Array<ReactNodeLike> {}
+export interface ReactNodeArray extends Iterable<ReactNodeLike> {}
 
 export type ReactNodeLike =
-    | {}
     | ReactElementLike
     | ReactNodeArray
     | string

types/react-dnd-multi-backend/react-dnd-multi-backend-tests.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
-import { DndProvider } from 'react-dnd';
+import { DndProviderProps } from 'react-dnd';
 import MultiBackend, { createTransition, TouchTransition, Backends, Preview, PreviewGenerator } from 'react-dnd-multi-backend';
 import HTML5ToTouchEsm from 'react-dnd-multi-backend/dist/esm/HTML5toTouch';
 import HTML5ToTouchCjs from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
 import TouchBackend from 'react-dnd-touch-backend';
 
+// Legacy versions of `react-dnd` rely on implicit children of `React.FC` which was removed in `@types/react@18`
+declare const DndProvider: React.FC<React.PropsWithChildren<DndProviderProps<any, any>>>;
+
 const context = {};
 
 /**

types/react-dom/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for React (react-dom) 17.0
+// Type definitions for React (react-dom) 18.0
 // Project: https://reactjs.org
 // Definitions by: Asana <https://asana.com>
 //                 AssureSign <http://www.assuresign.com>
@@ -10,10 +10,6 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
-// NOTE: Users of the upcoming React 18 release should add a reference
-// to 'react-dom/next' in their project. See next.d.ts's top comment
-// for reference and documentation on how exactly to do it.
-
 // 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.

types/react-dom/test-utils/index.d.ts

@@ -2,7 +2,7 @@ import {
     AbstractView, Component, ComponentClass,
     ReactElement, ReactInstance, ClassType,
     DOMElement, FunctionComponentElement, CElement,
-    ReactHTMLElement, DOMAttributes, SFC
+    ReactHTMLElement, DOMAttributes, FC
 } from 'react';
 
 import * as ReactTestUtils from ".";
@@ -194,7 +194,7 @@ export function isElementOfType<P extends DOMAttributes<{}>, T extends Element>(
  * Returns `true` if `element` is a React element whose type is of a React `componentClass`.
  */
 export function isElementOfType<P>(
-    element: ReactElement, type: SFC<P>): element is FunctionComponentElement<P>;
+    element: ReactElement, type: FC<P>): element is FunctionComponentElement<P>;
 /**
  * Returns `true` if `element` is a React element whose type is of a React `componentClass`.
  */

types/react-dom/test/next-tests.tsx

@@ -1,28 +1 @@
 /// <reference types="../next"/>
-import React = require('react');
-import ReactDOMClient = require('react-dom/client');
-
-function createRoot() {
-    const root = ReactDOMClient.createRoot(document.documentElement);
-
-    root.render(<div>initial render</div>);
-
-    // only makes sense for `hydrateRoot`
-    // $ExpectError
-    ReactDOMClient.createRoot(document);
-}
-
-function hydrateRoot() {
-    const hydrateable = ReactDOMClient.hydrateRoot(document, <div>initial render</div>, {
-        identifierPrefix: 'react-18-app',
-        onRecoverableError: error => {
-            console.error(error);
-        },
-    });
-    hydrateable.render(<div>render update</div>);
-    ReactDOMClient.hydrateRoot(document, {
-        // Forgot `initialChildren`
-        // $ExpectError
-        identifierPrefix: 'react-18-app',
-    });
-}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import * as ReactDOMServer from 'react-dom/server';
-import * as ReactDOMNodeStream from 'react-dom/node-stream';
 import * as ReactTestUtils from 'react-dom/test-utils';
 
 declare function describe(desc: string, f: () => void): void;
@@ -91,16 +91,6 @@ describe('ReactDOMServer', () => {
     });
 });
 
-describe('ReactDOMNodeStream', () => {
-    it('renderToStream', () => {
-        const content: any = ReactDOMNodeStream.renderToStream(React.createElement('div'));
-    });
-
-    it('renderToStaticStream', () => {
-        const content: any = ReactDOMNodeStream.renderToStaticStream(React.createElement('div'));
-    });
-});
-
 describe('React dom test utils', () => {
     it('Simulate', () => {
         const element = document.createElement('div');
@@ -237,3 +227,28 @@ describe('React dom test utils', () => {
         });
     });
 });
+
+function createRoot() {
+    const root = ReactDOMClient.createRoot(document.documentElement);
+
+    root.render(<div>initial render</div>);
+
+    // only makes sense for `hydrateRoot`
+    // $ExpectError
+    ReactDOMClient.createRoot(document);
+}
+
+function hydrateRoot() {
+    const hydrateable = ReactDOMClient.hydrateRoot(document, <div>initial render</div>, {
+        identifierPrefix: 'react-18-app',
+        onRecoverableError: error => {
+            console.error(error);
+        },
+    });
+    hydrateable.render(<div>render update</div>);
+    ReactDOMClient.hydrateRoot(document, {
+        // Forgot `initialChildren`
+        // $ExpectError
+        identifierPrefix: 'react-18-app',
+    });
+}

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

@@ -0,0 +1,100 @@
+// Type definitions for React (react-dom) 17.0
+// 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>
+//                 Sebastian Silbermann <https://github.com/eps1lon>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+export as namespace ReactDOM;
+
+import {
+    ReactInstance, Component, ComponentState,
+    ReactElement, FunctionComponentElement, 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 flushSync<R>(fn: () => R): R;
+export function flushSync<A, R>(fn: (a: A) => R, a: A): R;
+
+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 type Container = Element | Document | DocumentFragment;
+
+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: Container| null,
+        callback?: () => void
+    ): T;
+
+    (
+        element: Array<DOMElement<DOMAttributes<any>, any>>,
+        container: Container| null,
+        callback?: () => void
+    ): Element;
+
+    (
+        element: FunctionComponentElement<any> | Array<FunctionComponentElement<any>>,
+        container: Container| null,
+        callback?: () => void
+    ): void;
+
+    <P, T extends Component<P, ComponentState>>(
+        element: CElement<P, T>,
+        container: Container| null,
+        callback?: () => void
+    ): T;
+
+    (
+        element: Array<CElement<any, Component<any, ComponentState>>>,
+        container: Container| null,
+        callback?: () => void
+    ): Component<any, ComponentState>;
+
+    <P>(
+        element: ReactElement<P>,
+        container: Container| null,
+        callback?: () => void
+    ): Component<P, ComponentState> | Element | void;
+
+    (
+        element: ReactElement[],
+        container: Container| null,
+        callback?: () => void
+    ): Component<any, ComponentState> | Element | void;
+}

types/react-dom/v17/server.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;