├── .gitignore ├── LICENSE ├── README.md ├── index.html ├── package.json ├── server.js ├── src ├── App.tsx ├── index.tsx ├── tsconfig.json └── tsd_typings │ ├── react │ ├── react-global.d.ts │ └── react.d.ts │ └── tsd.d.ts ├── tsd.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | npm-debug.log 30 | .DS_Store 31 | dist 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Based on react-hot-boilerplate: https://github.com/gaearon/react-hot-boilerplate 4 | 5 | Copyright (c) 2014 Dan Abramov 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | >## Deprecation Notice 2 | 3 | >This boilerplate is based on [react-hot-loader](https://github.com/gaearon/react-hot-loader) which is deprecated. A new boilerplate which uses React Transform, can be found [here](https://github.com/wmaurer/react-transform-boilerplate-ts). 4 | 5 | react-hot-boilerplate-ts 6 | ======================== 7 | 8 | An (almost) minimal dev environment to enable live-editing Typescript/ReactJS components. 9 | 10 | This a copy of Dan Abramov's react-hot-boilerplate (https://github.com/gaearon/react-hot-boilerplate), but uses ts-loader/Typescript instead of babel-loader/Babel. 11 | 12 | ### Usage 13 | 14 | ``` 15 | npm install 16 | npm start 17 | open http://localhost:3000 18 | ``` 19 | 20 | ### Extras 21 | 22 | To show the advantages of Typescript, the typings for React have been included. 23 | 24 | The `App` component has a `name` property which has been defined on the interface (`IAppProps`) for `props`, i.e. the first generic parameter to `Component`. 25 | 26 | If you were to remove the name property when using the component (in `index.tsx`), then you'll receive a typescript compile error. 27 | 28 | If you're using a suitably advanced editor or editor plugin, you'll also get intellisense and edit-time error messages. This works with the [atom](http://atom.io) editor and the atom [atom-typescript](https://atom.io/packages/atom-typescript) plugin. 29 | 30 | ### TODO 31 | 32 | tslint 33 | 34 | ### Dependencies 35 | 36 | * React 37 | * Webpack 38 | * [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 39 | * [typescript](https://github.com/Microsoft/TypeScript) 40 | * [ts-loader](https://github.com/TypeStrong/ts-loader) 41 | * [react-hot-loader](https://github.com/gaearon/react-hot-loader) 42 | 43 | ### Resources 44 | 45 | * [react-hot-boilerplate on Github](https://github.com/gaearon/react-hot-boilerplate) 46 | * Ping [waynemaurer](https://twitter.com/waynemaurer) on Twitter 47 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Sample App 5 | 6 | 7 | 8 |
9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hot-boilerplate-ts", 3 | "version": "1.0.0", 4 | "description": "(Almost) minimal live-editing boilerplate for your next ReactJS/Typescript project", 5 | "scripts": { 6 | "start": "node server.js" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/wmaurer/react-hot-boilerplate-ts.git" 11 | }, 12 | "author": "Wayne Maurer (http://github.com/wmaurer)", 13 | "license": "MIT", 14 | "bugs": { 15 | "url": "https://github.com/wmaurer/react-hot-boilerplate-ts/issues" 16 | }, 17 | "homepage": "https://github.com/wmaurer/react-hot-boilerplate-ts", 18 | "dependencies": { 19 | "react": "^0.13.3" 20 | }, 21 | "devDependencies": { 22 | "react-hot-loader": "^1.3.0", 23 | "ts-loader": "^0.5.5", 24 | "tsd": "^0.6.4", 25 | "typescript": "^1.6.2", 26 | "webpack": "^1.12.2", 27 | "webpack-dev-server": "^1.12.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var WebpackDevServer = require('webpack-dev-server'); 3 | var config = require('./webpack.config'); 4 | 5 | new WebpackDevServer(webpack(config), { 6 | publicPath: config.output.publicPath, 7 | hot: true, 8 | historyApiFallback: true 9 | }).listen(3000, 'localhost', function (err, result) { 10 | if (err) { 11 | console.log(err); 12 | } 13 | 14 | console.log('Listening at localhost:3000'); 15 | }); 16 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export interface IAppProps { 4 | name: string; 5 | } 6 | 7 | export default class App extends React.Component { 8 | render() { 9 | return ( 10 |

Hello, {this.props.name}!

11 | ); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import App from "./App.tsx"; 3 | 4 | React.render(, document.getElementById('root')); 5 | -------------------------------------------------------------------------------- /src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "target": "ES5", 5 | "module": "commonjs", 6 | "jsx": "react" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/tsd_typings/react/react-global.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.13.3 (namespace) 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | /// 7 | 8 | import React = __React; 9 | 10 | declare namespace __React { 11 | // 12 | // React.addons 13 | // ---------------------------------------------------------------------- 14 | 15 | export module addons { 16 | export var CSSTransitionGroup: CSSTransitionGroup; 17 | export var TransitionGroup: TransitionGroup; 18 | 19 | export var LinkedStateMixin: LinkedStateMixin; 20 | export var PureRenderMixin: PureRenderMixin; 21 | 22 | export function batchedUpdates( 23 | callback: (a: A, b: B) => any, a: A, b: B): void; 24 | export function batchedUpdates(callback: (a: A) => any, a: A): void; 25 | export function batchedUpdates(callback: () => any): void; 26 | 27 | // deprecated: use petehunt/react-classset or JedWatson/classnames 28 | export function classSet(cx: { [key: string]: boolean }): string; 29 | export function classSet(...classList: string[]): string; 30 | 31 | export function cloneWithProps

( 32 | element: DOMElement

, props: P): DOMElement

; 33 | export function cloneWithProps

( 34 | element: ClassicElement

, props: P): ClassicElement

; 35 | export function cloneWithProps

( 36 | element: ReactElement

, props: P): ReactElement

; 37 | 38 | export function createFragment( 39 | object: { [key: string]: ReactNode }): ReactFragment; 40 | 41 | export function update(value: any[], spec: UpdateArraySpec): any[]; 42 | export function update(value: {}, spec: UpdateSpec): any; 43 | 44 | // Development tools 45 | export import Perf = ReactPerf; 46 | export import TestUtils = ReactTestUtils; 47 | } 48 | 49 | // 50 | // React.addons (Transitions) 51 | // ---------------------------------------------------------------------- 52 | 53 | interface TransitionGroupProps { 54 | component?: ReactType; 55 | childFactory?: (child: ReactElement) => ReactElement; 56 | } 57 | 58 | interface CSSTransitionGroupProps extends TransitionGroupProps { 59 | transitionName: string; 60 | transitionAppear?: boolean; 61 | transitionEnter?: boolean; 62 | transitionLeave?: boolean; 63 | } 64 | 65 | type CSSTransitionGroup = ComponentClass; 66 | type TransitionGroup = ComponentClass; 67 | 68 | // 69 | // React.addons (Mixins) 70 | // ---------------------------------------------------------------------- 71 | 72 | interface ReactLink { 73 | value: T; 74 | requestChange(newValue: T): void; 75 | } 76 | 77 | interface LinkedStateMixin extends Mixin { 78 | linkState(key: string): ReactLink; 79 | } 80 | 81 | interface PureRenderMixin extends Mixin { 82 | } 83 | 84 | // 85 | // Reat.addons.update 86 | // ---------------------------------------------------------------------- 87 | 88 | interface UpdateSpec { 89 | $set?: any; 90 | $merge?: {}; 91 | $apply?(value: any): any; 92 | // [key: string]: UpdateSpec; 93 | } 94 | 95 | interface UpdateArraySpec extends UpdateSpec { 96 | $push?: any[]; 97 | $unshift?: any[]; 98 | $splice?: any[][]; 99 | } 100 | 101 | // 102 | // React.addons.Perf 103 | // ---------------------------------------------------------------------- 104 | 105 | interface ComponentPerfContext { 106 | current: string; 107 | owner: string; 108 | } 109 | 110 | interface NumericPerfContext { 111 | [key: string]: number; 112 | } 113 | 114 | interface Measurements { 115 | exclusive: NumericPerfContext; 116 | inclusive: NumericPerfContext; 117 | render: NumericPerfContext; 118 | counts: NumericPerfContext; 119 | writes: NumericPerfContext; 120 | displayNames: { 121 | [key: string]: ComponentPerfContext; 122 | }; 123 | totalTime: number; 124 | } 125 | 126 | module ReactPerf { 127 | export function start(): void; 128 | export function stop(): void; 129 | export function printInclusive(measurements: Measurements[]): void; 130 | export function printExclusive(measurements: Measurements[]): void; 131 | export function printWasted(measurements: Measurements[]): void; 132 | export function printDOM(measurements: Measurements[]): void; 133 | export function getLastMeasurements(): Measurements[]; 134 | } 135 | 136 | // 137 | // React.addons.TestUtils 138 | // ---------------------------------------------------------------------- 139 | 140 | interface MockedComponentClass { 141 | new(): any; 142 | } 143 | 144 | module ReactTestUtils { 145 | export import Simulate = ReactSimulate; 146 | 147 | export function renderIntoDocument

( 148 | element: ReactElement

): Component; 149 | export function renderIntoDocument>( 150 | element: ReactElement): C; 151 | 152 | export function mockComponent( 153 | mocked: MockedComponentClass, mockTagName?: string): typeof ReactTestUtils; 154 | 155 | export function isElementOfType( 156 | element: ReactElement, type: ReactType): boolean; 157 | export function isTextComponent(instance: Component): boolean; 158 | export function isDOMComponent(instance: Component): boolean; 159 | export function isCompositeComponent(instance: Component): boolean; 160 | export function isCompositeComponentWithType( 161 | instance: Component, 162 | type: ComponentClass): boolean; 163 | 164 | export function findAllInRenderedTree( 165 | tree: Component, 166 | fn: (i: Component) => boolean): Component; 167 | 168 | export function scryRenderedDOMComponentsWithClass( 169 | tree: Component, 170 | className: string): DOMComponent[]; 171 | export function findRenderedDOMComponentWithClass( 172 | tree: Component, 173 | className: string): DOMComponent; 174 | 175 | export function scryRenderedDOMComponentsWithTag( 176 | tree: Component, 177 | tagName: string): DOMComponent[]; 178 | export function findRenderedDOMComponentWithTag( 179 | tree: Component, 180 | tagName: string): DOMComponent; 181 | 182 | export function scryRenderedComponentsWithType

