From 16d09d28c0ee49edc10be758bbc2da35bdff4e71 Mon Sep 17 00:00:00 2001 From: ibrahimuludag Date: Fri, 9 Oct 2015 14:58:12 +0300 Subject: [PATCH 01/23] Update knockout.d.ts Added after? option to KnockoutBindingHandler --- knockout/knockout.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/knockout/knockout.d.ts b/knockout/knockout.d.ts index edb510b6d..c2020c418 100644 --- a/knockout/knockout.d.ts +++ b/knockout/knockout.d.ts @@ -142,6 +142,7 @@ interface KnockoutAllBindingsAccessor { } interface KnockoutBindingHandler { + after?: Array; init?: (element: any, valueAccessor: () => any, allBindingsAccessor?: KnockoutAllBindingsAccessor, viewModel?: any, bindingContext?: KnockoutBindingContext) => void | { controlsDescendantBindings: boolean; }; update?: (element: any, valueAccessor: () => any, allBindingsAccessor?: KnockoutAllBindingsAccessor, viewModel?: any, bindingContext?: KnockoutBindingContext) => void; options?: any; From 77b2f7e8d49399d29f751a066ae13da17f46facc Mon Sep 17 00:00:00 2001 From: James Brantly Date: Thu, 8 Oct 2015 00:31:51 -0400 Subject: [PATCH 02/23] Initial React v0.14 definitions --- react/README.md | 8 +- react/react-addons-clone-with-props.d.ts | 18 + react/react-addons-create-fragment.d.ts | 16 + react/react-addons-css-transition-group.d.ts | 25 + react/react-addons-linked-state-mixin.d.ts | 24 + react/react-addons-perf.d.ts | 46 + react/react-addons-pure-render-mixin.d.ts | 17 + react/react-addons-test-utils.d.ts | 154 +++ react/react-addons-transition-group.d.ts | 22 + react/react-addons-update.d.ts | 35 + react/react-dom.d.ts | 71 ++ react/react-global.d.ts | 325 +---- react/react.d.ts | 1107 +----------------- 13 files changed, 486 insertions(+), 1382 deletions(-) create mode 100644 react/react-addons-clone-with-props.d.ts create mode 100644 react/react-addons-create-fragment.d.ts create mode 100644 react/react-addons-css-transition-group.d.ts create mode 100644 react/react-addons-linked-state-mixin.d.ts create mode 100644 react/react-addons-perf.d.ts create mode 100644 react/react-addons-pure-render-mixin.d.ts create mode 100644 react/react-addons-test-utils.d.ts create mode 100644 react/react-addons-transition-group.d.ts create mode 100644 react/react-addons-update.d.ts create mode 100644 react/react-dom.d.ts diff --git a/react/README.md b/react/README.md index b7ff4b55e..eed63fcb3 100644 --- a/react/README.md +++ b/react/README.md @@ -1,5 +1,5 @@ -# React v0.13.3 Type Definitions +# React v0.14 Type Definitions -This folder contains the following `.d.ts` files: -* `react.d.ts` declares the module `"react"` and `"react/addons"` -* `react-global.d.ts` declares the global namespace `React` (only include this if you are actually using the global `React`) +If you are using modules you should use `react.d.ts`, `react-dom.d.ts` and any of the `react-addon-*.d.ts` definition files. + +If you are using the global `React` variable, you should use `react-global.d.ts`. diff --git a/react/react-addons-clone-with-props.d.ts b/react/react-addons-clone-with-props.d.ts new file mode 100644 index 000000000..137c6650c --- /dev/null +++ b/react/react-addons-clone-with-props.d.ts @@ -0,0 +1,18 @@ +// Type definitions for React v0.14 (react-addons-clone-with-props) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare namespace __React { + namespace __Addons { + export function cloneWithProps

(element: __React.DOMElement

, props: P): __React.DOMElement

; + export function cloneWithProps

(element: __React.ClassicElement

, props: P): __React.ClassicElement

; + export function cloneWithProps

(element: __React.ReactElement

, props: P): __React.ReactElement

; + } +} + +declare module "react-addons-clone-with-props" { + export = __React.__Addons.cloneWithProps; +} diff --git a/react/react-addons-create-fragment.d.ts b/react/react-addons-create-fragment.d.ts new file mode 100644 index 000000000..b2332eae1 --- /dev/null +++ b/react/react-addons-create-fragment.d.ts @@ -0,0 +1,16 @@ +// Type definitions for React v0.14 (react-addons-create-fragment) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare namespace __React { + namespace __Addons { + export function createFragment(object: { [key: string]: ReactNode }): ReactFragment; + } +} + +declare module "react-addons-create-fragment" { + export = __React.__Addons.createFragment; +} diff --git a/react/react-addons-css-transition-group.d.ts b/react/react-addons-css-transition-group.d.ts new file mode 100644 index 000000000..99db1f4f4 --- /dev/null +++ b/react/react-addons-css-transition-group.d.ts @@ -0,0 +1,25 @@ +// Type definitions for React v0.14 (react-addons-css-transition-group) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// +/// + +declare namespace __React { + namespace __Addons { + interface CSSTransitionGroupProps extends TransitionGroupProps { + transitionName: string; + transitionAppear?: boolean; + transitionEnter?: boolean; + transitionLeave?: boolean; + } + + type CSSTransitionGroup = ComponentClass; + } +} + +declare module "react-addons-css-transition-group" { + var CSSTransitionGroup: __React.__Addons.CSSTransitionGroup; + export = CSSTransitionGroup; +} diff --git a/react/react-addons-linked-state-mixin.d.ts b/react/react-addons-linked-state-mixin.d.ts new file mode 100644 index 000000000..a98caa384 --- /dev/null +++ b/react/react-addons-linked-state-mixin.d.ts @@ -0,0 +1,24 @@ +// Type definitions for React v0.14 (react-addons-linked-state-mixin) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare namespace __React { + namespace __Addons { + interface ReactLink { + value: T; + requestChange(newValue: T): void; + } + + interface LinkedStateMixin extends Mixin { + linkState(key: string): ReactLink; + } + } +} + +declare module "react-addons-linked-state-mixin" { + var LinkedStateMixin: __React.__Addons.LinkedStateMixin; + export = LinkedStateMixin; +} diff --git a/react/react-addons-perf.d.ts b/react/react-addons-perf.d.ts new file mode 100644 index 000000000..7ca369db8 --- /dev/null +++ b/react/react-addons-perf.d.ts @@ -0,0 +1,46 @@ +// Type definitions for React v0.14 (react-addons-perf) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare namespace __React { + namespace __Addons { + 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; + } + + namespace Perf { + export function start(): void; + export function stop(): void; + export function printInclusive(measurements: Measurements[]): void; + export function printExclusive(measurements: Measurements[]): void; + export function printWasted(measurements: Measurements[]): void; + export function printDOM(measurements: Measurements[]): void; + export function getLastMeasurements(): Measurements[]; + } + } +} + +declare module "react-addons-perf" { + import Perf = __React.__Addons.Perf; + export = Perf; +} diff --git a/react/react-addons-pure-render-mixin.d.ts b/react/react-addons-pure-render-mixin.d.ts new file mode 100644 index 000000000..741046d90 --- /dev/null +++ b/react/react-addons-pure-render-mixin.d.ts @@ -0,0 +1,17 @@ +// Type definitions for React v0.14 (react-addons-pure-render-mixin) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare namespace __React { + namespace __Addons { + interface PureRenderMixin extends Mixin {} + } +} + +declare module "react-addons-pure-render-mixin" { + var PureRenderMixin: __React.__Addons.PureRenderMixin; + export = PureRenderMixin; +} diff --git a/react/react-addons-test-utils.d.ts b/react/react-addons-test-utils.d.ts new file mode 100644 index 000000000..13f433657 --- /dev/null +++ b/react/react-addons-test-utils.d.ts @@ -0,0 +1,154 @@ +// Type definitions for React v0.14 (react-addons-test-utils) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare namespace __React { + namespace __Addons { + 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; + (component: Component, eventData?: SyntheticEventData): void; + } + + interface MockedComponentClass { + new(): any; + } + + class ShallowRenderer { + getRenderOutput>(): E; + getRenderOutput(): ReactElement; + render(element: ReactElement, context?: any): void; + unmount(): void; + } + + namespace TestUtils { + namespace Simulate { + export var blur: EventSimulator; + export var change: EventSimulator; + export var click: EventSimulator; + export var cut: EventSimulator; + export var doubleClick: EventSimulator; + export var drag: EventSimulator; + export var dragEnd: EventSimulator; + export var dragEnter: EventSimulator; + export var dragExit: EventSimulator; + export var dragLeave: EventSimulator; + export var dragOver: EventSimulator; + export var dragStart: EventSimulator; + export var drop: EventSimulator; + export var focus: EventSimulator; + export var input: EventSimulator; + export var keyDown: EventSimulator; + export var keyPress: EventSimulator; + export var keyUp: EventSimulator; + export var mouseDown: EventSimulator; + export var mouseEnter: EventSimulator; + export var mouseLeave: EventSimulator; + export var mouseMove: EventSimulator; + export var mouseOut: EventSimulator; + export var mouseOver: EventSimulator; + export var mouseUp: EventSimulator; + export var paste: EventSimulator; + export var scroll: EventSimulator; + export var submit: EventSimulator; + export var touchCancel: EventSimulator; + export var touchEnd: EventSimulator; + export var touchMove: EventSimulator; + export var touchStart: EventSimulator; + export var wheel: EventSimulator; + } + + export function renderIntoDocument

( + element: ReactElement

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

( + tree: Component, + type: ComponentClass

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

( + tree: Component, + type: ComponentClass

): Component; + export function findRenderedComponentWithType>( + tree: Component, + type: ComponentClass): C; + + export function createRenderer(): ShallowRenderer; + } + } +} + +declare module "react-addons-test-utils" { + import TestUtils = __React.__Addons.TestUtils; + export = TestUtils; +} diff --git a/react/react-addons-transition-group.d.ts b/react/react-addons-transition-group.d.ts new file mode 100644 index 000000000..376bebd51 --- /dev/null +++ b/react/react-addons-transition-group.d.ts @@ -0,0 +1,22 @@ +// Type definitions for React v0.14 (react-addons-transition-group) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare namespace __React { + namespace __Addons { + interface TransitionGroupProps { + component?: ReactType; + childFactory?: (child: ReactElement) => ReactElement; + } + + type TransitionGroup = ComponentClass; + } +} + +declare module "react-addons-transition-group" { + var TransitionGroup: __React.__Addons.TransitionGroup; + export = TransitionGroup; +} \ No newline at end of file diff --git a/react/react-addons-update.d.ts b/react/react-addons-update.d.ts new file mode 100644 index 000000000..ece9e87c7 --- /dev/null +++ b/react/react-addons-update.d.ts @@ -0,0 +1,35 @@ +// Type definitions for React v0.14 (react-addons-update) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare namespace __React { + namespace __Addons { + interface UpdateSpecCommand { + $set?: any; + $merge?: {}; + $apply?(value: any): any; + } + + interface UpdateSpecPath { + [key: string]: UpdateSpec; + } + + type UpdateSpec = UpdateSpecCommand | UpdateSpecPath; + + interface UpdateArraySpec extends UpdateSpecCommand { + $push?: any[]; + $unshift?: any[]; + $splice?: any[][]; + } + + export function update(value: any[], spec: UpdateArraySpec): any[]; + export function update(value: {}, spec: UpdateSpec): any; + } +} + +declare module "react-addons-update" { + export = __React.__Addons.update; +} diff --git a/react/react-dom.d.ts b/react/react-dom.d.ts new file mode 100644 index 000000000..e0d88e04b --- /dev/null +++ b/react/react-dom.d.ts @@ -0,0 +1,71 @@ +// Type definitions for React v0.14 (react-dom) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare namespace __React { + + module __DOM { + function findDOMNode( + componentOrElement: __React.Component | Element): TElement; + function findDOMNode( + componentOrElement: __React.Component | Element): Element; + + 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; + + function unmountComponentAtNode(container: Element): boolean; + + var version: string; + + function unstable_batchedUpdates(callback: (a: A, b: B) => any, a: A, b: B): void; + function unstable_batchedUpdates(callback: (a: A) => any, a: A): void; + function unstable_batchedUpdates(callback: () => any): void; + + function unstable_renderSubtreeIntoContainer

( + parentComponent: Component, + nextElement: DOMElement

, + container: Element, + callback?: (component: DOMComponent

) => any): DOMComponent

; + function unstable_renderSubtreeIntoContainer( + parentComponent: Component, + nextElement: ClassicElement

, + container: Element, + callback?: (component: ClassicComponent) => any): ClassicComponent; + function unstable_renderSubtreeIntoContainer( + parentComponent: Component, + nextElement: ReactElement

, + container: Element, + callback?: (component: Component) => any): Component; + + + } + + namespace __DOMServer { + function renderToString(element: ReactElement): string; + function renderToStaticMarkup(element: ReactElement): string; + var version: string; + } +} + +declare module "react-dom" { + import DOM = __React.__DOM; + export = DOM; +} + +declare module "react-dom/server" { + import DOMServer = __React.__DOMServer; + export = DOMServer; +} diff --git a/react/react-global.d.ts b/react/react-global.d.ts index 1728ba2fc..4de0a8eed 100644 --- a/react/react-global.d.ts +++ b/react/react-global.d.ts @@ -1,285 +1,66 @@ -// Type definitions for React v0.13.3 (namespace) +// Type definitions for React v0.14 (namespace) // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign , Microsoft // Definitions: https://github.com/borisyankov/DefinitelyTyped /// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// import React = __React; +import ReactDOM = __React.__DOM; declare namespace __React { - // - // React.addons - // ---------------------------------------------------------------------- - - export module addons { - export var CSSTransitionGroup: CSSTransitionGroup; - export var TransitionGroup: TransitionGroup; - - export var LinkedStateMixin: LinkedStateMixin; - export var PureRenderMixin: PureRenderMixin; - - export function batchedUpdates( - callback: (a: A, b: B) => any, a: A, b: B): void; - export function batchedUpdates(callback: (a: A) => any, a: A): void; - export function batchedUpdates(callback: () => any): void; - - // deprecated: use petehunt/react-classset or JedWatson/classnames - export function classSet(cx: { [key: string]: boolean }): string; - export function classSet(...classList: string[]): string; - - export function cloneWithProps

( - element: DOMElement

, props: P): DOMElement

; - export function cloneWithProps

( - element: ClassicElement

, props: P): ClassicElement

; - export function cloneWithProps

( - element: ReactElement

, props: P): ReactElement

; - - export function createFragment( - object: { [key: string]: ReactNode }): ReactFragment; - - export function update(value: any[], spec: UpdateArraySpec): any[]; - export function update(value: {}, spec: UpdateSpec): any; - - // Development tools - export import Perf = ReactPerf; - export import TestUtils = ReactTestUtils; + namespace addons { + export var TransitionGroup: __React.__Addons.TransitionGroup; + export var CSSTransitionGroup: __React.__Addons.CSSTransitionGroup; + + export var LinkedStateMixin: __React.__Addons.LinkedStateMixin; + export var PureRenderMixin: __React.__Addons.PureRenderMixin; + + export import cloneWithProps = __React.__Addons.cloneWithProps; + export import createFragment = __React.__Addons.createFragment; + export import update = __React.__Addons.update; + + export import Perf = __React.__Addons.Perf; + export import TestUtils = __React.__Addons.TestUtils; } - // - // React.addons (Transitions) - // ---------------------------------------------------------------------- + // TransitionGroup types + export import TransitionGroupProps = __React.__Addons.TransitionGroupProps; + export import TransitionGroup = __React.__Addons.TransitionGroup; + export import CSSTransitionGroupProps = __React.__Addons.CSSTransitionGroupProps; + export import CSSTransitionGroup = __React.__Addons.CSSTransitionGroup; + + // LinkedStateMixin types + export import ReactLink = __React.__Addons.ReactLink; + export import LinkedStateMixin = __React.__Addons.LinkedStateMixin; + + // PureRenderMixin types + export import PureRenderMixin = __React.__Addons.PureRenderMixin; + + // update types + export import UpdateSpecCommand = __React.__Addons.UpdateSpecCommand; + export import UpdateSpecPath = __React.__Addons.UpdateSpecPath; + export import UpdateSpec = __React.__Addons.UpdateSpec; + export import UpdateArraySpec = __React.__Addons.UpdateArraySpec; - interface TransitionGroupProps { - component?: ReactType; - childFactory?: (child: ReactElement) => ReactElement; - } - - interface CSSTransitionGroupProps extends TransitionGroupProps { - transitionName: string; - transitionAppear?: boolean; - transitionEnter?: boolean; - transitionLeave?: boolean; - } - - type CSSTransitionGroup = ComponentClass; - type TransitionGroup = 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 UpdateSpecCommand { - $set?: any; - $merge?: {}; - $apply?(value: any): any; - } - - interface UpdateSpecPath { - [key: string]: UpdateSpec; - } - - type UpdateSpec = UpdateSpecCommand | UpdateSpecPath; - - interface UpdateArraySpec extends UpdateSpecCommand { - $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; - } - - module ReactPerf { - export function start(): void; - export function stop(): void; - export function printInclusive(measurements: Measurements[]): void; - export function printExclusive(measurements: Measurements[]): void; - export function printWasted(measurements: Measurements[]): void; - export function printDOM(measurements: Measurements[]): void; - export function getLastMeasurements(): Measurements[]; - } - - // - // React.addons.TestUtils - // ---------------------------------------------------------------------- - - interface MockedComponentClass { - new(): any; - } - - module ReactTestUtils { - export import Simulate = ReactSimulate; - - export function renderIntoDocument

( - element: ReactElement

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

( - tree: Component, - type: ComponentClass

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

( - tree: Component, - type: ComponentClass

): Component; - export function findRenderedComponentWithType>( - tree: Component, - type: ComponentClass): C; - - export function createRenderer(): ShallowRenderer; - } - - 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; - (component: Component, eventData?: SyntheticEventData): void; - } - - module ReactSimulate { - export var blur: EventSimulator; - export var change: EventSimulator; - export var click: EventSimulator; - export var cut: EventSimulator; - export var doubleClick: EventSimulator; - export var drag: EventSimulator; - export var dragEnd: EventSimulator; - export var dragEnter: EventSimulator; - export var dragExit: EventSimulator; - export var dragLeave: EventSimulator; - export var dragOver: EventSimulator; - export var dragStart: EventSimulator; - export var drop: EventSimulator; - export var focus: EventSimulator; - export var input: EventSimulator; - export var keyDown: EventSimulator; - export var keyPress: EventSimulator; - export var keyUp: EventSimulator; - export var mouseDown: EventSimulator; - export var mouseEnter: EventSimulator; - export var mouseLeave: EventSimulator; - export var mouseMove: EventSimulator; - export var mouseOut: EventSimulator; - export var mouseOver: EventSimulator; - export var mouseUp: EventSimulator; - export var paste: EventSimulator; - export var scroll: EventSimulator; - export var submit: EventSimulator; - export var touchCancel: EventSimulator; - export var touchEnd: EventSimulator; - export var touchMove: EventSimulator; - export var touchStart: EventSimulator; - export var wheel: EventSimulator; - } - - class ShallowRenderer { - getRenderOutput>(): E; - getRenderOutput(): ReactElement; - render(element: ReactElement, context?: any): void; - unmount(): void; - } + // Perf types + export import ComponentPerfContext = __React.__Addons.ComponentPerfContext; + export import NumericPerfContext = __React.__Addons.NumericPerfContext; + export import Measurements = __React.__Addons.Measurements; + + // TestUtil types + export import SyntheticEventData = __React.__Addons.SyntheticEventData; + export import EventSimulator = __React.__Addons.EventSimulator; + export import MockedComponentClass = __React.__Addons.MockedComponentClass; + export import ShallowRenderer = __React.__Addons.ShallowRenderer; } diff --git a/react/react.d.ts b/react/react.d.ts index de8ba6732..b09602838 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -1,4 +1,4 @@ -// Type definitions for React v0.13.3 +// Type definitions for React v0.14 // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign , Microsoft // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -98,29 +98,7 @@ declare namespace __React { props?: P, ...children: ReactNode[]): ReactElement

