From 2d921eeb7073d0286d13195e2975b344793998b0 Mon Sep 17 00:00:00 2001 From: Kyle Corbitt Date: Thu, 25 Feb 2016 02:44:58 -0800 Subject: [PATCH] Resolve react flow definitions Summary:Currently, we're not taking advantage of Flow's built-in type definitions for the React library in all cases because Flow's definition uses `declare module react` and this file uses `import('React')`, which Flow thinks is a different library. After this change, the following starts working which didn't before: ```js import { Component } from 'react-native'; class MyText extends Component { render() { return {this.props.text} } } // Correctly throws a Flow error for the missing "text" prop const renderedText = ; ``` Closes https://github.com/facebook/react-native/pull/5489 Differential Revision: D2856176 fb-gh-sync-id: 473ca188ad7d990c3e765526c4b33caf49ad9ffd shipit-source-id: 473ca188ad7d990c3e765526c4b33caf49ad9ffd --- .flowconfig | 3 +++ Examples/2048/Game2048.js | 3 +++ Examples/UIExplorer/AlertIOSExample.js | 6 +++++- Examples/UIExplorer/AnimatedExample.js | 4 ++++ .../UIExplorer/AnimatedGratuitousApp/AnExApp.js | 15 +++++++++++---- .../AnimatedGratuitousApp/AnExBobble.js | 2 ++ .../AnimatedGratuitousApp/AnExChained.js | 2 ++ .../AnimatedGratuitousApp/AnExScroll.js | 8 ++------ .../UIExplorer/AnimatedGratuitousApp/AnExSet.js | 2 ++ .../UIExplorer/AnimatedGratuitousApp/AnExTilt.js | 2 ++ Examples/UIExplorer/ImageEditingExample.js | 3 ++- .../NavigationCompositionExample.js | 8 +++++++- .../NavigationTicTacToeExample.js | 7 ++++--- Examples/UIExplorer/PushNotificationIOSExample.js | 8 +++++--- Examples/UIExplorer/RCTRootViewIOSExample.js | 4 ++-- .../RootViewSizeFlexibilityExampleApp.js | 1 + Examples/UIExplorer/TextInputExample.ios.js | 8 ++++++++ Examples/UIExplorer/XHRExample.ios.js | 2 ++ Examples/UIExplorer/XHRExampleCookies.js | 3 +++ Examples/UIExplorer/XHRExampleFetch.js | 2 ++ Examples/UIExplorer/createExamplePage.js | 1 + Libraries/react-native/react-native.js.flow | 2 +- 22 files changed, 74 insertions(+), 22 deletions(-) diff --git a/.flowconfig b/.flowconfig index 78c058204..db960b5f1 100644 --- a/.flowconfig +++ b/.flowconfig @@ -48,6 +48,9 @@ Libraries/react-native/react-native-interface.js [options] module.system=haste +esproposal.class_static_fields=enable +esproposal.class_instance_fields=enable + munge_underscores=true module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' diff --git a/Examples/2048/Game2048.js b/Examples/2048/Game2048.js index 239d1dade..a6c97a3e3 100644 --- a/Examples/2048/Game2048.js +++ b/Examples/2048/Game2048.js @@ -53,6 +53,8 @@ class Board extends React.Component { } class Tile extends React.Component { + state: any; + static _getPosition(index): number { return BOARD_PADDING + (index * (CELL_SIZE + CELL_MARGIN * 2) + CELL_MARGIN); } @@ -147,6 +149,7 @@ class GameEndOverlay extends React.Component { class Game2048 extends React.Component { startX: number; startY: number; + state: any; constructor(props: {}) { super(props); diff --git a/Examples/UIExplorer/AlertIOSExample.js b/Examples/UIExplorer/AlertIOSExample.js index a52c1ab79..d7f0bcf0d 100644 --- a/Examples/UIExplorer/AlertIOSExample.js +++ b/Examples/UIExplorer/AlertIOSExample.js @@ -37,7 +37,7 @@ exports.examples = [{ }, { title: 'Prompt Options', - render(): React.Component { + render(): ReactElement { return ; } }, @@ -85,9 +85,13 @@ exports.examples = [{ }]; class PromptOptions extends React.Component { + state: any; + customButtons: Array; + constructor(props) { super(props); + // $FlowFixMe this seems to be a Flow bug, `saveResponse` is defined below this.saveResponse = this.saveResponse.bind(this); this.customButtons = [{ diff --git a/Examples/UIExplorer/AnimatedExample.js b/Examples/UIExplorer/AnimatedExample.js index 5f6096338..1068ac000 100644 --- a/Examples/UIExplorer/AnimatedExample.js +++ b/Examples/UIExplorer/AnimatedExample.js @@ -39,6 +39,8 @@ exports.examples = [ 'mounts.', render: function() { class FadeInView extends React.Component { + state: any; + constructor(props) { super(props); this.state = { @@ -66,6 +68,8 @@ exports.examples = [ } } class FadeInExample extends React.Component { + state: any; + constructor(props) { super(props); this.state = { diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExApp.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExApp.js index d713b5f66..c87bc2982 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExApp.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExApp.js @@ -32,6 +32,10 @@ var CIRCLE_MARGIN = 18; var NUM_CIRCLES = 30; class Circle extends React.Component { + state: any; + props: any; + longTimer: number; + _onLongPress: () => void; _toggleIsActive: () => void; constructor(props: Object): void { @@ -156,6 +160,13 @@ class Circle extends React.Component { } class AnExApp extends React.Component { + state: any; + props: any; + + static title = 'Animated - Gratuitous App'; + static description = 'Bunch of Animations - tap a circle to ' + + 'open a view with more animations, or longPress and drag to reorder circles.'; + _onMove: (position: Point) => void; constructor(props: any): void { super(props); @@ -266,10 +277,6 @@ function moveToClosest({activeKey, keys, restLayouts}, position) { } } -AnExApp.title = 'Animated - Gratuitous App'; -AnExApp.description = 'Bunch of Animations - tap a circle to ' + - 'open a view with more animations, or longPress and drag to reorder circles.'; - var styles = StyleSheet.create({ container: { flex: 1, diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js index d3e603738..39f15a8ec 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js @@ -36,6 +36,8 @@ var BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => { // static positions }); class AnExBobble extends React.Component { + state: any; + constructor(props: Object) { super(props); this.state = {}; diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js index f2c932a24..596617f17 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js @@ -26,6 +26,8 @@ var { } = React; class AnExChained extends React.Component { + state: any; + constructor(props: Object) { super(props); this.state = { diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExScroll.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExScroll.js index f96acb380..e7712cfc5 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExScroll.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExScroll.js @@ -12,6 +12,7 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * * @providesModule AnExScroll + * @flow */ 'use strict'; @@ -26,12 +27,7 @@ var { } = React; class AnExScroll extends React.Component { - constructor(props) { - super(props); - this.state = { - scrollX: new Animated.Value(0), - }; - } + state: any = { scrollX: new Animated.Value(0) }; render() { var width = this.props.panelWidth; diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExSet.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExSet.js index f25301f77..769a0f79a 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExSet.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExSet.js @@ -31,6 +31,8 @@ var AnExScroll = require('./AnExScroll'); var AnExTilt = require('./AnExTilt'); class AnExSet extends React.Component { + state: any; + constructor(props: Object) { super(props); function randColor() { diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExTilt.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExTilt.js index 3cea77917..42b5523c0 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExTilt.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExTilt.js @@ -26,6 +26,8 @@ var { } = React; class AnExTilt extends React.Component { + state: any; + constructor(props: Object) { super(props); this.state = { diff --git a/Examples/UIExplorer/ImageEditingExample.js b/Examples/UIExplorer/ImageEditingExample.js index 1a8c93122..868bbd25f 100644 --- a/Examples/UIExplorer/ImageEditingExample.js +++ b/Examples/UIExplorer/ImageEditingExample.js @@ -47,10 +47,11 @@ type ImageCropData = { offset: ImageOffset; size: ImageSize; displaySize?: ?ImageSize; - resizeMode?: ?any; + resizeMode?: ?any; }; class SquareImageCropper extends React.Component { + state: any; _isMounted: boolean; _transformData: ImageCropData; diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js index 79e2e94b5..1dba3e14a 100644 --- a/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js +++ b/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js @@ -36,10 +36,14 @@ const NavigationExampleTabBar = require('./NavigationExampleTabBar'); import type {NavigationParentState} from 'NavigationStateUtils'; +type Action = { + isExitAction?: boolean, +}; + const ExampleExitAction = () => ({ isExitAction: true, }); -ExampleExitAction.match = (action) => ( +ExampleExitAction.match = (action: Action) => ( action && action.isExitAction === true ); @@ -196,6 +200,8 @@ class ExampleTabScreen extends React.Component { ExampleTabScreen = NavigationContainer.create(ExampleTabScreen); class NavigationCompositionExample extends React.Component { + navRootContainer: NavigationRootContainer; + render() { return ( ; } }, { title: 'Notifications Permissions', - render(): React.Component { + render(): ReactElement { return ; } }]; diff --git a/Examples/UIExplorer/RCTRootViewIOSExample.js b/Examples/UIExplorer/RCTRootViewIOSExample.js index 69ecab0a7..5aa56cf88 100644 --- a/Examples/UIExplorer/RCTRootViewIOSExample.js +++ b/Examples/UIExplorer/RCTRootViewIOSExample.js @@ -82,7 +82,7 @@ exports.description = 'Examples that show useful methods when embedding React Na exports.examples = [ { title: 'Updating app properties in runtime', - render(): React.Component { + render(): ReactElement { return ( ); @@ -90,7 +90,7 @@ exports.examples = [ }, { title: 'RCTRootView\'s size flexibility', - render(): React.Component { + render(): ReactElement { return ( ); diff --git a/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js b/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js index baab38671..9c4835703 100644 --- a/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js +++ b/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js @@ -24,6 +24,7 @@ const { } = React; class RootViewSizeFlexibilityExampleApp extends React.Component { + state: any; constructor(props: {toggled: boolean}) { super(props); diff --git a/Examples/UIExplorer/TextInputExample.ios.js b/Examples/UIExplorer/TextInputExample.ios.js index eac262d77..239197dba 100644 --- a/Examples/UIExplorer/TextInputExample.ios.js +++ b/Examples/UIExplorer/TextInputExample.ios.js @@ -97,6 +97,8 @@ var TextEventsExample = React.createClass({ }); class AutoExpandingTextInput extends React.Component { + state: any; + constructor(props) { super(props); this.state = {text: '', height: 0}; @@ -120,6 +122,8 @@ class AutoExpandingTextInput extends React.Component { } class RewriteExample extends React.Component { + state: any; + constructor(props) { super(props); this.state = {text: ''}; @@ -149,6 +153,8 @@ class RewriteExample extends React.Component { } class RewriteExampleInvalidCharacters extends React.Component { + state: any; + constructor(props) { super(props); this.state = {text: ''}; @@ -170,6 +176,8 @@ class RewriteExampleInvalidCharacters extends React.Component { } class TokenizedTextExample extends React.Component { + state: any; + constructor(props) { super(props); this.state = {text: 'Hello #World'}; diff --git a/Examples/UIExplorer/XHRExample.ios.js b/Examples/UIExplorer/XHRExample.ios.js index 5d909b3cb..a9de630e2 100644 --- a/Examples/UIExplorer/XHRExample.ios.js +++ b/Examples/UIExplorer/XHRExample.ios.js @@ -33,6 +33,7 @@ var XHRExampleHeaders = require('./XHRExampleHeaders'); var XHRExampleFetch = require('./XHRExampleFetch'); class Downloader extends React.Component { + state: any; xhr: XMLHttpRequest; cancelled: boolean; @@ -120,6 +121,7 @@ class Downloader extends React.Component { var PAGE_SIZE = 20; class FormUploader extends React.Component { + state: any; _isMounted: boolean; _fetchRandomPhoto: () => void; diff --git a/Examples/UIExplorer/XHRExampleCookies.js b/Examples/UIExplorer/XHRExampleCookies.js index 310accc19..d4cfad0e5 100644 --- a/Examples/UIExplorer/XHRExampleCookies.js +++ b/Examples/UIExplorer/XHRExampleCookies.js @@ -26,6 +26,9 @@ var { var RCTNetworking = require('RCTNetworking'); class XHRExampleCookies extends React.Component { + state: any; + cancelled: boolean; + constructor(props: any) { super(props); this.cancelled = false; diff --git a/Examples/UIExplorer/XHRExampleFetch.js b/Examples/UIExplorer/XHRExampleFetch.js index 893dd7591..87e8e1bb6 100644 --- a/Examples/UIExplorer/XHRExampleFetch.js +++ b/Examples/UIExplorer/XHRExampleFetch.js @@ -26,6 +26,8 @@ var { class XHRExampleFetch extends React.Component { + state: any; + responseURL: ?string; constructor(props: any) { super(props); diff --git a/Examples/UIExplorer/createExamplePage.js b/Examples/UIExplorer/createExamplePage.js index 55ebd1599..20d62badf 100644 --- a/Examples/UIExplorer/createExamplePage.js +++ b/Examples/UIExplorer/createExamplePage.js @@ -50,6 +50,7 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule) // Hack warning: This is a hack because the www UI explorer requires // renderComponent to be called. var originalRender = React.render; + // $FlowFixMe React.renderComponent was deprecated in 0.12, should this be React.render? var originalRenderComponent = React.renderComponent; var originalIOSRender = ReactNative.render; var originalIOSRenderComponent = ReactNative.renderComponent; diff --git a/Libraries/react-native/react-native.js.flow b/Libraries/react-native/react-native.js.flow index bbe2acdfe..e7aa80590 100644 --- a/Libraries/react-native/react-native.js.flow +++ b/Libraries/react-native/react-native.js.flow @@ -23,7 +23,7 @@ // // var ReactNative = {...require('React'), /* additions */} // -var ReactNative = Object.assign(Object.create(require('React')), { +var ReactNative = Object.assign(Object.create(require('react')), { // Components ActivityIndicatorIOS: require('ActivityIndicatorIOS'), ART: require('ReactNativeART'),