Merge pull request #2993 from Asana/react-0.12

React 0.12
2026-08-27 11:40:08 +08:00 · 2014-10-21 11:54:34 +09:00
parent f08fe50d94 c4d3efb7f1
commit ee32ea9156
8 changed files with 1063 additions and 47 deletions
@@ -0,0 +1,133 @@
+/// <reference path="react-addons-0.11.d.ts" />
+import React = require("react/addons-0.11");
+
+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.renderable,
+
+        // 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.Descriptor<any> => {
+        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.renderComponent(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.renderComponent(Timer(null), mountNode);
+
+// TestUtils
+var that: React.Component<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"});
+
+var GoodbyeMessage = React.createClass({displayName: 'GoodbyeMessage',
+    render: function() {
+        return React.DOM.div(null, "Goodbye ", (<React.Component<{name: string}, any>>this).props.name);
+    }
+});
+React.addons.TestUtils.renderIntoDocument(GoodbyeMessage({name: "John"}));
+
+var isImportant: boolean;
+var isRead: boolean;
+var cx = React.addons.classSet;
+var classes = cx({
+    'message': true,
+    'message-important': isImportant,
+    'message-read': isRead
+});
+
+
+
@@ -0,0 +1,172 @@
+// Type definitions for React with Addons 0.11.2
+// Project: http://facebook.github.io/react/
+// Definitions by: Asana <https://asana.com>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+/// <reference path="../../react/legacy/react-0.11.d.ts" />
+
+declare module "react/addons-0.11" {
+    export = React;
+}
+
+declare module React {
+    export var addons: {
+        classSet: (classes: {[key: string]: boolean}) => string;
+        cloneWithProps: CloneWithProps<any>;
+        CSSTransitionGroup: Factory<CSSTransitionGroupProps>;
+        LinkedStateMixin: LinkedStateMixin<any, any>;
+        Perf: Perf;
+        PureRenderMixin: Mixin<any, any>;
+        TestUtils: TestUtils;
+        TransitionGroup: Factory<any>;
+        update(object: Object, changes: Object): Object;
+    };
+
+    export interface CloneWithProps<P> {
+        (instance: Descriptor<P>, extraProps?: P): Descriptor<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(instance: Descriptor<any>): Descriptor<any>;
+        mockComponent(componentClass: Factory<any>, mockTagName?: string): TestUtils;
+        isDescriptorOfType(descriptor: Descriptor<any>, componentClass: Factory<any>): boolean;
+        isDOMComponent(instance: Descriptor<any>): boolean;
+        isCompositeComponent(instance: Descriptor<any>): boolean;
+        isCompositeComponentWithType(instance: Descriptor<any>, componentClass: Function): boolean;
+        isTextComponent(instance: Descriptor<any>): boolean;
+        findAllInRenderedTree(tree: Descriptor<any>, test: Function): Descriptor<any>[];
+        scryRenderedDOMComponentsWithClass(tree: Descriptor<any>, className: string): Descriptor<any>[];
+        findRenderedDOMComponentWithClass(tree: Descriptor<any>, className: string): Descriptor<any>;
+        scryRenderedDOMComponentsWithTag(tree: Descriptor<any>, className: string): Descriptor<any>[];
+        findRenderedDOMComponentWithTag(tree: Descriptor<any>, tagName: string): Descriptor<any>;
+        scryFindRenderedComponentsWithTag(tree: Descriptor<any>, componentClass: Function): Descriptor<any>[];
+        findRenderedComponentWithType(tree: Descriptor<any>, componentClass: Function): Descriptor<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: Descriptor<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;
+    }
+}
@@ -14,7 +14,7 @@ var PropTypesSpecification: React.Specification<any, any> = {

        // Anything that can be rendered: numbers, strings, components or an array
        // containing these types.
-        optionalRenderable: React.PropTypes.renderable,
+        optionalRenderable: React.PropTypes.node,

        // A React component.
        optionalComponent: React.PropTypes.component,
@@ -63,7 +63,7 @@ var PropTypesSpecification: React.Specification<any, any> = {
            return null;
        }
    },
-    render: (): React.Descriptor<any> => {
+    render: (): React.ReactHTMLElement => {
        return null;
    }
 };
@@ -78,7 +78,7 @@ var HelloMessage = React.createClass({displayName: 'HelloMessage',
    }
 });

