Merge pull request #5579 from jbrantly/react-reorg

Reorganize React definitions

react/README.md

@@ -1,11 +1,5 @@
 # React v0.13.3 Type Definitions
 
 This folder contains the following `.d.ts` files:
-* `react.d.ts` declares the external module `"react"`
-* `react-addons.d.ts` declares the external module `"react/addons"`
-* `react-global.d.ts` declares the internal module `React` in the global namespace
-* `react-addons-global.d.ts` extends the global `React` module with `addons`
-
-Interfaces are duplicated between these files; please take care to keep them in sync when making changes.
-See [#3615](https://github.com/borisyankov/DefinitelyTyped/pull/3615) for relevant discussion.
-
+* `react.d.ts` declares the module `"react"` and `"react/addons"`
+* `react-global.d.ts` declares the global namespace `React` (only include this if you are actually using the global `React`)

react/react-addons-global.d.ts

@@ -1,278 +0,0 @@
-// Type definitions for ReactWithAddons v0.13.1 (internal module)
-// Project: http://facebook.github.io/react/
-// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-/// <reference path="react-global.d.ts" />
-
-declare module React {
-    //
-    // React.addons
-    // ----------------------------------------------------------------------
-
-    export module addons {
-        export var CSSTransitionGroup: CSSTransitionGroup;
-        export var TransitionGroup: TransitionGroup;
-
-        export var LinkedStateMixin: LinkedStateMixin;
-        export var PureRenderMixin: PureRenderMixin;
-
-        export function batchedUpdates<A, B>(
-            callback: (a: A, b: B) => any, a: A, b: B): void;
-        export function batchedUpdates<A>(callback: (a: A) => any, a: A): void;
-        export function batchedUpdates(callback: () => any): void;
-
-        // deprecated: use petehunt/react-classset or JedWatson/classnames
-        export function classSet(cx: { [key: string]: boolean }): string;
-        export function classSet(...classList: string[]): string;
-
-        export function cloneWithProps<P>(
-            element: DOMElement<P>, props: P): DOMElement<P>;
-        export function cloneWithProps<P>(
-            element: ClassicElement<P>, props: P): ClassicElement<P>;
-        export function cloneWithProps<P>(
-            element: ReactElement<P>, props: P): ReactElement<P>;
-
-        export function createFragment(
-            object: { [key: string]: ReactNode }): ReactFragment;
-
-        export function update(value: any[], spec: UpdateArraySpec): any[];
-        export function update(value: {}, spec: UpdateSpec): any;
-
-        // Development tools
-        export import Perf = ReactPerf;
-        export import TestUtils = ReactTestUtils;
-    }
-
-    //
-    // React.addons (Transitions)
-    // ----------------------------------------------------------------------
-
-    interface TransitionGroupProps {
-        component?: ReactType;
-        childFactory?: (child: ReactElement<any>) => ReactElement<any>;
-    }
-
-    interface CSSTransitionGroupProps extends TransitionGroupProps {
-        transitionName: string;
-        transitionAppear?: boolean;
-        transitionEnter?: boolean;
-        transitionLeave?: boolean;
-    }
-
-    type CSSTransitionGroup = ComponentClass<CSSTransitionGroupProps>;
-    type TransitionGroup = ComponentClass<TransitionGroupProps>;
-
-    //
-    // React.addons (Mixins)
-    // ----------------------------------------------------------------------
-
-    interface ReactLink<T> {
-        value: T;
-        requestChange(newValue: T): void;
-    }
-
-    interface LinkedStateMixin extends Mixin<any, any> {
-        linkState<T>(key: string): ReactLink<T>;
-    }
-
-    interface PureRenderMixin extends Mixin<any, any> {
-    }
-
-    //
-    // Reat.addons.update
-    // ----------------------------------------------------------------------
-
-    interface UpdateSpec {
-        $set?: any;
-        $merge?: {};
-        $apply?(value: any): any;
-        // [key: string]: UpdateSpec;
-    }
-
-    interface UpdateArraySpec extends UpdateSpec {
-        $push?: any[];
-        $unshift?: any[];
-        $splice?: any[][];
-    }
-
-    //
-    // React.addons.Perf
-    // ----------------------------------------------------------------------
-
-    interface ComponentPerfContext {
-        current: string;
-        owner: string;
-    }
-
-    interface NumericPerfContext {
-        [key: string]: number;
-    }
-
-    interface Measurements {
-        exclusive: NumericPerfContext;
-        inclusive: NumericPerfContext;
-        render: NumericPerfContext;
-        counts: NumericPerfContext;
-        writes: NumericPerfContext;
-        displayNames: {
-            [key: string]: ComponentPerfContext;
-        };
-        totalTime: number;
-    }
-
-    module ReactPerf {
-        export function start(): void;
-        export function stop(): void;
-        export function printInclusive(measurements: Measurements[]): void;
-        export function printExclusive(measurements: Measurements[]): void;
-        export function printWasted(measurements: Measurements[]): void;
-        export function printDOM(measurements: Measurements[]): void;
-        export function getLastMeasurements(): Measurements[];
-    }
-
-    //
-    // React.addons.TestUtils
-    // ----------------------------------------------------------------------
-
-    interface MockedComponentClass {
-        new(): any;
-    }
-
-    module ReactTestUtils {
-        export import Simulate = ReactSimulate;
-
-        export function renderIntoDocument<P>(
-            element: ReactElement<P>): Component<P, any>;
-        export function renderIntoDocument<C extends Component<any, any>>(
-            element: ReactElement<any>): C;
-
-        export function mockComponent(
-            mocked: MockedComponentClass, mockTagName?: string): typeof ReactTestUtils;
-
-        export function isElementOfType(
-            element: ReactElement<any>, type: ReactType): boolean;
-        export function isTextComponent(instance: Component<any, any>): boolean;
-        export function isDOMComponent(instance: Component<any, any>): boolean;
-        export function isCompositeComponent(instance: Component<any, any>): boolean;
-        export function isCompositeComponentWithType(
-            instance: Component<any, any>,
-            type: ComponentClass<any>): boolean;
-
-        export function findAllInRenderedTree(
-            tree: Component<any, any>,
-            fn: (i: Component<any, any>) => boolean): Component<any, any>;
-
-        export function scryRenderedDOMComponentsWithClass(
-            tree: Component<any, any>,
-            className: string): DOMComponent<any>[];
-        export function findRenderedDOMComponentWithClass(
-            tree: Component<any, any>,
-            className: string): DOMComponent<any>;
-
-        export function scryRenderedDOMComponentsWithTag(
-            tree: Component<any, any>,
-            tagName: string): DOMComponent<any>[];
-        export function findRenderedDOMComponentWithTag(
-            tree: Component<any, any>,
-            tagName: string): DOMComponent<any>;
-
-        export function scryRenderedComponentsWithType<P>(
-            tree: Component<any, any>,
-            type: ComponentClass<P>): Component<P, {}>[];
-        export function scryRenderedComponentsWithType<C extends Component<any, any>>(
-            tree: Component<any, any>,
-            type: ComponentClass<any>): C[];
-
-        export function findRenderedComponentWithType<P>(
-            tree: Component<any, any>,
-            type: ComponentClass<P>): Component<P, {}>;
-        export function findRenderedComponentWithType<C extends Component<any, any>>(
-            tree: Component<any, any>,
-            type: ComponentClass<any>): C;
-
-        export function createRenderer(): ShallowRenderer;
-    }
-
-    interface SyntheticEventData {
-        altKey?: boolean;
-        button?: number;
-        buttons?: number;
-        clientX?: number;
-        clientY?: number;
-        changedTouches?: TouchList;
-        charCode?: boolean;
-        clipboardData?: DataTransfer;
-        ctrlKey?: boolean;
-        deltaMode?: number;
-        deltaX?: number;
-        deltaY?: number;
-        deltaZ?: number;
-        detail?: number;
-        getModifierState?(key: string): boolean;
-        key?: string;
-        keyCode?: number;
-        locale?: string;
-        location?: number;
-        metaKey?: boolean;
-        pageX?: number;
-        pageY?: number;
-        relatedTarget?: EventTarget;
-        repeat?: boolean;
-        screenX?: number;
-        screenY?: number;
-        shiftKey?: boolean;
-        targetTouches?: TouchList;
-        touches?: TouchList;
-        view?: AbstractView;
-        which?: number;
-    }
-
-    interface EventSimulator {
-        (element: Element, eventData?: SyntheticEventData): void;
-        (component: Component<any, any>, eventData?: SyntheticEventData): void;
-    }
-
-    module ReactSimulate {
-        export var blur: EventSimulator;
-        export var change: EventSimulator;
-        export var click: EventSimulator;
-        export var cut: EventSimulator;
-        export var doubleClick: EventSimulator;
-        export var drag: EventSimulator;
-        export var dragEnd: EventSimulator;
-        export var dragEnter: EventSimulator;
-        export var dragExit: EventSimulator;
-        export var dragLeave: EventSimulator;
-        export var dragOver: EventSimulator;
-        export var dragStart: EventSimulator;
-        export var drop: EventSimulator;
-        export var focus: EventSimulator;
-        export var input: EventSimulator;
-        export var keyDown: EventSimulator;
-        export var keyPress: EventSimulator;
-        export var keyUp: EventSimulator;
-        export var mouseDown: EventSimulator;
-        export var mouseEnter: EventSimulator;
-        export var mouseLeave: EventSimulator;
-        export var mouseMove: EventSimulator;
-        export var mouseOut: EventSimulator;
-        export var mouseOver: EventSimulator;
-        export var mouseUp: EventSimulator;
-        export var paste: EventSimulator;
-        export var scroll: EventSimulator;
-        export var submit: EventSimulator;
-        export var touchCancel: EventSimulator;
-        export var touchEnd: EventSimulator;
-        export var touchMove: EventSimulator;
-        export var touchStart: EventSimulator;
-        export var wheel: EventSimulator;
-    }
-
-    class ShallowRenderer {
-        getRenderOutput<E extends ReactElement<any>>(): E;
-        getRenderOutput(): ReactElement<any>;
-        render(element: ReactElement<any>, context?: any): void;
-        unmount(): void;
-    }
-}
-

react/react-addons-tests.ts

@@ -1,4 +1,4 @@
-/// <reference path="react-addons.d.ts" />
+/// <reference path="react.d.ts" />
 import React = require("react/addons");
 
 import TestUtils = React.addons.TestUtils;
@@ -207,7 +207,7 @@ myComponent.reset();
 // --------------------------------------------------------------------------
 
 var children: any[] = ["Hello world", [null], React.DOM.span(null)];
-var divStyle = { // CSSProperties
+var divStyle: React.CSSProperties = { // CSSProperties
     flex: "1 1 main-size",
     backgroundImage: "url('hello.png')"
 };

react/react-global-tests.ts

@@ -0,0 +1,367 @@
+/// <reference path="react-global.d.ts" />
+
+interface Props extends React.Props<MyComponent> {
+    hello: string;
+    world?: string;
+    foo: number;
+    bar: boolean;
+}
+
+interface State {
+    inputValue?: string;
+    seconds?: number;
+}
+
+interface Context {
+    someValue?: string;
+}
+
+interface ChildContext {
+    someOtherValue: string;
+}
+
+interface MyComponent extends React.Component<Props, State> {
+    reset(): void;
+}
+
+var props: Props = {
+    key: 42,
+    ref: "myComponent42",
+    hello: "world",
+    foo: 42,
+    bar: true
+};
+
+var container: Element;
+
+//
+// Top-Level API
+// --------------------------------------------------------------------------
+
+var ClassicComponent: React.ClassicComponentClass<Props> =
+    React.createClass<Props, State>({
+        getDefaultProps() {
+            return <Props>{
+                hello: undefined,
+                world: "peace",
+                foo: undefined,
+                bar: undefined,
+            };
+        },
+        getInitialState() {
+            return {
+                inputValue: this.context.someValue,
+                seconds: this.props.foo
+            };
+        },
+        reset() {
+            this.replaceState(this.getInitialState());
+        },
+        render() {
+            return React.DOM.div(null,
+                React.DOM.input({
+                    ref: input => this._input = input,
+                    value: this.state.inputValue
+                }));
+        }
+    });
+
+class ModernComponent extends React.Component<Props, State>
+    implements React.ChildContextProvider<ChildContext> {
+    
+    static propTypes: React.ValidationMap<Props> = {
+        foo: React.PropTypes.number
+    }
+    
+    static contextTypes: React.ValidationMap<Context> = {
+        someValue: React.PropTypes.string
+    }
+    
+    static childContextTypes: React.ValidationMap<ChildContext> = {
+        someOtherValue: React.PropTypes.string
+    }
+    
+    context: Context;
+    
+    getChildContext() {
+        return {
+            someOtherValue: 'foo'
+        }
+    }
+    
+    state = {
+        inputValue: this.context.someValue,
+        seconds: this.props.foo
+    }
+    
+    reset() {
+        this.setState({
+            inputValue: this.context.someValue,
+            seconds: this.props.foo
+        });
+    }
+
+    private _input: React.HTMLComponent;
+    
+    render() {
+        return React.DOM.div(null,
+            React.DOM.input({
+                ref: input => this._input = input,
+                value: this.state.inputValue
+            }));
+    }
+}
+
+// React.createFactory
+var factory: React.Factory<Props> =
+    React.createFactory(ModernComponent);
+var factoryElement: React.ReactElement<Props> =
+    factory(props);
+
+var classicFactory: React.ClassicFactory<Props> =
+    React.createFactory(ClassicComponent);
+var classicFactoryElement: React.ClassicElement<Props> =
+    classicFactory(props);
+
+var domFactory: React.DOMFactory<any> =
+    React.createFactory("foo");
+var domFactoryElement: React.DOMElement<any> =
+    domFactory();
+
+// React.createElement
+var element: React.ReactElement<Props> =
+    React.createElement(ModernComponent, props);
+var classicElement: React.ClassicElement<Props> =
+    React.createElement(ClassicComponent, props);
+var domElement: React.HTMLElement =
+    React.createElement("div");
+
+// React.cloneElement
+var clonedElement: React.ReactElement<Props> =
+    React.cloneElement(element, props);
+var clonedClassicElement: React.ClassicElement<Props> =
+    React.cloneElement(classicElement, props);
+var clonedDOMElement: React.HTMLElement =
+    React.cloneElement(domElement);
+
+// React.render
+var component: React.Component<Props, any> =
+    React.render(element, container);
+var classicComponent: React.ClassicComponent<Props, any> =
+    React.render(classicElement, container);
+var domComponent: React.DOMComponent<any> =
+    React.render(domElement, container);
+
+// Other Top-Level API
+var unmounted: boolean = React.unmountComponentAtNode(container);
+var str: string = React.renderToString(element);
+var markup: string = React.renderToStaticMarkup(element);
+var notValid: boolean = React.isValidElement(props); // false
+var isValid = React.isValidElement(element); // true
+React.initializeTouchEvents(true);
+var domNode: Element = React.findDOMNode(component);
+domNode = React.findDOMNode(domNode);
+
+//
+// React Elements
+// --------------------------------------------------------------------------
+
+var type = element.type;
+var elementProps: Props = element.props;
+var key = element.key;
+
+//
+// React Components
+// --------------------------------------------------------------------------
+
+var displayName: string = ClassicComponent.displayName;
+var defaultProps: Props = ClassicComponent.getDefaultProps();
+var propTypes: React.ValidationMap<Props> = ClassicComponent.propTypes;
+
+//
+// Component API
+// --------------------------------------------------------------------------
+
+// modern
+var componentState: State = component.state;
+component.setState({ inputValue: "!!!" });
+component.forceUpdate();
+
+// classic
+var htmlElement: Element = classicComponent.getDOMNode();
+var divElement: HTMLDivElement = classicComponent.getDOMNode<HTMLDivElement>();
+var isMounted: boolean = classicComponent.isMounted();
+classicComponent.setProps(elementProps);
+classicComponent.replaceProps(props);
+classicComponent.replaceState({ inputValue: "???", seconds: 60 });
+
+var myComponent = <MyComponent>component;
+myComponent.reset();
+
+//
+// Attributes
+// --------------------------------------------------------------------------
+
+var children: any[] = ["Hello world", [null], React.DOM.span(null)];
+var divStyle: React.CSSProperties = { // CSSProperties
+    flex: "1 1 main-size",
+    backgroundImage: "url('hello.png')"
+};
+var htmlAttr: React.HTMLAttributes = {
+    key: 36,
+    ref: "htmlComponent",
+    children: children,
+    className: "test-attr",
+    style: divStyle,
+    onClick: (event: React.MouseEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+    },
+    dangerouslySetInnerHTML: {
+        __html: "<strong>STRONG</strong>"
+    }
+};
+React.DOM.div(htmlAttr);
+React.DOM.span(htmlAttr);
+React.DOM.input(htmlAttr);
+
+React.DOM.svg({ viewBox: "0 0 48 48" },
+    React.DOM.rect({
+      x: 22,
+      y: 10,
+      width: 4,
+      height: 28
+    }),
+    React.DOM.rect({
+      x: 10,
+      y: 22,
+      width: 28,
+      height: 4
+    }));
+
+
+//
+// React.PropTypes
+// --------------------------------------------------------------------------
+
+var PropTypesSpecification: React.ComponentSpec<any, any> = {
+    propTypes: {
+        optionalArray: React.PropTypes.array,
+        optionalBool: React.PropTypes.bool,
+        optionalFunc: React.PropTypes.func,
+        optionalNumber: React.PropTypes.number,
+        optionalObject: React.PropTypes.object,
+        optionalString: React.PropTypes.string,
+        optionalNode: React.PropTypes.node,
+        optionalElement: React.PropTypes.element,
+        optionalMessage: React.PropTypes.instanceOf(Date),
+        optionalEnum: React.PropTypes.oneOf(["News", "Photos"]),
+        optionalUnion: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.number,
+            React.PropTypes.instanceOf(Date)
+        ]),
+        optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+        optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+        optionalObjectWithShape: React.PropTypes.shape({
+            color: React.PropTypes.string,
+            fontSize: React.PropTypes.number
+        }),
+        requiredFunc: React.PropTypes.func.isRequired,
+        requiredAny: React.PropTypes.any.isRequired,
+        customProp: function(props: any, propName: string, componentName: string) {
+            if (!/matchme/.test(props[propName])) {
+                return new Error("Validation failed!");
+            }
+            return null;
+        }
+    },
+    render: (): React.ReactElement<any> => {
+        return null;
+    }
+};
+
+//
+// ContextTypes
+// --------------------------------------------------------------------------
+
+var ContextTypesSpecification: React.ComponentSpec<any, any> = {
+    contextTypes: {
+        optionalArray: React.PropTypes.array,
+        optionalBool: React.PropTypes.bool,
+        optionalFunc: React.PropTypes.func,
+        optionalNumber: React.PropTypes.number,
+        optionalObject: React.PropTypes.object,
+        optionalString: React.PropTypes.string,
+        optionalNode: React.PropTypes.node,
+        optionalElement: React.PropTypes.element,
+        optionalMessage: React.PropTypes.instanceOf(Date),
+        optionalEnum: React.PropTypes.oneOf(["News", "Photos"]),
+        optionalUnion: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.number,
+            React.PropTypes.instanceOf(Date)
+        ]),
+        optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+        optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+        optionalObjectWithShape: React.PropTypes.shape({
+            color: React.PropTypes.string,
+            fontSize: React.PropTypes.number
+        }),
+        requiredFunc: React.PropTypes.func.isRequired,
+        requiredAny: React.PropTypes.any.isRequired,
+        customProp: function(props: any, propName: string, componentName: string) {
+            if (!/matchme/.test(props[propName])) {
+                return new Error("Validation failed!");
+            }
+            return null;
+        }
+    },
+    render: (): React.ReactElement<any> => {
+        return null;
+    }
+};
+
+//
+// React.Children
+// --------------------------------------------------------------------------
+
+var childMap: { [key: string]: number } =
+    React.Children.map<number>(children, (child) => { return 42; });
+React.Children.forEach(children, (child) => {});
+var nChildren: number = React.Children.count(children);
+var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]);
+
+//
+// Example from http://facebook.github.io/react/
+// --------------------------------------------------------------------------
+
+interface TimerState {
+    secondsElapsed: number;
+}
+class Timer extends React.Component<{}, TimerState> {
+    state = {
+        secondsElapsed: 0
+    }
+    private _interval: number;
+    tick() {
+        this.setState((prevState, props) => ({
+            secondsElapsed: prevState.secondsElapsed + 1
+        }));
+    }
+    componentDidMount() {
+        this._interval = setInterval(() => this.tick(), 1000);
+    }
+    componentWillUnmount() {
+        clearInterval(this._interval);
+    }
+    render() {
+        return React.DOM.div(
+            null,
+            "Seconds Elapsed: ",
+            this.state.secondsElapsed
+        );
+    }
+}
+React.render(React.createElement(Timer), container);
+