Update React v0.13.0 definitions for RC2

+ `React.cloneElement`
+ `React.addons.createFragment`
+ `setState(f: (prevState: S, props: P) => S, callback?: () => any)`
+ `ref: (component: T) => any`

react/future/react-0.13.0-tests.ts

@@ -3,7 +3,7 @@
 // TODO: import "react" once 0.13.0 is released
 import React = require("react/addons");
 
-interface Props extends React.Props {
+interface Props extends React.Props<MyComponent> {
     hello: string;
     world?: string;
     foo: number;
@@ -36,7 +36,6 @@ var props: Props = {
 };
 
 var container: Element;
-var INPUT_REF: string = "input";
 
 //
 // Top-Level API
@@ -64,7 +63,7 @@ var ClassicComponent: React.ClassicComponentClass<Props, State> =
         render: () => {
             return React.DOM.div(null,
                 React.DOM.input({
-                    ref: INPUT_REF,
+                    ref: input => this._input = input,
                     value: this.state.inputValue
                 }));
         }
@@ -72,14 +71,6 @@ var ClassicComponent: React.ClassicComponentClass<Props, State> =
 
 class ModernComponent extends React.Component<Props, State>
     implements React.ChildContextProvider<ChildContext> {
-
-    constructor(props: Props, context: Context) {
-        super(props, context);
-        this.state = {
-            inputValue: context.someValue,
-            seconds: props.foo
-        };
-    }
     
     static propTypes: React.ValidationMap<Props> = {
         foo: React.PropTypes.number
@@ -110,11 +101,13 @@ class ModernComponent extends React.Component<Props, State>
             seconds: this.props.foo
         });
     }
+
+    private _input: React.HTMLComponent;
     
     render() {
         return React.DOM.div(null,
             React.DOM.input({
-                ref: INPUT_REF,
+                ref: input => this._input = input,
                 value: this.state.inputValue
             }));
     }
@@ -144,6 +137,14 @@ var classicElement: React.ReactClassicElement<Props> =
 var domElement: React.ReactHTMLElement =
     React.createElement("div");
 
+// React.cloneElement
+var clonedElement: React.ReactElement<Props> =
+    React.cloneElement(element, props);
+var clonedClassicElement: React.ReactClassicElement<Props> =
+    React.cloneElement(classicElement, props);
+var clonedDOMElement: React.ReactHTMLElement =
+    React.cloneElement(domElement);
+
 // React.render
 var component: React.Component<Props, any> =
     React.render(element, container);
@@ -169,7 +170,6 @@ domNode = React.findDOMNode(domNode);
 var type = element.type;
 var elementProps: Props = element.props;
 var key = element.key;
-var ref: string = element.ref;
 
 //
 // React Components
@@ -196,10 +196,6 @@ classicComponent.setProps(elementProps);
 classicComponent.replaceProps(props);
 classicComponent.replaceState({ inputValue: "???", seconds: 60 });
 
-var inputRef: React.HTMLComponent =
-    <React.HTMLComponent>component.refs[INPUT_REF];
-var value: string = inputRef.getDOMNode<HTMLInputElement>().value;
-
 var myComponent = <MyComponent>component;
 myComponent.reset();
 
@@ -335,7 +331,9 @@ class Timer extends React.Component<{}, TimerState> {
     }
     private _interval: number;
     tick() {
-        this.setState({ secondsElapsed: this.state.secondsElapsed + 1 });
+        this.setState((prevState, props) => ({
+            secondsElapsed: prevState.secondsElapsed + 1
+        }));
     }
     componentDidMount() {
         var me = this;

react/future/react-0.13.0.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for React v0.13.0 (external module)
+// Type definitions for React v0.13.0 RC2 (external module)
 // Project: http://facebook.github.io/react/
 // Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
@@ -9,20 +9,26 @@ declare module "react" {
     // ----------------------------------------------------------------------
 
     interface ReactElementBase<T, P> {
-        type: T;
+        type: string | ComponentClassBase<P>;
         props: P;
-        key: number | string;
-        ref: string;
+        key: string | number;
+        ref: string | ((component: T) => any);
     }
 
     interface ReactElement<P>
-        extends ReactElementBase<ComponentClass<P, any>, P> {}
+        extends ReactElementBase<Component<P, any>, P> {
+        type: ComponentClass<P, any>;
+    }
 
     interface ReactClassicElement<P>
-        extends ReactElementBase<ClassicComponentClass<P, any> | string, P> {}
+        extends ReactElementBase<ClassicComponent<P, any>, P> {
+        type: string | ClassicComponentClass<P, any>;
+    }
 
     interface ReactDOMElement<P> // subtype of ReactClassicElement
-        extends ReactElementBase<string, P> {}
+        extends ReactElementBase<DOMComponent<P>, P> {
+        type: string;
+    }
 
     type ReactHTMLElement = ReactDOMElement<HTMLAttributes>;
     type ReactSVGElement = ReactDOMElement<SVGAttributes>;
@@ -55,7 +61,7 @@ declare module "react" {
     type ReactChild = ReactElementBase<any, any> | ReactText;
 
     // Should be Array<ReactNode> but type aliases cannot be recursive
-    type ReactFragment = Array<ReactChild | any[] | boolean>;
+    type ReactFragment = {} | Array<ReactChild | any[] | boolean>;
     type ReactNode = ReactChild | ReactFragment | boolean;
 
     //
@@ -85,6 +91,19 @@ declare module "react" {
         props?: P,
         ...children: ReactNode[]): ReactElement<P>;
 
+    function cloneElement<P>(
+        element: ReactDOMElement<P>,
+        props: P,
+        ...children: ReactNode[]): ReactDOMElement<P>;
+    function cloneElement<P>(
+        element: ReactClassicElement<P>,
+        props: P,
+        ...children: ReactNode[]): ReactClassicElement<P>;
+    function cloneElement<P>(
+        element: ReactElement<P>,
+        props: P,
+        ...children: ReactNode[]): ReactElement<P>;
+
     function render<P>(
         element: ReactDOMElement<P>,
         container: Element,
@@ -120,6 +139,7 @@ declare module "react" {
     // Base component for plain JS classes
     class Component<P, S> implements ComponentLifecycle<P, S> {
         constructor(props: P, context: any);
+        setState(f: (prevState: S, props: P) => S, callback?: () => any): void;
         setState(state: S, callback?: () => any): void;
         forceUpdate(): void;
         props: P;
@@ -311,13 +331,13 @@ declare module "react" {
     // Props / DOM Attributes
     // ----------------------------------------------------------------------
 
-    interface Props {
+    interface Props<T> {
         children?: ReactNode;
-        key?: number | string;
-        ref?: string;
+        key?: string | number;
+        ref?: string | ((component: T) => any);
     }
 
-    interface DOMAttributes extends Props {
+    interface DOMAttributes extends Props<DOMComponent<any>> {
         onCopy?: ClipboardEventHandler;
         onCut?: ClipboardEventHandler;
         onPaste?: ClipboardEventHandler;
@@ -379,6 +399,8 @@ declare module "react" {
     }
 
     interface HTMLAttributes extends DOMAttributes {
+        ref?: string | ((component: HTMLComponent) => void);
+
         accept?: string;
         acceptCharset?: string;
         accessKey?: string;
@@ -487,6 +509,8 @@ declare module "react" {
     }
 
     interface SVGAttributes extends DOMAttributes {
+        ref?: string | ((component: SVGComponent) => void);
+
         cx?: SVGLength | SVGAnimatedLength;
         cy?: any;
         d?: string;

react/future/react-addons-0.13.0-tests.ts

@@ -1,7 +1,7 @@
 /// <reference path="react-addons-0.13.0.d.ts" />
 import React = require("react/addons");
 
-interface Props extends React.Props {
+interface Props extends React.Props<MyComponent> {
     hello: string;
     world?: string;
     foo: number;
@@ -34,7 +34,6 @@ var props: Props = {
 };
 
 var container: Element;
-var INPUT_REF: string = "input";
 
 //
 // Top-Level API
@@ -62,7 +61,7 @@ var ClassicComponent: React.ClassicComponentClass<Props, State> =
         render: () => {
             return React.DOM.div(null,
                 React.DOM.input({
-                    ref: INPUT_REF,
+                    ref: input => this._input = input,
                     value: this.state.inputValue
                 }));
         }
@@ -70,14 +69,6 @@ var ClassicComponent: React.ClassicComponentClass<Props, State> =
 
 class ModernComponent extends React.Component<Props, State>
     implements React.ChildContextProvider<ChildContext> {
-
-    constructor(props: Props, context: Context) {
-        super(props, context);
-        this.state = {
-            inputValue: context.someValue,
-            seconds: props.foo
-        };
-    }
     
     static propTypes: React.ValidationMap<Props> = {
         foo: React.PropTypes.number
@@ -108,11 +99,13 @@ class ModernComponent extends React.Component<Props, State>
             seconds: this.props.foo
         });
     }
+
+    private _input: React.HTMLComponent;
     
     render() {
         return React.DOM.div(null,
             React.DOM.input({
-                ref: INPUT_REF,
+                ref: input => this._input = input,
                 value: this.state.inputValue
             }));
     }
@@ -142,6 +135,14 @@ var classicElement: React.ReactClassicElement<Props> =
 var domElement: React.ReactHTMLElement =
     React.createElement("div");
 
+// React.cloneElement
+var clonedElement: React.ReactElement<Props> =
+    React.cloneElement(element, props);
+var clonedClassicElement: React.ReactClassicElement<Props> =
+    React.cloneElement(classicElement, props);
+var clonedDOMElement: React.ReactHTMLElement =
+    React.cloneElement(domElement);
+
 // React.render
 var component: React.Component<Props, any> =
     React.render(element, container);
@@ -167,7 +168,6 @@ domNode = React.findDOMNode(domNode);
 var type = element.type;
 var elementProps: Props = element.props;
 var key = element.key;
-var ref: string = element.ref;
 
 //
 // React Components
@@ -194,10 +194,6 @@ classicComponent.setProps(elementProps);
 classicComponent.replaceProps(props);
 classicComponent.replaceState({ inputValue: "???", seconds: 60 });
 
-var inputRef: React.HTMLComponent =
-    <React.HTMLComponent>component.refs[INPUT_REF];
-var value: string = inputRef.getDOMNode<HTMLInputElement>().value;
-
 var myComponent = <MyComponent>component;
 myComponent.reset();
 
@@ -327,17 +323,18 @@ var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]);
 interface TimerState {
     secondsElapsed: number;
 }
-class Timer extends React.Component<{}, TimerState> {
+class Timer extends React.Component<React.Props<Timer>, TimerState> {
     static state = {
         secondsElapsed: 0
     }
     private _interval: number;
     tick() {
-        this.setState({ secondsElapsed: this.state.secondsElapsed + 1 });
+        this.setState((prevState, props) => ({
+            secondsElapsed: prevState.secondsElapsed + 1
+        }));
     }
     componentDidMount() {
-        var me = this;
-        this._interval = setInterval(() => me.tick(), 1000);
+        this._interval = setInterval(() => this.tick(), 1000);
     }
     componentWillUnmount() {
         clearInterval(this._interval);
@@ -360,6 +357,11 @@ var cx = React.addons.classSet;
 var className: string = cx({ a: true, b: false, c: true });
 className = cx("a", null, "b");
 
+React.addons.createFragment({
+    a: React.DOM.div(),
+    b: ["a", false, React.createElement("span")]
+});
+
 //
 // React.addons (Transitions)
 // --------------------------------------------------------------------------

react/future/react-addons-0.13.0.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for ReactWithAddons v0.13.0 (external module)
+// Type definitions for ReactWithAddons v0.13.0 RC2 (external module)
 // Project: http://facebook.github.io/react/
 // Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
@@ -9,20 +9,26 @@ declare module "react/addons" {
     // ----------------------------------------------------------------------
 
     interface ReactElementBase<T, P> {
-        type: T;
+        type: string | ComponentClassBase<P>;
         props: P;
-        key: number | string;
-        ref: string;
+        key: string | number;
+        ref: string | ((component: T) => any);
     }
 
     interface ReactElement<P>
-        extends ReactElementBase<ComponentClass<P, any>, P> {}
+        extends ReactElementBase<Component<P, any>, P> {
+        type: ComponentClass<P, any>;
+    }
 
     interface ReactClassicElement<P>
-        extends ReactElementBase<ClassicComponentClass<P, any> | string, P> {}
+        extends ReactElementBase<ClassicComponent<P, any>, P> {
+        type: string | ClassicComponentClass<P, any>;
+    }
 
     interface ReactDOMElement<P> // subtype of ReactClassicElement
-        extends ReactElementBase<string, P> {}
+        extends ReactElementBase<DOMComponent<P>, P> {
+        type: string;
+    }
 
     type ReactHTMLElement = ReactDOMElement<HTMLAttributes>;
     type ReactSVGElement = ReactDOMElement<SVGAttributes>;
@@ -85,6 +91,19 @@ declare module "react/addons" {
         props?: P,
         ...children: ReactNode[]): ReactElement<P>;
 
+    function cloneElement<P>(
+        element: ReactDOMElement<P>,
+        props?: P,
+        ...children: ReactNode[]): ReactDOMElement<P>;
+    function cloneElement<P>(
+        element: ReactClassicElement<P>,
+        props?: P,
+        ...children: ReactNode[]): ReactClassicElement<P>;
+    function cloneElement<P>(
+        element: ReactElement<P>,
+        props?: P,
+        ...children: ReactNode[]): ReactElement<P>;
+
     function render<P>(
         element: ReactDOMElement<P>,
         container: Element,
@@ -120,6 +139,7 @@ declare module "react/addons" {
     // Base component for plain JS classes
     class Component<P, S> implements ComponentLifecycle<P, S> {
         constructor(props: P, context: any);
+        setState(f: (prevState: S, props: P) => S, callback?: () => any): void;
         setState(state: S, callback?: () => any): void;
         forceUpdate(): void;
         props: P;
@@ -144,7 +164,7 @@ declare module "react/addons" {
         tagName: string;
     }
 
-    type HTMLComponent = DOMComponent<HTMLAttributes>;
+    export type HTMLComponent = DOMComponent<HTMLAttributes>;
     type SVGComponent = DOMComponent<SVGAttributes>;
 
     interface ChildContextProvider<CC> {
@@ -311,13 +331,13 @@ declare module "react/addons" {
     // Props / DOM Attributes
     // ----------------------------------------------------------------------
 
-    interface Props {
+    interface Props<T> {
         children?: ReactNode;
-        key?: number | string;
-        ref?: string;
+        key?: string | number;
+        ref?: string | ((component: T) => any);
     }
 
-    interface DOMAttributes extends Props {
+    interface DOMAttributes extends Props<DOMComponent<any>> {
         onCopy?: ClipboardEventHandler;
         onCut?: ClipboardEventHandler;
         onPaste?: ClipboardEventHandler;
@@ -379,6 +399,8 @@ declare module "react/addons" {
     }
 
     interface HTMLAttributes extends DOMAttributes {
+        ref?: string | ((component: HTMLComponent) => void);
+
         accept?: string;
         acceptCharset?: string;
         accessKey?: string;
@@ -487,6 +509,8 @@ declare module "react/addons" {
     }
 
     interface SVGAttributes extends DOMAttributes {
+        ref?: string | ((component: SVGComponent) => void);
+
         cx?: SVGLength | SVGAnimatedLength;
         cy?: any;
         d?: string;
@@ -734,8 +758,12 @@ declare module "react/addons" {
         classSet(cx: { [key: string]: boolean }): string;
         classSet(...classList: string[]): string;
 
+        cloneWithProps<P>(element: ReactDOMElement<P>, props: P): ReactDOMElement<P>;
+        cloneWithProps<P>(element: ReactClassicElement<P>, props: P): ReactClassicElement<P>;
         cloneWithProps<P>(element: ReactElement<P>, props: P): ReactElement<P>;
 
+        createFragment(object: { [key: string]: ReactNode }): ReactFragment;
+
         update(value: any[], spec: UpdateArraySpec): any[];
         update(value: {}, spec: UpdateSpec): any;
 

react/future/react-addons-global-0.13.0.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for ReactWithAddons v0.13.0 (internal module)
+// Type definitions for ReactWithAddons v0.13.0 RC2 (internal module)
 // Project: http://facebook.github.io/react/
 // Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
@@ -23,8 +23,12 @@ declare module React {
         classSet(cx: { [key: string]: boolean }): string;
         classSet(...classList: string[]): string;
 
+        cloneWithProps<P>(element: ReactDOMElement<P>, props: P): ReactDOMElement<P>;
+        cloneWithProps<P>(element: ReactClassicElement<P>, props: P): ReactClassicElement<P>;
         cloneWithProps<P>(element: ReactElement<P>, props: P): ReactElement<P>;
 
+        createFragment(object: { [key: string]: ReactNode }): ReactFragment;
+
         update(value: any[], spec: UpdateArraySpec): any[];
         update(value: {}, spec: UpdateSpec): any;
 

react/future/react-global-0.13.0.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for React v0.13.0 (internal module)
+// Type definitions for React v0.13.0 RC2 (internal module)
 // Project: http://facebook.github.io/react/
 // Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
@@ -9,20 +9,26 @@ declare module React {
     // ----------------------------------------------------------------------
 
     interface ReactElementBase<T, P> {
-        type: T;
+        type: string | ComponentClassBase<P>;
         props: P;
-        key: number | string;
-        ref: string;
+        key: string | number;
+        ref: string | ((component: T) => any);
     }
 
     interface ReactElement<P>
-        extends ReactElementBase<ComponentClass<P, any>, P> {}
+        extends ReactElementBase<Component<P, any>, P> {
+        type: ComponentClass<P, any>;
+    }
 
     interface ReactClassicElement<P>
-        extends ReactElementBase<ClassicComponentClass<P, any> | string, P> {}
+        extends ReactElementBase<ClassicComponent<P, any>, P> {
+        type: string | ClassicComponentClass<P, any>;
+    }
 
     interface ReactDOMElement<P> // subtype of ReactClassicElement
-        extends ReactElementBase<string, P> {}
+        extends ReactElementBase<DOMComponent<P>, P> {
+        type: string;
+    }
 
     type ReactHTMLElement = ReactDOMElement<HTMLAttributes>;
     type ReactSVGElement = ReactDOMElement<SVGAttributes>;
@@ -55,7 +61,7 @@ declare module React {
     type ReactChild = ReactElementBase<any, any> | ReactText;
 
     // Should be Array<ReactNode> but type aliases cannot be recursive
-    type ReactFragment = Array<ReactChild | any[] | boolean>;
+    type ReactFragment = {} | Array<ReactChild | any[] | boolean>;
     type ReactNode = ReactChild | ReactFragment | boolean;
 
     //
@@ -85,6 +91,19 @@ declare module React {
         props?: P,
         ...children: ReactNode[]): ReactElement<P>;
 
+    function cloneElement<P>(
+        element: ReactDOMElement<P>,
+        props: P,
+        ...children: ReactNode[]): ReactDOMElement<P>;
+    function cloneElement<P>(
+        element: ReactClassicElement<P>,
+        props: P,
+        ...children: ReactNode[]): ReactClassicElement<P>;
+    function cloneElement<P>(
+        element: ReactElement<P>,
+        props: P,
+        ...children: ReactNode[]): ReactElement<P>;
+
     function render<P>(
         element: ReactDOMElement<P>,
         container: Element,
@@ -120,6 +139,7 @@ declare module React {
     // Base component for plain JS classes
     class Component<P, S> implements ComponentLifecycle<P, S> {
         constructor(props: P, context: any);
+        setState(f: (prevState: S, props: P) => S, callback?: () => any): void;
         setState(state: S, callback?: () => any): void;
         forceUpdate(): void;
         props: P;
@@ -311,13 +331,13 @@ declare module React {
     // Props / DOM Attributes
     // ----------------------------------------------------------------------
 
-    interface Props {
+    interface Props<T> {
         children?: ReactNode;
-        key?: number | string;
-        ref?: string;
+        key?: string | number;
+        ref?: string | ((component: T) => any);
     }
 
-    interface DOMAttributes extends Props {
+    interface DOMAttributes extends Props<DOMComponent<any>> {
         onCopy?: ClipboardEventHandler;
         onCut?: ClipboardEventHandler;
         onPaste?: ClipboardEventHandler;
@@ -379,6 +399,8 @@ declare module React {
     }
 
     interface HTMLAttributes extends DOMAttributes {
+        ref?: string | ((component: HTMLComponent) => void);
+
         accept?: string;
         acceptCharset?: string;
         accessKey?: string;
@@ -487,6 +509,8 @@ declare module React {
     }
 
     interface SVGAttributes extends DOMAttributes {
+        ref?: string | ((component: SVGComponent) => void);
+
         cx?: SVGLength | SVGAnimatedLength;
         cy?: any;
         d?: string;