From ec9b82e6462ecde1fa43dc849eebca364728d7f3 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Fri, 6 Mar 2015 00:08:08 -0800 Subject: [PATCH 1/5] 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 | 34 ++++++------- react/future/react-0.13.0.d.ts | 48 +++++++++++++----- react/future/react-addons-0.13.0-tests.ts | 44 +++++++++-------- react/future/react-addons-0.13.0.d.ts | 52 +++++++++++++++----- react/future/react-addons-global-0.13.0.d.ts | 6 ++- react/future/react-global-0.13.0.d.ts | 48 +++++++++++++----- 6 files changed, 156 insertions(+), 76 deletions(-) diff --git a/react/future/react-0.13.0-tests.ts b/react/future/react-0.13.0-tests.ts index b32356119..d54fb45d6 100644 --- a/react/future/react-0.13.0-tests.ts +++ b/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 { 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 = 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 = class ModernComponent extends React.Component implements React.ChildContextProvider { - - constructor(props: Props, context: Context) { - super(props, context); - this.state = { - inputValue: context.someValue, - seconds: props.foo - }; - } static propTypes: React.ValidationMap = { foo: React.PropTypes.number @@ -110,11 +101,13 @@ class ModernComponent extends React.Component 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 = var domElement: React.ReactHTMLElement = React.createElement("div"); +// React.cloneElement +var clonedElement: React.ReactElement = + React.cloneElement(element, props); +var clonedClassicElement: React.ReactClassicElement = + React.cloneElement(classicElement, props); +var clonedDOMElement: React.ReactHTMLElement = + React.cloneElement(domElement); + // React.render var component: React.Component = 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 = - component.refs[INPUT_REF]; -var value: string = inputRef.getDOMNode().value; - var 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; diff --git a/react/future/react-0.13.0.d.ts b/react/future/react-0.13.0.d.ts index fd4b27e98..80ce5ce88 100644 --- a/react/future/react-0.13.0.d.ts +++ b/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 , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -9,20 +9,26 @@ declare module "react" { // ---------------------------------------------------------------------- interface ReactElementBase { - type: T; + type: string | ComponentClassBase

; props: P; - key: number | string; - ref: string; + key: string | number; + ref: string | ((component: T) => any); } interface ReactElement

- extends ReactElementBase, P> {} + extends ReactElementBase, P> { + type: ComponentClass; + } interface ReactClassicElement

- extends ReactElementBase | string, P> {} + extends ReactElementBase, P> { + type: string | ClassicComponentClass; + } interface ReactDOMElement

// subtype of ReactClassicElement - extends ReactElementBase {} + extends ReactElementBase, P> { + type: string; + } type ReactHTMLElement = ReactDOMElement; type ReactSVGElement = ReactDOMElement; @@ -55,7 +61,7 @@ declare module "react" { type ReactChild = ReactElementBase | ReactText; // Should be Array but type aliases cannot be recursive - type ReactFragment = Array; + type ReactFragment = {} | Array; type ReactNode = ReactChild | ReactFragment | boolean; // @@ -85,6 +91,19 @@ declare module "react" { props?: P, ...children: ReactNode[]): ReactElement

; + function cloneElement

( + element: ReactDOMElement

, + props: P, + ...children: ReactNode[]): ReactDOMElement

; + function cloneElement

( + element: ReactClassicElement

, + props: P, + ...children: ReactNode[]): ReactClassicElement

; + function cloneElement

( + element: ReactElement

, + props: P, + ...children: ReactNode[]): ReactElement

; + function render

( element: ReactDOMElement

, container: Element, @@ -120,6 +139,7 @@ declare module "react" { // Base component for plain JS classes class Component implements ComponentLifecycle { 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 { children?: ReactNode; - key?: number | string; - ref?: string; + key?: string | number; + ref?: string | ((component: T) => any); } - interface DOMAttributes extends Props { + interface DOMAttributes extends Props> { 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; diff --git a/react/future/react-addons-0.13.0-tests.ts b/react/future/react-addons-0.13.0-tests.ts index d76097cd6..13419f12f 100644 --- a/react/future/react-addons-0.13.0-tests.ts +++ b/react/future/react-addons-0.13.0-tests.ts @@ -1,7 +1,7 @@ /// import React = require("react/addons"); -interface Props extends React.Props { +interface Props extends React.Props { 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 = 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 = class ModernComponent extends React.Component implements React.ChildContextProvider { - - constructor(props: Props, context: Context) { - super(props, context); - this.state = { - inputValue: context.someValue, - seconds: props.foo - }; - } static propTypes: React.ValidationMap = { foo: React.PropTypes.number @@ -108,11 +99,13 @@ class ModernComponent extends React.Component 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 = var domElement: React.ReactHTMLElement = React.createElement("div"); +// React.cloneElement +var clonedElement: React.ReactElement = + React.cloneElement(element, props); +var clonedClassicElement: React.ReactClassicElement = + React.cloneElement(classicElement, props); +var clonedDOMElement: React.ReactHTMLElement = + React.cloneElement(domElement); + // React.render var component: React.Component = 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 = - component.refs[INPUT_REF]; -var value: string = inputRef.getDOMNode().value; - var 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, 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) // -------------------------------------------------------------------------- diff --git a/react/future/react-addons-0.13.0.d.ts b/react/future/react-addons-0.13.0.d.ts index bb4af1d1e..d755bf964 100644 --- a/react/future/react-addons-0.13.0.d.ts +++ b/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 , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -9,20 +9,26 @@ declare module "react/addons" { // ---------------------------------------------------------------------- interface ReactElementBase { - type: T; + type: string | ComponentClassBase

; props: P; - key: number | string; - ref: string; + key: string | number; + ref: string | ((component: T) => any); } interface ReactElement

- extends ReactElementBase, P> {} + extends ReactElementBase, P> { + type: ComponentClass; + } interface ReactClassicElement

- extends ReactElementBase | string, P> {} + extends ReactElementBase, P> { + type: string | ClassicComponentClass; + } interface ReactDOMElement

// subtype of ReactClassicElement - extends ReactElementBase {} + extends ReactElementBase, P> { + type: string; + } type ReactHTMLElement = ReactDOMElement; type ReactSVGElement = ReactDOMElement; @@ -85,6 +91,19 @@ declare module "react/addons" { props?: P, ...children: ReactNode[]): ReactElement

; + function cloneElement

( + element: ReactDOMElement

, + props?: P, + ...children: ReactNode[]): ReactDOMElement

; + function cloneElement

( + element: ReactClassicElement

, + props?: P, + ...children: ReactNode[]): ReactClassicElement

; + function cloneElement

( + element: ReactElement

, + props?: P, + ...children: ReactNode[]): ReactElement

; + function render

( element: ReactDOMElement

, container: Element, @@ -120,6 +139,7 @@ declare module "react/addons" { // Base component for plain JS classes class Component implements ComponentLifecycle { 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; + export type HTMLComponent = DOMComponent; type SVGComponent = DOMComponent; interface ChildContextProvider { @@ -311,13 +331,13 @@ declare module "react/addons" { // Props / DOM Attributes // ---------------------------------------------------------------------- - interface Props { + interface Props { children?: ReactNode; - key?: number | string; - ref?: string; + key?: string | number; + ref?: string | ((component: T) => any); } - interface DOMAttributes extends Props { + interface DOMAttributes extends Props> { 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

(element: ReactDOMElement

, props: P): ReactDOMElement

; + cloneWithProps

(element: ReactClassicElement

, props: P): ReactClassicElement

; cloneWithProps

(element: ReactElement

, props: P): ReactElement

; + createFragment(object: { [key: string]: ReactNode }): ReactFragment; + update(value: any[], spec: UpdateArraySpec): any[]; update(value: {}, spec: UpdateSpec): any; diff --git a/react/future/react-addons-global-0.13.0.d.ts b/react/future/react-addons-global-0.13.0.d.ts index d11a4ae03..c5db4f6d2 100644 --- a/react/future/react-addons-global-0.13.0.d.ts +++ b/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 , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -23,8 +23,12 @@ declare module React { classSet(cx: { [key: string]: boolean }): string; classSet(...classList: string[]): string; + cloneWithProps

(element: ReactDOMElement

, props: P): ReactDOMElement

; + cloneWithProps

(element: ReactClassicElement

, props: P): ReactClassicElement

; cloneWithProps

(element: ReactElement

, props: P): ReactElement

; + createFragment(object: { [key: string]: ReactNode }): ReactFragment; + update(value: any[], spec: UpdateArraySpec): any[]; update(value: {}, spec: UpdateSpec): any; diff --git a/react/future/react-global-0.13.0.d.ts b/react/future/react-global-0.13.0.d.ts index 60675aec9..b7be8993f 100644 --- a/react/future/react-global-0.13.0.d.ts +++ b/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 , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -9,20 +9,26 @@ declare module React { // ---------------------------------------------------------------------- interface ReactElementBase { - type: T; + type: string | ComponentClassBase

; props: P; - key: number | string; - ref: string; + key: string | number; + ref: string | ((component: T) => any); } interface ReactElement

- extends ReactElementBase, P> {} + extends ReactElementBase, P> { + type: ComponentClass; + } interface ReactClassicElement

- extends ReactElementBase | string, P> {} + extends ReactElementBase, P> { + type: string | ClassicComponentClass; + } interface ReactDOMElement

// subtype of ReactClassicElement - extends ReactElementBase {} + extends ReactElementBase, P> { + type: string; + } type ReactHTMLElement = ReactDOMElement; type ReactSVGElement = ReactDOMElement; @@ -55,7 +61,7 @@ declare module React { type ReactChild = ReactElementBase | ReactText; // Should be Array but type aliases cannot be recursive - type ReactFragment = Array; + type ReactFragment = {} | Array; type ReactNode = ReactChild | ReactFragment | boolean; // @@ -85,6 +91,19 @@ declare module React { props?: P, ...children: ReactNode[]): ReactElement

; + function cloneElement

( + element: ReactDOMElement

, + props: P, + ...children: ReactNode[]): ReactDOMElement

; + function cloneElement

( + element: ReactClassicElement

, + props: P, + ...children: ReactNode[]): ReactClassicElement

; + function cloneElement

( + element: ReactElement

, + props: P, + ...children: ReactNode[]): ReactElement

; + function render

( element: ReactDOMElement

, container: Element, @@ -120,6 +139,7 @@ declare module React { // Base component for plain JS classes class Component implements ComponentLifecycle { 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 { children?: ReactNode; - key?: number | string; - ref?: string; + key?: string | number; + ref?: string | ((component: T) => any); } - interface DOMAttributes extends Props { + interface DOMAttributes extends Props> { 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; From 69a3c976552155ad7b5c7aa15413d3f8d9c8e392 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Fri, 6 Mar 2015 00:49:22 -0800 Subject: [PATCH 2/5] Rename React.XXXBase types to React.XXX to simplify general typing --- react/future/react-0.13.0-tests.ts | 4 +- react/future/react-0.13.0.d.ts | 72 ++++++++------- react/future/react-addons-0.13.0-tests.ts | 4 +- react/future/react-addons-0.13.0.d.ts | 93 +++++++++++--------- react/future/react-addons-global-0.13.0.d.ts | 23 +++-- react/future/react-global-0.13.0.d.ts | 72 ++++++++------- 6 files changed, 143 insertions(+), 125 deletions(-) diff --git a/react/future/react-0.13.0-tests.ts b/react/future/react-0.13.0-tests.ts index d54fb45d6..cf216503e 100644 --- a/react/future/react-0.13.0-tests.ts +++ b/react/future/react-0.13.0-tests.ts @@ -130,7 +130,7 @@ var domFactoryElement: React.ReactDOMElement = domFactory(); // React.createElement -var element: React.ReactElement = +var element: React.ReactModernElement = React.createElement(ModernComponent, props); var classicElement: React.ReactClassicElement = React.createElement(ClassicComponent, props); @@ -138,7 +138,7 @@ var domElement: React.ReactHTMLElement = React.createElement("div"); // React.cloneElement -var clonedElement: React.ReactElement = +var clonedElement: React.ReactModernElement = React.cloneElement(element, props); var clonedClassicElement: React.ReactClassicElement = React.cloneElement(classicElement, props); diff --git a/react/future/react-0.13.0.d.ts b/react/future/react-0.13.0.d.ts index 80ce5ce88..f87bdc721 100644 --- a/react/future/react-0.13.0.d.ts +++ b/react/future/react-0.13.0.d.ts @@ -8,26 +8,29 @@ declare module "react" { // React Elements // ---------------------------------------------------------------------- - interface ReactElementBase { - type: string | ComponentClassBase

; + type ReactType = ComponentClass | string; + + interface ReactElement

{ + type: string | ComponentClass

; props: P; key: string | number; - ref: string | ((component: T) => any); + ref: string | ((component: Component) => any); } - interface ReactElement

- extends ReactElementBase, P> { - type: ComponentClass; + interface ReactModernElement

extends ReactElement

{ + type: ModernComponentClass; + ref: string | ((component: Component) => any); } - interface ReactClassicElement

- extends ReactElementBase, P> { + interface ReactClassicElement

extends ReactElement

{ type: string | ClassicComponentClass; + ref: string | ((component: ClassicComponent) => any); } - interface ReactDOMElement

// subtype of ReactClassicElement - extends ReactElementBase, P> { + // subtype of ReactClassicElement + interface ReactDOMElement

extends ReactElement

{ type: string; + ref: string | ((component: DOMComponent

) => any); } type ReactHTMLElement = ReactDOMElement; @@ -41,11 +44,15 @@ declare module "react" { (props?: P, ...children: ReactNode[]): ReactElement

; } - interface ClassicFactory

{ + interface ModernFactory

extends Factory

{ + (props?: P, ...children: ReactNode[]): ReactModernElement

; + } + + interface ClassicFactory

extends Factory

{ (props?: P, ...children: ReactNode[]): ReactClassicElement

; } - interface DOMFactory

{ + interface DOMFactory

extends Factory

{ (props?: P, ...children: ReactNode[]): ReactDOMElement

; } @@ -58,7 +65,7 @@ declare module "react" { // ---------------------------------------------------------------------- type ReactText = string | number; - type ReactChild = ReactElementBase | ReactText; + type ReactChild = ReactElement | ReactText; // Should be Array but type aliases cannot be recursive type ReactFragment = {} | Array; @@ -68,15 +75,12 @@ declare module "react" { // Top Level API // ---------------------------------------------------------------------- - function createClass( - spec: ComponentSpec): ClassicComponentClass; + function createClass(spec: ComponentSpec): ClassicComponentClass; - function createFactory

( - type: string): DOMFactory

; - function createFactory

( - type: ClassicComponentClass | string): ClassicFactory

; - function createFactory

( - type: ComponentClass): Factory

; + function createFactory

(type: string): DOMFactory

; + function createFactory

(type: ClassicComponentClass | string): ClassicFactory

; + function createFactory

(type: ModernComponentClass): ModernFactory

; + function createFactory

(type: ComponentClass

): Factory

; function createElement

( type: string, @@ -87,21 +91,25 @@ declare module "react" { props?: P, ...children: ReactNode[]): ReactClassicElement

; function createElement

( - type: ComponentClass, + type: ModernComponentClass, props?: P, - ...children: ReactNode[]): ReactElement

; + ...children: ReactNode[]): ReactModernElement

; function cloneElement

( element: ReactDOMElement

, - props: P, + props?: P, ...children: ReactNode[]): ReactDOMElement

; function cloneElement

( element: ReactClassicElement

, - props: P, + props?: P, ...children: ReactNode[]): ReactClassicElement

; + function cloneElement

( + element: ReactModernElement

, + props?: P, + ...children: ReactNode[]): ReactModernElement

; function cloneElement

( element: ReactElement

, - props: P, + props?: P, ...children: ReactNode[]): ReactElement

; function render

( @@ -118,8 +126,8 @@ declare module "react" { callback?: () => any): Component; function unmountComponentAtNode(container: Element): boolean; - function renderToString(element: ReactElementBase): string; - function renderToStaticMarkup(element: ReactElementBase): string; + function renderToString(element: ReactElement): string; + function renderToStaticMarkup(element: ReactElement): string; function isValidElement(object: {}): boolean; function initializeTouchEvents(shouldUseTouch: boolean): void; @@ -175,18 +183,18 @@ declare module "react" { // Class Interfaces // ---------------------------------------------------------------------- - interface ComponentClassBase

{ + interface ComponentClass

{ propTypes?: ValidationMap

; contextTypes?: ValidationMap; childContextTypes?: ValidationMap; } - interface ComponentClass extends ComponentClassBase

{ + interface ModernComponentClass extends ComponentClass

{ new(props?: P, context?: any): Component; defaultProps?: P; } - interface ClassicComponentClass extends ComponentClassBase

{ + interface ClassicComponentClass extends ComponentClass

{ new(props?: P, context?: any): ClassicComponent; getDefaultProps?(): P; displayName?: string; @@ -222,7 +230,7 @@ declare module "react" { } interface ComponentSpec extends Mixin { - render(): ReactElementBase; + render(): ReactElement; } // diff --git a/react/future/react-addons-0.13.0-tests.ts b/react/future/react-addons-0.13.0-tests.ts index 13419f12f..ff6889ec0 100644 --- a/react/future/react-addons-0.13.0-tests.ts +++ b/react/future/react-addons-0.13.0-tests.ts @@ -128,7 +128,7 @@ var domFactoryElement: React.ReactDOMElement = domFactory(); // React.createElement -var element: React.ReactElement = +var element: React.ReactModernElement = React.createElement(ModernComponent, props); var classicElement: React.ReactClassicElement = React.createElement(ClassicComponent, props); @@ -136,7 +136,7 @@ var domElement: React.ReactHTMLElement = React.createElement("div"); // React.cloneElement -var clonedElement: React.ReactElement = +var clonedElement: React.ReactModernElement = React.cloneElement(element, props); var clonedClassicElement: React.ReactClassicElement = React.cloneElement(classicElement, props); diff --git a/react/future/react-addons-0.13.0.d.ts b/react/future/react-addons-0.13.0.d.ts index d755bf964..5148be3c6 100644 --- a/react/future/react-addons-0.13.0.d.ts +++ b/react/future/react-addons-0.13.0.d.ts @@ -8,26 +8,29 @@ declare module "react/addons" { // React Elements // ---------------------------------------------------------------------- - interface ReactElementBase { - type: string | ComponentClassBase

; + type ReactType = ComponentClass | string; + + interface ReactElement

{ + type: string | ComponentClass

; props: P; key: string | number; - ref: string | ((component: T) => any); + ref: string | ((component: Component) => any); } - interface ReactElement

- extends ReactElementBase, P> { - type: ComponentClass; + interface ReactModernElement

extends ReactElement

{ + type: ModernComponentClass; + ref: string | ((component: Component) => any); } - interface ReactClassicElement

- extends ReactElementBase, P> { + interface ReactClassicElement

extends ReactElement

{ type: string | ClassicComponentClass; + ref: string | ((component: ClassicComponent) => any); } - interface ReactDOMElement

// subtype of ReactClassicElement - extends ReactElementBase, P> { + // subtype of ReactClassicElement + interface ReactDOMElement

extends ReactElement

{ type: string; + ref: string | ((component: DOMComponent

) => any); } type ReactHTMLElement = ReactDOMElement; @@ -41,11 +44,15 @@ declare module "react/addons" { (props?: P, ...children: ReactNode[]): ReactElement

; } - interface ClassicFactory

{ + interface ModernFactory

extends Factory

{ + (props?: P, ...children: ReactNode[]): ReactModernElement

; + } + + interface ClassicFactory

extends Factory

{ (props?: P, ...children: ReactNode[]): ReactClassicElement

; } - interface DOMFactory

{ + interface DOMFactory

extends Factory

{ (props?: P, ...children: ReactNode[]): ReactDOMElement

; } @@ -58,25 +65,22 @@ declare module "react/addons" { // ---------------------------------------------------------------------- type ReactText = string | number; - type ReactChild = ReactElementBase | ReactText; + type ReactChild = ReactElement | ReactText; // Should be Array but type aliases cannot be recursive - type ReactFragment = Array; + type ReactFragment = {} | Array; type ReactNode = ReactChild | ReactFragment | boolean; // // Top Level API // ---------------------------------------------------------------------- - function createClass( - spec: ComponentSpec): ClassicComponentClass; + function createClass(spec: ComponentSpec): ClassicComponentClass; - function createFactory

( - type: string): DOMFactory

; - function createFactory

( - type: ClassicComponentClass | string): ClassicFactory

; - function createFactory

( - type: ComponentClass): Factory

; + function createFactory

(type: string): DOMFactory

; + function createFactory

(type: ClassicComponentClass | string): ClassicFactory

; + function createFactory

(type: ModernComponentClass): ModernFactory

; + function createFactory

(type: ComponentClass

): Factory

; function createElement

( type: string, @@ -87,9 +91,9 @@ declare module "react/addons" { props?: P, ...children: ReactNode[]): ReactClassicElement

; function createElement

( - type: ComponentClass, + type: ModernComponentClass, props?: P, - ...children: ReactNode[]): ReactElement

; + ...children: ReactNode[]): ReactModernElement

; function cloneElement

( element: ReactDOMElement

, @@ -99,6 +103,10 @@ declare module "react/addons" { element: ReactClassicElement

, props?: P, ...children: ReactNode[]): ReactClassicElement

; + function cloneElement

( + element: ReactModernElement

, + props?: P, + ...children: ReactNode[]): ReactModernElement

; function cloneElement

( element: ReactElement

, props?: P, @@ -118,8 +126,8 @@ declare module "react/addons" { callback?: () => any): Component; function unmountComponentAtNode(container: Element): boolean; - function renderToString(element: ReactElementBase): string; - function renderToStaticMarkup(element: ReactElementBase): string; + function renderToString(element: ReactElement): string; + function renderToStaticMarkup(element: ReactElement): string; function isValidElement(object: {}): boolean; function initializeTouchEvents(shouldUseTouch: boolean): void; @@ -164,7 +172,7 @@ declare module "react/addons" { tagName: string; } - export type HTMLComponent = DOMComponent; + type HTMLComponent = DOMComponent; type SVGComponent = DOMComponent; interface ChildContextProvider { @@ -175,18 +183,18 @@ declare module "react/addons" { // Class Interfaces // ---------------------------------------------------------------------- - interface ComponentClassBase

{ + interface ComponentClass

{ propTypes?: ValidationMap

; contextTypes?: ValidationMap; childContextTypes?: ValidationMap; } - interface ComponentClass extends ComponentClassBase

{ + interface ModernComponentClass extends ComponentClass

{ new(props?: P, context?: any): Component; defaultProps?: P; } - interface ClassicComponentClass extends ComponentClassBase

{ + interface ClassicComponentClass extends ComponentClass

{ new(props?: P, context?: any): ClassicComponent; getDefaultProps?(): P; displayName?: string; @@ -222,7 +230,7 @@ declare module "react/addons" { } interface ComponentSpec extends Mixin { - render(): ReactElementBase; + render(): ReactElement; } // @@ -760,6 +768,7 @@ declare module "react/addons" { cloneWithProps

(element: ReactDOMElement

, props: P): ReactDOMElement

; cloneWithProps

(element: ReactClassicElement

, props: P): ReactClassicElement

; + cloneWithProps

(element: ReactModernElement

, props: P): ReactModernElement

; cloneWithProps

(element: ReactElement

, props: P): ReactElement

; createFragment(object: { [key: string]: ReactNode }): ReactFragment; @@ -776,8 +785,6 @@ declare module "react/addons" { // React.addons (Transitions) // ---------------------------------------------------------------------- - type ReactType = ComponentClass | string; - interface TransitionGroupProps { component?: ReactType; childFactory?: (child: ReactElement) => ReactElement; @@ -790,10 +797,8 @@ declare module "react/addons" { transitionLeave?: boolean; } - type CSSTransitionGroup = - ComponentClass; - type TransitionGroup = - ComponentClass; + type CSSTransitionGroup = ComponentClass; + type TransitionGroup = ComponentClass; // // React.addons (Mixins) @@ -885,7 +890,7 @@ declare module "react/addons" { isCompositeComponent(instance: Component): boolean; isCompositeComponentWithType( instance: Component, - type: ComponentClass): boolean; + type: ComponentClass): boolean; findAllInRenderedTree( tree: Component, @@ -905,19 +910,19 @@ declare module "react/addons" { tree: Component, tagName: string): DOMComponent; - scryRenderedComponentsWithType( + scryRenderedComponentsWithType

( tree: Component, - type: ComponentClass): Component[]; + type: ComponentClass

): Component[]; scryRenderedComponentsWithType>( tree: Component, - type: ComponentClass): C[]; + type: ComponentClass): C[]; - findRenderedComponentWithType( + findRenderedComponentWithType

( tree: Component, - type: ComponentClass): Component; + type: ComponentClass

): Component; findRenderedComponentWithType>( tree: Component, - type: ComponentClass): C; + type: ComponentClass): C; } interface SyntheticEventData { diff --git a/react/future/react-addons-global-0.13.0.d.ts b/react/future/react-addons-global-0.13.0.d.ts index c5db4f6d2..94f2844c0 100644 --- a/react/future/react-addons-global-0.13.0.d.ts +++ b/react/future/react-addons-global-0.13.0.d.ts @@ -25,6 +25,7 @@ declare module React { cloneWithProps

(element: ReactDOMElement

, props: P): ReactDOMElement

; cloneWithProps

(element: ReactClassicElement

, props: P): ReactClassicElement

; + cloneWithProps

(element: ReactModernElement

, props: P): ReactModernElement

; cloneWithProps

(element: ReactElement

, props: P): ReactElement

; createFragment(object: { [key: string]: ReactNode }): ReactFragment; @@ -41,8 +42,6 @@ declare module React { // React.addons (Transitions) // ---------------------------------------------------------------------- - type ReactType = ComponentClass | string; - interface TransitionGroupProps { component?: ReactType; childFactory?: (child: ReactElement) => ReactElement; @@ -55,10 +54,8 @@ declare module React { transitionLeave?: boolean; } - type CSSTransitionGroup = - ComponentClass; - type TransitionGroup = - ComponentClass; + type CSSTransitionGroup = ComponentClass; + type TransitionGroup = ComponentClass; // // React.addons (Mixins) @@ -150,7 +147,7 @@ declare module React { isCompositeComponent(instance: Component): boolean; isCompositeComponentWithType( instance: Component, - type: ComponentClass): boolean; + type: ComponentClass): boolean; findAllInRenderedTree( tree: Component, @@ -170,19 +167,19 @@ declare module React { tree: Component, tagName: string): DOMComponent; - scryRenderedComponentsWithType( + scryRenderedComponentsWithType

( tree: Component, - type: ComponentClass): Component[]; + type: ComponentClass

): Component[]; scryRenderedComponentsWithType>( tree: Component, - type: ComponentClass): C[]; + type: ComponentClass): C[]; - findRenderedComponentWithType( + findRenderedComponentWithType

( tree: Component, - type: ComponentClass): Component; + type: ComponentClass

): Component; findRenderedComponentWithType>( tree: Component, - type: ComponentClass): C; + type: ComponentClass): C; } interface SyntheticEventData { diff --git a/react/future/react-global-0.13.0.d.ts b/react/future/react-global-0.13.0.d.ts index b7be8993f..9cd5b69fe 100644 --- a/react/future/react-global-0.13.0.d.ts +++ b/react/future/react-global-0.13.0.d.ts @@ -8,26 +8,29 @@ declare module React { // React Elements // ---------------------------------------------------------------------- - interface ReactElementBase { - type: string | ComponentClassBase

; + type ReactType = ComponentClass | string; + + interface ReactElement

{ + type: string | ComponentClass

; props: P; key: string | number; - ref: string | ((component: T) => any); + ref: string | ((component: Component) => any); } - interface ReactElement

- extends ReactElementBase, P> { - type: ComponentClass; + interface ReactModernElement

extends ReactElement

{ + type: ModernComponentClass; + ref: string | ((component: Component) => any); } - interface ReactClassicElement

- extends ReactElementBase, P> { + interface ReactClassicElement

extends ReactElement

{ type: string | ClassicComponentClass; + ref: string | ((component: ClassicComponent) => any); } - interface ReactDOMElement

// subtype of ReactClassicElement - extends ReactElementBase, P> { + // subtype of ReactClassicElement + interface ReactDOMElement

extends ReactElement

{ type: string; + ref: string | ((component: DOMComponent

) => any); } type ReactHTMLElement = ReactDOMElement; @@ -41,11 +44,15 @@ declare module React { (props?: P, ...children: ReactNode[]): ReactElement

; } - interface ClassicFactory

{ + interface ModernFactory

extends Factory

{ + (props?: P, ...children: ReactNode[]): ReactModernElement

; + } + + interface ClassicFactory

extends Factory

{ (props?: P, ...children: ReactNode[]): ReactClassicElement

; } - interface DOMFactory

{ + interface DOMFactory

extends Factory

{ (props?: P, ...children: ReactNode[]): ReactDOMElement

; } @@ -58,7 +65,7 @@ declare module React { // ---------------------------------------------------------------------- type ReactText = string | number; - type ReactChild = ReactElementBase | ReactText; + type ReactChild = ReactElement | ReactText; // Should be Array but type aliases cannot be recursive type ReactFragment = {} | Array; @@ -68,15 +75,12 @@ declare module React { // Top Level API // ---------------------------------------------------------------------- - function createClass( - spec: ComponentSpec): ClassicComponentClass; + function createClass(spec: ComponentSpec): ClassicComponentClass; - function createFactory

( - type: string): DOMFactory

; - function createFactory

( - type: ClassicComponentClass | string): ClassicFactory

; - function createFactory

( - type: ComponentClass): Factory

; + function createFactory

(type: string): DOMFactory

; + function createFactory

(type: ClassicComponentClass | string): ClassicFactory

; + function createFactory

(type: ModernComponentClass): ModernFactory

; + function createFactory

(type: ComponentClass

): Factory

; function createElement

( type: string, @@ -87,21 +91,25 @@ declare module React { props?: P, ...children: ReactNode[]): ReactClassicElement

; function createElement

( - type: ComponentClass, + type: ModernComponentClass, props?: P, - ...children: ReactNode[]): ReactElement

; + ...children: ReactNode[]): ReactModernElement

; function cloneElement

( element: ReactDOMElement

, - props: P, + props?: P, ...children: ReactNode[]): ReactDOMElement

; function cloneElement

( element: ReactClassicElement

, - props: P, + props?: P, ...children: ReactNode[]): ReactClassicElement

; + function cloneElement

( + element: ReactModernElement

, + props?: P, + ...children: ReactNode[]): ReactModernElement

; function cloneElement

( element: ReactElement

, - props: P, + props?: P, ...children: ReactNode[]): ReactElement

; function render

( @@ -118,8 +126,8 @@ declare module React { callback?: () => any): Component; function unmountComponentAtNode(container: Element): boolean; - function renderToString(element: ReactElementBase): string; - function renderToStaticMarkup(element: ReactElementBase): string; + function renderToString(element: ReactElement): string; + function renderToStaticMarkup(element: ReactElement): string; function isValidElement(object: {}): boolean; function initializeTouchEvents(shouldUseTouch: boolean): void; @@ -175,18 +183,18 @@ declare module React { // Class Interfaces // ---------------------------------------------------------------------- - interface ComponentClassBase

{ + interface ComponentClass

{ propTypes?: ValidationMap

; contextTypes?: ValidationMap; childContextTypes?: ValidationMap; } - interface ComponentClass extends ComponentClassBase

{ + interface ModernComponentClass extends ComponentClass

{ new(props?: P, context?: any): Component; defaultProps?: P; } - interface ClassicComponentClass extends ComponentClassBase

{ + interface ClassicComponentClass extends ComponentClass

{ new(props?: P, context?: any): ClassicComponent; getDefaultProps?(): P; displayName?: string; @@ -222,7 +230,7 @@ declare module React { } interface ComponentSpec extends Mixin { - render(): ReactElementBase; + render(): ReactElement; } // From 4cc6ae4122a6f397e6e77c50ab6c0882ff0ed35f Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Fri, 6 Mar 2015 01:02:02 -0800 Subject: [PATCH 3/5] Remove React prefix from Modern/Classic/DOM Elements --- react/future/react-0.13.0-tests.ts | 20 ++++----- react/future/react-0.13.0.d.ts | 40 ++++++++--------- react/future/react-addons-0.13.0-tests.ts | 20 ++++----- react/future/react-addons-0.13.0.d.ts | 46 ++++++++++---------- react/future/react-addons-global-0.13.0.d.ts | 6 +-- react/future/react-global-0.13.0.d.ts | 40 ++++++++--------- 6 files changed, 86 insertions(+), 86 deletions(-) diff --git a/react/future/react-0.13.0-tests.ts b/react/future/react-0.13.0-tests.ts index cf216503e..fefa644b8 100644 --- a/react/future/react-0.13.0-tests.ts +++ b/react/future/react-0.13.0-tests.ts @@ -121,28 +121,28 @@ var factoryElement: React.ReactElement = var classicFactory: React.ClassicFactory = React.createFactory(ClassicComponent); -var classicFactoryElement: React.ReactClassicElement = +var classicFactoryElement: React.ClassicElement = classicFactory(props); var domFactory: React.DOMFactory = React.createFactory("foo"); -var domFactoryElement: React.ReactDOMElement = +var domFactoryElement: React.DOMElement = domFactory(); // React.createElement -var element: React.ReactModernElement = +var element: React.ModernElement = React.createElement(ModernComponent, props); -var classicElement: React.ReactClassicElement = +var classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); -var domElement: React.ReactHTMLElement = +var domElement: React.HTMLElement = React.createElement("div"); // React.cloneElement -var clonedElement: React.ReactModernElement = +var clonedElement: React.ModernElement = React.cloneElement(element, props); -var clonedClassicElement: React.ReactClassicElement = +var clonedClassicElement: React.ClassicElement = React.cloneElement(classicElement, props); -var clonedDOMElement: React.ReactHTMLElement = +var clonedDOMElement: React.HTMLElement = React.cloneElement(domElement); // React.render @@ -262,7 +262,7 @@ var PropTypesSpecification: React.ComponentSpec = { return null; } }, - render: (): React.ReactHTMLElement => { + render: (): React.ReactElement => { return null; } }; @@ -303,7 +303,7 @@ var ContextTypesSpecification: React.ComponentSpec = { return null; } }, - render: (): React.ReactHTMLElement => { + render: (): React.ReactElement => { return null; } }; diff --git a/react/future/react-0.13.0.d.ts b/react/future/react-0.13.0.d.ts index f87bdc721..a0fbb5214 100644 --- a/react/future/react-0.13.0.d.ts +++ b/react/future/react-0.13.0.d.ts @@ -17,24 +17,24 @@ declare module "react" { ref: string | ((component: Component) => any); } - interface ReactModernElement

extends ReactElement

{ + interface ModernElement

extends ReactElement

{ type: ModernComponentClass; ref: string | ((component: Component) => any); } - interface ReactClassicElement

extends ReactElement

{ + interface ClassicElement

extends ReactElement

{ type: string | ClassicComponentClass; ref: string | ((component: ClassicComponent) => any); } - // subtype of ReactClassicElement - interface ReactDOMElement

extends ReactElement

{ + // subtype of ClassicElement + interface DOMElement

extends ReactElement

{ type: string; ref: string | ((component: DOMComponent

) => any); } - type ReactHTMLElement = ReactDOMElement; - type ReactSVGElement = ReactDOMElement; + type HTMLElement = DOMElement; + type SVGElement = DOMElement; // // Factories @@ -45,15 +45,15 @@ declare module "react" { } interface ModernFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ReactModernElement

; + (props?: P, ...children: ReactNode[]): ModernElement

; } interface ClassicFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ReactClassicElement

; + (props?: P, ...children: ReactNode[]): ClassicElement

; } interface DOMFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ReactDOMElement

; + (props?: P, ...children: ReactNode[]): DOMElement

; } type HTMLFactory = DOMFactory; @@ -85,39 +85,39 @@ declare module "react" { function createElement

( type: string, props?: P, - ...children: ReactNode[]): ReactDOMElement

; + ...children: ReactNode[]): DOMElement

; function createElement

( type: ClassicComponentClass | string, props?: P, - ...children: ReactNode[]): ReactClassicElement

; + ...children: ReactNode[]): ClassicElement

; function createElement

( type: ModernComponentClass, props?: P, - ...children: ReactNode[]): ReactModernElement

; + ...children: ReactNode[]): ModernElement

; function cloneElement

( - element: ReactDOMElement

, + element: DOMElement

, props?: P, - ...children: ReactNode[]): ReactDOMElement

; + ...children: ReactNode[]): DOMElement

; function cloneElement

( - element: ReactClassicElement

, + element: ClassicElement

, props?: P, - ...children: ReactNode[]): ReactClassicElement

; + ...children: ReactNode[]): ClassicElement

; function cloneElement

( - element: ReactModernElement

, + element: ModernElement

, props?: P, - ...children: ReactNode[]): ReactModernElement

; + ...children: ReactNode[]): ModernElement

; function cloneElement

( element: ReactElement

, props?: P, ...children: ReactNode[]): ReactElement

; function render

( - element: ReactDOMElement

, + element: DOMElement

, container: Element, callback?: () => any): DOMComponent

; function render( - element: ReactClassicElement

, + element: ClassicElement

, container: Element, callback?: () => any): ClassicComponent; function render( diff --git a/react/future/react-addons-0.13.0-tests.ts b/react/future/react-addons-0.13.0-tests.ts index ff6889ec0..8ad3a03e9 100644 --- a/react/future/react-addons-0.13.0-tests.ts +++ b/react/future/react-addons-0.13.0-tests.ts @@ -119,28 +119,28 @@ var factoryElement: React.ReactElement = var classicFactory: React.ClassicFactory = React.createFactory(ClassicComponent); -var classicFactoryElement: React.ReactClassicElement = +var classicFactoryElement: React.ClassicElement = classicFactory(props); var domFactory: React.DOMFactory = React.createFactory("foo"); -var domFactoryElement: React.ReactDOMElement = +var domFactoryElement: React.DOMElement = domFactory(); // React.createElement -var element: React.ReactModernElement = +var element: React.ModernElement = React.createElement(ModernComponent, props); -var classicElement: React.ReactClassicElement = +var classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); -var domElement: React.ReactHTMLElement = +var domElement: React.HTMLElement = React.createElement("div"); // React.cloneElement -var clonedElement: React.ReactModernElement = +var clonedElement: React.ModernElement = React.cloneElement(element, props); -var clonedClassicElement: React.ReactClassicElement = +var clonedClassicElement: React.ClassicElement = React.cloneElement(classicElement, props); -var clonedDOMElement: React.ReactHTMLElement = +var clonedDOMElement: React.HTMLElement = React.cloneElement(domElement); // React.render @@ -260,7 +260,7 @@ var PropTypesSpecification: React.ComponentSpec = { return null; } }, - render: (): React.ReactHTMLElement => { + render: (): React.ReactElement => { return null; } }; @@ -301,7 +301,7 @@ var ContextTypesSpecification: React.ComponentSpec = { return null; } }, - render: (): React.ReactHTMLElement => { + render: (): React.ReactElement => { return null; } }; diff --git a/react/future/react-addons-0.13.0.d.ts b/react/future/react-addons-0.13.0.d.ts index 5148be3c6..42f18190f 100644 --- a/react/future/react-addons-0.13.0.d.ts +++ b/react/future/react-addons-0.13.0.d.ts @@ -17,24 +17,24 @@ declare module "react/addons" { ref: string | ((component: Component) => any); } - interface ReactModernElement

extends ReactElement

{ + interface ModernElement

extends ReactElement

{ type: ModernComponentClass; ref: string | ((component: Component) => any); } - interface ReactClassicElement

extends ReactElement

{ + interface ClassicElement

extends ReactElement

{ type: string | ClassicComponentClass; ref: string | ((component: ClassicComponent) => any); } - // subtype of ReactClassicElement - interface ReactDOMElement

extends ReactElement

{ + // subtype of ClassicElement + interface DOMElement

extends ReactElement

{ type: string; ref: string | ((component: DOMComponent

) => any); } - type ReactHTMLElement = ReactDOMElement; - type ReactSVGElement = ReactDOMElement; + type HTMLElement = DOMElement; + type SVGElement = DOMElement; // // Factories @@ -45,15 +45,15 @@ declare module "react/addons" { } interface ModernFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ReactModernElement

; + (props?: P, ...children: ReactNode[]): ModernElement

; } interface ClassicFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ReactClassicElement

; + (props?: P, ...children: ReactNode[]): ClassicElement

; } interface DOMFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ReactDOMElement

; + (props?: P, ...children: ReactNode[]): DOMElement

; } type HTMLFactory = DOMFactory; @@ -85,39 +85,39 @@ declare module "react/addons" { function createElement

( type: string, props?: P, - ...children: ReactNode[]): ReactDOMElement

; + ...children: ReactNode[]): DOMElement

; function createElement

( type: ClassicComponentClass | string, props?: P, - ...children: ReactNode[]): ReactClassicElement

; + ...children: ReactNode[]): ClassicElement

; function createElement

( type: ModernComponentClass, props?: P, - ...children: ReactNode[]): ReactModernElement

; + ...children: ReactNode[]): ModernElement

; function cloneElement

( - element: ReactDOMElement

, + element: DOMElement

, props?: P, - ...children: ReactNode[]): ReactDOMElement

; + ...children: ReactNode[]): DOMElement

; function cloneElement

( - element: ReactClassicElement

, + element: ClassicElement

, props?: P, - ...children: ReactNode[]): ReactClassicElement

; + ...children: ReactNode[]): ClassicElement

; function cloneElement

( - element: ReactModernElement

, + element: ModernElement

, props?: P, - ...children: ReactNode[]): ReactModernElement

; + ...children: ReactNode[]): ModernElement

; function cloneElement

( element: ReactElement

, props?: P, ...children: ReactNode[]): ReactElement

; function render

( - element: ReactDOMElement

, + element: DOMElement

, container: Element, callback?: () => any): DOMComponent

; function render( - element: ReactClassicElement

, + element: ClassicElement

, container: Element, callback?: () => any): ClassicComponent; function render( @@ -766,9 +766,9 @@ declare module "react/addons" { classSet(cx: { [key: string]: boolean }): string; classSet(...classList: string[]): string; - cloneWithProps

(element: ReactDOMElement

, props: P): ReactDOMElement

; - cloneWithProps

(element: ReactClassicElement

, props: P): ReactClassicElement

; - cloneWithProps

(element: ReactModernElement

, props: P): ReactModernElement

; + cloneWithProps

(element: DOMElement

, props: P): DOMElement

; + cloneWithProps

(element: ClassicElement

, props: P): ClassicElement

; + cloneWithProps

(element: ModernElement

, props: P): ModernElement

; cloneWithProps

(element: ReactElement

, props: P): ReactElement

; createFragment(object: { [key: string]: ReactNode }): ReactFragment; diff --git a/react/future/react-addons-global-0.13.0.d.ts b/react/future/react-addons-global-0.13.0.d.ts index 94f2844c0..aa83abe34 100644 --- a/react/future/react-addons-global-0.13.0.d.ts +++ b/react/future/react-addons-global-0.13.0.d.ts @@ -23,9 +23,9 @@ declare module React { classSet(cx: { [key: string]: boolean }): string; classSet(...classList: string[]): string; - cloneWithProps

(element: ReactDOMElement

, props: P): ReactDOMElement

; - cloneWithProps

(element: ReactClassicElement

, props: P): ReactClassicElement

; - cloneWithProps

(element: ReactModernElement

, props: P): ReactModernElement

; + cloneWithProps

(element: DOMElement

, props: P): DOMElement

; + cloneWithProps

(element: ClassicElement

, props: P): ClassicElement

; + cloneWithProps

(element: ModernElement

, props: P): ModernElement

; cloneWithProps

(element: ReactElement

, props: P): ReactElement

; createFragment(object: { [key: string]: ReactNode }): ReactFragment; diff --git a/react/future/react-global-0.13.0.d.ts b/react/future/react-global-0.13.0.d.ts index 9cd5b69fe..9e9b33640 100644 --- a/react/future/react-global-0.13.0.d.ts +++ b/react/future/react-global-0.13.0.d.ts @@ -17,24 +17,24 @@ declare module React { ref: string | ((component: Component) => any); } - interface ReactModernElement

extends ReactElement

{ + interface ModernElement

extends ReactElement

{ type: ModernComponentClass; ref: string | ((component: Component) => any); } - interface ReactClassicElement

extends ReactElement

{ + interface ClassicElement

extends ReactElement

{ type: string | ClassicComponentClass; ref: string | ((component: ClassicComponent) => any); } - // subtype of ReactClassicElement - interface ReactDOMElement

extends ReactElement

{ + // subtype of ClassicElement + interface DOMElement

extends ReactElement

{ type: string; ref: string | ((component: DOMComponent

) => any); } - type ReactHTMLElement = ReactDOMElement; - type ReactSVGElement = ReactDOMElement; + type HTMLElement = DOMElement; + type SVGElement = DOMElement; // // Factories @@ -45,15 +45,15 @@ declare module React { } interface ModernFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ReactModernElement

; + (props?: P, ...children: ReactNode[]): ModernElement

; } interface ClassicFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ReactClassicElement

; + (props?: P, ...children: ReactNode[]): ClassicElement

; } interface DOMFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ReactDOMElement

; + (props?: P, ...children: ReactNode[]): DOMElement

; } type HTMLFactory = DOMFactory; @@ -85,39 +85,39 @@ declare module React { function createElement

( type: string, props?: P, - ...children: ReactNode[]): ReactDOMElement

; + ...children: ReactNode[]): DOMElement

; function createElement

( type: ClassicComponentClass | string, props?: P, - ...children: ReactNode[]): ReactClassicElement

; + ...children: ReactNode[]): ClassicElement

; function createElement

( type: ModernComponentClass, props?: P, - ...children: ReactNode[]): ReactModernElement

; + ...children: ReactNode[]): ModernElement

; function cloneElement

( - element: ReactDOMElement

, + element: DOMElement

, props?: P, - ...children: ReactNode[]): ReactDOMElement

; + ...children: ReactNode[]): DOMElement

; function cloneElement

( - element: ReactClassicElement

, + element: ClassicElement

, props?: P, - ...children: ReactNode[]): ReactClassicElement

; + ...children: ReactNode[]): ClassicElement

; function cloneElement

( - element: ReactModernElement

, + element: ModernElement

, props?: P, - ...children: ReactNode[]): ReactModernElement

; + ...children: ReactNode[]): ModernElement

; function cloneElement

( element: ReactElement

, props?: P, ...children: ReactNode[]): ReactElement

; function render

( - element: ReactDOMElement

, + element: DOMElement

, container: Element, callback?: () => any): DOMComponent

; function render( - element: ReactClassicElement

, + element: ClassicElement

, container: Element, callback?: () => any): ClassicComponent; function render( From cbe9f0b94abe050b1c868a93a38065b3d48ea4ba Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Mon, 9 Mar 2015 11:28:02 -0700 Subject: [PATCH 4/5] Remove React.ModernXX interfaces React.ModernElement -> React.ReactElement React.ModernFactory -> React.Factory React.ModernComponentClass -> React.ComponentClass --- react/future/react-0.13.0-tests.ts | 6 +-- react/future/react-0.13.0.d.ts | 42 ++++++------------- react/future/react-addons-0.13.0-tests.ts | 6 +-- react/future/react-addons-0.13.0.d.ts | 43 ++++++-------------- react/future/react-addons-global-0.13.0.d.ts | 1 - react/future/react-global-0.13.0.d.ts | 42 ++++++------------- 6 files changed, 42 insertions(+), 98 deletions(-) diff --git a/react/future/react-0.13.0-tests.ts b/react/future/react-0.13.0-tests.ts index fefa644b8..358359dcf 100644 --- a/react/future/react-0.13.0-tests.ts +++ b/react/future/react-0.13.0-tests.ts @@ -41,7 +41,7 @@ var container: Element; // Top-Level API // -------------------------------------------------------------------------- -var ClassicComponent: React.ClassicComponentClass = +var ClassicComponent: React.ClassicComponentClass = React.createClass({ getDefaultProps: () => { return { @@ -130,7 +130,7 @@ var domFactoryElement: React.DOMElement = domFactory(); // React.createElement -var element: React.ModernElement = +var element: React.ReactElement = React.createElement(ModernComponent, props); var classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); @@ -138,7 +138,7 @@ var domElement: React.HTMLElement = React.createElement("div"); // React.cloneElement -var clonedElement: React.ModernElement = +var clonedElement: React.ReactElement = React.cloneElement(element, props); var clonedClassicElement: React.ClassicElement = React.cloneElement(classicElement, props); diff --git a/react/future/react-0.13.0.d.ts b/react/future/react-0.13.0.d.ts index a0fbb5214..b91847adf 100644 --- a/react/future/react-0.13.0.d.ts +++ b/react/future/react-0.13.0.d.ts @@ -17,18 +17,12 @@ declare module "react" { ref: string | ((component: Component) => any); } - interface ModernElement

extends ReactElement

{ - type: ModernComponentClass; - ref: string | ((component: Component) => any); - } - interface ClassicElement

extends ReactElement

{ - type: string | ClassicComponentClass; + type: string | ClassicComponentClass

; ref: string | ((component: ClassicComponent) => any); } - // subtype of ClassicElement - interface DOMElement

extends ReactElement

{ + interface DOMElement

extends ClassicElement

{ type: string; ref: string | ((component: DOMComponent

) => any); } @@ -44,15 +38,11 @@ declare module "react" { (props?: P, ...children: ReactNode[]): ReactElement

; } - interface ModernFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ModernElement

; - } - interface ClassicFactory

extends Factory

{ (props?: P, ...children: ReactNode[]): ClassicElement

; } - interface DOMFactory

extends Factory

{ + interface DOMFactory

extends ClassicFactory

{ (props?: P, ...children: ReactNode[]): DOMElement

; } @@ -75,11 +65,10 @@ declare module "react" { // Top Level API // ---------------------------------------------------------------------- - function createClass(spec: ComponentSpec): ClassicComponentClass; + function createClass

(spec: ComponentSpec): ClassicComponentClass

; function createFactory

(type: string): DOMFactory

; - function createFactory

(type: ClassicComponentClass | string): ClassicFactory

; - function createFactory

(type: ModernComponentClass): ModernFactory

; + function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; function createFactory

(type: ComponentClass

): Factory

; function createElement

( @@ -87,13 +76,13 @@ declare module "react" { props?: P, ...children: ReactNode[]): DOMElement

; function createElement

( - type: ClassicComponentClass | string, + type: ClassicComponentClass

| string, props?: P, ...children: ReactNode[]): ClassicElement

; function createElement

( - type: ModernComponentClass, + type: ComponentClass

, props?: P, - ...children: ReactNode[]): ModernElement

; + ...children: ReactNode[]): ReactElement

; function cloneElement

( element: DOMElement

, @@ -103,10 +92,6 @@ declare module "react" { element: ClassicElement

, props?: P, ...children: ReactNode[]): ClassicElement

; - function cloneElement

( - element: ModernElement

, - props?: P, - ...children: ReactNode[]): ModernElement

; function cloneElement

( element: ReactElement

, props?: P, @@ -184,18 +169,15 @@ declare module "react" { // ---------------------------------------------------------------------- interface ComponentClass

{ + new(props?: P, context?: any): Component; propTypes?: ValidationMap

; contextTypes?: ValidationMap; childContextTypes?: ValidationMap; - } - - interface ModernComponentClass extends ComponentClass

{ - new(props?: P, context?: any): Component; defaultProps?: P; } - interface ClassicComponentClass extends ComponentClass

{ - new(props?: P, context?: any): ClassicComponent; + interface ClassicComponentClass

extends ComponentClass

{ + new(props?: P, context?: any): ClassicComponent; getDefaultProps?(): P; displayName?: string; } @@ -225,8 +207,8 @@ declare module "react" { contextTypes?: ValidationMap; childContextTypes?: ValidationMap - getInitialState?(): S; getDefaultProps?(): P; + getInitialState?(): S; } interface ComponentSpec extends Mixin { diff --git a/react/future/react-addons-0.13.0-tests.ts b/react/future/react-addons-0.13.0-tests.ts index 8ad3a03e9..bea751b70 100644 --- a/react/future/react-addons-0.13.0-tests.ts +++ b/react/future/react-addons-0.13.0-tests.ts @@ -39,7 +39,7 @@ var container: Element; // Top-Level API // -------------------------------------------------------------------------- -var ClassicComponent: React.ClassicComponentClass = +var ClassicComponent: React.ClassicComponentClass = React.createClass({ getDefaultProps: () => { return { @@ -128,7 +128,7 @@ var domFactoryElement: React.DOMElement = domFactory(); // React.createElement -var element: React.ModernElement = +var element: React.ReactElement = React.createElement(ModernComponent, props); var classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); @@ -136,7 +136,7 @@ var domElement: React.HTMLElement = React.createElement("div"); // React.cloneElement -var clonedElement: React.ModernElement = +var clonedElement: React.ReactElement = React.cloneElement(element, props); var clonedClassicElement: React.ClassicElement = React.cloneElement(classicElement, props); diff --git a/react/future/react-addons-0.13.0.d.ts b/react/future/react-addons-0.13.0.d.ts index 42f18190f..19cf44ed2 100644 --- a/react/future/react-addons-0.13.0.d.ts +++ b/react/future/react-addons-0.13.0.d.ts @@ -17,18 +17,12 @@ declare module "react/addons" { ref: string | ((component: Component) => any); } - interface ModernElement

extends ReactElement

{ - type: ModernComponentClass; - ref: string | ((component: Component) => any); - } - interface ClassicElement

extends ReactElement

{ - type: string | ClassicComponentClass; + type: string | ClassicComponentClass

; ref: string | ((component: ClassicComponent) => any); } - // subtype of ClassicElement - interface DOMElement

extends ReactElement

{ + interface DOMElement

extends ClassicElement

{ type: string; ref: string | ((component: DOMComponent

) => any); } @@ -44,15 +38,11 @@ declare module "react/addons" { (props?: P, ...children: ReactNode[]): ReactElement

; } - interface ModernFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ModernElement

; - } - interface ClassicFactory

extends Factory

{ (props?: P, ...children: ReactNode[]): ClassicElement

; } - interface DOMFactory

extends Factory

{ + interface DOMFactory

extends ClassicFactory

{ (props?: P, ...children: ReactNode[]): DOMElement

; } @@ -75,11 +65,10 @@ declare module "react/addons" { // Top Level API // ---------------------------------------------------------------------- - function createClass(spec: ComponentSpec): ClassicComponentClass; + function createClass(spec: ComponentSpec): ClassicComponentClass

; function createFactory

(type: string): DOMFactory

; - function createFactory

(type: ClassicComponentClass | string): ClassicFactory

; - function createFactory

(type: ModernComponentClass): ModernFactory

; + function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; function createFactory

(type: ComponentClass

): Factory

; function createElement

( @@ -87,13 +76,13 @@ declare module "react/addons" { props?: P, ...children: ReactNode[]): DOMElement

; function createElement

( - type: ClassicComponentClass | string, + type: ClassicComponentClass

| string, props?: P, ...children: ReactNode[]): ClassicElement

; function createElement

( - type: ModernComponentClass, + type: ComponentClass

, props?: P, - ...children: ReactNode[]): ModernElement

; + ...children: ReactNode[]): ReactElement

; function cloneElement

( element: DOMElement

, @@ -103,10 +92,6 @@ declare module "react/addons" { element: ClassicElement

, props?: P, ...children: ReactNode[]): ClassicElement

; - function cloneElement

( - element: ModernElement

, - props?: P, - ...children: ReactNode[]): ModernElement

; function cloneElement

( element: ReactElement

, props?: P, @@ -184,18 +169,15 @@ declare module "react/addons" { // ---------------------------------------------------------------------- interface ComponentClass

{ + new(props?: P, context?: any): Component; propTypes?: ValidationMap

; contextTypes?: ValidationMap; childContextTypes?: ValidationMap; - } - - interface ModernComponentClass extends ComponentClass

{ - new(props?: P, context?: any): Component; defaultProps?: P; } - interface ClassicComponentClass extends ComponentClass

{ - new(props?: P, context?: any): ClassicComponent; + interface ClassicComponentClass

extends ComponentClass

{ + new(props?: P, context?: any): ClassicComponent; getDefaultProps?(): P; displayName?: string; } @@ -225,8 +207,8 @@ declare module "react/addons" { contextTypes?: ValidationMap; childContextTypes?: ValidationMap - getInitialState?(): S; getDefaultProps?(): P; + getInitialState?(): S; } interface ComponentSpec extends Mixin { @@ -768,7 +750,6 @@ declare module "react/addons" { cloneWithProps

(element: DOMElement

, props: P): DOMElement

; cloneWithProps

(element: ClassicElement

, props: P): ClassicElement

; - cloneWithProps

(element: ModernElement

, props: P): ModernElement

; cloneWithProps

(element: ReactElement

, props: P): ReactElement

; createFragment(object: { [key: string]: ReactNode }): ReactFragment; diff --git a/react/future/react-addons-global-0.13.0.d.ts b/react/future/react-addons-global-0.13.0.d.ts index aa83abe34..343590f98 100644 --- a/react/future/react-addons-global-0.13.0.d.ts +++ b/react/future/react-addons-global-0.13.0.d.ts @@ -25,7 +25,6 @@ declare module React { cloneWithProps

(element: DOMElement

, props: P): DOMElement

; cloneWithProps

(element: ClassicElement

, props: P): ClassicElement

; - cloneWithProps

(element: ModernElement

, props: P): ModernElement

; cloneWithProps

(element: ReactElement

, props: P): ReactElement

; createFragment(object: { [key: string]: ReactNode }): ReactFragment; diff --git a/react/future/react-global-0.13.0.d.ts b/react/future/react-global-0.13.0.d.ts index 9e9b33640..268d4bf86 100644 --- a/react/future/react-global-0.13.0.d.ts +++ b/react/future/react-global-0.13.0.d.ts @@ -17,18 +17,12 @@ declare module React { ref: string | ((component: Component) => any); } - interface ModernElement

extends ReactElement

{ - type: ModernComponentClass; - ref: string | ((component: Component) => any); - } - interface ClassicElement

extends ReactElement

{ - type: string | ClassicComponentClass; + type: string | ClassicComponentClass

; ref: string | ((component: ClassicComponent) => any); } - // subtype of ClassicElement - interface DOMElement

extends ReactElement

{ + interface DOMElement

extends ClassicElement

{ type: string; ref: string | ((component: DOMComponent

) => any); } @@ -44,15 +38,11 @@ declare module React { (props?: P, ...children: ReactNode[]): ReactElement

; } - interface ModernFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ModernElement

; - } - interface ClassicFactory

extends Factory

{ (props?: P, ...children: ReactNode[]): ClassicElement

; } - interface DOMFactory

extends Factory

{ + interface DOMFactory

extends ClassicFactory

{ (props?: P, ...children: ReactNode[]): DOMElement

; } @@ -75,11 +65,10 @@ declare module React { // Top Level API // ---------------------------------------------------------------------- - function createClass(spec: ComponentSpec): ClassicComponentClass; + function createClass(spec: ComponentSpec): ClassicComponentClass

; function createFactory

(type: string): DOMFactory

; - function createFactory

(type: ClassicComponentClass | string): ClassicFactory

; - function createFactory

(type: ModernComponentClass): ModernFactory

; + function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; function createFactory

(type: ComponentClass

): Factory

; function createElement

( @@ -87,13 +76,13 @@ declare module React { props?: P, ...children: ReactNode[]): DOMElement

; function createElement

( - type: ClassicComponentClass | string, + type: ClassicComponentClass

| string, props?: P, ...children: ReactNode[]): ClassicElement

; function createElement

( - type: ModernComponentClass, + type: ComponentClass

, props?: P, - ...children: ReactNode[]): ModernElement

; + ...children: ReactNode[]): ReactElement

; function cloneElement

( element: DOMElement

, @@ -103,10 +92,6 @@ declare module React { element: ClassicElement

, props?: P, ...children: ReactNode[]): ClassicElement

; - function cloneElement

( - element: ModernElement

, - props?: P, - ...children: ReactNode[]): ModernElement

; function cloneElement

( element: ReactElement

, props?: P, @@ -184,18 +169,15 @@ declare module React { // ---------------------------------------------------------------------- interface ComponentClass

{ + new(props?: P, context?: any): Component; propTypes?: ValidationMap

; contextTypes?: ValidationMap; childContextTypes?: ValidationMap; - } - - interface ModernComponentClass extends ComponentClass

{ - new(props?: P, context?: any): Component; defaultProps?: P; } - interface ClassicComponentClass extends ComponentClass

{ - new(props?: P, context?: any): ClassicComponent; + interface ClassicComponentClass

extends ComponentClass

{ + new(props?: P, context?: any): ClassicComponent; getDefaultProps?(): P; displayName?: string; } @@ -225,8 +207,8 @@ declare module React { contextTypes?: ValidationMap; childContextTypes?: ValidationMap - getInitialState?(): S; getDefaultProps?(): P; + getInitialState?(): S; } interface ComponentSpec extends Mixin { From 57340eca1e3aac68d59cc981b441da834ca38235 Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Tue, 10 Mar 2015 18:55:18 -0700 Subject: [PATCH 5/5] Moving React 0.13 to be the default React 0.13 is now released so it should be the default type definition. http://facebook.github.io/react/blog/2015/03/10/react-v0.13.html --- fluxxor/fluxxor.d.ts | 2 +- jsnox/jsnox.d.ts | 2 +- react-router/react-router.d.ts | 2 +- react/{future => }/README.md | 0 react/future/react-0.13.0-tests.ts | 354 ------------ react/future/react-addons-0.13.0-tests.ts | 389 -------------- react/legacy/react-0.12-tests.ts | 235 ++++++++ .../react-0.12.d.ts} | 507 ++++++++++++------ react/legacy/react-addons-0.12-tests.ts | 68 +++ ...l-0.13.0.d.ts => react-addons-global.d.ts} | 2 +- react/react-addons-tests.ts | 401 ++++++++++++-- ...t-addons-0.13.0.d.ts => react-addons.d.ts} | 0 ...t-global-0.13.0.d.ts => react-global.d.ts} | 0 react/react-tests.ts | 281 +++++++--- react/react.d.ts | 507 ++++++------------ 15 files changed, 1374 insertions(+), 1376 deletions(-) rename react/{future => }/README.md (100%) delete mode 100644 react/future/react-0.13.0-tests.ts delete mode 100644 react/future/react-addons-0.13.0-tests.ts create mode 100644 react/legacy/react-0.12-tests.ts rename react/{future/react-0.13.0.d.ts => legacy/react-0.12.d.ts} (61%) create mode 100644 react/legacy/react-addons-0.12-tests.ts rename react/{future/react-addons-global-0.13.0.d.ts => react-addons-global.d.ts} (99%) rename react/{future/react-addons-0.13.0.d.ts => react-addons.d.ts} (100%) rename react/{future/react-global-0.13.0.d.ts => react-global.d.ts} (100%) diff --git a/fluxxor/fluxxor.d.ts b/fluxxor/fluxxor.d.ts index e857a6b15..e8b89a66d 100644 --- a/fluxxor/fluxxor.d.ts +++ b/fluxxor/fluxxor.d.ts @@ -3,7 +3,7 @@ // Definitions by: Yuichi Murata // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// +/// /// declare module Fluxxor { diff --git a/jsnox/jsnox.d.ts b/jsnox/jsnox.d.ts index b3e4460c0..72584563b 100644 --- a/jsnox/jsnox.d.ts +++ b/jsnox/jsnox.d.ts @@ -3,7 +3,7 @@ // Definitions by: Steve Baker // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// +/// declare module 'jsnox' { diff --git a/react-router/react-router.d.ts b/react-router/react-router.d.ts index 13c573b4b..8f63f2d69 100644 --- a/react-router/react-router.d.ts +++ b/react-router/react-router.d.ts @@ -3,7 +3,7 @@ // Definitions by: Yuichi Murata // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// +/// declare module ReactRouter { // diff --git a/react/future/README.md b/react/README.md similarity index 100% rename from react/future/README.md rename to react/README.md diff --git a/react/future/react-0.13.0-tests.ts b/react/future/react-0.13.0-tests.ts deleted file mode 100644 index 358359dcf..000000000 --- a/react/future/react-0.13.0-tests.ts +++ /dev/null @@ -1,354 +0,0 @@ -/// -// requiring react/addons instead of react so react.d.ts doesn't get picked up -// TODO: import "react" once 0.13.0 is released -import React = require("react/addons"); - -interface Props extends React.Props { - hello: string; - world?: string; - foo: number; - bar: boolean; -} - -interface State { - inputValue?: string; - seconds?: number; -} - -interface Context { - someValue?: string; -} - -interface ChildContext { - someOtherValue: string; -} - -interface MyComponent extends React.Component { - reset(): void; -} - -var props: Props = { - key: 42, - ref: "myComponent42", - hello: "world", - foo: 42, - bar: true -}; - -var container: Element; - -// -// Top-Level API -// -------------------------------------------------------------------------- - -var ClassicComponent: React.ClassicComponentClass = - React.createClass({ - getDefaultProps: () => { - return { - hello: undefined, - world: "peace", - foo: undefined, - bar: undefined - }; - }, - getInitialState: () => { - return { - inputValue: this.context.someValue, - seconds: this.props.foo - }; - }, - reset: () => { - this.replaceState(this.getInitialState()); - }, - render: () => { - return React.DOM.div(null, - React.DOM.input({ - ref: input => this._input = input, - value: this.state.inputValue - })); - } - }); - -class ModernComponent extends React.Component - implements React.ChildContextProvider { - - static propTypes: React.ValidationMap = { - foo: React.PropTypes.number - } - - static contextTypes: React.ValidationMap = { - someValue: React.PropTypes.string - } - - static childContextTypes: React.ValidationMap = { - someOtherValue: React.PropTypes.string - } - - getChildContext() { - return { - someOtherValue: 'foo' - } - } - - state = { - inputValue: this.context.someValue, - seconds: this.props.foo - } - - reset() { - this.setState({ - inputValue: this.context.someValue, - seconds: this.props.foo - }); - } - - private _input: React.HTMLComponent; - - render() { - return React.DOM.div(null, - React.DOM.input({ - ref: input => this._input = input, - value: this.state.inputValue - })); - } -} - -// React.createFactory -var factory: React.Factory = - React.createFactory(ModernComponent); -var factoryElement: React.ReactElement = - factory(props); - -var classicFactory: React.ClassicFactory = - React.createFactory(ClassicComponent); -var classicFactoryElement: React.ClassicElement = - classicFactory(props); - -var domFactory: React.DOMFactory = - React.createFactory("foo"); -var domFactoryElement: React.DOMElement = - domFactory(); - -// React.createElement -var element: React.ReactElement = - React.createElement(ModernComponent, props); -var classicElement: React.ClassicElement = - React.createElement(ClassicComponent, props); -var domElement: React.HTMLElement = - React.createElement("div"); - -// React.cloneElement -var clonedElement: React.ReactElement = - React.cloneElement(element, props); -var clonedClassicElement: React.ClassicElement = - React.cloneElement(classicElement, props); -var clonedDOMElement: React.HTMLElement = - React.cloneElement(domElement); - -// React.render -var component: React.Component = - React.render(element, container); -var classicComponent: React.ClassicComponent = - React.render(classicElement, container); -var domComponent: React.DOMComponent = - React.render(domElement, container); - -// Other Top-Level API -var unmounted: boolean = React.unmountComponentAtNode(container); -var str: string = React.renderToString(element); -var markup: string = React.renderToStaticMarkup(element); -var notValid: boolean = React.isValidElement(props); // false -var isValid = React.isValidElement(element); // true -React.initializeTouchEvents(true); -var domNode: Element = React.findDOMNode(component); -domNode = React.findDOMNode(domNode); - -// -// React Elements -// -------------------------------------------------------------------------- - -var type = element.type; -var elementProps: Props = element.props; -var key = element.key; - -// -// React Components -// -------------------------------------------------------------------------- - -var displayName: string = ClassicComponent.displayName; -var defaultProps: Props = ClassicComponent.getDefaultProps(); -var propTypes: React.ValidationMap = ClassicComponent.propTypes; - -// -// Component API -// -------------------------------------------------------------------------- - -// modern -var componentState: State = component.state; -component.setState({ inputValue: "!!!" }); -component.forceUpdate(); - -// classic -var htmlElement: Element = classicComponent.getDOMNode(); -var divElement: HTMLDivElement = classicComponent.getDOMNode(); -var isMounted: boolean = classicComponent.isMounted(); -classicComponent.setProps(elementProps); -classicComponent.replaceProps(props); -classicComponent.replaceState({ inputValue: "???", seconds: 60 }); - -var myComponent = component; -myComponent.reset(); - -// -// Attributes -// -------------------------------------------------------------------------- - -var children = ["Hello world", [null], React.DOM.span(null)]; -var divStyle = { // CSSProperties - flex: "1 1 main-size", - backgroundImage: "url('hello.png')" -}; -var htmlAttr: React.HTMLAttributes = { - key: 36, - ref: "htmlComponent", - children: children, - className: "test-attr", - style: divStyle, - onClick: (event: React.MouseEvent) => { - event.preventDefault(); - event.stopPropagation(); - }, - dangerouslySetInnerHTML: { - __html: "STRONG" - } -}; -React.DOM.div(htmlAttr); -React.DOM.span(htmlAttr); -React.DOM.input(htmlAttr); - -// -// React.PropTypes -// -------------------------------------------------------------------------- - -var PropTypesSpecification: React.ComponentSpec = { - propTypes: { - optionalArray: React.PropTypes.array, - optionalBool: React.PropTypes.bool, - optionalFunc: React.PropTypes.func, - optionalNumber: React.PropTypes.number, - optionalObject: React.PropTypes.object, - optionalString: React.PropTypes.string, - optionalNode: React.PropTypes.node, - optionalElement: React.PropTypes.element, - optionalMessage: React.PropTypes.instanceOf(Date), - optionalEnum: React.PropTypes.oneOf(["News", "Photos"]), - optionalUnion: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.instanceOf(Date) - ]), - optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), - optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), - optionalObjectWithShape: React.PropTypes.shape({ - color: React.PropTypes.string, - fontSize: React.PropTypes.number - }), - requiredFunc: React.PropTypes.func.isRequired, - requiredAny: React.PropTypes.any.isRequired, - customProp: function(props: any, propName: string, componentName: string) { - if (!/matchme/.test(props[propName])) { - return new Error("Validation failed!"); - } - return null; - } - }, - render: (): React.ReactElement => { - return null; - } -}; - -// -// ContextTypes -// -------------------------------------------------------------------------- - -var ContextTypesSpecification: React.ComponentSpec = { - contextTypes: { - optionalArray: React.PropTypes.array, - optionalBool: React.PropTypes.bool, - optionalFunc: React.PropTypes.func, - optionalNumber: React.PropTypes.number, - optionalObject: React.PropTypes.object, - optionalString: React.PropTypes.string, - optionalNode: React.PropTypes.node, - optionalElement: React.PropTypes.element, - optionalMessage: React.PropTypes.instanceOf(Date), - optionalEnum: React.PropTypes.oneOf(["News", "Photos"]), - optionalUnion: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.instanceOf(Date) - ]), - optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), - optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), - optionalObjectWithShape: React.PropTypes.shape({ - color: React.PropTypes.string, - fontSize: React.PropTypes.number - }), - requiredFunc: React.PropTypes.func.isRequired, - requiredAny: React.PropTypes.any.isRequired, - customProp: function(props: any, propName: string, componentName: string) { - if (!/matchme/.test(props[propName])) { - return new Error("Validation failed!"); - } - return null; - } - }, - render: (): React.ReactElement => { - return null; - } -}; - -// -// React.Children -// -------------------------------------------------------------------------- - -var childMap: { [key: string]: number } = - React.Children.map(children, (child) => { return 42; }); -React.Children.forEach(children, (child) => {}); -var nChildren: number = React.Children.count(children); -var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]); - -// -// Example from http://facebook.github.io/react/ -// -------------------------------------------------------------------------- - -interface TimerState { - secondsElapsed: number; -} -class Timer extends React.Component<{}, TimerState> { - static state = { - secondsElapsed: 0 - } - private _interval: number; - tick() { - this.setState((prevState, props) => ({ - secondsElapsed: prevState.secondsElapsed + 1 - })); - } - componentDidMount() { - var me = this; - this._interval = setInterval(() => me.tick(), 1000); - } - componentWillUnmount() { - clearInterval(this._interval); - } - render() { - return React.DOM.div( - null, - "Seconds Elapsed: ", - this.state.secondsElapsed - ); - } -} -React.render(React.createElement(Timer), container); - diff --git a/react/future/react-addons-0.13.0-tests.ts b/react/future/react-addons-0.13.0-tests.ts deleted file mode 100644 index bea751b70..000000000 --- a/react/future/react-addons-0.13.0-tests.ts +++ /dev/null @@ -1,389 +0,0 @@ -/// -import React = require("react/addons"); - -interface Props extends React.Props { - hello: string; - world?: string; - foo: number; - bar: boolean; -} - -interface State { - inputValue?: string; - seconds?: number; -} - -interface Context { - someValue?: string; -} - -interface ChildContext { - someOtherValue: string; -} - -interface MyComponent extends React.Component { - reset(): void; -} - -var props: Props = { - key: 42, - ref: "myComponent42", - hello: "world", - foo: 42, - bar: true -}; - -var container: Element; - -// -// Top-Level API -// -------------------------------------------------------------------------- - -var ClassicComponent: React.ClassicComponentClass = - React.createClass({ - getDefaultProps: () => { - return { - hello: undefined, - world: "peace", - foo: undefined, - bar: undefined - }; - }, - getInitialState: () => { - return { - inputValue: this.context.someValue, - seconds: this.props.foo - }; - }, - reset: () => { - this.replaceState(this.getInitialState()); - }, - render: () => { - return React.DOM.div(null, - React.DOM.input({ - ref: input => this._input = input, - value: this.state.inputValue - })); - } - }); - -class ModernComponent extends React.Component - implements React.ChildContextProvider { - - static propTypes: React.ValidationMap = { - foo: React.PropTypes.number - } - - static contextTypes: React.ValidationMap = { - someValue: React.PropTypes.string - } - - static childContextTypes: React.ValidationMap = { - someOtherValue: React.PropTypes.string - } - - getChildContext() { - return { - someOtherValue: 'foo' - } - } - - state = { - inputValue: this.context.someValue, - seconds: this.props.foo - } - - reset() { - this.setState({ - inputValue: this.context.someValue, - seconds: this.props.foo - }); - } - - private _input: React.HTMLComponent; - - render() { - return React.DOM.div(null, - React.DOM.input({ - ref: input => this._input = input, - value: this.state.inputValue - })); - } -} - -// React.createFactory -var factory: React.Factory = - React.createFactory(ModernComponent); -var factoryElement: React.ReactElement = - factory(props); - -var classicFactory: React.ClassicFactory = - React.createFactory(ClassicComponent); -var classicFactoryElement: React.ClassicElement = - classicFactory(props); - -var domFactory: React.DOMFactory = - React.createFactory("foo"); -var domFactoryElement: React.DOMElement = - domFactory(); - -// React.createElement -var element: React.ReactElement = - React.createElement(ModernComponent, props); -var classicElement: React.ClassicElement = - React.createElement(ClassicComponent, props); -var domElement: React.HTMLElement = - React.createElement("div"); - -// React.cloneElement -var clonedElement: React.ReactElement = - React.cloneElement(element, props); -var clonedClassicElement: React.ClassicElement = - React.cloneElement(classicElement, props); -var clonedDOMElement: React.HTMLElement = - React.cloneElement(domElement); - -// React.render -var component: React.Component = - React.render(element, container); -var classicComponent: React.ClassicComponent = - React.render(classicElement, container); -var domComponent: React.DOMComponent = - React.render(domElement, container); - -// Other Top-Level API -var unmounted: boolean = React.unmountComponentAtNode(container); -var str: string = React.renderToString(element); -var markup: string = React.renderToStaticMarkup(element); -var notValid: boolean = React.isValidElement(props); // false -var isValid = React.isValidElement(element); // true -React.initializeTouchEvents(true); -var domNode: Element = React.findDOMNode(component); -domNode = React.findDOMNode(domNode); - -// -// React Elements -// -------------------------------------------------------------------------- - -var type = element.type; -var elementProps: Props = element.props; -var key = element.key; - -// -// React Components -// -------------------------------------------------------------------------- - -var displayName: string = ClassicComponent.displayName; -var defaultProps: Props = ClassicComponent.getDefaultProps(); -var propTypes: React.ValidationMap = ClassicComponent.propTypes; - -// -// Component API -// -------------------------------------------------------------------------- - -// modern -var componentState: State = component.state; -component.setState({ inputValue: "!!!" }); -component.forceUpdate(); - -// classic -var htmlElement: Element = classicComponent.getDOMNode(); -var divElement: HTMLDivElement = classicComponent.getDOMNode(); -var isMounted: boolean = classicComponent.isMounted(); -classicComponent.setProps(elementProps); -classicComponent.replaceProps(props); -classicComponent.replaceState({ inputValue: "???", seconds: 60 }); - -var myComponent = component; -myComponent.reset(); - -// -// Attributes -// -------------------------------------------------------------------------- - -var children = ["Hello world", [null], React.DOM.span(null)]; -var divStyle = { // CSSProperties - flex: "1 1 main-size", - backgroundImage: "url('hello.png')" -}; -var htmlAttr: React.HTMLAttributes = { - key: 36, - ref: "htmlComponent", - children: children, - className: "test-attr", - style: divStyle, - onClick: (event: React.MouseEvent) => { - event.preventDefault(); - event.stopPropagation(); - }, - dangerouslySetInnerHTML: { - __html: "STRONG" - } -}; -React.DOM.div(htmlAttr); -React.DOM.span(htmlAttr); -React.DOM.input(htmlAttr); - -// -// React.PropTypes -// -------------------------------------------------------------------------- - -var PropTypesSpecification: React.ComponentSpec = { - propTypes: { - optionalArray: React.PropTypes.array, - optionalBool: React.PropTypes.bool, - optionalFunc: React.PropTypes.func, - optionalNumber: React.PropTypes.number, - optionalObject: React.PropTypes.object, - optionalString: React.PropTypes.string, - optionalNode: React.PropTypes.node, - optionalElement: React.PropTypes.element, - optionalMessage: React.PropTypes.instanceOf(Date), - optionalEnum: React.PropTypes.oneOf(["News", "Photos"]), - optionalUnion: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.instanceOf(Date) - ]), - optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), - optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), - optionalObjectWithShape: React.PropTypes.shape({ - color: React.PropTypes.string, - fontSize: React.PropTypes.number - }), - requiredFunc: React.PropTypes.func.isRequired, - requiredAny: React.PropTypes.any.isRequired, - customProp: function(props: any, propName: string, componentName: string) { - if (!/matchme/.test(props[propName])) { - return new Error("Validation failed!"); - } - return null; - } - }, - render: (): React.ReactElement => { - return null; - } -}; - -// -// ContextTypes -// -------------------------------------------------------------------------- - -var ContextTypesSpecification: React.ComponentSpec = { - contextTypes: { - optionalArray: React.PropTypes.array, - optionalBool: React.PropTypes.bool, - optionalFunc: React.PropTypes.func, - optionalNumber: React.PropTypes.number, - optionalObject: React.PropTypes.object, - optionalString: React.PropTypes.string, - optionalNode: React.PropTypes.node, - optionalElement: React.PropTypes.element, - optionalMessage: React.PropTypes.instanceOf(Date), - optionalEnum: React.PropTypes.oneOf(["News", "Photos"]), - optionalUnion: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.instanceOf(Date) - ]), - optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), - optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), - optionalObjectWithShape: React.PropTypes.shape({ - color: React.PropTypes.string, - fontSize: React.PropTypes.number - }), - requiredFunc: React.PropTypes.func.isRequired, - requiredAny: React.PropTypes.any.isRequired, - customProp: function(props: any, propName: string, componentName: string) { - if (!/matchme/.test(props[propName])) { - return new Error("Validation failed!"); - } - return null; - } - }, - render: (): React.ReactElement => { - return null; - } -}; - -// -// React.Children -// -------------------------------------------------------------------------- - -var childMap: { [key: string]: number } = - React.Children.map(children, (child) => { return 42; }); -React.Children.forEach(children, (child) => {}); -var nChildren: number = React.Children.count(children); -var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]); - -// -// Example from http://facebook.github.io/react/ -// -------------------------------------------------------------------------- - -interface TimerState { - secondsElapsed: number; -} -class Timer extends React.Component, TimerState> { - static state = { - secondsElapsed: 0 - } - private _interval: number; - tick() { - this.setState((prevState, props) => ({ - secondsElapsed: prevState.secondsElapsed + 1 - })); - } - componentDidMount() { - this._interval = setInterval(() => this.tick(), 1000); - } - componentWillUnmount() { - clearInterval(this._interval); - } - render() { - return React.DOM.div( - null, - "Seconds Elapsed: ", - this.state.secondsElapsed - ); - } -} -React.render(React.createElement(Timer), container); - -// -// React.addons -// -------------------------------------------------------------------------- - -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.createFactory(React.addons.TransitionGroup)({ component: "div" }); -React.createFactory(React.addons.CSSTransitionGroup)({ - component: React.createClass({ - render: (): React.ReactElement => null - }), - childFactory: (c) => c, - transitionName: "transition", - transitionAppear: false, - transitionEnter: true, - transitionLeave: true -}); - -// -// React.addons.TestUtils -// -------------------------------------------------------------------------- - -var node: Element; -React.addons.TestUtils.Simulate.click(node); -React.addons.TestUtils.Simulate.change(node); -React.addons.TestUtils.Simulate.keyDown(node, { key: "Enter" }); - diff --git a/react/legacy/react-0.12-tests.ts b/react/legacy/react-0.12-tests.ts new file mode 100644 index 000000000..27eae4c64 --- /dev/null +++ b/react/legacy/react-0.12-tests.ts @@ -0,0 +1,235 @@ +/// +import React = require("react"); + +interface Props { + hello: string; + world?: string; + foo: number; + bar: boolean; +} + +interface State { + inputValue?: string; + seconds?: number; +} + +interface MyComponent extends React.CompositeComponent { + reset(): void; +} + +var props: Props = { + key: 42, + ref: "myComponent42", + hello: "world", + foo: 42, + bar: true +}; + +var container: Element; +var INPUT_REF: string = "input"; + +// +// Top-Level API +// -------------------------------------------------------------------------- + +var reactClass: React.ComponentClass = React.createClass({ + getDefaultProps: () => { + return { + 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 = + React.createElement(reactClass, props); + +var reactFactory: React.ComponentFactory = + React.createFactory(reactClass); + +var component: React.Component = + React.render(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 = reactFactory(elementProps); + +// +// React Components +// -------------------------------------------------------------------------- + +var displayName: string = reactClass.displayName; +var defaultProps: Props = reactClass.getDefaultProps(); +var propTypes: React.ValidationMap = reactClass.propTypes; + +// +// Component API +// -------------------------------------------------------------------------- + +var htmlElement: Element = component.getDOMNode(); +var divElement: HTMLDivElement = component.getDOMNode(); +var isMounted: boolean = component.isMounted(); +component.setProps(elementProps); +component.replaceProps(props); + +var compComponent: React.CompositeComponent = + >component; +var initialState: State = compComponent.state; +compComponent.setState({ inputValue: "!!!" }); +compComponent.replaceState({ inputValue: "???", seconds: 60 }); +compComponent.forceUpdate(); + +var inputRef: React.HTMLComponent = + compComponent.refs[INPUT_REF]; +var value: string = inputRef.getDOMNode().value; + +var myComponent = compComponent; +myComponent.reset(); + +// +// Attributes +// -------------------------------------------------------------------------- + +var children = ["Hello world", [null], React.DOM.span(null)]; +var divStyle = { // CSSProperties + flex: "1 1 main-size", + backgroundImage: "url('hello.png')" +}; +var htmlAttr: React.HTMLAttributes = { + key: 36, + ref: "htmlComponent", + children: children, + className: "test-attr", + style: divStyle, + onClick: (event: React.MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + }, + dangerouslySetInnerHTML: { + __html: "STRONG" + } +}; +React.DOM.div(htmlAttr); +React.DOM.span(htmlAttr); +React.DOM.input(htmlAttr); + +// +// React.PropTypes +// -------------------------------------------------------------------------- + +var PropTypesSpecification: React.ComponentSpec = { + propTypes: { + optionalArray: React.PropTypes.array, + optionalBool: React.PropTypes.bool, + optionalFunc: React.PropTypes.func, + optionalNumber: React.PropTypes.number, + optionalObject: React.PropTypes.object, + optionalString: React.PropTypes.string, + optionalNode: React.PropTypes.node, + optionalElement: React.PropTypes.element, + optionalMessage: React.PropTypes.instanceOf(Date), + optionalEnum: React.PropTypes.oneOf(["News", "Photos"]), + optionalUnion: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.number, + React.PropTypes.instanceOf(Date) + ]), + optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), + optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), + optionalObjectWithShape: React.PropTypes.shape({ + color: React.PropTypes.string, + fontSize: React.PropTypes.number + }), + requiredFunc: React.PropTypes.func.isRequired, + requiredAny: React.PropTypes.any.isRequired, + customProp: function(props: any, propName: string, componentName: string) { + if (!/matchme/.test(props[propName])) { + return new Error("Validation failed!"); + } + return null; + } + }, + render: (): React.ReactHTMLElement => { + return null; + } +}; + +// +// React.Children +// -------------------------------------------------------------------------- + +var childMap: { [key: string]: number } = + React.Children.map(children, (child) => { return 42; }); +React.Children.forEach(children, (child) => {}); +var nChildren: number = React.Children.count(children); +var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]); + +// +// Example from http://facebook.github.io/react/ +// -------------------------------------------------------------------------- + +interface TimerState { + secondsElapsed: number; +} +interface Timer extends React.CompositeComponent<{}, TimerState> { +} +var Timer = React.createClass({ + displayName: "Timer", + getInitialState: () => { + return { secondsElapsed: 0 }; + }, + tick: () => { + var me = this; + me.setState({ + secondsElapsed: me.state.secondsElapsed + 1 + }); + }, + componentDidMount: () => { + this.interval = setInterval(this.tick, 1000); + }, + componentWillUnmount: () => { + clearInterval(this.interval); + }, + render: () => { + var me = this; + return React.DOM.div( + null, + "Seconds Elapsed: ", + me.state.secondsElapsed + ); + } +}); +var mountNode: Element; +React.render(React.createElement(Timer, null), mountNode); + diff --git a/react/future/react-0.13.0.d.ts b/react/legacy/react-0.12.d.ts similarity index 61% rename from react/future/react-0.13.0.d.ts rename to react/legacy/react-0.12.d.ts index b91847adf..f2786cbc8 100644 --- a/react/future/react-0.13.0.d.ts +++ b/react/legacy/react-0.12.d.ts @@ -1,56 +1,27 @@ -// Type definitions for React v0.13.0 RC2 (external module) +// Type definitions for React 0.12.1 // Project: http://facebook.github.io/react/ -// Definitions by: Asana , AssureSign +// Definitions by: Asana // Definitions: https://github.com/borisyankov/DefinitelyTyped -declare module "react" { +declare module React { // - // React Elements + // React Elements // ---------------------------------------------------------------------- type ReactType = ComponentClass | string; interface ReactElement

{ - type: string | ComponentClass

; + type: ComponentClass

| string; props: P; - key: string | number; - ref: string | ((component: Component) => any); + key: number | string; + ref: string; } - interface ClassicElement

extends ReactElement

{ - type: string | ClassicComponentClass

; - ref: string | ((component: ClassicComponent) => any); - } - - interface DOMElement

extends ClassicElement

{ - type: string; - ref: string | ((component: DOMComponent

) => any); - } - - type HTMLElement = DOMElement; - type SVGElement = DOMElement; + interface ReactHTMLElement extends ReactElement {} + interface ReactSVGElement extends ReactElement {} // - // Factories - // ---------------------------------------------------------------------- - - interface Factory

{ - (props?: P, ...children: ReactNode[]): ReactElement

; - } - - interface ClassicFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ClassicElement

; - } - - interface DOMFactory

extends ClassicFactory

{ - (props?: P, ...children: ReactNode[]): DOMElement

; - } - - type HTMLFactory = DOMFactory; - type SVGFactory = DOMFactory; - - // - // React Nodes + // React Nodes // http://facebook.github.io/react/docs/glossary.html // ---------------------------------------------------------------------- @@ -58,157 +29,106 @@ declare module "react" { type ReactChild = ReactElement | ReactText; // Should be Array but type aliases cannot be recursive - type ReactFragment = {} | Array; + type ReactFragment = Array; type ReactNode = ReactChild | ReactFragment | boolean; // - // Top Level API + // React Components // ---------------------------------------------------------------------- - function createClass

(spec: ComponentSpec): ClassicComponentClass

; + interface ComponentStatics

{ + displayName?: string; + getDefaultProps?(): P; + propTypes?: ValidationMap

; + } - function createFactory

(type: string): DOMFactory

; - function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; - function createFactory

(type: ComponentClass

): Factory

; + interface ComponentClass

extends ComponentStatics

{ + // Deprecated in 0.12. See http://fb.me/react-legacyfactory + // new(props: P): ReactElement

; + // (props: P): ReactElement

; + } - function createElement

( - type: string, - props?: P, - ...children: ReactNode[]): DOMElement

; - function createElement

( - type: ClassicComponentClass

| string, - props?: P, - ...children: ReactNode[]): ClassicElement

; - function createElement

( - type: ComponentClass

, - props?: P, - ...children: ReactNode[]): ReactElement

; + // + // ReactElement Factories + // ---------------------------------------------------------------------- - function cloneElement

( - element: DOMElement

, - props?: P, - ...children: ReactNode[]): DOMElement

; - function cloneElement

( - element: ClassicElement

, - props?: P, - ...children: ReactNode[]): ClassicElement

; - function cloneElement

( - element: ReactElement

, - props?: P, - ...children: ReactNode[]): ReactElement

; + interface ComponentFactory

{ + (props?: P, ...children: ReactNode[]): ReactElement

; + } + + interface HTMLFactory extends ComponentFactory {} + interface SVGFactory extends ComponentFactory {} - function render

( - element: DOMElement

, - container: Element, - callback?: () => any): DOMComponent

; - function render( - element: ClassicElement

, - container: Element, - callback?: () => any): ClassicComponent; - function render( - element: ReactElement

, - container: Element, - callback?: () => any): Component; + // + // Top-Level API + // ---------------------------------------------------------------------- - function unmountComponentAtNode(container: Element): boolean; - function renderToString(element: ReactElement): string; - function renderToStaticMarkup(element: ReactElement): string; - function isValidElement(object: {}): boolean; - function initializeTouchEvents(shouldUseTouch: boolean): void; - - function findDOMNode( - componentOrElement: Component | Element): TElement; - function findDOMNode( - componentOrElement: Component | Element): Element; - - var DOM: ReactDOM; - var PropTypes: ReactPropTypes; - var Children: ReactChildren; + interface TopLevelAPI { + createClass

(spec: ComponentSpec): ComponentClass

; + createElement

(type: ComponentClass

| string, props: P, ...children: ReactNode[]): ReactElement

; + createFactory

(componentClass: ComponentClass

): ComponentFactory

; + render

(element: ReactElement

, container: Element, callback?: () => any): Component

; + unmountComponentAtNode(container: Element): boolean; + renderToString(element: ReactElement): string; + renderToStaticMarkup(element: ReactElement): string; + isValidElement(object: {}): boolean; + initializeTouchEvents(shouldUseTouch: boolean): void; + } // // Component API // ---------------------------------------------------------------------- - // Base component for plain JS classes - class Component implements ComponentLifecycle { - 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; - state: S; - context: any; - refs: { - [key: string]: Component - }; - } - - interface ClassicComponent extends Component { - replaceState(nextState: S, callback?: () => any): void; + interface Component

{ + // Use this overload to cast the returned element to a more specific type. + // Eg: var name = this.refs['name'].getDOMNode().value; getDOMNode(): TElement; getDOMNode(): Element; isMounted(): boolean; - getInitialState?(): S; + + props: P; setProps(nextProps: P, callback?: () => any): void; replaceProps(nextProps: P, callback?: () => any): void; } - interface DOMComponent

extends ClassicComponent { + interface DOMComponent

extends Component

{ tagName: string; } - type HTMLComponent = DOMComponent; - type SVGComponent = DOMComponent; - - interface ChildContextProvider { - getChildContext(): CC; - } - - // - // Class Interfaces - // ---------------------------------------------------------------------- - - interface ComponentClass

{ - new(props?: P, context?: any): Component; - propTypes?: ValidationMap

; - contextTypes?: ValidationMap; - childContextTypes?: ValidationMap; - defaultProps?: P; - } - - interface ClassicComponentClass

extends ComponentClass

{ - new(props?: P, context?: any): ClassicComponent; - getDefaultProps?(): P; - displayName?: string; + interface HTMLComponent extends DOMComponent {} + interface SVGComponent extends DOMComponent {} + + interface CompositeComponent extends Component

, ComponentSpec { + state: S; + setState(nextState: S, callback?: () => any): void; + replaceState(nextState: S, callback?: () => any): void; + forceUpdate(callback?: () => any): void; + refs: { + [key: string]: Component + }; } // // Component Specs and Lifecycle // ---------------------------------------------------------------------- - interface ComponentLifecycle { - componentWillMount?(): void; - componentDidMount?(): void; - componentWillReceiveProps?(nextProps: P, nextContext: any): void; - shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean; - componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void; - componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void; - componentWillUnmount?(): void; - } - - interface Mixin extends ComponentLifecycle { + interface Mixin extends ComponentStatics

{ mixins?: Mixin; statics?: { [key: string]: any; }; - displayName?: string; - propTypes?: ValidationMap; - contextTypes?: ValidationMap; - childContextTypes?: ValidationMap - - getDefaultProps?(): P; + // 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 extends Mixin { @@ -318,16 +238,15 @@ declare module "react" { interface WheelEventHandler extends EventHandler {} // - // Props / DOM Attributes + // Attributes // ---------------------------------------------------------------------- - interface Props { + export interface ReactAttributes { children?: ReactNode; - key?: string | number; - ref?: string | ((component: T) => any); - } + key?: number | string; + ref?: string; - interface DOMAttributes extends Props> { + // Event Attributes onCopy?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; @@ -388,9 +307,7 @@ declare module "react" { strokeOpacity?: number; } - interface HTMLAttributes extends DOMAttributes { - ref?: string | ((component: HTMLComponent) => void); - + interface HTMLAttributes extends ReactAttributes { accept?: string; acceptCharset?: string; accessKey?: string; @@ -498,11 +415,9 @@ declare module "react" { itemType?: string; } - interface SVGAttributes extends DOMAttributes { - ref?: string | ((component: SVGComponent) => void); - + interface SVGAttributes extends ReactAttributes { cx?: SVGLength | SVGAnimatedLength; - cy?: any; + cy?: any; d?: string; dx?: SVGLength | SVGAnimatedLength; dy?: SVGLength | SVGAnimatedLength; @@ -547,7 +462,7 @@ declare module "react" { } // - // React.DOM + // React.DOM // ---------------------------------------------------------------------- interface ReactDOM { @@ -730,6 +645,254 @@ declare module "react" { only(children: ReactNode): ReactChild; } + // + // React.addons + // ---------------------------------------------------------------------- + + interface ClassSet { + [key: string]: boolean; + } + + // + // React.addons (Transitions) + // ---------------------------------------------------------------------- + + interface TransitionGroupProps { + component?: ReactType; + childFactory?: (child: ReactElement) => ReactElement; + } + + interface CSSTransitionGroupProps extends TransitionGroupProps { + transitionName: string; + transitionAppear?: boolean; + transitionEnter?: boolean; + transitionLeave?: boolean; + } + + interface CSSTransitionGroup extends ComponentClass {} + interface TransitionGroup extends ComponentClass {} + + // + // React.addons (Mixins) + // ---------------------------------------------------------------------- + + interface ReactLink { + value: T; + requestChange(newValue: T): void; + } + + interface LinkedStateMixin extends Mixin { + linkState(key: string): ReactLink; + } + + interface PureRenderMixin extends Mixin { + } + + // + // Reat.addons.update + // ---------------------------------------------------------------------- + + interface UpdateSpec { + $set: any; + $merge: {}; + $apply(value: any): any; + // [key: string]: UpdateSpec; + } + + interface UpdateArraySpec extends UpdateSpec { + $push?: any[]; + $unshift?: any[]; + $splice?: any[][]; + } + + // + // React.addons.Perf + // ---------------------------------------------------------------------- + + interface ComponentPerfContext { + current: string; + owner: string; + } + + interface NumericPerfContext { + [key: string]: number; + } + + interface Measurements { + exclusive: NumericPerfContext; + inclusive: NumericPerfContext; + render: NumericPerfContext; + counts: NumericPerfContext; + writes: NumericPerfContext; + displayNames: { + [key: string]: ComponentPerfContext; + }; + totalTime: number; + } + + interface ReactPerf { + start(): void; + stop(): void; + printInclusive(measurements: Measurements[]): void; + printExclusive(measurements: Measurements[]): void; + printWasted(measurements: Measurements[]): void; + printDOM(measurements: Measurements[]): void; + getLastMeasurements(): Measurements[]; + } + + // + // React.addons.TestUtils + // ---------------------------------------------------------------------- + + interface MockedComponentClass { + new(): any; + } + + interface ReactTestUtils { + Simulate: Simulate; + + renderIntoDocument

(element: ReactElement

): Component

; + renderIntoDocument>(element: ReactElement): C; + + mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils; + + isElementOfType(element: ReactElement, type: ReactType): boolean; + isDOMComponent(instance: Component): boolean; + isCompositeComponent(instance: Component): boolean; + isCompositeComponentWithType(instance: Component, type: ComponentClass): boolean; + isTextComponent(instance: Component): boolean; + + findAllInRenderedTree(tree: Component, fn: (i: Component) => boolean): Component; + + scryRenderedDOMComponentsWithClass(tree: Component, className: string): DOMComponent[]; + findRenderedDOMComponentWithClass(tree: Component, className: string): DOMComponent; + + scryRenderedDOMComponentsWithTag(tree: Component, tagName: string): DOMComponent[]; + findRenderedDOMComponentWithTag(tree: Component, tagName: string): DOMComponent; + + scryRenderedComponentsWithType( + tree: Component, type: ComponentClass

): CompositeComponent[]; + scryRenderedComponentsWithType>( + tree: Component, type: ComponentClass): C[]; + + findRenderedComponentWithType( + tree: Component, type: ComponentClass

): CompositeComponent; + findRenderedComponentWithType>( + tree: Component, type: ComponentClass): C; + } + + interface SyntheticEventData { + altKey?: boolean; + button?: number; + buttons?: number; + clientX?: number; + clientY?: number; + changedTouches?: TouchList; + charCode?: boolean; + clipboardData?: DataTransfer; + ctrlKey?: boolean; + deltaMode?: number; + deltaX?: number; + deltaY?: number; + deltaZ?: number; + detail?: number; + getModifierState?(key: string): boolean; + key?: string; + keyCode?: number; + locale?: string; + location?: number; + metaKey?: boolean; + pageX?: number; + pageY?: number; + relatedTarget?: EventTarget; + repeat?: boolean; + screenX?: number; + screenY?: number; + shiftKey?: boolean; + targetTouches?: TouchList; + touches?: TouchList; + view?: AbstractView; + which?: number; + } + + interface EventSimulator { + (element: Element, eventData?: SyntheticEventData): void; + (descriptor: Component, eventData?: SyntheticEventData): void; + } + + 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; + } + + // + // react Exports + // ---------------------------------------------------------------------- + + interface Exports extends TopLevelAPI { + DOM: ReactDOM; + PropTypes: ReactPropTypes; + Children: ReactChildren; + } + + // + // react/addons Exports + // ---------------------------------------------------------------------- + + interface AddonsExports extends Exports { + addons: { + CSSTransitionGroup: CSSTransitionGroup; + LinkedStateMixin: LinkedStateMixin; + PureRenderMixin: PureRenderMixin; + TransitionGroup: TransitionGroup; + + batchedUpdates(callback: (a: A, b: B) => any, a: A, b: B): void; + batchedUpdates(callback: (a: A) => any, a: A): void; + batchedUpdates(callback: () => any): void; + + classSet(cx: ClassSet): string; + cloneWithProps

(element: ReactElement

, props: P): ReactElement

; + + update(value: any[], spec: UpdateArraySpec): any[]; + update(value: {}, spec: UpdateSpec): any; + + // Development tools + Perf: ReactPerf; + TestUtils: ReactTestUtils; + }; + } + // // Browser Interfaces // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts @@ -759,3 +922,13 @@ declare module "react" { } } +declare module "react" { + var exports: React.Exports; + export = exports; +} + +declare module "react/addons" { + var exports: React.AddonsExports; + export = exports; +} + diff --git a/react/legacy/react-addons-0.12-tests.ts b/react/legacy/react-addons-0.12-tests.ts new file mode 100644 index 000000000..ca05c00ca --- /dev/null +++ b/react/legacy/react-addons-0.12-tests.ts @@ -0,0 +1,68 @@ +/// +import React = require("react/addons"); + +var isImportant: boolean; +var isRead: boolean; +var classSet: React.ClassSet = { + "message": true, + "message-important": isImportant, + "message-read": isRead +}; +var cx = React.addons.classSet; +var classes: string = cx(classSet); + +// +// React.addons (Transitions) +// -------------------------------------------------------------------------- + +React.createFactory(React.addons.TransitionGroup)({ component: "div" }); +React.createFactory(React.addons.CSSTransitionGroup)({ + component: React.createClass({ + render: (): React.ReactElement => null + }), + childFactory: (c) => c, + transitionName: "transition", + transitionAppear: false, + transitionEnter: true, + transitionLeave: true +}); + +// +// React.addons.TestUtils +// -------------------------------------------------------------------------- + +var that: React.CompositeComponent; +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"}); + +interface GreetingProps { + name: string; +} +interface GreetingState { + morning: boolean; +} +interface Greeting extends React.CompositeComponent { +} +var Greeting = React.createClass({ + displayName: "Greeting", + getInitialState: function() { + return {morning: true}; + }, + render: function() { + var me = 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); +greeting.setState({ + morning: false +}); diff --git a/react/future/react-addons-global-0.13.0.d.ts b/react/react-addons-global.d.ts similarity index 99% rename from react/future/react-addons-global-0.13.0.d.ts rename to react/react-addons-global.d.ts index 343590f98..c50ecdc21 100644 --- a/react/future/react-addons-global-0.13.0.d.ts +++ b/react/react-addons-global.d.ts @@ -2,7 +2,7 @@ // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// +/// declare module React { // diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts index 7ce0fa23f..9bd3d5505 100644 --- a/react/react-addons-tests.ts +++ b/react/react-addons-tests.ts @@ -1,15 +1,366 @@ -/// +/// import React = require("react/addons"); -var isImportant: boolean; -var isRead: boolean; -var classSet: React.ClassSet = { - "message": true, - "message-important": isImportant, - "message-read": isRead +interface Props extends React.Props { + hello: string; + world?: string; + foo: number; + bar: boolean; +} + +interface State { + inputValue?: string; + seconds?: number; +} + +interface Context { + someValue?: string; +} + +interface ChildContext { + someOtherValue: string; +} + +interface MyComponent extends React.Component { + reset(): void; +} + +var props: Props = { + key: 42, + ref: "myComponent42", + hello: "world", + foo: 42, + bar: true }; + +var container: Element; + +// +// Top-Level API +// -------------------------------------------------------------------------- + +var ClassicComponent: React.ClassicComponentClass = + React.createClass({ + getDefaultProps: () => { + return { + hello: undefined, + world: "peace", + foo: undefined, + bar: undefined + }; + }, + getInitialState: () => { + return { + inputValue: this.context.someValue, + seconds: this.props.foo + }; + }, + reset: () => { + this.replaceState(this.getInitialState()); + }, + render: () => { + return React.DOM.div(null, + React.DOM.input({ + ref: input => this._input = input, + value: this.state.inputValue + })); + } + }); + +class ModernComponent extends React.Component + implements React.ChildContextProvider { + + static propTypes: React.ValidationMap = { + foo: React.PropTypes.number + } + + static contextTypes: React.ValidationMap = { + someValue: React.PropTypes.string + } + + static childContextTypes: React.ValidationMap = { + someOtherValue: React.PropTypes.string + } + + getChildContext() { + return { + someOtherValue: 'foo' + } + } + + state = { + inputValue: this.context.someValue, + seconds: this.props.foo + } + + reset() { + this.setState({ + inputValue: this.context.someValue, + seconds: this.props.foo + }); + } + + private _input: React.HTMLComponent; + + render() { + return React.DOM.div(null, + React.DOM.input({ + ref: input => this._input = input, + value: this.state.inputValue + })); + } +} + +// React.createFactory +var factory: React.Factory = + React.createFactory(ModernComponent); +var factoryElement: React.ReactElement = + factory(props); + +var classicFactory: React.ClassicFactory = + React.createFactory(ClassicComponent); +var classicFactoryElement: React.ClassicElement = + classicFactory(props); + +var domFactory: React.DOMFactory = + React.createFactory("foo"); +var domFactoryElement: React.DOMElement = + domFactory(); + +// React.createElement +var element: React.ReactElement = + React.createElement(ModernComponent, props); +var classicElement: React.ClassicElement = + React.createElement(ClassicComponent, props); +var domElement: React.HTMLElement = + React.createElement("div"); + +// React.cloneElement +var clonedElement: React.ReactElement = + React.cloneElement(element, props); +var clonedClassicElement: React.ClassicElement = + React.cloneElement(classicElement, props); +var clonedDOMElement: React.HTMLElement = + React.cloneElement(domElement); + +// React.render +var component: React.Component = + React.render(element, container); +var classicComponent: React.ClassicComponent = + React.render(classicElement, container); +var domComponent: React.DOMComponent = + React.render(domElement, container); + +// Other Top-Level API +var unmounted: boolean = React.unmountComponentAtNode(container); +var str: string = React.renderToString(element); +var markup: string = React.renderToStaticMarkup(element); +var notValid: boolean = React.isValidElement(props); // false +var isValid = React.isValidElement(element); // true +React.initializeTouchEvents(true); +var domNode: Element = React.findDOMNode(component); +domNode = React.findDOMNode(domNode); + +// +// React Elements +// -------------------------------------------------------------------------- + +var type = element.type; +var elementProps: Props = element.props; +var key = element.key; + +// +// React Components +// -------------------------------------------------------------------------- + +var displayName: string = ClassicComponent.displayName; +var defaultProps: Props = ClassicComponent.getDefaultProps(); +var propTypes: React.ValidationMap = ClassicComponent.propTypes; + +// +// Component API +// -------------------------------------------------------------------------- + +// modern +var componentState: State = component.state; +component.setState({ inputValue: "!!!" }); +component.forceUpdate(); + +// classic +var htmlElement: Element = classicComponent.getDOMNode(); +var divElement: HTMLDivElement = classicComponent.getDOMNode(); +var isMounted: boolean = classicComponent.isMounted(); +classicComponent.setProps(elementProps); +classicComponent.replaceProps(props); +classicComponent.replaceState({ inputValue: "???", seconds: 60 }); + +var myComponent = component; +myComponent.reset(); + +// +// Attributes +// -------------------------------------------------------------------------- + +var children = ["Hello world", [null], React.DOM.span(null)]; +var divStyle = { // CSSProperties + flex: "1 1 main-size", + backgroundImage: "url('hello.png')" +}; +var htmlAttr: React.HTMLAttributes = { + key: 36, + ref: "htmlComponent", + children: children, + className: "test-attr", + style: divStyle, + onClick: (event: React.MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + }, + dangerouslySetInnerHTML: { + __html: "STRONG" + } +}; +React.DOM.div(htmlAttr); +React.DOM.span(htmlAttr); +React.DOM.input(htmlAttr); + +// +// React.PropTypes +// -------------------------------------------------------------------------- + +var PropTypesSpecification: React.ComponentSpec = { + propTypes: { + optionalArray: React.PropTypes.array, + optionalBool: React.PropTypes.bool, + optionalFunc: React.PropTypes.func, + optionalNumber: React.PropTypes.number, + optionalObject: React.PropTypes.object, + optionalString: React.PropTypes.string, + optionalNode: React.PropTypes.node, + optionalElement: React.PropTypes.element, + optionalMessage: React.PropTypes.instanceOf(Date), + optionalEnum: React.PropTypes.oneOf(["News", "Photos"]), + optionalUnion: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.number, + React.PropTypes.instanceOf(Date) + ]), + optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), + optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), + optionalObjectWithShape: React.PropTypes.shape({ + color: React.PropTypes.string, + fontSize: React.PropTypes.number + }), + requiredFunc: React.PropTypes.func.isRequired, + requiredAny: React.PropTypes.any.isRequired, + customProp: function(props: any, propName: string, componentName: string) { + if (!/matchme/.test(props[propName])) { + return new Error("Validation failed!"); + } + return null; + } + }, + render: (): React.ReactElement => { + return null; + } +}; + +// +// ContextTypes +// -------------------------------------------------------------------------- + +var ContextTypesSpecification: React.ComponentSpec = { + contextTypes: { + optionalArray: React.PropTypes.array, + optionalBool: React.PropTypes.bool, + optionalFunc: React.PropTypes.func, + optionalNumber: React.PropTypes.number, + optionalObject: React.PropTypes.object, + optionalString: React.PropTypes.string, + optionalNode: React.PropTypes.node, + optionalElement: React.PropTypes.element, + optionalMessage: React.PropTypes.instanceOf(Date), + optionalEnum: React.PropTypes.oneOf(["News", "Photos"]), + optionalUnion: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.number, + React.PropTypes.instanceOf(Date) + ]), + optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), + optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), + optionalObjectWithShape: React.PropTypes.shape({ + color: React.PropTypes.string, + fontSize: React.PropTypes.number + }), + requiredFunc: React.PropTypes.func.isRequired, + requiredAny: React.PropTypes.any.isRequired, + customProp: function(props: any, propName: string, componentName: string) { + if (!/matchme/.test(props[propName])) { + return new Error("Validation failed!"); + } + return null; + } + }, + render: (): React.ReactElement => { + return null; + } +}; + +// +// React.Children +// -------------------------------------------------------------------------- + +var childMap: { [key: string]: number } = + React.Children.map(children, (child) => { return 42; }); +React.Children.forEach(children, (child) => {}); +var nChildren: number = React.Children.count(children); +var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]); + +// +// Example from http://facebook.github.io/react/ +// -------------------------------------------------------------------------- + +interface TimerState { + secondsElapsed: number; +} +class Timer extends React.Component, TimerState> { + static state = { + secondsElapsed: 0 + } + private _interval: number; + tick() { + this.setState((prevState, props) => ({ + secondsElapsed: prevState.secondsElapsed + 1 + })); + } + componentDidMount() { + this._interval = setInterval(() => this.tick(), 1000); + } + componentWillUnmount() { + clearInterval(this._interval); + } + render() { + return React.DOM.div( + null, + "Seconds Elapsed: ", + this.state.secondsElapsed + ); + } +} +React.render(React.createElement(Timer), container); + +// +// React.addons +// -------------------------------------------------------------------------- + var cx = React.addons.classSet; -var classes: string = cx(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) @@ -31,38 +382,8 @@ React.createFactory(React.addons.CSSTransitionGroup)({ // React.addons.TestUtils // -------------------------------------------------------------------------- -var that: React.CompositeComponent; -var node = that.refs["input"].getDOMNode(); +var node: Element; React.addons.TestUtils.Simulate.click(node); React.addons.TestUtils.Simulate.change(node); -React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"}); +React.addons.TestUtils.Simulate.keyDown(node, { key: "Enter" }); -interface GreetingProps { - name: string; -} -interface GreetingState { - morning: boolean; -} -interface Greeting extends React.CompositeComponent { -} -var Greeting = React.createClass({ - displayName: "Greeting", - getInitialState: function() { - return {morning: true}; - }, - render: function() { - var me = 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); -greeting.setState({ - morning: false -}); diff --git a/react/future/react-addons-0.13.0.d.ts b/react/react-addons.d.ts similarity index 100% rename from react/future/react-addons-0.13.0.d.ts rename to react/react-addons.d.ts diff --git a/react/future/react-global-0.13.0.d.ts b/react/react-global.d.ts similarity index 100% rename from react/future/react-global-0.13.0.d.ts rename to react/react-global.d.ts diff --git a/react/react-tests.ts b/react/react-tests.ts index 07c8a89d4..a9b693cab 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -1,7 +1,7 @@ /// import React = require("react"); -interface Props { +interface Props extends React.Props { hello: string; world?: string; foo: number; @@ -13,7 +13,15 @@ interface State { seconds?: number; } -interface MyComponent extends React.CompositeComponent { +interface Context { + someValue?: string; +} + +interface ChildContext { + someOtherValue: string; +} + +interface MyComponent extends React.Component { reset(): void; } @@ -26,95 +34,167 @@ var props: Props = { }; var container: Element; -var INPUT_REF: string = "input"; // // Top-Level API // -------------------------------------------------------------------------- -var reactClass: React.ComponentClass = React.createClass({ - getDefaultProps: () => { - return { - hello: undefined, - world: "peace", - foo: undefined, - bar: undefined - }; - }, - getInitialState: () => { +var ClassicComponent: React.ClassicComponentClass = + React.createClass({ + getDefaultProps: () => { + return { + hello: undefined, + world: "peace", + foo: undefined, + bar: undefined + }; + }, + getInitialState: () => { + return { + inputValue: this.context.someValue, + seconds: this.props.foo + }; + }, + reset: () => { + this.replaceState(this.getInitialState()); + }, + render: () => { + return React.DOM.div(null, + React.DOM.input({ + ref: input => this._input = input, + value: this.state.inputValue + })); + } + }); + +class ModernComponent extends React.Component + implements React.ChildContextProvider { + + static propTypes: React.ValidationMap = { + foo: React.PropTypes.number + } + + static contextTypes: React.ValidationMap = { + someValue: React.PropTypes.string + } + + static childContextTypes: React.ValidationMap = { + someOtherValue: React.PropTypes.string + } + + getChildContext() { return { - inputValue: "React.js", - seconds: 0 - }; - }, - reset: () => { - this.replaceState(this.getInitialState()); - }, - render: () => { + someOtherValue: 'foo' + } + } + + state = { + inputValue: this.context.someValue, + seconds: this.props.foo + } + + reset() { + this.setState({ + inputValue: this.context.someValue, + seconds: this.props.foo + }); + } + + private _input: React.HTMLComponent; + + render() { return React.DOM.div(null, React.DOM.input({ - ref: INPUT_REF, + ref: input => this._input = input, value: this.state.inputValue })); } -}); +} -var reactElement: React.ReactElement = - React.createElement(reactClass, props); +// React.createFactory +var factory: React.Factory = + React.createFactory(ModernComponent); +var factoryElement: React.ReactElement = + factory(props); -var reactFactory: React.ComponentFactory = - React.createFactory(reactClass); +var classicFactory: React.ClassicFactory = + React.createFactory(ClassicComponent); +var classicFactoryElement: React.ClassicElement = + classicFactory(props); -var component: React.Component = - React.render(reactElement, container); +var domFactory: React.DOMFactory = + React.createFactory("foo"); +var domFactoryElement: React.DOMElement = + domFactory(); +// React.createElement +var element: React.ReactElement = + React.createElement(ModernComponent, props); +var classicElement: React.ClassicElement = + React.createElement(ClassicComponent, props); +var domElement: React.HTMLElement = + React.createElement("div"); + +// React.cloneElement +var clonedElement: React.ReactElement = + React.cloneElement(element, props); +var clonedClassicElement: React.ClassicElement = + React.cloneElement(classicElement, props); +var clonedDOMElement: React.HTMLElement = + React.cloneElement(domElement); + +// React.render +var component: React.Component = + React.render(element, container); +var classicComponent: React.ClassicComponent = + React.render(classicElement, container); +var domComponent: React.DOMComponent = + React.render(domElement, container); + +// Other Top-Level API var unmounted: boolean = React.unmountComponentAtNode(container); -var str: string = React.renderToString(reactElement); -var markup: string = React.renderToStaticMarkup(reactElement); +var str: string = React.renderToString(element); +var markup: string = React.renderToStaticMarkup(element); var notValid: boolean = React.isValidElement(props); // false -var isValid = React.isValidElement(reactElement); // true +var isValid = React.isValidElement(element); // true React.initializeTouchEvents(true); +var domNode: Element = React.findDOMNode(component); +domNode = React.findDOMNode(domNode); // // React Elements // -------------------------------------------------------------------------- -var type = reactElement.type; -var elementProps: Props = reactElement.props; -var key = reactElement.key; -var ref: string = reactElement.ref; -var factoryElement: React.ReactElement = reactFactory(elementProps); +var type = element.type; +var elementProps: Props = element.props; +var key = element.key; // // React Components // -------------------------------------------------------------------------- -var displayName: string = reactClass.displayName; -var defaultProps: Props = reactClass.getDefaultProps(); -var propTypes: React.ValidationMap = reactClass.propTypes; +var displayName: string = ClassicComponent.displayName; +var defaultProps: Props = ClassicComponent.getDefaultProps(); +var propTypes: React.ValidationMap = ClassicComponent.propTypes; // // Component API // -------------------------------------------------------------------------- -var htmlElement: Element = component.getDOMNode(); -var divElement: HTMLDivElement = component.getDOMNode(); -var isMounted: boolean = component.isMounted(); -component.setProps(elementProps); -component.replaceProps(props); +// modern +var componentState: State = component.state; +component.setState({ inputValue: "!!!" }); +component.forceUpdate(); -var compComponent: React.CompositeComponent = - >component; -var initialState: State = compComponent.state; -compComponent.setState({ inputValue: "!!!" }); -compComponent.replaceState({ inputValue: "???", seconds: 60 }); -compComponent.forceUpdate(); +// classic +var htmlElement: Element = classicComponent.getDOMNode(); +var divElement: HTMLDivElement = classicComponent.getDOMNode(); +var isMounted: boolean = classicComponent.isMounted(); +classicComponent.setProps(elementProps); +classicComponent.replaceProps(props); +classicComponent.replaceState({ inputValue: "???", seconds: 60 }); -var inputRef: React.HTMLComponent = - compComponent.refs[INPUT_REF]; -var value: string = inputRef.getDOMNode().value; - -var myComponent = compComponent; +var myComponent = component; myComponent.reset(); // @@ -180,7 +260,48 @@ var PropTypesSpecification: React.ComponentSpec = { return null; } }, - render: (): React.ReactHTMLElement => { + render: (): React.ReactElement => { + return null; + } +}; + +// +// ContextTypes +// -------------------------------------------------------------------------- + +var ContextTypesSpecification: React.ComponentSpec = { + contextTypes: { + optionalArray: React.PropTypes.array, + optionalBool: React.PropTypes.bool, + optionalFunc: React.PropTypes.func, + optionalNumber: React.PropTypes.number, + optionalObject: React.PropTypes.object, + optionalString: React.PropTypes.string, + optionalNode: React.PropTypes.node, + optionalElement: React.PropTypes.element, + optionalMessage: React.PropTypes.instanceOf(Date), + optionalEnum: React.PropTypes.oneOf(["News", "Photos"]), + optionalUnion: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.number, + React.PropTypes.instanceOf(Date) + ]), + optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), + optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), + optionalObjectWithShape: React.PropTypes.shape({ + color: React.PropTypes.string, + fontSize: React.PropTypes.number + }), + requiredFunc: React.PropTypes.func.isRequired, + requiredAny: React.PropTypes.any.isRequired, + customProp: function(props: any, propName: string, componentName: string) { + if (!/matchme/.test(props[propName])) { + return new Error("Validation failed!"); + } + return null; + } + }, + render: (): React.ReactElement => { return null; } }; @@ -202,34 +323,30 @@ var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]); interface TimerState { secondsElapsed: number; } -interface Timer extends React.CompositeComponent<{}, TimerState> { -} -var Timer = React.createClass({ - displayName: "Timer", - getInitialState: () => { - return { secondsElapsed: 0 }; - }, - tick: () => { - var me = this; - me.setState({ - secondsElapsed: me.state.secondsElapsed + 1 - }); - }, - componentDidMount: () => { - this.interval = setInterval(this.tick, 1000); - }, - componentWillUnmount: () => { - clearInterval(this.interval); - }, - render: () => { - var me = this; +class Timer extends React.Component<{}, TimerState> { + static state = { + secondsElapsed: 0 + } + private _interval: number; + tick() { + this.setState((prevState, props) => ({ + secondsElapsed: prevState.secondsElapsed + 1 + })); + } + componentDidMount() { + var me = this; + this._interval = setInterval(() => me.tick(), 1000); + } + componentWillUnmount() { + clearInterval(this._interval); + } + render() { return React.DOM.div( null, "Seconds Elapsed: ", - me.state.secondsElapsed + this.state.secondsElapsed ); } -}); -var mountNode: Element; -React.render(React.createElement(Timer, null), mountNode); +} +React.render(React.createElement(Timer), container); diff --git a/react/react.d.ts b/react/react.d.ts index f2786cbc8..114938808 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -1,27 +1,56 @@ -// Type definitions for React 0.12.1 +// Type definitions for React v0.13.0 RC2 (external module) // Project: http://facebook.github.io/react/ -// Definitions by: Asana +// Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped -declare module React { +declare module "react" { // - // React Elements + // React Elements // ---------------------------------------------------------------------- type ReactType = ComponentClass | string; interface ReactElement

{ - type: ComponentClass

| string; + type: string | ComponentClass

; props: P; - key: number | string; - ref: string; + key: string | number; + ref: string | ((component: Component) => any); } - interface ReactHTMLElement extends ReactElement {} - interface ReactSVGElement extends ReactElement {} + interface ClassicElement

extends ReactElement

{ + type: string | ClassicComponentClass

; + ref: string | ((component: ClassicComponent) => any); + } + + interface DOMElement

extends ClassicElement

{ + type: string; + ref: string | ((component: DOMComponent

) => any); + } + + type HTMLElement = DOMElement; + type SVGElement = DOMElement; // - // React Nodes + // Factories + // ---------------------------------------------------------------------- + + interface Factory

{ + (props?: P, ...children: ReactNode[]): ReactElement

; + } + + interface ClassicFactory

extends Factory

{ + (props?: P, ...children: ReactNode[]): ClassicElement

; + } + + interface DOMFactory

extends ClassicFactory

{ + (props?: P, ...children: ReactNode[]): DOMElement

; + } + + type HTMLFactory = DOMFactory; + type SVGFactory = DOMFactory; + + // + // React Nodes // http://facebook.github.io/react/docs/glossary.html // ---------------------------------------------------------------------- @@ -29,106 +58,157 @@ declare module React { type ReactChild = ReactElement | ReactText; // Should be Array but type aliases cannot be recursive - type ReactFragment = Array; + type ReactFragment = {} | Array; type ReactNode = ReactChild | ReactFragment | boolean; // - // React Components + // Top Level API // ---------------------------------------------------------------------- - interface ComponentStatics

{ - displayName?: string; - getDefaultProps?(): P; - propTypes?: ValidationMap

; - } + function createClass(spec: ComponentSpec): ClassicComponentClass

; - interface ComponentClass

extends ComponentStatics

{ - // Deprecated in 0.12. See http://fb.me/react-legacyfactory - // new(props: P): ReactElement

; - // (props: P): ReactElement

; - } + function createFactory

(type: string): DOMFactory

; + function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; + function createFactory

(type: ComponentClass

): Factory

; - // - // ReactElement Factories - // ---------------------------------------------------------------------- + function createElement

( + type: string, + props?: P, + ...children: ReactNode[]): DOMElement

; + function createElement

( + type: ClassicComponentClass

| string, + props?: P, + ...children: ReactNode[]): ClassicElement

; + function createElement

( + type: ComponentClass

, + props?: P, + ...children: ReactNode[]): ReactElement

; - interface ComponentFactory

{ - (props?: P, ...children: ReactNode[]): ReactElement

; - } - - interface HTMLFactory extends ComponentFactory {} - interface SVGFactory extends ComponentFactory {} + function cloneElement

( + element: DOMElement

, + props?: P, + ...children: ReactNode[]): DOMElement

; + function cloneElement

( + element: ClassicElement

, + props?: P, + ...children: ReactNode[]): ClassicElement

; + function cloneElement

( + element: ReactElement

, + props?: P, + ...children: ReactNode[]): ReactElement

; - // - // Top-Level API - // ---------------------------------------------------------------------- + function render

( + element: DOMElement

, + container: Element, + callback?: () => any): DOMComponent

; + function render( + element: ClassicElement

, + container: Element, + callback?: () => any): ClassicComponent; + function render( + element: ReactElement

, + container: Element, + callback?: () => any): Component; - interface TopLevelAPI { - createClass

(spec: ComponentSpec): ComponentClass

; - createElement

(type: ComponentClass

| string, props: P, ...children: ReactNode[]): ReactElement

; - createFactory

(componentClass: ComponentClass

): ComponentFactory

; - render

(element: ReactElement

, container: Element, callback?: () => any): Component

; - unmountComponentAtNode(container: Element): boolean; - renderToString(element: ReactElement): string; - renderToStaticMarkup(element: ReactElement): string; - isValidElement(object: {}): boolean; - initializeTouchEvents(shouldUseTouch: boolean): void; - } + function unmountComponentAtNode(container: Element): boolean; + function renderToString(element: ReactElement): string; + function renderToStaticMarkup(element: ReactElement): string; + function isValidElement(object: {}): boolean; + function initializeTouchEvents(shouldUseTouch: boolean): void; + + function findDOMNode( + componentOrElement: Component | Element): TElement; + function findDOMNode( + componentOrElement: Component | Element): Element; + + var DOM: ReactDOM; + var PropTypes: ReactPropTypes; + var Children: ReactChildren; // // Component API // ---------------------------------------------------------------------- - interface Component

{ - // Use this overload to cast the returned element to a more specific type. - // Eg: var name = this.refs['name'].getDOMNode().value; + // Base component for plain JS classes + class Component implements ComponentLifecycle { + 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; + state: S; + context: any; + refs: { + [key: string]: Component + }; + } + + interface ClassicComponent extends Component { + replaceState(nextState: S, callback?: () => any): void; getDOMNode(): TElement; getDOMNode(): Element; isMounted(): boolean; - - props: P; + getInitialState?(): S; setProps(nextProps: P, callback?: () => any): void; replaceProps(nextProps: P, callback?: () => any): void; } - interface DOMComponent

extends Component

{ + interface DOMComponent

extends ClassicComponent { tagName: string; } - interface HTMLComponent extends DOMComponent {} - interface SVGComponent extends DOMComponent {} - - interface CompositeComponent extends Component

, ComponentSpec { - state: S; - setState(nextState: S, callback?: () => any): void; - replaceState(nextState: S, callback?: () => any): void; - forceUpdate(callback?: () => any): void; - refs: { - [key: string]: Component - }; + type HTMLComponent = DOMComponent; + type SVGComponent = DOMComponent; + + interface ChildContextProvider { + getChildContext(): CC; + } + + // + // Class Interfaces + // ---------------------------------------------------------------------- + + interface ComponentClass

{ + new(props?: P, context?: any): Component; + propTypes?: ValidationMap

; + contextTypes?: ValidationMap; + childContextTypes?: ValidationMap; + defaultProps?: P; + } + + interface ClassicComponentClass

extends ComponentClass

{ + new(props?: P, context?: any): ClassicComponent; + getDefaultProps?(): P; + displayName?: string; } // // Component Specs and Lifecycle // ---------------------------------------------------------------------- - interface Mixin extends ComponentStatics

{ + interface ComponentLifecycle { + componentWillMount?(): void; + componentDidMount?(): void; + componentWillReceiveProps?(nextProps: P, nextContext: any): void; + shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean; + componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void; + componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void; + componentWillUnmount?(): void; + } + + interface Mixin extends ComponentLifecycle { mixins?: Mixin; statics?: { [key: string]: any; }; - // Definition methods - getInitialState?(): S; + displayName?: string; + propTypes?: ValidationMap; + contextTypes?: ValidationMap; + childContextTypes?: ValidationMap - // 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; + getDefaultProps?(): P; + getInitialState?(): S; } interface ComponentSpec extends Mixin { @@ -238,15 +318,16 @@ declare module React { interface WheelEventHandler extends EventHandler {} // - // Attributes + // Props / DOM Attributes // ---------------------------------------------------------------------- - export interface ReactAttributes { + interface Props { children?: ReactNode; - key?: number | string; - ref?: string; + key?: string | number; + ref?: string | ((component: T) => any); + } - // Event Attributes + interface DOMAttributes extends Props> { onCopy?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; @@ -307,7 +388,9 @@ declare module React { strokeOpacity?: number; } - interface HTMLAttributes extends ReactAttributes { + interface HTMLAttributes extends DOMAttributes { + ref?: string | ((component: HTMLComponent) => void); + accept?: string; acceptCharset?: string; accessKey?: string; @@ -415,9 +498,11 @@ declare module React { itemType?: string; } - interface SVGAttributes extends ReactAttributes { + interface SVGAttributes extends DOMAttributes { + ref?: string | ((component: SVGComponent) => void); + cx?: SVGLength | SVGAnimatedLength; - cy?: any; + cy?: any; d?: string; dx?: SVGLength | SVGAnimatedLength; dy?: SVGLength | SVGAnimatedLength; @@ -462,7 +547,7 @@ declare module React { } // - // React.DOM + // React.DOM // ---------------------------------------------------------------------- interface ReactDOM { @@ -645,254 +730,6 @@ declare module React { only(children: ReactNode): ReactChild; } - // - // React.addons - // ---------------------------------------------------------------------- - - interface ClassSet { - [key: string]: boolean; - } - - // - // React.addons (Transitions) - // ---------------------------------------------------------------------- - - interface TransitionGroupProps { - component?: ReactType; - childFactory?: (child: ReactElement) => ReactElement; - } - - interface CSSTransitionGroupProps extends TransitionGroupProps { - transitionName: string; - transitionAppear?: boolean; - transitionEnter?: boolean; - transitionLeave?: boolean; - } - - interface CSSTransitionGroup extends ComponentClass {} - interface TransitionGroup extends ComponentClass {} - - // - // React.addons (Mixins) - // ---------------------------------------------------------------------- - - interface ReactLink { - value: T; - requestChange(newValue: T): void; - } - - interface LinkedStateMixin extends Mixin { - linkState(key: string): ReactLink; - } - - interface PureRenderMixin extends Mixin { - } - - // - // Reat.addons.update - // ---------------------------------------------------------------------- - - interface UpdateSpec { - $set: any; - $merge: {}; - $apply(value: any): any; - // [key: string]: UpdateSpec; - } - - interface UpdateArraySpec extends UpdateSpec { - $push?: any[]; - $unshift?: any[]; - $splice?: any[][]; - } - - // - // React.addons.Perf - // ---------------------------------------------------------------------- - - interface ComponentPerfContext { - current: string; - owner: string; - } - - interface NumericPerfContext { - [key: string]: number; - } - - interface Measurements { - exclusive: NumericPerfContext; - inclusive: NumericPerfContext; - render: NumericPerfContext; - counts: NumericPerfContext; - writes: NumericPerfContext; - displayNames: { - [key: string]: ComponentPerfContext; - }; - totalTime: number; - } - - interface ReactPerf { - start(): void; - stop(): void; - printInclusive(measurements: Measurements[]): void; - printExclusive(measurements: Measurements[]): void; - printWasted(measurements: Measurements[]): void; - printDOM(measurements: Measurements[]): void; - getLastMeasurements(): Measurements[]; - } - - // - // React.addons.TestUtils - // ---------------------------------------------------------------------- - - interface MockedComponentClass { - new(): any; - } - - interface ReactTestUtils { - Simulate: Simulate; - - renderIntoDocument

(element: ReactElement

): Component

; - renderIntoDocument>(element: ReactElement): C; - - mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils; - - isElementOfType(element: ReactElement, type: ReactType): boolean; - isDOMComponent(instance: Component): boolean; - isCompositeComponent(instance: Component): boolean; - isCompositeComponentWithType(instance: Component, type: ComponentClass): boolean; - isTextComponent(instance: Component): boolean; - - findAllInRenderedTree(tree: Component, fn: (i: Component) => boolean): Component; - - scryRenderedDOMComponentsWithClass(tree: Component, className: string): DOMComponent[]; - findRenderedDOMComponentWithClass(tree: Component, className: string): DOMComponent; - - scryRenderedDOMComponentsWithTag(tree: Component, tagName: string): DOMComponent[]; - findRenderedDOMComponentWithTag(tree: Component, tagName: string): DOMComponent; - - scryRenderedComponentsWithType( - tree: Component, type: ComponentClass

): CompositeComponent[]; - scryRenderedComponentsWithType>( - tree: Component, type: ComponentClass): C[]; - - findRenderedComponentWithType( - tree: Component, type: ComponentClass

): CompositeComponent; - findRenderedComponentWithType>( - tree: Component, type: ComponentClass): C; - } - - interface SyntheticEventData { - altKey?: boolean; - button?: number; - buttons?: number; - clientX?: number; - clientY?: number; - changedTouches?: TouchList; - charCode?: boolean; - clipboardData?: DataTransfer; - ctrlKey?: boolean; - deltaMode?: number; - deltaX?: number; - deltaY?: number; - deltaZ?: number; - detail?: number; - getModifierState?(key: string): boolean; - key?: string; - keyCode?: number; - locale?: string; - location?: number; - metaKey?: boolean; - pageX?: number; - pageY?: number; - relatedTarget?: EventTarget; - repeat?: boolean; - screenX?: number; - screenY?: number; - shiftKey?: boolean; - targetTouches?: TouchList; - touches?: TouchList; - view?: AbstractView; - which?: number; - } - - interface EventSimulator { - (element: Element, eventData?: SyntheticEventData): void; - (descriptor: Component, eventData?: SyntheticEventData): void; - } - - 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; - } - - // - // react Exports - // ---------------------------------------------------------------------- - - interface Exports extends TopLevelAPI { - DOM: ReactDOM; - PropTypes: ReactPropTypes; - Children: ReactChildren; - } - - // - // react/addons Exports - // ---------------------------------------------------------------------- - - interface AddonsExports extends Exports { - addons: { - CSSTransitionGroup: CSSTransitionGroup; - LinkedStateMixin: LinkedStateMixin; - PureRenderMixin: PureRenderMixin; - TransitionGroup: TransitionGroup; - - batchedUpdates(callback: (a: A, b: B) => any, a: A, b: B): void; - batchedUpdates(callback: (a: A) => any, a: A): void; - batchedUpdates(callback: () => any): void; - - classSet(cx: ClassSet): string; - cloneWithProps

(element: ReactElement

, props: P): ReactElement

; - - update(value: any[], spec: UpdateArraySpec): any[]; - update(value: {}, spec: UpdateSpec): any; - - // Development tools - Perf: ReactPerf; - TestUtils: ReactTestUtils; - }; - } - // // Browser Interfaces // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts @@ -922,13 +759,3 @@ declare module React { } } -declare module "react" { - var exports: React.Exports; - export = exports; -} - -declare module "react/addons" { - var exports: React.AddonsExports; - export = exports; -} -