From 09f788d73f32fe8778a760bd57c8ae28c044bd87 Mon Sep 17 00:00:00 2001
From: Phips Peter <pspeter333@gmail.com>
Date: Mon, 1 Dec 2014 13:29:31 -0800
Subject: [PATCH 01/10] Merging React and React with Addons

This seems simpler and enables developers to only require the addons
they want.
---
 react-addons/react-addons.d.ts                | 175 ----------
 .../legacy/react-addons-0.11-tests.ts         |   0
 .../legacy/react-addons-0.11.d.ts             |   2 +-
 {react-addons => react}/react-addons-tests.ts |   2 +-
 react/react.d.ts                              | 307 +++++++++++++++---
 5 files changed, 261 insertions(+), 225 deletions(-)
 delete mode 100644 react-addons/react-addons.d.ts
 rename {react-addons => react}/legacy/react-addons-0.11-tests.ts (100%)
 rename {react-addons => react}/legacy/react-addons-0.11.d.ts (98%)
 rename {react-addons => react}/react-addons-tests.ts (99%)

diff --git a/react-addons/react-addons.d.ts b/react-addons/react-addons.d.ts
deleted file mode 100644
index 245d339dbb..0000000000
--- a/react-addons/react-addons.d.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-// Type definitions for React with Addons 0.12.RC
-// Project: http://facebook.github.io/react/
-// Definitions by: Asana <https://asana.com>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-
-/// <reference path="../react/react.d.ts" />
-
-declare module "react/addons" {
-    export = React;
-}
-
-declare module React {
-    export var addons: {
-        classSet: (classes: {[key: string]: boolean}) => string;
-        cloneWithProps: CloneWithProps<any>;
-        CSSTransitionGroup: ReactComponentFactory<CSSTransitionGroupProps>;
-        LinkedStateMixin: LinkedStateMixin<any, any>;
-        Perf: Perf;
-        PureRenderMixin: Mixin<any, any>;
-        TestUtils: TestUtils;
-        TransitionGroup: ReactComponentFactory<any>;
-        update(object: Object, changes: Object): Object;
-    };
-
-    export interface CloneWithProps<P> {
-        (instance: ReactComponentElement<P>, extraProps?: P): ReactComponentElement<P>;
-    }
-
-    export interface ReactLink<T> {
-        value: T;
-        requestChange(newValue: T): void;
-    }
-
-    export interface LinkedStateMixin<P, S> extends Mixin<P, S> {
-        linkState<T>(key: string): ReactLink<T>;
-    }
-
-    export interface ComponentPerfContext {
-        current: string;
-        owner: string;
-    }
-
-    export interface CSSTransitionGroupProps {
-        transitionName: string;
-    }
-
-    export interface TransitionsSpecification<P, S> extends Specification<P, S> {
-        componentWillEnter?(callback: () => void): void;
-        componentDidEnter?(): void;
-        componentWillLeave?(callback: () => void): void;
-        componentDidLeave?(): void;
-    }
-
-    export interface NumericPerfContext {
-        [key: string]: number;
-    }
-
-    export interface Measurements {
-        exclusive: NumericPerfContext;
-        inclusive: NumericPerfContext;
-        render: NumericPerfContext;
-        counts: NumericPerfContext;
-        writes: NumericPerfContext;
-        displayNames: {
-            [key: string]: ComponentPerfContext;
-        };
-        totalTime: number;
-    }
-
-    export interface Perf {
-        start(): void;
-        stop(): void;
-        printInclusive(measurements: Measurements[]): void;
-        printExclusive(measurements: Measurements[]): void;
-        printWasted(measurements: Measurements[]): void;
-        printDOM(measurements: Measurements[]): void;
-        getLastMeasurements(): Measurements[];
-    }
-
-    export interface TestUtils {
-        Simulate: Simulate;
-        renderIntoDocument<P>(instance: ReactComponentElement<P>): ReactComponentElement<P>;
-        renderIntoDocument(instance: ReactHTMLElement): ReactHTMLElement;
-        renderIntoDocument(instance: ReactSVGElement): ReactSVGElement;
-        mockComponent(componentClass: ReactComponentFactory<any>, mockTagName?: string): TestUtils;
-        isDescriptorOfType(descriptor: ReactElement<any, any>, componentClass: ReactComponentFactory<any>): boolean;
-        isDOMComponent(instance: ReactElement<any, any>): boolean;
-        isCompositeComponent(instance: ReactElement<any, any>): boolean;
-        isCompositeComponentWithType(instance: ReactElement<any, any>, componentClass: ReactComponentFactory<any>): boolean;
-        isTextComponent(instance: ReactElement<any, any>): boolean;
-        findAllInRenderedTree(tree: ReactElement<any, any>, test: (component: ReactElement<any, any>) => boolean): ReactElement<any, any>[];
-        scryRenderedDOMComponentsWithClass(tree: ReactElement<any, any>, className: string): ReactElement<any, any>[];
-        findRenderedDOMComponentWithClass(tree: ReactElement<any, any>, className: string): ReactElement<any, any>;
-        scryRenderedDOMComponentsWithTag(tree: ReactElement<any, any>, tagName: string): ReactElement<any, any>[];
-        findRenderedDOMComponentWithTag(tree: ReactElement<any, any>, tagName: string): ReactElement<any, any>;
-        scryRenderedComponentsWithTag(tree: ReactElement<any, any>, componentClass: Function): ReactElement<any, any>[];
-        findRenderedComponentWithType<P>(tree: ReactElement<any, any>, componentClass: ReactComponentFactory<P>): Component<P, any>;
-        scryRenderedComponentsWithType<P>(tree: ReactElement<any, any>, componentClass: ReactComponentFactory<P>): Component<P, any>[];
-    }
-
-    export 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;
-    }
-
-    export interface EventSimulator {
-        (element: Element, eventData?: SyntheticEventData): void;
-        (descriptor: ReactElement<any, any>, eventData?: SyntheticEventData): void;
-    }
-
-    export interface Simulate {
-        blur: EventSimulator;
-        change: EventSimulator;
-        click: EventSimulator;
-        cut: EventSimulator;
-        doubleClick: EventSimulator;
-        drag: EventSimulator;
-        dragEnd: EventSimulator;
-        dragEnter: EventSimulator;
-        dragExit: EventSimulator;
-        dragLeave: EventSimulator;
-        dragOver: EventSimulator;
-        dragStart: EventSimulator;
-        drop: EventSimulator;
-        focus: EventSimulator;
-        input: EventSimulator;
-        keyDown: EventSimulator;
-        keyPress: EventSimulator;
-        keyUp: EventSimulator;
-        mouseDown: EventSimulator;
-        mouseEnter: EventSimulator;
-        mouseLeave: EventSimulator;
-        mouseMove: EventSimulator;
-        mouseOut: EventSimulator;
-        mouseOver: EventSimulator;
-        mouseUp: EventSimulator;
-        paste: EventSimulator;
-        scroll: EventSimulator;
-        submit: EventSimulator;
-        touchCancel: EventSimulator;
-        touchEnd: EventSimulator;
-        touchMove: EventSimulator;
-        touchStart: EventSimulator;
-        wheel: EventSimulator;
-    }
-}
diff --git a/react-addons/legacy/react-addons-0.11-tests.ts b/react/legacy/react-addons-0.11-tests.ts
similarity index 100%
rename from react-addons/legacy/react-addons-0.11-tests.ts
rename to react/legacy/react-addons-0.11-tests.ts
diff --git a/react-addons/legacy/react-addons-0.11.d.ts b/react/legacy/react-addons-0.11.d.ts
similarity index 98%
rename from react-addons/legacy/react-addons-0.11.d.ts
rename to react/legacy/react-addons-0.11.d.ts
index 3e2f22a513..d027402468 100644
--- a/react-addons/legacy/react-addons-0.11.d.ts
+++ b/react/legacy/react-addons-0.11.d.ts
@@ -3,7 +3,7 @@
 // Definitions by: Asana <https://asana.com>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
 
