From 4bed0b571c011818db3e05ae0d1ae5b985cda206 Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Mon, 15 Sep 2014 22:13:43 -0700 Subject: [PATCH 01/16] Adding the initial types for React Currently we just support the events --- react/react.d.ts | 147 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 react/react.d.ts diff --git a/react/react.d.ts b/react/react.d.ts new file mode 100644 index 000000000..74a7c26ef --- /dev/null +++ b/react/react.d.ts @@ -0,0 +1,147 @@ +// Type definitions for pg +// Project: http://facebook.github.io/react/ +// Definitions by: Asana +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +declare module "react" { + // Browser Interfaces + // Taken from 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; + } + + // Events + export interface SyntheticEvent { + bubbles: boolean; + cancelable: boolean; + currentTarget: EventTarget; + defaultPrevented: boolean; + eventPhase: number; + nativeEvent: Event; + preventDefault(): void; + stopPropagation(): void; + target: EventTarget; + timeStamp: Date; + type: string; + } + + export interface ClipboardEvent extends SyntheticEvent { + clipboardData: DataTransfer; + } + + export 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; + } + + export interface FocusEvent extends SyntheticEvent { + relatedTarget: EventTarget; + } + + export 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; + } + + export interface TouchEvent extends SyntheticEvent { + altKey: boolean; + changedTouches: TouchList; + ctrlKey: boolean; + getModifierState(key: string): boolean; + metaKey: boolean; + shiftKey: boolean; + targetTouches: TouchList; + touches: TouchList; + } + + export interface UiEvent extends SyntheticEvent { + detail: number; + view: AbstractView; + } + + export interface WheelEvent extends SyntheticEvent { + deltaMode: number; + deltaX: number; + deltaY: number; + deltaZ: number; + } + + // Attributes + interface EventAttributes { + onCopy?: (event: ClipboardEvent) => void; + onCut?: (event: ClipboardEvent) => void; + onPaste?: (event: ClipboardEvent) => void; + onKeyDown?: (event: KeyboardEvent) => void; + onKeyPress?: (event: KeyboardEvent) => void; + onKeyUp?: (event: KeyboardEvent) => void; + onFocus?: (event: FocusEvent) => void; + onBlur?: (event: FocusEvent) => void; + onChange?: (event: SyntheticEvent) => void; + onInput?: (event: SyntheticEvent) => void; + onSubmit?: (event: SyntheticEvent) => void; + onClick?: (event: MouseEvent) => void; + onDoubleClick?: (event: MouseEvent) => void; + onDrag?: (event: MouseEvent) => void; + onDragEnd?: (event: MouseEvent) => void; + onDragEnter?: (event: MouseEvent) => void; + onDragExit?: (event: MouseEvent) => void; + onDragLeave?: (event: MouseEvent) => void; + onDragOver?: (event: MouseEvent) => void; + onDragStart?: (event: MouseEvent) => void; + onDrop?: (event: MouseEvent) => void; + onMouseDown?: (event: MouseEvent) => void; + onMouseEnter?: (event: MouseEvent) => void; + onMouseLeave?: (event: MouseEvent) => void; + onMouseMove?: (event: MouseEvent) => void; + onMouseOut?: (event: MouseEvent) => void; + onMouseOver?: (event: MouseEvent) => void; + onMouseUp?: (event: MouseEvent) => void; + onTouchCancel?: (event: TouchEvent) => void; + onTouchEnd?: (event: TouchEvent) => void; + onTouchMove?: (event: TouchEvent) => void; + onTouchStart?: (event: TouchEvent) => void; + onScroll?: (event: UiEvent) => void; + onWheel?: (event: WheelEvent) => void; + } +} \ No newline at end of file From 18695fafca885331d5bb9621e84243e6f2fd2d01 Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Tue, 23 Sep 2014 15:07:56 -0700 Subject: [PATCH 02/16] Adding type declarations for components --- react/react.d.ts | 52 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/react/react.d.ts b/react/react.d.ts index 74a7c26ef..63877475c 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -1,9 +1,59 @@ -// Type definitions for pg +// Type definitions for React 0.11.2 // Project: http://facebook.github.io/react/ // Definitions by: Asana // Definitions: https://github.com/borisyankov/DefinitelyTyped declare module "react" { + export function createClass(specification: Specification): Factory

