std: Provide types for React and ReactDOM (#4376)

Introduces `std/types` which is designed to provide types for common
libraries that are compatible with Deno.

std/types/README.md

@@ -0,0 +1,28 @@
+# std/types
+
+Contains types for popular external packages that are compatible with Deno.
+
+Because Deno only resolves fully qualified file names, type definitions that
+import other type definitions might not work with Deno. Also, when some type
+definition supply some global interfaces, they can conflict with Deno. The types
+located here have been validated to work with Deno.
+
+The types that are currently available:
+
+- `react.d.ts` - For React 16. Sources known to work well for Deno:
+  - Pika CDN: `https://cdn.pika.dev/_/react/v16`
+  - JSPM: `https://dev.jspm.io/react@16`
+- `react-dom.d.ts` - For ReactDOM 16. Sources known to work well for Deno:
+  - Pika CDN: `https://cdn.pika.dev/_/react-dom/v16`
+  - JSPM: `https://dev.jspm.io/react-dom@16`
+
+There are several ways these type definitions can be referenced. Likely the
+"best" way is that the CDN provider provides a header of `X-TypeScript-Types`
+which points to the type definitions. We are working to have this available, but
+currently you would need to use the compiler hint of `@deno-types`. For example
+to import React:
+
+```ts
+// @deno-types="https://deno.land/std/types/react.d.ts"
+import React from "https://cdn.pika.dev/_/react/v16";
+```

std/types/react-dom.d.ts

@@ -0,0 +1,125 @@
+// These types are adapted from
+// https://github.com/DefinitelyTyped/DefinitelyTyped to work under Deno.
+//
+// Type definitions for React (react-dom) 16.9
+// Project: http://facebook.github.io/react/
+// 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.
+
+/* eslint-disable */
+
+export as namespace ReactDOM;
+
+import {
+  ReactInstance,
+  Component,
+  ComponentState,
+  ReactElement,
+  SFCElement,
+  CElement,
+  DOMAttributes,
+  DOMElement,
+  ReactNode,
+  ReactPortal
+} from "./react.d.ts";
+
+export function findDOMNode(
+  instance: ReactInstance | null | undefined
+): Element | null | Text;
+export function unmountComponentAtNode(container: Element): 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 | null,
+    callback?: () => void
+  ): T;
+
+  (
+    element: Array<DOMElement<DOMAttributes<any>, any>>,
+    container: Element | null,
+    callback?: () => void
+  ): Element;
+
+  (
+    element: SFCElement<any> | Array<SFCElement<any>>,
+    container: Element | null,
+    callback?: () => void
+  ): void;
+
+  <P, T extends Component<P, ComponentState>>(
+    element: CElement<P, T>,
+    container: Element | null,
+    callback?: () => void
+  ): T;
+
+  (
+    element: Array<CElement<any, Component<any, ComponentState>>>,
+    container: Element | null,
+    callback?: () => void
+  ): Component<any, ComponentState>;
+
+  <P>(
+    element: ReactElement<P>,
+    container: Element | null,
+    callback?: () => void
+  ): Component<P, ComponentState> | Element | void;
+
+  (element: ReactElement[], container: Element | null, callback?: () => void):
+    | Component<any, ComponentState>
+    | Element
+    | void;
+}

std/types/react/prop-types.d.ts