( 183 | tree: Component, 184 | type: ComponentClass

): Component[]; 185 | export function scryRenderedComponentsWithType>( 186 | tree: Component, 187 | type: ComponentClass): C[]; 188 | 189 | export function findRenderedComponentWithType

( 190 | tree: Component, 191 | type: ComponentClass

): Component; 192 | export function findRenderedComponentWithType>( 193 | tree: Component, 194 | type: ComponentClass): C; 195 | 196 | export function createRenderer(): ShallowRenderer; 197 | } 198 | 199 | interface SyntheticEventData { 200 | altKey?: boolean; 201 | button?: number; 202 | buttons?: number; 203 | clientX?: number; 204 | clientY?: number; 205 | changedTouches?: TouchList; 206 | charCode?: boolean; 207 | clipboardData?: DataTransfer; 208 | ctrlKey?: boolean; 209 | deltaMode?: number; 210 | deltaX?: number; 211 | deltaY?: number; 212 | deltaZ?: number; 213 | detail?: number; 214 | getModifierState?(key: string): boolean; 215 | key?: string; 216 | keyCode?: number; 217 | locale?: string; 218 | location?: number; 219 | metaKey?: boolean; 220 | pageX?: number; 221 | pageY?: number; 222 | relatedTarget?: EventTarget; 223 | repeat?: boolean; 224 | screenX?: number; 225 | screenY?: number; 226 | shiftKey?: boolean; 227 | targetTouches?: TouchList; 228 | touches?: TouchList; 229 | view?: AbstractView; 230 | which?: number; 231 | } 232 | 233 | interface EventSimulator { 234 | (element: Element, eventData?: SyntheticEventData): void; 235 | (component: Component, eventData?: SyntheticEventData): void; 236 | } 237 | 238 | module ReactSimulate { 239 | export var blur: EventSimulator; 240 | export var change: EventSimulator; 241 | export var click: EventSimulator; 242 | export var cut: EventSimulator; 243 | export var doubleClick: EventSimulator; 244 | export var drag: EventSimulator; 245 | export var dragEnd: EventSimulator; 246 | export var dragEnter: EventSimulator; 247 | export var dragExit: EventSimulator; 248 | export var dragLeave: EventSimulator; 249 | export var dragOver: EventSimulator; 250 | export var dragStart: EventSimulator; 251 | export var drop: EventSimulator; 252 | export var focus: EventSimulator; 253 | export var input: EventSimulator; 254 | export var keyDown: EventSimulator; 255 | export var keyPress: EventSimulator; 256 | export var keyUp: EventSimulator; 257 | export var mouseDown: EventSimulator; 258 | export var mouseEnter: EventSimulator; 259 | export var mouseLeave: EventSimulator; 260 | export var mouseMove: EventSimulator; 261 | export var mouseOut: EventSimulator; 262 | export var mouseOver: EventSimulator; 263 | export var mouseUp: EventSimulator; 264 | export var paste: EventSimulator; 265 | export var scroll: EventSimulator; 266 | export var submit: EventSimulator; 267 | export var touchCancel: EventSimulator; 268 | export var touchEnd: EventSimulator; 269 | export var touchMove: EventSimulator; 270 | export var touchStart: EventSimulator; 271 | export var wheel: EventSimulator; 272 | } 273 | 274 | class ShallowRenderer { 275 | getRenderOutput>(): E; 276 | getRenderOutput(): ReactElement; 277 | render(element: ReactElement, context?: any): void; 278 | unmount(): void; 279 | } 280 | } 281 | -------------------------------------------------------------------------------- /src/tsd_typings/react/react.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.13.3 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | declare namespace __React { 7 | // 8 | // React Elements 9 | // ---------------------------------------------------------------------- 10 | 11 | type ReactType = ComponentClass | string; 12 | 13 | interface ReactElement

{ 14 | type: string | ComponentClass

; 15 | props: P; 16 | key: string | number; 17 | ref: string | ((component: Component) => any); 18 | } 19 | 20 | interface ClassicElement

extends ReactElement

{ 21 | type: string | ClassicComponentClass

; 22 | ref: string | ((component: ClassicComponent) => any); 23 | } 24 | 25 | interface DOMElement

extends ClassicElement

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

) => any); 28 | } 29 | 30 | type HTMLElement = DOMElement; 31 | type SVGElement = DOMElement; 32 | 33 | // 34 | // Factories 35 | // ---------------------------------------------------------------------- 36 | 37 | interface Factory

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

; 39 | } 40 | 41 | interface ClassicFactory

extends Factory

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

; 43 | } 44 | 45 | interface DOMFactory

extends ClassicFactory

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

; 47 | } 48 | 49 | type HTMLFactory = DOMFactory; 50 | type SVGFactory = DOMFactory; 51 | type SVGElementFactory = DOMFactory; 52 | 53 | // 54 | // React Nodes 55 | // http://facebook.github.io/react/docs/glossary.html 56 | // ---------------------------------------------------------------------- 57 | 58 | type ReactText = string | number; 59 | type ReactChild = ReactElement | ReactText; 60 | 61 | // Should be Array but type aliases cannot be recursive 62 | type ReactFragment = {} | Array; 63 | type ReactNode = ReactChild | ReactFragment | boolean; 64 | 65 | // 66 | // Top Level API 67 | // ---------------------------------------------------------------------- 68 | 69 | function createClass(spec: ComponentSpec): ClassicComponentClass

; 70 | 71 | function createFactory

(type: string): DOMFactory

; 72 | function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; 73 | function createFactory

(type: ComponentClass

): Factory

; 74 | 75 | function createElement

( 76 | type: string, 77 | props?: P, 78 | ...children: ReactNode[]): DOMElement

; 79 | function createElement

