From a99c1ad839fbd00e00f89e3d54490fd8a3d86294 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Tue, 2 Dec 2014 17:00:15 -0800 Subject: [PATCH] Cleanup react.d.ts; introduce Instance

interface to replace DomReferencer

; alias EventHandler types; etc... --- react/react-addons-tests.ts | 111 +--- react/react-tests.ts | 29 +- react/react.d.ts | 1074 +++++++++++++++++++---------------- 3 files changed, 585 insertions(+), 629 deletions(-) diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts index 5fbca7cff..d89c383bf 100644 --- a/react/react-addons-tests.ts +++ b/react/react-addons-tests.ts @@ -1,113 +1,8 @@ /// import React = require("react/addons"); -var PropTypesSpecification: React.Specification = { - propTypes: { - // You can declare that a prop is a specific JS primitive. By default, these - // are all optional. - optionalArray: React.PropTypes.array, - optionalBool: React.PropTypes.bool, - optionalFunc: React.PropTypes.func, - optionalNumber: React.PropTypes.number, - optionalObject: React.PropTypes.object, - optionalString: React.PropTypes.string, - - // Anything that can be rendered: numbers, strings, components or an array - // containing these types. - optionalRenderable: React.PropTypes.node, - - // A React component. - optionalComponent: React.PropTypes.component, - - // You can also declare that a prop is an instance of a class. This uses - // JS's instanceof operator. - optionalMessage: React.PropTypes.instanceOf(Date), - - // You can ensure that your prop is limited to specific values by treating - // it as an enum. - optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), - - // An object that could be one of many types - optionalUnion: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.instanceOf(Date) - ]), - - // An array of a certain type - optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), - - // An object with property values of a certain type - optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), - - // An object taking on a particular shape - optionalObjectWithShape: React.PropTypes.shape({ - color: React.PropTypes.string, - fontSize: React.PropTypes.number - }), - - // You can chain any of the above with `isRequired` to make sure a warning - // is shown if the prop isn't provided. - requiredFunc: React.PropTypes.func.isRequired, - - // A value of any data type - requiredAny: React.PropTypes.any.isRequired, - - // You can also specify a custom validator. It should return an Error - // object if the validation fails. Don't `console.warn` or throw, as this - // won't work inside `oneOfType`. - customProp: function(props, propName, componentName) { - if (!/matchme/.test(props[propName])) { - return new Error('Validation failed!'); - } - return null; - } - }, - render: (): React.ReactHTMLElement => { - return null; - } -}; - -React.createClass(PropTypesSpecification); - -var mountNode: Element; - -var HelloMessage = React.createClass({displayName: 'HelloMessage', - render: function() { - return React.DOM.div(null, "Hello ", (>this).props.name); - } -}); - -React.render(HelloMessage({name: "John"}), mountNode); - -var Timer = React.createClass({displayName: 'Timer', - getInitialState: function() { - return {secondsElapsed: 0}; - }, - tick: function() { - (>this).setState({ - secondsElapsed: (>this).state.secondsElapsed + 1 - }); - }, - componentDidMount: function() { - this.interval = setInterval(this.tick, 1000); - }, - componentWillUnmount: function() { - clearInterval(this.interval); - }, - render: function() { - return React.DOM.div( - null, - "Seconds Elapsed: ", - (>this).state.secondsElapsed - ); - } -}); - -React.render(Timer(null), mountNode); - // TestUtils -var that: React.Component; +var that: React.ComponentInstance; var node = that.refs['input'].getDOMNode(); React.addons.TestUtils.Simulate.click(node); React.addons.TestUtils.Simulate.change(node); @@ -118,12 +13,12 @@ var Greeting = React.createClass({displayName: 'Greeting', return {morning: true}; }, render: function() { - var me = >this; + var me = >this; return React.DOM.div(null, (me.state.morning ? "Hello" : "Goodbye "), me.props.name); } }); -var root = React.addons.TestUtils.renderIntoDocument(Greeting({name: "John"})); +var root = React.addons.TestUtils.renderIntoDocument(React.createElement(Greeting, {name: "John"})); var greeting = React.addons.TestUtils.findRenderedComponentWithType(root, Greeting); greeting.setState({ morning: false diff --git a/react/react-tests.ts b/react/react-tests.ts index 37380b23b..5d1743cbb 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -1,7 +1,7 @@ /// import React = require("react"); -var PropTypesSpecification: React.Specification = { +var PropTypesSpecification: React.ComponentSpec = { propTypes: { // You can declare that a prop is a specific JS primitive. By default, these // are all optional. @@ -14,10 +14,10 @@ var PropTypesSpecification: React.Specification = { // Anything that can be rendered: numbers, strings, components or an array // containing these types. - optionalRenderable: React.PropTypes.node, + optionalNode: React.PropTypes.node, - // A React component. - optionalComponent: React.PropTypes.component, + // A React element + optionalElement: React.PropTypes.element, // You can also declare that a prop is an instance of a class. This uses // JS's instanceof operator. @@ -56,7 +56,7 @@ var PropTypesSpecification: React.Specification = { // You can also specify a custom validator. It should return an Error // object if the validation fails. Don't `console.warn` or throw, as this // won't work inside `oneOfType`. - customProp: function(props, propName, componentName) { + customProp: function(props: any, propName: string, componentName: string) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } @@ -76,17 +76,13 @@ interface HelloMessageProps { name: string; } -var HelloMessage = React.createClass({displayName: 'HelloMessage', +var HelloMessage = React.createClass({ + displayName: 'HelloMessage', render: function() { - return React.DOM.div(null, "Hello ", (>this).props.name); + return React.DOM.div(null, "Hello ", (>this).props.name); } }); -// This code - calling a component directly - is deprecated in v0.12 -// See http://fb.me/react-legacyfactory -React.render(HelloMessage({ name: "John" }), mountNode); - -// Create a factory instead var HelloMessageFactory = React.createFactory(HelloMessage) React.render(HelloMessageFactory({ name: "John" }), mountNode) @@ -95,8 +91,9 @@ var Timer = React.createClass({displayName: 'Timer', return {secondsElapsed: 0}; }, tick: function() { - (>this).setState({ - secondsElapsed: (>this).state.secondsElapsed + 1 + var me = >this; + me.setState({ + secondsElapsed: me.state.secondsElapsed + 1 }); }, componentDidMount: function() { @@ -109,9 +106,9 @@ var Timer = React.createClass({displayName: 'Timer', return React.DOM.div( null, "Seconds Elapsed: ", - (>this).state.secondsElapsed + (>this).state.secondsElapsed ); } }); -React.render(Timer(), mountNode); \ No newline at end of file +React.render(React.createElement(Timer, null), mountNode); diff --git a/react/react.d.ts b/react/react.d.ts index 48fc0c128..8a8589203 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -3,227 +3,16 @@ // Definitions by: Asana // Definitions: https://github.com/borisyankov/DefinitelyTyped -declare module "react" { - var exports: React.ModuleExports; - export = exports; -} - -declare module "react/addons" { - var exports: React.ModuleWithAddonsExports; - export = exports; -} - -declare module "react/lib/cloneWithProps" { - interface exports