@@ -0,0 +1,123 @@
+// These types are adapted from
+// https://github.com/DefinitelyTyped/DefinitelyTyped to work under Deno.
+//
+// Type definitions for prop-types 15.7
+// Project: https://github.com/reactjs/prop-types, https://facebook.github.io/react
+// Definitions by: DovydasNavickas <https://github.com/DovydasNavickas>
+//                 Ferdy Budhidharma <https://github.com/ferdaber>
+//                 Sebastian Silbermann <https://github.com/eps1lon>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+/* eslint-disable */
+export type ReactComponentLike =
+  | string
+  | ((props: any, context?: any) => any)
+  | (new (props: any, context?: any) => any);
+
+export interface ReactElementLike {
+  type: ReactComponentLike;
+  props: any;
+  key: string | number | null;
+}
+
+export interface ReactNodeArray extends Array<ReactNodeLike> {}
+
+export type ReactNodeLike =
+  | {}
+  | ReactElementLike
+  | ReactNodeArray
+  | string
+  | number
+  | boolean
+  | null
+  | undefined;
+
+export const nominalTypeHack: unique symbol;
+
+export type IsOptional<T> = undefined extends T ? true : false;
+
+export type RequiredKeys<V> = {
+  [K in keyof V]-?: Exclude<V[K], undefined> extends Validator<infer T>
+    ? IsOptional<T> extends true
+      ? never
+      : K
+    : never;
+}[keyof V];
+export type OptionalKeys<V> = Exclude<keyof V, RequiredKeys<V>>;
+export type InferPropsInner<V> = { [K in keyof V]-?: InferType<V[K]> };
+
+export interface Validator<T> {
+  (
+    props: { [key: string]: any },
+    propName: string,
+    componentName: string,
+    location: string,
+    propFullName: string
+  ): Error | null;
+  [nominalTypeHack]?: {
+    type: T;
+  };
+}
+
+export interface Requireable<T> extends Validator<T | undefined | null> {
+  isRequired: Validator<NonNullable<T>>;
+}
+
+export type ValidationMap<T> = { [K in keyof T]?: Validator<T[K]> };
+
+export type InferType<V> = V extends Validator<infer T> ? T : any;
+export type InferProps<V> = InferPropsInner<Pick<V, RequiredKeys<V>>> &
+  Partial<InferPropsInner<Pick<V, OptionalKeys<V>>>>;
+
+export const any: Requireable<any>;
+export const array: Requireable<any[]>;
+export const bool: Requireable<boolean>;
+export const func: Requireable<(...args: any[]) => any>;
+export const number: Requireable<number>;
+export const object: Requireable<object>;
+export const string: Requireable<string>;
+export const node: Requireable<ReactNodeLike>;
+export const element: Requireable<ReactElementLike>;
+export const symbol: Requireable<symbol>;
+export const elementType: Requireable<ReactComponentLike>;
+export function instanceOf<T>(
+  expectedClass: new (...args: any[]) => T
+): Requireable<T>;
+export function oneOf<T>(types: ReadonlyArray<T>): Requireable<T>;
+export function oneOfType<T extends Validator<any>>(
+  types: T[]
+): Requireable<NonNullable<InferType<T>>>;
+export function arrayOf<T>(type: Validator<T>): Requireable<T[]>;
+export function objectOf<T>(
+  type: Validator<T>
+): Requireable<{ [K in keyof any]: T }>;
+export function shape<P extends ValidationMap<any>>(
+  type: P
+): Requireable<InferProps<P>>;
+export function exact<P extends ValidationMap<any>>(
+  type: P
+): Requireable<Required<InferProps<P>>>;
+
+/**
+ * Assert that the values match with the type specs.
+ * Error messages are memorized and will only be shown once.
+ *
+ * @param typeSpecs Map of name to a ReactPropType
+ * @param values Runtime values that need to be type-checked
+ * @param location e.g. "prop", "context", "child context"
+ * @param componentName Name of the component for error messages
+ * @param getStack Returns the component stack
+ */
+export function checkPropTypes(
+  typeSpecs: any,
+  values: any,
+  location: string,
+  componentName: string,
+  getStack?: () => any
+): void;
+
+/**
+ * Only available if NODE_ENV=production
+ */
+export function resetWarningCache(): void;

std/types/react/react_global.d.ts