; - 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; - - 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; @@ -152,12 +130,8 @@ declare namespace __React { interface ClassicComponent extends Component { replaceState(nextState: S, callback?: () => any): void; - getDOMNode(): TElement; - getDOMNode(): Element; isMounted(): boolean; getInitialState?(): S; - setProps(nextProps: P, callback?: () => any): void; - replaceProps(nextProps: P, callback?: () => any): void; } interface DOMComponent

extends ClassicComponent { @@ -812,1085 +786,6 @@ declare module "react" { export = __React; } -declare module "react/addons" { - // - // React Elements - // ---------------------------------------------------------------------- - - type ReactType = ComponentClass | string; - - interface ReactElement

{ - type: string | ComponentClass

; - props: P; - key: string | number; - ref: string | ((component: Component) => any); - } - - 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; - - // - // 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; - type SVGElementFactory = DOMFactory; - - // - // React Nodes - // http://facebook.github.io/react/docs/glossary.html - // ---------------------------------------------------------------------- - - type ReactText = string | number; - type ReactChild = ReactElement | ReactText; - - // Should be Array but type aliases cannot be recursive - type ReactFragment = {} | Array; - type ReactNode = ReactChild | ReactFragment | boolean; - - // - // Top Level API - // ---------------------------------------------------------------------- - - function createClass(spec: ComponentSpec): ClassicComponentClass

; - - function createFactory

(type: string): DOMFactory

; - function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; - function createFactory

(type: ComponentClass

): Factory

; - - 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

; - - 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

; - - 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; - - 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 - // ---------------------------------------------------------------------- - - // Base component for plain JS classes - class Component implements ComponentLifecycle { - static propTypes: ValidationMap; - static contextTypes: ValidationMap; - static childContextTypes: ValidationMap; - static defaultProps: Props; - - constructor(props?: P, context?: any); - setState(f: (prevState: S, props: P) => S, callback?: () => any): void; - setState(state: S, callback?: () => any): void; - forceUpdate(callBack?: () => any): void; - render(): JSX.Element; - props: P; - state: S; - context: {}; - refs: { - [key: string]: Component - }; - } - - interface ClassicComponent extends Component { - replaceState(nextState: S, callback?: () => any): void; - getDOMNode(): TElement; - getDOMNode(): Element; - isMounted(): boolean; - getInitialState?(): S; - setProps(nextProps: P, callback?: () => any): void; - replaceProps(nextProps: P, callback?: () => any): void; - } - - interface DOMComponent

extends ClassicComponent { - 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; - } - - // - // 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 { - mixins?: Mixin; - statics?: { - [key: string]: any; - }; - - displayName?: string; - propTypes?: ValidationMap; - contextTypes?: ValidationMap; - childContextTypes?: ValidationMap - - getDefaultProps?(): P; - getInitialState?(): S; - } - - interface ComponentSpec extends Mixin { - render(): ReactElement; - - [propertyName: string]: any; - } - - // - // Event System - // ---------------------------------------------------------------------- - - interface SyntheticEvent { - bubbles: boolean; - cancelable: boolean; - currentTarget: EventTarget; - defaultPrevented: boolean; - eventPhase: number; - isTrusted: boolean; - nativeEvent: Event; - preventDefault(): void; - stopPropagation(): void; - target: EventTarget; - timeStamp: Date; - type: string; - } - - interface DragEvent extends SyntheticEvent { - dataTransfer: DataTransfer; - } - - interface ClipboardEvent extends SyntheticEvent { - clipboardData: DataTransfer; - } - - interface KeyboardEvent extends SyntheticEvent { - altKey: boolean; - charCode: number; - ctrlKey: boolean; - getModifierState(key: string): boolean; - key: string; - keyCode: number; - locale: string; - location: number; - metaKey: boolean; - repeat: boolean; - shiftKey: boolean; - which: number; - } - - interface FocusEvent extends SyntheticEvent { - relatedTarget: EventTarget; - } - - interface FormEvent extends SyntheticEvent { - } - - interface MouseEvent extends SyntheticEvent { - altKey: boolean; - button: number; - buttons: number; - clientX: number; - clientY: number; - ctrlKey: boolean; - getModifierState(key: string): boolean; - metaKey: boolean; - pageX: number; - pageY: number; - relatedTarget: EventTarget; - screenX: number; - screenY: number; - shiftKey: boolean; - } - - interface TouchEvent extends SyntheticEvent { - altKey: boolean; - changedTouches: TouchList; - ctrlKey: boolean; - getModifierState(key: string): boolean; - metaKey: boolean; - shiftKey: boolean; - targetTouches: TouchList; - touches: TouchList; - } - - interface UIEvent extends SyntheticEvent { - detail: number; - view: AbstractView; - } - - interface WheelEvent extends SyntheticEvent { - deltaMode: number; - deltaX: number; - deltaY: number; - deltaZ: number; - } - - // - // Event Handler Types - // ---------------------------------------------------------------------- - - interface EventHandler { - (event: E): void; - } - - interface DragEventHandler extends EventHandler {} - 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 {} - - // - // Props / DOM Attributes - // ---------------------------------------------------------------------- - - interface Props { - children?: ReactNode; - key?: string | number; - ref?: string | ((component: T) => any); - } - - interface DOMAttributesBase extends Props { - 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?: DragEventHandler; - onDragEnd?: DragEventHandler; - onDragEnter?: DragEventHandler; - onDragExit?: DragEventHandler; - onDragLeave?: DragEventHandler; - onDragOver?: DragEventHandler; - onDragStart?: DragEventHandler; - onDrop?: DragEventHandler; - 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; - - className?: string; - id?: string; - - dangerouslySetInnerHTML?: { - __html: string; - }; - } - - interface DOMAttributes extends DOMAttributesBase> { - } - - // This interface is not complete. Only properties accepting - // unitless numbers are listed here (see CSSProperty.js in React) - interface CSSProperties { - boxFlex?: number; - boxFlexGroup?: number; - columnCount?: number; - flex?: number | string; - flexGrow?: number; - flexShrink?: number; - fontWeight?: number | string; - lineClamp?: number; - lineHeight?: number | string; - opacity?: number; - order?: number; - orphans?: number; - widows?: number; - zIndex?: number; - zoom?: number; - - fontSize?: number | string; - - // SVG-related properties - fillOpacity?: number; - strokeOpacity?: number; - strokeWidth?: number; - - [propertyName: string]: any; - } - - interface HTMLAttributesBase extends DOMAttributesBase { - accept?: string; - acceptCharset?: string; - accessKey?: string; - action?: string; - allowFullScreen?: boolean; - allowTransparency?: boolean; - alt?: string; - async?: boolean; - autoComplete?: boolean; - autoFocus?: boolean; - autoPlay?: boolean; - cellPadding?: number | string; - cellSpacing?: number | string; - charSet?: string; - checked?: boolean; - classID?: string; - cols?: number; - colSpan?: number; - content?: string; - contentEditable?: boolean; - contextMenu?: string; - controls?: any; - coords?: string; - crossOrigin?: string; - data?: string; - dateTime?: string; - defaultChecked?: boolean; - defaultValue?: string; - defer?: boolean; - dir?: string; - disabled?: boolean; - download?: any; - draggable?: boolean; - encType?: string; - form?: string; - formAction?: string; - formEncType?: string; - formMethod?: string; - formNoValidate?: boolean; - formTarget?: string; - frameBorder?: number | string; - headers?: string; - height?: number | string; - hidden?: boolean; - high?: number; - href?: string; - hrefLang?: string; - htmlFor?: string; - httpEquiv?: string; - icon?: string; - label?: string; - lang?: string; - list?: string; - loop?: boolean; - low?: number; - manifest?: string; - marginHeight?: number; - marginWidth?: number; - max?: number | string; - maxLength?: number; - media?: string; - mediaGroup?: string; - method?: string; - min?: number | string; - multiple?: boolean; - muted?: boolean; - name?: string; - noValidate?: boolean; - open?: boolean; - optimum?: number; - pattern?: string; - placeholder?: string; - poster?: string; - preload?: string; - radioGroup?: string; - readOnly?: boolean; - rel?: string; - required?: boolean; - role?: string; - rows?: number; - rowSpan?: number; - sandbox?: string; - scope?: string; - scoped?: boolean; - scrolling?: string; - seamless?: boolean; - selected?: boolean; - shape?: string; - size?: number; - sizes?: string; - span?: number; - spellCheck?: boolean; - src?: string; - srcDoc?: string; - srcSet?: string; - start?: number; - step?: number | string; - style?: CSSProperties; - tabIndex?: number; - target?: string; - title?: string; - type?: string; - useMap?: string; - value?: string; - width?: number | string; - wmode?: string; - - // Non-standard Attributes - autoCapitalize?: boolean; - autoCorrect?: boolean; - property?: string; - itemProp?: string; - itemScope?: boolean; - itemType?: string; - unselectable?: boolean; - } - - interface HTMLAttributes extends HTMLAttributesBase { - } - - interface SVGElementAttributes extends HTMLAttributes { - viewBox?: string; - preserveAspectRatio?: string; - } - - interface SVGAttributes extends DOMAttributes { - ref?: string | ((component: SVGComponent) => void); - - cx?: number | string; - cy?: number | string; - d?: string; - dx?: number | string; - dy?: number | string; - fill?: string; - fillOpacity?: number | string; - fontFamily?: string; - fontSize?: number | string; - fx?: number | string; - fy?: number | string; - gradientTransform?: string; - gradientUnits?: string; - height?: number | string; - markerEnd?: string; - markerMid?: string; - markerStart?: string; - offset?: number | string; - opacity?: number | string; - patternContentUnits?: string; - patternUnits?: string; - points?: string; - preserveAspectRatio?: string; - r?: number | string; - rx?: number | string; - ry?: number | string; - spreadMethod?: string; - stopColor?: string; - stopOpacity?: number | string; - stroke?: string; - strokeDasharray?: string; - strokeLinecap?: string; - strokeMiterlimit?: string; - strokeOpacity?: number | string; - strokeWidth?: number | string; - textAnchor?: string; - transform?: string; - version?: string; - viewBox?: string; - width?: number | string; - x1?: number | string; - x2?: number | string; - x?: number | string; - y1?: number | string; - y2?: number | string - y?: number | string; - } - - // - // React.DOM - // ---------------------------------------------------------------------- - - interface ReactDOM { - // HTML - a: HTMLFactory; - abbr: HTMLFactory; - address: HTMLFactory; - area: HTMLFactory; - article: HTMLFactory; - aside: HTMLFactory; - audio: HTMLFactory; - b: HTMLFactory; - base: HTMLFactory; - bdi: HTMLFactory; - bdo: HTMLFactory; - big: HTMLFactory; - blockquote: HTMLFactory; - body: HTMLFactory; - br: HTMLFactory; - button: HTMLFactory; - canvas: HTMLFactory; - caption: HTMLFactory; - cite: HTMLFactory; - code: HTMLFactory; - col: HTMLFactory; - colgroup: HTMLFactory; - data: HTMLFactory; - datalist: HTMLFactory; - dd: HTMLFactory; - del: HTMLFactory; - details: HTMLFactory; - dfn: HTMLFactory; - dialog: HTMLFactory; - div: HTMLFactory; - dl: HTMLFactory; - dt: HTMLFactory; - em: HTMLFactory; - embed: HTMLFactory; - fieldset: HTMLFactory; - figcaption: HTMLFactory; - figure: HTMLFactory; - footer: HTMLFactory; - form: HTMLFactory; - h1: HTMLFactory; - h2: HTMLFactory; - h3: HTMLFactory; - h4: HTMLFactory; - h5: HTMLFactory; - h6: HTMLFactory; - head: HTMLFactory; - header: HTMLFactory; - hr: HTMLFactory; - html: HTMLFactory; - i: HTMLFactory; - iframe: HTMLFactory; - img: HTMLFactory; - input: HTMLFactory; - ins: HTMLFactory; - kbd: HTMLFactory; - keygen: HTMLFactory; - label: HTMLFactory; - legend: HTMLFactory; - li: HTMLFactory; - link: HTMLFactory; - main: HTMLFactory; - map: HTMLFactory; - mark: HTMLFactory; - menu: HTMLFactory; - menuitem: HTMLFactory; - meta: HTMLFactory; - meter: HTMLFactory; - nav: HTMLFactory; - noscript: HTMLFactory; - object: HTMLFactory; - ol: HTMLFactory; - optgroup: HTMLFactory; - option: HTMLFactory; - output: HTMLFactory; - p: HTMLFactory; - param: HTMLFactory; - picture: HTMLFactory; - pre: HTMLFactory; - progress: HTMLFactory; - q: HTMLFactory; - rp: HTMLFactory; - rt: HTMLFactory; - ruby: HTMLFactory; - s: HTMLFactory; - samp: HTMLFactory; - script: HTMLFactory; - section: HTMLFactory; - select: HTMLFactory; - small: HTMLFactory; - source: HTMLFactory; - span: HTMLFactory; - strong: HTMLFactory; - style: HTMLFactory; - sub: HTMLFactory; - summary: HTMLFactory; - sup: HTMLFactory; - table: HTMLFactory; - tbody: HTMLFactory; - td: HTMLFactory; - textarea: HTMLFactory; - tfoot: HTMLFactory; - th: HTMLFactory; - thead: HTMLFactory; - time: HTMLFactory; - title: HTMLFactory; - tr: HTMLFactory; - track: HTMLFactory; - u: HTMLFactory; - ul: HTMLFactory; - "var": HTMLFactory; - video: HTMLFactory; - wbr: HTMLFactory; - - // SVG - svg: SVGElementFactory; - circle: SVGFactory; - defs: SVGFactory; - ellipse: SVGFactory; - g: SVGFactory; - line: SVGFactory; - linearGradient: SVGFactory; - mask: SVGFactory; - path: SVGFactory; - pattern: SVGFactory; - polygon: SVGFactory; - polyline: SVGFactory; - radialGradient: SVGFactory; - rect: SVGFactory; - stop: SVGFactory; - text: SVGFactory; - tspan: SVGFactory; - } - - // - // React.PropTypes - // ---------------------------------------------------------------------- - - interface Validator { - (object: T, key: string, componentName: string): Error; - } - - interface Requireable extends Validator { - isRequired: Validator; - } - - interface ValidationMap { - [key: string]: Validator; - } - - 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; - } - - // - // React.Children - // ---------------------------------------------------------------------- - - interface ReactChildren { - map(children: ReactNode, fn: (child: ReactChild, index: number) => T): { [key:string]: T }; - forEach(children: ReactNode, fn: (child: ReactChild, index: number) => any): void; - count(children: ReactNode): number; - only(children: ReactNode): ReactChild; - } - - // - // Browser Interfaces - // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts - // ---------------------------------------------------------------------- - - interface AbstractView { - styleMedia: StyleMedia; - document: Document; - } - - interface Touch { - identifier: number; - target: EventTarget; - screenX: number; - screenY: number; - clientX: number; - clientY: number; - pageX: number; - pageY: number; - } - - interface TouchList { - [index: number]: Touch; - length: number; - item(index: number): Touch; - identifiedTouch(identifier: number): Touch; - } - - // - // React.addons - // ---------------------------------------------------------------------- - - export module addons { - export var CSSTransitionGroup: CSSTransitionGroup; - export var TransitionGroup: TransitionGroup; - - export var LinkedStateMixin: LinkedStateMixin; - export var PureRenderMixin: PureRenderMixin; - - export function batchedUpdates( - callback: (a: A, b: B) => any, a: A, b: B): void; - export function batchedUpdates(callback: (a: A) => any, a: A): void; - export function batchedUpdates(callback: () => any): void; - - // deprecated: use petehunt/react-classset or JedWatson/classnames - export function classSet(cx: { [key: string]: boolean }): string; - export function classSet(...classList: string[]): string; - - export function cloneWithProps

( - element: DOMElement

, props: P): DOMElement

; - export function cloneWithProps

( - element: ClassicElement

, props: P): ClassicElement

; - export function cloneWithProps

( - element: ReactElement

, props: P): ReactElement

; - - export function createFragment( - object: { [key: string]: ReactNode }): ReactFragment; - - export function update(value: any[], spec: UpdateArraySpec): any[]; - export function update(value: {}, spec: UpdateSpec): any; - - // Development tools - export import Perf = ReactPerf; - export import TestUtils = ReactTestUtils; - } - - // - // React.addons (Transitions) - // ---------------------------------------------------------------------- - - interface TransitionGroupProps { - component?: ReactType; - childFactory?: (child: ReactElement) => ReactElement; - } - - interface CSSTransitionGroupProps extends TransitionGroupProps { - transitionName: string; - transitionAppear?: boolean; - transitionEnter?: boolean; - transitionLeave?: boolean; - } - - type CSSTransitionGroup = ComponentClass; - type TransitionGroup = 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 UpdateSpecCommand { - $set?: any; - $merge?: {}; - $apply?(value: any): any; - } - - interface UpdateSpecPath { - [key: string]: UpdateSpec; - } - - type UpdateSpec = UpdateSpecCommand | UpdateSpecPath; - - interface UpdateArraySpec extends UpdateSpecCommand { - $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; - } - - module ReactPerf { - export function start(): void; - export function stop(): void; - export function printInclusive(measurements: Measurements[]): void; - export function printExclusive(measurements: Measurements[]): void; - export function printWasted(measurements: Measurements[]): void; - export function printDOM(measurements: Measurements[]): void; - export function getLastMeasurements(): Measurements[]; - } - - // - // React.addons.TestUtils - // ---------------------------------------------------------------------- - - interface MockedComponentClass { - new(): any; - } - - module ReactTestUtils { - export import Simulate = ReactSimulate; - - export function renderIntoDocument

( - element: ReactElement

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

( - tree: Component, - type: ComponentClass

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

( - tree: Component, - type: ComponentClass

): Component; - export function findRenderedComponentWithType>( - tree: Component, - type: ComponentClass): C; - - export function createRenderer(): ShallowRenderer; - } - - 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; - (component: Component, eventData?: SyntheticEventData): void; - } - - module ReactSimulate { - export var blur: EventSimulator; - export var change: EventSimulator; - export var click: EventSimulator; - export var cut: EventSimulator; - export var doubleClick: EventSimulator; - export var drag: EventSimulator; - export var dragEnd: EventSimulator; - export var dragEnter: EventSimulator; - export var dragExit: EventSimulator; - export var dragLeave: EventSimulator; - export var dragOver: EventSimulator; - export var dragStart: EventSimulator; - export var drop: EventSimulator; - export var focus: EventSimulator; - export var input: EventSimulator; - export var keyDown: EventSimulator; - export var keyPress: EventSimulator; - export var keyUp: EventSimulator; - export var mouseDown: EventSimulator; - export var mouseEnter: EventSimulator; - export var mouseLeave: EventSimulator; - export var mouseMove: EventSimulator; - export var mouseOut: EventSimulator; - export var mouseOver: EventSimulator; - export var mouseUp: EventSimulator; - export var paste: EventSimulator; - export var scroll: EventSimulator; - export var submit: EventSimulator; - export var touchCancel: EventSimulator; - export var touchEnd: EventSimulator; - export var touchMove: EventSimulator; - export var touchStart: EventSimulator; - export var wheel: EventSimulator; - } - - class ShallowRenderer { - getRenderOutput>(): E; - getRenderOutput(): ReactElement; - render(element: ReactElement, context?: any): void; - unmount(): void; - } -} - declare namespace JSX { import React = __React; From f2ff7464b5cd7f6dc41228f7950f55ece27d1c07 Mon Sep 17 00:00:00 2001 From: James Brantly Date: Wed, 14 Oct 2015 19:41:57 -0400 Subject: [PATCH 03/23] Remove cloneWithProps since it's deprecated --- react/react-addons-clone-with-props.d.ts | 18 ------------------ react/react-global.d.ts | 2 -- 2 files changed, 20 deletions(-) delete mode 100644 react/react-addons-clone-with-props.d.ts diff --git a/react/react-addons-clone-with-props.d.ts b/react/react-addons-clone-with-props.d.ts deleted file mode 100644 index 137c6650c..000000000 --- a/react/react-addons-clone-with-props.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -// Type definitions for React v0.14 (react-addons-clone-with-props) -// Project: http://facebook.github.io/react/ -// Definitions by: Asana , AssureSign , Microsoft -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// - -declare namespace __React { - namespace __Addons { - export function cloneWithProps

(element: __React.DOMElement

, props: P): __React.DOMElement

; - export function cloneWithProps

(element: __React.ClassicElement

, props: P): __React.ClassicElement

; - export function cloneWithProps

(element: __React.ReactElement

, props: P): __React.ReactElement

; - } -} - -declare module "react-addons-clone-with-props" { - export = __React.__Addons.cloneWithProps; -} diff --git a/react/react-global.d.ts b/react/react-global.d.ts index 4de0a8eed..3ed029240 100644 --- a/react/react-global.d.ts +++ b/react/react-global.d.ts @@ -4,7 +4,6 @@ // Definitions: https://github.com/borisyankov/DefinitelyTyped /// -/// /// /// /// @@ -26,7 +25,6 @@ declare namespace __React { export var LinkedStateMixin: __React.__Addons.LinkedStateMixin; export var PureRenderMixin: __React.__Addons.PureRenderMixin; - export import cloneWithProps = __React.__Addons.cloneWithProps; export import createFragment = __React.__Addons.createFragment; export import update = __React.__Addons.update; From 6186be126ad03fc0c767a962833edfa98239ced7 Mon Sep 17 00:00:00 2001 From: James Brantly Date: Wed, 14 Oct 2015 20:47:57 -0400 Subject: [PATCH 04/23] Export types as well as variables for certain addons --- react/react-addons-css-transition-group.d.ts | 1 + react/react-addons-linked-state-mixin.d.ts | 1 + react/react-addons-pure-render-mixin.d.ts | 1 + react/react-addons-transition-group.d.ts | 1 + 4 files changed, 4 insertions(+) diff --git a/react/react-addons-css-transition-group.d.ts b/react/react-addons-css-transition-group.d.ts index 99db1f4f4..bcc347124 100644 --- a/react/react-addons-css-transition-group.d.ts +++ b/react/react-addons-css-transition-group.d.ts @@ -21,5 +21,6 @@ declare namespace __React { declare module "react-addons-css-transition-group" { var CSSTransitionGroup: __React.__Addons.CSSTransitionGroup; + type CSSTransitionGroup = __React.__Addons.CSSTransitionGroup; export = CSSTransitionGroup; } diff --git a/react/react-addons-linked-state-mixin.d.ts b/react/react-addons-linked-state-mixin.d.ts index a98caa384..ce1022cd8 100644 --- a/react/react-addons-linked-state-mixin.d.ts +++ b/react/react-addons-linked-state-mixin.d.ts @@ -20,5 +20,6 @@ declare namespace __React { declare module "react-addons-linked-state-mixin" { var LinkedStateMixin: __React.__Addons.LinkedStateMixin; + type LinkedStateMixin = __React.__Addons.LinkedStateMixin; export = LinkedStateMixin; } diff --git a/react/react-addons-pure-render-mixin.d.ts b/react/react-addons-pure-render-mixin.d.ts index 741046d90..cc73a714d 100644 --- a/react/react-addons-pure-render-mixin.d.ts +++ b/react/react-addons-pure-render-mixin.d.ts @@ -13,5 +13,6 @@ declare namespace __React { declare module "react-addons-pure-render-mixin" { var PureRenderMixin: __React.__Addons.PureRenderMixin; + type PureRenderMixin = __React.__Addons.PureRenderMixin; export = PureRenderMixin; } diff --git a/react/react-addons-transition-group.d.ts b/react/react-addons-transition-group.d.ts index 376bebd51..fac2d76bc 100644 --- a/react/react-addons-transition-group.d.ts +++ b/react/react-addons-transition-group.d.ts @@ -18,5 +18,6 @@ declare namespace __React { declare module "react-addons-transition-group" { var TransitionGroup: __React.__Addons.TransitionGroup; + type TransitionGroup = __React.__Addons.TransitionGroup; export = TransitionGroup; } \ No newline at end of file From 8eb584e9cf92d0457ecbbc9980ce6d634a69cba2 Mon Sep 17 00:00:00 2001 From: James Brantly Date: Wed, 14 Oct 2015 20:52:17 -0400 Subject: [PATCH 05/23] Add legacy files for v0.13 --- react/react-0.13.3.d.ts | 2038 ++++++++++++++++++++++++++++++++ react/react-global-0.13.3.d.ts | 285 +++++ 2 files changed, 2323 insertions(+) create mode 100644 react/react-0.13.3.d.ts create mode 100644 react/react-global-0.13.3.d.ts diff --git a/react/react-0.13.3.d.ts b/react/react-0.13.3.d.ts new file mode 100644 index 000000000..de8ba6732 --- /dev/null +++ b/react/react-0.13.3.d.ts @@ -0,0 +1,2038 @@ +// Type definitions for React v0.13.3 +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +declare namespace __React { + // + // React Elements + // ---------------------------------------------------------------------- + + type ReactType = ComponentClass | string; + + interface ReactElement

{ + type: string | ComponentClass

; + props: P; + key: string | number; + ref: string | ((component: Component) => any); + } + + 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; + + // + // 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; + type SVGElementFactory = DOMFactory; + + // + // React Nodes + // http://facebook.github.io/react/docs/glossary.html + // ---------------------------------------------------------------------- + + type ReactText = string | number; + type ReactChild = ReactElement | ReactText; + + // Should be Array but type aliases cannot be recursive + type ReactFragment = {} | Array; + type ReactNode = ReactChild | ReactFragment | boolean; + + // + // Top Level API + // ---------------------------------------------------------------------- + + function createClass(spec: ComponentSpec): ClassicComponentClass

; + + function createFactory

(type: string): DOMFactory

; + function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; + function createFactory

(type: ComponentClass

): Factory

; + + 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

; + + 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

; + + 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; + + 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 + // ---------------------------------------------------------------------- + + // Base component for plain JS classes + class Component implements ComponentLifecycle { + static propTypes: ValidationMap; + static contextTypes: ValidationMap; + static childContextTypes: ValidationMap; + static defaultProps: Props; + + constructor(props?: P, context?: any); + setState(f: (prevState: S, props: P) => S, callback?: () => any): void; + setState(state: S, callback?: () => any): void; + forceUpdate(callBack?: () => any): void; + render(): JSX.Element; + props: P; + state: S; + context: {}; + refs: { + [key: string]: Component + }; + } + + interface ClassicComponent extends Component { + replaceState(nextState: S, callback?: () => any): void; + getDOMNode(): TElement; + getDOMNode(): Element; + isMounted(): boolean; + getInitialState?(): S; + setProps(nextProps: P, callback?: () => any): void; + replaceProps(nextProps: P, callback?: () => any): void; + } + + interface DOMComponent

extends ClassicComponent { + 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; + } + + // + // 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 { + mixins?: Mixin; + statics?: { + [key: string]: any; + }; + + displayName?: string; + propTypes?: ValidationMap; + contextTypes?: ValidationMap; + childContextTypes?: ValidationMap + + getDefaultProps?(): P; + getInitialState?(): S; + } + + interface ComponentSpec extends Mixin { + render(): ReactElement; + + [propertyName: string]: any; + } + + // + // Event System + // ---------------------------------------------------------------------- + + interface SyntheticEvent { + bubbles: boolean; + cancelable: boolean; + currentTarget: EventTarget; + defaultPrevented: boolean; + eventPhase: number; + isTrusted: boolean; + nativeEvent: Event; + preventDefault(): void; + stopPropagation(): void; + target: EventTarget; + timeStamp: Date; + type: string; + } + + interface DragEvent extends SyntheticEvent { + dataTransfer: DataTransfer; + } + + interface ClipboardEvent extends SyntheticEvent { + clipboardData: DataTransfer; + } + + interface KeyboardEvent extends SyntheticEvent { + altKey: boolean; + charCode: number; + ctrlKey: boolean; + getModifierState(key: string): boolean; + key: string; + keyCode: number; + locale: string; + location: number; + metaKey: boolean; + repeat: boolean; + shiftKey: boolean; + which: number; + } + + interface FocusEvent extends SyntheticEvent { + relatedTarget: EventTarget; + } + + interface FormEvent extends SyntheticEvent { + } + + interface MouseEvent extends SyntheticEvent { + altKey: boolean; + button: number; + buttons: number; + clientX: number; + clientY: number; + ctrlKey: boolean; + getModifierState(key: string): boolean; + metaKey: boolean; + pageX: number; + pageY: number; + relatedTarget: EventTarget; + screenX: number; + screenY: number; + shiftKey: boolean; + } + + interface TouchEvent extends SyntheticEvent { + altKey: boolean; + changedTouches: TouchList; + ctrlKey: boolean; + getModifierState(key: string): boolean; + metaKey: boolean; + shiftKey: boolean; + targetTouches: TouchList; + touches: TouchList; + } + + interface UIEvent extends SyntheticEvent { + detail: number; + view: AbstractView; + } + + interface WheelEvent extends SyntheticEvent { + deltaMode: number; + deltaX: number; + deltaY: number; + deltaZ: number; + } + + // + // Event Handler Types + // ---------------------------------------------------------------------- + + interface EventHandler { + (event: E): void; + } + + interface DragEventHandler extends EventHandler {} + 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 {} + + // + // Props / DOM Attributes + // ---------------------------------------------------------------------- + + interface Props { + children?: ReactNode; + key?: string | number; + ref?: string | ((component: T) => any); + } + + interface DOMAttributesBase extends Props { + onCopy?: ClipboardEventHandler; + onCut?: ClipboardEventHandler; + onPaste?: ClipboardEventHandler; + onKeyDown?: KeyboardEventHandler; + onKeyPress?: KeyboardEventHandler; + onKeyUp?: KeyboardEventHandler; + onFocus?: FocusEventHandler; + onBlur?: FocusEventHandler; + onChange?: FormEventHandler; + onInput?: FormEventHandler; + onSubmit?: FormEventHandler; + onClick?: MouseEventHandler; + onContextMenu?: MouseEventHandler; + onDoubleClick?: MouseEventHandler; + onDrag?: DragEventHandler; + onDragEnd?: DragEventHandler; + onDragEnter?: DragEventHandler; + onDragExit?: DragEventHandler; + onDragLeave?: DragEventHandler; + onDragOver?: DragEventHandler; + onDragStart?: DragEventHandler; + onDrop?: DragEventHandler; + 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; + + className?: string; + id?: string; + + dangerouslySetInnerHTML?: { + __html: string; + }; + } + + interface DOMAttributes extends DOMAttributesBase> { + } + + // This interface is not complete. Only properties accepting + // unitless numbers are listed here (see CSSProperty.js in React) + interface CSSProperties { + boxFlex?: number; + boxFlexGroup?: number; + columnCount?: number; + flex?: number | string; + flexGrow?: number; + flexShrink?: number; + fontWeight?: number | string; + lineClamp?: number; + lineHeight?: number | string; + opacity?: number; + order?: number; + orphans?: number; + widows?: number; + zIndex?: number; + zoom?: number; + + fontSize?: number | string; + + // SVG-related properties + fillOpacity?: number; + strokeOpacity?: number; + strokeWidth?: number; + + [propertyName: string]: any; + } + + interface HTMLAttributesBase extends DOMAttributesBase { + accept?: string; + acceptCharset?: string; + accessKey?: string; + action?: string; + allowFullScreen?: boolean; + allowTransparency?: boolean; + alt?: string; + async?: boolean; + autoComplete?: boolean; + autoFocus?: boolean; + autoPlay?: boolean; + cellPadding?: number | string; + cellSpacing?: number | string; + charSet?: string; + checked?: boolean; + classID?: string; + cols?: number; + colSpan?: number; + content?: string; + contentEditable?: boolean; + contextMenu?: string; + controls?: any; + coords?: string; + crossOrigin?: string; + data?: string; + dateTime?: string; + defaultChecked?: boolean; + defaultValue?: string; + defer?: boolean; + dir?: string; + disabled?: boolean; + download?: any; + draggable?: boolean; + encType?: string; + form?: string; + formAction?: string; + formEncType?: string; + formMethod?: string; + formNoValidate?: boolean; + formTarget?: string; + frameBorder?: number | string; + headers?: string; + height?: number | string; + hidden?: boolean; + high?: number; + href?: string; + hrefLang?: string; + htmlFor?: string; + httpEquiv?: string; + icon?: string; + label?: string; + lang?: string; + list?: string; + loop?: boolean; + low?: number; + manifest?: string; + marginHeight?: number; + marginWidth?: number; + max?: number | string; + maxLength?: number; + media?: string; + mediaGroup?: string; + method?: string; + min?: number | string; + multiple?: boolean; + muted?: boolean; + name?: string; + noValidate?: boolean; + open?: boolean; + optimum?: number; + pattern?: string; + placeholder?: string; + poster?: string; + preload?: string; + radioGroup?: string; + readOnly?: boolean; + rel?: string; + required?: boolean; + role?: string; + rows?: number; + rowSpan?: number; + sandbox?: string; + scope?: string; + scoped?: boolean; + scrolling?: string; + seamless?: boolean; + selected?: boolean; + shape?: string; + size?: number; + sizes?: string; + span?: number; + spellCheck?: boolean; + src?: string; + srcDoc?: string; + srcSet?: string; + start?: number; + step?: number | string; + style?: CSSProperties; + tabIndex?: number; + target?: string; + title?: string; + type?: string; + useMap?: string; + value?: string; + width?: number | string; + wmode?: string; + + // Non-standard Attributes + autoCapitalize?: boolean; + autoCorrect?: boolean; + property?: string; + itemProp?: string; + itemScope?: boolean; + itemType?: string; + unselectable?: boolean; + } + + interface HTMLAttributes extends HTMLAttributesBase { + } + + interface SVGElementAttributes extends HTMLAttributes { + viewBox?: string; + preserveAspectRatio?: string; + } + + interface SVGAttributes extends DOMAttributes { + ref?: string | ((component: SVGComponent) => void); + + cx?: number | string; + cy?: number | string; + d?: string; + dx?: number | string; + dy?: number | string; + fill?: string; + fillOpacity?: number | string; + fontFamily?: string; + fontSize?: number | string; + fx?: number | string; + fy?: number | string; + gradientTransform?: string; + gradientUnits?: string; + height?: number | string; + markerEnd?: string; + markerMid?: string; + markerStart?: string; + offset?: number | string; + opacity?: number | string; + patternContentUnits?: string; + patternUnits?: string; + points?: string; + preserveAspectRatio?: string; + r?: number | string; + rx?: number | string; + ry?: number | string; + spreadMethod?: string; + stopColor?: string; + stopOpacity?: number | string; + stroke?: string; + strokeDasharray?: string; + strokeLinecap?: string; + strokeMiterlimit?: string; + strokeOpacity?: number | string; + strokeWidth?: number | string; + textAnchor?: string; + transform?: string; + version?: string; + viewBox?: string; + width?: number | string; + x1?: number | string; + x2?: number | string; + x?: number | string; + y1?: number | string; + y2?: number | string + y?: number | string; + } + + // + // React.DOM + // ---------------------------------------------------------------------- + + interface ReactDOM { + // HTML + a: HTMLFactory; + abbr: HTMLFactory; + address: HTMLFactory; + area: HTMLFactory; + article: HTMLFactory; + aside: HTMLFactory; + audio: HTMLFactory; + b: HTMLFactory; + base: HTMLFactory; + bdi: HTMLFactory; + bdo: HTMLFactory; + big: HTMLFactory; + blockquote: HTMLFactory; + body: HTMLFactory; + br: HTMLFactory; + button: HTMLFactory; + canvas: HTMLFactory; + caption: HTMLFactory; + cite: HTMLFactory; + code: HTMLFactory; + col: HTMLFactory; + colgroup: HTMLFactory; + data: HTMLFactory; + datalist: HTMLFactory; + dd: HTMLFactory; + del: HTMLFactory; + details: HTMLFactory; + dfn: HTMLFactory; + dialog: HTMLFactory; + div: HTMLFactory; + dl: HTMLFactory; + dt: HTMLFactory; + em: HTMLFactory; + embed: HTMLFactory; + fieldset: HTMLFactory; + figcaption: HTMLFactory; + figure: HTMLFactory; + footer: HTMLFactory; + form: HTMLFactory; + h1: HTMLFactory; + h2: HTMLFactory; + h3: HTMLFactory; + h4: HTMLFactory; + h5: HTMLFactory; + h6: HTMLFactory; + head: HTMLFactory; + header: HTMLFactory; + hr: HTMLFactory; + html: HTMLFactory; + i: HTMLFactory; + iframe: HTMLFactory; + img: HTMLFactory; + input: HTMLFactory; + ins: HTMLFactory; + kbd: HTMLFactory; + keygen: HTMLFactory; + label: HTMLFactory; + legend: HTMLFactory; + li: HTMLFactory; + link: HTMLFactory; + main: HTMLFactory; + map: HTMLFactory; + mark: HTMLFactory; + menu: HTMLFactory; + menuitem: HTMLFactory; + meta: HTMLFactory; + meter: HTMLFactory; + nav: HTMLFactory; + noscript: HTMLFactory; + object: HTMLFactory; + ol: HTMLFactory; + optgroup: HTMLFactory; + option: HTMLFactory; + output: HTMLFactory; + p: HTMLFactory; + param: HTMLFactory; + picture: HTMLFactory; + pre: HTMLFactory; + progress: HTMLFactory; + q: HTMLFactory; + rp: HTMLFactory; + rt: HTMLFactory; + ruby: HTMLFactory; + s: HTMLFactory; + samp: HTMLFactory; + script: HTMLFactory; + section: HTMLFactory; + select: HTMLFactory; + small: HTMLFactory; + source: HTMLFactory; + span: HTMLFactory; + strong: HTMLFactory; + style: HTMLFactory; + sub: HTMLFactory; + summary: HTMLFactory; + sup: HTMLFactory; + table: HTMLFactory; + tbody: HTMLFactory; + td: HTMLFactory; + textarea: HTMLFactory; + tfoot: HTMLFactory; + th: HTMLFactory; + thead: HTMLFactory; + time: HTMLFactory; + title: HTMLFactory; + tr: HTMLFactory; + track: HTMLFactory; + u: HTMLFactory; + ul: HTMLFactory; + "var": HTMLFactory; + video: HTMLFactory; + wbr: HTMLFactory; + + // SVG + svg: SVGElementFactory; + circle: SVGFactory; + defs: SVGFactory; + ellipse: SVGFactory; + g: SVGFactory; + line: SVGFactory; + linearGradient: SVGFactory; + mask: SVGFactory; + path: SVGFactory; + pattern: SVGFactory; + polygon: SVGFactory; + polyline: SVGFactory; + radialGradient: SVGFactory; + rect: SVGFactory; + stop: SVGFactory; + text: SVGFactory; + tspan: SVGFactory; + } + + // + // React.PropTypes + // ---------------------------------------------------------------------- + + interface Validator { + (object: T, key: string, componentName: string): Error; + } + + interface Requireable extends Validator { + isRequired: Validator; + } + + interface ValidationMap { + [key: string]: Validator; + } + + 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; + } + + // + // React.Children + // ---------------------------------------------------------------------- + + interface ReactChildren { + map(children: ReactNode, fn: (child: ReactChild, index: number) => T): { [key:string]: T }; + forEach(children: ReactNode, fn: (child: ReactChild, index: number) => any): void; + count(children: ReactNode): number; + only(children: ReactNode): ReactChild; + } + + // + // Browser Interfaces + // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts + // ---------------------------------------------------------------------- + + interface AbstractView { + styleMedia: StyleMedia; + document: Document; + } + + interface Touch { + identifier: number; + target: EventTarget; + screenX: number; + screenY: number; + clientX: number; + clientY: number; + pageX: number; + pageY: number; + } + + interface TouchList { + [index: number]: Touch; + length: number; + item(index: number): Touch; + identifiedTouch(identifier: number): Touch; + } +} + +declare module "react" { + export = __React; +} + +declare module "react/addons" { + // + // React Elements + // ---------------------------------------------------------------------- + + type ReactType = ComponentClass | string; + + interface ReactElement

{ + type: string | ComponentClass

; + props: P; + key: string | number; + ref: string | ((component: Component) => any); + } + + 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; + + // + // 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; + type SVGElementFactory = DOMFactory; + + // + // React Nodes + // http://facebook.github.io/react/docs/glossary.html + // ---------------------------------------------------------------------- + + type ReactText = string | number; + type ReactChild = ReactElement | ReactText; + + // Should be Array but type aliases cannot be recursive + type ReactFragment = {} | Array; + type ReactNode = ReactChild | ReactFragment | boolean; + + // + // Top Level API + // ---------------------------------------------------------------------- + + function createClass(spec: ComponentSpec): ClassicComponentClass

; + + function createFactory

(type: string): DOMFactory

; + function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; + function createFactory

(type: ComponentClass

): Factory

; + + 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

; + + 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

; + + 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; + + 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 + // ---------------------------------------------------------------------- + + // Base component for plain JS classes + class Component implements ComponentLifecycle { + static propTypes: ValidationMap; + static contextTypes: ValidationMap; + static childContextTypes: ValidationMap; + static defaultProps: Props; + + constructor(props?: P, context?: any); + setState(f: (prevState: S, props: P) => S, callback?: () => any): void; + setState(state: S, callback?: () => any): void; + forceUpdate(callBack?: () => any): void; + render(): JSX.Element; + props: P; + state: S; + context: {}; + refs: { + [key: string]: Component + }; + } + + interface ClassicComponent extends Component { + replaceState(nextState: S, callback?: () => any): void; + getDOMNode(): TElement; + getDOMNode(): Element; + isMounted(): boolean; + getInitialState?(): S; + setProps(nextProps: P, callback?: () => any): void; + replaceProps(nextProps: P, callback?: () => any): void; + } + + interface DOMComponent

extends ClassicComponent { + 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; + } + + // + // 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 { + mixins?: Mixin; + statics?: { + [key: string]: any; + }; + + displayName?: string; + propTypes?: ValidationMap; + contextTypes?: ValidationMap; + childContextTypes?: ValidationMap + + getDefaultProps?(): P; + getInitialState?(): S; + } + + interface ComponentSpec extends Mixin { + render(): ReactElement; + + [propertyName: string]: any; + } + + // + // Event System + // ---------------------------------------------------------------------- + + interface SyntheticEvent { + bubbles: boolean; + cancelable: boolean; + currentTarget: EventTarget; + defaultPrevented: boolean; + eventPhase: number; + isTrusted: boolean; + nativeEvent: Event; + preventDefault(): void; + stopPropagation(): void; + target: EventTarget; + timeStamp: Date; + type: string; + } + + interface DragEvent extends SyntheticEvent { + dataTransfer: DataTransfer; + } + + interface ClipboardEvent extends SyntheticEvent { + clipboardData: DataTransfer; + } + + interface KeyboardEvent extends SyntheticEvent { + altKey: boolean; + charCode: number; + ctrlKey: boolean; + getModifierState(key: string): boolean; + key: string; + keyCode: number; + locale: string; + location: number; + metaKey: boolean; + repeat: boolean; + shiftKey: boolean; + which: number; + } + + interface FocusEvent extends SyntheticEvent { + relatedTarget: EventTarget; + } + + interface FormEvent extends SyntheticEvent { + } + + interface MouseEvent extends SyntheticEvent { + altKey: boolean; + button: number; + buttons: number; + clientX: number; + clientY: number; + ctrlKey: boolean; + getModifierState(key: string): boolean; + metaKey: boolean; + pageX: number; + pageY: number; + relatedTarget: EventTarget; + screenX: number; + screenY: number; + shiftKey: boolean; + } + + interface TouchEvent extends SyntheticEvent { + altKey: boolean; + changedTouches: TouchList; + ctrlKey: boolean; + getModifierState(key: string): boolean; + metaKey: boolean; + shiftKey: boolean; + targetTouches: TouchList; + touches: TouchList; + } + + interface UIEvent extends SyntheticEvent { + detail: number; + view: AbstractView; + } + + interface WheelEvent extends SyntheticEvent { + deltaMode: number; + deltaX: number; + deltaY: number; + deltaZ: number; + } + + // + // Event Handler Types + // ---------------------------------------------------------------------- + + interface EventHandler { + (event: E): void; + } + + interface DragEventHandler extends EventHandler {} + 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 {} + + // + // Props / DOM Attributes + // ---------------------------------------------------------------------- + + interface Props { + children?: ReactNode; + key?: string | number; + ref?: string | ((component: T) => any); + } + + interface DOMAttributesBase extends Props { + 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?: DragEventHandler; + onDragEnd?: DragEventHandler; + onDragEnter?: DragEventHandler; + onDragExit?: DragEventHandler; + onDragLeave?: DragEventHandler; + onDragOver?: DragEventHandler; + onDragStart?: DragEventHandler; + onDrop?: DragEventHandler; + 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; + + className?: string; + id?: string; + + dangerouslySetInnerHTML?: { + __html: string; + }; + } + + interface DOMAttributes extends DOMAttributesBase> { + } + + // This interface is not complete. Only properties accepting + // unitless numbers are listed here (see CSSProperty.js in React) + interface CSSProperties { + boxFlex?: number; + boxFlexGroup?: number; + columnCount?: number; + flex?: number | string; + flexGrow?: number; + flexShrink?: number; + fontWeight?: number | string; + lineClamp?: number; + lineHeight?: number | string; + opacity?: number; + order?: number; + orphans?: number; + widows?: number; + zIndex?: number; + zoom?: number; + + fontSize?: number | string; + + // SVG-related properties + fillOpacity?: number; + strokeOpacity?: number; + strokeWidth?: number; + + [propertyName: string]: any; + } + + interface HTMLAttributesBase extends DOMAttributesBase { + accept?: string; + acceptCharset?: string; + accessKey?: string; + action?: string; + allowFullScreen?: boolean; + allowTransparency?: boolean; + alt?: string; + async?: boolean; + autoComplete?: boolean; + autoFocus?: boolean; + autoPlay?: boolean; + cellPadding?: number | string; + cellSpacing?: number | string; + charSet?: string; + checked?: boolean; + classID?: string; + cols?: number; + colSpan?: number; + content?: string; + contentEditable?: boolean; + contextMenu?: string; + controls?: any; + coords?: string; + crossOrigin?: string; + data?: string; + dateTime?: string; + defaultChecked?: boolean; + defaultValue?: string; + defer?: boolean; + dir?: string; + disabled?: boolean; + download?: any; + draggable?: boolean; + encType?: string; + form?: string; + formAction?: string; + formEncType?: string; + formMethod?: string; + formNoValidate?: boolean; + formTarget?: string; + frameBorder?: number | string; + headers?: string; + height?: number | string; + hidden?: boolean; + high?: number; + href?: string; + hrefLang?: string; + htmlFor?: string; + httpEquiv?: string; + icon?: string; + label?: string; + lang?: string; + list?: string; + loop?: boolean; + low?: number; + manifest?: string; + marginHeight?: number; + marginWidth?: number; + max?: number | string; + maxLength?: number; + media?: string; + mediaGroup?: string; + method?: string; + min?: number | string; + multiple?: boolean; + muted?: boolean; + name?: string; + noValidate?: boolean; + open?: boolean; + optimum?: number; + pattern?: string; + placeholder?: string; + poster?: string; + preload?: string; + radioGroup?: string; + readOnly?: boolean; + rel?: string; + required?: boolean; + role?: string; + rows?: number; + rowSpan?: number; + sandbox?: string; + scope?: string; + scoped?: boolean; + scrolling?: string; + seamless?: boolean; + selected?: boolean; + shape?: string; + size?: number; + sizes?: string; + span?: number; + spellCheck?: boolean; + src?: string; + srcDoc?: string; + srcSet?: string; + start?: number; + step?: number | string; + style?: CSSProperties; + tabIndex?: number; + target?: string; + title?: string; + type?: string; + useMap?: string; + value?: string; + width?: number | string; + wmode?: string; + + // Non-standard Attributes + autoCapitalize?: boolean; + autoCorrect?: boolean; + property?: string; + itemProp?: string; + itemScope?: boolean; + itemType?: string; + unselectable?: boolean; + } + + interface HTMLAttributes extends HTMLAttributesBase { + } + + interface SVGElementAttributes extends HTMLAttributes { + viewBox?: string; + preserveAspectRatio?: string; + } + + interface SVGAttributes extends DOMAttributes { + ref?: string | ((component: SVGComponent) => void); + + cx?: number | string; + cy?: number | string; + d?: string; + dx?: number | string; + dy?: number | string; + fill?: string; + fillOpacity?: number | string; + fontFamily?: string; + fontSize?: number | string; + fx?: number | string; + fy?: number | string; + gradientTransform?: string; + gradientUnits?: string; + height?: number | string; + markerEnd?: string; + markerMid?: string; + markerStart?: string; + offset?: number | string; + opacity?: number | string; + patternContentUnits?: string; + patternUnits?: string; + points?: string; + preserveAspectRatio?: string; + r?: number | string; + rx?: number | string; + ry?: number | string; + spreadMethod?: string; + stopColor?: string; + stopOpacity?: number | string; + stroke?: string; + strokeDasharray?: string; + strokeLinecap?: string; + strokeMiterlimit?: string; + strokeOpacity?: number | string; + strokeWidth?: number | string; + textAnchor?: string; + transform?: string; + version?: string; + viewBox?: string; + width?: number | string; + x1?: number | string; + x2?: number | string; + x?: number | string; + y1?: number | string; + y2?: number | string + y?: number | string; + } + + // + // React.DOM + // ---------------------------------------------------------------------- + + interface ReactDOM { + // HTML + a: HTMLFactory; + abbr: HTMLFactory; + address: HTMLFactory; + area: HTMLFactory; + article: HTMLFactory; + aside: HTMLFactory; + audio: HTMLFactory; + b: HTMLFactory; + base: HTMLFactory; + bdi: HTMLFactory; + bdo: HTMLFactory; + big: HTMLFactory; + blockquote: HTMLFactory; + body: HTMLFactory; + br: HTMLFactory; + button: HTMLFactory; + canvas: HTMLFactory; + caption: HTMLFactory; + cite: HTMLFactory; + code: HTMLFactory; + col: HTMLFactory; + colgroup: HTMLFactory; + data: HTMLFactory; + datalist: HTMLFactory; + dd: HTMLFactory; + del: HTMLFactory; + details: HTMLFactory; + dfn: HTMLFactory; + dialog: HTMLFactory; + div: HTMLFactory; + dl: HTMLFactory; + dt: HTMLFactory; + em: HTMLFactory; + embed: HTMLFactory; + fieldset: HTMLFactory; + figcaption: HTMLFactory; + figure: HTMLFactory; + footer: HTMLFactory; + form: HTMLFactory; + h1: HTMLFactory; + h2: HTMLFactory; + h3: HTMLFactory; + h4: HTMLFactory; + h5: HTMLFactory; + h6: HTMLFactory; + head: HTMLFactory; + header: HTMLFactory; + hr: HTMLFactory; + html: HTMLFactory; + i: HTMLFactory; + iframe: HTMLFactory; + img: HTMLFactory; + input: HTMLFactory; + ins: HTMLFactory; + kbd: HTMLFactory; + keygen: HTMLFactory; + label: HTMLFactory; + legend: HTMLFactory; + li: HTMLFactory; + link: HTMLFactory; + main: HTMLFactory; + map: HTMLFactory; + mark: HTMLFactory; + menu: HTMLFactory; + menuitem: HTMLFactory; + meta: HTMLFactory; + meter: HTMLFactory; + nav: HTMLFactory; + noscript: HTMLFactory; + object: HTMLFactory; + ol: HTMLFactory; + optgroup: HTMLFactory; + option: HTMLFactory; + output: HTMLFactory; + p: HTMLFactory; + param: HTMLFactory; + picture: HTMLFactory; + pre: HTMLFactory; + progress: HTMLFactory; + q: HTMLFactory; + rp: HTMLFactory; + rt: HTMLFactory; + ruby: HTMLFactory; + s: HTMLFactory; + samp: HTMLFactory; + script: HTMLFactory; + section: HTMLFactory; + select: HTMLFactory; + small: HTMLFactory; + source: HTMLFactory; + span: HTMLFactory; + strong: HTMLFactory; + style: HTMLFactory; + sub: HTMLFactory; + summary: HTMLFactory; + sup: HTMLFactory; + table: HTMLFactory; + tbody: HTMLFactory; + td: HTMLFactory; + textarea: HTMLFactory; + tfoot: HTMLFactory; + th: HTMLFactory; + thead: HTMLFactory; + time: HTMLFactory; + title: HTMLFactory; + tr: HTMLFactory; + track: HTMLFactory; + u: HTMLFactory; + ul: HTMLFactory; + "var": HTMLFactory; + video: HTMLFactory; + wbr: HTMLFactory; + + // SVG + svg: SVGElementFactory; + circle: SVGFactory; + defs: SVGFactory; + ellipse: SVGFactory; + g: SVGFactory; + line: SVGFactory; + linearGradient: SVGFactory; + mask: SVGFactory; + path: SVGFactory; + pattern: SVGFactory; + polygon: SVGFactory; + polyline: SVGFactory; + radialGradient: SVGFactory; + rect: SVGFactory; + stop: SVGFactory; + text: SVGFactory; + tspan: SVGFactory; + } + + // + // React.PropTypes + // ---------------------------------------------------------------------- + + interface Validator { + (object: T, key: string, componentName: string): Error; + } + + interface Requireable extends Validator { + isRequired: Validator; + } + + interface ValidationMap { + [key: string]: Validator; + } + + 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; + } + + // + // React.Children + // ---------------------------------------------------------------------- + + interface ReactChildren { + map(children: ReactNode, fn: (child: ReactChild, index: number) => T): { [key:string]: T }; + forEach(children: ReactNode, fn: (child: ReactChild, index: number) => any): void; + count(children: ReactNode): number; + only(children: ReactNode): ReactChild; + } + + // + // Browser Interfaces + // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts + // ---------------------------------------------------------------------- + + interface AbstractView { + styleMedia: StyleMedia; + document: Document; + } + + interface Touch { + identifier: number; + target: EventTarget; + screenX: number; + screenY: number; + clientX: number; + clientY: number; + pageX: number; + pageY: number; + } + + interface TouchList { + [index: number]: Touch; + length: number; + item(index: number): Touch; + identifiedTouch(identifier: number): Touch; + } + + // + // React.addons + // ---------------------------------------------------------------------- + + export module addons { + export var CSSTransitionGroup: CSSTransitionGroup; + export var TransitionGroup: TransitionGroup; + + export var LinkedStateMixin: LinkedStateMixin; + export var PureRenderMixin: PureRenderMixin; + + export function batchedUpdates( + callback: (a: A, b: B) => any, a: A, b: B): void; + export function batchedUpdates(callback: (a: A) => any, a: A): void; + export function batchedUpdates(callback: () => any): void; + + // deprecated: use petehunt/react-classset or JedWatson/classnames + export function classSet(cx: { [key: string]: boolean }): string; + export function classSet(...classList: string[]): string; + + export function cloneWithProps

( + element: DOMElement

, props: P): DOMElement

; + export function cloneWithProps

( + element: ClassicElement

, props: P): ClassicElement

; + export function cloneWithProps

( + element: ReactElement

, props: P): ReactElement

; + + export function createFragment( + object: { [key: string]: ReactNode }): ReactFragment; + + export function update(value: any[], spec: UpdateArraySpec): any[]; + export function update(value: {}, spec: UpdateSpec): any; + + // Development tools + export import Perf = ReactPerf; + export import TestUtils = ReactTestUtils; + } + + // + // React.addons (Transitions) + // ---------------------------------------------------------------------- + + interface TransitionGroupProps { + component?: ReactType; + childFactory?: (child: ReactElement) => ReactElement; + } + + interface CSSTransitionGroupProps extends TransitionGroupProps { + transitionName: string; + transitionAppear?: boolean; + transitionEnter?: boolean; + transitionLeave?: boolean; + } + + type CSSTransitionGroup = ComponentClass; + type TransitionGroup = 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 UpdateSpecCommand { + $set?: any; + $merge?: {}; + $apply?(value: any): any; + } + + interface UpdateSpecPath { + [key: string]: UpdateSpec; + } + + type UpdateSpec = UpdateSpecCommand | UpdateSpecPath; + + interface UpdateArraySpec extends UpdateSpecCommand { + $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; + } + + module ReactPerf { + export function start(): void; + export function stop(): void; + export function printInclusive(measurements: Measurements[]): void; + export function printExclusive(measurements: Measurements[]): void; + export function printWasted(measurements: Measurements[]): void; + export function printDOM(measurements: Measurements[]): void; + export function getLastMeasurements(): Measurements[]; + } + + // + // React.addons.TestUtils + // ---------------------------------------------------------------------- + + interface MockedComponentClass { + new(): any; + } + + module ReactTestUtils { + export import Simulate = ReactSimulate; + + export function renderIntoDocument

( + element: ReactElement

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

( + tree: Component, + type: ComponentClass

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

( + tree: Component, + type: ComponentClass

): Component; + export function findRenderedComponentWithType>( + tree: Component, + type: ComponentClass): C; + + export function createRenderer(): ShallowRenderer; + } + + 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; + (component: Component, eventData?: SyntheticEventData): void; + } + + module ReactSimulate { + export var blur: EventSimulator; + export var change: EventSimulator; + export var click: EventSimulator; + export var cut: EventSimulator; + export var doubleClick: EventSimulator; + export var drag: EventSimulator; + export var dragEnd: EventSimulator; + export var dragEnter: EventSimulator; + export var dragExit: EventSimulator; + export var dragLeave: EventSimulator; + export var dragOver: EventSimulator; + export var dragStart: EventSimulator; + export var drop: EventSimulator; + export var focus: EventSimulator; + export var input: EventSimulator; + export var keyDown: EventSimulator; + export var keyPress: EventSimulator; + export var keyUp: EventSimulator; + export var mouseDown: EventSimulator; + export var mouseEnter: EventSimulator; + export var mouseLeave: EventSimulator; + export var mouseMove: EventSimulator; + export var mouseOut: EventSimulator; + export var mouseOver: EventSimulator; + export var mouseUp: EventSimulator; + export var paste: EventSimulator; + export var scroll: EventSimulator; + export var submit: EventSimulator; + export var touchCancel: EventSimulator; + export var touchEnd: EventSimulator; + export var touchMove: EventSimulator; + export var touchStart: EventSimulator; + export var wheel: EventSimulator; + } + + class ShallowRenderer { + getRenderOutput>(): E; + getRenderOutput(): ReactElement; + render(element: ReactElement, context?: any): void; + unmount(): void; + } +} + +declare namespace JSX { + import React = __React; + + interface Element extends React.ReactElement { } + interface ElementClass extends React.Component { + render(): JSX.Element; + } + interface ElementAttributesProperty { props: {}; } + + interface IntrinsicElements { + // HTML + a: React.HTMLAttributes; + abbr: React.HTMLAttributes; + address: React.HTMLAttributes; + area: React.HTMLAttributes; + article: React.HTMLAttributes; + aside: React.HTMLAttributes; + audio: React.HTMLAttributes; + b: React.HTMLAttributes; + base: React.HTMLAttributes; + bdi: React.HTMLAttributes; + bdo: React.HTMLAttributes; + big: React.HTMLAttributes; + blockquote: React.HTMLAttributes; + body: React.HTMLAttributes; + br: React.HTMLAttributes; + button: React.HTMLAttributes; + canvas: React.HTMLAttributes; + caption: React.HTMLAttributes; + cite: React.HTMLAttributes; + code: React.HTMLAttributes; + col: React.HTMLAttributes; + colgroup: React.HTMLAttributes; + data: React.HTMLAttributes; + datalist: React.HTMLAttributes; + dd: React.HTMLAttributes; + del: React.HTMLAttributes; + details: React.HTMLAttributes; + dfn: React.HTMLAttributes; + dialog: React.HTMLAttributes; + div: React.HTMLAttributes; + dl: React.HTMLAttributes; + dt: React.HTMLAttributes; + em: React.HTMLAttributes; + embed: React.HTMLAttributes; + fieldset: React.HTMLAttributes; + figcaption: React.HTMLAttributes; + figure: React.HTMLAttributes; + footer: React.HTMLAttributes; + form: React.HTMLAttributes; + h1: React.HTMLAttributes; + h2: React.HTMLAttributes; + h3: React.HTMLAttributes; + h4: React.HTMLAttributes; + h5: React.HTMLAttributes; + h6: React.HTMLAttributes; + head: React.HTMLAttributes; + header: React.HTMLAttributes; + hr: React.HTMLAttributes; + html: React.HTMLAttributes; + i: React.HTMLAttributes; + iframe: React.HTMLAttributes; + img: React.HTMLAttributes; + input: React.HTMLAttributes; + ins: React.HTMLAttributes; + kbd: React.HTMLAttributes; + keygen: React.HTMLAttributes; + label: React.HTMLAttributes; + legend: React.HTMLAttributes; + li: React.HTMLAttributes; + link: React.HTMLAttributes; + main: React.HTMLAttributes; + map: React.HTMLAttributes; + mark: React.HTMLAttributes; + menu: React.HTMLAttributes; + menuitem: React.HTMLAttributes; + meta: React.HTMLAttributes; + meter: React.HTMLAttributes; + nav: React.HTMLAttributes; + noscript: React.HTMLAttributes; + object: React.HTMLAttributes; + ol: React.HTMLAttributes; + optgroup: React.HTMLAttributes; + option: React.HTMLAttributes; + output: React.HTMLAttributes; + p: React.HTMLAttributes; + param: React.HTMLAttributes; + picture: React.HTMLAttributes; + pre: React.HTMLAttributes; + progress: React.HTMLAttributes; + q: React.HTMLAttributes; + rp: React.HTMLAttributes; + rt: React.HTMLAttributes; + ruby: React.HTMLAttributes; + s: React.HTMLAttributes; + samp: React.HTMLAttributes; + script: React.HTMLAttributes; + section: React.HTMLAttributes; + select: React.HTMLAttributes; + small: React.HTMLAttributes; + source: React.HTMLAttributes; + span: React.HTMLAttributes; + strong: React.HTMLAttributes; + style: React.HTMLAttributes; + sub: React.HTMLAttributes; + summary: React.HTMLAttributes; + sup: React.HTMLAttributes; + table: React.HTMLAttributes; + tbody: React.HTMLAttributes; + td: React.HTMLAttributes; + textarea: React.HTMLAttributes; + tfoot: React.HTMLAttributes; + th: React.HTMLAttributes; + thead: React.HTMLAttributes; + time: React.HTMLAttributes; + title: React.HTMLAttributes; + tr: React.HTMLAttributes; + track: React.HTMLAttributes; + u: React.HTMLAttributes; + ul: React.HTMLAttributes; + "var": React.HTMLAttributes; + video: React.HTMLAttributes; + wbr: React.HTMLAttributes; + + // SVG + svg: React.SVGElementAttributes; + + circle: React.SVGAttributes; + defs: React.SVGAttributes; + ellipse: React.SVGAttributes; + g: React.SVGAttributes; + line: React.SVGAttributes; + linearGradient: React.SVGAttributes; + mask: React.SVGAttributes; + path: React.SVGAttributes; + pattern: React.SVGAttributes; + polygon: React.SVGAttributes; + polyline: React.SVGAttributes; + radialGradient: React.SVGAttributes; + rect: React.SVGAttributes; + stop: React.SVGAttributes; + text: React.SVGAttributes; + tspan: React.SVGAttributes; + } +} diff --git a/react/react-global-0.13.3.d.ts b/react/react-global-0.13.3.d.ts new file mode 100644 index 000000000..1728ba2fc --- /dev/null +++ b/react/react-global-0.13.3.d.ts @@ -0,0 +1,285 @@ +// Type definitions for React v0.13.3 (namespace) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +import React = __React; + +declare namespace __React { + // + // React.addons + // ---------------------------------------------------------------------- + + export module addons { + export var CSSTransitionGroup: CSSTransitionGroup; + export var TransitionGroup: TransitionGroup; + + export var LinkedStateMixin: LinkedStateMixin; + export var PureRenderMixin: PureRenderMixin; + + export function batchedUpdates( + callback: (a: A, b: B) => any, a: A, b: B): void; + export function batchedUpdates(callback: (a: A) => any, a: A): void; + export function batchedUpdates(callback: () => any): void; + + // deprecated: use petehunt/react-classset or JedWatson/classnames + export function classSet(cx: { [key: string]: boolean }): string; + export function classSet(...classList: string[]): string; + + export function cloneWithProps

( + element: DOMElement

, props: P): DOMElement

; + export function cloneWithProps

( + element: ClassicElement

, props: P): ClassicElement

; + export function cloneWithProps

( + element: ReactElement

, props: P): ReactElement

; + + export function createFragment( + object: { [key: string]: ReactNode }): ReactFragment; + + export function update(value: any[], spec: UpdateArraySpec): any[]; + export function update(value: {}, spec: UpdateSpec): any; + + // Development tools + export import Perf = ReactPerf; + export import TestUtils = ReactTestUtils; + } + + // + // React.addons (Transitions) + // ---------------------------------------------------------------------- + + interface TransitionGroupProps { + component?: ReactType; + childFactory?: (child: ReactElement) => ReactElement; + } + + interface CSSTransitionGroupProps extends TransitionGroupProps { + transitionName: string; + transitionAppear?: boolean; + transitionEnter?: boolean; + transitionLeave?: boolean; + } + + type CSSTransitionGroup = ComponentClass; + type TransitionGroup = 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 UpdateSpecCommand { + $set?: any; + $merge?: {}; + $apply?(value: any): any; + } + + interface UpdateSpecPath { + [key: string]: UpdateSpec; + } + + type UpdateSpec = UpdateSpecCommand | UpdateSpecPath; + + interface UpdateArraySpec extends UpdateSpecCommand { + $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; + } + + module ReactPerf { + export function start(): void; + export function stop(): void; + export function printInclusive(measurements: Measurements[]): void; + export function printExclusive(measurements: Measurements[]): void; + export function printWasted(measurements: Measurements[]): void; + export function printDOM(measurements: Measurements[]): void; + export function getLastMeasurements(): Measurements[]; + } + + // + // React.addons.TestUtils + // ---------------------------------------------------------------------- + + interface MockedComponentClass { + new(): any; + } + + module ReactTestUtils { + export import Simulate = ReactSimulate; + + export function renderIntoDocument

( + element: ReactElement

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

( + tree: Component, + type: ComponentClass

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

( + tree: Component, + type: ComponentClass

): Component; + export function findRenderedComponentWithType>( + tree: Component, + type: ComponentClass): C; + + export function createRenderer(): ShallowRenderer; + } + + 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; + (component: Component, eventData?: SyntheticEventData): void; + } + + module ReactSimulate { + export var blur: EventSimulator; + export var change: EventSimulator; + export var click: EventSimulator; + export var cut: EventSimulator; + export var doubleClick: EventSimulator; + export var drag: EventSimulator; + export var dragEnd: EventSimulator; + export var dragEnter: EventSimulator; + export var dragExit: EventSimulator; + export var dragLeave: EventSimulator; + export var dragOver: EventSimulator; + export var dragStart: EventSimulator; + export var drop: EventSimulator; + export var focus: EventSimulator; + export var input: EventSimulator; + export var keyDown: EventSimulator; + export var keyPress: EventSimulator; + export var keyUp: EventSimulator; + export var mouseDown: EventSimulator; + export var mouseEnter: EventSimulator; + export var mouseLeave: EventSimulator; + export var mouseMove: EventSimulator; + export var mouseOut: EventSimulator; + export var mouseOver: EventSimulator; + export var mouseUp: EventSimulator; + export var paste: EventSimulator; + export var scroll: EventSimulator; + export var submit: EventSimulator; + export var touchCancel: EventSimulator; + export var touchEnd: EventSimulator; + export var touchMove: EventSimulator; + export var touchStart: EventSimulator; + export var wheel: EventSimulator; + } + + class ShallowRenderer { + getRenderOutput>(): E; + getRenderOutput(): ReactElement; + render(element: ReactElement, context?: any): void; + unmount(): void; + } +} From f9e6e567f4da28108dd99317203251565eb325e3 Mon Sep 17 00:00:00 2001 From: James Brantly Date: Wed, 14 Oct 2015 20:55:48 -0400 Subject: [PATCH 06/23] Fix `module` => `namespace` --- react/react-dom.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/react-dom.d.ts b/react/react-dom.d.ts index e0d88e04b..a2183b7ea 100644 --- a/react/react-dom.d.ts +++ b/react/react-dom.d.ts @@ -7,7 +7,7 @@ declare namespace __React { - module __DOM { + namespace __DOM { function findDOMNode( componentOrElement: __React.Component | Element): TElement; function findDOMNode( From bf061642b06726ed8f4dac0afa62b51e20e64151 Mon Sep 17 00:00:00 2001 From: Tom Hasner Date: Mon, 2 Nov 2015 22:58:46 -0500 Subject: [PATCH 07/23] Write typings for `React.Children.toArray` and `React.Children.map` --- react/react-addons-tests.ts | 3 ++- react/react-global-tests.ts | 3 ++- react/react-tests.ts | 3 ++- react/react.d.ts | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts index 4d8ed3212..72f7a4f4e 100644 --- a/react/react-addons-tests.ts +++ b/react/react-addons-tests.ts @@ -331,11 +331,12 @@ var ContextTypesSpecification: React.ComponentSpec = { // React.Children // -------------------------------------------------------------------------- -var childMap: { [key: string]: number } = +var mappedChildrenArray: 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]); +var childrenToArray: React.ReactChild[] = React.Children.toArray(children); // // Example from http://facebook.github.io/react/ diff --git a/react/react-global-tests.ts b/react/react-global-tests.ts index 0b20e4650..bf3f68fa4 100644 --- a/react/react-global-tests.ts +++ b/react/react-global-tests.ts @@ -328,11 +328,12 @@ var ContextTypesSpecification: React.ComponentSpec = { // React.Children // -------------------------------------------------------------------------- -var childMap: { [key: string]: number } = +var mappedChildrenArray: 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]); +var childrenToArray: React.ReactChild[] = React.Children.toArray(children); // // Example from http://facebook.github.io/react/ diff --git a/react/react-tests.ts b/react/react-tests.ts index 053a17eb9..f0c1060bd 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -329,11 +329,12 @@ var ContextTypesSpecification: React.ComponentSpec = { // React.Children // -------------------------------------------------------------------------- -var childMap: { [key: string]: number } = +var mappedChildrenArray: 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]); +var childrenToArray: React.ReactChild[] = React.Children.toArray(children); // // Example from http://facebook.github.io/react/ diff --git a/react/react.d.ts b/react/react.d.ts index b09602838..975d228cc 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -747,10 +747,11 @@ declare namespace __React { // ---------------------------------------------------------------------- interface ReactChildren { - map(children: ReactNode, fn: (child: ReactChild, index: number) => T): { [key:string]: T }; + map(children: ReactNode, fn: (child: ReactChild, index: number) => T): T[]; forEach(children: ReactNode, fn: (child: ReactChild, index: number) => any): void; count(children: ReactNode): number; only(children: ReactNode): ReactChild; + toArray(children: ReactNode): ReactChild[]; } // From 619033254cc5aa13e2ee96e1fe4070b4b9de128a Mon Sep 17 00:00:00 2001 From: James Brantly Date: Thu, 5 Nov 2015 07:01:14 -0500 Subject: [PATCH 08/23] Update tests for v0.14 and refactor how addons expose interfaces. --- react/react-addons-css-transition-group.d.ts | 22 +- react/react-addons-linked-state-mixin.d.ts | 22 +- react/react-addons-perf.d.ts | 42 +- react/react-addons-pure-render-mixin.d.ts | 8 +- react/react-addons-test-utils.d.ts | 98 ++--- react/react-addons-tests.ts | 416 ------------------- react/react-addons-transition-group.d.ts | 19 +- react/react-addons-update.d.ts | 36 +- react/react-global-tests.ts | 113 ++++- react/react-global.d.ts | 46 +- react/react-tests.ts | 130 +++++- 11 files changed, 345 insertions(+), 607 deletions(-) delete mode 100644 react/react-addons-tests.ts diff --git a/react/react-addons-css-transition-group.d.ts b/react/react-addons-css-transition-group.d.ts index bcc347124..fb1d1ab83 100644 --- a/react/react-addons-css-transition-group.d.ts +++ b/react/react-addons-css-transition-group.d.ts @@ -7,20 +7,22 @@ /// declare namespace __React { + interface CSSTransitionGroupProps extends TransitionGroupProps { + transitionName: string; + transitionAppear?: boolean; + transitionEnter?: boolean; + transitionLeave?: boolean; + } + + type CSSTransitionGroup = ComponentClass; + namespace __Addons { - interface CSSTransitionGroupProps extends TransitionGroupProps { - transitionName: string; - transitionAppear?: boolean; - transitionEnter?: boolean; - transitionLeave?: boolean; - } - - type CSSTransitionGroup = ComponentClass; + export var CSSTransitionGroup: __React.CSSTransitionGroup; } } declare module "react-addons-css-transition-group" { - var CSSTransitionGroup: __React.__Addons.CSSTransitionGroup; - type CSSTransitionGroup = __React.__Addons.CSSTransitionGroup; + var CSSTransitionGroup: __React.CSSTransitionGroup; + type CSSTransitionGroup = __React.CSSTransitionGroup; export = CSSTransitionGroup; } diff --git a/react/react-addons-linked-state-mixin.d.ts b/react/react-addons-linked-state-mixin.d.ts index ce1022cd8..5cee5fd5d 100644 --- a/react/react-addons-linked-state-mixin.d.ts +++ b/react/react-addons-linked-state-mixin.d.ts @@ -6,20 +6,22 @@ /// declare namespace __React { - namespace __Addons { - interface ReactLink { - value: T; - requestChange(newValue: T): void; - } + interface ReactLink { + value: T; + requestChange(newValue: T): void; + } + + interface LinkedStateMixin extends Mixin { + linkState(key: string): ReactLink; + } - interface LinkedStateMixin extends Mixin { - linkState(key: string): ReactLink; - } + namespace __Addons { + export var LinkedStateMixin: LinkedStateMixin; } } declare module "react-addons-linked-state-mixin" { - var LinkedStateMixin: __React.__Addons.LinkedStateMixin; - type LinkedStateMixin = __React.__Addons.LinkedStateMixin; + var LinkedStateMixin: __React.LinkedStateMixin; + type LinkedStateMixin = __React.LinkedStateMixin; export = LinkedStateMixin; } diff --git a/react/react-addons-perf.d.ts b/react/react-addons-perf.d.ts index 7ca369db8..22a9381ef 100644 --- a/react/react-addons-perf.d.ts +++ b/react/react-addons-perf.d.ts @@ -6,28 +6,28 @@ /// declare namespace __React { + 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; + } + namespace __Addons { - 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; - } - namespace Perf { export function start(): void; export function stop(): void; diff --git a/react/react-addons-pure-render-mixin.d.ts b/react/react-addons-pure-render-mixin.d.ts index cc73a714d..83b4aee3d 100644 --- a/react/react-addons-pure-render-mixin.d.ts +++ b/react/react-addons-pure-render-mixin.d.ts @@ -6,13 +6,15 @@ /// declare namespace __React { + interface PureRenderMixin extends Mixin {} + namespace __Addons { - interface PureRenderMixin extends Mixin {} + export var PureRenderMixin: PureRenderMixin; } } declare module "react-addons-pure-render-mixin" { - var PureRenderMixin: __React.__Addons.PureRenderMixin; - type PureRenderMixin = __React.__Addons.PureRenderMixin; + var PureRenderMixin: __React.PureRenderMixin; + type PureRenderMixin = __React.PureRenderMixin; export = PureRenderMixin; } diff --git a/react/react-addons-test-utils.d.ts b/react/react-addons-test-utils.d.ts index 13f433657..1362f64c1 100644 --- a/react/react-addons-test-utils.d.ts +++ b/react/react-addons-test-utils.d.ts @@ -6,57 +6,57 @@ /// declare namespace __React { - namespace __Addons { - 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 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; + (component: Component, eventData?: SyntheticEventData): void; + } - interface EventSimulator { - (element: Element, eventData?: SyntheticEventData): void; - (component: Component, eventData?: SyntheticEventData): void; - } - - interface MockedComponentClass { - new(): any; - } - - class ShallowRenderer { - getRenderOutput>(): E; - getRenderOutput(): ReactElement; - render(element: ReactElement, context?: any): void; - unmount(): void; - } + interface MockedComponentClass { + new(): any; + } + + class ShallowRenderer { + getRenderOutput>(): E; + getRenderOutput(): ReactElement; + render(element: ReactElement, context?: any): void; + unmount(): void; + } + namespace __Addons { namespace TestUtils { namespace Simulate { export var blur: EventSimulator; diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts deleted file mode 100644 index 72f7a4f4e..000000000 --- a/react/react-addons-tests.ts +++ /dev/null @@ -1,416 +0,0 @@ -/// -import React = require("react/addons"); - -import TestUtils = React.addons.TestUtils; - -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 - }; - }, - // NOTE https://github.com/borisyankov/DefinitelyTyped/pull/5590 - // 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 - } - - static defaultProps: Props; - - context: Context; - - 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: any[] = ["Hello world", [null], React.DOM.span(null)]; -var divStyle: React.CSSProperties = { // 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.DOM.svg({ viewBox: "0 0 48 48" }, - React.DOM.rect({ - x: 22, - y: 10, - width: 4, - height: 28 - }), - React.DOM.rect({ - x: 10, - y: 22, - width: 28, - height: 4 - })); - -// -// 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 mappedChildrenArray: 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]); -var childrenToArray: React.ReactChild[] = React.Children.toArray(children); - -// -// Example from http://facebook.github.io/react/ -// -------------------------------------------------------------------------- - -interface TimerState { - secondsElapsed: number; -} -class Timer extends React.Component, TimerState> { - 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; -TestUtils.Simulate.click(node); -TestUtils.Simulate.change(node); -TestUtils.Simulate.keyDown(node, { key: "Enter" }); - -var renderer: React.ShallowRenderer = - TestUtils.createRenderer(); -renderer.render(React.createElement(Timer)); -var output: React.ReactElement> = - renderer.getRenderOutput(); diff --git a/react/react-addons-transition-group.d.ts b/react/react-addons-transition-group.d.ts index fac2d76bc..728c52aa8 100644 --- a/react/react-addons-transition-group.d.ts +++ b/react/react-addons-transition-group.d.ts @@ -6,18 +6,21 @@ /// declare namespace __React { + + interface TransitionGroupProps { + component?: ReactType; + childFactory?: (child: ReactElement) => ReactElement; + } + + type TransitionGroup = ComponentClass; + namespace __Addons { - interface TransitionGroupProps { - component?: ReactType; - childFactory?: (child: ReactElement) => ReactElement; - } - - type TransitionGroup = ComponentClass; + export var TransitionGroup: __React.TransitionGroup; } } declare module "react-addons-transition-group" { - var TransitionGroup: __React.__Addons.TransitionGroup; - type TransitionGroup = __React.__Addons.TransitionGroup; + var TransitionGroup: __React.TransitionGroup; + type TransitionGroup = __React.TransitionGroup; export = TransitionGroup; } \ No newline at end of file diff --git a/react/react-addons-update.d.ts b/react/react-addons-update.d.ts index ece9e87c7..2140e2908 100644 --- a/react/react-addons-update.d.ts +++ b/react/react-addons-update.d.ts @@ -6,25 +6,25 @@ /// declare namespace __React { + interface UpdateSpecCommand { + $set?: any; + $merge?: {}; + $apply?(value: any): any; + } + + interface UpdateSpecPath { + [key: string]: UpdateSpec; + } + + type UpdateSpec = UpdateSpecCommand | UpdateSpecPath; + + interface UpdateArraySpec extends UpdateSpecCommand { + $push?: any[]; + $unshift?: any[]; + $splice?: any[][]; + } + namespace __Addons { - interface UpdateSpecCommand { - $set?: any; - $merge?: {}; - $apply?(value: any): any; - } - - interface UpdateSpecPath { - [key: string]: UpdateSpec; - } - - type UpdateSpec = UpdateSpecCommand | UpdateSpecPath; - - interface UpdateArraySpec extends UpdateSpecCommand { - $push?: any[]; - $unshift?: any[]; - $splice?: any[][]; - } - export function update(value: any[], spec: UpdateArraySpec): any[]; export function update(value: {}, spec: UpdateSpec): any; } diff --git a/react/react-global-tests.ts b/react/react-global-tests.ts index bf3f68fa4..18596358b 100644 --- a/react/react-global-tests.ts +++ b/react/react-global-tests.ts @@ -148,21 +148,22 @@ var clonedDOMElement: React.HTMLElement = // React.render var component: React.Component = - React.render(element, container); + ReactDOM.render(element, container); var classicComponent: React.ClassicComponent = - React.render(classicElement, container); + ReactDOM.render(classicElement, container); var domComponent: React.DOMComponent = - React.render(domElement, container); + ReactDOM.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 unmounted: boolean = ReactDOM.unmountComponentAtNode(container); + +// ReactDOMServer is not supported in global version +// var str: string = ReactDOMServer.renderToString(element); +// var markup: string = ReactDOMServer.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); +var domNode: Element = ReactDOM.findDOMNode(component); +domNode = ReactDOM.findDOMNode(domNode); // // React Elements @@ -190,11 +191,7 @@ 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; @@ -366,5 +363,93 @@ class Timer extends React.Component<{}, TimerState> { ); } } -React.render(React.createElement(Timer), container); +ReactDOM.render(React.createElement(Timer), container); +// +// createFragment addon +// -------------------------------------------------------------------------- +React.addons.createFragment({ + a: React.DOM.div(), + b: ["a", false, React.createElement("span")] +}); + +// +// CSSTransitionGroup addon +// -------------------------------------------------------------------------- +React.createFactory(React.addons.CSSTransitionGroup)({ + component: React.createClass({ + render: (): React.ReactElement => null + }), + childFactory: (c) => c, + transitionName: "transition", + transitionAppear: false, + transitionEnter: true, + transitionLeave: true +}); + +// +// LinkedStateMixin addon +// -------------------------------------------------------------------------- +React.createClass({ + mixins: [React.addons.LinkedStateMixin], + render: function() { return React.DOM.div(null) } +}); + +// +// Perf addon +// -------------------------------------------------------------------------- +React.addons.Perf.start(); +React.addons.Perf.stop(); +var measurements = React.addons.Perf.getLastMeasurements(); +React.addons.Perf.printInclusive(measurements); +React.addons.Perf.printExclusive(measurements); +React.addons.Perf.printWasted(measurements); +React.addons.Perf.printDOM(measurements); + +// +// PureRenderMixin addon +// -------------------------------------------------------------------------- +React.createClass({ + mixins: [React.addons.PureRenderMixin], + render: function() { return React.DOM.div(null) } +}); + +// +// TestUtils addon +// -------------------------------------------------------------------------- +var node: Element; +React.addons.TestUtils.Simulate.click(node); +React.addons.TestUtils.Simulate.change(node); +React.addons.TestUtils.Simulate.keyDown(node, { key: "Enter" }); + +var renderer: React.ShallowRenderer = + React.addons.TestUtils.createRenderer(); +renderer.render(React.createElement(Timer)); +var output: React.ReactElement> = + renderer.getRenderOutput(); + +// +// TransitionGroup addon +// -------------------------------------------------------------------------- +React.createFactory(React.addons.TransitionGroup)({ component: "div" }); + +// +// update addon +// -------------------------------------------------------------------------- +{ +// These are copied from https://facebook.github.io/react/docs/update.html +let initialArray = [1, 2, 3]; +let newArray = React.addons.update(initialArray, {$push: [4]}); // => [1, 2, 3, 4] + +let collection = [1, 2, {a: [12, 17, 15]}]; +let newCollection = React.addons.update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}}); +// => [1, 2, {a: [12, 13, 14, 15]}] + +let obj = {a: 5, b: 3}; +let newObj = React.addons.update(obj, {b: {$apply: function(x) {return x * 2;}}}); +// => {a: 5, b: 6} +let newObj2 = React.addons.update(obj, {b: {$set: obj.b * 2}}); + +let objShallow = {a: 5, b: 3}; +let newObjShallow = React.addons.update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7} +} diff --git a/react/react-global.d.ts b/react/react-global.d.ts index 3ed029240..1c50ce7e4 100644 --- a/react/react-global.d.ts +++ b/react/react-global.d.ts @@ -4,6 +4,7 @@ // Definitions: https://github.com/borisyankov/DefinitelyTyped /// +/// /// /// /// @@ -12,53 +13,10 @@ /// /// /// -/// import React = __React; import ReactDOM = __React.__DOM; declare namespace __React { - namespace addons { - export var TransitionGroup: __React.__Addons.TransitionGroup; - export var CSSTransitionGroup: __React.__Addons.CSSTransitionGroup; - - export var LinkedStateMixin: __React.__Addons.LinkedStateMixin; - export var PureRenderMixin: __React.__Addons.PureRenderMixin; - - export import createFragment = __React.__Addons.createFragment; - export import update = __React.__Addons.update; - - export import Perf = __React.__Addons.Perf; - export import TestUtils = __React.__Addons.TestUtils; - } - - // TransitionGroup types - export import TransitionGroupProps = __React.__Addons.TransitionGroupProps; - export import TransitionGroup = __React.__Addons.TransitionGroup; - export import CSSTransitionGroupProps = __React.__Addons.CSSTransitionGroupProps; - export import CSSTransitionGroup = __React.__Addons.CSSTransitionGroup; - - // LinkedStateMixin types - export import ReactLink = __React.__Addons.ReactLink; - export import LinkedStateMixin = __React.__Addons.LinkedStateMixin; - - // PureRenderMixin types - export import PureRenderMixin = __React.__Addons.PureRenderMixin; - - // update types - export import UpdateSpecCommand = __React.__Addons.UpdateSpecCommand; - export import UpdateSpecPath = __React.__Addons.UpdateSpecPath; - export import UpdateSpec = __React.__Addons.UpdateSpec; - export import UpdateArraySpec = __React.__Addons.UpdateArraySpec; - - // Perf types - export import ComponentPerfContext = __React.__Addons.ComponentPerfContext; - export import NumericPerfContext = __React.__Addons.NumericPerfContext; - export import Measurements = __React.__Addons.Measurements; - - // TestUtil types - export import SyntheticEventData = __React.__Addons.SyntheticEventData; - export import EventSimulator = __React.__Addons.EventSimulator; - export import MockedComponentClass = __React.__Addons.MockedComponentClass; - export import ShallowRenderer = __React.__Addons.ShallowRenderer; + export import addons = __React.__Addons; } diff --git a/react/react-tests.ts b/react/react-tests.ts index f0c1060bd..33a114404 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -1,5 +1,24 @@ /// +/// +/// +/// +/// +/// +/// +/// +/// +/// import React = require("react"); +import ReactDOM = require("react-dom"); +import ReactDOMServer = require("react-dom/server"); +import createFragment = require("react-addons-create-fragment"); +import CSSTransitionGroup = require("react-addons-css-transition-group"); +import LinkedStateMixin = require("react-addons-linked-state-mixin"); +import Perf = require("react-addons-perf"); +import PureRenderMixin = require("react-addons-pure-render-mixin"); +import TestUtils = require("react-addons-test-utils"); +import TransitionGroup = require("react-addons-transition-group"); +import update = require("react-addons-update"); interface Props extends React.Props { hello: string; @@ -149,21 +168,20 @@ var clonedDOMElement: React.HTMLElement = // React.render var component: React.Component = - React.render(element, container); + ReactDOM.render(element, container); var classicComponent: React.ClassicComponent = - React.render(classicElement, container); + ReactDOM.render(classicElement, container); var domComponent: React.DOMComponent = - React.render(domElement, container); + ReactDOM.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 unmounted: boolean = ReactDOM.unmountComponentAtNode(container); +var str: string = ReactDOMServer.renderToString(element); +var markup: string = ReactDOMServer.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); +var domNode: Element = ReactDOM.findDOMNode(component); +domNode = ReactDOM.findDOMNode(domNode); // // React Elements @@ -191,11 +209,7 @@ 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; @@ -367,5 +381,93 @@ class Timer extends React.Component<{}, TimerState> { ); } } -React.render(React.createElement(Timer), container); +ReactDOM.render(React.createElement(Timer), container); +// +// createFragment addon +// -------------------------------------------------------------------------- +createFragment({ + a: React.DOM.div(), + b: ["a", false, React.createElement("span")] +}); + +// +// CSSTransitionGroup addon +// -------------------------------------------------------------------------- +React.createFactory(CSSTransitionGroup)({ + component: React.createClass({ + render: (): React.ReactElement => null + }), + childFactory: (c) => c, + transitionName: "transition", + transitionAppear: false, + transitionEnter: true, + transitionLeave: true +}); + +// +// LinkedStateMixin addon +// -------------------------------------------------------------------------- +React.createClass({ + mixins: [LinkedStateMixin], + render: function() { return React.DOM.div(null) } +}); + +// +// Perf addon +// -------------------------------------------------------------------------- +Perf.start(); +Perf.stop(); +var measurements = Perf.getLastMeasurements(); +Perf.printInclusive(measurements); +Perf.printExclusive(measurements); +Perf.printWasted(measurements); +Perf.printDOM(measurements); + +// +// PureRenderMixin addon +// -------------------------------------------------------------------------- +React.createClass({ + mixins: [PureRenderMixin], + render: function() { return React.DOM.div(null) } +}); + +// +// TestUtils addon +// -------------------------------------------------------------------------- +var node: Element; +TestUtils.Simulate.click(node); +TestUtils.Simulate.change(node); +TestUtils.Simulate.keyDown(node, { key: "Enter" }); + +var renderer: React.ShallowRenderer = + TestUtils.createRenderer(); +renderer.render(React.createElement(Timer)); +var output: React.ReactElement> = + renderer.getRenderOutput(); + +// +// TransitionGroup addon +// -------------------------------------------------------------------------- +React.createFactory(TransitionGroup)({ component: "div" }); + +// +// update addon +// -------------------------------------------------------------------------- +{ +// These are copied from https://facebook.github.io/react/docs/update.html +let initialArray = [1, 2, 3]; +let newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4] + +let collection = [1, 2, {a: [12, 17, 15]}]; +let newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}}); +// => [1, 2, {a: [12, 13, 14, 15]}] + +let obj = {a: 5, b: 3}; +let newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}}); +// => {a: 5, b: 6} +let newObj2 = update(obj, {b: {$set: obj.b * 2}}); + +let objShallow = {a: 5, b: 3}; +let newObjShallow = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7} +} From 9cdf3bd4ae51da14c856053ee160e71c8b159bff Mon Sep 17 00:00:00 2001 From: James Brantly Date: Thu, 5 Nov 2015 07:41:55 -0500 Subject: [PATCH 09/23] Remove react-dom folder (based on discussion in #5828) --- react-dom/react-dom.d.ts | 40 ---------------------------------------- 1 file changed, 40 deletions(-) delete mode 100644 react-dom/react-dom.d.ts diff --git a/react-dom/react-dom.d.ts b/react-dom/react-dom.d.ts deleted file mode 100644 index 1351fa02e..000000000 --- a/react-dom/react-dom.d.ts +++ /dev/null @@ -1,40 +0,0 @@ -// Type definitions for React-DOM v0.14.0-rc -// Project: https://www.npmjs.com/package/react-dom -// Definitions by: Stefan-Bieliauskas -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// - -declare namespace __ReactDom { - function render

( - element: __React.DOMElement

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

; - function render( - element: __React.ClassicElement

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

, - container: Element, - callback?: () => any): __React.Component; - - function findDOMNode( - componentOrElement: __React.Component | Element): TElement; - function findDOMNode( - componentOrElement: __React.Component | Element): Element; - - function unmountComponentAtNode(container: Element): boolean; -} - -declare namespace __ReactDomServer { - function renderToString(element: __React.ReactElement): string; - function renderToStaticMarkup(element: __React.ReactElement): string; -} -declare module "react-dom" { - export = __ReactDom -} - -declare module "react-dom/server" { - export = __ReactDomServer -} From 15eff541e0da1a8478c370963a4044c3cc0918a3 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Thu, 5 Nov 2015 10:41:03 -0800 Subject: [PATCH 10/23] [React.14] Update refs for DOM elements --- material-ui/legacy/material-ui-0.11.1.d.ts | 4 +- material-ui/material-ui.d.ts | 8 +- react/react-dom.d.ts | 8 +- react/react-global-tests.ts | 12 +- react/react-tests.ts | 12 +- react/react.d.ts | 309 ++++++++++----------- 6 files changed, 174 insertions(+), 179 deletions(-) diff --git a/material-ui/legacy/material-ui-0.11.1.d.ts b/material-ui/legacy/material-ui-0.11.1.d.ts index 7f464bc57..f974c33be 100644 --- a/material-ui/legacy/material-ui-0.11.1.d.ts +++ b/material-ui/legacy/material-ui-0.11.1.d.ts @@ -233,7 +233,7 @@ declare namespace __MaterialUI { } // what's not commonly overridden by Checkbox, RadioButton, or Toggle - interface CommonEnhancedSwitchProps extends React.HTMLAttributesBase { + interface CommonEnhancedSwitchProps extends React.HTMLAttributes, React.Props { // is root element id?: string; iconStyle?: React.CSSProperties; @@ -412,7 +412,7 @@ declare namespace __MaterialUI { } // non generally overridden elements of EnhancedButton - interface SharedEnhancedButtonProps extends React.HTMLAttributesBase { + interface SharedEnhancedButtonProps extends React.HTMLAttributes, React.Props { centerRipple?: boolean; containerElement?: string | React.ReactElement; disabled?: boolean; diff --git a/material-ui/material-ui.d.ts b/material-ui/material-ui.d.ts index 8b1201bf5..edd8fff8d 100644 --- a/material-ui/material-ui.d.ts +++ b/material-ui/material-ui.d.ts @@ -233,7 +233,7 @@ declare namespace __MaterialUI { } // what's not commonly overridden by Checkbox, RadioButton, or Toggle - interface CommonEnhancedSwitchProps extends React.HTMLAttributesBase { + interface CommonEnhancedSwitchProps extends React.HTMLAttributes, React.Props { // is root element id?: string; iconStyle?: React.CSSProperties; @@ -413,7 +413,7 @@ declare namespace __MaterialUI { } // non generally overridden elements of EnhancedButton - interface SharedEnhancedButtonProps extends React.HTMLAttributesBase { + interface SharedEnhancedButtonProps extends React.HTMLAttributes, React.Props { centerRipple?: boolean; containerElement?: string | React.ReactElement; disabled?: boolean; @@ -655,7 +655,7 @@ declare namespace __MaterialUI { export class Overlay extends React.Component { } - interface PaperProps extends React.HTMLAttributesBase { + interface PaperProps extends React.HTMLAttributes, React.Props { circle?: boolean; rounded?: boolean; transitionEnabled?: boolean; @@ -1309,7 +1309,7 @@ declare namespace __MaterialUI { export class ToolbarSeparator extends React.Component { } - interface ToolbarTitleProps extends React.HTMLAttributesBase { + interface ToolbarTitleProps extends React.HTMLAttributes, React.Props { text?: string; } export class ToolbarTitle extends React.Component { diff --git a/react/react-dom.d.ts b/react/react-dom.d.ts index a2183b7ea..7e90a9bf2 100644 --- a/react/react-dom.d.ts +++ b/react/react-dom.d.ts @@ -16,15 +16,15 @@ declare namespace __React { function render

( element: DOMElement

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

; + callback?: (element: Element) => any): Element; function render( element: ClassicElement

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

, container: Element, - callback?: () => any): Component; + callback?: (component: Component) => any): Component; function unmountComponentAtNode(container: Element): boolean; @@ -38,7 +38,7 @@ declare namespace __React { parentComponent: Component, nextElement: DOMElement

, container: Element, - callback?: (component: DOMComponent

) => any): DOMComponent

; + callback?: (element: Element) => any): Element; function unstable_renderSubtreeIntoContainer( parentComponent: Component, nextElement: ClassicElement

, diff --git a/react/react-global-tests.ts b/react/react-global-tests.ts index 18596358b..7caf82fdf 100644 --- a/react/react-global-tests.ts +++ b/react/react-global-tests.ts @@ -103,12 +103,12 @@ class ModernComponent extends React.Component }); } - private _input: React.HTMLComponent; + private _input: HTMLInputElement; render() { return React.DOM.div(null, React.DOM.input({ - ref: input => this._input = input, + ref: input => this._input = input, value: this.state.inputValue })); } @@ -135,7 +135,7 @@ var element: React.ReactElement = React.createElement(ModernComponent, props); var classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); -var domElement: React.HTMLElement = +var domElement: React.ReactHTMLElement = React.createElement("div"); // React.cloneElement @@ -143,7 +143,7 @@ var clonedElement: React.ReactElement = React.cloneElement(element, props); var clonedClassicElement: React.ClassicElement = React.cloneElement(classicElement, props); -var clonedDOMElement: React.HTMLElement = +var clonedDOMElement: React.ReactHTMLElement = React.cloneElement(domElement); // React.render @@ -151,7 +151,7 @@ var component: React.Component = ReactDOM.render(element, container); var classicComponent: React.ClassicComponent = ReactDOM.render(classicElement, container); -var domComponent: React.DOMComponent = +var domComponent: Element = ReactDOM.render(domElement, container); // Other Top-Level API @@ -206,7 +206,7 @@ var divStyle: React.CSSProperties = { // CSSProperties flex: "1 1 main-size", backgroundImage: "url('hello.png')" }; -var htmlAttr: React.HTMLAttributes = { +var htmlAttr: React.HTMLProps = { key: 36, ref: "htmlComponent", children: children, diff --git a/react/react-tests.ts b/react/react-tests.ts index 33a114404..5a20d51f8 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -123,12 +123,12 @@ class ModernComponent extends React.Component }); } - private _input: React.HTMLComponent; + private _input: HTMLInputElement; render() { return React.DOM.div(null, React.DOM.input({ - ref: input => this._input = input, + ref: input => this._input = input, value: this.state.inputValue })); } @@ -155,7 +155,7 @@ var element: React.ReactElement = React.createElement(ModernComponent, props); var classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); -var domElement: React.HTMLElement = +var domElement: React.ReactHTMLElement = React.createElement("div"); // React.cloneElement @@ -163,7 +163,7 @@ var clonedElement: React.ReactElement = React.cloneElement(element, props); var clonedClassicElement: React.ClassicElement = React.cloneElement(classicElement, props); -var clonedDOMElement: React.HTMLElement = +var clonedDOMElement: React.ReactHTMLElement = React.cloneElement(domElement); // React.render @@ -171,7 +171,7 @@ var component: React.Component = ReactDOM.render(element, container); var classicComponent: React.ClassicComponent = ReactDOM.render(classicElement, container); -var domComponent: React.DOMComponent = +var domComponent: Element = ReactDOM.render(domElement, container); // Other Top-Level API @@ -224,7 +224,7 @@ var divStyle: React.CSSProperties = { // CSSProperties flex: "1 1 main-size", backgroundImage: "url('hello.png')" }; -var htmlAttr: React.HTMLAttributes = { +var htmlAttr: React.HTMLProps = { key: 36, ref: "htmlComponent", children: children, diff --git a/react/react.d.ts b/react/react.d.ts index 975d228cc..46b114865 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -14,7 +14,7 @@ declare namespace __React { type: string | ComponentClass

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

extends ReactElement

{ @@ -22,13 +22,18 @@ declare namespace __React { ref: string | ((component: ClassicComponent) => any); } - interface DOMElement

extends ClassicElement

{ + interface DOMElement

extends ReactElement

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

) => any); + ref: string | ((element: Element) => any); } - type HTMLElement = DOMElement; - type SVGElement = DOMElement; + interface ReactHTMLElement extends DOMElement { + ref: string | ((element: HTMLElement) => any); + } + + interface ReactSVGElement extends DOMElement { + ref: string | ((element: SVGElement) => any); + } // // Factories @@ -46,9 +51,8 @@ declare namespace __React { (props?: P, ...children: ReactNode[]): DOMElement