extends React.CloneWithProps

{} - export = exports; -} - -declare module "react/lib/cx" { - var exports: React.ClassSet; - export = exports; -} - -declare module "react/lib/LinkedStateMixin" { - interface exports extends React.LinkedStateMixin {} - export = exports; -} - -declare module "react/lib/ReactComponentWithPureRenderMixin" { - var exports: React.PureRenderMixin; - export = exports; -} - -declare module "react/lib/ReactCSSTransitionGroup" { - var exports: React.CSSTransitionGroup; - export = exports; -} - - -declare module "react/lib/ReactDefaultPerf" { - var exports: React.Perf; - export = exports; -} - -declare module "react/lib/ReactTestUtils" { - var exports: React.TestUtils; - export = exports; -} - -declare module "react/lib/ReactTransitionGroup" { - var exports: React.TransitionGroup; - export = exports; -} - -declare module "react/lib/update" { - var exports: React.Update; - export = exports; -} - -declare module React { - export interface ModuleExports { - createClass(specification: Specification): ReactComponentFactory

; - createFactory

(clazz: ReactComponentFactory

): ReactComponentFactory

; - createElement

(clazz: ReactComponentFactory

, props: P, ...children: any[]): ReactComponentElement

; - createElement(type: string, props: DomAttributes, ...children: any[]): ReactHTMLElement; - createElement(type: string, props: SvgAttributes, ...children: any[]): ReactSVGElement; - render

(component: ReactComponentElement

, container: Element, callback?: () => void): Component; - render(component: ReactHTMLElement, container: Element, callback?: () => void): ReactHTMLElement; - render(component: ReactSVGElement, container: Element, callback?: () => void): ReactSVGElement; - unmountComponentAtNode(container: Element): boolean; - renderToString

(component: ReactComponentElement

): string; - renderToString(component: ReactHTMLElement): string; - renderToString(component: ReactSVGElement): string; - renderToStaticMarkup

(component: ReactComponentElement

): string; - renderToStaticMarkup(component: ReactHTMLElement): string; - renderToStaticMarkup(component: ReactSVGElement): string; - isValidClass(factory: ReactComponentFactory): boolean; - isValidElement(component: ReactComponentElement): boolean; - isValidElement(component: ReactHTMLElement): boolean; - isValidElement(component: ReactSVGElement): boolean; - initializeTouchEvents(shouldUseTouch: boolean): void; - DOM: DomConstructors; - Children: Children; - PropTypes: PropTypes; - } - - export interface ReactComponentFactory

{ - (properties?: P, ...children: any[]): ReactComponentElement

; - } - - export interface ReactElementFactory

{ - (properties?: P, ...children: any[]): ReactDOMElement

; - } - - export interface DomElement extends ReactElementFactory { - } - - export interface SvgElement extends ReactElementFactory { - } - - export interface ReactClass

{ - (props: P): ReactComponent

; - } - - export interface ReactComponent

{ - props: P; - render(): ReactElement; - } - - export interface ReactElement { - type: T; - props: P; - key: string; - ref: string; - } - - export interface ReactDOMElement

extends ReactElement { - props: P; - } - - export interface ReactHTMLElement extends ReactDOMElement { - } - - export interface ReactSVGElement extends ReactDOMElement { - } - - export interface ReactComponentElement

extends ReactElement, P> { - props: P; - } - - export interface Mixin { - componentWillMount?(): void; - componentDidMount?(): void; - componentWillReceiveProps?(nextProps: P): void; - shouldComponentUpdate?(nextProps: P, nextState: S): boolean; - componentWillUpdate?(nextProps: P, nextState: S): void; - componentDidUpdate?(prevProps: P, prevState: S): void; - componentWillUnmount?(): void; - } - - export interface Specification extends Mixin { - displayName?: string; - mixins?: Mixin[]; - statics?: { - [key: string]: Function; - }; - propTypes?: ValidationMap

; - getDefaultProps?(): P; - getInitialState?(): S; - render(): ReactElement; - } - - export interface DomReferencer { - getDOMNode(): Element; - /** - * Use this overload to cast the returned element to a more specific type. - * Eg: var name = this.refs['name'].getDOMNode().value - */ - getDOMNode(): TElement; - } - - export interface Component extends DomReferencer { - refs: { - [key: string]: DomReferencer - }; - props: P; - state: S; - setState(nextState: S, callback?: () => void): void; - replaceState(nextState: S, callback?: () => void): void; - forceUpdate(callback?: () => void): void; - isMounted(): boolean; - setProps(nextProps: P, callback?: () => void): void; - replaceProps(nextProps: P, callback?: () => void): void; - } - - export interface Constructable { - new(): any; - } - - export interface Validator

{ - (props: P, propName: string, componentName: string): Error; - } - - export interface Requireable

extends Validator

{ - isRequired: Validator

; - } - - export interface ValidationMap

{ - [key: string]: Validator

; - } - - export interface PropTypes { - any: Requireable; - array: Requireable; - bool: Requireable; - func: Requireable; - number: Requireable; - object: Requireable; - string: Requireable; - node: Requireable; - component: Requireable; - instanceOf: (clazz: Constructable) => Requireable; - oneOf: (types: any[]) => Requireable - oneOfType: (types: Validator[]) => Requireable; - arrayOf: (type: Validator) => Requireable; - objectOf: (type: Validator) => Requireable; - shape: (type: ValidationMap) => Requireable; - } - - export interface Children { - map(children: any[], fn: (child: any) => any): any[]; - forEach(children: any[], fn: (child: any) => any): void; - count(children: any[]): number; - only(children: any[]): any; - } - +declare module Browser { // Browser Interfaces // Taken from https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts - export interface AbstractView { + + interface AbstractView { styleMedia: StyleMedia; document: Document; } - export interface Touch { + interface Touch { identifier: number; target: EventTarget; screenX: number; @@ -234,20 +23,150 @@ declare module React { pageY: number; } - export interface TouchList { + interface TouchList { [index: number]: Touch; length: number; item(index: number): Touch; identifiedTouch(identifier: number): Touch; } +} - // Events - export interface SyntheticEvent { +declare module React { + + // + // React Elements + // ---------------------------------------------------------------------- + + // type ReactType = ReactClass | string; + + interface ReactElement

{ + type: any; // ReactType + props: P; + key: any; // number | string + ref: string; + } + + interface ReactHTMLElement extends ReactElement {} + interface ReactSVGElement extends ReactElement {} + interface ComponentElement

extends ReactElement

{} + + // + // React Nodes + // ---------------------------------------------------------------------- + + // Typescript 1.4 (Union types, aliases) + // type ReactText = string | number; + // type ReactFragment = ReactNode[]; + // type ReactNode = ReactElement | ReactFragment | ReactText; + + // + // React Components + // ---------------------------------------------------------------------- + + interface ReactStatics

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

; + } + + interface ReactClass

extends ReactStatics

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

; + // (props: P): ReactElement

; + } + + // + // ReactElement Factories + // ---------------------------------------------------------------------- + + interface Factory

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

; + } + + interface ComponentFactory