( 80 | type: ClassicComponentClass

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

; 83 | function createElement

( 84 | type: ComponentClass

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

; 87 | 88 | function cloneElement

( 89 | element: DOMElement

, 90 | props?: P, 91 | ...children: ReactNode[]): DOMElement

; 92 | function cloneElement

( 93 | element: ClassicElement

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

; 96 | function cloneElement

( 97 | element: ReactElement

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

; 100 | 101 | function render

( 102 | element: DOMElement

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

; 105 | function render( 106 | element: ClassicElement

, 107 | container: Element, 108 | callback?: () => any): ClassicComponent; 109 | function render( 110 | element: ReactElement

, 111 | container: Element, 112 | callback?: () => any): Component; 113 | 114 | function unmountComponentAtNode(container: Element): boolean; 115 | function renderToString(element: ReactElement): string; 116 | function renderToStaticMarkup(element: ReactElement): string; 117 | function isValidElement(object: {}): boolean; 118 | function initializeTouchEvents(shouldUseTouch: boolean): void; 119 | 120 | function findDOMNode( 121 | componentOrElement: Component | Element): TElement; 122 | function findDOMNode( 123 | componentOrElement: Component | Element): Element; 124 | 125 | var DOM: ReactDOM; 126 | var PropTypes: ReactPropTypes; 127 | var Children: ReactChildren; 128 | 129 | // 130 | // Component API 131 | // ---------------------------------------------------------------------- 132 | 133 | // Base component for plain JS classes 134 | class Component implements ComponentLifecycle { 135 | constructor(props?: P, context?: any); 136 | setState(f: (prevState: S, props: P) => S, callback?: () => any): void; 137 | setState(state: S, callback?: () => any): void; 138 | forceUpdate(callBack?: () => any): void; 139 | render(): JSX.Element; 140 | props: P; 141 | state: S; 142 | context: {}; 143 | refs: { 144 | [key: string]: Component 145 | }; 146 | } 147 | 148 | interface ClassicComponent extends Component { 149 | replaceState(nextState: S, callback?: () => any): void; 150 | getDOMNode(): TElement; 151 | getDOMNode(): Element; 152 | isMounted(): boolean; 153 | getInitialState?(): S; 154 | setProps(nextProps: P, callback?: () => any): void; 155 | replaceProps(nextProps: P, callback?: () => any): void; 156 | } 157 | 158 | interface DOMComponent

extends ClassicComponent { 159 | tagName: string; 160 | } 161 | 162 | type HTMLComponent = DOMComponent; 163 | type SVGComponent = DOMComponent; 164 | 165 | interface ChildContextProvider { 166 | getChildContext(): CC; 167 | } 168 | 169 | // 170 | // Class Interfaces 171 | // ---------------------------------------------------------------------- 172 | 173 | interface ComponentClass

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

; 176 | contextTypes?: ValidationMap; 177 | childContextTypes?: ValidationMap; 178 | defaultProps?: P; 179 | } 180 | 181 | interface ClassicComponentClass

extends ComponentClass

{ 182 | new(props?: P, context?: any): ClassicComponent; 183 | getDefaultProps?(): P; 184 | displayName?: string; 185 | } 186 | 187 | // 188 | // Component Specs and Lifecycle 189 | // ---------------------------------------------------------------------- 190 | 191 | interface ComponentLifecycle { 192 | componentWillMount?(): void; 193 | componentDidMount?(): void; 194 | componentWillReceiveProps?(nextProps: P, nextContext: any): void; 195 | shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean; 196 | componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void; 197 | componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void; 198 | componentWillUnmount?(): void; 199 | } 200 | 201 | interface Mixin extends ComponentLifecycle { 202 | mixins?: Mixin; 203 | statics?: { 204 | [key: string]: any; 205 | }; 206 | 207 | displayName?: string; 208 | propTypes?: ValidationMap; 209 | contextTypes?: ValidationMap; 210 | childContextTypes?: ValidationMap 211 | 212 | getDefaultProps?(): P; 213 | getInitialState?(): S; 214 | } 215 | 216 | interface ComponentSpec extends Mixin { 217 | render(): ReactElement; 218 | 219 | [propertyName: string]: any; 220 | } 221 | 222 | // 223 | // Event System 224 | // ---------------------------------------------------------------------- 225 | 226 | interface SyntheticEvent { 227 | bubbles: boolean; 228 | cancelable: boolean; 229 | currentTarget: EventTarget; 230 | defaultPrevented: boolean; 231 | eventPhase: number; 232 | isTrusted: boolean; 233 | nativeEvent: Event; 234 | preventDefault(): void; 235 | stopPropagation(): void; 236 | target: EventTarget; 237 | timeStamp: Date; 238 | type: string; 239 | } 240 | 241 | interface DragEvent extends SyntheticEvent { 242 | dataTransfer: DataTransfer; 243 | } 244 | 245 | interface ClipboardEvent extends SyntheticEvent { 246 | clipboardData: DataTransfer; 247 | } 248 | 249 | interface KeyboardEvent extends SyntheticEvent { 250 | altKey: boolean; 251 | charCode: number; 252 | ctrlKey: boolean; 253 | getModifierState(key: string): boolean; 254 | key: string; 255 | keyCode: number; 256 | locale: string; 257 | location: number; 258 | metaKey: boolean; 259 | repeat: boolean; 260 | shiftKey: boolean; 261 | which: number; 262 | } 263 | 264 | interface FocusEvent extends SyntheticEvent { 265 | relatedTarget: EventTarget; 266 | } 267 | 268 | interface FormEvent extends SyntheticEvent { 269 | } 270 | 271 | interface MouseEvent extends SyntheticEvent { 272 | altKey: boolean; 273 | button: number; 274 | buttons: number; 275 | clientX: number; 276 | clientY: number; 277 | ctrlKey: boolean; 278 | getModifierState(key: string): boolean; 279 | metaKey: boolean; 280 | pageX: number; 281 | pageY: number; 282 | relatedTarget: EventTarget; 283 | screenX: number; 284 | screenY: number; 285 | shiftKey: boolean; 286 | } 287 | 288 | interface TouchEvent extends SyntheticEvent { 289 | altKey: boolean; 290 | changedTouches: TouchList; 291 | ctrlKey: boolean; 292 | getModifierState(key: string): boolean; 293 | metaKey: boolean; 294 | shiftKey: boolean; 295 | targetTouches: TouchList; 296 | touches: TouchList; 297 | } 298 | 299 | interface UIEvent extends SyntheticEvent { 300 | detail: number; 301 | view: AbstractView; 302 | } 303 | 304 | interface WheelEvent extends SyntheticEvent { 305 | deltaMode: number; 306 | deltaX: number; 307 | deltaY: number; 308 | deltaZ: number; 309 | } 310 | 311 | // 312 | // Event Handler Types 313 | // ---------------------------------------------------------------------- 314 | 315 | interface EventHandler { 316 | (event: E): void; 317 | } 318 | 319 | interface DragEventHandler extends EventHandler {} 320 | interface ClipboardEventHandler extends EventHandler {} 321 | interface KeyboardEventHandler extends EventHandler {} 322 | interface FocusEventHandler extends EventHandler {} 323 | interface FormEventHandler extends EventHandler {} 324 | interface MouseEventHandler extends EventHandler {} 325 | interface TouchEventHandler extends EventHandler {} 326 | interface UIEventHandler extends EventHandler {} 327 | interface WheelEventHandler extends EventHandler {} 328 | 329 | // 330 | // Props / DOM Attributes 331 | // ---------------------------------------------------------------------- 332 | 333 | interface Props { 334 | children?: ReactNode; 335 | key?: string | number; 336 | ref?: string | ((component: T) => any); 337 | } 338 | 339 | interface DOMAttributesBase extends Props { 340 | onCopy?: ClipboardEventHandler; 341 | onCut?: ClipboardEventHandler; 342 | onPaste?: ClipboardEventHandler; 343 | onKeyDown?: KeyboardEventHandler; 344 | onKeyPress?: KeyboardEventHandler; 345 | onKeyUp?: KeyboardEventHandler; 346 | onFocus?: FocusEventHandler; 347 | onBlur?: FocusEventHandler; 348 | onChange?: FormEventHandler; 349 | onInput?: FormEventHandler; 350 | onSubmit?: FormEventHandler; 351 | onClick?: MouseEventHandler; 352 | onDoubleClick?: MouseEventHandler; 353 | onDrag?: DragEventHandler; 354 | onDragEnd?: DragEventHandler; 355 | onDragEnter?: DragEventHandler; 356 | onDragExit?: DragEventHandler; 357 | onDragLeave?: DragEventHandler; 358 | onDragOver?: DragEventHandler; 359 | onDragStart?: DragEventHandler; 360 | onDrop?: DragEventHandler; 361 | onMouseDown?: MouseEventHandler; 362 | onMouseEnter?: MouseEventHandler; 363 | onMouseLeave?: MouseEventHandler; 364 | onMouseMove?: MouseEventHandler; 365 | onMouseOut?: MouseEventHandler; 366 | onMouseOver?: MouseEventHandler; 367 | onMouseUp?: MouseEventHandler; 368 | onTouchCancel?: TouchEventHandler; 369 | onTouchEnd?: TouchEventHandler; 370 | onTouchMove?: TouchEventHandler; 371 | onTouchStart?: TouchEventHandler; 372 | onScroll?: UIEventHandler; 373 | onWheel?: WheelEventHandler; 374 | 375 | dangerouslySetInnerHTML?: { 376 | __html: string; 377 | }; 378 | } 379 | 380 | interface DOMAttributes extends DOMAttributesBase> { 381 | } 382 | 383 | // This interface is not complete. Only properties accepting 384 | // unitless numbers are listed here (see CSSProperty.js in React) 385 | interface CSSProperties { 386 | boxFlex?: number; 387 | boxFlexGroup?: number; 388 | columnCount?: number; 389 | flex?: number | string; 390 | flexGrow?: number; 391 | flexShrink?: number; 392 | fontWeight?: number | string; 393 | lineClamp?: number; 394 | lineHeight?: number | string; 395 | opacity?: number; 396 | order?: number; 397 | orphans?: number; 398 | widows?: number; 399 | zIndex?: number; 400 | zoom?: number; 401 | 402 | fontSize?: number | string; 403 | 404 | // SVG-related properties 405 | fillOpacity?: number; 406 | strokeOpacity?: number; 407 | strokeWidth?: number; 408 | 409 | [propertyName: string]: any; 410 | } 411 | 412 | interface HTMLAttributesBase extends DOMAttributesBase { 413 | accept?: string; 414 | acceptCharset?: string; 415 | accessKey?: string; 416 | action?: string; 417 | allowFullScreen?: boolean; 418 | allowTransparency?: boolean; 419 | alt?: string; 420 | async?: boolean; 421 | autoComplete?: boolean; 422 | autoFocus?: boolean; 423 | autoPlay?: boolean; 424 | cellPadding?: number | string; 425 | cellSpacing?: number | string; 426 | charSet?: string; 427 | checked?: boolean; 428 | classID?: string; 429 | className?: string; 430 | cols?: number; 431 | colSpan?: number; 432 | content?: string; 433 | contentEditable?: boolean; 434 | contextMenu?: string; 435 | controls?: any; 436 | coords?: string; 437 | crossOrigin?: string; 438 | data?: string; 439 | dateTime?: string; 440 | defaultChecked?: boolean; 441 | defaultValue?: string; 442 | defer?: boolean; 443 | dir?: string; 444 | disabled?: boolean; 445 | download?: any; 446 | draggable?: boolean; 447 | encType?: string; 448 | form?: string; 449 | formAction?: string; 450 | formEncType?: string; 451 | formMethod?: string; 452 | formNoValidate?: boolean; 453 | formTarget?: string; 454 | frameBorder?: number | string; 455 | headers?: string; 456 | height?: number | string; 457 | hidden?: boolean; 458 | high?: number; 459 | href?: string; 460 | hrefLang?: string; 461 | htmlFor?: string; 462 | httpEquiv?: string; 463 | icon?: string; 464 | id?: string; 465 | label?: string; 466 | lang?: string; 467 | list?: string; 468 | loop?: boolean; 469 | low?: number; 470 | manifest?: string; 471 | marginHeight?: number; 472 | marginWidth?: number; 473 | max?: number | string; 474 | maxLength?: number; 475 | media?: string; 476 | mediaGroup?: string; 477 | method?: string; 478 | min?: number | string; 479 | multiple?: boolean; 480 | muted?: boolean; 481 | name?: string; 482 | noValidate?: boolean; 483 | open?: boolean; 484 | optimum?: number; 485 | pattern?: string; 486 | placeholder?: string; 487 | poster?: string; 488 | preload?: string; 489 | radioGroup?: string; 490 | readOnly?: boolean; 491 | rel?: string; 492 | required?: boolean; 493 | role?: string; 494 | rows?: number; 495 | rowSpan?: number; 496 | sandbox?: string; 497 | scope?: string; 498 | scoped?: boolean; 499 | scrolling?: string; 500 | seamless?: boolean; 501 | selected?: boolean; 502 | shape?: string; 503 | size?: number; 504 | sizes?: string; 505 | span?: number; 506 | spellCheck?: boolean; 507 | src?: string; 508 | srcDoc?: string; 509 | srcSet?: string; 510 | start?: number; 511 | step?: number | string; 512 | style?: CSSProperties; 513 | tabIndex?: number; 514 | target?: string; 515 | title?: string; 516 | type?: string; 517 | useMap?: string; 518 | value?: string; 519 | width?: number | string; 520 | wmode?: string; 521 | 522 | // Non-standard Attributes 523 | autoCapitalize?: boolean; 524 | autoCorrect?: boolean; 525 | property?: string; 526 | itemProp?: string; 527 | itemScope?: boolean; 528 | itemType?: string; 529 | unselectable?: boolean; 530 | } 531 | 532 | interface HTMLAttributes extends HTMLAttributesBase { 533 | } 534 | 535 | interface SVGElementAttributes extends HTMLAttributes { 536 | viewBox?: string; 537 | preserveAspectRatio?: string; 538 | } 539 | 540 | interface SVGAttributes extends DOMAttributes { 541 | ref?: string | ((component: SVGComponent) => void); 542 | 543 | cx?: number | string; 544 | cy?: number | string; 545 | d?: string; 546 | dx?: number | string; 547 | dy?: number | string; 548 | fill?: string; 549 | fillOpacity?: number | string; 550 | fontFamily?: string; 551 | fontSize?: number | string; 552 | fx?: number | string; 553 | fy?: number | string; 554 | gradientTransform?: string; 555 | gradientUnits?: string; 556 | height?: number | string; 557 | markerEnd?: string; 558 | markerMid?: string; 559 | markerStart?: string; 560 | offset?: number | string; 561 | opacity?: number | string; 562 | patternContentUnits?: string; 563 | patternUnits?: string; 564 | points?: string; 565 | preserveAspectRatio?: string; 566 | r?: number | string; 567 | rx?: number | string; 568 | ry?: number | string; 569 | spreadMethod?: string; 570 | stopColor?: string; 571 | stopOpacity?: number | string; 572 | stroke?: string; 573 | strokeDasharray?: string; 574 | strokeLinecap?: string; 575 | strokeOpacity?: number | string; 576 | strokeWidth?: number | string; 577 | textAnchor?: string; 578 | transform?: string; 579 | version?: string; 580 | viewBox?: string; 581 | width?: number | string; 582 | x1?: number | string; 583 | x2?: number | string; 584 | x?: number | string; 585 | y1?: number | string; 586 | y2?: number | string 587 | y?: number | string; 588 | } 589 | 590 | // 591 | // React.DOM 592 | // ---------------------------------------------------------------------- 593 | 594 | interface ReactDOM { 595 | // HTML 596 | a: HTMLFactory; 597 | abbr: HTMLFactory; 598 | address: HTMLFactory; 599 | area: HTMLFactory; 600 | article: HTMLFactory; 601 | aside: HTMLFactory; 602 | audio: HTMLFactory; 603 | b: HTMLFactory; 604 | base: HTMLFactory; 605 | bdi: HTMLFactory; 606 | bdo: HTMLFactory; 607 | big: HTMLFactory; 608 | blockquote: HTMLFactory; 609 | body: HTMLFactory; 610 | br: HTMLFactory; 611 | button: HTMLFactory; 612 | canvas: HTMLFactory; 613 | caption: HTMLFactory; 614 | cite: HTMLFactory; 615 | code: HTMLFactory; 616 | col: HTMLFactory; 617 | colgroup: HTMLFactory; 618 | data: HTMLFactory; 619 | datalist: HTMLFactory; 620 | dd: HTMLFactory; 621 | del: HTMLFactory; 622 | details: HTMLFactory; 623 | dfn: HTMLFactory; 624 | dialog: HTMLFactory; 625 | div: HTMLFactory; 626 | dl: HTMLFactory; 627 | dt: HTMLFactory; 628 | em: HTMLFactory; 629 | embed: HTMLFactory; 630 | fieldset: HTMLFactory; 631 | figcaption: HTMLFactory; 632 | figure: HTMLFactory; 633 | footer: HTMLFactory; 634 | form: HTMLFactory; 635 | h1: HTMLFactory; 636 | h2: HTMLFactory; 637 | h3: HTMLFactory; 638 | h4: HTMLFactory; 639 | h5: HTMLFactory; 640 | h6: HTMLFactory; 641 | head: HTMLFactory; 642 | header: HTMLFactory; 643 | hr: HTMLFactory; 644 | html: HTMLFactory; 645 | i: HTMLFactory; 646 | iframe: HTMLFactory; 647 | img: HTMLFactory; 648 | input: HTMLFactory; 649 | ins: HTMLFactory; 650 | kbd: HTMLFactory; 651 | keygen: HTMLFactory; 652 | label: HTMLFactory; 653 | legend: HTMLFactory; 654 | li: HTMLFactory; 655 | link: HTMLFactory; 656 | main: HTMLFactory; 657 | map: HTMLFactory; 658 | mark: HTMLFactory; 659 | menu: HTMLFactory; 660 | menuitem: HTMLFactory; 661 | meta: HTMLFactory; 662 | meter: HTMLFactory; 663 | nav: HTMLFactory; 664 | noscript: HTMLFactory; 665 | object: HTMLFactory; 666 | ol: HTMLFactory; 667 | optgroup: HTMLFactory; 668 | option: HTMLFactory; 669 | output: HTMLFactory; 670 | p: HTMLFactory; 671 | param: HTMLFactory; 672 | picture: HTMLFactory; 673 | pre: HTMLFactory; 674 | progress: HTMLFactory; 675 | q: HTMLFactory; 676 | rp: HTMLFactory; 677 | rt: HTMLFactory; 678 | ruby: HTMLFactory; 679 | s: HTMLFactory; 680 | samp: HTMLFactory; 681 | script: HTMLFactory; 682 | section: HTMLFactory; 683 | select: HTMLFactory; 684 | small: HTMLFactory; 685 | source: HTMLFactory; 686 | span: HTMLFactory; 687 | strong: HTMLFactory; 688 | style: HTMLFactory; 689 | sub: HTMLFactory; 690 | summary: HTMLFactory; 691 | sup: HTMLFactory; 692 | table: HTMLFactory; 693 | tbody: HTMLFactory; 694 | td: HTMLFactory; 695 | textarea: HTMLFactory; 696 | tfoot: HTMLFactory; 697 | th: HTMLFactory; 698 | thead: HTMLFactory; 699 | time: HTMLFactory; 700 | title: HTMLFactory; 701 | tr: HTMLFactory; 702 | track: HTMLFactory; 703 | u: HTMLFactory; 704 | ul: HTMLFactory; 705 | "var": HTMLFactory; 706 | video: HTMLFactory; 707 | wbr: HTMLFactory; 708 | 709 | // SVG 710 | svg: SVGElementFactory; 711 | circle: SVGFactory; 712 | defs: SVGFactory; 713 | ellipse: SVGFactory; 714 | g: SVGFactory; 715 | line: SVGFactory; 716 | linearGradient: SVGFactory; 717 | mask: SVGFactory; 718 | path: SVGFactory; 719 | pattern: SVGFactory; 720 | polygon: SVGFactory; 721 | polyline: SVGFactory; 722 | radialGradient: SVGFactory; 723 | rect: SVGFactory; 724 | stop: SVGFactory; 725 | text: SVGFactory; 726 | tspan: SVGFactory; 727 | } 728 | 729 | // 730 | // React.PropTypes 731 | // ---------------------------------------------------------------------- 732 | 733 | interface Validator { 734 | (object: T, key: string, componentName: string): Error; 735 | } 736 | 737 | interface Requireable extends Validator { 738 | isRequired: Validator; 739 | } 740 | 741 | interface ValidationMap { 742 | [key: string]: Validator; 743 | } 744 | 745 | interface ReactPropTypes { 746 | any: Requireable; 747 | array: Requireable; 748 | bool: Requireable; 749 | func: Requireable; 750 | number: Requireable; 751 | object: Requireable; 752 | string: Requireable; 753 | node: Requireable; 754 | element: Requireable; 755 | instanceOf(expectedClass: {}): Requireable; 756 | oneOf(types: any[]): Requireable; 757 | oneOfType(types: Validator[]): Requireable; 758 | arrayOf(type: Validator): Requireable; 759 | objectOf(type: Validator): Requireable; 760 | shape(type: ValidationMap): Requireable; 761 | } 762 | 763 | // 764 | // React.Children 765 | // ---------------------------------------------------------------------- 766 | 767 | interface ReactChildren { 768 | map(children: ReactNode, fn: (child: ReactChild, index: number) => T): { [key:string]: T }; 769 | forEach(children: ReactNode, fn: (child: ReactChild, index: number) => any): void; 770 | count(children: ReactNode): number; 771 | only(children: ReactNode): ReactChild; 772 | } 773 | 774 | // 775 | // Browser Interfaces 776 | // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts 777 | // ---------------------------------------------------------------------- 778 | 779 | interface AbstractView { 780 | styleMedia: StyleMedia; 781 | document: Document; 782 | } 783 | 784 | interface Touch { 785 | identifier: number; 786 | target: EventTarget; 787 | screenX: number; 788 | screenY: number; 789 | clientX: number; 790 | clientY: number; 791 | pageX: number; 792 | pageY: number; 793 | } 794 | 795 | interface TouchList { 796 | [index: number]: Touch; 797 | length: number; 798 | item(index: number): Touch; 799 | identifiedTouch(identifier: number): Touch; 800 | } 801 | } 802 | 803 | declare module "react" { 804 | export = __React; 805 | } 806 | 807 | declare module "react/addons" { 808 | // 809 | // React Elements 810 | // ---------------------------------------------------------------------- 811 | 812 | type ReactType = ComponentClass | string; 813 | 814 | interface ReactElement

{ 815 | type: string | ComponentClass

; 816 | props: P; 817 | key: string | number; 818 | ref: string | ((component: Component) => any); 819 | } 820 | 821 | interface ClassicElement

extends ReactElement

{ 822 | type: string | ClassicComponentClass

; 823 | ref: string | ((component: ClassicComponent) => any); 824 | } 825 | 826 | interface DOMElement

extends ClassicElement

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

) => any); 829 | } 830 | 831 | type HTMLElement = DOMElement; 832 | type SVGElement = DOMElement; 833 | 834 | // 835 | // Factories 836 | // ---------------------------------------------------------------------- 837 | 838 | interface Factory

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

; 840 | } 841 | 842 | interface ClassicFactory