; + export function renderComponent(component: Descriptor, container: Element, callback?: () => void): void; + export function unmountComponentAtNode(container: Element): boolean; + export function renderComponentToString(component: Descriptor): string; + export function renderComponentToStaticMarkup(component: Descriptor): string; + export function isValidClass(factory: Factory): boolean; + export function isValidComponent(component: Descriptor): boolean; + + export interface Descriptor

{ + props: P; + } + + export interface Factory

{ + (properties?: P, ...children: any[]): Descriptor

; + } + + export interface Mixin { + componentWillMount?(): void; + componentDidMount?(): void; + componentWillReceiveProps?(nextProps: P): void; + shouldComponentUpdate?(nextProps: P, nextState: S): boolean; + componentWillUpdate?(nextProps: P, nextState: S): void; + componentDidUpdate?(prevProps: P, prevState: S): void; + componentWillUnmount?(): void; + } + + export interface Specification extends Mixin { + displayName?: string; + mixins?: Mixin[]; + statics?: { + [key: string]: Function + }; + // TODO: Do the correct type definition + propTypes?: Object; + getDefaultProps?(): P; + getInitialState?(): S; + render(): Descriptor; + } + + export interface Component { + setState(nextState: S, callback?: () => void): void; + replaceState(nextState: S, callback?: () => void): void; + forceUpdate(callback?: () => void): void; + getDomNode(): Element; + isMounted(): boolean; + transferPropsTo(target: Factory

): Descriptor

; + setProps(nextProps: P, callback?: () => void): void; + replaceProps(nextProps: P, callback?: () => void): void; + } + // Browser Interfaces // Taken from https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts interface AbstractView { From 0827cbdbab1bfede4f76bdeff0d34ca42bf593fc Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Tue, 23 Sep 2014 15:08:56 -0700 Subject: [PATCH 03/16] Adding touch events --- react/react.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/react/react.d.ts b/react/react.d.ts index 63877475c..073fe68f6 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -11,6 +11,7 @@ declare module "react" { export function renderComponentToStaticMarkup(component: Descriptor): string; export function isValidClass(factory: Factory): boolean; export function isValidComponent(component: Descriptor): boolean; + export function initializeTouchEvents(shouldUseTouch: boolean): void; export interface Descriptor