; } - type HTMLFactory = DOMFactory; - type SVGFactory = DOMFactory; - type SVGElementFactory = DOMFactory; + type HTMLFactory = DOMFactory; + type SVGFactory = DOMFactory; // // React Nodes @@ -124,7 +128,7 @@ declare namespace __React { state: S; context: {}; refs: { - [key: string]: Component + [key: string]: Component | Element }; } @@ -138,8 +142,8 @@ declare namespace __React { tagName: string; } - type HTMLComponent = DOMComponent; - type SVGComponent = DOMComponent; + type HTMLComponent = DOMComponent; + type SVGComponent = DOMComponent; interface ChildContextProvider { getChildContext(): CC; @@ -315,7 +319,12 @@ declare namespace __React { ref?: string | ((component: T) => any); } - interface DOMAttributesBase extends Props { + interface HTMLProps extends HTMLAttributes, Props { + } + interface SVGProps extends SVGAttributes, Props { + } + + interface DOMAttributes { onCopy?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; @@ -360,9 +369,6 @@ declare namespace __React { }; } - interface DOMAttributes extends DOMAttributesBase> { - } - // This interface is not complete. Only properties accepting // unitless numbers are listed here (see CSSProperty.js in React) interface CSSProperties { @@ -392,7 +398,7 @@ declare namespace __React { [propertyName: string]: any; } - interface HTMLAttributesBase extends DOMAttributesBase { + interface HTMLAttributes extends DOMAttributes { accept?: string; acceptCharset?: string; accessKey?: string; @@ -510,17 +516,7 @@ declare namespace __React { unselectable?: boolean; } - interface HTMLAttributes extends HTMLAttributesBase { - } - - interface SVGElementAttributes extends HTMLAttributes { - viewBox?: string; - preserveAspectRatio?: string; - } - interface SVGAttributes extends DOMAttributes { - ref?: string | ((component: SVGComponent) => void); - cx?: number | string; cy?: number | string; d?: string; @@ -689,7 +685,7 @@ declare namespace __React { wbr: HTMLFactory; // SVG - svg: SVGElementFactory; + svg: SVGFactory; circle: SVGFactory; defs: SVGFactory; ellipse: SVGFactory; @@ -798,137 +794,136 @@ declare namespace JSX { interface IntrinsicElements { // HTML - a: React.HTMLAttributes; - abbr: React.HTMLAttributes; - address: React.HTMLAttributes; - area: React.HTMLAttributes; - article: React.HTMLAttributes; - aside: React.HTMLAttributes; - audio: React.HTMLAttributes; - b: React.HTMLAttributes; - base: React.HTMLAttributes; - bdi: React.HTMLAttributes; - bdo: React.HTMLAttributes; - big: React.HTMLAttributes; - blockquote: React.HTMLAttributes; - body: React.HTMLAttributes; - br: React.HTMLAttributes; - button: React.HTMLAttributes; - canvas: React.HTMLAttributes; - caption: React.HTMLAttributes; - cite: React.HTMLAttributes; - code: React.HTMLAttributes; - col: React.HTMLAttributes; - colgroup: React.HTMLAttributes; - data: React.HTMLAttributes; - datalist: React.HTMLAttributes; - dd: React.HTMLAttributes; - del: React.HTMLAttributes; - details: React.HTMLAttributes; - dfn: React.HTMLAttributes; - dialog: React.HTMLAttributes; - div: React.HTMLAttributes; - dl: React.HTMLAttributes; - dt: React.HTMLAttributes; - em: React.HTMLAttributes; - embed: React.HTMLAttributes; - fieldset: React.HTMLAttributes; - figcaption: React.HTMLAttributes; - figure: React.HTMLAttributes; - footer: React.HTMLAttributes; - form: React.HTMLAttributes; - h1: React.HTMLAttributes; - h2: React.HTMLAttributes; - h3: React.HTMLAttributes; - h4: React.HTMLAttributes; - h5: React.HTMLAttributes; - h6: React.HTMLAttributes; - head: React.HTMLAttributes; - header: React.HTMLAttributes; - hr: React.HTMLAttributes; - html: React.HTMLAttributes; - i: React.HTMLAttributes; - iframe: React.HTMLAttributes; - img: React.HTMLAttributes; - input: React.HTMLAttributes; - ins: React.HTMLAttributes; - kbd: React.HTMLAttributes; - keygen: React.HTMLAttributes; - label: React.HTMLAttributes; - legend: React.HTMLAttributes; - li: React.HTMLAttributes; - link: React.HTMLAttributes; - main: React.HTMLAttributes; - map: React.HTMLAttributes; - mark: React.HTMLAttributes; - menu: React.HTMLAttributes; - menuitem: React.HTMLAttributes; - meta: React.HTMLAttributes; - meter: React.HTMLAttributes; - nav: React.HTMLAttributes; - noscript: React.HTMLAttributes; - object: React.HTMLAttributes; - ol: React.HTMLAttributes; - optgroup: React.HTMLAttributes; - option: React.HTMLAttributes; - output: React.HTMLAttributes; - p: React.HTMLAttributes; - param: React.HTMLAttributes; - picture: React.HTMLAttributes; - pre: React.HTMLAttributes; - progress: React.HTMLAttributes; - q: React.HTMLAttributes; - rp: React.HTMLAttributes; - rt: React.HTMLAttributes; - ruby: React.HTMLAttributes; - s: React.HTMLAttributes; - samp: React.HTMLAttributes; - script: React.HTMLAttributes; - section: React.HTMLAttributes; - select: React.HTMLAttributes; - small: React.HTMLAttributes; - source: React.HTMLAttributes; - span: React.HTMLAttributes; - strong: React.HTMLAttributes; - style: React.HTMLAttributes; - sub: React.HTMLAttributes; - summary: React.HTMLAttributes; - sup: React.HTMLAttributes; - table: React.HTMLAttributes; - tbody: React.HTMLAttributes; - td: React.HTMLAttributes; - textarea: React.HTMLAttributes; - tfoot: React.HTMLAttributes; - th: React.HTMLAttributes; - thead: React.HTMLAttributes; - time: React.HTMLAttributes; - title: React.HTMLAttributes; - tr: React.HTMLAttributes; - track: React.HTMLAttributes; - u: React.HTMLAttributes; - ul: React.HTMLAttributes; - "var": React.HTMLAttributes; - video: React.HTMLAttributes; - wbr: React.HTMLAttributes; + a: React.HTMLProps; + abbr: React.HTMLProps; + address: React.HTMLProps; + area: React.HTMLProps; + article: React.HTMLProps; + aside: React.HTMLProps; + audio: React.HTMLProps; + b: React.HTMLProps; + base: React.HTMLProps; + bdi: React.HTMLProps; + bdo: React.HTMLProps; + big: React.HTMLProps; + blockquote: React.HTMLProps; + body: React.HTMLProps; + br: React.HTMLProps; + button: React.HTMLProps; + canvas: React.HTMLProps; + caption: React.HTMLProps; + cite: React.HTMLProps; + code: React.HTMLProps; + col: React.HTMLProps; + colgroup: React.HTMLProps; + data: React.HTMLProps; + datalist: React.HTMLProps; + dd: React.HTMLProps; + del: React.HTMLProps; + details: React.HTMLProps; + dfn: React.HTMLProps; + dialog: React.HTMLProps; + div: React.HTMLProps; + dl: React.HTMLProps; + dt: React.HTMLProps; + em: React.HTMLProps; + embed: React.HTMLProps; + fieldset: React.HTMLProps; + figcaption: React.HTMLProps; + figure: React.HTMLProps; + footer: React.HTMLProps; + form: React.HTMLProps; + h1: React.HTMLProps; + h2: React.HTMLProps; + h3: React.HTMLProps; + h4: React.HTMLProps; + h5: React.HTMLProps; + h6: React.HTMLProps; + head: React.HTMLProps; + header: React.HTMLProps; + hr: React.HTMLProps; + html: React.HTMLProps; + i: React.HTMLProps; + iframe: React.HTMLProps; + img: React.HTMLProps; + input: React.HTMLProps; + ins: React.HTMLProps; + kbd: React.HTMLProps; + keygen: React.HTMLProps; + label: React.HTMLProps; + legend: React.HTMLProps; + li: React.HTMLProps; + link: React.HTMLProps; + main: React.HTMLProps; + map: React.HTMLProps; + mark: React.HTMLProps; + menu: React.HTMLProps; + menuitem: React.HTMLProps; + meta: React.HTMLProps; + meter: React.HTMLProps; + nav: React.HTMLProps; + noscript: React.HTMLProps; + object: React.HTMLProps; + ol: React.HTMLProps; + optgroup: React.HTMLProps; + option: React.HTMLProps; + output: React.HTMLProps; + p: React.HTMLProps; + param: React.HTMLProps; + picture: React.HTMLProps; + pre: React.HTMLProps; + progress: React.HTMLProps; + q: React.HTMLProps; + rp: React.HTMLProps; + rt: React.HTMLProps; + ruby: React.HTMLProps; + s: React.HTMLProps; + samp: React.HTMLProps; + script: React.HTMLProps; + section: React.HTMLProps; + select: React.HTMLProps; + small: React.HTMLProps; + source: React.HTMLProps; + span: React.HTMLProps; + strong: React.HTMLProps; + style: React.HTMLProps; + sub: React.HTMLProps; + summary: React.HTMLProps; + sup: React.HTMLProps; + table: React.HTMLProps; + tbody: React.HTMLProps; + td: React.HTMLProps; + textarea: React.HTMLProps; + tfoot: React.HTMLProps; + th: React.HTMLProps; + thead: React.HTMLProps; + time: React.HTMLProps; + title: React.HTMLProps; + tr: React.HTMLProps; + track: React.HTMLProps; + u: React.HTMLProps; + ul: React.HTMLProps; + "var": React.HTMLProps; + video: React.HTMLProps; + wbr: React.HTMLProps; // SVG - svg: React.SVGElementAttributes; - - circle: React.SVGAttributes; - defs: React.SVGAttributes; - ellipse: React.SVGAttributes; - g: React.SVGAttributes; - line: React.SVGAttributes; - linearGradient: React.SVGAttributes; - mask: React.SVGAttributes; - path: React.SVGAttributes; - pattern: React.SVGAttributes; - polygon: React.SVGAttributes; - polyline: React.SVGAttributes; - radialGradient: React.SVGAttributes; - rect: React.SVGAttributes; - stop: React.SVGAttributes; - text: React.SVGAttributes; - tspan: React.SVGAttributes; + circle: React.SVGProps; + defs: React.SVGProps; + ellipse: React.SVGProps; + g: React.SVGProps; + line: React.SVGProps; + linearGradient: React.SVGProps; + mask: React.SVGProps; + path: React.SVGProps; + pattern: React.SVGProps; + polygon: React.SVGProps; + polyline: React.SVGProps; + radialGradient: React.SVGProps; + rect: React.SVGProps; + stop: React.SVGProps; + svg: React.SVGProps; + text: React.SVGProps; + tspan: React.SVGProps; } } From a43c2843cdcdfbf62a7c5d503f29acf24c4d38f3 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Thu, 5 Nov 2015 11:25:16 -0800 Subject: [PATCH 11/23] [React.14] Add ReactInstance type (Component | Element) --- react/react-addons-test-utils.d.ts | 37 +++++++++++++++--------------- react/react-dom.d.ts | 8 ++----- react/react.d.ts | 11 +++------ 3 files changed, 24 insertions(+), 32 deletions(-) diff --git a/react/react-addons-test-utils.d.ts b/react/react-addons-test-utils.d.ts index 1362f64c1..0b3f8c0f6 100644 --- a/react/react-addons-test-utils.d.ts +++ b/react/react-addons-test-utils.d.ts @@ -94,6 +94,8 @@ declare namespace __React { export var wheel: EventSimulator; } + export function renderIntoDocument( + element: DOMElement): Element; export function renderIntoDocument