@@ -0,0 +1,149 @@
+// These types are adapted from
+// https://github.com/DefinitelyTyped/DefinitelyTyped to work under Deno.
+//
+/*
+React projects that don't include the DOM library need these interfaces to compile.
+React Native applications use React, but there is no DOM available. The JavaScript runtime
+is ES6/ES2015 only. These definitions allow such projects to compile with only `--lib ES6`.
+*/
+
+/* eslint-disable */
+
+interface AnimationEvent extends Event {}
+interface ClipboardEvent extends Event {}
+interface CompositionEvent extends Event {}
+interface DragEvent extends Event {}
+interface FocusEvent extends Event {}
+interface KeyboardEvent extends Event {}
+interface MouseEvent extends Event {}
+interface TouchEvent extends Event {}
+interface PointerEvent extends Event {}
+interface TransitionEvent extends Event {}
+interface UIEvent extends Event {}
+interface WheelEvent extends Event {}
+
+interface Document {}
+interface DataTransfer {}
+interface StyleMedia {}
+
+interface Element {}
+
+interface HTMLElement extends Element {}
+interface HTMLAnchorElement extends HTMLElement {}
+interface HTMLAreaElement extends HTMLElement {}
+interface HTMLAudioElement extends HTMLElement {}
+interface HTMLBaseElement extends HTMLElement {}
+interface HTMLBodyElement extends HTMLElement {}
+interface HTMLBRElement extends HTMLElement {}
+interface HTMLButtonElement extends HTMLElement {}
+interface HTMLCanvasElement extends HTMLElement {}
+interface HTMLDataElement extends HTMLElement {}
+interface HTMLDataListElement extends HTMLElement {}
+interface HTMLDialogElement extends HTMLElement {}
+interface HTMLDivElement extends HTMLElement {}
+interface HTMLDListElement extends HTMLElement {}
+interface HTMLEmbedElement extends HTMLElement {}
+interface HTMLFieldSetElement extends HTMLElement {}
+interface HTMLFormElement extends HTMLElement {}
+interface HTMLHeadingElement extends HTMLElement {}
+interface HTMLHeadElement extends HTMLElement {}
+interface HTMLHRElement extends HTMLElement {}
+interface HTMLHtmlElement extends HTMLElement {}
+interface HTMLIFrameElement extends HTMLElement {}
+interface HTMLImageElement extends HTMLElement {}
+interface HTMLInputElement extends HTMLElement {}
+interface HTMLModElement extends HTMLElement {}
+interface HTMLLabelElement extends HTMLElement {}
+interface HTMLLegendElement extends HTMLElement {}
+interface HTMLLIElement extends HTMLElement {}
+interface HTMLLinkElement extends HTMLElement {}
+interface HTMLMapElement extends HTMLElement {}
+interface HTMLMetaElement extends HTMLElement {}
+interface HTMLObjectElement extends HTMLElement {}
+interface HTMLOListElement extends HTMLElement {}
+interface HTMLOptGroupElement extends HTMLElement {}
+interface HTMLOptionElement extends HTMLElement {}
+interface HTMLParagraphElement extends HTMLElement {}
+interface HTMLParamElement extends HTMLElement {}
+interface HTMLPreElement extends HTMLElement {}
+interface HTMLProgressElement extends HTMLElement {}
+interface HTMLQuoteElement extends HTMLElement {}
+interface HTMLScriptElement extends HTMLElement {}
+interface HTMLSelectElement extends HTMLElement {}
+interface HTMLSourceElement extends HTMLElement {}
+interface HTMLSpanElement extends HTMLElement {}
+interface HTMLStyleElement extends HTMLElement {}
+interface HTMLTableElement extends HTMLElement {}
+interface HTMLTableColElement extends HTMLElement {}
+interface HTMLTableDataCellElement extends HTMLElement {}
+interface HTMLTableHeaderCellElement extends HTMLElement {}
+interface HTMLTableRowElement extends HTMLElement {}
+interface HTMLTableSectionElement extends HTMLElement {}
+interface HTMLTemplateElement extends HTMLElement {}
+interface HTMLTextAreaElement extends HTMLElement {}
+interface HTMLTitleElement extends HTMLElement {}
+interface HTMLTrackElement extends HTMLElement {}
+interface HTMLUListElement extends HTMLElement {}
+interface HTMLVideoElement extends HTMLElement {}
+interface HTMLWebViewElement extends HTMLElement {}
+
+interface SVGElement extends Element {}
+interface SVGSVGElement extends SVGElement {}
+interface SVGCircleElement extends SVGElement {}
+interface SVGClipPathElement extends SVGElement {}
+interface SVGDefsElement extends SVGElement {}
+interface SVGDescElement extends SVGElement {}
+interface SVGEllipseElement extends SVGElement {}
+interface SVGFEBlendElement extends SVGElement {}
+interface SVGFEColorMatrixElement extends SVGElement {}
+interface SVGFEComponentTransferElement extends SVGElement {}
+interface SVGFECompositeElement extends SVGElement {}
+interface SVGFEConvolveMatrixElement extends SVGElement {}
+interface SVGFEDiffuseLightingElement extends SVGElement {}
+interface SVGFEDisplacementMapElement extends SVGElement {}
+interface SVGFEDistantLightElement extends SVGElement {}
+interface SVGFEDropShadowElement extends SVGElement {}
+interface SVGFEFloodElement extends SVGElement {}
+interface SVGFEFuncAElement extends SVGElement {}
+interface SVGFEFuncBElement extends SVGElement {}
+interface SVGFEFuncGElement extends SVGElement {}
+interface SVGFEFuncRElement extends SVGElement {}
+interface SVGFEGaussianBlurElement extends SVGElement {}
+interface SVGFEImageElement extends SVGElement {}
+interface SVGFEMergeElement extends SVGElement {}
+interface SVGFEMergeNodeElement extends SVGElement {}
+interface SVGFEMorphologyElement extends SVGElement {}
+interface SVGFEOffsetElement extends SVGElement {}
+interface SVGFEPointLightElement extends SVGElement {}
+interface SVGFESpecularLightingElement extends SVGElement {}
+interface SVGFESpotLightElement extends SVGElement {}
+interface SVGFETileElement extends SVGElement {}
+interface SVGFETurbulenceElement extends SVGElement {}
+interface SVGFilterElement extends SVGElement {}
+interface SVGForeignObjectElement extends SVGElement {}
+interface SVGGElement extends SVGElement {}
+interface SVGImageElement extends SVGElement {}
+interface SVGLineElement extends SVGElement {}
+interface SVGLinearGradientElement extends SVGElement {}
+interface SVGMarkerElement extends SVGElement {}
+interface SVGMaskElement extends SVGElement {}
+interface SVGMetadataElement extends SVGElement {}
+interface SVGPathElement extends SVGElement {}
+interface SVGPatternElement extends SVGElement {}
+interface SVGPolygonElement extends SVGElement {}
+interface SVGPolylineElement extends SVGElement {}
+interface SVGRadialGradientElement extends SVGElement {}
+interface SVGRectElement extends SVGElement {}
+interface SVGStopElement extends SVGElement {}
+interface SVGSwitchElement extends SVGElement {}
+interface SVGSymbolElement extends SVGElement {}
+interface SVGTextElement extends SVGElement {}
+interface SVGTextPathElement extends SVGElement {}
+interface SVGTSpanElement extends SVGElement {}
+interface SVGUseElement extends SVGElement {}
+interface SVGViewElement extends SVGElement {}
+
+interface Text {}
+interface TouchList {}
+interface WebGLRenderingContext {}
+interface WebGL2RenderingContext {}