-React.renderComponent(HelloMessage({name: "John"}), mountNode);
+React.render(HelloMessage({name: "John"}), mountNode);

 var Timer = React.createClass({displayName: 'Timer',
    getInitialState: function() {
@@ -104,7 +104,7 @@ var Timer = React.createClass({displayName: 'Timer',
    }
 });

-React.renderComponent(Timer(null), mountNode);
+React.render(Timer(null), mountNode);

 // TestUtils
 var that: React.Component<any, any>;
@@ -1,4 +1,4 @@
-// Type definitions for React with Addons 0.11.2
+// 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
@@ -13,17 +13,17 @@ declare module React {
    export var addons: {
        classSet: (classes: {[key: string]: boolean}) => string;
        cloneWithProps: CloneWithProps<any>;
-        CSSTransitionGroup: Factory<CSSTransitionGroupProps>;
+        CSSTransitionGroup: ReactComponentFactory<CSSTransitionGroupProps>;
        LinkedStateMixin: LinkedStateMixin<any, any>;
        Perf: Perf;
        PureRenderMixin: Mixin<any, any>;
        TestUtils: TestUtils;
-        TransitionGroup: Factory<any>;
+        TransitionGroup: ReactComponentFactory<any>;
        update(object: Object, changes: Object): Object;
    };

    export interface CloneWithProps<P> {
-        (instance: Descriptor<P>, extraProps?: P): Descriptor<P>;
+        (instance: ReactComponentElement<P>, extraProps?: P): ReactComponentElement<P>;
    }

    export interface ReactLink<T> {
@@ -79,20 +79,22 @@ declare module React {

    export interface TestUtils {
        Simulate: Simulate;
-        renderIntoDocument(instance: Descriptor<any>): Descriptor<any>;
-        mockComponent(componentClass: Factory<any>, mockTagName?: string): TestUtils;
-        isDescriptorOfType(descriptor: Descriptor<any>, componentClass: Factory<any>): boolean;
-        isDOMComponent(instance: Descriptor<any>): boolean;
-        isCompositeComponent(instance: Descriptor<any>): boolean;
-        isCompositeComponentWithType(instance: Descriptor<any>, componentClass: Function): boolean;
-        isTextComponent(instance: Descriptor<any>): boolean;
-        findAllInRenderedTree(tree: Descriptor<any>, test: Function): Descriptor<any>[];
-        scryRenderedDOMComponentsWithClass(tree: Descriptor<any>, className: string): Descriptor<any>[];
-        findRenderedDOMComponentWithClass(tree: Descriptor<any>, className: string): Descriptor<any>;
-        scryRenderedDOMComponentsWithTag(tree: Descriptor<any>, className: string): Descriptor<any>[];
-        findRenderedDOMComponentWithTag(tree: Descriptor<any>, tagName: string): Descriptor<any>;
-        scryFindRenderedComponentsWithTag(tree: Descriptor<any>, componentClass: Function): Descriptor<any>[];
-        findRenderedComponentWithType(tree: Descriptor<any>, componentClass: Function): Descriptor<any>;
+        renderIntoDocument<P>(instance: ReactComponentElement<P>): ReactComponentElement<P>;
+        renderIntoDocument(instnace: ReactHTMLElement): ReactHTMLElement;
+        renderIntoDocument(instnace: 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>, className: string): ReactElement<any, any>[];
+        findRenderedDOMComponentWithTag(tree: ReactElement<any, any>, tagName: string): ReactElement<any, any>;
+        scryFindRenderedComponentsWithTag(tree: ReactElement<any, any>, componentClass: Function): ReactElement<any, any>[];
+        findRenderedComponentWithType(tree: ReactElement<any, any>, componentClass: Function): ReactElement<any, any>;
    }

    export interface SyntheticEventData {
@@ -131,7 +133,7 @@ declare module React {

    export interface EventSimulator {
        (element: Element, eventData?: SyntheticEventData): void;
-        (descriptor: Descriptor<any>, eventData?: SyntheticEventData): void;
+        (descriptor: ReactElement<any, any>, eventData?: SyntheticEventData): void;
    }

    export interface Simulate {
@@ -0,0 +1,108 @@
+/// <reference path="react-0.11.d.ts" />
+import React = require("react-0.11");
+
+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.renderable,
+
+        // 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.Descriptor<any> => {
+        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.renderComponent(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.renderComponent(Timer(null), mountNode);
@@ -0,0 +1,553 @@
+// Type definitions for React 0.11.2
+// Project: http://facebook.github.io/react/
+// Definitions by: Asana <https://asana.com>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+declare module "react-0.11" {
+    export = React;
+}
+
+declare module React {
+    export function createClass<P, S>(specification: Specification<P, S>): Factory<P>;
+
+    export function renderComponent<P>(component: Descriptor<P>, container: Element, callback?: () => void): Descriptor<P>;
+
+    export function unmountComponentAtNode(container: Element): boolean;
+
+    export function renderComponentToString(component: Descriptor<any>): string;
+
+    export function renderComponentToStaticMarkup(component: Descriptor<any>): string;
+
+    export function isValidClass(factory: Factory<any>): boolean;
+
+    export function isValidComponent(component: Descriptor<any>): boolean;
+
+    export function initializeTouchEvents(shouldUseTouch: boolean): void;
+
+    export interface Descriptor<P> {
+        props: P;
+    }
+
+    export interface Factory<P> {
+        (properties?: P, ...children: any[]): Descriptor<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(): Descriptor<any>;
+    }
+
+    export interface DomReferencer {
+        getDOMNode(): Element;
+    }
+
+    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;
+        transferPropsTo(target: Factory<P>): Descriptor<P>;
+        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 var PropTypes: {
+        any: Requireable<any>;
+        array: Requireable<any>;
+        bool: Requireable<any>;
+        func: Requireable<any>;
+        number: Requireable<any>;
+        object: Requireable<any>;
+        string: Requireable<any>;
+        renderable: 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 var 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
+    export interface AbstractView {
+        styleMedia: StyleMedia;
+        document: Document;
+    }
+
+    export interface Touch {
+        identifier: number;
+        target: EventTarget;
+        screenX: number;
+        screenY: number;
+        clientX: number;
+        clientY: number;
+        pageX: number;
+        pageY: number;
+    }
+
+    export interface TouchList {
+        [index: number]: Touch;
+        length: number;
+        item(index: number): Touch;
+        identifiedTouch(identifier: number): Touch;
+    }
+
+    // Events
+    export interface SyntheticEvent {
+        bubbles: boolean;
+        cancelable: boolean;
+        currentTarget: EventTarget;
+        defaultPrevented: boolean;
+        eventPhase: number;
+        nativeEvent: Event;
+        preventDefault(): void;
+        stopPropagation(): void;
+        target: EventTarget;
+        timeStamp: Date;
+        type: string;
+    }
+
+    export interface ClipboardEvent extends SyntheticEvent {
+        clipboardData: DataTransfer;
+    }
+
+    export interface KeyboardEvent extends SyntheticEvent {
+        altKey: boolean;
+        charCode: number;
+        ctrlKey: boolean;
+        getModifierState(key: string): boolean;
+        key: string;
+        keyCode: number;
+        locale: string;
+        location: number;
+        metaKey: boolean;
+        repeat: boolean;
+        shiftKey: boolean;
+        which: number;
+    }
+
+    export interface FocusEvent extends SyntheticEvent {
+        relatedTarget: EventTarget;
+    }
+
+    export interface MouseEvent extends SyntheticEvent {
+        altKey: boolean;
+        button: number;
+        buttons: number;
+        clientX: number;
+        clientY: number;
+        ctrlKey: boolean;
+        getModifierState(key: string): boolean;
+        metaKey: boolean;
+        pageX: number;
+        pageY: number;
+        relatedTarget: EventTarget;
+        screenX: number;
+        screenY: number;
+        shiftKey: boolean;
+    }
+
+    export interface TouchEvent extends SyntheticEvent {
+        altKey: boolean;
+        changedTouches: TouchList;
+        ctrlKey: boolean;
+        getModifierState(key: string): boolean;
+        metaKey: boolean;
+        shiftKey: boolean;
+        targetTouches: TouchList;
+        touches: TouchList;
+    }
+
+    export interface UiEvent extends SyntheticEvent {
+        detail: number;
+        view: AbstractView;
+    }
+
+    export 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;
+    }
+
+    export interface ReactAttributes {
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        };
+        children?: any[];
+        key?: string;
+        ref?: string;
+    }
+
+    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;
+        controls?: any;
+        coords?: any;
+        crossOrigin?: any;
+        data?: any;
+        dateTime?: any;
+        defer?: any;
+        dir?: any;
+        disabled?: any;
+        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;
+        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;
+        property?: 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;
+    }
+
+    export interface SvgAttributes extends EventAttributes, 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;
+    }
+
+    export interface DomElement extends Factory<DomAttributes> {
+    }
+
+    export interface SvgElement extends Factory<SvgAttributes> {
+    }
+
+    export var DOM: {
+        // 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;
+        // 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;
+    };
+}
@@ -14,7 +14,7 @@ var PropTypesSpecification: React.Specification<any, any> = {

        // Anything that can be rendered: numbers, strings, components or an array
        // containing these types.
-        optionalRenderable: React.PropTypes.renderable,
+        optionalRenderable: React.PropTypes.node,

        // A React component.
        optionalComponent: React.PropTypes.component,
@@ -63,7 +63,7 @@ var PropTypesSpecification: React.Specification<any, any> = {
            return null;
        }
    },
-    render: (): React.Descriptor<any> => {
+    render: (): React.ReactHTMLElement => {
        return null;
    }
 };
@@ -78,7 +78,7 @@ var HelloMessage = React.createClass({displayName: 'HelloMessage',
    }
 });

-React.renderComponent(HelloMessage({name: "John"}), mountNode);
+React.render(HelloMessage({name: "John"}), mountNode);

 var Timer = React.createClass({displayName: 'Timer',
    getInitialState: function() {
@@ -104,4 +104,4 @@ var Timer = React.createClass({displayName: 'Timer',
    }
 });

-React.renderComponent(Timer(null), mountNode);
+React.render(Timer(null), mountNode);
@@ -1,35 +1,90 @@
-// Type definitions for React 0.11.2
+// Type definitions for React 0.12.RC
 // Project: http://facebook.github.io/react/
 // Definitions by: Asana <https://asana.com>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped

 declare module "react" {
-    export = React;
+export = React;
 }

 declare module React {
-    export function createClass<P, S>(specification: Specification<P, S>): Factory<P>;
+    export function createClass<P, S>(specification: Specification<P, S>): ReactComponentFactory<P>;

-    export function renderComponent<P>(component: Descriptor<P>, container: Element, callback?: () => void): Descriptor<P>;
+    export function createFactory<P>(clazz: ReactComponentFactory<P>): ReactComponentFactory<P>;
+
+    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 renderComponentToString(component: Descriptor<any>): string;
+    export function renderToString<P>(component: ReactComponentElement<P>): string;

-    export function renderComponentToStaticMarkup(component: Descriptor<any>): string;
+    export function renderToString(component: ReactHTMLElement): string;

-    export function isValidClass(factory: Factory<any>): boolean;
+    export function renderToString(component: ReactSVGElement): string;

-    export function isValidComponent(component: Descriptor<any>): boolean;
+    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 Descriptor<P> {
+
+    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 Factory<P> {
-        (properties?: P, ...children: any[]): Descriptor<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> {
@@ -51,7 +106,7 @@ declare module React {
        propTypes?: ValidationMap<P>;
        getDefaultProps?(): P;
        getInitialState?(): S;
-        render(): Descriptor<any>;
+        render(): ReactElement<any, any>;
    }

    export interface DomReferencer {
@@ -68,7 +123,6 @@ declare module React {
        replaceState(nextState: S, callback?: () => void): void;
        forceUpdate(callback?: () => void): void;
        isMounted(): boolean;
-        transferPropsTo(target: Factory<P>): Descriptor<P>;
        setProps(nextProps: P, callback?: () => void): void;
        replaceProps(nextProps: P, callback?: () => void): void;
    }
@@ -97,7 +151,7 @@ declare module React {
        number: Requireable<any>;
        object: Requireable<any>;
        string: Requireable<any>;
-        renderable: Requireable<any>;
+        node: Requireable<any>;
        component: Requireable<any>;
        instanceOf: (clazz: Constructable) => Requireable<any>;
        oneOf: (types: any[]) => Requireable<any>
@@ -412,12 +466,6 @@ declare module React {
        y?: any;
    }

-    export interface DomElement extends Factory<DomAttributes> {
-    }
-
-    export interface SvgElement extends Factory<SvgAttributes> {
-    }
-
    export var DOM: {
        // HTML
        a: DomElement;