extends Factory

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

; 844 | } 845 | 846 | interface DOMFactory

extends ClassicFactory

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

; 848 | } 849 | 850 | type HTMLFactory = DOMFactory; 851 | type SVGFactory = DOMFactory; 852 | type SVGElementFactory = DOMFactory; 853 | 854 | // 855 | // React Nodes 856 | // http://facebook.github.io/react/docs/glossary.html 857 | // ---------------------------------------------------------------------- 858 | 859 | type ReactText = string | number; 860 | type ReactChild = ReactElement | ReactText; 861 | 862 | // Should be Array but type aliases cannot be recursive 863 | type ReactFragment = {} | Array; 864 | type ReactNode = ReactChild | ReactFragment | boolean; 865 | 866 | // 867 | // Top Level API 868 | // ---------------------------------------------------------------------- 869 | 870 | function createClass(spec: ComponentSpec): ClassicComponentClass

; 871 | 872 | function createFactory

(type: string): DOMFactory

; 873 | function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; 874 | function createFactory

(type: ComponentClass

): Factory

; 875 | 876 | function createElement

( 877 | type: string, 878 | props?: P, 879 | ...children: ReactNode[]): DOMElement

; 880 | function createElement

( 881 | type: ClassicComponentClass

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

; 884 | function createElement

( 885 | type: ComponentClass

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

; 888 | 889 | function cloneElement

( 890 | element: DOMElement

, 891 | props?: P, 892 | ...children: ReactNode[]): DOMElement

; 893 | function cloneElement

( 894 | element: ClassicElement

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

; 897 | function cloneElement

( 898 | element: ReactElement

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

; 901 | 902 | function render

( 903 | element: DOMElement

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

; 906 | function render( 907 | element: ClassicElement

, 908 | container: Element, 909 | callback?: () => any): ClassicComponent; 910 | function render( 911 | element: ReactElement

, 912 | container: Element, 913 | callback?: () => any): Component; 914 | 915 | function unmountComponentAtNode(container: Element): boolean; 916 | function renderToString(element: ReactElement): string; 917 | function renderToStaticMarkup(element: ReactElement): string; 918 | function isValidElement(object: {}): boolean; 919 | function initializeTouchEvents(shouldUseTouch: boolean): void; 920 | 921 | function findDOMNode( 922 | componentOrElement: Component | Element): TElement; 923 | function findDOMNode( 924 | componentOrElement: Component | Element): Element; 925 | 926 | var DOM: ReactDOM; 927 | var PropTypes: ReactPropTypes; 928 | var Children: ReactChildren; 929 | 930 | // 931 | // Component API 932 | // ---------------------------------------------------------------------- 933 | 934 | // Base component for plain JS classes 935 | class Component implements ComponentLifecycle { 936 | constructor(props?: P, context?: any); 937 | setState(f: (prevState: S, props: P) => S, callback?: () => any): void; 938 | setState(state: S, callback?: () => any): void; 939 | forceUpdate(callBack?: () => any): void; 940 | render(): JSX.Element; 941 | props: P; 942 | state: S; 943 | context: {}; 944 | refs: { 945 | [key: string]: Component 946 | }; 947 | } 948 | 949 | interface ClassicComponent extends Component { 950 | replaceState(nextState: S, callback?: () => any): void; 951 | getDOMNode(): TElement; 952 | getDOMNode(): Element; 953 | isMounted(): boolean; 954 | getInitialState?(): S; 955 | setProps(nextProps: P, callback?: () => any): void; 956 | replaceProps(nextProps: P, callback?: () => any): void; 957 | } 958 | 959 | interface DOMComponent

extends ClassicComponent { 960 | tagName: string; 961 | } 962 | 963 | type HTMLComponent = DOMComponent; 964 | type SVGComponent = DOMComponent; 965 | 966 | interface ChildContextProvider { 967 | getChildContext(): CC; 968 | } 969 | 970 | // 971 | // Class Interfaces 972 | // ---------------------------------------------------------------------- 973 | 974 | interface ComponentClass

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

; 977 | contextTypes?: ValidationMap; 978 | childContextTypes?: ValidationMap; 979 | defaultProps?: P; 980 | } 981 | 982 | interface ClassicComponentClass

extends ComponentClass

{ 983 | new(props?: P, context?: any): ClassicComponent; 984 | getDefaultProps?(): P; 985 | displayName?: string; 986 | } 987 | 988 | // 989 | // Component Specs and Lifecycle 990 | // ---------------------------------------------------------------------- 991 | 992 | interface ComponentLifecycle { 993 | componentWillMount?(): void; 994 | componentDidMount?(): void; 995 | componentWillReceiveProps?(nextProps: P, nextContext: any): void; 996 | shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean; 997 | componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void; 998 | componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void; 999 | componentWillUnmount?(): void; 1000 | } 1001 | 1002 | interface Mixin extends ComponentLifecycle { 1003 | mixins?: Mixin; 1004 | statics?: { 1005 | [key: string]: any; 1006 | }; 1007 | 1008 | displayName?: string; 1009 | propTypes?: ValidationMap; 1010 | contextTypes?: ValidationMap; 1011 | childContextTypes?: ValidationMap 1012 | 1013 | getDefaultProps?(): P; 1014 | getInitialState?(): S; 1015 | } 1016 | 1017 | interface ComponentSpec extends Mixin { 1018 | render(): ReactElement; 1019 | 1020 | [propertyName: string]: any; 1021 | } 1022 | 1023 | // 1024 | // Event System 1025 | // ---------------------------------------------------------------------- 1026 | 1027 | interface SyntheticEvent { 1028 | bubbles: boolean; 1029 | cancelable: boolean; 1030 | currentTarget: EventTarget; 1031 | defaultPrevented: boolean; 1032 | eventPhase: number; 1033 | isTrusted: boolean; 1034 | nativeEvent: Event; 1035 | preventDefault(): void; 1036 | stopPropagation(): void; 1037 | target: EventTarget; 1038 | timeStamp: Date; 1039 | type: string; 1040 | } 1041 | 1042 | interface DragEvent extends SyntheticEvent { 1043 | dataTransfer: DataTransfer; 1044 | } 1045 | 1046 | interface ClipboardEvent extends SyntheticEvent { 1047 | clipboardData: DataTransfer; 1048 | } 1049 | 1050 | interface KeyboardEvent extends SyntheticEvent { 1051 | altKey: boolean; 1052 | charCode: number; 1053 | ctrlKey: boolean; 1054 | getModifierState(key: string): boolean; 1055 | key: string; 1056 | keyCode: number; 1057 | locale: string; 1058 | location: number; 1059 | metaKey: boolean; 1060 | repeat: boolean; 1061 | shiftKey: boolean; 1062 | which: number; 1063 | } 1064 | 1065 | interface FocusEvent extends SyntheticEvent { 1066 | relatedTarget: EventTarget; 1067 | } 1068 | 1069 | interface FormEvent extends SyntheticEvent { 1070 | } 1071 | 1072 | interface MouseEvent extends SyntheticEvent { 1073 | altKey: boolean; 1074 | button: number; 1075 | buttons: number; 1076 | clientX: number; 1077 | clientY: number; 1078 | ctrlKey: boolean; 1079 | getModifierState(key: string): boolean; 1080 | metaKey: boolean; 1081 | pageX: number; 1082 | pageY: number; 1083 | relatedTarget: EventTarget; 1084 | screenX: number; 1085 | screenY: number; 1086 | shiftKey: boolean; 1087 | } 1088 | 1089 | interface TouchEvent extends SyntheticEvent { 1090 | altKey: boolean; 1091 | changedTouches: TouchList; 1092 | ctrlKey: boolean; 1093 | getModifierState(key: string): boolean; 1094 | metaKey: boolean; 1095 | shiftKey: boolean; 1096 | targetTouches: TouchList; 1097 | touches: TouchList; 1098 | } 1099 | 1100 | interface UIEvent extends SyntheticEvent { 1101 | detail: number; 1102 | view: AbstractView; 1103 | } 1104 | 1105 | interface WheelEvent extends SyntheticEvent { 1106 | deltaMode: number; 1107 | deltaX: number; 1108 | deltaY: number; 1109 | deltaZ: number; 1110 | } 1111 | 1112 | // 1113 | // Event Handler Types 1114 | // ---------------------------------------------------------------------- 1115 | 1116 | interface EventHandler { 1117 | (event: E): void; 1118 | } 1119 | 1120 | interface DragEventHandler extends EventHandler {} 1121 | interface ClipboardEventHandler extends EventHandler {} 1122 | interface KeyboardEventHandler extends EventHandler {} 1123 | interface FocusEventHandler extends EventHandler {} 1124 | interface FormEventHandler extends EventHandler {} 1125 | interface MouseEventHandler extends EventHandler {} 1126 | interface TouchEventHandler extends EventHandler {} 1127 | interface UIEventHandler extends EventHandler {} 1128 | interface WheelEventHandler extends EventHandler {} 1129 | 1130 | // 1131 | // Props / DOM Attributes 1132 | // ---------------------------------------------------------------------- 1133 | 1134 | interface Props { 1135 | children?: ReactNode; 1136 | key?: string | number; 1137 | ref?: string | ((component: T) => any); 1138 | } 1139 | 1140 | interface DOMAttributesBase extends Props { 1141 | onCopy?: ClipboardEventHandler; 1142 | onCut?: ClipboardEventHandler; 1143 | onPaste?: ClipboardEventHandler; 1144 | onKeyDown?: KeyboardEventHandler; 1145 | onKeyPress?: KeyboardEventHandler; 1146 | onKeyUp?: KeyboardEventHandler; 1147 | onFocus?: FocusEventHandler; 1148 | onBlur?: FocusEventHandler; 1149 | onChange?: FormEventHandler; 1150 | onInput?: FormEventHandler; 1151 | onSubmit?: FormEventHandler; 1152 | onClick?: MouseEventHandler; 1153 | onDoubleClick?: MouseEventHandler; 1154 | onDrag?: DragEventHandler; 1155 | onDragEnd?: DragEventHandler; 1156 | onDragEnter?: DragEventHandler; 1157 | onDragExit?: DragEventHandler; 1158 | onDragLeave?: DragEventHandler; 1159 | onDragOver?: DragEventHandler; 1160 | onDragStart?: DragEventHandler; 1161 | onDrop?: DragEventHandler; 1162 | onMouseDown?: MouseEventHandler; 1163 | onMouseEnter?: MouseEventHandler; 1164 | onMouseLeave?: MouseEventHandler; 1165 | onMouseMove?: MouseEventHandler; 1166 | onMouseOut?: MouseEventHandler; 1167 | onMouseOver?: MouseEventHandler; 1168 | onMouseUp?: MouseEventHandler; 1169 | onTouchCancel?: TouchEventHandler; 1170 | onTouchEnd?: TouchEventHandler; 1171 | onTouchMove?: TouchEventHandler; 1172 | onTouchStart?: TouchEventHandler; 1173 | onScroll?: UIEventHandler; 1174 | onWheel?: WheelEventHandler; 1175 | 1176 | dangerouslySetInnerHTML?: { 1177 | __html: string; 1178 | }; 1179 | } 1180 | 1181 | interface DOMAttributes extends DOMAttributesBase> { 1182 | } 1183 | 1184 | // This interface is not complete. Only properties accepting 1185 | // unitless numbers are listed here (see CSSProperty.js in React) 1186 | interface CSSProperties { 1187 | boxFlex?: number; 1188 | boxFlexGroup?: number; 1189 | columnCount?: number; 1190 | flex?: number | string; 1191 | flexGrow?: number; 1192 | flexShrink?: number; 1193 | fontWeight?: number | string; 1194 | lineClamp?: number; 1195 | lineHeight?: number | string; 1196 | opacity?: number; 1197 | order?: number; 1198 | orphans?: number; 1199 | widows?: number; 1200 | zIndex?: number; 1201 | zoom?: number; 1202 | 1203 | fontSize?: number | string; 1204 | 1205 | // SVG-related properties 1206 | fillOpacity?: number; 1207 | strokeOpacity?: number; 1208 | strokeWidth?: number; 1209 | 1210 | [propertyName: string]: any; 1211 | } 1212 | 1213 | interface HTMLAttributesBase extends DOMAttributesBase { 1214 | accept?: string; 1215 | acceptCharset?: string; 1216 | accessKey?: string; 1217 | action?: string; 1218 | allowFullScreen?: boolean; 1219 | allowTransparency?: boolean; 1220 | alt?: string; 1221 | async?: boolean; 1222 | autoComplete?: boolean; 1223 | autoFocus?: boolean; 1224 | autoPlay?: boolean; 1225 | cellPadding?: number | string; 1226 | cellSpacing?: number | string; 1227 | charSet?: string; 1228 | checked?: boolean; 1229 | classID?: string; 1230 | className?: string; 1231 | cols?: number; 1232 | colSpan?: number; 1233 | content?: string; 1234 | contentEditable?: boolean; 1235 | contextMenu?: string; 1236 | controls?: any; 1237 | coords?: string; 1238 | crossOrigin?: string; 1239 | data?: string; 1240 | dateTime?: string; 1241 | defaultChecked?: boolean; 1242 | defaultValue?: string; 1243 | defer?: boolean; 1244 | dir?: string; 1245 | disabled?: boolean; 1246 | download?: any; 1247 | draggable?: boolean; 1248 | encType?: string; 1249 | form?: string; 1250 | formAction?: string; 1251 | formEncType?: string; 1252 | formMethod?: string; 1253 | formNoValidate?: boolean; 1254 | formTarget?: string; 1255 | frameBorder?: number | string; 1256 | headers?: string; 1257 | height?: number | string; 1258 | hidden?: boolean; 1259 | high?: number; 1260 | href?: string; 1261 | hrefLang?: string; 1262 | htmlFor?: string; 1263 | httpEquiv?: string; 1264 | icon?: string; 1265 | id?: string; 1266 | label?: string; 1267 | lang?: string; 1268 | list?: string; 1269 | loop?: boolean; 1270 | low?: number; 1271 | manifest?: string; 1272 | marginHeight?: number; 1273 | marginWidth?: number; 1274 | max?: number | string; 1275 | maxLength?: number; 1276 | media?: string; 1277 | mediaGroup?: string; 1278 | method?: string; 1279 | min?: number | string; 1280 | multiple?: boolean; 1281 | muted?: boolean; 1282 | name?: string; 1283 | noValidate?: boolean; 1284 | open?: boolean; 1285 | optimum?: number; 1286 | pattern?: string; 1287 | placeholder?: string; 1288 | poster?: string; 1289 | preload?: string; 1290 | radioGroup?: string; 1291 | readOnly?: boolean; 1292 | rel?: string; 1293 | required?: boolean; 1294 | role?: string; 1295 | rows?: number; 1296 | rowSpan?: number; 1297 | sandbox?: string; 1298 | scope?: string; 1299 | scoped?: boolean; 1300 | scrolling?: string; 1301 | seamless?: boolean; 1302 | selected?: boolean; 1303 | shape?: string; 1304 | size?: number; 1305 | sizes?: string; 1306 | span?: number; 1307 | spellCheck?: boolean; 1308 | src?: string; 1309 | srcDoc?: string; 1310 | srcSet?: string; 1311 | start?: number; 1312 | step?: number | string; 1313 | style?: CSSProperties; 1314 | tabIndex?: number; 1315 | target?: string; 1316 | title?: string; 1317 | type?: string; 1318 | useMap?: string; 1319 | value?: string; 1320 | width?: number | string; 1321 | wmode?: string; 1322 | 1323 | // Non-standard Attributes 1324 | autoCapitalize?: boolean; 1325 | autoCorrect?: boolean; 1326 | property?: string; 1327 | itemProp?: string; 1328 | itemScope?: boolean; 1329 | itemType?: string; 1330 | unselectable?: boolean; 1331 | } 1332 | 1333 | interface HTMLAttributes extends HTMLAttributesBase { 1334 | } 1335 | 1336 | interface SVGElementAttributes extends HTMLAttributes { 1337 | viewBox?: string; 1338 | preserveAspectRatio?: string; 1339 | } 1340 | 1341 | interface SVGAttributes extends DOMAttributes { 1342 | ref?: string | ((component: SVGComponent) => void); 1343 | 1344 | cx?: number | string; 1345 | cy?: number | string; 1346 | d?: string; 1347 | dx?: number | string; 1348 | dy?: number | string; 1349 | fill?: string; 1350 | fillOpacity?: number | string; 1351 | fontFamily?: string; 1352 | fontSize?: number | string; 1353 | fx?: number | string; 1354 | fy?: number | string; 1355 | gradientTransform?: string; 1356 | gradientUnits?: string; 1357 | height?: number | string; 1358 | markerEnd?: string; 1359 | markerMid?: string; 1360 | markerStart?: string; 1361 | offset?: number | string; 1362 | opacity?: number | string; 1363 | patternContentUnits?: string; 1364 | patternUnits?: string; 1365 | points?: string; 1366 | preserveAspectRatio?: string; 1367 | r?: number | string; 1368 | rx?: number | string; 1369 | ry?: number | string; 1370 | spreadMethod?: string; 1371 | stopColor?: string; 1372 | stopOpacity?: number | string; 1373 | stroke?: string; 1374 | strokeDasharray?: string; 1375 | strokeLinecap?: string; 1376 | strokeOpacity?: number | string; 1377 | strokeWidth?: number | string; 1378 | textAnchor?: string; 1379 | transform?: string; 1380 | version?: string; 1381 | viewBox?: string; 1382 | width?: number | string; 1383 | x1?: number | string; 1384 | x2?: number | string; 1385 | x?: number | string; 1386 | y1?: number | string; 1387 | y2?: number | string 1388 | y?: number | string; 1389 | } 1390 | 1391 | // 1392 | // React.DOM 1393 | // ---------------------------------------------------------------------- 1394 | 1395 | interface ReactDOM { 1396 | // HTML 1397 | a: HTMLFactory; 1398 | abbr: HTMLFactory; 1399 | address: HTMLFactory; 1400 | area: HTMLFactory; 1401 | article: HTMLFactory; 1402 | aside: HTMLFactory; 1403 | audio: HTMLFactory; 1404 | b: HTMLFactory; 1405 | base: HTMLFactory; 1406 | bdi: HTMLFactory; 1407 | bdo: HTMLFactory; 1408 | big: HTMLFactory; 1409 | blockquote: HTMLFactory; 1410 | body: HTMLFactory; 1411 | br: HTMLFactory; 1412 | button: HTMLFactory; 1413 | canvas: HTMLFactory; 1414 | caption: HTMLFactory; 1415 | cite: HTMLFactory; 1416 | code: HTMLFactory; 1417 | col: HTMLFactory; 1418 | colgroup: HTMLFactory; 1419 | data: HTMLFactory; 1420 | datalist: HTMLFactory; 1421 | dd: HTMLFactory; 1422 | del: HTMLFactory; 1423 | details: HTMLFactory; 1424 | dfn: HTMLFactory; 1425 | dialog: HTMLFactory; 1426 | div: HTMLFactory; 1427 | dl: HTMLFactory; 1428 | dt: HTMLFactory; 1429 | em: HTMLFactory; 1430 | embed: HTMLFactory; 1431 | fieldset: HTMLFactory; 1432 | figcaption: HTMLFactory; 1433 | figure: HTMLFactory; 1434 | footer: HTMLFactory; 1435 | form: HTMLFactory; 1436 | h1: HTMLFactory; 1437 | h2: HTMLFactory; 1438 | h3: HTMLFactory; 1439 | h4: HTMLFactory; 1440 | h5: HTMLFactory; 1441 | h6: HTMLFactory; 1442 | head: HTMLFactory; 1443 | header: HTMLFactory; 1444 | hr: HTMLFactory; 1445 | html: HTMLFactory; 1446 | i: HTMLFactory; 1447 | iframe: HTMLFactory; 1448 | img: HTMLFactory; 1449 | input: HTMLFactory; 1450 | ins: HTMLFactory; 1451 | kbd: HTMLFactory; 1452 | keygen: HTMLFactory; 1453 | label: HTMLFactory; 1454 | legend: HTMLFactory; 1455 | li: HTMLFactory; 1456 | link: HTMLFactory; 1457 | main: HTMLFactory; 1458 | map: HTMLFactory; 1459 | mark: HTMLFactory; 1460 | menu: HTMLFactory; 1461 | menuitem: HTMLFactory; 1462 | meta: HTMLFactory; 1463 | meter: HTMLFactory; 1464 | nav: HTMLFactory; 1465 | noscript: HTMLFactory; 1466 | object: HTMLFactory; 1467 | ol: HTMLFactory; 1468 | optgroup: HTMLFactory; 1469 | option: HTMLFactory; 1470 | output: HTMLFactory; 1471 | p: HTMLFactory; 1472 | param: HTMLFactory; 1473 | picture: HTMLFactory; 1474 | pre: HTMLFactory; 1475 | progress: HTMLFactory; 1476 | q: HTMLFactory; 1477 | rp: HTMLFactory; 1478 | rt: HTMLFactory; 1479 | ruby: HTMLFactory; 1480 | s: HTMLFactory; 1481 | samp: HTMLFactory; 1482 | script: HTMLFactory; 1483 | section: HTMLFactory; 1484 | select: HTMLFactory; 1485 | small: HTMLFactory; 1486 | source: HTMLFactory; 1487 | span: HTMLFactory; 1488 | strong: HTMLFactory; 1489 | style: HTMLFactory; 1490 | sub: HTMLFactory; 1491 | summary: HTMLFactory; 1492 | sup: HTMLFactory; 1493 | table: HTMLFactory; 1494 | tbody: HTMLFactory; 1495 | td: HTMLFactory; 1496 | textarea: HTMLFactory; 1497 | tfoot: HTMLFactory; 1498 | th: HTMLFactory; 1499 | thead: HTMLFactory; 1500 | time: HTMLFactory; 1501 | title: HTMLFactory; 1502 | tr: HTMLFactory; 1503 | track: HTMLFactory; 1504 | u: HTMLFactory; 1505 | ul: HTMLFactory; 1506 | "var": HTMLFactory; 1507 | video: HTMLFactory; 1508 | wbr: HTMLFactory; 1509 | 1510 | // SVG 1511 | svg: SVGElementFactory; 1512 | circle: SVGFactory; 1513 | defs: SVGFactory; 1514 | ellipse: SVGFactory; 1515 | g: SVGFactory; 1516 | line: SVGFactory; 1517 | linearGradient: SVGFactory; 1518 | mask: SVGFactory; 1519 | path: SVGFactory; 1520 | pattern: SVGFactory; 1521 | polygon: SVGFactory; 1522 | polyline: SVGFactory; 1523 | radialGradient: SVGFactory; 1524 | rect: SVGFactory; 1525 | stop: SVGFactory; 1526 | text: SVGFactory; 1527 | tspan: SVGFactory; 1528 | } 1529 | 1530 | // 1531 | // React.PropTypes 1532 | // ---------------------------------------------------------------------- 1533 | 1534 | interface Validator { 1535 | (object: T, key: string, componentName: string): Error; 1536 | } 1537 | 1538 | interface Requireable extends Validator { 1539 | isRequired: Validator; 1540 | } 1541 | 1542 | interface ValidationMap { 1543 | [key: string]: Validator; 1544 | } 1545 | 1546 | interface ReactPropTypes { 1547 | any: Requireable; 1548 | array: Requireable; 1549 | bool: Requireable; 1550 | func: Requireable; 1551 | number: Requireable; 1552 | object: Requireable; 1553 | string: Requireable; 1554 | node: Requireable; 1555 | element: Requireable; 1556 | instanceOf(expectedClass: {}): Requireable; 1557 | oneOf(types: any[]): Requireable; 1558 | oneOfType(types: Validator[]): Requireable; 1559 | arrayOf(type: Validator): Requireable; 1560 | objectOf(type: Validator): Requireable; 1561 | shape(type: ValidationMap): Requireable; 1562 | } 1563 | 1564 | // 1565 | // React.Children 1566 | // ---------------------------------------------------------------------- 1567 | 1568 | interface ReactChildren { 1569 | map(children: ReactNode, fn: (child: ReactChild, index: number) => T): { [key:string]: T }; 1570 | forEach(children: ReactNode, fn: (child: ReactChild, index: number) => any): void; 1571 | count(children: ReactNode): number; 1572 | only(children: ReactNode): ReactChild; 1573 | } 1574 | 1575 | // 1576 | // Browser Interfaces 1577 | // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts 1578 | // ---------------------------------------------------------------------- 1579 | 1580 | interface AbstractView { 1581 | styleMedia: StyleMedia; 1582 | document: Document; 1583 | } 1584 | 1585 | interface Touch { 1586 | identifier: number; 1587 | target: EventTarget; 1588 | screenX: number; 1589 | screenY: number; 1590 | clientX: number; 1591 | clientY: number; 1592 | pageX: number; 1593 | pageY: number; 1594 | } 1595 | 1596 | interface TouchList { 1597 | [index: number]: Touch; 1598 | length: number; 1599 | item(index: number): Touch; 1600 | identifiedTouch(identifier: number): Touch; 1601 | } 1602 | 1603 | // 1604 | // React.addons 1605 | // ---------------------------------------------------------------------- 1606 | 1607 | export module addons { 1608 | export var CSSTransitionGroup: CSSTransitionGroup; 1609 | export var TransitionGroup: TransitionGroup; 1610 | 1611 | export var LinkedStateMixin: LinkedStateMixin; 1612 | export var PureRenderMixin: PureRenderMixin; 1613 | 1614 | export function batchedUpdates( 1615 | callback: (a: A, b: B) => any, a: A, b: B): void; 1616 | export function batchedUpdates(callback: (a: A) => any, a: A): void; 1617 | export function batchedUpdates(callback: () => any): void; 1618 | 1619 | // deprecated: use petehunt/react-classset or JedWatson/classnames 1620 | export function classSet(cx: { [key: string]: boolean }): string; 1621 | export function classSet(...classList: string[]): string; 1622 | 1623 | export function cloneWithProps

( 1624 | element: DOMElement

, props: P): DOMElement

; 1625 | export function cloneWithProps

( 1626 | element: ClassicElement

, props: P): ClassicElement

; 1627 | export function cloneWithProps

( 1628 | element: ReactElement

, props: P): ReactElement

; 1629 | 1630 | export function createFragment( 1631 | object: { [key: string]: ReactNode }): ReactFragment; 1632 | 1633 | export function update(value: any[], spec: UpdateArraySpec): any[]; 1634 | export function update(value: {}, spec: UpdateSpec): any; 1635 | 1636 | // Development tools 1637 | export import Perf = ReactPerf; 1638 | export import TestUtils = ReactTestUtils; 1639 | } 1640 | 1641 | // 1642 | // React.addons (Transitions) 1643 | // ---------------------------------------------------------------------- 1644 | 1645 | interface TransitionGroupProps { 1646 | component?: ReactType; 1647 | childFactory?: (child: ReactElement) => ReactElement; 1648 | } 1649 | 1650 | interface CSSTransitionGroupProps extends TransitionGroupProps { 1651 | transitionName: string; 1652 | transitionAppear?: boolean; 1653 | transitionEnter?: boolean; 1654 | transitionLeave?: boolean; 1655 | } 1656 | 1657 | type CSSTransitionGroup = ComponentClass; 1658 | type TransitionGroup = ComponentClass; 1659 | 1660 | // 1661 | // React.addons (Mixins) 1662 | // ---------------------------------------------------------------------- 1663 | 1664 | interface ReactLink { 1665 | value: T; 1666 | requestChange(newValue: T): void; 1667 | } 1668 | 1669 | interface LinkedStateMixin extends Mixin { 1670 | linkState(key: string): ReactLink; 1671 | } 1672 | 1673 | interface PureRenderMixin extends Mixin { 1674 | } 1675 | 1676 | // 1677 | // Reat.addons.update 1678 | // ---------------------------------------------------------------------- 1679 | 1680 | interface UpdateSpec { 1681 | $set?: any; 1682 | $merge?: {}; 1683 | $apply?(value: any): any; 1684 | // [key: string]: UpdateSpec; 1685 | } 1686 | 1687 | interface UpdateArraySpec extends UpdateSpec { 1688 | $push?: any[]; 1689 | $unshift?: any[]; 1690 | $splice?: any[][]; 1691 | } 1692 | 1693 | // 1694 | // React.addons.Perf 1695 | // ---------------------------------------------------------------------- 1696 | 1697 | interface ComponentPerfContext { 1698 | current: string; 1699 | owner: string; 1700 | } 1701 | 1702 | interface NumericPerfContext { 1703 | [key: string]: number; 1704 | } 1705 | 1706 | interface Measurements { 1707 | exclusive: NumericPerfContext; 1708 | inclusive: NumericPerfContext; 1709 | render: NumericPerfContext; 1710 | counts: NumericPerfContext; 1711 | writes: NumericPerfContext; 1712 | displayNames: { 1713 | [key: string]: ComponentPerfContext; 1714 | }; 1715 | totalTime: number; 1716 | } 1717 | 1718 | module ReactPerf { 1719 | export function start(): void; 1720 | export function stop(): void; 1721 | export function printInclusive(measurements: Measurements[]): void; 1722 | export function printExclusive(measurements: Measurements[]): void; 1723 | export function printWasted(measurements: Measurements[]): void; 1724 | export function printDOM(measurements: Measurements[]): void; 1725 | export function getLastMeasurements(): Measurements[]; 1726 | } 1727 | 1728 | // 1729 | // React.addons.TestUtils 1730 | // ---------------------------------------------------------------------- 1731 | 1732 | interface MockedComponentClass { 1733 | new(): any; 1734 | } 1735 | 1736 | module ReactTestUtils { 1737 | export import Simulate = ReactSimulate; 1738 | 1739 | export function renderIntoDocument

( 1740 | element: ReactElement

): Component; 1741 | export function renderIntoDocument>( 1742 | element: ReactElement): C; 1743 | 1744 | export function mockComponent( 1745 | mocked: MockedComponentClass, mockTagName?: string): typeof ReactTestUtils; 1746 | 1747 | export function isElementOfType( 1748 | element: ReactElement, type: ReactType): boolean; 1749 | export function isTextComponent(instance: Component): boolean; 1750 | export function isDOMComponent(instance: Component): boolean; 1751 | export function isCompositeComponent(instance: Component): boolean; 1752 | export function isCompositeComponentWithType( 1753 | instance: Component, 1754 | type: ComponentClass): boolean; 1755 | 1756 | export function findAllInRenderedTree( 1757 | tree: Component, 1758 | fn: (i: Component) => boolean): Component; 1759 | 1760 | export function scryRenderedDOMComponentsWithClass( 1761 | tree: Component, 1762 | className: string): DOMComponent[]; 1763 | export function findRenderedDOMComponentWithClass( 1764 | tree: Component, 1765 | className: string): DOMComponent; 1766 | 1767 | export function scryRenderedDOMComponentsWithTag( 1768 | tree: Component, 1769 | tagName: string): DOMComponent[]; 1770 | export function findRenderedDOMComponentWithTag( 1771 | tree: Component, 1772 | tagName: string): DOMComponent; 1773 | 1774 | export function scryRenderedComponentsWithType

( 1775 | tree: Component, 1776 | type: ComponentClass

): Component[]; 1777 | export function scryRenderedComponentsWithType>( 1778 | tree: Component, 1779 | type: ComponentClass): C[]; 1780 | 1781 | export function findRenderedComponentWithType

( 1782 | tree: Component, 1783 | type: ComponentClass

): Component; 1784 | export function findRenderedComponentWithType>( 1785 | tree: Component, 1786 | type: ComponentClass): C; 1787 | 1788 | export function createRenderer(): ShallowRenderer; 1789 | } 1790 | 1791 | interface SyntheticEventData { 1792 | altKey?: boolean; 1793 | button?: number; 1794 | buttons?: number; 1795 | clientX?: number; 1796 | clientY?: number; 1797 | changedTouches?: TouchList; 1798 | charCode?: boolean; 1799 | clipboardData?: DataTransfer; 1800 | ctrlKey?: boolean; 1801 | deltaMode?: number; 1802 | deltaX?: number; 1803 | deltaY?: number; 1804 | deltaZ?: number; 1805 | detail?: number; 1806 | getModifierState?(key: string): boolean; 1807 | key?: string; 1808 | keyCode?: number; 1809 | locale?: string; 1810 | location?: number; 1811 | metaKey?: boolean; 1812 | pageX?: number; 1813 | pageY?: number; 1814 | relatedTarget?: EventTarget; 1815 | repeat?: boolean; 1816 | screenX?: number; 1817 | screenY?: number; 1818 | shiftKey?: boolean; 1819 | targetTouches?: TouchList; 1820 | touches?: TouchList; 1821 | view?: AbstractView; 1822 | which?: number; 1823 | } 1824 | 1825 | interface EventSimulator { 1826 | (element: Element, eventData?: SyntheticEventData): void; 1827 | (component: Component, eventData?: SyntheticEventData): void; 1828 | } 1829 | 1830 | module ReactSimulate { 1831 | export var blur: EventSimulator; 1832 | export var change: EventSimulator; 1833 | export var click: EventSimulator; 1834 | export var cut: EventSimulator; 1835 | export var doubleClick: EventSimulator; 1836 | export var drag: EventSimulator; 1837 | export var dragEnd: EventSimulator; 1838 | export var dragEnter: EventSimulator; 1839 | export var dragExit: EventSimulator; 1840 | export var dragLeave: EventSimulator; 1841 | export var dragOver: EventSimulator; 1842 | export var dragStart: EventSimulator; 1843 | export var drop: EventSimulator; 1844 | export var focus: EventSimulator; 1845 | export var input: EventSimulator; 1846 | export var keyDown: EventSimulator; 1847 | export var keyPress: EventSimulator; 1848 | export var keyUp: EventSimulator; 1849 | export var mouseDown: EventSimulator; 1850 | export var mouseEnter: EventSimulator; 1851 | export var mouseLeave: EventSimulator; 1852 | export var mouseMove: EventSimulator; 1853 | export var mouseOut: EventSimulator; 1854 | export var mouseOver: EventSimulator; 1855 | export var mouseUp: EventSimulator; 1856 | export var paste: EventSimulator; 1857 | export var scroll: EventSimulator; 1858 | export var submit: EventSimulator; 1859 | export var touchCancel: EventSimulator; 1860 | export var touchEnd: EventSimulator; 1861 | export var touchMove: EventSimulator; 1862 | export var touchStart: EventSimulator; 1863 | export var wheel: EventSimulator; 1864 | } 1865 | 1866 | class ShallowRenderer { 1867 | getRenderOutput>(): E; 1868 | getRenderOutput(): ReactElement; 1869 | render(element: ReactElement, context?: any): void; 1870 | unmount(): void; 1871 | } 1872 | } 1873 | 1874 | declare namespace JSX { 1875 | import React = __React; 1876 | 1877 | interface Element extends React.ReactElement { } 1878 | interface ElementClass extends React.Component { 1879 | render(): JSX.Element; 1880 | } 1881 | interface ElementAttributesProperty { props: {}; } 1882 | 1883 | interface IntrinsicElements { 1884 | // HTML 1885 | a: React.HTMLAttributes; 1886 | abbr: React.HTMLAttributes; 1887 | address: React.HTMLAttributes; 1888 | area: React.HTMLAttributes; 1889 | article: React.HTMLAttributes; 1890 | aside: React.HTMLAttributes; 1891 | audio: React.HTMLAttributes; 1892 | b: React.HTMLAttributes; 1893 | base: React.HTMLAttributes; 1894 | bdi: React.HTMLAttributes; 1895 | bdo: React.HTMLAttributes; 1896 | big: React.HTMLAttributes; 1897 | blockquote: React.HTMLAttributes; 1898 | body: React.HTMLAttributes; 1899 | br: React.HTMLAttributes; 1900 | button: React.HTMLAttributes; 1901 | canvas: React.HTMLAttributes; 1902 | caption: React.HTMLAttributes; 1903 | cite: React.HTMLAttributes; 1904 | code: React.HTMLAttributes; 1905 | col: React.HTMLAttributes; 1906 | colgroup: React.HTMLAttributes; 1907 | data: React.HTMLAttributes; 1908 | datalist: React.HTMLAttributes; 1909 | dd: React.HTMLAttributes; 1910 | del: React.HTMLAttributes; 1911 | details: React.HTMLAttributes; 1912 | dfn: React.HTMLAttributes; 1913 | dialog: React.HTMLAttributes; 1914 | div: React.HTMLAttributes; 1915 | dl: React.HTMLAttributes; 1916 | dt: React.HTMLAttributes; 1917 | em: React.HTMLAttributes; 1918 | embed: React.HTMLAttributes; 1919 | fieldset: React.HTMLAttributes; 1920 | figcaption: React.HTMLAttributes; 1921 | figure: React.HTMLAttributes; 1922 | footer: React.HTMLAttributes; 1923 | form: React.HTMLAttributes; 1924 | h1: React.HTMLAttributes; 1925 | h2: React.HTMLAttributes; 1926 | h3: React.HTMLAttributes; 1927 | h4: React.HTMLAttributes; 1928 | h5: React.HTMLAttributes; 1929 | h6: React.HTMLAttributes; 1930 | head: React.HTMLAttributes; 1931 | header: React.HTMLAttributes; 1932 | hr: React.HTMLAttributes; 1933 | html: React.HTMLAttributes; 1934 | i: React.HTMLAttributes; 1935 | iframe: React.HTMLAttributes; 1936 | img: React.HTMLAttributes; 1937 | input: React.HTMLAttributes; 1938 | ins: React.HTMLAttributes; 1939 | kbd: React.HTMLAttributes; 1940 | keygen: React.HTMLAttributes; 1941 | label: React.HTMLAttributes; 1942 | legend: React.HTMLAttributes; 1943 | li: React.HTMLAttributes; 1944 | link: React.HTMLAttributes; 1945 | main: React.HTMLAttributes; 1946 | map: React.HTMLAttributes; 1947 | mark: React.HTMLAttributes; 1948 | menu: React.HTMLAttributes; 1949 | menuitem: React.HTMLAttributes; 1950 | meta: React.HTMLAttributes; 1951 | meter: React.HTMLAttributes; 1952 | nav: React.HTMLAttributes; 1953 | noscript: React.HTMLAttributes; 1954 | object: React.HTMLAttributes; 1955 | ol: React.HTMLAttributes; 1956 | optgroup: React.HTMLAttributes; 1957 | option: React.HTMLAttributes; 1958 | output: React.HTMLAttributes; 1959 | p: React.HTMLAttributes; 1960 | param: React.HTMLAttributes; 1961 | picture: React.HTMLAttributes; 1962 | pre: React.HTMLAttributes; 1963 | progress: React.HTMLAttributes; 1964 | q: React.HTMLAttributes; 1965 | rp: React.HTMLAttributes; 1966 | rt: React.HTMLAttributes; 1967 | ruby: React.HTMLAttributes; 1968 | s: React.HTMLAttributes; 1969 | samp: React.HTMLAttributes; 1970 | script: React.HTMLAttributes; 1971 | section: React.HTMLAttributes; 1972 | select: React.HTMLAttributes; 1973 | small: React.HTMLAttributes; 1974 | source: React.HTMLAttributes; 1975 | span: React.HTMLAttributes; 1976 | strong: React.HTMLAttributes; 1977 | style: React.HTMLAttributes; 1978 | sub: React.HTMLAttributes; 1979 | summary: React.HTMLAttributes; 1980 | sup: React.HTMLAttributes; 1981 | table: React.HTMLAttributes; 1982 | tbody: React.HTMLAttributes; 1983 | td: React.HTMLAttributes; 1984 | textarea: React.HTMLAttributes; 1985 | tfoot: React.HTMLAttributes; 1986 | th: React.HTMLAttributes; 1987 | thead: React.HTMLAttributes; 1988 | time: React.HTMLAttributes; 1989 | title: React.HTMLAttributes; 1990 | tr: React.HTMLAttributes; 1991 | track: React.HTMLAttributes; 1992 | u: React.HTMLAttributes; 1993 | ul: React.HTMLAttributes; 1994 | "var": React.HTMLAttributes; 1995 | video: React.HTMLAttributes; 1996 | wbr: React.HTMLAttributes; 1997 | 1998 | // SVG 1999 | svg: React.SVGElementAttributes; 2000 | 2001 | circle: React.SVGAttributes; 2002 | defs: React.SVGAttributes; 2003 | ellipse: React.SVGAttributes; 2004 | g: React.SVGAttributes; 2005 | line: React.SVGAttributes; 2006 | linearGradient: React.SVGAttributes; 2007 | mask: React.SVGAttributes; 2008 | path: React.SVGAttributes; 2009 | pattern: React.SVGAttributes; 2010 | polygon: React.SVGAttributes; 2011 | polyline: React.SVGAttributes; 2012 | radialGradient: React.SVGAttributes; 2013 | rect: React.SVGAttributes; 2014 | stop: React.SVGAttributes; 2015 | text: React.SVGAttributes; 2016 | tspan: React.SVGAttributes; 2017 | } 2018 | } 2019 | -------------------------------------------------------------------------------- /src/tsd_typings/tsd.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /tsd.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "v4", 3 | "repo": "borisyankov/DefinitelyTyped", 4 | "ref": "master", 5 | "path": "src/tsd_typings", 6 | "bundle": "src/tsd_typings/tsd.d.ts", 7 | "installed": { 8 | "react/react.d.ts": { 9 | "commit": "54f064352a3615443f7bff4198078db15e28247b" 10 | }, 11 | "react/react-global.d.ts": { 12 | "commit": "54f064352a3615443f7bff4198078db15e28247b" 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | devtool: 'eval', 6 | entry: [ 7 | 'webpack-dev-server/client?http://localhost:3000', 8 | 'webpack/hot/only-dev-server', 9 | './src/index.tsx' 10 | ], 11 | output: { 12 | path: path.join(__dirname, 'dist'), 13 | filename: 'bundle.js', 14 | publicPath: '/static/' 15 | }, 16 | plugins: [ 17 | new webpack.HotModuleReplacementPlugin() 18 | ], 19 | module: { 20 | loaders: [{ 21 | test: /\.tsx?$/, 22 | loaders: ['react-hot', 'ts'], 23 | include: path.join(__dirname, 'src') 24 | }] 25 | } 26 | }; 27 | --------------------------------------------------------------------------------