std/types/tests/react-dom_mock.js

@@ -0,0 +1,9 @@
+// Copyright 2018-2020 the Deno authors. All rights reserved. MIT license.
+
+const ReactDOM = {
+  render(element) {
+    return JSON.stringify(element);
+  }
+};
+
+export default ReactDOM;

std/types/tests/react-dom_test.tsx

@@ -0,0 +1,20 @@
+// Copyright 2018-2020 the Deno authors. All rights reserved. MIT license.
+
+// @deno-types="../react.d.ts"
+import React from "./react_mock.js";
+// @deno-types="../react-dom.d.ts"
+import ReactDOM from "./react-dom_mock.js";
+
+import { assertEquals } from "../../testing/asserts.ts";
+
+const { test } = Deno;
+
+test({
+  name: "ReactDOM is typed to render",
+  fn() {
+    assertEquals(
+      ReactDOM.render(<div />, null),
+      '"{\\"type\\":\\"div\\",\\"props\\":null,\\"children\\":[]}"'
+    );
+  }
+});

std/types/tests/react_mock.js

@@ -0,0 +1,9 @@
+// Copyright 2018-2020 the Deno authors. All rights reserved. MIT license.
+
+const React = {
+  createElement(type, props, ...children) {
+    return JSON.stringify({ type, props, children });
+  }
+};
+
+export default React;

std/types/tests/react_test.tsx

@@ -0,0 +1,23 @@
+// Copyright 2018-2020 the Deno authors. All rights reserved. MIT license.
+
+// @deno-types="../react.d.ts"
+import React from "./react_mock.js";
+import { assertEquals } from "../../testing/asserts.ts";
+
+const { test } = Deno;
+
+test({
+  name: "JSX can be rendered",
+  fn() {
+    class Component {
+      render() {
+        return <div></div>;
+      }
+    }
+
+    assertEquals(
+      new Component().render(),
+      `{"type":"div","props":null,"children":[]}`
+    );
+  }
+});