extends Factory

{} + interface HTMLFactory extends Factory {} + interface SVGFactory extends Factory {} + + // + // Top-Level API + // ---------------------------------------------------------------------- + + interface TopLevelAPI { + createClass

(spec: ComponentSpec): ReactClass

; + createElement

(type: any/*ReactType*/, props: P, ...children: any/*ReactNode*/[]): ReactElement

; + createFactory

(type: any/*ReactType*/): Factory

; + render

(element: ReactElement

, container: Element, callback?: () => void): ReactInstance

; + unmountComponentAtNode(container: Element): boolean; + renderToString(element: ReactElement): string; + renderToStaticMarkup(element: ReactElement): string; + isValidElement(object: {}): boolean; + initializeTouchEvents(shouldUseTouch: boolean): void; + } + + // + // Component API + // ---------------------------------------------------------------------- + + interface ReactInstance

{ + // 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; + + props: P; + setProps(nextProps: P, callback?: () => void): void; + replaceProps(nextProps: P, callback?: () => void): void; + } + + interface ComponentInstance extends ReactInstance

{ + state: S; + setState(nextState: S, callback?: () => void): void; + replaceState(nextState: S, callback?: () => void): void; + forceUpdate(callback?: () => void): void; + refs: { + [key: string]: ReactInstance

+ }; + } + + // + // Component Specs and Lifecycle + // ---------------------------------------------------------------------- + + interface Mixin extends ReactStatics

{ + mixins?: Mixin; + statics?: { + [key: string]: any; + }; + + // Definition methods + getInitialState?(): S; + + // Delegate methods + componentWillMount?(): void; + componentDidMount?(): void; + componentWillReceiveProps?(nextProps: P): void; + shouldComponentUpdate?(nextProps: P, nextState: S): boolean; + componentWillUpdate?(nextProps: P, nextState: S): void; + componentDidUpdate?(prevProps: P, prevState: S): void; + componentWillUnmount?(): void; + } + + interface ComponentSpec extends Mixin { + render(): ReactElement; + } + + // + // Event System + // ---------------------------------------------------------------------- + + interface SyntheticEvent { bubbles: boolean; cancelable: boolean; currentTarget: EventTarget; defaultPrevented: boolean; eventPhase: number; + isTrusted: boolean; nativeEvent: Event; preventDefault(): void; stopPropagation(): void; @@ -256,11 +175,11 @@ declare module React { type: string; } - export interface ClipboardEvent extends SyntheticEvent { + interface ClipboardEvent extends SyntheticEvent { clipboardData: DataTransfer; } - export interface KeyboardEvent extends SyntheticEvent { + interface KeyboardEvent extends SyntheticEvent { altKey: boolean; charCode: number; ctrlKey: boolean; @@ -275,11 +194,14 @@ declare module React { which: number; } - export interface FocusEvent extends SyntheticEvent { + interface FocusEvent extends SyntheticEvent { relatedTarget: EventTarget; } - export interface MouseEvent extends SyntheticEvent { + interface FormEvent extends SyntheticEvent { + } + + interface MouseEvent extends SyntheticEvent { altKey: boolean; button: number; buttons: number; @@ -296,125 +218,135 @@ declare module React { shiftKey: boolean; } - export interface TouchEvent extends SyntheticEvent { + interface TouchEvent extends SyntheticEvent { altKey: boolean; - changedTouches: TouchList; + changedTouches: Browser.TouchList; ctrlKey: boolean; getModifierState(key: string): boolean; metaKey: boolean; shiftKey: boolean; - targetTouches: TouchList; - touches: TouchList; + targetTouches: Browser.TouchList; + touches: Browser.TouchList; } - export interface UiEvent extends SyntheticEvent { + interface UIEvent extends SyntheticEvent { detail: number; - view: AbstractView; + view: Browser.AbstractView; } - export interface WheelEvent extends SyntheticEvent { + interface WheelEvent extends SyntheticEvent { deltaMode: number; deltaX: number; deltaY: number; deltaZ: number; } - // Attributes - export interface EventAttributes { - onCopy?: (event: ClipboardEvent) => void; - onCut?: (event: ClipboardEvent) => void; - onPaste?: (event: ClipboardEvent) => void; - onKeyDown?: (event: KeyboardEvent) => void; - onKeyPress?: (event: KeyboardEvent) => void; - onKeyUp?: (event: KeyboardEvent) => void; - onFocus?: (event: FocusEvent) => void; - onBlur?: (event: FocusEvent) => void; - onChange?: (event: SyntheticEvent) => void; - onInput?: (event: SyntheticEvent) => void; - onSubmit?: (event: SyntheticEvent) => void; - onClick?: (event: MouseEvent) => void; - onDoubleClick?: (event: MouseEvent) => void; - onDrag?: (event: MouseEvent) => void; - onDragEnd?: (event: MouseEvent) => void; - onDragEnter?: (event: MouseEvent) => void; - onDragExit?: (event: MouseEvent) => void; - onDragLeave?: (event: MouseEvent) => void; - onDragOver?: (event: MouseEvent) => void; - onDragStart?: (event: MouseEvent) => void; - onDrop?: (event: MouseEvent) => void; - onMouseDown?: (event: MouseEvent) => void; - onMouseEnter?: (event: MouseEvent) => void; - onMouseLeave?: (event: MouseEvent) => void; - onMouseMove?: (event: MouseEvent) => void; - onMouseOut?: (event: MouseEvent) => void; - onMouseOver?: (event: MouseEvent) => void; - onMouseUp?: (event: MouseEvent) => void; - onTouchCancel?: (event: TouchEvent) => void; - onTouchEnd?: (event: TouchEvent) => void; - onTouchMove?: (event: TouchEvent) => void; - onTouchStart?: (event: TouchEvent) => void; - onScroll?: (event: UiEvent) => void; - onWheel?: (event: WheelEvent) => void; + // + // Event Handler Types + // ---------------------------------------------------------------------- + + interface EventHandler { + (event: E): void; } + interface ClipboardEventHandler extends EventHandler {} + interface KeyboardEventHandler extends EventHandler {} + interface FocusEventHandler extends EventHandler {} + interface FormEventHandler extends EventHandler {} + interface MouseEventHandler extends EventHandler {} + interface TouchEventHandler extends EventHandler {} + interface UIEventHandler extends EventHandler {} + interface WheelEventHandler extends EventHandler {} + + // + // Attributes + // ---------------------------------------------------------------------- + export interface ReactAttributes { - dangerouslySetInnerHTML?: { - __html: string; - }; - children?: any[]; + children?: any; // ReactNode key?: string; ref?: string; + + // Event Attributes + onCopy?: ClipboardEventHandler; + onCut?: ClipboardEventHandler; + onPaste?: ClipboardEventHandler; + onKeyDown?: KeyboardEventHandler; + onKeyPress?: KeyboardEventHandler; + onKeyUp?: KeyboardEventHandler; + onFocus?: FocusEventHandler; + onBlur?: FocusEventHandler; + onChange?: FormEventHandler; + onInput?: FormEventHandler; + onSubmit?: FormEventHandler; + onClick?: MouseEventHandler; + onDoubleClick?: MouseEventHandler; + onDrag?: MouseEventHandler; + onDragEnd?: MouseEventHandler; + onDragEnter?: MouseEventHandler; + onDragExit?: MouseEventHandler; + onDragLeave?: MouseEventHandler; + onDragOver?: MouseEventHandler; + onDragStart?: MouseEventHandler; + onDrop?: MouseEventHandler; + onMouseDown?: MouseEventHandler; + onMouseEnter?: MouseEventHandler; + onMouseLeave?: MouseEventHandler; + onMouseMove?: MouseEventHandler; + onMouseOut?: MouseEventHandler; + onMouseOver?: MouseEventHandler; + onMouseUp?: MouseEventHandler; + onTouchCancel?: TouchEventHandler; + onTouchEnd?: TouchEventHandler; + onTouchMove?: TouchEventHandler; + onTouchStart?: TouchEventHandler; + onScroll?: UIEventHandler; + onWheel?: WheelEventHandler; } - export interface DomAttributes extends EventAttributes, ReactAttributes { - // HTML Attributes - accept?: any; - accessKey?: any; - action?: any; - allowFullScreen?: any; - allowTransparency?: any; - alt?: any; - async?: any; - autoCapitalize?: any; - autoComplete?: any; - autoCorrect?: any; - autoFocus?: any; - autoPlay?: any; - cellPadding?: any; - cellSpacing?: any; - charSet?: any; - checked?: any; - className?: any; - cols?: any; - colSpan?: any; - content?: any; - contentEditable?: any; - contextMenu?: any; + interface HTMLAttributes extends ReactAttributes { + accept?: string; + accessKey?: string; + action?: string; + allowFullScreen?: boolean; + allowTransparency?: boolean; + alt?: string; + async?: boolean; + autoComplete?: boolean; + autoFocus?: boolean; + autoPlay?: boolean; + cellPadding?: any; // number | string + cellSpacing?: any; // number | string + charSet?: string; + checked?: boolean; + className?: string; + cols?: number; + colSpan?: number; + content?: string; + contentEditable?: boolean; + contextMenu?: string; controls?: any; - coords?: any; - crossOrigin?: any; - data?: any; - dateTime?: any; - defer?: any; - dir?: any; - disabled?: any; + coords?: string; + crossOrigin?: string; + data?: string; + dateTime?: string; + defer?: boolean; + dir?: string; + disabled?: boolean; download?: any; - draggable?: any; - encType?: any; - form?: any; - formNoValidate?: any; - frameBorder?: any; - height?: any; - hidden?: any; - href?: any; - hrefLang?: any; - htmlFor?: any; - httpEquiv?: any; - icon?: any; - id?: any; - itemProp?: any; - itemScope?: any; - itemType?: any; + draggable?: boolean; + encType?: string; + form?: string; + formNoValidate?: boolean; + frameBorder?: any; // number | string + height?: any; // number | string + hidden?: boolean; + href?: string; + hrefLang?: string; + htmlFor?: string; + httpEquiv?: string; + icon?: string; + id?: string; label?: any; lang?: any; list?: any; @@ -433,7 +365,6 @@ declare module React { placeholder?: any; poster?: any; preload?: any; - property?: any; radioGroup?: any; readOnly?: any; rel?: any; @@ -466,9 +397,22 @@ declare module React { value?: any; width?: any; wmode?: any; + + // Non-standard Attributes + autoCapitalize?: boolean; + autoCorrect?: boolean; + property?: any; + itemProp?: string; + itemScope?: boolean; + itemType?: string; + + // React-specific Attributes + dangerouslySetInnerHTML: { + __html: string + }; } - export interface SvgAttributes extends EventAttributes, ReactAttributes { + interface SVGAttributes extends ReactAttributes { cx?: any; cy?: any; d?: any; @@ -514,189 +458,255 @@ declare module React { y?: any; } - export interface DomConstructors { + // + // React.DOM + // ---------------------------------------------------------------------- + + interface ReactDOM { // HTML - a: DomElement; - abbr: DomElement; - address: DomElement; - area: DomElement; - article: DomElement; - aside: DomElement; - audio: DomElement; - b: DomElement; - base: DomElement; - bdi: DomElement; - bdo: DomElement; - big: DomElement; - blockquote: DomElement; - body: DomElement; - br: DomElement; - button: DomElement; - canvas: DomElement; - caption: DomElement; - cite: DomElement; - code: DomElement; - col: DomElement; - colgroup: DomElement; - data: DomElement; - datalist: DomElement; - dd: DomElement; - del: DomElement; - details: DomElement; - dfn: DomElement; - dialog: DomElement; - div: DomElement; - dl: DomElement; - dt: DomElement; - em: DomElement; - embed: DomElement; - fieldset: DomElement; - figcaption: DomElement; - figure: DomElement; - footer: DomElement; - form: DomElement; - h1: DomElement; - h2: DomElement; - h3: DomElement; - h4: DomElement; - h5: DomElement; - h6: DomElement; - head: DomElement; - header: DomElement; - hr: DomElement; - html: DomElement; - i: DomElement; - iframe: DomElement; - img: DomElement; - input: DomElement; - ins: DomElement; - kbd: DomElement; - keygen: DomElement; - label: DomElement; - legend: DomElement; - li: DomElement; - link: DomElement; - main: DomElement; - map: DomElement; - mark: DomElement; - menu: DomElement; - menuitem: DomElement; - meta: DomElement; - meter: DomElement; - nav: DomElement; - noscript: DomElement; - object: DomElement; - ol: DomElement; - optgroup: DomElement; - option: DomElement; - output: DomElement; - p: DomElement; - param: DomElement; - pre: DomElement; - progress: DomElement; - q: DomElement; - rp: DomElement; - rt: DomElement; - ruby: DomElement; - s: DomElement; - samp: DomElement; - script: DomElement; - section: DomElement; - select: DomElement; - small: DomElement; - source: DomElement; - span: DomElement; - strong: DomElement; - style: DomElement; - sub: DomElement; - summary: DomElement; - sup: DomElement; - table: DomElement; - tbody: DomElement; - td: DomElement; - textarea: DomElement; - tfoot: DomElement; - th: DomElement; - thead: DomElement; - time: DomElement; - title: DomElement; - tr: DomElement; - track: DomElement; - u: DomElement; - ul: DomElement; - "var": DomElement; - video: DomElement; - wbr: DomElement; + a: React.HTMLFactory; + abbr: React.HTMLFactory; + address: React.HTMLFactory; + area: React.HTMLFactory; + article: React.HTMLFactory; + aside: React.HTMLFactory; + audio: React.HTMLFactory; + b: React.HTMLFactory; + base: React.HTMLFactory; + bdi: React.HTMLFactory; + bdo: React.HTMLFactory; + big: React.HTMLFactory; + blockquote: React.HTMLFactory; + body: React.HTMLFactory; + br: React.HTMLFactory; + button: React.HTMLFactory; + canvas: React.HTMLFactory; + caption: React.HTMLFactory; + cite: React.HTMLFactory; + code: React.HTMLFactory; + col: React.HTMLFactory; + colgroup: React.HTMLFactory; + data: React.HTMLFactory; + datalist: React.HTMLFactory; + dd: React.HTMLFactory; + del: React.HTMLFactory; + details: React.HTMLFactory; + dfn: React.HTMLFactory; + dialog: React.HTMLFactory; + div: React.HTMLFactory; + dl: React.HTMLFactory; + dt: React.HTMLFactory; + em: React.HTMLFactory; + embed: React.HTMLFactory; + fieldset: React.HTMLFactory; + figcaption: React.HTMLFactory; + figure: React.HTMLFactory; + footer: React.HTMLFactory; + form: React.HTMLFactory; + h1: React.HTMLFactory; + h2: React.HTMLFactory; + h3: React.HTMLFactory; + h4: React.HTMLFactory; + h5: React.HTMLFactory; + h6: React.HTMLFactory; + head: React.HTMLFactory; + header: React.HTMLFactory; + hr: React.HTMLFactory; + html: React.HTMLFactory; + i: React.HTMLFactory; + iframe: React.HTMLFactory; + img: React.HTMLFactory; + input: React.HTMLFactory; + ins: React.HTMLFactory; + kbd: React.HTMLFactory; + keygen: React.HTMLFactory; + label: React.HTMLFactory; + legend: React.HTMLFactory; + li: React.HTMLFactory; + link: React.HTMLFactory; + main: React.HTMLFactory; + map: React.HTMLFactory; + mark: React.HTMLFactory; + menu: React.HTMLFactory; + menuitem: React.HTMLFactory; + meta: React.HTMLFactory; + meter: React.HTMLFactory; + nav: React.HTMLFactory; + noscript: React.HTMLFactory; + object: React.HTMLFactory; + ol: React.HTMLFactory; + optgroup: React.HTMLFactory; + option: React.HTMLFactory; + output: React.HTMLFactory; + p: React.HTMLFactory; + param: React.HTMLFactory; + pre: React.HTMLFactory; + progress: React.HTMLFactory; + q: React.HTMLFactory; + rp: React.HTMLFactory; + rt: React.HTMLFactory; + ruby: React.HTMLFactory; + s: React.HTMLFactory; + samp: React.HTMLFactory; + script: React.HTMLFactory; + section: React.HTMLFactory; + select: React.HTMLFactory; + small: React.HTMLFactory; + source: React.HTMLFactory; + span: React.HTMLFactory; + strong: React.HTMLFactory; + style: React.HTMLFactory; + sub: React.HTMLFactory; + summary: React.HTMLFactory; + sup: React.HTMLFactory; + table: React.HTMLFactory; + tbody: React.HTMLFactory; + td: React.HTMLFactory; + textarea: React.HTMLFactory; + tfoot: React.HTMLFactory; + th: React.HTMLFactory; + thead: React.HTMLFactory; + time: React.HTMLFactory; + title: React.HTMLFactory; + tr: React.HTMLFactory; + track: React.HTMLFactory; + u: React.HTMLFactory; + ul: React.HTMLFactory; + "var": React.HTMLFactory; + video: React.HTMLFactory; + wbr: React.HTMLFactory; + // SVG - circle: SvgElement; - defs: SvgElement; - ellipse: SvgElement; - g: SvgElement; - line: SvgElement; - linearGradient: SvgElement; - mask: SvgElement; - path: SvgElement; - pattern: SvgElement; - polygon: SvgElement; - polyline: SvgElement; - radialGradient: SvgElement; - rect: SvgElement; - stop: SvgElement; - svg: SvgElement; - text: SvgElement; - tspan: SvgElement; + circle: React.SVGFactory; + defs: React.SVGFactory; + ellipse: React.SVGFactory; + g: React.SVGFactory; + line: React.SVGFactory; + linearGradient: React.SVGFactory; + mask: React.SVGFactory; + path: React.SVGFactory; + pattern: React.SVGFactory; + polygon: React.SVGFactory; + polyline: React.SVGFactory; + radialGradient: React.SVGFactory; + rect: React.SVGFactory; + stop: React.SVGFactory; + svg: React.SVGFactory; + text: React.SVGFactory; + tspan: React.SVGFactory; } - // Addons - export interface ModuleWithAddonsExports extends ModuleExports { - addons: ReactAddons; + // + // React.PropTypes + // ---------------------------------------------------------------------- + + interface Validator { + (object: T, key: string, componentName: string): Error; } - export interface ReactAddons { - cloneWithProps

(instance: React.ReactComponentElement

, extraProps?: P): React.ReactComponentElement

; - classSet: ClassSet; - LinkedStateMixin: LinkedStateMixin; - PureRenderMixin: PureRenderMixin; - CSSTransitionGroup: CSSTransitionGroup; - Perf: Perf; - TestUtils: TestUtils; - TransitionGroup: TransitionGroup; - update: Update; + interface Requireable extends Validator { + isRequired: Validator; } - export interface CloneWithProps

{ - (instance: React.ReactComponentElement

, extraProps?: P): React.ReactComponentElement

; + interface ValidationMap { + [key: string]: Validator; } - export interface ClassSet { - (classes: {[key: string]: boolean}): string + interface ReactPropTypes { + any: Requireable; + array: Requireable; + bool: Requireable; + func: Requireable; + number: Requireable; + object: Requireable; + string: Requireable; + node: Requireable; + element: Requireable; + instanceOf(expectedClass: {}): Requireable; + oneOf(types: any[]): Requireable; + oneOfType(types: Validator[]): Requireable; + arrayOf(type: Validator): Requireable; + objectOf(type: Validator): Requireable; + shape(type: ValidationMap): Requireable; } - export interface ReactLink { + // + // React.Children + // ---------------------------------------------------------------------- + + interface ReactChildren { + map(children: any/*ReactNode*/, fn: (child: any/*ReactNode*/) => T): { [key:string]: T }; + forEach(children: any/*ReactNode*/, fn: (child: any/*ReactNode*/) => any): void; + count(children: any/*ReactNode*/): number; + only(children: any/*ReactNode*/): any; + } + + // + // React.addons (Transitions) + // ---------------------------------------------------------------------- + + interface CSSTransitionGroupProps { + transitionName: string; + transitionAppear?: boolean; + transitionEnter?: boolean; + transitionLeave?: boolean; + } + + interface TransitionGroupProps { + component?: any; // ReactType + childFactory?: (child: React.ReactElement) => React.ReactElement; + } + + interface CSSTransitionGroup extends React.ReactClass {} + interface TransitionGroup extends React.ReactClass {} + + // + // React.addons (Mixins) + // ---------------------------------------------------------------------- + + interface ReactLink { value: T; requestChange(newValue: T): void; } - export interface LinkedStateMixin extends React.Mixin { + interface LinkedStateMixin extends React.Mixin { linkState(key: string): ReactLink; } - export interface PureRenderMixin extends React.Mixin {} + interface PureRenderMixin extends React.Mixin { + } - export interface CSSTransitionGroup extends React.ReactComponentFactory<{ - transitionName: string; - }> {} + // + // Reat.addons.update + // ---------------------------------------------------------------------- - export interface ComponentPerfContext { + interface UpdateSpec { + $set: any; + $merge: {}; + $apply(value: any): any; + // [key: string]: UpdateSpec; + } + + interface UpdateArraySpec extends UpdateSpec { + $push?: any[]; + $unshift?: any[]; + $splice?: any[][]; + } + + // + // React.addons.Perf + // ---------------------------------------------------------------------- + + interface ComponentPerfContext { current: string; owner: string; } - export interface NumericPerfContext { + interface NumericPerfContext { [key: string]: number; } - export interface Measurements { + interface Measurements { exclusive: NumericPerfContext; inclusive: NumericPerfContext; render: NumericPerfContext; @@ -708,7 +718,7 @@ declare module React { totalTime: number; } - export interface Perf { + interface ReactPerf { start(): void; stop(): void; printInclusive(measurements: Measurements[]): void; @@ -718,34 +728,47 @@ declare module React { getLastMeasurements(): Measurements[]; } - export interface TestUtils { - Simulate: Simulate; - renderIntoDocument

(instance: ReactComponentElement

): ReactComponentElement

; - renderIntoDocument(instance: ReactHTMLElement): ReactHTMLElement; - renderIntoDocument(instance: ReactSVGElement): ReactSVGElement; - mockComponent(componentClass: ReactComponentFactory, mockTagName?: string): TestUtils; - isDescriptorOfType(descriptor: ReactElement, componentClass: ReactComponentFactory): boolean; - isDOMComponent(instance: ReactElement): boolean; - isCompositeComponent(instance: ReactElement): boolean; - isCompositeComponentWithType(instance: ReactElement, componentClass: ReactComponentFactory): boolean; - isTextComponent(instance: ReactElement): boolean; - findAllInRenderedTree(tree: ReactElement, test: (component: ReactElement) => boolean): ReactElement[]; - scryRenderedDOMComponentsWithClass(tree: ReactElement, className: string): ReactElement[]; - findRenderedDOMComponentWithClass(tree: ReactElement, className: string): ReactElement; - scryRenderedDOMComponentsWithTag(tree: ReactElement, tagName: string): ReactElement[]; - findRenderedDOMComponentWithTag(tree: ReactElement, tagName: string): ReactElement; - scryRenderedComponentsWithTag(tree: ReactElement, componentClass: Function): ReactElement[]; - findRenderedComponentWithType

(tree: ReactElement, componentClass: ReactComponentFactory

): Component; - scryRenderedComponentsWithType

(tree: ReactElement, componentClass: ReactComponentFactory

): Component[]; + // + // React.addons.TestUtils + // ---------------------------------------------------------------------- + + interface MockedComponent { + render: { + mockImplementation(impl: () => any): void; + }; } - export interface SyntheticEventData { + // Alias for ReactTestUtils + interface Instance

extends React.ReactInstance

{} + + interface ReactTestUtils { + Simulate: Simulate; + + renderIntoDocument

(element: React.ReactElement

): Instance

; + mockComponent(mocked: MockedComponent, mockTagName?: string): ReactTestUtils; + isElementOfType(element: React.ReactElement, type: any/*ReactType*/): boolean; + isDOMComponent(instance: Instance): boolean; + isCompositeComponent(instance: Instance): boolean; + isCompositeComponentWithType(instance: Instance, type: React.ReactClass): boolean; + isTextComponent(instance: Instance): boolean; + findAllInRenderedTree(tree: Instance, fn: (i: Instance) => boolean): Instance; + scryRenderedDOMComponentsWithClass(tree: Instance, className: string): Instance[]; + findRenderedDOMComponentWithClass(tree: Instance, className: string): Instance; + scryRenderedDOMComponentsWithTag(tree: Instance, tagName: string): Instance[]; + findRenderedDOMComponentWithTag(tree: Instance, tagName: string): Instance; + scryRenderedComponentsWithType( + tree: Instance, type: React.ReactClass

): React.ComponentInstance[]; + findRenderedComponentWithType( + tree: Instance, type: React.ReactClass

): React.ComponentInstance; + } + + interface SyntheticEventData { altKey?: boolean; button?: number; buttons?: number; clientX?: number; clientY?: number; - changedTouches?: TouchList; + changedTouches?: Browser.TouchList; charCode?: boolean; clipboardData?: DataTransfer; ctrlKey?: boolean; @@ -767,18 +790,18 @@ declare module React { screenX?: number; screenY?: number; shiftKey?: boolean; - targetTouches?: TouchList; - touches?: TouchList; - view?: AbstractView; + targetTouches?: Browser.TouchList; + touches?: Browser.TouchList; + view?: Browser.AbstractView; which?: number; } - export interface EventSimulator { + interface EventSimulator { (element: Element, eventData?: SyntheticEventData): void; - (descriptor: ReactElement, eventData?: SyntheticEventData): void; + (descriptor: Instance, eventData?: SyntheticEventData): void; } - export interface Simulate { + interface Simulate { blur: EventSimulator; change: EventSimulator; click: EventSimulator; @@ -814,10 +837,51 @@ declare module React { wheel: EventSimulator; } - export interface TransitionGroup extends ReactComponentFactory {} + // + // react Exports + // ---------------------------------------------------------------------- - export interface Update { - (object: Object, changes: Object): Object + interface Exports extends TopLevelAPI { + DOM: ReactDOM; + PropTypes: ReactPropTypes; + Children: ReactChildren; } -} \ No newline at end of file + // + // react/addons Exports + // ---------------------------------------------------------------------- + + interface AddonsExports extends Exports { + addons: { + CSSTransitionGroup: CSSTransitionGroup; + LinkedStateMixin: LinkedStateMixin; + PureRenderMixin: PureRenderMixin; + TransitionGroup: TransitionGroup; + + batchedUpdates(callback: (a: A, b: B) => void, a: A, b: B): void; + batchedUpdates(callback: (a: A) => void, a: A): void; + batchedUpdates(callback: () => void): void; + + classSet(cx: { [key: string]: boolean }): string; + cloneWithProps

(element: React.ReactElement

, props: P): React.ReactElement

; + + update(value: any[], spec: UpdateArraySpec): any[]; + update(value: {}, spec: UpdateSpec): any; + + // Development tools + Perf: ReactPerf; + TestUtils: ReactTestUtils; + }; + } +} + +declare module "react" { + var exports: React.Exports; + export = exports; +} + +declare module "react/addons" { + var exports: React.AddonsExports; + export = exports; +} +