( element: ReactElement

): Component; export function renderIntoDocument>( @@ -104,43 +106,42 @@ declare namespace __React { export function isElementOfType( element: ReactElement, type: ReactType): boolean; - export function isTextComponent(instance: Component): boolean; - export function isDOMComponent(instance: Component): boolean; - export function isCompositeComponent(instance: Component): boolean; + export function isDOMComponent(instance: ReactInstance): boolean; + export function isCompositeComponent(instance: ReactInstance): boolean; export function isCompositeComponentWithType( - instance: Component, + instance: ReactInstance, type: ComponentClass): boolean; export function findAllInRenderedTree( - tree: Component, - fn: (i: Component) => boolean): Component; + root: Component, + fn: (i: ReactInstance) => boolean): ReactInstance[]; export function scryRenderedDOMComponentsWithClass( - tree: Component, - className: string): DOMComponent[]; + root: Component, + className: string): Element[]; export function findRenderedDOMComponentWithClass( - tree: Component, - className: string): DOMComponent; + root: Component, + className: string): Element; export function scryRenderedDOMComponentsWithTag( - tree: Component, - tagName: string): DOMComponent[]; + root: Component, + tagName: string): Element[]; export function findRenderedDOMComponentWithTag( - tree: Component, - tagName: string): DOMComponent; + root: Component, + tagName: string): Element; export function scryRenderedComponentsWithType