-/// <reference path="../../react/legacy/react-0.11.d.ts" />
+/// <reference path="react-0.11.d.ts" />
 
 declare module "react/addons-0.11" {
     export = React;
diff --git a/react-addons/react-addons-tests.ts b/react/react-addons-tests.ts
similarity index 99%
rename from react-addons/react-addons-tests.ts
rename to react/react-addons-tests.ts
index 7a835dfebe..5fbca7cffe 100644
--- a/react-addons/react-addons-tests.ts
+++ b/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");
 
 var PropTypesSpecification: React.Specification<any, any> = {
diff --git a/react/react.d.ts b/react/react.d.ts
index f7e5f5387c..48fc0c1286 100644
--- a/react/react.d.ts
+++ b/react/react.d.ts
@@ -1,53 +1,90 @@
-// Type definitions for React 0.12.RC
+// Type definitions for React 0.12.1
 // Project: http://facebook.github.io/react/
 // Definitions by: Asana <https://asana.com>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
 
 declare module "react" {
-    export = React;
+    var exports: React.ModuleExports;
+    export = exports;
+}
+
+declare module "react/addons" {
+    var exports: React.ModuleWithAddonsExports;
+    export = exports;
+}
+
+declare module "react/lib/cloneWithProps" {
+    interface exports<P> extends React.CloneWithProps<P> {}
+    export = exports;
+}
+
+declare module "react/lib/cx" {
+    var exports: React.ClassSet;
+    export = exports;
+}
+
+declare module "react/lib/LinkedStateMixin" {
+    interface exports<P, S> extends React.LinkedStateMixin<P, S> {}
+    export = exports;
+}
+
+declare module "react/lib/ReactComponentWithPureRenderMixin" {
+    var exports: React.PureRenderMixin;
+    export = exports;
+}
+
+declare module "react/lib/ReactCSSTransitionGroup" {
+    var exports: React.CSSTransitionGroup;
+    export = exports;
+}
+
+
+declare module "react/lib/ReactDefaultPerf" {
+    var exports: React.Perf;
+    export = exports;
+}
+
+declare module "react/lib/ReactTestUtils" {
+    var exports: React.TestUtils;
+    export = exports;
+}
+
+declare module "react/lib/ReactTransitionGroup" {
+    var exports: React.TransitionGroup;
+    export = exports;
+}
+
+declare module "react/lib/update" {
+    var exports: React.Update;
+    export = exports;
 }
 
 declare module React {
-    export function createClass<P, S>(specification: Specification<P, S>): ReactComponentFactory<P>;
-
-    export function createFactory<P>(clazz: ReactComponentFactory<P>): ReactComponentFactory<P>;
-
-    export function createElement<P>(clazz: ReactComponentFactory<P>, props: P, ...children: any[]): ReactComponentElement<P>;
-
-    export function createElement(type: string, props: DomAttributes, ...children: any[]): ReactHTMLElement;
-
-    export function createElement(type: string, props: SvgAttributes, ...children: any[]): ReactSVGElement;
-
-    export function render<P>(component: ReactComponentElement<P>, container: Element, callback?: () => void): ReactComponentElement<P>;
-
-    export function render(component: ReactHTMLElement, container: Element, callback?: () => void): ReactHTMLElement;
-
-    export function render(component: ReactSVGElement, container: Element, callback?: () => void): ReactSVGElement;
-
-    export function unmountComponentAtNode(container: Element): boolean;
-
-    export function renderToString<P>(component: ReactComponentElement<P>): string;
-
-    export function renderToString(component: ReactHTMLElement): string;
-
-    export function renderToString(component: ReactSVGElement): string;
-
-    export function renderToStaticMarkup<P>(component: ReactComponentElement<P>): string;
-
-    export function renderToStaticMarkup(component: ReactHTMLElement): string;
-
-    export function renderToStaticMarkup(component: ReactSVGElement): string;
-
-    export function isValidClass(factory: ReactComponentFactory<any>): boolean;
-
-    export function isValidElement(component: ReactComponentElement<any>): boolean;
-
-    export function isValidElement(component: ReactHTMLElement): boolean;
-
-    export function isValidElement(component: ReactSVGElement): boolean;
-
-    export function initializeTouchEvents(shouldUseTouch: boolean): void;
-
+    export interface ModuleExports {
+        createClass<P, S>(specification: Specification<P, S>): ReactComponentFactory<P>;
+        createFactory<P>(clazz: ReactComponentFactory<P>): ReactComponentFactory<P>;
+        createElement<P>(clazz: ReactComponentFactory<P>, props: P, ...children: any[]): ReactComponentElement<P>;
+        createElement(type: string, props: DomAttributes, ...children: any[]): ReactHTMLElement;
+        createElement(type: string, props: SvgAttributes, ...children: any[]): ReactSVGElement;
+        render<P>(component: ReactComponentElement<P>, container: Element, callback?: () => void): Component<P, {}>;
+        render(component: ReactHTMLElement, container: Element, callback?: () => void): ReactHTMLElement;
+        render(component: ReactSVGElement, container: Element, callback?: () => void): ReactSVGElement;
+        unmountComponentAtNode(container: Element): boolean;
+        renderToString<P>(component: ReactComponentElement<P>): string;
+        renderToString(component: ReactHTMLElement): string;
+        renderToString(component: ReactSVGElement): string;
+        renderToStaticMarkup<P>(component: ReactComponentElement<P>): string;
+        renderToStaticMarkup(component: ReactHTMLElement): string;
+        renderToStaticMarkup(component: ReactSVGElement): string;
+        isValidClass(factory: ReactComponentFactory<any>): boolean;
+        isValidElement(component: ReactComponentElement<any>): boolean;
+        isValidElement(component: ReactHTMLElement): boolean;
+        isValidElement(component: ReactSVGElement): boolean;
+        initializeTouchEvents(shouldUseTouch: boolean): void;
+        DOM: DomConstructors;
+        Children: Children;
+        PropTypes: PropTypes;
+    }
 
     export interface ReactComponentFactory<P> {
         (properties?: P, ...children: any[]): ReactComponentElement<P>;
@@ -154,7 +191,7 @@ declare module React {
         [key: string]: Validator<P>;
     }
 
-    export var PropTypes: {
+    export interface PropTypes {
         any: Requireable<any>;
         array: Requireable<any>;
         bool: Requireable<any>;
@@ -170,14 +207,14 @@ declare module React {
         arrayOf: (type: Validator<any>) => Requireable<any>;
         objectOf: (type: Validator<any>) => Requireable<any>;
         shape: (type: ValidationMap<any>) => Requireable<any>;
-    };
+    }
 
-    export var Children: {
+    export interface Children {
         map(children: any[], fn: (child: any) => any): any[];
         forEach(children: any[], fn: (child: any) => any): void;
         count(children: any[]): number;
         only(children: any[]): any;
-    };
+    }
 
     // Browser Interfaces
     // Taken from https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
@@ -477,7 +514,7 @@ declare module React {
         y?: any;
     }
 
-    export var DOM: {
+    export interface DomConstructors {
         // HTML
         a: DomElement;
         abbr: DomElement;
@@ -608,5 +645,179 @@ declare module React {
         svg: SvgElement;
         text: SvgElement;
         tspan: SvgElement;
-    };
+    }
+
+    // Addons
+    export interface ModuleWithAddonsExports extends ModuleExports {
+        addons: ReactAddons;
+    }
+
+    export interface ReactAddons {
+        cloneWithProps<P>(instance: React.ReactComponentElement<P>, extraProps?: P): React.ReactComponentElement<P>;
+        classSet: ClassSet;
+        LinkedStateMixin: LinkedStateMixin<any, any>;
+        PureRenderMixin: PureRenderMixin;
+        CSSTransitionGroup: CSSTransitionGroup;
+        Perf: Perf;
+        TestUtils: TestUtils;
+        TransitionGroup: TransitionGroup;
+        update: Update;
+    }
+
+    export interface CloneWithProps<P> {
+        (instance: React.ReactComponentElement<P>, extraProps?: P): React.ReactComponentElement<P>;
+    }
+
+    export interface ClassSet {
+        (classes: {[key: string]: boolean}): string
+    }
+
+    export interface ReactLink<T> {
+        value: T;
+        requestChange(newValue: T): void;
+    }
+
+    export interface LinkedStateMixin<P, S> extends React.Mixin<P, S> {
+        linkState<T>(key: string): ReactLink<T>;
+    }
+
+    export interface PureRenderMixin extends React.Mixin<any, any> {}
+
+    export interface CSSTransitionGroup extends React.ReactComponentFactory<{
+        transitionName: string;
+    }> {}
+
+    export interface ComponentPerfContext {
+        current: string;
+        owner: string;
+    }
+
+    export interface NumericPerfContext {
+        [key: string]: number;
+    }
+
+    export interface Measurements {
+        exclusive: NumericPerfContext;
+        inclusive: NumericPerfContext;
+        render: NumericPerfContext;
+        counts: NumericPerfContext;
+        writes: NumericPerfContext;
+        displayNames: {
+            [key: string]: ComponentPerfContext;
+        };
+        totalTime: number;
+    }
+
+    export interface Perf {
+        start(): void;
+        stop(): void;
+        printInclusive(measurements: Measurements[]): void;
+        printExclusive(measurements: Measurements[]): void;
+        printWasted(measurements: Measurements[]): void;
+        printDOM(measurements: Measurements[]): void;
+        getLastMeasurements(): Measurements[];
+    }
+
+    export interface TestUtils {
+        Simulate: Simulate;
+        renderIntoDocument<P>(instance: ReactComponentElement<P>): ReactComponentElement<P>;
+        renderIntoDocument(instance: ReactHTMLElement): ReactHTMLElement;
+        renderIntoDocument(instance: ReactSVGElement): ReactSVGElement;
+        mockComponent(componentClass: ReactComponentFactory<any>, mockTagName?: string): TestUtils;
+        isDescriptorOfType(descriptor: ReactElement<any, any>, componentClass: ReactComponentFactory<any>): boolean;
+        isDOMComponent(instance: ReactElement<any, any>): boolean;
+        isCompositeComponent(instance: ReactElement<any, any>): boolean;
+        isCompositeComponentWithType(instance: ReactElement<any, any>, componentClass: ReactComponentFactory<any>): boolean;
+        isTextComponent(instance: ReactElement<any, any>): boolean;
+        findAllInRenderedTree(tree: ReactElement<any, any>, test: (component: ReactElement<any, any>) => boolean): ReactElement<any, any>[];
+        scryRenderedDOMComponentsWithClass(tree: ReactElement<any, any>, className: string): ReactElement<any, any>[];
+        findRenderedDOMComponentWithClass(tree: ReactElement<any, any>, className: string): ReactElement<any, any>;
+        scryRenderedDOMComponentsWithTag(tree: ReactElement<any, any>, tagName: string): ReactElement<any, any>[];
+        findRenderedDOMComponentWithTag(tree: ReactElement<any, any>, tagName: string): ReactElement<any, any>;
+        scryRenderedComponentsWithTag(tree: ReactElement<any, any>, componentClass: Function): ReactElement<any, any>[];
+        findRenderedComponentWithType<P>(tree: ReactElement<any, any>, componentClass: ReactComponentFactory<P>): Component<P, any>;
+        scryRenderedComponentsWithType<P>(tree: ReactElement<any, any>, componentClass: ReactComponentFactory<P>): Component<P, any>[];
+    }
+
+    export 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;
+    }
+
+    export interface EventSimulator {
+        (element: Element, eventData?: SyntheticEventData): void;
+        (descriptor: ReactElement<any, any>, eventData?: SyntheticEventData): void;
+    }
+
+    export interface Simulate {
+        blur: EventSimulator;
+        change: EventSimulator;
+        click: EventSimulator;
+        cut: EventSimulator;
+        doubleClick: EventSimulator;
+        drag: EventSimulator;
+        dragEnd: EventSimulator;
+        dragEnter: EventSimulator;
+        dragExit: EventSimulator;
+        dragLeave: EventSimulator;
+        dragOver: EventSimulator;
+        dragStart: EventSimulator;
+        drop: EventSimulator;
+        focus: EventSimulator;
+        input: EventSimulator;
+        keyDown: EventSimulator;
+        keyPress: EventSimulator;
+        keyUp: EventSimulator;
+        mouseDown: EventSimulator;
+        mouseEnter: EventSimulator;
+        mouseLeave: EventSimulator;
+        mouseMove: EventSimulator;
+        mouseOut: EventSimulator;
+        mouseOver: EventSimulator;
+        mouseUp: EventSimulator;
+        paste: EventSimulator;
+        scroll: EventSimulator;
+        submit: EventSimulator;
+        touchCancel: EventSimulator;
+        touchEnd: EventSimulator;
+        touchMove: EventSimulator;
+        touchStart: EventSimulator;
+        wheel: EventSimulator;
+    }
+
+    export interface TransitionGroup extends ReactComponentFactory<any> {}
+
+    export interface Update {
+        (object: Object, changes: Object): Object
+    }
+
 }
\ No newline at end of file

From a99c1ad839fbd00e00f89e3d54490fd8a3d86294 Mon Sep 17 00:00:00 2001
From: Vincent Siao <vincent@asana.com>
Date: Tue, 2 Dec 2014 17:00:15 -0800
Subject: [PATCH 02/10] Cleanup react.d.ts; introduce Instance<P> interface to
 replace DomReferencer<P>; alias EventHandler types; etc...

---
 react/react-addons-tests.ts |  111 +---
 react/react-tests.ts        |   29 +-
 react/react.d.ts            | 1074 +++++++++++++++++++----------------
 3 files changed, 585 insertions(+), 629 deletions(-)

diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts
index 5fbca7cffe..d89c383bfe 100644
--- a/react/react-addons-tests.ts
+++ b/react/react-addons-tests.ts
@@ -1,113 +1,8 @@
 /// <reference path="react.d.ts" />
 import React = require("react/addons");
 
-var PropTypesSpecification: React.Specification<any, any> = {
-    propTypes: {
-        // You can declare that a prop is a specific JS primitive. By default, these
-        // are all optional.
-        optionalArray: React.PropTypes.array,
-        optionalBool: React.PropTypes.bool,
-        optionalFunc: React.PropTypes.func,
-        optionalNumber: React.PropTypes.number,
-        optionalObject: React.PropTypes.object,
-        optionalString: React.PropTypes.string,
-
-        // Anything that can be rendered: numbers, strings, components or an array
-        // containing these types.
-        optionalRenderable: React.PropTypes.node,
-
-        // A React component.
-        optionalComponent: React.PropTypes.component,
-
-        // You can also declare that a prop is an instance of a class. This uses
-        // JS's instanceof operator.
-        optionalMessage: React.PropTypes.instanceOf(Date),
-
-        // You can ensure that your prop is limited to specific values by treating
-        // it as an enum.
-        optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
-
-        // An object that could be one of many types
-        optionalUnion: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.number,
-            React.PropTypes.instanceOf(Date)
-        ]),
-
-        // An array of a certain type
-        optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
-
-        // An object with property values of a certain type
-        optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
-
-        // An object taking on a particular shape
-        optionalObjectWithShape: React.PropTypes.shape({
-            color: React.PropTypes.string,
-            fontSize: React.PropTypes.number
-        }),
-
-        // You can chain any of the above with `isRequired` to make sure a warning
-        // is shown if the prop isn't provided.
-        requiredFunc: React.PropTypes.func.isRequired,
-
-        // A value of any data type
-        requiredAny: React.PropTypes.any.isRequired,
-
-        // You can also specify a custom validator. It should return an Error
-        // object if the validation fails. Don't `console.warn` or throw, as this
-        // won't work inside `oneOfType`.
-        customProp: function(props, propName, componentName) {
-            if (!/matchme/.test(props[propName])) {
-                return new Error('Validation failed!');
-            }
-            return null;
-        }
-    },
-    render: (): React.ReactHTMLElement => {
-        return null;
-    }
-};
-
-React.createClass(PropTypesSpecification);
-
-var mountNode: Element;
-
-var HelloMessage = React.createClass({displayName: 'HelloMessage',
-    render: function() {
-        return React.DOM.div(null, "Hello ", (<React.Component<{name: string}, any>>this).props.name);
-    }
-});
-
-React.render(HelloMessage({name: "John"}), mountNode);
-
-var Timer = React.createClass({displayName: 'Timer',
-    getInitialState: function() {
-        return {secondsElapsed: 0};
-    },
-    tick: function() {
-        (<React.Component<any, {secondsElapsed: number}>>this).setState({
-            secondsElapsed: (<React.Component<any, {secondsElapsed: number}>>this).state.secondsElapsed + 1
-        });
-    },
-    componentDidMount: function() {
-        this.interval = setInterval(this.tick, 1000);
-    },
-    componentWillUnmount: function() {
-        clearInterval(this.interval);
-    },
-    render: function() {
-        return React.DOM.div(
-            null,
-            "Seconds Elapsed: ",
-            (<React.Component<any, {secondsElapsed: number}>>this).state.secondsElapsed
-        );
-    }
-});
-
-React.render(Timer(null), mountNode);
-
 // TestUtils
-var that: React.Component<any, any>;
+var that: React.ComponentInstance<any, any>;
 var node = that.refs['input'].getDOMNode();
 React.addons.TestUtils.Simulate.click(node);
 React.addons.TestUtils.Simulate.change(node);
@@ -118,12 +13,12 @@ var Greeting = React.createClass({displayName: 'Greeting',
         return {morning: true};
     },
     render: function() {
-        var me = <React.Component<{name: string}, {morning: boolean}>>this;
+        var me = <React.ComponentInstance<{name: string}, {morning: boolean}>>this;
         return React.DOM.div(null, (me.state.morning ? "Hello" : "Goodbye "), me.props.name);
     }
 });
 
-var root = React.addons.TestUtils.renderIntoDocument(Greeting({name: "John"}));
+var root = React.addons.TestUtils.renderIntoDocument(React.createElement(Greeting, {name: "John"}));
 var greeting = React.addons.TestUtils.findRenderedComponentWithType(root, Greeting);
 greeting.setState({
     morning: false
diff --git a/react/react-tests.ts b/react/react-tests.ts
index 37380b23b9..5d1743cbb5 100644
--- a/react/react-tests.ts
+++ b/react/react-tests.ts
@@ -1,7 +1,7 @@
 /// <reference path="react.d.ts" />
 import React = require("react");
 
-var PropTypesSpecification: React.Specification<any, any> = {
+var PropTypesSpecification: React.ComponentSpec<any, any> = {
     propTypes: {
         // You can declare that a prop is a specific JS primitive. By default, these
         // are all optional.
@@ -14,10 +14,10 @@ var PropTypesSpecification: React.Specification<any, any> = {
 
         // Anything that can be rendered: numbers, strings, components or an array
         // containing these types.
-        optionalRenderable: React.PropTypes.node,
+        optionalNode: React.PropTypes.node,
 
-        // A React component.
-        optionalComponent: React.PropTypes.component,
+        // A React element
+        optionalElement: React.PropTypes.element,
 
         // You can also declare that a prop is an instance of a class. This uses
         // JS's instanceof operator.
@@ -56,7 +56,7 @@ var PropTypesSpecification: React.Specification<any, any> = {
         // You can also specify a custom validator. It should return an Error
         // object if the validation fails. Don't `console.warn` or throw, as this
         // won't work inside `oneOfType`.
-        customProp: function(props, propName, componentName) {
+        customProp: function(props: any, propName: string, componentName: string) {
             if (!/matchme/.test(props[propName])) {
                 return new Error('Validation failed!');
             }
@@ -76,17 +76,13 @@ interface HelloMessageProps {
     name: string;
 }
 
-var HelloMessage = React.createClass<HelloMessageProps, any>({displayName: 'HelloMessage',
+var HelloMessage = React.createClass<HelloMessageProps>({
+    displayName: 'HelloMessage',
     render: function() {
-        return React.DOM.div(null, "Hello ", (<React.Component<HelloMessageProps, any>>this).props.name);
+        return React.DOM.div(null, "Hello ", (<React.ReactInstance<HelloMessageProps>>this).props.name);
     }
 });
 
-// This code - calling a component directly - is deprecated in v0.12
-// See http://fb.me/react-legacyfactory
-React.render(HelloMessage({ name: "John" }), mountNode);
-
-// Create a factory instead
 var HelloMessageFactory = React.createFactory(HelloMessage)
 React.render(HelloMessageFactory({ name: "John" }), mountNode)
 
@@ -95,8 +91,9 @@ var Timer = React.createClass({displayName: 'Timer',
         return {secondsElapsed: 0};
     },
     tick: function() {
-        (<React.Component<any, {secondsElapsed: number}>>this).setState({
-            secondsElapsed: (<React.Component<any, {secondsElapsed: number}>>this).state.secondsElapsed + 1
+        var me = <React.ComponentInstance<any, {secondsElapsed: number}>>this;
+        me.setState({
+            secondsElapsed: me.state.secondsElapsed + 1
         });
     },
     componentDidMount: function() {
@@ -109,9 +106,9 @@ var Timer = React.createClass({displayName: 'Timer',
         return React.DOM.div(
             null,
             "Seconds Elapsed: ",
-            (<React.Component<any, {secondsElapsed: number}>>this).state.secondsElapsed
+            (<React.ComponentInstance<any, {secondsElapsed: number}>>this).state.secondsElapsed
         );
     }
 });
 
-React.render(Timer(), mountNode);
\ No newline at end of file
+React.render(React.createElement(Timer, null), mountNode);
diff --git a/react/react.d.ts b/react/react.d.ts
index 48fc0c1286..8a8589203c 100644
--- a/react/react.d.ts
+++ b/react/react.d.ts
@@ -3,227 +3,16 @@
 // Definitions by: Asana <https://asana.com>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
 
-declare module "react" {
-    var exports: React.ModuleExports;
-    export = exports;
-}
-
-declare module "react/addons" {
-    var exports: React.ModuleWithAddonsExports;
-    export = exports;
-}
-
-declare module "react/lib/cloneWithProps" {
-    interface exports<P> extends React.CloneWithProps<P> {}
-    export = exports;
-}
-
-declare module "react/lib/cx" {
-    var exports: React.ClassSet;
-    export = exports;
-}
-
-declare module "react/lib/LinkedStateMixin" {
-    interface exports<P, S> extends React.LinkedStateMixin<P, S> {}
-    export = exports;
-}
-
-declare module "react/lib/ReactComponentWithPureRenderMixin" {
-    var exports: React.PureRenderMixin;
-    export = exports;
-}
-
-declare module "react/lib/ReactCSSTransitionGroup" {
-    var exports: React.CSSTransitionGroup;
-    export = exports;
-}
-
-
-declare module "react/lib/ReactDefaultPerf" {
-    var exports: React.Perf;
-    export = exports;
-}
-
-declare module "react/lib/ReactTestUtils" {
-    var exports: React.TestUtils;
-    export = exports;
-}
-
-declare module "react/lib/ReactTransitionGroup" {
-    var exports: React.TransitionGroup;
-    export = exports;
-}
-
-declare module "react/lib/update" {
-    var exports: React.Update;
-    export = exports;
-}
-
-declare module React {
-    export interface ModuleExports {
-        createClass<P, S>(specification: Specification<P, S>): ReactComponentFactory<P>;
-        createFactory<P>(clazz: ReactComponentFactory<P>): ReactComponentFactory<P>;
-        createElement<P>(clazz: ReactComponentFactory<P>, props: P, ...children: any[]): ReactComponentElement<P>;
-        createElement(type: string, props: DomAttributes, ...children: any[]): ReactHTMLElement;
-        createElement(type: string, props: SvgAttributes, ...children: any[]): ReactSVGElement;
-        render<P>(component: ReactComponentElement<P>, container: Element, callback?: () => void): Component<P, {}>;
-        render(component: ReactHTMLElement, container: Element, callback?: () => void): ReactHTMLElement;
-        render(component: ReactSVGElement, container: Element, callback?: () => void): ReactSVGElement;
-        unmountComponentAtNode(container: Element): boolean;
-        renderToString<P>(component: ReactComponentElement<P>): string;
-        renderToString(component: ReactHTMLElement): string;
-        renderToString(component: ReactSVGElement): string;
-        renderToStaticMarkup<P>(component: ReactComponentElement<P>): string;
-        renderToStaticMarkup(component: ReactHTMLElement): string;
-        renderToStaticMarkup(component: ReactSVGElement): string;
-        isValidClass(factory: ReactComponentFactory<any>): boolean;
-        isValidElement(component: ReactComponentElement<any>): boolean;
-        isValidElement(component: ReactHTMLElement): boolean;
-        isValidElement(component: ReactSVGElement): boolean;
-        initializeTouchEvents(shouldUseTouch: boolean): void;
-        DOM: DomConstructors;
-        Children: Children;
-        PropTypes: PropTypes;
-    }
-
-    export interface ReactComponentFactory<P> {
-        (properties?: P, ...children: any[]): ReactComponentElement<P>;
-    }
-
-    export interface ReactElementFactory<P> {
-        (properties?: P, ...children: any[]): ReactDOMElement<P>;
-    }
-
-    export interface DomElement extends ReactElementFactory<DomAttributes> {
-    }
-
-    export interface SvgElement extends ReactElementFactory<SvgAttributes> {
-    }
-
-    export interface ReactClass<P> {
-        (props: P): ReactComponent<P>;
-    }
-
-    export interface ReactComponent<P> {
-        props: P;
-        render(): ReactElement<any, any>;
-    }
-
-    export interface ReactElement<T, P> {
-        type: T;
-        props: P;
-        key: string;
-        ref: string;
-    }
-
-    export interface ReactDOMElement<P> extends ReactElement<string, P> {
-        props: P;
-    }
-
-    export interface ReactHTMLElement extends ReactDOMElement<DomAttributes> {
-    }
-
-    export interface ReactSVGElement extends ReactDOMElement<SvgAttributes> {
-    }
-
-    export interface ReactComponentElement<P> extends ReactElement<ReactClass<P>, P> {
-        props: P;
-    }
-
-    export interface Mixin<P, S> {
-        componentWillMount?(): void;
-        componentDidMount?(): void;
-        componentWillReceiveProps?(nextProps: P): void;
-        shouldComponentUpdate?(nextProps: P, nextState: S): boolean;
-        componentWillUpdate?(nextProps: P, nextState: S): void;
-        componentDidUpdate?(prevProps: P, prevState: S): void;
-        componentWillUnmount?(): void;
-    }
-
-    export interface Specification<P, S> extends Mixin<P, S> {
-        displayName?: string;
-        mixins?: Mixin<P, S>[];
-        statics?: {
-            [key: string]: Function;
-        };
-        propTypes?: ValidationMap<P>;
-        getDefaultProps?(): P;
-        getInitialState?(): S;
-        render(): ReactElement<any, any>;
-    }
-
-    export interface DomReferencer {
-        getDOMNode(): Element;
-        /**
-        * Use this overload to cast the returned element to a more specific type.
-        * Eg: var name = this.refs['name'].getDOMNode<HTMLInputElement>().value
-        */
-        getDOMNode<TElement extends Element>(): TElement;
-    }
-
-    export interface Component<P, S> extends DomReferencer {
-        refs: {
-            [key: string]: DomReferencer
-        };
-        props: P;
-        state: S;
-        setState(nextState: S, callback?: () => void): void;
-        replaceState(nextState: S, callback?: () => void): void;
-        forceUpdate(callback?: () => void): void;
-        isMounted(): boolean;
-        setProps(nextProps: P, callback?: () => void): void;
-        replaceProps(nextProps: P, callback?: () => void): void;
-    }
-
-    export interface Constructable {
-        new(): any;
-    }
-
-    export interface Validator<P> {
-        (props: P, propName: string, componentName: string): Error;
-    }
-
-    export interface Requireable<P> extends Validator<P> {
-        isRequired: Validator<P>;
-    }
-
-    export interface ValidationMap<P> {
-        [key: string]: Validator<P>;
-    }
-
-    export interface PropTypes {
-        any: Requireable<any>;
-        array: Requireable<any>;
-        bool: Requireable<any>;
-        func: Requireable<any>;
-        number: Requireable<any>;
-        object: Requireable<any>;
-        string: Requireable<any>;
-        node: Requireable<any>;
-        component: Requireable<any>;
-        instanceOf: (clazz: Constructable) => Requireable<any>;
-        oneOf: (types: any[]) => Requireable<any>
-        oneOfType: (types: Validator<any>[]) => Requireable<any>;
-        arrayOf: (type: Validator<any>) => Requireable<any>;
-        objectOf: (type: Validator<any>) => Requireable<any>;
-        shape: (type: ValidationMap<any>) => Requireable<any>;
-    }
-
-    export interface Children {
-        map(children: any[], fn: (child: any) => any): any[];
-        forEach(children: any[], fn: (child: any) => any): void;
-        count(children: any[]): number;
-        only(children: any[]): any;
-    }
-
+declare module Browser {
     // Browser Interfaces
     // Taken from https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
-    export interface AbstractView {
+
+    interface AbstractView {
         styleMedia: StyleMedia;
         document: Document;
     }
 
-    export interface Touch {
+    interface Touch {
         identifier: number;
         target: EventTarget;
         screenX: number;
@@ -234,20 +23,150 @@ declare module React {
         pageY: number;
     }
 
-    export interface TouchList {
+    interface TouchList {
         [index: number]: Touch;
         length: number;
         item(index: number): Touch;
         identifiedTouch(identifier: number): Touch;
     }
+}
 
-    // Events
-    export interface SyntheticEvent {
+declare module React {
+
+    //
+    // React Elements 
+    // ----------------------------------------------------------------------
+
+    // type ReactType = ReactClass<any> | string;
+
+    interface ReactElement<P> {
+        type: any; // ReactType
+        props: P;
+        key: any; // number | string
+        ref: string;
+    }
+
+    interface ReactHTMLElement extends ReactElement<HTMLAttributes> {}
+    interface ReactSVGElement extends ReactElement<SVGAttributes> {}
+    interface ComponentElement<P> extends ReactElement<P> {}
+
+    //
+    // React Nodes 
+    // ----------------------------------------------------------------------
+
+    // Typescript 1.4 (Union types, aliases)
+    // type ReactText = string | number;
+    // type ReactFragment = ReactNode[];
+    // type ReactNode = ReactElement<any, any> | ReactFragment | ReactText;
+
+    //
+    // React Components 
+    // ----------------------------------------------------------------------
+
+    interface ReactStatics<P> {
+        displayName?: string;
+        getDefaultProps?(): P;
+        propTypes?: React.ValidationMap<P>;
+    }
+
+    interface ReactClass<P> extends ReactStatics<P> {
+        // Deprecated in 0.12. See http://fb.me/react-legacyfactory
+        // new(props: P): ReactElement<P>;
+        // (props: P): ReactElement<P>;
+    }
+
+    //
+    // ReactElement Factories
+    // ----------------------------------------------------------------------
+
+    interface Factory<P> {
+        (props?: P, ...children: any/*ReactNode*/[]): ReactElement<P>;
+    }
+    
+    interface ComponentFactory<P> extends Factory<P> {}
+    interface HTMLFactory extends Factory<HTMLAttributes> {}
+    interface SVGFactory extends Factory<SVGAttributes> {}
+
+    //
+    // Top-Level API
+    // ----------------------------------------------------------------------
+
+    interface TopLevelAPI {
+        createClass<P>(spec: ComponentSpec<P, any>): ReactClass<P>;
+        createElement<P>(type: any/*ReactType*/, props: P, ...children: any/*ReactNode*/[]): ReactElement<P>;
+        createFactory<P>(type: any/*ReactType*/): Factory<P>;
+        render<P>(element: ReactElement<P>, container: Element, callback?: () => void): ReactInstance<P>;
+        unmountComponentAtNode(container: Element): boolean;
+        renderToString(element: ReactElement<any>): string;
+        renderToStaticMarkup(element: ReactElement<any>): string;
+        isValidElement(object: {}): boolean;
+        initializeTouchEvents(shouldUseTouch: boolean): void;
+    }
+
+    //
+    // Component API
+    // ----------------------------------------------------------------------
+
+    interface ReactInstance<P> {
+        // Use this overload to cast the returned element to a more specific type.
+        // Eg: var name = this.refs['name'].getDOMNode<HTMLInputElement>().value;
+        getDOMNode<TElement extends Element>(): TElement;
+        getDOMNode(): Element;
+        isMounted(): boolean;
+
+        props: P;
+        setProps(nextProps: P, callback?: () => void): void;
+        replaceProps(nextProps: P, callback?: () => void): void;
+    }
+    
+    interface ComponentInstance<P, S> extends ReactInstance<P> {
+        state: S;
+        setState(nextState: S, callback?: () => void): void;
+        replaceState(nextState: S, callback?: () => void): void;
+        forceUpdate(callback?: () => void): void;
+        refs: {
+            [key: string]: ReactInstance<P>
+        };
+    }
+
+    //
+    // Component Specs and Lifecycle
+    // ----------------------------------------------------------------------
+
+    interface Mixin<P, S> extends ReactStatics<P> {
+        mixins?: Mixin<P, S>;
+        statics?: {
+            [key: string]: any;
+        };
+
+        // Definition methods
+        getInitialState?(): S;
+
+        // Delegate methods
+        componentWillMount?(): void;
+        componentDidMount?(): void;
+        componentWillReceiveProps?(nextProps: P): void;
+        shouldComponentUpdate?(nextProps: P, nextState: S): boolean;
+        componentWillUpdate?(nextProps: P, nextState: S): void;
+        componentDidUpdate?(prevProps: P, prevState: S): void;
+        componentWillUnmount?(): void;
+    }
+
+    interface ComponentSpec<P, S> extends Mixin<P, S> {
+        render(): ReactElement<any>;
+    }
+
+    //
+    // Event System
+    // ----------------------------------------------------------------------
+
+    interface SyntheticEvent {
         bubbles: boolean;
         cancelable: boolean;
         currentTarget: EventTarget;
         defaultPrevented: boolean;
         eventPhase: number;
+        isTrusted: boolean;
         nativeEvent: Event;
         preventDefault(): void;
         stopPropagation(): void;
@@ -256,11 +175,11 @@ declare module React {
         type: string;
     }
 
-    export interface ClipboardEvent extends SyntheticEvent {
+    interface ClipboardEvent extends SyntheticEvent {
         clipboardData: DataTransfer;
     }
 
-    export interface KeyboardEvent extends SyntheticEvent {
+    interface KeyboardEvent extends SyntheticEvent {
         altKey: boolean;
         charCode: number;
         ctrlKey: boolean;
@@ -275,11 +194,14 @@ declare module React {
         which: number;
     }
 
-    export interface FocusEvent extends SyntheticEvent {
+    interface FocusEvent extends SyntheticEvent {
         relatedTarget: EventTarget;
     }
 
-    export interface MouseEvent extends SyntheticEvent {
+    interface FormEvent extends SyntheticEvent {
+    }
+
+    interface MouseEvent extends SyntheticEvent {
         altKey: boolean;
         button: number;
         buttons: number;
@@ -296,125 +218,135 @@ declare module React {
         shiftKey: boolean;
     }
 
-    export interface TouchEvent extends SyntheticEvent {
+    interface TouchEvent extends SyntheticEvent {
         altKey: boolean;
-        changedTouches: TouchList;
+        changedTouches: Browser.TouchList;
         ctrlKey: boolean;
         getModifierState(key: string): boolean;
         metaKey: boolean;
         shiftKey: boolean;
-        targetTouches: TouchList;
-        touches: TouchList;
+        targetTouches: Browser.TouchList;
+        touches: Browser.TouchList;
     }
 
-    export interface UiEvent extends SyntheticEvent {
+    interface UIEvent extends SyntheticEvent {
         detail: number;
-        view: AbstractView;
+        view: Browser.AbstractView;
     }
 
-    export interface WheelEvent extends SyntheticEvent {
+    interface WheelEvent extends SyntheticEvent {
         deltaMode: number;
         deltaX: number;
         deltaY: number;
         deltaZ: number;
     }
 
-    // Attributes
-    export interface EventAttributes {
-        onCopy?: (event: ClipboardEvent) => void;
-        onCut?: (event: ClipboardEvent) => void;
-        onPaste?: (event: ClipboardEvent) => void;
-        onKeyDown?: (event: KeyboardEvent) => void;
-        onKeyPress?: (event: KeyboardEvent) => void;
-        onKeyUp?: (event: KeyboardEvent) => void;
-        onFocus?: (event: FocusEvent) => void;
-        onBlur?: (event: FocusEvent) => void;
-        onChange?: (event: SyntheticEvent) => void;
-        onInput?: (event: SyntheticEvent) => void;
-        onSubmit?: (event: SyntheticEvent) => void;
-        onClick?: (event: MouseEvent) => void;
-        onDoubleClick?: (event: MouseEvent) => void;
-        onDrag?: (event: MouseEvent) => void;
-        onDragEnd?: (event: MouseEvent) => void;
-        onDragEnter?: (event: MouseEvent) => void;
-        onDragExit?: (event: MouseEvent) => void;
-        onDragLeave?: (event: MouseEvent) => void;
-        onDragOver?: (event: MouseEvent) => void;
-        onDragStart?: (event: MouseEvent) => void;
-        onDrop?: (event: MouseEvent) => void;
-        onMouseDown?: (event: MouseEvent) => void;
-        onMouseEnter?: (event: MouseEvent) => void;
-        onMouseLeave?: (event: MouseEvent) => void;
-        onMouseMove?: (event: MouseEvent) => void;
-        onMouseOut?: (event: MouseEvent) => void;
-        onMouseOver?: (event: MouseEvent) => void;
-        onMouseUp?: (event: MouseEvent) => void;
-        onTouchCancel?: (event: TouchEvent) => void;
-        onTouchEnd?: (event: TouchEvent) => void;
-        onTouchMove?: (event: TouchEvent) => void;
-        onTouchStart?: (event: TouchEvent) => void;
-        onScroll?: (event: UiEvent) => void;
-        onWheel?: (event: WheelEvent) => void;
+    //
+    // Event Handler Types
+    // ----------------------------------------------------------------------
+
+    interface EventHandler<E extends SyntheticEvent> {
+        (event: E): void;
     }
 
+    interface ClipboardEventHandler extends EventHandler<ClipboardEvent> {}
+    interface KeyboardEventHandler extends EventHandler<KeyboardEvent> {}
+    interface FocusEventHandler extends EventHandler<FocusEvent> {}
+    interface FormEventHandler extends EventHandler<FormEvent> {}
+    interface MouseEventHandler extends EventHandler<MouseEvent> {}
+    interface TouchEventHandler extends EventHandler<TouchEvent> {}
+    interface UIEventHandler extends EventHandler<UIEvent> {}
+    interface WheelEventHandler extends EventHandler<WheelEvent> {}
+
+    //
+    // Attributes
+    // ----------------------------------------------------------------------
+
     export interface ReactAttributes {
-        dangerouslySetInnerHTML?: {
-            __html: string;
-        };
-        children?: any[];
+        children?: any; // ReactNode
         key?: string;
         ref?: string;
+
+        // Event Attributes
+        onCopy?: ClipboardEventHandler;
+        onCut?: ClipboardEventHandler;
+        onPaste?: ClipboardEventHandler;
+        onKeyDown?: KeyboardEventHandler;
+        onKeyPress?: KeyboardEventHandler;
+        onKeyUp?: KeyboardEventHandler;
+        onFocus?: FocusEventHandler;
+        onBlur?: FocusEventHandler;
+        onChange?: FormEventHandler;
+        onInput?: FormEventHandler;
+        onSubmit?: FormEventHandler;
+        onClick?: MouseEventHandler;
+        onDoubleClick?: MouseEventHandler;
+        onDrag?: MouseEventHandler;
+        onDragEnd?: MouseEventHandler;
+        onDragEnter?: MouseEventHandler;
+        onDragExit?: MouseEventHandler;
+        onDragLeave?: MouseEventHandler;
+        onDragOver?: MouseEventHandler;
+        onDragStart?: MouseEventHandler;
+        onDrop?: MouseEventHandler;
+        onMouseDown?: MouseEventHandler;
+        onMouseEnter?: MouseEventHandler;
+        onMouseLeave?: MouseEventHandler;
+        onMouseMove?: MouseEventHandler;
+        onMouseOut?: MouseEventHandler;
+        onMouseOver?: MouseEventHandler;
+        onMouseUp?: MouseEventHandler;
+        onTouchCancel?: TouchEventHandler;
+        onTouchEnd?: TouchEventHandler;
+        onTouchMove?: TouchEventHandler;
+        onTouchStart?: TouchEventHandler;
+        onScroll?: UIEventHandler;
+        onWheel?: WheelEventHandler;
     }
 
-    export interface DomAttributes extends EventAttributes, ReactAttributes {
-        // HTML Attributes
-        accept?: any;
-        accessKey?: any;
-        action?: any;
-        allowFullScreen?: any;
-        allowTransparency?: any;
-        alt?: any;
-        async?: any;
-        autoCapitalize?: any;
-        autoComplete?: any;
-        autoCorrect?: any;
-        autoFocus?: any;
-        autoPlay?: any;
-        cellPadding?: any;
-        cellSpacing?: any;
-        charSet?: any;
-        checked?: any;
-        className?: any;
-        cols?: any;
-        colSpan?: any;
-        content?: any;
-        contentEditable?: any;
-        contextMenu?: any;
+    interface HTMLAttributes extends ReactAttributes {
+        accept?: string;
+        accessKey?: string;
+        action?: string;
+        allowFullScreen?: boolean;
+        allowTransparency?: boolean;
+        alt?: string;
+        async?: boolean;
+        autoComplete?: boolean;
+        autoFocus?: boolean;
+        autoPlay?: boolean;
+        cellPadding?: any; // number | string
+        cellSpacing?: any; // number | string
+        charSet?: string;
+        checked?: boolean;
+        className?: string;
+        cols?: number;
+        colSpan?: number;
+        content?: string;
+        contentEditable?: boolean;
+        contextMenu?: string;
         controls?: any;
-        coords?: any;
-        crossOrigin?: any;
-        data?: any;
-        dateTime?: any;
-        defer?: any;
-        dir?: any;
-        disabled?: any;
+        coords?: string;
+        crossOrigin?: string;
+        data?: string;
+        dateTime?: string;
+        defer?: boolean;
+        dir?: string;
+        disabled?: boolean;
         download?: any;
-        draggable?: any;
-        encType?: any;
-        form?: any;
-        formNoValidate?: any;
-        frameBorder?: any;
-        height?: any;
-        hidden?: any;
-        href?: any;
-        hrefLang?: any;
-        htmlFor?: any;
-        httpEquiv?: any;
-        icon?: any;
-        id?: any;
-        itemProp?: any;
-        itemScope?: any;
-        itemType?: any;
+        draggable?: boolean;
+        encType?: string;
+        form?: string;
+        formNoValidate?: boolean;
+        frameBorder?: any; // number | string
+        height?: any; // number | string
+        hidden?: boolean;
+        href?: string;
+        hrefLang?: string;
+        htmlFor?: string;
+        httpEquiv?: string;
+        icon?: string;
+        id?: string;
         label?: any;
         lang?: any;
         list?: any;
@@ -433,7 +365,6 @@ declare module React {
         placeholder?: any;
         poster?: any;
         preload?: any;
-        property?: any;
         radioGroup?: any;
         readOnly?: any;
         rel?: any;
@@ -466,9 +397,22 @@ declare module React {
         value?: any;
         width?: any;
         wmode?: any;
+
+        // Non-standard Attributes
+        autoCapitalize?: boolean;
+        autoCorrect?: boolean;
+        property?: any;
+        itemProp?: string;
+        itemScope?: boolean;
+        itemType?: string;
+
+        // React-specific Attributes
+        dangerouslySetInnerHTML: {
+            __html: string
+        };
     }
 
-    export interface SvgAttributes extends EventAttributes, ReactAttributes {
+    interface SVGAttributes extends ReactAttributes {
         cx?: any;
         cy?: any;
         d?: any;
@@ -514,189 +458,255 @@ declare module React {
         y?: any;
     }
 
-    export interface DomConstructors {
+    //
+    // React.DOM 
+    // ----------------------------------------------------------------------
+
+    interface ReactDOM {
         // HTML
-        a: DomElement;
-        abbr: DomElement;
-        address: DomElement;
-        area: DomElement;
-        article: DomElement;
-        aside: DomElement;
-        audio: DomElement;
-        b: DomElement;
-        base: DomElement;
-        bdi: DomElement;
-        bdo: DomElement;
-        big: DomElement;
-        blockquote: DomElement;
-        body: DomElement;
-        br: DomElement;
-        button: DomElement;
-        canvas: DomElement;
-        caption: DomElement;
-        cite: DomElement;
-        code: DomElement;
-        col: DomElement;
-        colgroup: DomElement;
-        data: DomElement;
-        datalist: DomElement;
-        dd: DomElement;
-        del: DomElement;
-        details: DomElement;
-        dfn: DomElement;
-        dialog: DomElement;
-        div: DomElement;
-        dl: DomElement;
-        dt: DomElement;
-        em: DomElement;
-        embed: DomElement;
-        fieldset: DomElement;
-        figcaption: DomElement;
-        figure: DomElement;
-        footer: DomElement;
-        form: DomElement;
-        h1: DomElement;
-        h2: DomElement;
-        h3: DomElement;
-        h4: DomElement;
-        h5: DomElement;
-        h6: DomElement;
-        head: DomElement;
-        header: DomElement;
-        hr: DomElement;
-        html: DomElement;
-        i: DomElement;
-        iframe: DomElement;
-        img: DomElement;
-        input: DomElement;
-        ins: DomElement;
-        kbd: DomElement;
-        keygen: DomElement;
-        label: DomElement;
-        legend: DomElement;
-        li: DomElement;
-        link: DomElement;
-        main: DomElement;
-        map: DomElement;
-        mark: DomElement;
-        menu: DomElement;
-        menuitem: DomElement;
-        meta: DomElement;
-        meter: DomElement;
-        nav: DomElement;
-        noscript: DomElement;
-        object: DomElement;
-        ol: DomElement;
-        optgroup: DomElement;
-        option: DomElement;
-        output: DomElement;
-        p: DomElement;
-        param: DomElement;
-        pre: DomElement;
-        progress: DomElement;
-        q: DomElement;
-        rp: DomElement;
-        rt: DomElement;
-        ruby: DomElement;
-        s: DomElement;
-        samp: DomElement;
-        script: DomElement;
-        section: DomElement;
-        select: DomElement;
-        small: DomElement;
-        source: DomElement;
-        span: DomElement;
-        strong: DomElement;
-        style: DomElement;
-        sub: DomElement;
-        summary: DomElement;
-        sup: DomElement;
-        table: DomElement;
-        tbody: DomElement;
-        td: DomElement;
-        textarea: DomElement;
-        tfoot: DomElement;
-        th: DomElement;
-        thead: DomElement;
-        time: DomElement;
-        title: DomElement;
-        tr: DomElement;
-        track: DomElement;
-        u: DomElement;
-        ul: DomElement;
-        "var": DomElement;
-        video: DomElement;
-        wbr: DomElement;
+        a: React.HTMLFactory;
+        abbr: React.HTMLFactory;
+        address: React.HTMLFactory;
+        area: React.HTMLFactory;
+        article: React.HTMLFactory;
+        aside: React.HTMLFactory;
+        audio: React.HTMLFactory;
+        b: React.HTMLFactory;
+        base: React.HTMLFactory;
+        bdi: React.HTMLFactory;
+        bdo: React.HTMLFactory;
+        big: React.HTMLFactory;
+        blockquote: React.HTMLFactory;
+        body: React.HTMLFactory;
+        br: React.HTMLFactory;
+        button: React.HTMLFactory;
+        canvas: React.HTMLFactory;
+        caption: React.HTMLFactory;
+        cite: React.HTMLFactory;
+        code: React.HTMLFactory;
+        col: React.HTMLFactory;
+        colgroup: React.HTMLFactory;
+        data: React.HTMLFactory;
+        datalist: React.HTMLFactory;
+        dd: React.HTMLFactory;
+        del: React.HTMLFactory;
+        details: React.HTMLFactory;
+        dfn: React.HTMLFactory;
+        dialog: React.HTMLFactory;
+        div: React.HTMLFactory;
+        dl: React.HTMLFactory;
+        dt: React.HTMLFactory;
+        em: React.HTMLFactory;
+        embed: React.HTMLFactory;
+        fieldset: React.HTMLFactory;
+        figcaption: React.HTMLFactory;
+        figure: React.HTMLFactory;
+        footer: React.HTMLFactory;
+        form: React.HTMLFactory;
+        h1: React.HTMLFactory;
+        h2: React.HTMLFactory;
+        h3: React.HTMLFactory;
+        h4: React.HTMLFactory;
+        h5: React.HTMLFactory;
+        h6: React.HTMLFactory;
+        head: React.HTMLFactory;
+        header: React.HTMLFactory;
+        hr: React.HTMLFactory;
+        html: React.HTMLFactory;
+        i: React.HTMLFactory;
+        iframe: React.HTMLFactory;
+        img: React.HTMLFactory;
+        input: React.HTMLFactory;
+        ins: React.HTMLFactory;
+        kbd: React.HTMLFactory;
+        keygen: React.HTMLFactory;
+        label: React.HTMLFactory;
+        legend: React.HTMLFactory;
+        li: React.HTMLFactory;
+        link: React.HTMLFactory;
+        main: React.HTMLFactory;
+        map: React.HTMLFactory;
+        mark: React.HTMLFactory;
+        menu: React.HTMLFactory;
+        menuitem: React.HTMLFactory;
+        meta: React.HTMLFactory;
+        meter: React.HTMLFactory;
+        nav: React.HTMLFactory;
+        noscript: React.HTMLFactory;
+        object: React.HTMLFactory;
+        ol: React.HTMLFactory;
+        optgroup: React.HTMLFactory;
+        option: React.HTMLFactory;
+        output: React.HTMLFactory;
+        p: React.HTMLFactory;
+        param: React.HTMLFactory;
+        pre: React.HTMLFactory;
+        progress: React.HTMLFactory;
+        q: React.HTMLFactory;
+        rp: React.HTMLFactory;
+        rt: React.HTMLFactory;
+        ruby: React.HTMLFactory;
+        s: React.HTMLFactory;
+        samp: React.HTMLFactory;
+        script: React.HTMLFactory;
+        section: React.HTMLFactory;
+        select: React.HTMLFactory;
+        small: React.HTMLFactory;
+        source: React.HTMLFactory;
+        span: React.HTMLFactory;
+        strong: React.HTMLFactory;
+        style: React.HTMLFactory;
+        sub: React.HTMLFactory;
+        summary: React.HTMLFactory;
+        sup: React.HTMLFactory;
+        table: React.HTMLFactory;
+        tbody: React.HTMLFactory;
+        td: React.HTMLFactory;
+        textarea: React.HTMLFactory;
+        tfoot: React.HTMLFactory;
+        th: React.HTMLFactory;
+        thead: React.HTMLFactory;
+        time: React.HTMLFactory;
+        title: React.HTMLFactory;
+        tr: React.HTMLFactory;
+        track: React.HTMLFactory;
+        u: React.HTMLFactory;
+        ul: React.HTMLFactory;
+        "var": React.HTMLFactory;
+        video: React.HTMLFactory;
+        wbr: React.HTMLFactory;
+
         // SVG
-        circle: SvgElement;
-        defs: SvgElement;
-        ellipse: SvgElement;
-        g: SvgElement;
-        line: SvgElement;
-        linearGradient: SvgElement;
-        mask: SvgElement;
-        path: SvgElement;
-        pattern: SvgElement;
-        polygon: SvgElement;
-        polyline: SvgElement;
-        radialGradient: SvgElement;
-        rect: SvgElement;
-        stop: SvgElement;
-        svg: SvgElement;
-        text: SvgElement;
-        tspan: SvgElement;
+        circle: React.SVGFactory;
+        defs: React.SVGFactory;
+        ellipse: React.SVGFactory;
+        g: React.SVGFactory;
+        line: React.SVGFactory;
+        linearGradient: React.SVGFactory;
+        mask: React.SVGFactory;
+        path: React.SVGFactory;
+        pattern: React.SVGFactory;
+        polygon: React.SVGFactory;
+        polyline: React.SVGFactory;
+        radialGradient: React.SVGFactory;
+        rect: React.SVGFactory;
+        stop: React.SVGFactory;
+        svg: React.SVGFactory;
+        text: React.SVGFactory;
+        tspan: React.SVGFactory;
     }
 
-    // Addons
-    export interface ModuleWithAddonsExports extends ModuleExports {
-        addons: ReactAddons;
+    //
+    // React.PropTypes
+    // ----------------------------------------------------------------------
+
+    interface Validator<T> {
+        (object: T, key: string, componentName: string): Error;
     }
 
-    export interface ReactAddons {
-        cloneWithProps<P>(instance: React.ReactComponentElement<P>, extraProps?: P): React.ReactComponentElement<P>;
-        classSet: ClassSet;
-        LinkedStateMixin: LinkedStateMixin<any, any>;
-        PureRenderMixin: PureRenderMixin;
-        CSSTransitionGroup: CSSTransitionGroup;
-        Perf: Perf;
-        TestUtils: TestUtils;
-        TransitionGroup: TransitionGroup;
-        update: Update;
+    interface Requireable<T> extends Validator<T> {
+        isRequired: Validator<T>;
     }
 
-    export interface CloneWithProps<P> {
-        (instance: React.ReactComponentElement<P>, extraProps?: P): React.ReactComponentElement<P>;
+    interface ValidationMap<T> {
+        [key: string]: Validator<T>;
     }
 
-    export interface ClassSet {
-        (classes: {[key: string]: boolean}): string
+    interface ReactPropTypes {
+        any: Requireable<any>;
+        array: Requireable<any>;
+        bool: Requireable<any>;
+        func: Requireable<any>;
+        number: Requireable<any>;
+        object: Requireable<any>;
+        string: Requireable<any>;
+        node: Requireable<any>;
+        element: Requireable<any>;
+        instanceOf(expectedClass: {}): Requireable<any>;
+        oneOf(types: any[]): Requireable<any>;
+        oneOfType(types: Validator<any>[]): Requireable<any>;
+        arrayOf(type: Validator<any>): Requireable<any>;
+        objectOf(type: Validator<any>): Requireable<any>;
+        shape(type: ValidationMap<any>): Requireable<any>;
     }
 
-    export interface ReactLink<T> {
+    //
+    // React.Children
+    // ----------------------------------------------------------------------
+
+    interface ReactChildren {
+        map<T>(children: any/*ReactNode*/, fn: (child: any/*ReactNode*/) => T): { [key:string]: T };
+        forEach(children: any/*ReactNode*/, fn: (child: any/*ReactNode*/) => any): void;
+        count(children: any/*ReactNode*/): number;
+        only(children: any/*ReactNode*/): any;
+    }
+
+    //
+    // React.addons (Transitions)
+    // ----------------------------------------------------------------------
+
+    interface CSSTransitionGroupProps {
+        transitionName: string;
+        transitionAppear?: boolean;
+        transitionEnter?: boolean;
+        transitionLeave?: boolean;
+    }
+
+    interface TransitionGroupProps {
+        component?: any; // ReactType
+        childFactory?: (child: React.ReactElement<any>) => React.ReactElement<any>;
+    }
+
+    interface CSSTransitionGroup extends React.ReactClass<CSSTransitionGroupProps> {}
+    interface TransitionGroup extends React.ReactClass<TransitionGroupProps> {}
+
+    //
+    // React.addons (Mixins)
+    // ----------------------------------------------------------------------
+
+    interface ReactLink<T> {
         value: T;
         requestChange(newValue: T): void;
     }
 
-    export interface LinkedStateMixin<P, S> extends React.Mixin<P, S> {
+    interface LinkedStateMixin extends React.Mixin<any, any> {
         linkState<T>(key: string): ReactLink<T>;
     }
 
-    export interface PureRenderMixin extends React.Mixin<any, any> {}
+    interface PureRenderMixin extends React.Mixin<any, any> {
+    }
 
-    export interface CSSTransitionGroup extends React.ReactComponentFactory<{
-        transitionName: string;
-    }> {}
+    //
+    // Reat.addons.update
+    // ----------------------------------------------------------------------
 
-    export interface ComponentPerfContext {
+    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;
     }
 
-    export interface NumericPerfContext {
+    interface NumericPerfContext {
         [key: string]: number;
     }
 
-    export interface Measurements {
+    interface Measurements {
         exclusive: NumericPerfContext;
         inclusive: NumericPerfContext;
         render: NumericPerfContext;
@@ -708,7 +718,7 @@ declare module React {
         totalTime: number;
     }
 
-    export interface Perf {
+    interface ReactPerf {
         start(): void;
         stop(): void;
         printInclusive(measurements: Measurements[]): void;
@@ -718,34 +728,47 @@ declare module React {
         getLastMeasurements(): Measurements[];
     }
 
-    export interface TestUtils {
-        Simulate: Simulate;
-        renderIntoDocument<P>(instance: ReactComponentElement<P>): ReactComponentElement<P>;
-        renderIntoDocument(instance: ReactHTMLElement): ReactHTMLElement;
-        renderIntoDocument(instance: ReactSVGElement): ReactSVGElement;
-        mockComponent(componentClass: ReactComponentFactory<any>, mockTagName?: string): TestUtils;
-        isDescriptorOfType(descriptor: ReactElement<any, any>, componentClass: ReactComponentFactory<any>): boolean;
-        isDOMComponent(instance: ReactElement<any, any>): boolean;
-        isCompositeComponent(instance: ReactElement<any, any>): boolean;
-        isCompositeComponentWithType(instance: ReactElement<any, any>, componentClass: ReactComponentFactory<any>): boolean;
-        isTextComponent(instance: ReactElement<any, any>): boolean;
-        findAllInRenderedTree(tree: ReactElement<any, any>, test: (component: ReactElement<any, any>) => boolean): ReactElement<any, any>[];
-        scryRenderedDOMComponentsWithClass(tree: ReactElement<any, any>, className: string): ReactElement<any, any>[];
-        findRenderedDOMComponentWithClass(tree: ReactElement<any, any>, className: string): ReactElement<any, any>;
-        scryRenderedDOMComponentsWithTag(tree: ReactElement<any, any>, tagName: string): ReactElement<any, any>[];
-        findRenderedDOMComponentWithTag(tree: ReactElement<any, any>, tagName: string): ReactElement<any, any>;
-        scryRenderedComponentsWithTag(tree: ReactElement<any, any>, componentClass: Function): ReactElement<any, any>[];
-        findRenderedComponentWithType<P>(tree: ReactElement<any, any>, componentClass: ReactComponentFactory<P>): Component<P, any>;
-        scryRenderedComponentsWithType<P>(tree: ReactElement<any, any>, componentClass: ReactComponentFactory<P>): Component<P, any>[];
+    //
+    // React.addons.TestUtils
+    // ----------------------------------------------------------------------
+
+    interface MockedComponent {
+        render: {
+            mockImplementation(impl: () => any): void;
+        };
     }
 
-    export interface SyntheticEventData {
+    // Alias for ReactTestUtils
+    interface Instance<P> extends React.ReactInstance<P> {}
+
+    interface ReactTestUtils {
+        Simulate: Simulate;
+
+        renderIntoDocument<P>(element: React.ReactElement<P>): Instance<P>;
+        mockComponent(mocked: MockedComponent, mockTagName?: string): ReactTestUtils;
+        isElementOfType(element: React.ReactElement<any>, type: any/*ReactType*/): boolean;
+        isDOMComponent(instance: Instance<any>): boolean;
+        isCompositeComponent(instance: Instance<any>): boolean;
+        isCompositeComponentWithType(instance: Instance<any>, type: React.ReactClass<any>): boolean;
+        isTextComponent(instance: Instance<any>): boolean;
+        findAllInRenderedTree(tree: Instance<any>, fn: (i: Instance<any>) => boolean): Instance<any>;
+        scryRenderedDOMComponentsWithClass(tree: Instance<any>, className: string): Instance<any>[];
+        findRenderedDOMComponentWithClass(tree: Instance<any>, className: string): Instance<any>;
+        scryRenderedDOMComponentsWithTag(tree: Instance<any>, tagName: string): Instance<any>[];
+        findRenderedDOMComponentWithTag(tree: Instance<any>, tagName: string): Instance<any>;
+        scryRenderedComponentsWithType<P, S>(
+            tree: Instance<any>, type: React.ReactClass<P>): React.ComponentInstance<P, S>[];
+        findRenderedComponentWithType<P, S>(
+            tree: Instance<any>, type: React.ReactClass<P>): React.ComponentInstance<P, S>;
+    }
+
+    interface SyntheticEventData {
         altKey?: boolean;
         button?: number;
         buttons?: number;
         clientX?: number;
         clientY?: number;
-        changedTouches?: TouchList;
+        changedTouches?: Browser.TouchList;
         charCode?: boolean;
         clipboardData?: DataTransfer;
         ctrlKey?: boolean;
@@ -767,18 +790,18 @@ declare module React {
         screenX?: number;
         screenY?: number;
         shiftKey?: boolean;
-        targetTouches?: TouchList;
-        touches?: TouchList;
-        view?: AbstractView;
+        targetTouches?: Browser.TouchList;
+        touches?: Browser.TouchList;
+        view?: Browser.AbstractView;
         which?: number;
     }
 
-    export interface EventSimulator {
+    interface EventSimulator {
         (element: Element, eventData?: SyntheticEventData): void;
-        (descriptor: ReactElement<any, any>, eventData?: SyntheticEventData): void;
+        (descriptor: Instance<any>, eventData?: SyntheticEventData): void;
     }
 
-    export interface Simulate {
+    interface Simulate {
         blur: EventSimulator;
         change: EventSimulator;
         click: EventSimulator;
@@ -814,10 +837,51 @@ declare module React {
         wheel: EventSimulator;
     }
 
-    export interface TransitionGroup extends ReactComponentFactory<any> {}
+    //
+    // react Exports
+    // ----------------------------------------------------------------------
 
-    export interface Update {
-        (object: Object, changes: Object): Object
+    interface Exports extends TopLevelAPI {
+        DOM: ReactDOM;
+        PropTypes: ReactPropTypes;
+        Children: ReactChildren;
     }
 
-}
\ No newline at end of file
+    //
+    // react/addons Exports
+    // ----------------------------------------------------------------------
+
+    interface AddonsExports extends Exports {
+        addons: {
+            CSSTransitionGroup: CSSTransitionGroup;
+            LinkedStateMixin: LinkedStateMixin;
+            PureRenderMixin: PureRenderMixin;
+            TransitionGroup: TransitionGroup;
+
+            batchedUpdates<A, B>(callback: (a: A, b: B) => void, a: A, b: B): void;
+            batchedUpdates<A>(callback: (a: A) => void, a: A): void;
+            batchedUpdates(callback: () => void): void;
+
+            classSet(cx: { [key: string]: boolean }): string;
+            cloneWithProps<P>(element: React.ReactElement<P>, props: P): React.ReactElement<P>;
+
+            update(value: any[], spec: UpdateArraySpec): any[];
+            update(value: {}, spec: UpdateSpec): any;
+
+            // Development tools
+            Perf: ReactPerf;
+            TestUtils: ReactTestUtils;
+        };
+    }
+}
+
+declare module "react" {
+    var exports: React.Exports;
+    export = exports;
+}
+
+declare module "react/addons" {
+    var exports: React.AddonsExports;
+    export = exports;
+}
+

From 7f4cdee62819f02b85cdf9cdc4279aeed0fe1ef4 Mon Sep 17 00:00:00 2001
From: Vincent Siao <vincent@asana.com>
Date: Tue, 2 Dec 2014 18:11:15 -0800
Subject: [PATCH 03/10] ReactClass -> ComponentClass; add tests to
 react-tests.ts

---
 react/react-addons-tests.ts |  12 +-
 react/react-tests.ts        | 198 +++++++++++++++-------
 react/react.d.ts            | 317 ++++++++++++++++++------------------
 3 files changed, 308 insertions(+), 219 deletions(-)

diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts
index d89c383bfe..1de8255f19 100644
--- a/react/react-addons-tests.ts
+++ b/react/react-addons-tests.ts
@@ -8,18 +8,26 @@ React.addons.TestUtils.Simulate.click(node);
 React.addons.TestUtils.Simulate.change(node);
 React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
 
+interface GreetingProps {
+    name: string;
+}
+interface GreetingState {
+    morning: boolean;
+}
+interface GreetingInstance extends React.ComponentInstance<GreetingProps, GreetingState> {
+}
 var Greeting = React.createClass({displayName: 'Greeting',
     getInitialState: function() {
         return {morning: true};
     },
     render: function() {
-        var me = <React.ComponentInstance<{name: string}, {morning: boolean}>>this;
+        var me = <GreetingInstance>this;
         return React.DOM.div(null, (me.state.morning ? "Hello" : "Goodbye "), me.props.name);
     }
 });
 
 var root = React.addons.TestUtils.renderIntoDocument(React.createElement(Greeting, {name: "John"}));
-var greeting = React.addons.TestUtils.findRenderedComponentWithType(root, Greeting);
+var greeting = <GreetingInstance>React.addons.TestUtils.findRenderedComponentWithType(root, Greeting);
 greeting.setState({
     morning: false
 });
diff --git a/react/react-tests.ts b/react/react-tests.ts
index 5d1743cbb5..fb0d6eebc3 100644
--- a/react/react-tests.ts
+++ b/react/react-tests.ts
@@ -1,64 +1,152 @@
 /// <reference path="react.d.ts" />
 import React = require("react");
 
+interface Props {
+    hello: string;
+    world?: string;
+    foo: number;
+    bar: boolean;
+}
+
+interface State {
+    inputValue?: string;
+    seconds?: number;
+}
+
+interface MyComponentInstance extends React.ComponentInstance<Props, State> {
+    reset(): void;
+}
+
+var props: Props = {
+    hello: "world",
+    foo: 42,
+    bar: true
+};
+
+var container: Element;
+var INPUT_REF: string = "input";
+
+//
+// Top-Level API
+// --------------------------------------------------------------------------
+
+var reactClass: React.ComponentClass<Props> = React.createClass<Props>({
+    getDefaultProps: () => {
+        return <Props>{
+            hello: undefined,
+            world: "peace",
+            foo: undefined,
+            bar: undefined
+        };
+    },
+    getInitialState: () => {
+        return {
+            inputValue: "React.js",
+            seconds: 0
+        };
+    },
+    reset: () => {
+        this.replaceState(this.getInitialState());
+    },
+    render: () => {
+        return React.DOM.div(null,
+            React.DOM.input({
+                ref: INPUT_REF,
+                value: this.state.inputValue
+            }));
+    }
+});
+
+var reactElement: React.ReactElement<Props> =
+    React.createElement<Props>(reactClass, props);
+
+var reactFactory: React.Factory<Props> =
+    React.createFactory<Props>(reactClass);
+
+var reactInstance: React.Instance<Props> =
+    React.render<Props>(reactElement, container);
+
+var unmounted: boolean = React.unmountComponentAtNode(container);
+var str: string = React.renderToString(reactElement);
+var markup: string = React.renderToStaticMarkup(reactElement);
+var notValid: boolean = React.isValidElement(props); // false
+var isValid = React.isValidElement(reactElement); // true
+React.initializeTouchEvents(true);
+
+//
+// React Elements
+// --------------------------------------------------------------------------
+
+var type = reactElement.type;
+var elementProps: Props = reactElement.props;
+var key = reactElement.key;
+var ref: string = reactElement.ref;
+var factoryElement: React.ReactElement<Props> = reactFactory(elementProps);
+
+//
+// React Components
+// --------------------------------------------------------------------------
+
+var displayName: string = reactClass.displayName;
+var defaultProps: Props = reactClass.getDefaultProps();
+var propTypes: React.ValidationMap<Props> = reactClass.propTypes;
+
+//
+// Component API
+// --------------------------------------------------------------------------
+
+var htmlElement: Element = reactInstance.getDOMNode();
+var divElement: HTMLDivElement = reactInstance.getDOMNode<HTMLDivElement>();
+var isMounted: boolean = reactInstance.isMounted();
+reactInstance.setProps(elementProps);
+reactInstance.replaceProps(props);
+
+var componentInstance: React.ComponentInstance<Props, State> =
+    <React.ComponentInstance<Props, State>>reactInstance;
+var initialState: State = componentInstance.state;
+componentInstance.setState({ inputValue: "!!!" });
+componentInstance.replaceState({ inputValue: "???", seconds: 60 });
+componentInstance.forceUpdate();
+
+var inputRef: React.Instance<React.HTMLAttributes> =
+    componentInstance.refs[INPUT_REF];
+var value: string = inputRef.getDOMNode<HTMLInputElement>().value;
+
+var myComponentInstance = <MyComponentInstance>componentInstance;
+myComponentInstance.reset();
+
+//
+// PropTypes
+// --------------------------------------------------------------------------
+
 var PropTypesSpecification: React.ComponentSpec<any, any> = {
     propTypes: {
-        // You can declare that a prop is a specific JS primitive. By default, these
-        // are all optional.
         optionalArray: React.PropTypes.array,
         optionalBool: React.PropTypes.bool,
         optionalFunc: React.PropTypes.func,
         optionalNumber: React.PropTypes.number,
         optionalObject: React.PropTypes.object,
         optionalString: React.PropTypes.string,
-
-        // Anything that can be rendered: numbers, strings, components or an array
-        // containing these types.
         optionalNode: React.PropTypes.node,
-
-        // A React element
         optionalElement: React.PropTypes.element,
-
-        // You can also declare that a prop is an instance of a class. This uses
-        // JS's instanceof operator.
         optionalMessage: React.PropTypes.instanceOf(Date),
-
-        // You can ensure that your prop is limited to specific values by treating
-        // it as an enum.
-        optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
-
-        // An object that could be one of many types
+        optionalEnum: React.PropTypes.oneOf(["News", "Photos"]),
         optionalUnion: React.PropTypes.oneOfType([
             React.PropTypes.string,
             React.PropTypes.number,
             React.PropTypes.instanceOf(Date)
         ]),
-
-        // An array of a certain type
         optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
-
-        // An object with property values of a certain type
         optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
-
-        // An object taking on a particular shape
         optionalObjectWithShape: React.PropTypes.shape({
             color: React.PropTypes.string,
             fontSize: React.PropTypes.number
         }),
-
-        // You can chain any of the above with `isRequired` to make sure a warning
-        // is shown if the prop isn't provided.
         requiredFunc: React.PropTypes.func.isRequired,
-
-        // A value of any data type
         requiredAny: React.PropTypes.any.isRequired,
-
-        // You can also specify a custom validator. It should return an Error
-        // object if the validation fails. Don't `console.warn` or throw, as this
-        // won't work inside `oneOfType`.
         customProp: function(props: any, propName: string, componentName: string) {
             if (!/matchme/.test(props[propName])) {
-                return new Error('Validation failed!');
+                return new Error("Validation failed!");
             }
             return null;
         }
@@ -68,47 +156,41 @@ var PropTypesSpecification: React.ComponentSpec<any, any> = {
     }
 };
 
-React.createClass(PropTypesSpecification);
+//
+// Example from http://facebook.github.io/react/
+// --------------------------------------------------------------------------
 
-var mountNode: Element;
-
-interface HelloMessageProps {
-    name: string;
+interface TimerState {
+    secondsElapsed: number;
 }
-
-var HelloMessage = React.createClass<HelloMessageProps>({
-    displayName: 'HelloMessage',
-    render: function() {
-        return React.DOM.div(null, "Hello ", (<React.ReactInstance<HelloMessageProps>>this).props.name);
-    }
-});
-
-var HelloMessageFactory = React.createFactory(HelloMessage)
-React.render(HelloMessageFactory({ name: "John" }), mountNode)
-
-var Timer = React.createClass({displayName: 'Timer',
-    getInitialState: function() {
-        return {secondsElapsed: 0};
+interface TimerInstance extends React.ComponentInstance<{}, TimerState> {
+}
+var Timer = React.createClass({
+    displayName: "Timer",
+    getInitialState: () => {
+        return { secondsElapsed: 0 };
     },
-    tick: function() {
-        var me = <React.ComponentInstance<any, {secondsElapsed: number}>>this;
+    tick: () => {
+        var me = <TimerInstance>this;
         me.setState({
             secondsElapsed: me.state.secondsElapsed + 1
         });
     },
-    componentDidMount: function() {
+    componentDidMount: () => {
         this.interval = setInterval(this.tick, 1000);
     },
-    componentWillUnmount: function() {
+    componentWillUnmount: () => {
         clearInterval(this.interval);
     },
-    render: function() {
+    render: () => {
+        var me = <TimerInstance>this;
         return React.DOM.div(
             null,
             "Seconds Elapsed: ",
-            (<React.ComponentInstance<any, {secondsElapsed: number}>>this).state.secondsElapsed
+            me.state.secondsElapsed
         );
     }
 });
-
+var mountNode: Element;
 React.render(React.createElement(Timer, null), mountNode);
+
diff --git a/react/react.d.ts b/react/react.d.ts
index 8a8589203c..2d17c2223a 100644
--- a/react/react.d.ts
+++ b/react/react.d.ts
@@ -37,7 +37,7 @@ declare module React {
     // React Elements 
     // ----------------------------------------------------------------------
 
-    // type ReactType = ReactClass<any> | string;
+    // type ReactType = ComponentClass<any> | string;
 
     interface ReactElement<P> {
         type: any; // ReactType
@@ -54,22 +54,21 @@ declare module React {
     // React Nodes 
     // ----------------------------------------------------------------------
 
-    // Typescript 1.4 (Union types, aliases)
     // type ReactText = string | number;
-    // type ReactFragment = ReactNode[];
-    // type ReactNode = ReactElement<any, any> | ReactFragment | ReactText;
+    // type Fragment = ReactNode[];
+    // type ReactNode = ReactElement<any, any> | Fragment | ReactText;
 
     //
     // React Components 
     // ----------------------------------------------------------------------
 
-    interface ReactStatics<P> {
+    interface ComponentStatics<P> {
         displayName?: string;
         getDefaultProps?(): P;
-        propTypes?: React.ValidationMap<P>;
+        propTypes?: ValidationMap<P>;
     }
 
-    interface ReactClass<P> extends ReactStatics<P> {
+    interface ComponentClass<P> extends ComponentStatics<P> {
         // Deprecated in 0.12. See http://fb.me/react-legacyfactory
         // new(props: P): ReactElement<P>;
         // (props: P): ReactElement<P>;
@@ -83,19 +82,19 @@ declare module React {
         (props?: P, ...children: any/*ReactNode*/[]): ReactElement<P>;
     }
     
-    interface ComponentFactory<P> extends Factory<P> {}
     interface HTMLFactory extends Factory<HTMLAttributes> {}
     interface SVGFactory extends Factory<SVGAttributes> {}
+    interface ComponentFactory<P> extends Factory<P> {}
 
     //
     // Top-Level API
     // ----------------------------------------------------------------------
 
     interface TopLevelAPI {
-        createClass<P>(spec: ComponentSpec<P, any>): ReactClass<P>;
+        createClass<P>(spec: ComponentSpec<P, any>): ComponentClass<P>;
         createElement<P>(type: any/*ReactType*/, props: P, ...children: any/*ReactNode*/[]): ReactElement<P>;
         createFactory<P>(type: any/*ReactType*/): Factory<P>;
-        render<P>(element: ReactElement<P>, container: Element, callback?: () => void): ReactInstance<P>;
+        render<P>(element: ReactElement<P>, container: Element, callback?: () => void): Instance<P>;
         unmountComponentAtNode(container: Element): boolean;
         renderToString(element: ReactElement<any>): string;
         renderToStaticMarkup(element: ReactElement<any>): string;
@@ -107,7 +106,7 @@ declare module React {
     // Component API
     // ----------------------------------------------------------------------
 
-    interface ReactInstance<P> {
+    interface Instance<P> {
         // Use this overload to cast the returned element to a more specific type.
         // Eg: var name = this.refs['name'].getDOMNode<HTMLInputElement>().value;
         getDOMNode<TElement extends Element>(): TElement;
@@ -119,13 +118,13 @@ declare module React {
         replaceProps(nextProps: P, callback?: () => void): void;
     }
     
-    interface ComponentInstance<P, S> extends ReactInstance<P> {
+    interface ComponentInstance<P, S> extends Instance<P> {
         state: S;
         setState(nextState: S, callback?: () => void): void;
         replaceState(nextState: S, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
         refs: {
-            [key: string]: ReactInstance<P>
+            [key: string]: Instance<P>
         };
     }
 
@@ -133,7 +132,7 @@ declare module React {
     // Component Specs and Lifecycle
     // ----------------------------------------------------------------------
 
-    interface Mixin<P, S> extends ReactStatics<P> {
+    interface Mixin<P, S> extends ComponentStatics<P> {
         mixins?: Mixin<P, S>;
         statics?: {
             [key: string]: any;
@@ -407,7 +406,7 @@ declare module React {
         itemType?: string;
 
         // React-specific Attributes
-        dangerouslySetInnerHTML: {
+        dangerouslySetInnerHTML?: {
             __html: string
         };
     }
@@ -464,136 +463,136 @@ declare module React {
 
     interface ReactDOM {
         // HTML
-        a: React.HTMLFactory;
-        abbr: React.HTMLFactory;
-        address: React.HTMLFactory;
-        area: React.HTMLFactory;
-        article: React.HTMLFactory;
-        aside: React.HTMLFactory;
-        audio: React.HTMLFactory;
-        b: React.HTMLFactory;
-        base: React.HTMLFactory;
-        bdi: React.HTMLFactory;
-        bdo: React.HTMLFactory;
-        big: React.HTMLFactory;
-        blockquote: React.HTMLFactory;
-        body: React.HTMLFactory;
-        br: React.HTMLFactory;
-        button: React.HTMLFactory;
-        canvas: React.HTMLFactory;
-        caption: React.HTMLFactory;
-        cite: React.HTMLFactory;
-        code: React.HTMLFactory;
-        col: React.HTMLFactory;
-        colgroup: React.HTMLFactory;
-        data: React.HTMLFactory;
-        datalist: React.HTMLFactory;
-        dd: React.HTMLFactory;
-        del: React.HTMLFactory;
-        details: React.HTMLFactory;
-        dfn: React.HTMLFactory;
-        dialog: React.HTMLFactory;
-        div: React.HTMLFactory;
-        dl: React.HTMLFactory;
-        dt: React.HTMLFactory;
-        em: React.HTMLFactory;
-        embed: React.HTMLFactory;
-        fieldset: React.HTMLFactory;
-        figcaption: React.HTMLFactory;
-        figure: React.HTMLFactory;
-        footer: React.HTMLFactory;
-        form: React.HTMLFactory;
-        h1: React.HTMLFactory;
-        h2: React.HTMLFactory;
-        h3: React.HTMLFactory;
-        h4: React.HTMLFactory;
-        h5: React.HTMLFactory;
-        h6: React.HTMLFactory;
-        head: React.HTMLFactory;
-        header: React.HTMLFactory;
-        hr: React.HTMLFactory;
-        html: React.HTMLFactory;
-        i: React.HTMLFactory;
-        iframe: React.HTMLFactory;
-        img: React.HTMLFactory;
-        input: React.HTMLFactory;
-        ins: React.HTMLFactory;
-        kbd: React.HTMLFactory;
-        keygen: React.HTMLFactory;
-        label: React.HTMLFactory;
-        legend: React.HTMLFactory;
-        li: React.HTMLFactory;
-        link: React.HTMLFactory;
-        main: React.HTMLFactory;
-        map: React.HTMLFactory;
-        mark: React.HTMLFactory;
-        menu: React.HTMLFactory;
-        menuitem: React.HTMLFactory;
-        meta: React.HTMLFactory;
-        meter: React.HTMLFactory;
-        nav: React.HTMLFactory;
-        noscript: React.HTMLFactory;
-        object: React.HTMLFactory;
-        ol: React.HTMLFactory;
-        optgroup: React.HTMLFactory;
-        option: React.HTMLFactory;
-        output: React.HTMLFactory;
-        p: React.HTMLFactory;
-        param: React.HTMLFactory;
-        pre: React.HTMLFactory;
-        progress: React.HTMLFactory;
-        q: React.HTMLFactory;
-        rp: React.HTMLFactory;
-        rt: React.HTMLFactory;
-        ruby: React.HTMLFactory;
-        s: React.HTMLFactory;
-        samp: React.HTMLFactory;
-        script: React.HTMLFactory;
-        section: React.HTMLFactory;
-        select: React.HTMLFactory;
-        small: React.HTMLFactory;
-        source: React.HTMLFactory;
-        span: React.HTMLFactory;
-        strong: React.HTMLFactory;
-        style: React.HTMLFactory;
-        sub: React.HTMLFactory;
-        summary: React.HTMLFactory;
-        sup: React.HTMLFactory;
-        table: React.HTMLFactory;
-        tbody: React.HTMLFactory;
-        td: React.HTMLFactory;
-        textarea: React.HTMLFactory;
-        tfoot: React.HTMLFactory;
-        th: React.HTMLFactory;
-        thead: React.HTMLFactory;
-        time: React.HTMLFactory;
-        title: React.HTMLFactory;
-        tr: React.HTMLFactory;
-        track: React.HTMLFactory;
-        u: React.HTMLFactory;
-        ul: React.HTMLFactory;
-        "var": React.HTMLFactory;
-        video: React.HTMLFactory;
-        wbr: React.HTMLFactory;
+        a: HTMLFactory;
+        abbr: HTMLFactory;
+        address: HTMLFactory;
+        area: HTMLFactory;
+        article: HTMLFactory;
+        aside: HTMLFactory;
+        audio: HTMLFactory;
+        b: HTMLFactory;
+        base: HTMLFactory;
+        bdi: HTMLFactory;
+        bdo: HTMLFactory;
+        big: HTMLFactory;
+        blockquote: HTMLFactory;
+        body: HTMLFactory;
+        br: HTMLFactory;
+        button: HTMLFactory;
+        canvas: HTMLFactory;
+        caption: HTMLFactory;
+        cite: HTMLFactory;
+        code: HTMLFactory;
+        col: HTMLFactory;
+        colgroup: HTMLFactory;
+        data: HTMLFactory;
+        datalist: HTMLFactory;
+        dd: HTMLFactory;
+        del: HTMLFactory;
+        details: HTMLFactory;
+        dfn: HTMLFactory;
+        dialog: HTMLFactory;
+        div: HTMLFactory;
+        dl: HTMLFactory;
+        dt: HTMLFactory;
+        em: HTMLFactory;
+        embed: HTMLFactory;
+        fieldset: HTMLFactory;
+        figcaption: HTMLFactory;
+        figure: HTMLFactory;
+        footer: HTMLFactory;
+        form: HTMLFactory;
+        h1: HTMLFactory;
+        h2: HTMLFactory;
+        h3: HTMLFactory;
+        h4: HTMLFactory;
+        h5: HTMLFactory;
+        h6: HTMLFactory;
+        head: HTMLFactory;
+        header: HTMLFactory;
+        hr: HTMLFactory;
+        html: HTMLFactory;
+        i: HTMLFactory;
+        iframe: HTMLFactory;
+        img: HTMLFactory;
+        input: HTMLFactory;
+        ins: HTMLFactory;
+        kbd: HTMLFactory;
+        keygen: HTMLFactory;
+        label: HTMLFactory;
+        legend: HTMLFactory;
+        li: HTMLFactory;
+        link: HTMLFactory;
+        main: HTMLFactory;
+        map: HTMLFactory;
+        mark: HTMLFactory;
+        menu: HTMLFactory;
+        menuitem: HTMLFactory;
+        meta: HTMLFactory;
+        meter: HTMLFactory;
+        nav: HTMLFactory;
+        noscript: HTMLFactory;
+        object: HTMLFactory;
+        ol: HTMLFactory;
+        optgroup: HTMLFactory;
+        option: HTMLFactory;
+        output: HTMLFactory;
+        p: HTMLFactory;
+        param: HTMLFactory;
+        pre: HTMLFactory;
+        progress: HTMLFactory;
+        q: HTMLFactory;
+        rp: HTMLFactory;
+        rt: HTMLFactory;
+        ruby: HTMLFactory;
+        s: HTMLFactory;
+        samp: HTMLFactory;
+        script: HTMLFactory;
+        section: HTMLFactory;
+        select: HTMLFactory;
+        small: HTMLFactory;
+        source: HTMLFactory;
+        span: HTMLFactory;
+        strong: HTMLFactory;
+        style: HTMLFactory;
+        sub: HTMLFactory;
+        summary: HTMLFactory;
+        sup: HTMLFactory;
+        table: HTMLFactory;
+        tbody: HTMLFactory;
+        td: HTMLFactory;
+        textarea: HTMLFactory;
+        tfoot: HTMLFactory;
+        th: HTMLFactory;
+        thead: HTMLFactory;
+        time: HTMLFactory;
+        title: HTMLFactory;
+        tr: HTMLFactory;
+        track: HTMLFactory;
+        u: HTMLFactory;
+        ul: HTMLFactory;
+        "var": HTMLFactory;
+        video: HTMLFactory;
+        wbr: HTMLFactory;
 
         // SVG
-        circle: React.SVGFactory;
-        defs: React.SVGFactory;
-        ellipse: React.SVGFactory;
-        g: React.SVGFactory;
-        line: React.SVGFactory;
-        linearGradient: React.SVGFactory;
-        mask: React.SVGFactory;
-        path: React.SVGFactory;
-        pattern: React.SVGFactory;
-        polygon: React.SVGFactory;
-        polyline: React.SVGFactory;
-        radialGradient: React.SVGFactory;
-        rect: React.SVGFactory;
-        stop: React.SVGFactory;
-        svg: React.SVGFactory;
-        text: React.SVGFactory;
-        tspan: React.SVGFactory;
+        circle: SVGFactory;
+        defs: SVGFactory;
+        ellipse: SVGFactory;
+        g: SVGFactory;
+        line: SVGFactory;
+        linearGradient: SVGFactory;
+        mask: SVGFactory;
+        path: SVGFactory;
+        pattern: SVGFactory;
+        polygon: SVGFactory;
+        polyline: SVGFactory;
+        radialGradient: SVGFactory;
+        rect: SVGFactory;
+        stop: SVGFactory;
+        svg: SVGFactory;
+        text: SVGFactory;
+        tspan: SVGFactory;
     }
 
     //
@@ -654,11 +653,11 @@ declare module React {
 
     interface TransitionGroupProps {
         component?: any; // ReactType
-        childFactory?: (child: React.ReactElement<any>) => React.ReactElement<any>;
+        childFactory?: (child: ReactElement<any>) => ReactElement<any>;
     }
 
-    interface CSSTransitionGroup extends React.ReactClass<CSSTransitionGroupProps> {}
-    interface TransitionGroup extends React.ReactClass<TransitionGroupProps> {}
+    interface CSSTransitionGroup extends ComponentClass<CSSTransitionGroupProps> {}
+    interface TransitionGroup extends ComponentClass<TransitionGroupProps> {}
 
     //
     // React.addons (Mixins)
@@ -669,11 +668,11 @@ declare module React {
         requestChange(newValue: T): void;
     }
 
-    interface LinkedStateMixin extends React.Mixin<any, any> {
+    interface LinkedStateMixin extends Mixin<any, any> {
         linkState<T>(key: string): ReactLink<T>;
     }
 
-    interface PureRenderMixin extends React.Mixin<any, any> {
+    interface PureRenderMixin extends Mixin<any, any> {
     }
 
     //
@@ -738,28 +737,28 @@ declare module React {
         };
     }
 
-    // Alias for ReactTestUtils
-    interface Instance<P> extends React.ReactInstance<P> {}
-
     interface ReactTestUtils {
         Simulate: Simulate;
 
-        renderIntoDocument<P>(element: React.ReactElement<P>): Instance<P>;
+        renderIntoDocument<P>(element: ReactElement<P>): Instance<P>;
         mockComponent(mocked: MockedComponent, mockTagName?: string): ReactTestUtils;
-        isElementOfType(element: React.ReactElement<any>, type: any/*ReactType*/): boolean;
+
+        isElementOfType(element: ReactElement<any>, type: any/*ReactType*/): boolean;
         isDOMComponent(instance: Instance<any>): boolean;
         isCompositeComponent(instance: Instance<any>): boolean;
-        isCompositeComponentWithType(instance: Instance<any>, type: React.ReactClass<any>): boolean;
+        isCompositeComponentWithType(instance: Instance<any>, type: ComponentClass<any>): boolean;
         isTextComponent(instance: Instance<any>): boolean;
+
         findAllInRenderedTree(tree: Instance<any>, fn: (i: Instance<any>) => boolean): Instance<any>;
+
         scryRenderedDOMComponentsWithClass(tree: Instance<any>, className: string): Instance<any>[];
         findRenderedDOMComponentWithClass(tree: Instance<any>, className: string): Instance<any>;
+
         scryRenderedDOMComponentsWithTag(tree: Instance<any>, tagName: string): Instance<any>[];
         findRenderedDOMComponentWithTag(tree: Instance<any>, tagName: string): Instance<any>;
-        scryRenderedComponentsWithType<P, S>(
-            tree: Instance<any>, type: React.ReactClass<P>): React.ComponentInstance<P, S>[];
-        findRenderedComponentWithType<P, S>(
-            tree: Instance<any>, type: React.ReactClass<P>): React.ComponentInstance<P, S>;
+
+        scryRenderedComponentsWithType<P>(tree: Instance<any>, type: ComponentClass<P>): Instance<P>[];
+        findRenderedComponentWithType<P>(tree: Instance<any>, type: ComponentClass<P>): Instance<P>;
     }
 
     interface SyntheticEventData {
@@ -863,7 +862,7 @@ declare module React {
             batchedUpdates(callback: () => void): void;
 
             classSet(cx: { [key: string]: boolean }): string;
-            cloneWithProps<P>(element: React.ReactElement<P>, props: P): React.ReactElement<P>;
+            cloneWithProps<P>(element: ReactElement<P>, props: P): ReactElement<P>;
 
             update(value: any[], spec: UpdateArraySpec): any[];
             update(value: {}, spec: UpdateSpec): any;

From 4c069d5d6e27d26497a090a8994dd84d728a5570 Mon Sep 17 00:00:00 2001
From: Vincent Siao <vincent@asana.com>
Date: Tue, 2 Dec 2014 18:30:02 -0800
Subject: [PATCH 04/10] Fill out HTMLAttributes types

---
 react/react.d.ts | 102 +++++++++++++++++++++++------------------------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/react/react.d.ts b/react/react.d.ts
index 2d17c2223a..6173cab542 100644
--- a/react/react.d.ts
+++ b/react/react.d.ts
@@ -346,61 +346,61 @@ declare module React {
         httpEquiv?: string;
         icon?: string;
         id?: string;
-        label?: any;
-        lang?: any;
-        list?: any;
-        loop?: any;
-        max?: any;
-        maxLength?: any;
-        mediaGroup?: any;
-        method?: any;
-        min?: any;
-        multiple?: any;
-        muted?: any;
-        name?: any;
-        noValidate?: any;
-        open?: any;
-        pattern?: any;
-        placeholder?: any;
-        poster?: any;
-        preload?: any;
-        radioGroup?: any;
-        readOnly?: any;
-        rel?: any;
-        required?: any;
-        role?: any;
-        rows?: any;
-        rowSpan?: any;
-        sandbox?: any;
-        scope?: any;
-        scrollLeft?: any;
-        scrolling?: any;
-        scrollTop?: any;
-        seamless?: any;
-        selected?: any;
-        shape?: any;
-        size?: any;
-        span?: any;
-        spellCheck?: any;
-        src?: any;
-        srcDoc?: any;
-        srcSet?: any;
-        start?: any;
-        step?: any;
-        style?: any;
-        tabIndex?: any;
-        target?: any;
-        title?: any;
-        type?: any;
-        useMap?: any;
-        value?: any;
-        width?: any;
-        wmode?: any;
+        label?: string;
+        lang?: string;
+        list?: string;
+        loop?: boolean;
+        max?: any; // number | string
+        maxLength?: number;
+        mediaGroup?: string;
+        method?: string;
+        min?: any; // number | string
+        multiple?: boolean;
+        muted?: boolean;
+        name?: string;
+        noValidate?: boolean;
+        open?: boolean;
+        pattern?: string;
+        placeholder?: string;
+        poster?: string;
+        preload?: string;
+        radioGroup?: string;
+        readOnly?: boolean;
+        rel?: string;
+        required?: boolean;
+        role?: string;
+        rows?: number;
+        rowSpan?: number;
+        sandbox?: string;
+        scope?: string;
+        scrollLeft?: number;
+        scrolling?: string;
+        scrollTop?: number;
+        seamless?: boolean;
+        selected?: boolean;
+        shape?: string;
+        size?: number;
+        span?: number;
+        spellCheck?: boolean;
+        src?: string;
+        srcDoc?: string;
+        srcSet?: string;
+        start?: number;
+        step?: any; // number | string
+        style?: string;
+        tabIndex?: number;
+        target?: string;
+        title?: string;
+        type?: string;
+        useMap?: string;
+        value?: string;
+        width?: any; // number | string
+        wmode?: string;
 
         // Non-standard Attributes
         autoCapitalize?: boolean;
         autoCorrect?: boolean;
-        property?: any;
+        property?: string;
         itemProp?: string;
         itemScope?: boolean;
         itemType?: string;

From 5c4c344b1e0de6859888b25f0c0e57d4e1b20752 Mon Sep 17 00:00:00 2001
From: Vincent Siao <vincent@asana.com>
Date: Tue, 2 Dec 2014 18:51:27 -0800
Subject: [PATCH 05/10] Fill out React.SVGAttributes types

---
 react/react.d.ts | 86 ++++++++++++++++++++++++------------------------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/react/react.d.ts b/react/react.d.ts
index 6173cab542..3842c54e7e 100644
--- a/react/react.d.ts
+++ b/react/react.d.ts
@@ -412,49 +412,49 @@ declare module React {
     }
 
     interface SVGAttributes extends ReactAttributes {
-        cx?: any;
-        cy?: any;
-        d?: any;
-        dx?: any;
-        dy?: any;
-        fill?: any;
-        fillOpacity?: any;
-        fontFamily?: any;
-        fontSize?: any;
-        fx?: any;
-        fy?: any;
-        gradientTransform?: any;
-        gradientUnits?: any;
-        markerEnd?: any;
-        markerMid?: any;
-        markerStart?: any;
-        offset?: any;
-        opacity?: any;
-        patternContentUnits?: any;
-        patternUnits?: any;
-        points?: any;
-        preserveAspectRatio?: any;
-        r?: any;
-        rx?: any;
-        ry?: any;
-        spreadMethod?: any;
-        stopColor?: any;
-        stopOpacity?: any;
-        stroke?: any;
-        strokeDasharray?: any;
-        strokeLinecap?: any;
-        strokeOpacity?: any;
-        strokeWidth?: any;
-        textAnchor?: any;
-        transform?: any;
-        version?: any;
-        viewBox?: any;
-        x1?: any;
-        x2?: any;
-        x?: any;
-        y1?: any;
-        y2?: any;
-        y?: any;
+        cx?: any; // SVGLength | SVGAnimatedLength
+        cy?: any; 
+        d?: string;
+        dx?: any; // SVGLength | SVGAnimatedLength
+        dy?: any; // SVGLength | SVGAnimatedLength
+        fill?: any; // SVGPaint | string
+        fillOpacity?: any; // number | string
+        fontFamily?: string;
+        fontSize?: any; // number | string
+        fx?: any; // SVGLength | SVGAnimatedLength
+        fy?: any; // SVGLength | SVGAnimatedLength
+        gradientTransform?: any; // SVGTransformList | SVGAnimatedTransformList
+        gradientUnits?: string;
+        markerEnd?: string;
+        markerMid?: string;
+        markerStart?: string;
+        offset?: any; // number | string
+        opacity?: any; // number | string
+        patternContentUnits?: string;
+        patternUnits?: string;
+        points?: string;
+        preserveAspectRatio?: string;
+        r?: any; // SVGLength | SVGAnimatedLength
+        rx?: any; // SVGLength | SVGAnimatedLength
+        ry?: any; // SVGLength | SVGAnimatedLength
+        spreadMethod?: string;
+        stopColor?: any; // SVGColor | string
+        stopOpacity?: any; // number | string
+        stroke?: any; // SVGPaint
+        strokeDasharray?: string;
+        strokeLinecap?: string;
+        strokeOpacity?: any; // number | string
+        strokeWidth?: any; // SVGLength | SVGAnimatedLength
+        textAnchor?: string;
+        transform?: any; // SVGTransformList | SVGAnimatedTransformList
+        version?: string;
+        viewBox?: string;
+        x1?: any; // SVGLength | SVGAnimatedLength
+        x2?: any; // SVGLength | SVGAnimatedLength
+        x?: any; // SVGLength | SVGAnimatedLength
+        y1?: any; // SVGLength | SVGAnimatedLength
+        y2?: any; // SVGLength | SVGAnimatedLength
+        y?: any; // SVGLength | SVGAnimatedLength
     }
 
     //

From db0333df599cf6483cd854ab4504e85db67ab0fe Mon Sep 17 00:00:00 2001
From: Vincent Siao <vincent@asana.com>
Date: Tue, 2 Dec 2014 19:18:58 -0800
Subject: [PATCH 06/10] React.Instance<P> -> React.ElementInstance<P>

---
 react/react-tests.ts |  4 ++--
 react/react.d.ts     | 34 +++++++++++++++++-----------------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/react/react-tests.ts b/react/react-tests.ts
index fb0d6eebc3..0ca0e9f7bc 100644
--- a/react/react-tests.ts
+++ b/react/react-tests.ts
@@ -63,7 +63,7 @@ var reactElement: React.ReactElement<Props> =
 var reactFactory: React.Factory<Props> =
     React.createFactory<Props>(reactClass);
 
-var reactInstance: React.Instance<Props> =
+var reactInstance: React.ElementInstance<Props> =
     React.render<Props>(reactElement, container);
 
 var unmounted: boolean = React.unmountComponentAtNode(container);
@@ -108,7 +108,7 @@ componentInstance.setState({ inputValue: "!!!" });
 componentInstance.replaceState({ inputValue: "???", seconds: 60 });
 componentInstance.forceUpdate();
 
-var inputRef: React.Instance<React.HTMLAttributes> =
+var inputRef: React.ElementInstance<React.HTMLAttributes> =
     componentInstance.refs[INPUT_REF];
 var value: string = inputRef.getDOMNode<HTMLInputElement>().value;
 
diff --git a/react/react.d.ts b/react/react.d.ts
index 3842c54e7e..3eaa868fed 100644
--- a/react/react.d.ts
+++ b/react/react.d.ts
@@ -94,7 +94,7 @@ declare module React {
         createClass<P>(spec: ComponentSpec<P, any>): ComponentClass<P>;
         createElement<P>(type: any/*ReactType*/, props: P, ...children: any/*ReactNode*/[]): ReactElement<P>;
         createFactory<P>(type: any/*ReactType*/): Factory<P>;
-        render<P>(element: ReactElement<P>, container: Element, callback?: () => void): Instance<P>;
+        render<P>(element: ReactElement<P>, container: Element, callback?: () => void): ElementInstance<P>;
         unmountComponentAtNode(container: Element): boolean;
         renderToString(element: ReactElement<any>): string;
         renderToStaticMarkup(element: ReactElement<any>): string;
@@ -106,7 +106,7 @@ declare module React {
     // Component API
     // ----------------------------------------------------------------------
 
-    interface Instance<P> {
+    interface ElementInstance<P> {
         // Use this overload to cast the returned element to a more specific type.
         // Eg: var name = this.refs['name'].getDOMNode<HTMLInputElement>().value;
         getDOMNode<TElement extends Element>(): TElement;
@@ -118,13 +118,13 @@ declare module React {
         replaceProps(nextProps: P, callback?: () => void): void;
     }
     
-    interface ComponentInstance<P, S> extends Instance<P> {
+    interface ComponentInstance<P, S> extends ElementInstance<P> {
         state: S;
         setState(nextState: S, callback?: () => void): void;
         replaceState(nextState: S, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
         refs: {
-            [key: string]: Instance<P>
+            [key: string]: ElementInstance<P>
         };
     }
 
@@ -740,25 +740,25 @@ declare module React {
     interface ReactTestUtils {
         Simulate: Simulate;
 
-        renderIntoDocument<P>(element: ReactElement<P>): Instance<P>;
+        renderIntoDocument<P>(element: ReactElement<P>): ElementInstance<P>;
         mockComponent(mocked: MockedComponent, mockTagName?: string): ReactTestUtils;
 
         isElementOfType(element: ReactElement<any>, type: any/*ReactType*/): boolean;
-        isDOMComponent(instance: Instance<any>): boolean;
-        isCompositeComponent(instance: Instance<any>): boolean;
-        isCompositeComponentWithType(instance: Instance<any>, type: ComponentClass<any>): boolean;
-        isTextComponent(instance: Instance<any>): boolean;
+        isDOMComponent(instance: ElementInstance<any>): boolean;
+        isCompositeComponent(instance: ElementInstance<any>): boolean;
+        isCompositeComponentWithType(instance: ElementInstance<any>, type: ComponentClass<any>): boolean;
+        isTextComponent(instance: ElementInstance<any>): boolean;
 
-        findAllInRenderedTree(tree: Instance<any>, fn: (i: Instance<any>) => boolean): Instance<any>;
+        findAllInRenderedTree(tree: ElementInstance<any>, fn: (i: ElementInstance<any>) => boolean): ElementInstance<any>;
 
-        scryRenderedDOMComponentsWithClass(tree: Instance<any>, className: string): Instance<any>[];
-        findRenderedDOMComponentWithClass(tree: Instance<any>, className: string): Instance<any>;
+        scryRenderedDOMComponentsWithClass(tree: ElementInstance<any>, className: string): ElementInstance<any>[];
+        findRenderedDOMComponentWithClass(tree: ElementInstance<any>, className: string): ElementInstance<any>;
 
-        scryRenderedDOMComponentsWithTag(tree: Instance<any>, tagName: string): Instance<any>[];
-        findRenderedDOMComponentWithTag(tree: Instance<any>, tagName: string): Instance<any>;
+        scryRenderedDOMComponentsWithTag(tree: ElementInstance<any>, tagName: string): ElementInstance<any>[];
+        findRenderedDOMComponentWithTag(tree: ElementInstance<any>, tagName: string): ElementInstance<any>;
 
-        scryRenderedComponentsWithType<P>(tree: Instance<any>, type: ComponentClass<P>): Instance<P>[];
-        findRenderedComponentWithType<P>(tree: Instance<any>, type: ComponentClass<P>): Instance<P>;
+        scryRenderedComponentsWithType<P>(tree: ElementInstance<any>, type: ComponentClass<P>): ElementInstance<P>[];
+        findRenderedComponentWithType<P>(tree: ElementInstance<any>, type: ComponentClass<P>): ElementInstance<P>;
     }
 
     interface SyntheticEventData {
@@ -797,7 +797,7 @@ declare module React {
 
     interface EventSimulator {
         (element: Element, eventData?: SyntheticEventData): void;
-        (descriptor: Instance<any>, eventData?: SyntheticEventData): void;
+        (descriptor: ElementInstance<any>, eventData?: SyntheticEventData): void;
     }
 
     interface Simulate {

From 01cfe48a46a3f8a7113cde9a8e62958f56beec76 Mon Sep 17 00:00:00 2001
From: Vincent Siao <vincent@asana.com>
Date: Tue, 2 Dec 2014 19:43:17 -0800
Subject: [PATCH 07/10] Change React.createFactory to take
 React.ComponentClass<P>

---
 react/react.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/react.d.ts b/react/react.d.ts
index 3eaa868fed..70608cf446 100644
--- a/react/react.d.ts
+++ b/react/react.d.ts
@@ -93,7 +93,7 @@ declare module React {
     interface TopLevelAPI {
         createClass<P>(spec: ComponentSpec<P, any>): ComponentClass<P>;
         createElement<P>(type: any/*ReactType*/, props: P, ...children: any/*ReactNode*/[]): ReactElement<P>;
-        createFactory<P>(type: any/*ReactType*/): Factory<P>;
+        createFactory<P>(componentClass: ComponentClass<P>): Factory<P>;
         render<P>(element: ReactElement<P>, container: Element, callback?: () => void): ElementInstance<P>;
         unmountComponentAtNode(container: Element): boolean;
         renderToString(element: ReactElement<any>): string;

From cdc1fe2ad0f6b564c4dc95d71dbd94dc96ef5bf5 Mon Sep 17 00:00:00 2001
From: Vincent Siao <vincent@asana.com>
Date: Tue, 2 Dec 2014 20:32:38 -0800
Subject: [PATCH 08/10] Fix React.ComponentInstance<P>.refs type and add some
 CSS properties

---
 react/react.d.ts | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/react/react.d.ts b/react/react.d.ts
index 70608cf446..c90de5137d 100644
--- a/react/react.d.ts
+++ b/react/react.d.ts
@@ -124,7 +124,7 @@ declare module React {
         replaceState(nextState: S, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
         refs: {
-            [key: string]: ElementInstance<P>
+            [key: string]: ElementInstance<any>
         };
     }
 
@@ -303,6 +303,28 @@ declare module React {
         onWheel?: WheelEventHandler;
     }
 
+    interface CSSProperties {
+        columnCount?: number;
+        flex?: number;
+        flexGrow?: number;
+        flexShrink?: number;
+        fontWeight?: number;
+        lineClamp?: number;
+        lineHeight?: number;
+        opacity?: number;
+        order?: number;
+        orphans?: number;
+        widows?: number;
+        zIndex?: number;
+        zoom?: number;
+
+        // SVG-related properties
+        fillOpacity?: number;
+        strokeOpacity?: number;
+
+        [key: string]: any; // number | string
+    }
+
     interface HTMLAttributes extends ReactAttributes {
         accept?: string;
         accessKey?: string;
@@ -387,7 +409,7 @@ declare module React {
         srcSet?: string;
         start?: number;
         step?: any; // number | string
-        style?: string;
+        style?: CSSProperties;
         tabIndex?: number;
         target?: string;
         title?: string;

From 9a9ff2ed081d5c6b579321c3aca3268c2e26cff5 Mon Sep 17 00:00:00 2001
From: Vincent Siao <vincent@asana.com>
Date: Tue, 2 Dec 2014 21:59:46 -0800
Subject: [PATCH 09/10] Move Browser interfaces into React module

---
 react/react.d.ts | 73 ++++++++++++++++++++++++------------------------
 1 file changed, 36 insertions(+), 37 deletions(-)

diff --git a/react/react.d.ts b/react/react.d.ts
index c90de5137d..5b19f032aa 100644
--- a/react/react.d.ts
+++ b/react/react.d.ts
@@ -3,36 +3,7 @@
 // Definitions by: Asana <https://asana.com>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
 
-declare module Browser {
-    // Browser Interfaces
-    // Taken from https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
-
-    interface AbstractView {
-        styleMedia: StyleMedia;
-        document: Document;
-    }
-
-    interface Touch {
-        identifier: number;
-        target: EventTarget;
-        screenX: number;
-        screenY: number;
-        clientX: number;
-        clientY: number;
-        pageX: number;
-        pageY: number;
-    }
-
-    interface TouchList {
-        [index: number]: Touch;
-        length: number;
-        item(index: number): Touch;
-        identifiedTouch(identifier: number): Touch;
-    }
-}
-
 declare module React {
-
     //
     // React Elements 
     // ----------------------------------------------------------------------
@@ -219,18 +190,18 @@ declare module React {
 
     interface TouchEvent extends SyntheticEvent {
         altKey: boolean;
-        changedTouches: Browser.TouchList;
+        changedTouches: TouchList;
         ctrlKey: boolean;
         getModifierState(key: string): boolean;
         metaKey: boolean;
         shiftKey: boolean;
-        targetTouches: Browser.TouchList;
-        touches: Browser.TouchList;
+        targetTouches: TouchList;
+        touches: TouchList;
     }
 
     interface UIEvent extends SyntheticEvent {
         detail: number;
-        view: Browser.AbstractView;
+        view: AbstractView;
     }
 
     interface WheelEvent extends SyntheticEvent {
@@ -789,7 +760,7 @@ declare module React {
         buttons?: number;
         clientX?: number;
         clientY?: number;
-        changedTouches?: Browser.TouchList;
+        changedTouches?: TouchList;
         charCode?: boolean;
         clipboardData?: DataTransfer;
         ctrlKey?: boolean;
@@ -811,9 +782,9 @@ declare module React {
         screenX?: number;
         screenY?: number;
         shiftKey?: boolean;
-        targetTouches?: Browser.TouchList;
-        touches?: Browser.TouchList;
-        view?: Browser.AbstractView;
+        targetTouches?: TouchList;
+        touches?: TouchList;
+        view?: AbstractView;
         which?: number;
     }
 
@@ -894,6 +865,34 @@ declare module React {
             TestUtils: ReactTestUtils;
         };
     }
+
+    //
+    // Browser Interfaces
+    // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
+    // ----------------------------------------------------------------------
+
+    interface AbstractView {
+        styleMedia: StyleMedia;
+        document: Document;
+    }
+
+    interface Touch {
+        identifier: number;
+        target: EventTarget;
+        screenX: number;
+        screenY: number;
+        clientX: number;
+        clientY: number;
+        pageX: number;
+        pageY: number;
+    }
+
+    interface TouchList {
+        [index: number]: Touch;
+        length: number;
+        item(index: number): Touch;
+        identifiedTouch(identifier: number): Touch;
+    }
 }
 
 declare module "react" {

From b8a0461280813b69bb1ab15cb87f7231794ee846 Mon Sep 17 00:00:00 2001
From: Vincent Siao <vincent@asana.com>
Date: Wed, 3 Dec 2014 14:56:30 -0800
Subject: [PATCH 10/10] React.Instance<P> -> React.Component<P>; add
 React.DOM.picture and extra HTML attributes

---
 react/react-addons-tests.ts | 18 ++++-----
 react/react-tests.ts        | 40 ++++++++++----------
 react/react.d.ts            | 73 +++++++++++++++++++++++--------------
 3 files changed, 75 insertions(+), 56 deletions(-)

diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts
index 1de8255f19..059769bb94 100644
--- a/react/react-addons-tests.ts
+++ b/react/react-addons-tests.ts
@@ -2,8 +2,8 @@
 import React = require("react/addons");
 
 // TestUtils
-var that: React.ComponentInstance<any, any>;
-var node = that.refs['input'].getDOMNode();
+var that: React.CompositeComponent<any, any>;
+var node = that.refs["input"].getDOMNode();
 React.addons.TestUtils.Simulate.click(node);
 React.addons.TestUtils.Simulate.change(node);
 React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
@@ -14,20 +14,20 @@ interface GreetingProps {
 interface GreetingState {
     morning: boolean;
 }
-interface GreetingInstance extends React.ComponentInstance<GreetingProps, GreetingState> {
+interface Greeting extends React.CompositeComponent<GreetingProps, GreetingState> {
 }
-var Greeting = React.createClass({displayName: 'Greeting',
+var Greeting = React.createClass({displayName: "Greeting",
     getInitialState: function() {
         return {morning: true};
     },
     render: function() {
-        var me = <GreetingInstance>this;
+        var me = <Greeting>this;
         return React.DOM.div(null, (me.state.morning ? "Hello" : "Goodbye "), me.props.name);
     }
 });
 
 var root = React.addons.TestUtils.renderIntoDocument(React.createElement(Greeting, {name: "John"}));
-var greeting = <GreetingInstance>React.addons.TestUtils.findRenderedComponentWithType(root, Greeting);
+var greeting = <Greeting>React.addons.TestUtils.findRenderedComponentWithType(root, Greeting);
 greeting.setState({
     morning: false
 });
@@ -36,7 +36,7 @@ var isImportant: boolean;
 var isRead: boolean;
 var cx = React.addons.classSet;
 var classes: string = cx({
-    'message': true,
-    'message-important': isImportant,
-    'message-read': isRead
+    "message": true,
+    "message-important": isImportant,
+    "message-read": isRead
 });
diff --git a/react/react-tests.ts b/react/react-tests.ts
index 0ca0e9f7bc..6571556189 100644
--- a/react/react-tests.ts
+++ b/react/react-tests.ts
@@ -13,7 +13,7 @@ interface State {
     seconds?: number;
 }
 
-interface MyComponentInstance extends React.ComponentInstance<Props, State> {
+interface MyComponent extends React.CompositeComponent<Props, State> {
     reset(): void;
 }
 
@@ -63,7 +63,7 @@ var reactElement: React.ReactElement<Props> =
 var reactFactory: React.Factory<Props> =
     React.createFactory<Props>(reactClass);
 
-var reactInstance: React.ElementInstance<Props> =
+var component: React.Component<Props> =
     React.render<Props>(reactElement, container);
 
 var unmounted: boolean = React.unmountComponentAtNode(container);
@@ -95,25 +95,25 @@ var propTypes: React.ValidationMap<Props> = reactClass.propTypes;
 // Component API
 // --------------------------------------------------------------------------
 
-var htmlElement: Element = reactInstance.getDOMNode();
-var divElement: HTMLDivElement = reactInstance.getDOMNode<HTMLDivElement>();
-var isMounted: boolean = reactInstance.isMounted();
-reactInstance.setProps(elementProps);
-reactInstance.replaceProps(props);
+var htmlElement: Element = component.getDOMNode();
+var divElement: HTMLDivElement = component.getDOMNode<HTMLDivElement>();
+var isMounted: boolean = component.isMounted();
+component.setProps(elementProps);
+component.replaceProps(props);
 
-var componentInstance: React.ComponentInstance<Props, State> =
-    <React.ComponentInstance<Props, State>>reactInstance;
-var initialState: State = componentInstance.state;
-componentInstance.setState({ inputValue: "!!!" });
-componentInstance.replaceState({ inputValue: "???", seconds: 60 });
-componentInstance.forceUpdate();
+var compComponent: React.CompositeComponent<Props, State> =
+    <React.CompositeComponent<Props, State>>component;
+var initialState: State = compComponent.state;
+compComponent.setState({ inputValue: "!!!" });
+compComponent.replaceState({ inputValue: "???", seconds: 60 });
+compComponent.forceUpdate();
 
-var inputRef: React.ElementInstance<React.HTMLAttributes> =
-    componentInstance.refs[INPUT_REF];
+var inputRef: React.HTMLComponent =
+    <React.HTMLComponent>compComponent.refs[INPUT_REF];
 var value: string = inputRef.getDOMNode<HTMLInputElement>().value;
 
-var myComponentInstance = <MyComponentInstance>componentInstance;
-myComponentInstance.reset();
+var myComponent = <MyComponent>compComponent;
+myComponent.reset();
 
 //
 // PropTypes
@@ -163,7 +163,7 @@ var PropTypesSpecification: React.ComponentSpec<any, any> = {
 interface TimerState {
     secondsElapsed: number;
 }
-interface TimerInstance extends React.ComponentInstance<{}, TimerState> {
+interface Timer extends React.CompositeComponent<{}, TimerState> {
 }
 var Timer = React.createClass({
     displayName: "Timer",
@@ -171,7 +171,7 @@ var Timer = React.createClass({
         return { secondsElapsed: 0 };
     },
     tick: () => {
-        var me = <TimerInstance>this;
+        var me = <Timer>this;
         me.setState({
             secondsElapsed: me.state.secondsElapsed + 1
         });
@@ -183,7 +183,7 @@ var Timer = React.createClass({
         clearInterval(this.interval);
     },
     render: () => {
-        var me = <TimerInstance>this;
+        var me = <Timer>this;
         return React.DOM.div(
             null,
             "Seconds Elapsed: ",
diff --git a/react/react.d.ts b/react/react.d.ts
index 5b19f032aa..1356b1280f 100644
--- a/react/react.d.ts
+++ b/react/react.d.ts
@@ -65,7 +65,7 @@ declare module React {
         createClass<P>(spec: ComponentSpec<P, any>): ComponentClass<P>;
         createElement<P>(type: any/*ReactType*/, props: P, ...children: any/*ReactNode*/[]): ReactElement<P>;
         createFactory<P>(componentClass: ComponentClass<P>): Factory<P>;
-        render<P>(element: ReactElement<P>, container: Element, callback?: () => void): ElementInstance<P>;
+        render<P>(element: ReactElement<P>, container: Element, callback?: () => void): Component<P>;
         unmountComponentAtNode(container: Element): boolean;
         renderToString(element: ReactElement<any>): string;
         renderToStaticMarkup(element: ReactElement<any>): string;
@@ -77,7 +77,7 @@ declare module React {
     // Component API
     // ----------------------------------------------------------------------
 
-    interface ElementInstance<P> {
+    interface Component<P> {
         // Use this overload to cast the returned element to a more specific type.
         // Eg: var name = this.refs['name'].getDOMNode<HTMLInputElement>().value;
         getDOMNode<TElement extends Element>(): TElement;
@@ -88,14 +88,21 @@ declare module React {
         setProps(nextProps: P, callback?: () => void): void;
         replaceProps(nextProps: P, callback?: () => void): void;
     }
+
+    interface DOMComponent<P> extends Component<P> {
+        tagName: string;
+    }
+
+    interface HTMLComponent extends DOMComponent<HTMLAttributes> {}
+    interface SVGComponent extends DOMComponent<SVGAttributes> {}
     
-    interface ComponentInstance<P, S> extends ElementInstance<P> {
+    interface CompositeComponent<P, S> extends Component<P>, ComponentSpec<P, S> {
         state: S;
         setState(nextState: S, callback?: () => void): void;
         replaceState(nextState: S, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
         refs: {
-            [key: string]: ElementInstance<any>
+            [key: string]: Component<any>
         };
     }
 
@@ -272,6 +279,10 @@ declare module React {
         onTouchStart?: TouchEventHandler;
         onScroll?: UIEventHandler;
         onWheel?: WheelEventHandler;
+
+        dangerouslySetInnerHTML?: {
+            __html: string
+        };
     }
 
     interface CSSProperties {
@@ -298,6 +309,7 @@ declare module React {
 
     interface HTMLAttributes extends ReactAttributes {
         accept?: string;
+        acceptCharset?: string;
         accessKey?: string;
         action?: string;
         allowFullScreen?: boolean;
@@ -311,6 +323,7 @@ declare module React {
         cellSpacing?: any; // number | string
         charSet?: string;
         checked?: boolean;
+        classID?: string;
         className?: string;
         cols?: number;
         colSpan?: number;
@@ -343,8 +356,10 @@ declare module React {
         lang?: string;
         list?: string;
         loop?: boolean;
+        manifest?: string;
         max?: any; // number | string
         maxLength?: number;
+        media?: string;
         mediaGroup?: string;
         method?: string;
         min?: any; // number | string
@@ -373,6 +388,7 @@ declare module React {
         selected?: boolean;
         shape?: string;
         size?: number;
+        sizes?: string;
         span?: number;
         spellCheck?: boolean;
         src?: string;
@@ -397,11 +413,6 @@ declare module React {
         itemProp?: string;
         itemScope?: boolean;
         itemType?: string;
-
-        // React-specific Attributes
-        dangerouslySetInnerHTML?: {
-            __html: string
-        };
     }
 
     interface SVGAttributes extends ReactAttributes {
@@ -532,6 +543,7 @@ declare module React {
         output: HTMLFactory;
         p: HTMLFactory;
         param: HTMLFactory;
+        picture: HTMLFactory;
         pre: HTMLFactory;
         progress: HTMLFactory;
         q: HTMLFactory;
@@ -724,34 +736,41 @@ declare module React {
     // React.addons.TestUtils
     // ----------------------------------------------------------------------
 
-    interface MockedComponent {
-        render: {
-            mockImplementation(impl: () => any): void;
-        };
+    interface MockedComponentClass {
+        new(): any;
     }
 
     interface ReactTestUtils {
         Simulate: Simulate;
 
-        renderIntoDocument<P>(element: ReactElement<P>): ElementInstance<P>;
-        mockComponent(mocked: MockedComponent, mockTagName?: string): ReactTestUtils;
+        renderIntoDocument<P>(element: ReactElement<P>): Component<P>;
+        renderIntoDocument<C extends Component<any>>(element: ReactElement<any>): C;
+
+        mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils;
 
         isElementOfType(element: ReactElement<any>, type: any/*ReactType*/): boolean;
-        isDOMComponent(instance: ElementInstance<any>): boolean;
-        isCompositeComponent(instance: ElementInstance<any>): boolean;
-        isCompositeComponentWithType(instance: ElementInstance<any>, type: ComponentClass<any>): boolean;
-        isTextComponent(instance: ElementInstance<any>): boolean;
+        isDOMComponent(instance: Component<any>): boolean;
+        isCompositeComponent(instance: Component<any>): boolean;
+        isCompositeComponentWithType(instance: Component<any>, type: ComponentClass<any>): boolean;
+        isTextComponent(instance: Component<any>): boolean;
 
-        findAllInRenderedTree(tree: ElementInstance<any>, fn: (i: ElementInstance<any>) => boolean): ElementInstance<any>;
+        findAllInRenderedTree(tree: Component<any>, fn: (i: Component<any>) => boolean): Component<any>;
 
-        scryRenderedDOMComponentsWithClass(tree: ElementInstance<any>, className: string): ElementInstance<any>[];
-        findRenderedDOMComponentWithClass(tree: ElementInstance<any>, className: string): ElementInstance<any>;
+        scryRenderedDOMComponentsWithClass(tree: Component<any>, className: string): DOMComponent<any>[];
+        findRenderedDOMComponentWithClass(tree: Component<any>, className: string): DOMComponent<any>;
 
-        scryRenderedDOMComponentsWithTag(tree: ElementInstance<any>, tagName: string): ElementInstance<any>[];
-        findRenderedDOMComponentWithTag(tree: ElementInstance<any>, tagName: string): ElementInstance<any>;
+        scryRenderedDOMComponentsWithTag(tree: Component<any>, tagName: string): DOMComponent<any>[];
+        findRenderedDOMComponentWithTag(tree: Component<any>, tagName: string): DOMComponent<any>;
 
-        scryRenderedComponentsWithType<P>(tree: ElementInstance<any>, type: ComponentClass<P>): ElementInstance<P>[];
-        findRenderedComponentWithType<P>(tree: ElementInstance<any>, type: ComponentClass<P>): ElementInstance<P>;
+        scryRenderedComponentsWithType<P, S>(
+            tree: Component<any>, type: ComponentClass<P>): CompositeComponent<P, S>[];
+        scryRenderedComponentsWithType<C extends CompositeComponent<any, any>>(
+            tree: Component<any>, type: ComponentClass<any>): C[];
+
+        findRenderedComponentWithType<P, S>(
+            tree: Component<any>, type: ComponentClass<P>): CompositeComponent<P, S>;
+        findRenderedComponentWithType<C extends CompositeComponent<any, any>>(
+            tree: Component<any>, type: ComponentClass<any>): C;
     }
 
     interface SyntheticEventData {
@@ -790,7 +809,7 @@ declare module React {
 
     interface EventSimulator {
         (element: Element, eventData?: SyntheticEventData): void;
-        (descriptor: ElementInstance<any>, eventData?: SyntheticEventData): void;
+        (descriptor: Component<any>, eventData?: SyntheticEventData): void;
     }
 
     interface Simulate {