{ props: P; From 713bb80881c2301088efa11a30518fd0123f46f8 Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Tue, 23 Sep 2014 15:14:13 -0700 Subject: [PATCH 04/16] Adding children --- react/react.d.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/react/react.d.ts b/react/react.d.ts index 073fe68f6..ef85a7740 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -12,7 +12,7 @@ declare module "react" { export function isValidClass(factory: Factory): boolean; export function isValidComponent(component: Descriptor): boolean; export function initializeTouchEvents(shouldUseTouch: boolean): void; - + export interface Descriptor

{ props: P; } @@ -55,6 +55,13 @@ declare module "react" { replaceProps(nextProps: P, callback?: () => void): void; } + export var Children: { + map(children: any[], fn: (child: any) => any): any[]; + forEach(children: any[], fn: (child: any) => any): void; + count(children: any[]): number; + only(children: any[]): any; + }; + // Browser Interfaces // Taken from https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts interface AbstractView { From ea3c4f120032d6e00240d49741688adac91397e1 Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Tue, 23 Sep 2014 15:28:22 -0700 Subject: [PATCH 05/16] Adding PropTypes --- react/react.d.ts | 36 +++++++++++++++++++++++++++++++----- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/react/react.d.ts b/react/react.d.ts index ef85a7740..1166863f3 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -31,14 +31,15 @@ declare module "react" { componentWillUnmount?(): void; } + interface FunctionMap { + [key: string]: Function + } + export interface Specification extends Mixin { displayName?: string; mixins?: Mixin[]; - statics?: { - [key: string]: Function - }; - // TODO: Do the correct type definition - propTypes?: Object; + statics?: FunctionMap; + propTypes?: FunctionMap; getDefaultProps?(): P; getInitialState?(): S; render(): Descriptor; @@ -55,6 +56,31 @@ declare module "react" { replaceProps(nextProps: P, callback?: () => void): void; } + interface Constructable { + new(): any; + } + + interface Requireable extends Function { + isRequired: Function; + } + + export var PropsTypes: { + any: Requireable; + array: Requireable; + bool: Requireable; + func: Requireable; + number: Requireable; + object: Requireable; + string: Requireable; + renderable: Requireable; + component: Requireable; + instanceOf: (clazz: Constructable) => Requireable; + oneOf: (types: any[]) => Requireable; + oneOfType: (types: Function[]) => Requireable; + arrayOf: (type: Function) => Requireable; + shape: (type: FunctionMap) => Requireable; + }; + export var Children: { map(children: any[], fn: (child: any) => any): any[]; forEach(children: any[], fn: (child: any) => any): void; From 26962dec656775aabf146cf830b06764abdf0234 Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Tue, 23 Sep 2014 15:47:06 -0700 Subject: [PATCH 06/16] Got props types to work --- react/react-tests.ts | 71 ++++++++++++++++++++++++++++++++++++++++++++ react/react.d.ts | 56 ++++++++++++++++++++-------------- 2 files changed, 104 insertions(+), 23 deletions(-) create mode 100644 react/react-tests.ts diff --git a/react/react-tests.ts b/react/react-tests.ts new file mode 100644 index 000000000..bf60df67c --- /dev/null +++ b/react/react-tests.ts @@ -0,0 +1,71 @@ +/// +import React = require("react"); + +var PropTypesSpecification: React.Specification = { + propTypes: { + // You can declare that a prop is a specific JS primitive. By default, these + // are all optional. + optionalArray: React.PropTypes.array, + optionalBool: React.PropTypes.bool, + optionalFunc: React.PropTypes.func, + optionalNumber: React.PropTypes.number, + optionalObject: React.PropTypes.object, + optionalString: React.PropTypes.string, + + // Anything that can be rendered: numbers, strings, components or an array + // containing these types. + optionalRenderable: React.PropTypes.renderable, + + // A React component. + optionalComponent: React.PropTypes.component, + + // You can also declare that a prop is an instance of a class. This uses + // JS's instanceof operator. + optionalMessage: React.PropTypes.instanceOf(Date), + + // You can ensure that your prop is limited to specific values by treating + // it as an enum. + optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), + + // An object that could be one of many types + optionalUnion: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.number, + React.PropTypes.instanceOf(Date) + ]), + + // An array of a certain type + optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), + + // An object with property values of a certain type + optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), + + // An object taking on a particular shape + optionalObjectWithShape: React.PropTypes.shape({ + color: React.PropTypes.string, + fontSize: React.PropTypes.number + }), + + // You can chain any of the above with `isRequired` to make sure a warning + // is shown if the prop isn't provided. + requiredFunc: React.PropTypes.func.isRequired, + + // A value of any data type + requiredAny: React.PropTypes.any.isRequired, + + // You can also specify a custom validator. It should return an Error + // object if the validation fails. Don't `console.warn` or throw, as this + // won't work inside `oneOfType`. + customProp: function(props, propName, componentName) { + if (!/matchme/.test(props[propName])) { + return new Error('Validation failed!'); + } + return null; + } + }, + render(): React.Descriptor { + return null; + } +}; + +React.createClass(PropTypesSpecification); \ No newline at end of file diff --git a/react/react.d.ts b/react/react.d.ts index 1166863f3..e9fc495fb 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -31,21 +31,22 @@ declare module "react" { componentWillUnmount?(): void; } - interface FunctionMap { - [key: string]: Function - } - export interface Specification extends Mixin { displayName?: string; mixins?: Mixin[]; - statics?: FunctionMap; - propTypes?: FunctionMap; + statics?: { + [key: string]: Function; + }; + propTypes?: ValidationMap

; getDefaultProps?(): P; getInitialState?(): S; render(): Descriptor; } export interface Component { + // TODO: Refs + props: P; + state: S; setState(nextState: S, callback?: () => void): void; replaceState(nextState: S, callback?: () => void): void; forceUpdate(callback?: () => void): void; @@ -60,25 +61,34 @@ declare module "react" { new(): any; } - interface Requireable extends Function { - isRequired: Function; + interface Validator

{ + (props: P, propName: string, componentName: string): Error; } - export var PropsTypes: { - any: Requireable; - array: Requireable; - bool: Requireable; - func: Requireable; - number: Requireable; - object: Requireable; - string: Requireable; - renderable: Requireable; - component: Requireable; - instanceOf: (clazz: Constructable) => Requireable; - oneOf: (types: any[]) => Requireable; - oneOfType: (types: Function[]) => Requireable; - arrayOf: (type: Function) => Requireable; - shape: (type: FunctionMap) => Requireable; + interface Requireable

extends Validator

{ + isRequired: Validator

; + } + + interface ValidationMap

{ + [key: string]: Validator

; + } + + export var PropTypes: { + any: Requireable; + array: Requireable; + bool: Requireable; + func: Requireable; + number: Requireable; + object: Requireable; + string: Requireable; + renderable: Requireable; + component: Requireable; + instanceOf: (clazz: Constructable) => Requireable; + oneOf: (types: any[]) => Requireable + oneOfType: (types: Validator[]) => Requireable; + arrayOf: (type: Validator) => Requireable; + objectOf: (type: Validator) => Requireable; + shape: (type: ValidationMap) => Requireable; }; export var Children: { From c5c35753044564806a711bad026efdfce8554b2e Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Tue, 23 Sep 2014 15:49:25 -0700 Subject: [PATCH 07/16] Added support for refs --- react/react.d.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/react/react.d.ts b/react/react.d.ts index e9fc495fb..3c83b9a42 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -43,14 +43,19 @@ declare module "react" { render(): Descriptor; } - export interface Component { - // TODO: Refs + interface DomReferencer { + getDomNode(): Element; + } + + export interface Component extends DomReferencer{ + refs: { + [key: string]: DomReferencer + }; props: P; state: S; setState(nextState: S, callback?: () => void): void; replaceState(nextState: S, callback?: () => void): void; forceUpdate(callback?: () => void): void; - getDomNode(): Element; isMounted(): boolean; transferPropsTo(target: Factory

): Descriptor

; setProps(nextProps: P, callback?: () => void): void; From 236a885f675bdcc838cdf72b9954aa96b6b6074f Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Tue, 23 Sep 2014 16:04:18 -0700 Subject: [PATCH 08/16] Fixing the tests --- react/react-tests.ts | 2 +- react/react.d.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/react/react-tests.ts b/react/react-tests.ts index bf60df67c..be6751b07 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -63,7 +63,7 @@ var PropTypesSpecification: React.Specification = { return null; } }, - render(): React.Descriptor { + render: (): React.Descriptor => { return null; } }; diff --git a/react/react.d.ts b/react/react.d.ts index 3c83b9a42..6a09bea70 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -207,7 +207,9 @@ declare module "react" { } // Attributes - interface EventAttributes { + interface DomAttributes { + // HTML Attributes + // Events onCopy?: (event: ClipboardEvent) => void; onCut?: (event: ClipboardEvent) => void; onPaste?: (event: ClipboardEvent) => void; @@ -243,4 +245,5 @@ declare module "react" { onScroll?: (event: UiEvent) => void; onWheel?: (event: WheelEvent) => void; } + } \ No newline at end of file From 5febe1f3e60fb74171714a090241e278e126706f Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Tue, 23 Sep 2014 16:11:42 -0700 Subject: [PATCH 09/16] Starting SVG Elements --- react/react.d.ts | 54 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 39 insertions(+), 15 deletions(-) diff --git a/react/react.d.ts b/react/react.d.ts index 6a09bea70..96d11e237 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -79,21 +79,21 @@ declare module "react" { } export var PropTypes: { - any: Requireable; - array: Requireable; - bool: Requireable; - func: Requireable; - number: Requireable; - object: Requireable; - string: Requireable; - renderable: Requireable; - component: Requireable; - instanceOf: (clazz: Constructable) => Requireable; - oneOf: (types: any[]) => Requireable - oneOfType: (types: Validator[]) => Requireable; - arrayOf: (type: Validator) => Requireable; - objectOf: (type: Validator) => Requireable; - shape: (type: ValidationMap) => Requireable; + any: Requireable; + array: Requireable; + bool: Requireable; + func: Requireable; + number: Requireable; + object: Requireable; + string: Requireable; + renderable: Requireable; + component: Requireable; + instanceOf: (clazz: Constructable) => Requireable; + oneOf: (types: any[]) => Requireable + oneOfType: (types: Validator[]) => Requireable; + arrayOf: (type: Validator) => Requireable; + objectOf: (type: Validator) => Requireable; + shape: (type: ValidationMap) => Requireable; }; export var Children: { @@ -246,4 +246,28 @@ declare module "react" { onWheel?: (event: WheelEvent) => void; } + interface SvgAttributes {} + + interface SvgElement extends Factory {} + + export var DOM: { + // SVG + circle: SvgElement; + defs: SvgElement; + ellipse: SvgElement; + g: SvgElement; + line: SvgElement; + linearGradient: SvgElement; + mask: SvgElement; + path: SvgElement; + pattern: SvgElement; + polygon: SvgElement; + polyline: SvgElement; + radialGradient: SvgElement; + rect: SvgElement; + stop: SvgElement; + svg: SvgElement; + text: SvgElement; + tspan: SvgElement; + }; } \ No newline at end of file From 7be64cc455ebfe543c0442f6b968d0ed0f0afa82 Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Tue, 23 Sep 2014 17:01:50 -0700 Subject: [PATCH 10/16] Renaming back to event attributes --- react/react.d.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/react/react.d.ts b/react/react.d.ts index 96d11e237..1342f5eb4 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -207,8 +207,7 @@ declare module "react" { } // Attributes - interface DomAttributes { - // HTML Attributes + interface EventAttributes { // Events onCopy?: (event: ClipboardEvent) => void; onCut?: (event: ClipboardEvent) => void; From bcaf3664e46aa1dbb638d913ced20c366e831ce9 Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Tue, 23 Sep 2014 19:53:27 -0700 Subject: [PATCH 11/16] Add support for DomAttributes and DomElements --- react/react.d.ts | 211 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 211 insertions(+) diff --git a/react/react.d.ts b/react/react.d.ts index 1342f5eb4..8a0f9d5fa 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -207,6 +207,102 @@ declare module "react" { } // Attributes + interface DomAttributes { + // HTML Attributes + accept?: any; + accessKey?: any; + action?: any; + allowFullScreen?: any; + allowTransparency?: any; + alt?: any; + async?: any; + autoComplete?: any; + autoFocus?: any; + autoPlay?: any; + cellPadding?: any; + cellSpacing?: any; + charSet?: any; + checked?: any; + className?: any; + cols?: any; + colSpan?: any; + content?: any; + contentEditable?: any; + contextMenu?: any; + controls?: any; + coords?: any; + crossOrigin?: any; + data?: any; + dateTime?: any; + defer?: any; + dir?: any; + disabled?: any; + download?: any; + draggable?: any; + encType?: any; + form?: any; + formNoValidate?: any; + frameBorder?: any; + height?: any; + hidden?: any; + href?: any; + hrefLang?: any; + htmlFor?: any; + httpEquiv?: any; + icon?: any; + id?: any; + label?: any; + lang?: any; + list?: any; + loop?: any; + max?: any; + maxLength?: any; + mediaGroup?: any; + method?: any; + min?: any; + multiple?: any; + muted?: any; + name?: any; + noValidate?: any; + open?: any; + pattern?: any; + placeholder?: any; + poster?: any; + preload?: any; + radioGroup?: any; + readOnly?: any; + rel?: any; + required?: any; + role?: any; + rows?: any; + rowSpan?: any; + sandbox?: any; + scope?: any; + scrollLeft?: any; + scrolling?: any; + scrollTop?: any; + seamless?: any; + selected?: any; + shape?: any; + size?: any; + span?: any; + spellCheck?: any; + src?: any; + srcDoc?: any; + srcSet?: any; + start?: any; + step?: any; + style?: any; + tabIndex?: any; + target?: any; + title?: any; + type?: any; + useMap?: any; + value?: any; + width?: any; + wmode?: any; + } + interface EventAttributes { // Events onCopy?: (event: ClipboardEvent) => void; @@ -245,11 +341,126 @@ declare module "react" { onWheel?: (event: WheelEvent) => void; } + interface DomElement extends Factory { + } + interface SvgAttributes {} interface SvgElement extends Factory {} export var DOM: { + // HTML + a: DomElement; + abbr: DomElement; + address: DomElement; + area: DomElement; + article: DomElement; + aside: DomElement; + audio: DomElement; + b: DomElement; + base: DomElement; + bdi: DomElement; + bdo: DomElement; + big: DomElement; + blockquote: DomElement; + body: DomElement; + br: DomElement; + button: DomElement; + canvas: DomElement; + caption: DomElement; + cite: DomElement; + code: DomElement; + col: DomElement; + colgroup: DomElement; + data: DomElement; + datalist: DomElement; + dd: DomElement; + del: DomElement; + details: DomElement; + dfn: DomElement; + dialog: DomElement; + div: DomElement; + dl: DomElement; + dt: DomElement; + em: DomElement; + embed: DomElement; + fieldset: DomElement; + figcaption: DomElement; + figure: DomElement; + footer: DomElement; + form: DomElement; + h1: DomElement; + h2: DomElement; + h3: DomElement; + h4: DomElement; + h5: DomElement; + h6: DomElement; + head: DomElement; + header: DomElement; + hr: DomElement; + html: DomElement; + i: DomElement; + iframe: DomElement; + img: DomElement; + input: DomElement; + ins: DomElement; + kbd: DomElement; + keygen: DomElement; + label: DomElement; + legend: DomElement; + li: DomElement; + link: DomElement; + main: DomElement; + map: DomElement; + mark: DomElement; + menu: DomElement; + menuitem: DomElement; + meta: DomElement; + meter: DomElement; + nav: DomElement; + noscript: DomElement; + object: DomElement; + ol: DomElement; + optgroup: DomElement; + option: DomElement; + output: DomElement; + p: DomElement; + param: DomElement; + pre: DomElement; + progress: DomElement; + q: DomElement; + rp: DomElement; + rt: DomElement; + ruby: DomElement; + s: DomElement; + samp: DomElement; + script: DomElement; + section: DomElement; + select: DomElement; + small: DomElement; + source: DomElement; + span: DomElement; + strong: DomElement; + style: DomElement; + sub: DomElement; + summary: DomElement; + sup: DomElement; + table: DomElement; + tbody: DomElement; + td: DomElement; + textarea: DomElement; + tfoot: DomElement; + th: DomElement; + thead: DomElement; + time: DomElement; + title: DomElement; + tr: DomElement; + track: DomElement; + u: DomElement; + ul: DomElement; + "var": DomElement; + video: DomElement; + wbr: DomElement; // SVG circle: SvgElement; defs: SvgElement; From e8c13a940c109a1ea69f41a0c0363ff4902ed7b9 Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Wed, 24 Sep 2014 11:01:33 -0700 Subject: [PATCH 12/16] Cleaning up the attribute interfaces --- react/react.d.ts | 82 ++++++++++++++++++++++++------------------------ 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/react/react.d.ts b/react/react.d.ts index 8a0f9d5fa..93638cff0 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -207,7 +207,44 @@ declare module "react" { } // Attributes - interface DomAttributes { + interface EventAttributes { + onCopy?: (event: ClipboardEvent) => void; + onCut?: (event: ClipboardEvent) => void; + onPaste?: (event: ClipboardEvent) => void; + onKeyDown?: (event: KeyboardEvent) => void; + onKeyPress?: (event: KeyboardEvent) => void; + onKeyUp?: (event: KeyboardEvent) => void; + onFocus?: (event: FocusEvent) => void; + onBlur?: (event: FocusEvent) => void; + onChange?: (event: SyntheticEvent) => void; + onInput?: (event: SyntheticEvent) => void; + onSubmit?: (event: SyntheticEvent) => void; + onClick?: (event: MouseEvent) => void; + onDoubleClick?: (event: MouseEvent) => void; + onDrag?: (event: MouseEvent) => void; + onDragEnd?: (event: MouseEvent) => void; + onDragEnter?: (event: MouseEvent) => void; + onDragExit?: (event: MouseEvent) => void; + onDragLeave?: (event: MouseEvent) => void; + onDragOver?: (event: MouseEvent) => void; + onDragStart?: (event: MouseEvent) => void; + onDrop?: (event: MouseEvent) => void; + onMouseDown?: (event: MouseEvent) => void; + onMouseEnter?: (event: MouseEvent) => void; + onMouseLeave?: (event: MouseEvent) => void; + onMouseMove?: (event: MouseEvent) => void; + onMouseOut?: (event: MouseEvent) => void; + onMouseOver?: (event: MouseEvent) => void; + onMouseUp?: (event: MouseEvent) => void; + onTouchCancel?: (event: TouchEvent) => void; + onTouchEnd?: (event: TouchEvent) => void; + onTouchMove?: (event: TouchEvent) => void; + onTouchStart?: (event: TouchEvent) => void; + onScroll?: (event: UiEvent) => void; + onWheel?: (event: WheelEvent) => void; + } + + interface DomAttributes extends EventAttributes { // HTML Attributes accept?: any; accessKey?: any; @@ -303,48 +340,11 @@ declare module "react" { wmode?: any; } - interface EventAttributes { - // Events - onCopy?: (event: ClipboardEvent) => void; - onCut?: (event: ClipboardEvent) => void; - onPaste?: (event: ClipboardEvent) => void; - onKeyDown?: (event: KeyboardEvent) => void; - onKeyPress?: (event: KeyboardEvent) => void; - onKeyUp?: (event: KeyboardEvent) => void; - onFocus?: (event: FocusEvent) => void; - onBlur?: (event: FocusEvent) => void; - onChange?: (event: SyntheticEvent) => void; - onInput?: (event: SyntheticEvent) => void; - onSubmit?: (event: SyntheticEvent) => void; - onClick?: (event: MouseEvent) => void; - onDoubleClick?: (event: MouseEvent) => void; - onDrag?: (event: MouseEvent) => void; - onDragEnd?: (event: MouseEvent) => void; - onDragEnter?: (event: MouseEvent) => void; - onDragExit?: (event: MouseEvent) => void; - onDragLeave?: (event: MouseEvent) => void; - onDragOver?: (event: MouseEvent) => void; - onDragStart?: (event: MouseEvent) => void; - onDrop?: (event: MouseEvent) => void; - onMouseDown?: (event: MouseEvent) => void; - onMouseEnter?: (event: MouseEvent) => void; - onMouseLeave?: (event: MouseEvent) => void; - onMouseMove?: (event: MouseEvent) => void; - onMouseOut?: (event: MouseEvent) => void; - onMouseOver?: (event: MouseEvent) => void; - onMouseUp?: (event: MouseEvent) => void; - onTouchCancel?: (event: TouchEvent) => void; - onTouchEnd?: (event: TouchEvent) => void; - onTouchMove?: (event: TouchEvent) => void; - onTouchStart?: (event: TouchEvent) => void; - onScroll?: (event: UiEvent) => void; - onWheel?: (event: WheelEvent) => void; + interface SvgAttributes extends EventAttributes { + } - interface DomElement extends Factory { - } - - interface SvgAttributes {} + interface DomElement extends Factory {} interface SvgElement extends Factory {} From 46997c99af36627d2a56598f26d474a658932361 Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Wed, 24 Sep 2014 11:09:21 -0700 Subject: [PATCH 13/16] Adding SvgAttributes Unfortunately SvgAttributes require union types and cannot be properly typed. --- react/react.d.ts | 44 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/react/react.d.ts b/react/react.d.ts index 93638cff0..020eb1fd6 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -341,7 +341,49 @@ declare module "react" { } interface SvgAttributes extends EventAttributes { - + cx?: any; + cy?: any; + d?: any; + dx?: any; + dy?: any; + fill?: any; + fillOpacity?: any; + fontFamily?: any; + fontSize?: any; + fx?: any; + fy?: any; + gradientTransform?: any; + gradientUnits?: any; + markerEnd?: any; + markerMid?: any; + markerStart?: any; + offset?: any; + opacity?: any; + patternContentUnits?: any; + patternUnits?: any; + points?: any; + preserveAspectRatio?: any; + r?: any; + rx?: any; + ry?: any; + spreadMethod?: any; + stopColor?: any; + stopOpacity?: any; + stroke?: any; + strokeDasharray?: any; + strokeLinecap?: any; + strokeOpacity?: any; + strokeWidth?: any; + textAnchor?: any; + transform?: any; + version?: any; + viewBox?: any; + x1?: any; + x2?: any; + x?: any; + y1?: any; + y2?: any; + y?: any; } interface DomElement extends Factory {} From 97f591c7dfe500f21a66238ee64b4b074c2e4d3a Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Wed, 24 Sep 2014 11:15:28 -0700 Subject: [PATCH 14/16] Reformatting for style changes with IntelliJ Just want to uphold good style. --- react/react.d.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/react/react.d.ts b/react/react.d.ts index 020eb1fd6..c97810448 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -5,12 +5,19 @@ declare module "react" { export function createClass(specification: Specification): Factory

; + export function renderComponent(component: Descriptor, container: Element, callback?: () => void): void; + export function unmountComponentAtNode(container: Element): boolean; + export function renderComponentToString(component: Descriptor): string; + export function renderComponentToStaticMarkup(component: Descriptor): string; + export function isValidClass(factory: Factory): boolean; + export function isValidComponent(component: Descriptor): boolean; + export function initializeTouchEvents(shouldUseTouch: boolean): void; export interface Descriptor

{ @@ -47,7 +54,7 @@ declare module "react" { getDomNode(): Element; } - export interface Component extends DomReferencer{ + export interface Component extends DomReferencer { refs: { [key: string]: DomReferencer }; @@ -129,7 +136,7 @@ declare module "react" { } // Events - export interface SyntheticEvent { + export interface SyntheticEvent { bubbles: boolean; cancelable: boolean; currentTarget: EventTarget; @@ -386,9 +393,11 @@ declare module "react" { y?: any; } - interface DomElement extends Factory {} + interface DomElement extends Factory { + } - interface SvgElement extends Factory {} + interface SvgElement extends Factory { + } export var DOM: { // HTML From e3382e45a7da4fa0add3f7c18380e65ae4d1e79b Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Wed, 24 Sep 2014 11:37:57 -0700 Subject: [PATCH 15/16] Simple Test Components --- react/react-tests.ts | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/react/react-tests.ts b/react/react-tests.ts index be6751b07..1267713c2 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -68,4 +68,40 @@ var PropTypesSpecification: React.Specification = { } }; -React.createClass(PropTypesSpecification); \ No newline at end of file +React.createClass(PropTypesSpecification); + +var mountNode: Element; + +var HelloMessage = React.createClass({displayName: 'HelloMessage', + render: function() { + return React.DOM.div(null, "Hello ", (>this).props.name); + } +}); + +React.renderComponent(HelloMessage({name: "John"}), mountNode); + +var Timer = React.createClass({displayName: 'Timer', + getInitialState: function() { + return {secondsElapsed: 0}; + }, + tick: function() { + (>this).setState({ + secondsElapsed: (>this).state.secondsElapsed + 1 + }); + }, + componentDidMount: function() { + this.interval = setInterval(this.tick, 1000); + }, + componentWillUnmount: function() { + clearInterval(this.interval); + }, + render: function() { + return React.DOM.div( + null, + "Seconds Elapsed: ", + (>this).state.secondsElapsed + ); + } +}); + +React.renderComponent(Timer(null), mountNode); \ No newline at end of file From 1884930148047bff56d1a1471dc5e252578e85cc Mon Sep 17 00:00:00 2001 From: Phips Peter Date: Mon, 29 Sep 2014 19:18:28 -0700 Subject: [PATCH 16/16] Adding my name to the contributors --- CONTRIBUTORS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 5eb1fc9f5..15c5e35c8 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -316,6 +316,7 @@ All definitions files include a header with the author and editors, so at some p * [Rickshaw](http://code.shutterstock.com/rickshaw/) (by [Blake Niemyjski](https://github.com/niemyjski)) * [Riot.js](https://github.com/moot/riotjs) (by [vvakame](https://github.com/vvakame)) * [Restify](https://github.com/mcavage/node-restify) (by [Bret Little](https://github.com/blittle)) +* [React](http://facebook.github.io/react/) (by [Phips Peter](https://github.com/pspeter3) * [Redis](https://github.com/mranney/node_redis) (by [Carlos Ballesteros Velasco](https://github.com/soywiz)) * [Request](https://github.com/mikeal/request) (by [Carlos Ballesteros Velasco](https://github.com/soywiz)) * [Royalslider](http://dimsemenov.com/plugins/royal-slider/) (by [Christiaan Rakowski](https://github.com/csrakowski))