( - tree: Component, + root: Component, type: ComponentClass

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

( - tree: Component, + root: Component, type: ComponentClass

): Component; export function findRenderedComponentWithType>( - tree: Component, + root: Component, type: ComponentClass): C; export function createRenderer(): ShallowRenderer; diff --git a/react/react-dom.d.ts b/react/react-dom.d.ts index 7e90a9bf2..f8fd1d5c6 100644 --- a/react/react-dom.d.ts +++ b/react/react-dom.d.ts @@ -8,10 +8,8 @@ declare namespace __React { namespace __DOM { - function findDOMNode( - componentOrElement: __React.Component | Element): TElement; - function findDOMNode( - componentOrElement: __React.Component | Element): Element; + function findDOMNode(instance: ReactInstance): E; + function findDOMNode(instance: ReactInstance): Element; function render

( element: DOMElement

, @@ -49,8 +47,6 @@ declare namespace __React { nextElement: ReactElement

, container: Element, callback?: (component: Component) => any): Component; - - } namespace __DOMServer { diff --git a/react/react.d.ts b/react/react.d.ts index 46b114865..1140ce803 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -112,6 +112,8 @@ declare namespace __React { // Component API // ---------------------------------------------------------------------- + type ReactInstance = Component | Element; + // Base component for plain JS classes class Component implements ComponentLifecycle { static propTypes: ValidationMap; @@ -128,7 +130,7 @@ declare namespace __React { state: S; context: {}; refs: { - [key: string]: Component | Element + [key: string]: ReactInstance }; } @@ -138,13 +140,6 @@ declare namespace __React { getInitialState?(): S; } - interface DOMComponent

extends ClassicComponent { - tagName: string; - } - - type HTMLComponent = DOMComponent; - type SVGComponent = DOMComponent; - interface ChildContextProvider { getChildContext(): CC; } From 49f853d9dc71a5647175d7bfd62aa7030e92b39f Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Thu, 5 Nov 2015 14:56:56 -0800 Subject: [PATCH 12/23] [React.14] Fix jsnox types and reference path in react-global-0.13.3 --- jsnox/jsnox-tests.ts | 2 +- jsnox/jsnox.d.ts | 4 ++-- react/react-global-0.13.3.d.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/jsnox/jsnox-tests.ts b/jsnox/jsnox-tests.ts index e34d71b4a..33e58720e 100644 --- a/jsnox/jsnox-tests.ts +++ b/jsnox/jsnox-tests.ts @@ -19,7 +19,7 @@ var clickHandler: React.MouseEventHandler // Tests with spec string function spec_string () { - var result: React.HTMLComponent + var result: React.ReactHTMLElement // just spec string result = $('div') diff --git a/jsnox/jsnox.d.ts b/jsnox/jsnox.d.ts index dfb59e280..22291956d 100644 --- a/jsnox/jsnox.d.ts +++ b/jsnox/jsnox.d.ts @@ -31,7 +31,7 @@ declare module 'jsnox' { * @param children A single React node (string or ReactElement) or array of nodes. * Note that unlike with React itself, multiple children must be placed into an array. */ - (specString: string, children: React.ReactNode): React.HTMLComponent +

(specString: string, children: React.ReactNode): React.DOMElement

/** * Renders an HTML element from the given spec string, with optional props @@ -42,7 +42,7 @@ declare module 'jsnox' { * @param children A single React node (string or ReactElement) or array of nodes. * Note that unlike with React itself, multiple children must be placed into an array. */ - (specString: string, props?: React.HTMLAttributes, children?: React.ReactNode): React.HTMLComponent +

(specString: string, props?: React.HTMLAttributes, children?: React.ReactNode): React.DOMElement

/** diff --git a/react/react-global-0.13.3.d.ts b/react/react-global-0.13.3.d.ts index 1728ba2fc..13d114892 100644 --- a/react/react-global-0.13.3.d.ts +++ b/react/react-global-0.13.3.d.ts @@ -3,7 +3,7 @@ // Definitions by: Asana , AssureSign , Microsoft // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// +/// import React = __React; From 0a6e0c30da629004604a22431b190f01a61634a2 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Thu, 5 Nov 2015 16:50:52 -0800 Subject: [PATCH 13/23] [React.14] Update HTMLAttributes/SVGAttributes for 0.14.2 --- react/README.md | 2 +- react/react.d.ts | 61 +++++++++++++++++++++++++++++++++++++----------- 2 files changed, 49 insertions(+), 14 deletions(-) diff --git a/react/README.md b/react/README.md index eed63fcb3..8990e8a71 100644 --- a/react/README.md +++ b/react/README.md @@ -1,4 +1,4 @@ -# React v0.14 Type Definitions +# React v0.14.2 Type Definitions If you are using modules you should use `react.d.ts`, `react-dom.d.ts` and any of the `react-addon-*.d.ts` definition files. diff --git a/react/react.d.ts b/react/react.d.ts index 1140ce803..a42f3122d 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -315,6 +315,8 @@ declare namespace __React { } interface HTMLProps extends HTMLAttributes, Props { + defaultChecked?: boolean; + defaultValue?: string | string[]; } interface SVGProps extends SVGAttributes, Props { } @@ -356,9 +358,6 @@ declare namespace __React { onScroll?: UIEventHandler; onWheel?: WheelEventHandler; - className?: string; - id?: string; - dangerouslySetInnerHTML?: { __html: string; }; @@ -405,23 +404,25 @@ declare namespace __React { autoComplete?: boolean; autoFocus?: boolean; autoPlay?: boolean; + capture?: boolean; cellPadding?: number | string; cellSpacing?: number | string; charSet?: string; + challenge?: string; checked?: boolean; classID?: string; + className?: string; cols?: number; colSpan?: number; content?: string; contentEditable?: boolean; contextMenu?: string; - controls?: any; + controls?: boolean; coords?: string; crossOrigin?: string; data?: string; dateTime?: string; - defaultChecked?: boolean; - defaultValue?: string; + default?: boolean; defer?: boolean; dir?: string; disabled?: boolean; @@ -444,6 +445,13 @@ declare namespace __React { htmlFor?: string; httpEquiv?: string; icon?: string; + id?: string; + inputMode?: string; + integrity?: string; + is?: string; + keyParams?: string; + keyType?: string; + kind?: string; label?: string; lang?: string; list?: string; @@ -458,6 +466,7 @@ declare namespace __React { mediaGroup?: string; method?: string; min?: number | string; + minLength?: number; multiple?: boolean; muted?: boolean; name?: string; @@ -488,30 +497,49 @@ declare namespace __React { spellCheck?: boolean; src?: string; srcDoc?: string; + srcLang?: string; srcSet?: string; start?: number; step?: number | string; style?: CSSProperties; + summary?: string; tabIndex?: number; target?: string; title?: string; type?: string; useMap?: string; - value?: string; + value?: string | string[]; width?: number | string; wmode?: string; + wrap?: string; + + // RDFa Attributes + about?: string; + datatype?: string; + inlist?: any; + prefix?: string; + property?: string; + resource?: string; + typeof?: string; + vocab?: string; // Non-standard Attributes autoCapitalize?: boolean; - autoCorrect?: boolean; - property?: string; + autoCorrect?: string; + autoSave?: string; + color?: string; itemProp?: string; itemScope?: boolean; itemType?: string; + itemID?: string; + itemRef?: string; + results?: number; + security?: string; unselectable?: boolean; } - interface SVGAttributes extends DOMAttributes { + interface SVGAttributes extends HTMLAttributes { + clipPath?: string; cx?: number | string; cy?: number | string; d?: string; @@ -525,7 +553,6 @@ declare namespace __React { fy?: number | string; gradientTransform?: string; gradientUnits?: string; - height?: number | string; markerEnd?: string; markerMid?: string; markerStart?: string; @@ -544,17 +571,25 @@ declare namespace __React { stroke?: string; strokeDasharray?: string; strokeLinecap?: string; - strokeMiterlimit?: string; strokeOpacity?: number | string; strokeWidth?: number | string; textAnchor?: string; transform?: string; version?: string; viewBox?: string; - width?: number | string; x1?: number | string; x2?: number | string; x?: number | string; + xlinkActuate?: string; + xlinkArcrole?: string; + xlinkHref?: string; + xlinkRole?: string; + xlinkShow?: string; + xlinkTitle?: string; + xlinkType?: string; + xmlBase?: string; + xmlLang?: string; + xmlSpace?: string; y1?: number | string; y2?: number | string y?: number | string; From 2ccdb76c477ffac4e843547198fae4eae5d784db Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Thu, 5 Nov 2015 17:09:36 -0800 Subject: [PATCH 14/23] [React.14] Add Composition/MediaEvents and SVGFactory --- react/react.d.ts | 111 ++++++++++++++++++++++++++++++++++++----------- 1 file changed, 85 insertions(+), 26 deletions(-) diff --git a/react/react.d.ts b/react/react.d.ts index a42f3122d..cb8ff8ed1 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -216,12 +216,23 @@ declare namespace __React { type: string; } + interface ClipboardEvent extends SyntheticEvent { + clipboardData: DataTransfer; + } + + interface CompositionEvent extends SyntheticEvent { + data: string; + } + interface DragEvent extends SyntheticEvent { dataTransfer: DataTransfer; } - interface ClipboardEvent extends SyntheticEvent { - clipboardData: DataTransfer; + interface FocusEvent extends SyntheticEvent { + relatedTarget: EventTarget; + } + + interface FormEvent extends SyntheticEvent { } interface KeyboardEvent extends SyntheticEvent { @@ -239,13 +250,6 @@ declare namespace __React { which: number; } - interface FocusEvent extends SyntheticEvent { - relatedTarget: EventTarget; - } - - interface FormEvent extends SyntheticEvent { - } - interface MouseEvent extends SyntheticEvent { altKey: boolean; button: number; @@ -294,15 +298,18 @@ declare namespace __React { (event: E): void; } - interface DragEventHandler extends EventHandler {} - 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 {} + type ReactEventHandler = EventHandler; + + type ClipboardEventHandler = EventHandler; + type CompositionEventHandler = EventHandler; + type DragEventHandler = EventHandler; + type FocusEventHandler = EventHandler; + type FormEventHandler = EventHandler; + type KeyboardEventHandler = EventHandler; + type MouseEventHandler = EventHandler; + type TouchEventHandler = EventHandler; + type UIEventHandler = EventHandler; + type WheelEventHandler = EventHandler; // // Props / DOM Attributes @@ -322,17 +329,63 @@ declare namespace __React { } interface DOMAttributes { + dangerouslySetInnerHTML?: { + __html: string; + }; + + // Clipboard Events onCopy?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; - onKeyDown?: KeyboardEventHandler; - onKeyPress?: KeyboardEventHandler; - onKeyUp?: KeyboardEventHandler; + + // Composition Events + onCompositionEnd?: CompositionEventHandler; + onCompositionStart?: CompositionEventHandler; + onCompositionUpdate?: CompositionEventHandler; + + // Focus Events onFocus?: FocusEventHandler; onBlur?: FocusEventHandler; + + // Form Events onChange?: FormEventHandler; onInput?: FormEventHandler; onSubmit?: FormEventHandler; + + // Image Events + onLoad?: ReactEventHandler; + onError?: ReactEventHandler; // also a Media Event + + // Keyboard Events + onKeyDown?: KeyboardEventHandler; + onKeyPress?: KeyboardEventHandler; + onKeyUp?: KeyboardEventHandler; + + // Media Events + onAbort?: ReactEventHandler; + onCanPlay?: ReactEventHandler; + onCanPlayThrough?: ReactEventHandler; + onDurationChange?: ReactEventHandler; + onEmptied?: ReactEventHandler; + onEncrypted?: ReactEventHandler; + onEnded?: ReactEventHandler; + onLoadedData?: ReactEventHandler; + onLoadedMetadata?: ReactEventHandler; + onLoadStart?: ReactEventHandler; + onPause?: ReactEventHandler; + onPlay?: ReactEventHandler; + onPlaying?: ReactEventHandler; + onProgress?: ReactEventHandler; + onRateChange?: ReactEventHandler; + onSeeked?: ReactEventHandler; + onSeeking?: ReactEventHandler; + onStalled?: ReactEventHandler; + onSuspend?: ReactEventHandler; + onTimeUpdate?: ReactEventHandler; + onVolumeChange?: ReactEventHandler; + onWaiting?: ReactEventHandler; + + // MouseEvents onClick?: MouseEventHandler; onContextMenu?: MouseEventHandler; onDoubleClick?: MouseEventHandler; @@ -351,16 +404,21 @@ declare namespace __React { onMouseOut?: MouseEventHandler; onMouseOver?: MouseEventHandler; onMouseUp?: MouseEventHandler; + + // Selection Events + onSelect?: ReactEventHandler; + + // Touch Events onTouchCancel?: TouchEventHandler; onTouchEnd?: TouchEventHandler; onTouchMove?: TouchEventHandler; onTouchStart?: TouchEventHandler; - onScroll?: UIEventHandler; - onWheel?: WheelEventHandler; - dangerouslySetInnerHTML?: { - __html: string; - }; + // UI Events + onScroll?: UIEventHandler; + + // Wheel Events + onWheel?: WheelEventHandler; } // This interface is not complete. Only properties accepting @@ -720,6 +778,7 @@ declare namespace __React { defs: SVGFactory; ellipse: SVGFactory; g: SVGFactory; + image: SVGFactory; line: SVGFactory; linearGradient: SVGFactory; mask: SVGFactory; From cba13a3b25c0ae39ad808ba7b156cc73ee76bafb Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Thu, 5 Nov 2015 17:56:28 -0800 Subject: [PATCH 15/23] Add shallow-compare addon Interestingly, I do not believe that the ComponentLifecycle interface is propagated to components that inherit from React.Component. --- react/react-addons-shallow-compare.d.ts | 11 ++++++++++ react/react-tests.ts | 28 +++++++++++++++---------- 2 files changed, 28 insertions(+), 11 deletions(-) create mode 100644 react/react-addons-shallow-compare.d.ts diff --git a/react/react-addons-shallow-compare.d.ts b/react/react-addons-shallow-compare.d.ts new file mode 100644 index 000000000..a0e38df23 --- /dev/null +++ b/react/react-addons-shallow-compare.d.ts @@ -0,0 +1,11 @@ +// Type definitions for React v0.14 (react-addons-css-transition-group) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module "react-addons-shallow-compare" { + function shallowCompare(component: __React.Component, nextProps: P, nextState: S): boolean; + export = shallowCompare; +} diff --git a/react/react-tests.ts b/react/react-tests.ts index 5a20d51f8..e7fcad383 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -5,6 +5,7 @@ /// /// /// +/// /// /// /// @@ -16,6 +17,7 @@ import CSSTransitionGroup = require("react-addons-css-transition-group"); import LinkedStateMixin = require("react-addons-linked-state-mixin"); import Perf = require("react-addons-perf"); import PureRenderMixin = require("react-addons-pure-render-mixin"); +import shallowCompare = require("react-addons-shallow-compare"); import TestUtils = require("react-addons-test-utils"); import TransitionGroup = require("react-addons-transition-group"); import update = require("react-addons-update"); @@ -88,34 +90,34 @@ var ClassicComponent: React.ClassicComponentClass = 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 } - + static defaultProps: Props; - + context: Context; - + getChildContext() { return { someOtherValue: 'foo' } } - + state = { inputValue: this.context.someValue, seconds: this.props.foo } - + reset() { this.setState({ inputValue: this.context.someValue, @@ -124,7 +126,7 @@ class ModernComponent extends React.Component } private _input: HTMLInputElement; - + render() { return React.DOM.div(null, React.DOM.input({ @@ -132,6 +134,10 @@ class ModernComponent extends React.Component value: this.state.inputValue })); } + + shouldComponentUpdate(nextProps: Props, nextState: State, nextContext: any): boolean { + return shallowCompare(this, nextProps, nextState); + } } // React.createFactory @@ -445,7 +451,7 @@ var renderer: React.ShallowRenderer = renderer.render(React.createElement(Timer)); var output: React.ReactElement> = renderer.getRenderOutput(); - + // // TransitionGroup addon // -------------------------------------------------------------------------- @@ -455,7 +461,7 @@ React.createFactory(TransitionGroup)({ component: "div" }); // update addon // -------------------------------------------------------------------------- { -// These are copied from https://facebook.github.io/react/docs/update.html +// These are copied from https://facebook.github.io/react/docs/update.html let initialArray = [1, 2, 3]; let newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4] From 8345d38855c3185ddaa991f5bc4f3156748e2868 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Mon, 9 Nov 2015 17:39:55 -0800 Subject: [PATCH 16/23] [React.14] Add StatelessComponent

and tests - Also add image to JSX.IntrinsicElements - Add tests for callback and string refs - Fix bug where Component subclasses are required to have defaultProps --- react/react-tests.ts | 69 ++++++++++++++++++++++++++++++++++++++------ react/react.d.ts | 34 ++++++++++++---------- 2 files changed, 79 insertions(+), 24 deletions(-) diff --git a/react/react-tests.ts b/react/react-tests.ts index 5a20d51f8..adf2e251e 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -24,7 +24,6 @@ interface Props extends React.Props { hello: string; world?: string; foo: number; - bar: boolean; } interface State { @@ -48,8 +47,7 @@ var props: Props = { key: 42, ref: "myComponent42", hello: "world", - foo: 42, - bar: true + foo: 42 }; var container: Element; @@ -61,11 +59,10 @@ var container: Element; var ClassicComponent: React.ClassicComponentClass = React.createClass({ getDefaultProps() { - return { + return { hello: undefined, world: "peace", - foo: undefined, - bar: undefined, + foo: undefined }; }, getInitialState() { @@ -87,7 +84,7 @@ var ClassicComponent: React.ClassicComponentClass = }); class ModernComponent extends React.Component - implements React.ChildContextProvider { + implements MyComponent, React.ChildContextProvider { static propTypes: React.ValidationMap = { foo: React.PropTypes.number @@ -101,8 +98,6 @@ class ModernComponent extends React.Component someOtherValue: React.PropTypes.string } - static defaultProps: Props; - context: Context; getChildContext() { @@ -117,12 +112,14 @@ class ModernComponent extends React.Component } reset() { + this._myComponent.reset(); this.setState({ inputValue: this.context.someValue, seconds: this.props.foo }); } + private _myComponent: MyComponent; private _input: HTMLInputElement; render() { @@ -134,12 +131,32 @@ class ModernComponent extends React.Component } } +interface SCProps extends React.Props<{}> { + foo?: number; +} + +var StatelessComponent = (props: SCProps) => { + return React.DOM.div(null, props.foo); +}; + +// Must explicitly type-annotate to add defaultProps/contextTypes +var StatelessComponent2: React.StatelessComponent = + (props: SCProps) => React.DOM.div(null, props.foo); +StatelessComponent2.defaultProps = { + foo: 42 +}; + // React.createFactory var factory: React.Factory = React.createFactory(ModernComponent); var factoryElement: React.ReactElement = factory(props); +var statelessFactory: React.Factory = + React.createFactory(StatelessComponent); +var statelessElement: React.ReactElement = + statelessFactory(props); + var classicFactory: React.ClassicFactory = React.createFactory(ClassicComponent); var classicFactoryElement: React.ClassicElement = @@ -153,6 +170,8 @@ var domFactoryElement: React.DOMElement = // React.createElement var element: React.ReactElement = React.createElement(ModernComponent, props); +var statelessElement: React.ReactElement = + React.createElement(StatelessComponent, props); var classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); var domElement: React.ReactHTMLElement = @@ -161,6 +180,8 @@ var domElement: React.ReactHTMLElement = // React.cloneElement var clonedElement: React.ReactElement = React.cloneElement(element, props); +var clonedStatelessElement: React.ReactElement = + React.cloneElement(statelessElement, props); var clonedClassicElement: React.ClassicElement = React.cloneElement(classicElement, props); var clonedDOMElement: React.ReactHTMLElement = @@ -215,6 +236,36 @@ classicComponent.replaceState({ inputValue: "???", seconds: 60 }); var myComponent = component; myComponent.reset(); +// +// Refs +// NB: to infer the correct type for callback refs, your component's Props +// interface must extend React.Props where T is your component type (or +// an interface that it implements). +// -------------------------------------------------------------------------- + +interface RCProps extends React.Props { +} + +class RefComponent extends React.Component { + static create = React.createFactory(RefComponent); + refMethod() { + } +} + +var componentRef: RefComponent; +RefComponent.create({ ref: "componentRef" }); +// type of c should be inferred +RefComponent.create({ ref: c => componentRef = c }); +componentRef.refMethod(); + +var domNodeRef: Element; +React.DOM.div({ ref: "domRef" }); +// type of node should be inferred +React.DOM.div({ ref: node => domNodeRef = node }); + +var inputNodeRef: HTMLInputElement; +React.DOM.input({ ref: node => inputNodeRef = node }); + // // Attributes // -------------------------------------------------------------------------- diff --git a/react/react.d.ts b/react/react.d.ts index cb8ff8ed1..7801dd51e 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -8,21 +8,21 @@ declare namespace __React { // React Elements // ---------------------------------------------------------------------- - type ReactType = ComponentClass | string; + type ReactType = string | ComponentClass | StatelessComponent; - interface ReactElement

{ - type: string | ComponentClass

; + interface ReactElement

> { + type: string | ComponentClass

| StatelessComponent

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

extends ReactElement

{ - type: string | ClassicComponentClass

; + type: ClassicComponentClass

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

extends ReactElement

{ + interface DOMElement

> extends ReactElement

{ type: string; ref: string | ((element: Element) => any); } @@ -47,7 +47,7 @@ declare namespace __React { (props?: P, ...children: ReactNode[]): ClassicElement

; } - interface DOMFactory

extends ClassicFactory

{ + interface DOMFactory

> extends Factory

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

; } @@ -73,19 +73,19 @@ declare namespace __React { function createClass(spec: ComponentSpec): ClassicComponentClass

; function createFactory

(type: string): DOMFactory

; - function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; - function createFactory

(type: ComponentClass

): Factory

; + function createFactory

(type: ClassicComponentClass

): ClassicFactory

; + function createFactory

(type: ComponentClass

| StatelessComponent

): Factory

; function createElement

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

; function createElement

( - type: ClassicComponentClass

| string, + type: ClassicComponentClass

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

; function createElement

( - type: ComponentClass

, + type: ComponentClass

| StatelessComponent

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

; @@ -116,11 +116,6 @@ declare namespace __React { // Base component for plain JS classes class Component implements ComponentLifecycle { - static propTypes: ValidationMap; - static contextTypes: ValidationMap; - static childContextTypes: ValidationMap; - static defaultProps: Props; - constructor(props?: P, context?: any); setState(f: (prevState: S, props: P) => S, callback?: () => any): void; setState(state: S, callback?: () => any): void; @@ -148,6 +143,13 @@ declare namespace __React { // Class Interfaces // ---------------------------------------------------------------------- + interface StatelessComponent

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

; + contextTypes?: ValidationMap; + defaultProps?: P; + } + interface ComponentClass

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

; @@ -325,6 +327,7 @@ declare namespace __React { defaultChecked?: boolean; defaultValue?: string | string[]; } + interface SVGProps extends SVGAttributes, Props { } @@ -1001,6 +1004,7 @@ declare namespace JSX { defs: React.SVGProps; ellipse: React.SVGProps; g: React.SVGProps; + image: React.SVGProps; line: React.SVGProps; linearGradient: React.SVGProps; mask: React.SVGProps; From bef72125ab76464dca77ca6f5ec0f49b2070ba69 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Mon, 9 Nov 2015 18:01:35 -0800 Subject: [PATCH 17/23] [React.14] Move shallowCompare into __React.__Addons namespace --- react/react-addons-shallow-compare.d.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/react/react-addons-shallow-compare.d.ts b/react/react-addons-shallow-compare.d.ts index a0e38df23..2b5a4dba2 100644 --- a/react/react-addons-shallow-compare.d.ts +++ b/react/react-addons-shallow-compare.d.ts @@ -5,7 +5,15 @@ /// +declare namespace __React { + namespace __Addons { + export function shallowCompare( + component: __React.Component, + nextProps: P, + nextState: S): boolean; + } +} + declare module "react-addons-shallow-compare" { - function shallowCompare(component: __React.Component, nextProps: P, nextState: S): boolean; - export = shallowCompare; + export = __React.__Addons.shallowCompare; } From 5a1b81b6b805251d3c9cb570c8311a6c37d8aa9a Mon Sep 17 00:00:00 2001 From: Derrick Liu Date: Mon, 9 Nov 2015 20:14:06 -0800 Subject: [PATCH 18/23] Allow for custom keys in TileLayerOptions According to https://github.com/Microsoft/TypeScript/issues/3755, properties not previously defined in a type will now be marked as errors during compilation in TypeScript 1.6 and later. Since a TileLayerOptions object is dynamically evaluated for custom properties that might be used in a provided tile URL template, the TypeScript change breaks this functionality. The proposed change adds a string indexer (one of the suggested changes in the link above), which fixes the issue. --- leaflet/leaflet.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/leaflet/leaflet.d.ts b/leaflet/leaflet.d.ts index 110bdd6f7..d27b902d7 100755 --- a/leaflet/leaflet.d.ts +++ b/leaflet/leaflet.d.ts @@ -4176,6 +4176,11 @@ declare namespace L { * When this option is set, the TileLayer only loads tiles that are in the given geographical bounds. */ bounds?: LatLngBounds; + + /** + * Custom keys may be specified in TileLayerOptions so they can be used in a provided URL template. + */ + [additionalKeys: string]: any; } } From 813f3b03dbaa53acb9bbe8428a6c5137a26795d6 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Tue, 10 Nov 2015 23:43:36 -0800 Subject: [PATCH 19/23] [React.14] Add checkedLink/valueLink to HTMLAttributes for LinkedStateMixin --- react/react-addons-linked-state-mixin.d.ts | 5 +++++ react/react-tests.ts | 21 +++++++++++++++++++-- react/react.d.ts | 7 +++++-- 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/react/react-addons-linked-state-mixin.d.ts b/react/react-addons-linked-state-mixin.d.ts index 5cee5fd5d..d9e5b7beb 100644 --- a/react/react-addons-linked-state-mixin.d.ts +++ b/react/react-addons-linked-state-mixin.d.ts @@ -14,6 +14,11 @@ declare namespace __React { interface LinkedStateMixin extends Mixin { linkState(key: string): ReactLink; } + + interface HTMLAttributes { + checkedLink?: ReactLink; + valueLink?: ReactLink; + } namespace __Addons { export var LinkedStateMixin: LinkedStateMixin; diff --git a/react/react-tests.ts b/react/react-tests.ts index 8349aa3c4..d0f9ae146 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -466,8 +466,25 @@ React.createFactory(CSSTransitionGroup)({ // LinkedStateMixin addon // -------------------------------------------------------------------------- React.createClass({ - mixins: [LinkedStateMixin], - render: function() { return React.DOM.div(null) } + mixins: [LinkedStateMixin], + getInitialState: function() { + return { + isChecked: false, + message: "hello!" + }; + }, + render: function() { + return React.DOM.div(null, + React.DOM.input({ + type: "checkbox", + checkedLink: this.linkState("isChecked") + }), + React.DOM.input({ + type: "text", + valueLink: this.linkState("message") + }) + ); + } }); // diff --git a/react/react.d.ts b/react/react.d.ts index 115c9fa9b..e3d0f43f7 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -324,8 +324,6 @@ declare namespace __React { } interface HTMLProps extends HTMLAttributes, Props { - defaultChecked?: boolean; - defaultValue?: string | string[]; } interface SVGProps extends SVGAttributes, Props { @@ -454,6 +452,11 @@ declare namespace __React { } interface HTMLAttributes extends DOMAttributes { + // React-specific Attributes + defaultChecked?: boolean; + defaultValue?: string | string[]; + + // Standard HTML Attributes accept?: string; acceptCharset?: string; accessKey?: string; From bb72880cd3a999b849f8d3408cce39d7fe739777 Mon Sep 17 00:00:00 2001 From: James Brantly Date: Wed, 11 Nov 2015 08:55:17 -0500 Subject: [PATCH 20/23] Add custom classes support to CSSTransitionGroup --- react/react-addons-css-transition-group.d.ts | 12 +++++++++++- react/react-tests.ts | 11 +++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/react/react-addons-css-transition-group.d.ts b/react/react-addons-css-transition-group.d.ts index fb1d1ab83..c9b40476d 100644 --- a/react/react-addons-css-transition-group.d.ts +++ b/react/react-addons-css-transition-group.d.ts @@ -7,8 +7,18 @@ /// declare namespace __React { + + interface CSSTransitionGroupTransitionName { + enter: string; + enterActive?: string; + leave: string; + leaveActive?: string; + appear?: string; + appearActive?: string; + } + interface CSSTransitionGroupProps extends TransitionGroupProps { - transitionName: string; + transitionName: string | CSSTransitionGroupTransitionName; transitionAppear?: boolean; transitionEnter?: boolean; transitionLeave?: boolean; diff --git a/react/react-tests.ts b/react/react-tests.ts index d0f9ae146..ef505f85e 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -462,6 +462,17 @@ React.createFactory(CSSTransitionGroup)({ transitionLeave: true }); +React.createFactory(CSSTransitionGroup)({ + transitionName: { + enter: "enter", + enterActive: "enterActive", + leave: "leave", + leaveActive: "leaveActive", + appear: "appear", + appearActive: "appearActive" + } +}); + // // LinkedStateMixin addon // -------------------------------------------------------------------------- From 99443d33d58a59a7aaa43758afd0fde92301c488 Mon Sep 17 00:00:00 2001 From: James Brantly Date: Wed, 11 Nov 2015 09:47:20 -0500 Subject: [PATCH 21/23] Update tests for dependencies of React to work with v0.14 --- fixed-data-table/fixed-data-table-tests.tsx | 4 +- .../legacy/material-ui-0.11.1-tests.tsx | 4 +- material-ui/material-ui-tests.tsx | 4 +- mobservable-react/mobservable-react-tests.ts | 8 ++-- .../react-input-calendar-tests.tsx | 4 +- react-native/react-native.d.ts | 14 +----- react-redux/react-redux-tests.tsx | 10 +++-- react-router/react-router-tests.ts | 43 ++++--------------- 8 files changed, 32 insertions(+), 59 deletions(-) diff --git a/fixed-data-table/fixed-data-table-tests.tsx b/fixed-data-table/fixed-data-table-tests.tsx index 9265186fb..28dae2890 100644 --- a/fixed-data-table/fixed-data-table-tests.tsx +++ b/fixed-data-table/fixed-data-table-tests.tsx @@ -1,7 +1,9 @@ /// /// +/// import * as React from "react"; +import * as ReactDOM from "react-dom"; import * as FixedDataTable from "fixed-data-table"; var rows = [ @@ -34,4 +36,4 @@ function rowGetter(rowIndex: number) { /> -React.render(table, document.body); +ReactDOM.render(table, document.body); diff --git a/material-ui/legacy/material-ui-0.11.1-tests.tsx b/material-ui/legacy/material-ui-0.11.1-tests.tsx index c686efa9e..ffc360963 100644 --- a/material-ui/legacy/material-ui-0.11.1-tests.tsx +++ b/material-ui/legacy/material-ui-0.11.1-tests.tsx @@ -1,7 +1,9 @@ /// +/// /// -import * as React from "react/addons"; +import * as React from "react"; +import * as LinkedStateMixin from "react-addons-linked-state-mixin"; import mui = require("material-ui"); import Colors = require("material-ui/lib/styles/colors"); import AppBar = require("material-ui/lib/app-bar"); diff --git a/material-ui/material-ui-tests.tsx b/material-ui/material-ui-tests.tsx index 4c69f3410..4e1e920d7 100644 --- a/material-ui/material-ui-tests.tsx +++ b/material-ui/material-ui-tests.tsx @@ -1,7 +1,9 @@ /// +/// /// -import * as React from "react/addons"; +import * as React from "react"; +import * as LinkedStateMixin from "react-addons-linked-state-mixin"; import Checkbox = require("material-ui/lib/checkbox"); import Colors = require("material-ui/lib/styles/colors"); import AppBar = require("material-ui/lib/app-bar"); diff --git a/mobservable-react/mobservable-react-tests.ts b/mobservable-react/mobservable-react-tests.ts index 7b39dbb7f..1bf2b49c6 100644 --- a/mobservable-react/mobservable-react-tests.ts +++ b/mobservable-react/mobservable-react-tests.ts @@ -17,7 +17,7 @@ import {reactiveComponent} from 'mobservable-react'; })); let c1Factory = React.createFactory(c1); - React.render(c1Factory({ + ReactDOM.render(c1Factory({ test: "hello" }), null); } @@ -31,7 +31,7 @@ class TestComponent extends React.Component<{ test: string },{}> { { let c2Factory = React.createFactory(TestComponent); - React.render(c2Factory({ + ReactDOM.render(c2Factory({ test: "hello" }) , null); } @@ -39,7 +39,7 @@ class TestComponent extends React.Component<{ test: string },{}> { { var c3 = reactiveComponent((props: { test: string }) => React.createElement("div")); var c3Factory = React.createFactory(c3); //without JSX - React.render(c3Factory({ + ReactDOM.render(c3Factory({ test: "hello" }), null); } @@ -55,7 +55,7 @@ class TestComponent2 extends React.Component<{ test: string },{}> { // Argument of type 'typeof TestComponent2 | void' is not assignable to parameter of type 'ComponentClass<{ test: string; }>'. // Type 'void' is not assignable to type 'ComponentClass<{ test: string; }>'. let c4Factory = React.createFactory(> reactiveComponent(TestComponent2)); - React.render(c4Factory({ + ReactDOM.render(c4Factory({ test: "hello" }) , null); } \ No newline at end of file diff --git a/react-input-calendar/react-input-calendar-tests.tsx b/react-input-calendar/react-input-calendar-tests.tsx index 127106424..9cc4963fb 100644 --- a/react-input-calendar/react-input-calendar-tests.tsx +++ b/react-input-calendar/react-input-calendar-tests.tsx @@ -1,6 +1,8 @@ /// /// +/// import * as ReactInputCalendar from 'react-input-calendar'; import * as React from 'react'; -React.render(, document.body); +import * as ReactDOM from 'react-dom'; +ReactDOM.render(, document.body); diff --git a/react-native/react-native.d.ts b/react-native/react-native.d.ts index 485fdf5c0..2b6f076d0 100644 --- a/react-native/react-native.d.ts +++ b/react-native/react-native.d.ts @@ -2274,8 +2274,8 @@ declare namespace ReactNative { export interface DOMElement

extends React.DOMElement

{} - export type HTMLElement =React.HTMLElement; - export type SVGElement = React.SVGElement; + export type HTMLElement =React.ReactHTMLElement; + export type SVGElement = React.ReactSVGElement; // // Factories @@ -2289,7 +2289,6 @@ declare namespace ReactNative { export type HTMLFactory = React.HTMLFactory; export type SVGFactory = React.SVGFactory; - export type SVGElementFactory = React.SVGElementFactory; // // React Nodes @@ -2352,9 +2351,6 @@ declare namespace ReactNative { tagName: string; } - export type HTMLComponent = React.HTMLComponent; - export type SVGComponent = React.SVGComponent - export interface ChildContextProvider extends React.ChildContextProvider {} // @@ -2422,20 +2418,14 @@ declare namespace ReactNative { export interface Props extends React.Props {} - export interface DOMAttributesBase extends React.DOMAttributesBase {} - export interface DOMAttributes extends React.DOMAttributes {} // This interface is not complete. Only properties accepting // unitless numbers are listed here (see CSSProperty.js in React) export interface CSSProperties extends React.CSSProperties {} - export interface HTMLAttributesBase extends React.HTMLAttributesBase {} - export interface HTMLAttributes extends React.HTMLAttributes {} - export interface SVGElementAttributes extends React.SVGElementAttributes {} - export interface SVGAttributes extends React.SVGAttributes {} // diff --git a/react-redux/react-redux-tests.tsx b/react-redux/react-redux-tests.tsx index abbacabef..a44c0bfaa 100644 --- a/react-redux/react-redux-tests.tsx +++ b/react-redux/react-redux-tests.tsx @@ -1,11 +1,13 @@ /// /// +/// /// /// /// import { Component, ReactElement } from 'react'; import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import * as Router from 'react-router'; import { Route, RouterState } from 'react-router'; import { Store, Dispatch, bindActionCreators } from 'redux'; @@ -65,7 +67,7 @@ class App extends Component { const targetEl = document.getElementById('root'); -React.render(( +ReactDOM.render(( {() => } @@ -100,7 +102,7 @@ declare var addTodo: () => { type: string; }; declare var todoActionCreators: { [type: string]: (...args: any[]) => any; }; declare var counterActionCreators: { [type: string]: (...args: any[]) => any; }; -React.render( +ReactDOM.render( {() => } , @@ -108,7 +110,7 @@ React.render( ); Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "routerState" here - React.render( + ReactDOM.render( {/* //TODO: error TS2339: Property 'routerState' does not exist on type 'RouteProp'. @@ -121,7 +123,7 @@ Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note " //TODO: for React Router 1.0 //TODO: error TS2604: JSX element type 'Router' does not have any construct or call signatures. -//React.render( +//ReactDOM.render( // // {() => ...} // , diff --git a/react-router/react-router-tests.ts b/react-router/react-router-tests.ts index 54b0545e2..7c80d740a 100644 --- a/react-router/react-router-tests.ts +++ b/react-router/react-router-tests.ts @@ -1,8 +1,9 @@ /// +/// "use strict"; import React = require('react'); -import ReactAddons = require('react/addons'); +import ReactDOM = require('react-dom'); import Router = require('react-router'); // Mixin @@ -129,9 +130,6 @@ class DefaultRouteTest { var Handler: React.ComponentClass; React.createElement(Router.DefaultRoute, null); React.createElement(Router.DefaultRoute, {name: 'name', handler: Handler}); - - ReactAddons.createElement(Router.DefaultRoute, null); - ReactAddons.createElement(Router.DefaultRoute, {name: 'name', handler: Handler}); } } @@ -169,16 +167,6 @@ class LinkTest { query: {}, onClick: () => console.log(1) }); - - ReactAddons.createElement(Router.Link, null); - ReactAddons.createElement(Router.Link, {to: 'home'}); - ReactAddons.createElement(Router.Link, { - activeClassName: 'name', - to: 'home', - params: {}, - query: {}, - onClick: () => console.log(1) - }); } } @@ -195,10 +183,6 @@ class NotFoundRouteTest { React.createElement(Router.NotFoundRoute, null); React.createElement(Router.NotFoundRoute, {handler: Handler}); React.createElement(Router.NotFoundRoute, {handler: Handler, name: "home"}); - - ReactAddons.createElement(Router.NotFoundRoute, null); - ReactAddons.createElement(Router.NotFoundRoute, {handler: Handler}); - ReactAddons.createElement(Router.NotFoundRoute, {handler: Handler, name: "home"}); } } @@ -215,10 +199,6 @@ class RedirectTest { React.createElement(Router.Redirect, null); React.createElement(Router.Redirect, {}); React.createElement(Router.Redirect, {path: 'a', from: 'a', to: 'b'}); - - ReactAddons.createElement(Router.Redirect, null); - ReactAddons.createElement(Router.Redirect, {}); - ReactAddons.createElement(Router.Redirect, {path: 'a', from: 'a', to: 'b'}); } } @@ -237,10 +217,6 @@ class RouteTest { React.createElement(Router.Route, null); React.createElement(Router.Route, {}); React.createElement(Router.Route, {name: "home", path: "/", handler: Handler, ignoreScrollBehavior: true}); - - ReactAddons.createElement(Router.Route, null); - ReactAddons.createElement(Router.Route, {}); - ReactAddons.createElement(Router.Route, {name: "home", path: "/", handler: Handler, ignoreScrollBehavior: true}); } } @@ -250,9 +226,6 @@ class RouteHandlerTest { createElement() { React.createElement(Router.RouteHandler, null); React.createElement(Router.RouteHandler, {}); - - ReactAddons.createElement(Router.RouteHandler, null); - ReactAddons.createElement(Router.RouteHandler, {}); } } @@ -307,24 +280,24 @@ class RunTest { constructor() { // React.createElement() version var v1: Router.Router = Router.run(React.createElement(Router.Route, null), (Handler) => { - React.render(React.createElement(Handler, null), document.body); + ReactDOM.render(React.createElement(Handler, null), document.body); }); var v2: Router.Router = Router.run(React.createElement(Router.Route, null), Router.HistoryLocation, (Handler, state) => { - React.render(React.createElement(Handler, null), document.body); + ReactDOM.render(React.createElement(Handler, null), document.body); }); var v3: Router.Router = Router.run(React.createElement(Router.Route, null), '/foo/bar', (Handler, state) => { - React.render(React.createElement(Handler, null), document.body); + ReactDOM.render(React.createElement(Handler, null), document.body); }); // React.createFactory() version var v4: Router.Router = Router.run(React.createFactory(Router.Route)(), (Handler) => { - React.render(React.createElement(Handler, null), document.body); + ReactDOM.render(React.createElement(Handler, null), document.body); }); var v5: Router.Router = Router.run(React.createFactory(Router.Route)(), Router.HistoryLocation, (Handler, state) => { - React.render(React.createElement(Handler, null), document.body); + ReactDOM.render(React.createElement(Handler, null), document.body); }); var v6: Router.Router = Router.run(React.createFactory(Router.Route)(), '/foo/bar', (Handler, state) => { - React.render(React.createElement(Handler, null), document.body); + ReactDOM.render(React.createElement(Handler, null), document.body); }); } } From c0aef45b507f1d9d216b089d9ef943c50cf342e9 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Wed, 11 Nov 2015 18:26:14 -0800 Subject: [PATCH 22/23] [React.14] Fix typing for valueLink/checkedLink --- react/react-addons-linked-state-mixin.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/react-addons-linked-state-mixin.d.ts b/react/react-addons-linked-state-mixin.d.ts index d9e5b7beb..cbaa37958 100644 --- a/react/react-addons-linked-state-mixin.d.ts +++ b/react/react-addons-linked-state-mixin.d.ts @@ -16,8 +16,8 @@ declare namespace __React { } interface HTMLAttributes { - checkedLink?: ReactLink; - valueLink?: ReactLink; + checkedLink?: ReactLink; + valueLink?: ReactLink; } namespace __Addons { From 3b6d42912788a3b5b47edf271f551b80966fd9e6 Mon Sep 17 00:00:00 2001 From: Martin Mouterde Date: Fri, 13 Nov 2015 15:54:23 +0100 Subject: [PATCH 23/23] Missing signature for router.use http://expressjs.com/4x/api.html#router.use => this function could be used with (path:string,router:router) --- express/express.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/express/express.d.ts b/express/express.d.ts index 523f8f7c6..db1981d5d 100644 --- a/express/express.d.ts +++ b/express/express.d.ts @@ -110,6 +110,7 @@ declare module "express" { use(path: string[], handler: ErrorRequestHandler): T; use(path: RegExp, ...handler: RequestHandler[]): T; use(path: RegExp, handler: ErrorRequestHandler): T; + use(path:string, router:Router): T; } export function Router(options?: any): Router;