Enable tslint in build process and fix lint

package.json

@@ -5,14 +5,17 @@
   "author": "ReactXP Team <reactxp@microsoft.com>",
   "license": "MIT",
   "scripts": {
-    "build": "tsc"
+    "build": "npm run tslint && tsc",
+    "tslint": "tslint --project tsconfig.json -r tslint.json -r./node_modules/tslint-microsoft-contrib --fix || true"
   },
   "dependencies": {
     "assert": "^1.3.0",
     "ifvisible.js": "^1.0.6",
     "lodash": "^4.17.1",
     "rebound": "^0.0.13",
-    "synctasks": "^0.2.9"
+    "synctasks": "^0.2.9",
+    "tslint": "^5.0.0",
+    "tslint-microsoft-contrib": "^4.0.1"
   },
   "peerDependencies": {
     "react": "15.5.3",

src/android/ReactXP.ts

@@ -97,7 +97,7 @@ module ReactXP {
     export type Popup = PopupType;
     export var Popup = PopupImpl;
     export type Profiling = ProfilingType;
-    export var Profiling = ProfilingImpl
+    export var Profiling = ProfilingImpl;
     export type ScrollView = ScrollViewType;
     export var ScrollView = ScrollViewImpl;
     export type StatusBar = StatusBarType;
@@ -128,7 +128,7 @@ module ReactXP {
     export import Children = React.Children;
     export var __spread = (React as any).__spread;
     export import DeviceNetworkType = RXInterface.DeviceNetworkType;
-};
+}
 
 export = ReactXP;
 

src/common/Accessibility.ts

@@ -7,9 +7,6 @@
 * Common wrapper for accessibility helper exposed from ReactXP.
 */
 
-import RN = require('react-native');
-import SyncTasks = require('synctasks');
-
 import SubscribableEvent = require('../common/SubscribableEvent');
 import RX = require('../common/Interfaces');
 

src/common/AccessibilityUtil.ts

@@ -14,7 +14,7 @@ export const ImportantForAccessibilityMap = {
     [Types.ImportantForAccessibility.Yes]: 'yes',
     [Types.ImportantForAccessibility.No]: 'no',
     [Types.ImportantForAccessibility.NoHideDescendants]: 'no-hide-descendants'
-}
+};
 
 export abstract class AccessibilityUtil {
     isHidden(importantForAccessibility: Types.ImportantForAccessibility): boolean {
@@ -38,4 +38,4 @@ export abstract class AccessibilityUtil {
     protected abstract accessibilityLiveRegionToString(liveRegion: Types.AccessibilityLiveRegion): string;
     protected abstract accessibilityTraitToString(trait: Types.AccessibilityTrait | Types.AccessibilityTrait[], 
         defaultTrait?: Types.AccessibilityTrait): string | string[]; 
-}
+}

src/common/Bezier.ts

@@ -101,4 +101,4 @@
      }
      return calcBezier(getTForX(x), mY1, mY2);
    };
- };
+ }

src/common/Interfaces.ts

@@ -87,7 +87,9 @@ export interface IAnimatedValue {
 }
 
 export abstract class AnimatedValue implements IAnimatedValue {
-    constructor(val: number) { }
+    constructor(val: number) {
+        // No-op
+    }
     abstract setValue(value: number): void;
     abstract addListener(callback: any): number;
     abstract removeListener(id: string): void;
@@ -226,7 +228,7 @@ export enum DeviceNetworkType {
     MOBILE_2G,
     MOBILE_3G,
     MOBILE_4G
-};
+}
 
 export abstract class Network {
     abstract isConnected(): SyncTasks.Promise<boolean>;
@@ -323,4 +325,3 @@ export interface Animated {
     parallel: Types.Animated.ParallelFunction;
     sequence: Types.Animated.SequenceFunction;
 }
-

src/common/StyleLeakDetector.ts

@@ -15,7 +15,7 @@
 import _ = require('./lodashMini');
 
 import AppConfig from './AppConfig';
-import RX = require('./Interfaces');
+
 import Types = require('../common/Types');
 
 export class StyleLeakDetector {
@@ -88,7 +88,7 @@ export class StyleLeakDetector {
             }
         }
     }
-};
+}
 
 var instance = new StyleLeakDetector();
 export default instance;

src/common/SubscribableEvent.ts

@@ -54,5 +54,5 @@ export class SubscribableEvent<F extends { (...args: any[]): boolean|void }> {
         }
 
         return false;
-    })
+    });
 }

src/common/Types.ts

@@ -21,7 +21,7 @@ export type ReactNode = React.ReactNode;
 // this detail away from the components' common implementation.
 export type ReactInterface = {
     createElement<P>(type: string, props?: P, ...children: React.ReactNode[]): React.ReactElement<P>;
-}
+};
 
 //------------------------------------------------------------
 // React Native Flexbox styles 0.14.2
@@ -549,7 +549,7 @@ export interface ViewPropsShared extends CommonProps, CommonAccessibilityProps {
     // iOS and Android only. Visual touchfeedback properties
     disableTouchOpacityAnimation?: boolean;    
     activeOpacity?: number;
-    underlayColor?: string
+    underlayColor?: string;
 }
 
 export interface ViewProps extends ViewPropsShared {
@@ -576,7 +576,7 @@ export interface AnimatedViewProps extends ViewPropsShared {
 // GestureView
 export interface GestureState {
     timeStamp: Date;
-};
+}
 
 export interface MultiTouchGestureState extends GestureState {
     initialCenterClientX: number;
@@ -939,7 +939,7 @@ export type NavigationTransitionStyleConfig = {
   scaleOutput: number | number[];
   translateXOutput: number | number[];
   translateYOutput: number | number[];
-}
+};
 
 // NOTE: Experimental navigator only
 export type CustomNavigatorSceneConfig = {
@@ -953,7 +953,7 @@ export type CustomNavigatorSceneConfig = {
   hideShadow?: boolean;
   // Optionally flip the visual order of the last two scenes
   presentBelowPrevious?: boolean;
-}
+};
 
 export interface NavigatorProps extends CommonProps {
     renderScene?: (route: NavigatorRoute) => JSX.Element;
@@ -1026,7 +1026,7 @@ export module Animated {
     export interface InterpolationConfigType {
         inputRange: number[];
         outputRange: (number | string)[];
-    };
+    }
 
     export type TimingFunction = (value: RX.AnimatedValue, config: TimingAnimationConfig) => CompositeAnimation;
     export var timing: TimingFunction;
@@ -1040,7 +1040,7 @@ export module Animated {
     export type EasingFunction = {
         cssName: string;
         function: (input: number) => number;
-    }
+    };
 
     export interface Easing {
         Default(): EasingFunction;
@@ -1089,7 +1089,7 @@ export type ViewOnLayoutEvent = {
     y: number;
     height: number;
     width: number;
-}
+};
 export interface KeyboardEvent extends SyntheticEvent {
     ctrlKey: boolean;
     altKey: boolean;
@@ -1113,7 +1113,7 @@ interface Element<P> {
 export type Dimensions = {
     width: number;
     height: number;
-}
+};
 
 //
 // Linking

src/common/lodashMini.ts

@@ -21,4 +21,4 @@ export {
     filter,
     pull,
     sortBy
-};
+};

src/ios/Accessibility.ts

@@ -8,14 +8,13 @@
 * React Native announcement API for iOS. 
 */
 
-import _ = require('../native-common/lodashMini');
 import RN = require('react-native');
 
 import { Accessibility as NativeAccessibility } from '../native-common/Accessibility';
 
 interface AnnouncementFinishedPayload {
-    announcement: string,
-    success: boolean
+    announcement: string;
+    success: boolean;
 }
 
 const RetryTimeout = 3000; // 3 seconds
@@ -92,4 +91,4 @@ export class Accessibility extends NativeAccessibility {
     }
 }
 
-export default new Accessibility();
+export default new Accessibility();

src/ios/Linking.ts

@@ -7,8 +7,6 @@
 * iOS-specific implementation for deep linking.
 */
 
-import RN = require('react-native');
-
 import Types = require('../common/Types');
 import { Linking as CommonLinking } from '../native-common/Linking';
 

src/ios/ReactXP.ts

@@ -128,7 +128,7 @@ module ReactXP {
     export import Children = React.Children;
     export var __spread = (React as any).__spread;
     export import DeviceNetworkType = RXInterface.DeviceNetworkType;
-};
+}
 
 export = ReactXP;
 

src/native-common/Accessibility.ts

@@ -8,11 +8,8 @@
 */
 
 import RN = require('react-native');
-import SyncTasks = require('synctasks');
 
 import { Accessibility as CommonAccessibility } from '../common/Accessibility';
-import SubscribableEvent = require('../common/SubscribableEvent');
-import RX = require('../common/Interfaces');
 
 export class Accessibility extends CommonAccessibility {
     protected _isScreenReaderEnabled = false;

src/native-common/AccessibilityUtil.ts

@@ -17,13 +17,13 @@ const liveRegionMap = {
     [Types.AccessibilityLiveRegion.None]: 'none',
     [Types.AccessibilityLiveRegion.Assertive]: 'assertive',
     [Types.AccessibilityLiveRegion.Polite]: 'polite'
-}
+};
 
-// iOS supported map. 
+// iOS supported map.
 const traitsMap = {
     [Types.AccessibilityTrait.None]: 'none',
-    [Types.AccessibilityTrait.Tab]: 'none', // NOTE: Tab trait isn't supported on iOS. Setting it to none, allows us to give it a custom 
-                                            // label. This needs to be done for any custom role, which needs to be supported on iOS. 
+    [Types.AccessibilityTrait.Tab]: 'none', // NOTE: Tab trait isn't supported on iOS. Setting it to none, allows us to give it a custom
+                                            // label. This needs to be done for any custom role, which needs to be supported on iOS.
     [Types.AccessibilityTrait.Button]: 'button',
     [Types.AccessibilityTrait.Link]: 'link',
     [Types.AccessibilityTrait.Header]: 'header',
@@ -40,36 +40,37 @@ const traitsMap = {
     [Types.AccessibilityTrait.StartsMedia]: 'startsMedia',
     [Types.AccessibilityTrait.AllowsDirectInteraction]: 'allowsDirectionInteraction',
     [Types.AccessibilityTrait.PageTurn]: 'pageTurn'
-}
+};
 
 // Android supported map.
 const componentTypeMap = {
     [Types.AccessibilityTrait.None]: 'none',
-    [Types.AccessibilityTrait.Tab]: 'none', // NOTE: Tab component type isn't supported on Android. Setting it to none, allows us to give it a
-                                            // custom label. This needs to be done for any custom role, which needs to be supported on Android. 
+    [Types.AccessibilityTrait.Tab]: 'none', // NOTE: Tab component type isn't supported on Android. Setting it to none, allows us to give
+                                            // it a custom label. This needs to be done for any custom role, which needs to be supported
+                                            // on Android.
     [Types.AccessibilityTrait.Button]: 'button',
     [Types.AccessibilityTrait.Radio_button_checked]: 'radiobutton_checked',
     [Types.AccessibilityTrait.Radio_button_unchecked]: 'radiobutton_unchecked'
-}
+};
 
 export class AccessibilityUtil extends CommonAccessibilityUtil {
     // Converts an AccessibilityTrait to a string, but the returned value is only needed for iOS. Other platforms ignore it. Presence
     // of an AccessibilityTrait.None can make an element non-accessible on Android. We use the override traits if they are present, else
-    // use the deafult trait. 
-    accessibilityTraitToString(overrideTraits: Types.AccessibilityTrait | Types.AccessibilityTrait[], 
+    // use the deafult trait.
+    accessibilityTraitToString(overrideTraits: Types.AccessibilityTrait | Types.AccessibilityTrait[],
         defaultTrait?: Types.AccessibilityTrait): string[] {
         // Check if there are valid override traits. Use them or else fallback to default traits.
         if (!overrideTraits && !defaultTrait) {
             return [];
-        } 
+        }
 
         const traits = _.isArray(overrideTraits) ? overrideTraits : [overrideTraits || defaultTrait];
         return _.compact(_.map(traits, t  => traitsMap[t]));
     }
 
     // Converts an AccessibilityTrait to an accessibilityComponentType string, but the returned value is only needed for Android. Other
-    // platforms ignore it.  
-    accessibilityComponentTypeToString(overrideTraits: Types.AccessibilityTrait | Types.AccessibilityTrait[], 
+    // platforms ignore it.
+    accessibilityComponentTypeToString(overrideTraits: Types.AccessibilityTrait | Types.AccessibilityTrait[],
         defaultTrait?: Types.AccessibilityTrait): string {
         // Check if there are valid override traits. Use them or else fallback to default traits.
         // Max enum value in this array is the componentType for android.
@@ -78,7 +79,7 @@ export class AccessibilityUtil extends CommonAccessibilityUtil {
         }
 
         const combinedTraits = _.isArray(overrideTraits) ? overrideTraits : [overrideTraits || defaultTrait];
-        return componentTypeMap[_.max(_.filter(combinedTraits, t => componentTypeMap.hasOwnProperty(t as any)))]
+        return componentTypeMap[_.max(_.filter(combinedTraits, t => componentTypeMap.hasOwnProperty(t as any)))];
     }
 
     // Converts an AccessibilityLiveRegion to a string, but the return value is only needed for Android. Other platforms ignore it.

src/native-common/App.ts

@@ -7,7 +7,6 @@
 * Native implementation of App API namespace.
 */
 
-import React = require('react');
 import RN = require('react-native');
 
 import { RootView } from './RootView';

src/native-common/Button.tsx

@@ -10,7 +10,7 @@
 import React = require('react');
 import RN = require('react-native');
 
-import Animated from './Animated'
+import Animated from './Animated';
 import AccessibilityUtil from './AccessibilityUtil';
 import MixinUtil = require('../common/MixinUtil');
 import RX = require('../common/Interfaces');
@@ -104,7 +104,7 @@ export class Button extends RX.Button<{}> {
     }
 
     componentWillReceiveProps(nextProps: Types.ButtonProps) {
-        if(nextProps !== this.props) {
+        if (nextProps !== this.props) {
             // If opacity got updated as a part of props update, we need to reflect that in the opacity animation value
            this._setOpacityStyles(nextProps);
         }
@@ -127,7 +127,7 @@ export class Button extends RX.Button<{}> {
         if (!this.props.disabled && this.props.onPressIn) {
             this.props.onPressIn(e);
         }
-    };
+    }
 
     touchableHandleActivePressOut = (e: Types.SyntheticEvent) => {
         if (this._isTouchFeedbackApplicable()) {
@@ -144,27 +144,27 @@ export class Button extends RX.Button<{}> {
         if (!this.props.disabled && this.props.onPressOut) {
             this.props.onPressOut(e);
         }
-    };
+    }
 
     touchableHandlePress = (e: Types.MouseEvent) => {
         if (!this.props.disabled && this.props.onPress) {
             this.props.onPress(e);
         }
-    };
+    }
 
     touchableHandleLongPress = (e: Types.MouseEvent) => {
         if (!this.props.disabled && this.props.onLongPress) {
             this.props.onLongPress(e);
         }
-    };
+    }
 
     touchableGetHighlightDelayMS = () => {
         return 20;
-    };
+    }
 
     touchableGetPressRectOffset = () => {
         return {top: 20, left: 20, right: 20, bottom: 100};
-    };
+    }
 
     focus() {
         // native mobile platforms doesn't have the notion of focus for buttons, so ignore.

src/native-common/Clipboard.ts

@@ -15,13 +15,13 @@ import SyncTasks = require('synctasks');
 export class Clipboard extends RX.Clipboard  {
     public setText(text: string) {
         RN.Clipboard.setString(text);
-    };
+    }
 
     public getText(): SyncTasks.Promise<string> {
         let defer = SyncTasks.Defer<string>();
 
         return SyncTasks.fromThenable(RN.Clipboard.getString());
-    };
-};
+    }
+}
 
 export default new Clipboard();

src/native-common/FrontLayerViewManager.tsx

@@ -182,7 +182,7 @@ export class FrontLayerViewManager {
 
     private _onRequestClose = () => {
         this._dismissActivePopup();
-    };
+    }
 
     private _dismissActivePopup(): void {
         // Dismiss any currently visible popup:

src/native-common/GestureView.tsx

@@ -22,7 +22,7 @@ enum GestureType {
     Pan,
     PanVertical,
     PanHorizontal
-};
+}
 
 // These threshold values were chosen empirically.
 const _pinchZoomPixelThreshold = 3;

src/native-common/Image.tsx

@@ -124,7 +124,7 @@ export class Image extends RX.Image<{}> {
         if (this.props.onLoad) {
             this.props.onLoad({ width: this._nativeImageWidth, height: this._nativeImageHeight });
         }
-    };
+    }
 
     private _onError = (e: React.SyntheticEvent) => {
         if (!this._isMounted) {
@@ -135,7 +135,7 @@ export class Image extends RX.Image<{}> {
             const event = e.nativeEvent as any;
             this.props.onError(new Error(event.error));
         }
-    };
+    }
 
     // Note: This works only if you have an onLoaded handler and wait for the image to load.
     getNativeWidth(): number {

src/native-common/Input.ts

@@ -19,6 +19,6 @@ export class Input extends RX.Input {
             return this.backButtonEvent.fire();
         });
     }
-};
+}
 
 export default new Input();

src/native-common/Link.tsx

@@ -42,7 +42,7 @@ export class Link extends RX.Link<{}> {
         if (this.props.url) {
             Linking.openUrl(this.props.url);
         }
-    };
+    }
 }
 
 export default Link;

src/native-common/Linking.ts

@@ -30,7 +30,7 @@ export class Linking extends CommonLinking {
                 defer.reject({
                     code: Types.LinkingErrorCode.NoAppFound,
                     url: url,
-                    description: "No app found to handle url: " + url
+                    description: 'No app found to handle url: ' + url
                 } as Types.LinkingErrorInfo);
             } else {
                 return RN.Linking.openURL(url);

src/native-common/Modal.ts

@@ -8,11 +8,10 @@
 */
 
 import React = require('react');
-import RN = require('react-native');
 
 import { default as FrontLayerViewManager } from './FrontLayerViewManager';
 import RX = require('../common/Interfaces');
-import Styles from './Styles';
+
 import Types= require('../common/Types');
 
 export class Modal extends RX.Modal {

src/native-common/ModalContainer.tsx

@@ -10,7 +10,6 @@
 import React = require('react');
 import RN = require('react-native');
 
-import RX = require('../common/Interfaces');
 import Types= require('../common/Types');
 
 const _styles = {

src/native-common/NavigatorCommon.ts

@@ -8,7 +8,6 @@
 * We need this class to avoid circular references between Navigator and NavigatorDelegates.
 */
 
-import React = require('react');
 import RN = require('react-native');
 import RX = require('../common/Interfaces');
 

src/native-common/NavigatorExperimentalDelegate.tsx

@@ -215,11 +215,11 @@ export class NavigatorExperimentalDelegate extends NavigatorDelegate {
         }
         // no route? return empty scene
         return <RN.View />;
-    };
+    }
 
     handleBackPress(): void {
         this._owner.pop();
-    };
+    }
 
     processCommand(commandQueue: NavigationCommand[]): void {
         // Return if nothing to process

src/native-common/NavigatorStandardDelegate.tsx

@@ -53,7 +53,7 @@ export class NavigatorStandardDelegate extends NavigatorDelegate {
         }
         // no route? return empty scene
         return <RN.View />;
-    };
+    }
 
     // Try to remove this handling by scheduling as it's done in experimental
     handleBackPress(): void {
@@ -87,7 +87,7 @@ export class NavigatorStandardDelegate extends NavigatorDelegate {
                     return RN.Navigator.SceneConfigs.FloatFromRight;
             }
         }
-    };
+    }
 
     private _onRouteWillFocus = (route: Types.NavigatorRoute): void => {
         if (!this._navigator) {
@@ -117,13 +117,13 @@ export class NavigatorStandardDelegate extends NavigatorDelegate {
                 this._owner.props.navigateBackCompleted();
             }
         }
-    };
+    }
 
     private _onRouteDidFocus = (route: Types.NavigatorRoute): void => {
         if (this._owner.props.transitionCompleted) {
             this._owner.props.transitionCompleted();
         }
-    };
+    }
 
     processCommand(commandQueue: NavigationCommand[]): void {
         // Return if nothing to process

src/native-common/Network.ts

@@ -44,17 +44,17 @@ export class Network extends RX.Network {
 
     private static _NativeNetworkTypeToDeviceNetworkType(networkType: string): RX.DeviceNetworkType {
         switch (networkType) {
-            case "UNKNOWN":
+            case 'UNKNOWN':
                 return RX.DeviceNetworkType.UNKNOWN;
-            case "NONE":
+            case 'NONE':
                 return RX.DeviceNetworkType.NONE;
-            case "WIFI":
+            case 'WIFI':
                 return RX.DeviceNetworkType.WIFI;
-            case "MOBILE_2G":
+            case 'MOBILE_2G':
                 return RX.DeviceNetworkType.MOBILE_2G;
-            case "MOBILE_3G":
+            case 'MOBILE_3G':
                 return RX.DeviceNetworkType.MOBILE_3G;
-            case "MOBILE_4G":
+            case 'MOBILE_4G':
                 return RX.DeviceNetworkType.MOBILE_4G;
         }
 

src/native-common/Picker.tsx

@@ -29,6 +29,6 @@ export class Picker extends RX.Picker {
     onValueChange = (itemValue: any, itemPosition: number) => {
         this.props.onValueChange(itemValue, itemPosition);
     }
-};
+}
 
 export default Picker;

src/native-common/Popup.ts

@@ -7,11 +7,8 @@
 * React Native implementation of the cross-platform Popup abstraction.
 */
 
-import React = require('react');
-
 import { default as FrontLayerViewManager } from './FrontLayerViewManager';
 import RX = require('../common/Interfaces');
-import Styles from './Styles';
 import Types = require('../common/Types');
 
 export class Popup extends RX.Popup {

src/native-common/Profiling.ts

@@ -8,7 +8,7 @@
 */
 
 import RN = require('react-native');
-import RX = require('../common/Interfaces');
+
 import { Profiling as CommonProfiling } from '../common/Profiling';
 
 export class Profiling extends CommonProfiling {

src/native-common/RootView.tsx

@@ -67,7 +67,7 @@ export class RootView extends React.Component<{}, RootViewState> {
                 this.setState({
                     announcementText: announcement
                 });
-        })
+        });
 
         this.setState(this._getStateFromStore());
     }
@@ -86,9 +86,9 @@ export class RootView extends React.Component<{}, RootViewState> {
 
         // When showing a modal/popup we want to hide the mainView shown behind from an accessibility
         // standpoint to ensure that it won't get the focus and the screen reader's attention.
-        const importantForAccessibility = (modalLayerView || popupLayerView) ? 
-            AccessibilityUtil.importantForAccessibilityToString(Types.ImportantForAccessibility.NoHideDescendants) :
-            undefined; // default
+        const importantForAccessibility   =  (modalLayerView  ||  popupLayerView)  ? 
+            AccessibilityUtil.importantForAccessibilityToString(Types.ImportantForAccessibility.NoHideDescendants)   :
+            undefined;  // default
 
         return (
             <RN.Animated.View style={ _styles.rootViewStyle }>

src/native-common/ScrollView.tsx

@@ -93,7 +93,7 @@ export class ScrollView extends ViewBase<Types.ScrollViewProps, {}> implements R
         if (this.props.onScroll) {
             this.props.onScroll(this._scrollTop, this._scrollLeft);
         }
-    };
+    }
 
     setScrollTop(scrollTop: number, animate: boolean): void {
         if (this._nativeView) {

src/native-common/StyleLeakDetector.ts

@@ -9,7 +9,6 @@
 
 import RN = require('react-native');
 
-import RX = require('../common/Interfaces');
 import { StyleLeakDetector as CommonStyleLeakDetector } from '../common/StyleLeakDetector';
 
 export class StyleLeakDetector extends CommonStyleLeakDetector {
@@ -40,6 +39,6 @@ export class StyleLeakDetector extends CommonStyleLeakDetector {
 
         return RN.Platform.OS === 'windows';
     }
-};
+}
 
 export default new StyleLeakDetector();

src/native-common/Text.tsx

@@ -52,9 +52,11 @@ export class Text extends RX.Text<{}> {
     }
 
     focus() {
+        // No-op
     }
 
     blur() {
+        // No-op
     }
 }
 

src/native-common/TextInput.tsx

@@ -88,7 +88,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
         if (this.props.onFocus) {
             this.props.onFocus(e);
         }
-    };
+    }
 
     private _onBlur = (e: Types.FocusEvent) => {
         this.setState({ isFocused: false });
@@ -96,7 +96,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
         if (this.props.onBlur) {
             this.props.onBlur(e);
         }
-    };
+    }
 
     private _onChangeText = (newText: string) => {
         this.setState({ inputValue: newText });
@@ -104,7 +104,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
         if (this.props.onChangeText) {
             this.props.onChangeText(newText);
         }
-    };
+    }
 
     private _onSelectionChange = (selEvent: React.SyntheticEvent) => {
         let selection: { start: number, end: number } =
@@ -122,7 +122,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
         }
 
         this.forceUpdate();
-    };
+    }
 
     private _onKeyPress = (e: React.KeyboardEvent) => {
         if (this.props.onKeyPress) {
@@ -165,7 +165,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
 
             this.props.onKeyPress(keyEvent);
         }
-    };
+    }
 
     private _onScroll = (e: React.UIEvent) => {
         if (this.props.onScroll) {

src/native-common/VIewBase.tsx

@@ -34,7 +34,7 @@ export abstract class ViewBase<P extends Types.ViewProps, S> extends RX.ViewBase
 
     protected _setNativeView = (view: RN.View) => {
         this._nativeView = view;
-    };
+    }
 
     protected _getStyles(props: Types.ViewProps): Types.ViewStyleRuleSet {
         // If this platform uses an explicit default view style, push it on to
@@ -61,7 +61,7 @@ export abstract class ViewBase<P extends Types.ViewProps, S> extends RX.ViewBase
                 this._layoutEventValues = layoutEventValues;
             }
         }
-    };
+    }
 
     focus() {
         // native mobile platforms doesn't have the notion of focus for Views, so ignore.

src/native-common/View.tsx

@@ -8,12 +8,12 @@
 */
 
 import _ = require('./lodashMini');
-import assert = require('assert');
+
 import React = require('react');
 import RN = require('react-native');
 
 import AccessibilityUtil from './AccessibilityUtil';
-import { ImportantForAccessibilityMap } from '../common/AccessibilityUtil';
+
 import AnimateListEdits from './listAnimations/AnimateListEdits';
 import Button from './Button';
 import Types = require('../common/Types');
@@ -44,8 +44,8 @@ export class View extends ViewBase<Types.ViewProps, {}> {
 
         const importantForAccessibility = AccessibilityUtil.importantForAccessibilityToString(props.importantForAccessibility);
         const accessibilityLabel = props.accessibilityLabel || props.title;
-        // Set accessibility props on Native only if we have valid importantForAccessibility value or accessibility label or if this
-        // view is not a button.
+        // Set accessibility props on Native only if we have valid importantForAccessibility value or accessibility label or
+        // if this view is not a button.
         // For a button, we let the Button component compute its own accessibility props.
         const shouldSetAccessibilityProps = this._internalProps && !this._isButton(props) &&
             !!(importantForAccessibility || accessibilityLabel);
@@ -54,7 +54,8 @@ export class View extends ViewBase<Types.ViewProps, {}> {
             this._internalProps.importantForAccessibility = importantForAccessibility;
             this._internalProps.accessibilityLabel = accessibilityLabel;
             this._internalProps.accessibilityTraits = AccessibilityUtil.accessibilityTraitToString(props.accessibilityTraits);
-            this._internalProps.accessibilityComponentType = AccessibilityUtil.accessibilityComponentTypeToString(props.accessibilityTraits);
+            this._internalProps.accessibilityComponentType = AccessibilityUtil.accessibilityComponentTypeToString(
+                props.accessibilityTraits);
         }
 
         if (props.onLayout) {

src/native-common/lodashMini.ts

@@ -37,4 +37,4 @@ export {
     max,
     omit,
     union
-};
+};

src/web/Accessibility.ts

@@ -8,10 +8,7 @@
 * screen reader.
 */
 
-import SyncTasks = require('synctasks');
-
 import { Accessibility as CommonAccessibility } from '../common/Accessibility';
-import RX = require('../common/Interfaces');
 
 export class Accessibility extends CommonAccessibility {
     // Calling this API on web has no effect.

src/web/AccessibilityUtil.ts

@@ -10,7 +10,7 @@
 
 import _ = require('./utils/lodashMini');
 
-import { AccessibilityUtil as CommonAccessibiltiyUtil, ImportantForAccessibilityMap } from '../common/AccessibilityUtil';
+import { AccessibilityUtil as CommonAccessibiltiyUtil } from '../common/AccessibilityUtil';
 import Types = require('../common/Types');
 
 // Map of accessibility trait to an aria role attribute.  
@@ -38,14 +38,14 @@ const roleMap = {
     [Types.AccessibilityTrait.Log]: 'log',
     [Types.AccessibilityTrait.Status]: 'status',
     [Types.AccessibilityTrait.Dialog]: 'dialog'
-} 
+}; 
 
 // Map of accesssibility live region to an aria-live property.
 const liveRegionMap = {
     [Types.AccessibilityLiveRegion.None]: 'off',
     [Types.AccessibilityLiveRegion.Assertive]: 'assertive',
     [Types.AccessibilityLiveRegion.Polite]: 'polite'
-}
+};
 
 export class AccessibilityUtil extends CommonAccessibiltiyUtil {
     // Web equivalent value for aria-live property.
@@ -64,7 +64,7 @@ export class AccessibilityUtil extends CommonAccessibiltiyUtil {
         let combinedTraits: Types.AccessibilityTrait[] = defaultTrait ? [defaultTrait] : [];
 
         if (traits) {
-            combinedTraits = _.union(combinedTraits, _.isArray(traits) ? traits : [traits])
+            combinedTraits = _.union(combinedTraits, _.isArray(traits) ? traits : [traits]);
         }
 
         // Max enum value in this array of traits is role for web. Return corresponding
@@ -76,7 +76,7 @@ export class AccessibilityUtil extends CommonAccessibiltiyUtil {
 
     accessibilityTraitToAriaSelected(traits: Types.AccessibilityTrait | Types.AccessibilityTrait[]) {
         // Walk through each trait and check if there's a selected trait. Return if one is found.
-        if(traits && _.isArray(traits) && traits.indexOf(Types.AccessibilityTrait.Tab) !== -1) {
+        if (traits && _.isArray(traits) && traits.indexOf(Types.AccessibilityTrait.Tab) !== -1) {
             return traits.indexOf(Types.AccessibilityTrait.Selected) !== -1 ? true : undefined;
         }
         
@@ -86,4 +86,4 @@ export class AccessibilityUtil extends CommonAccessibiltiyUtil {
     }
 }
 
-export default new AccessibilityUtil();
+export default new AccessibilityUtil();

src/web/ActivityIndicator.tsx

@@ -640,7 +640,7 @@ export class ActivityIndicator extends RX.ActivityIndicator<ActivityIndicatorSta
         var style = document.createElement('style') as any;
 
         style.type = 'text/css';
-        if (style.styleSheet){
+        if (style.styleSheet) {
             style.styleSheet.cssText = _activityIndicatorCss;
         } else {
             style.appendChild(document.createTextNode(_activityIndicatorCss));

src/web/Animated.tsx

@@ -725,7 +725,7 @@ function createAnimatedComponent<PropsType extends Types.CommonProps>(Component:
         }
 
         // Update the component's display name for easy debugging in react devtools extension
-        static displayName = `Animated.${Component.displayName || Component.name || "Component"}`;
+        static displayName = `Animated.${Component.displayName || Component.name || 'Component'}`;
     }
 
     return AnimatedComponentGenerated;

src/web/App.ts

@@ -7,10 +7,6 @@
 * Implements App interface for ReactXP.
 */
 
-import React = require('react');
-import ReactDOM = require('react-dom');
-
-import { RootView } from './RootView';
 import RX = require('../common/Interfaces');
 import Types = require('../common/Types');
 

src/web/Button.tsx

@@ -29,7 +29,7 @@ let _styles = {
         backgroundColor: 'transparent',
         borderColor: 'transparent',
         textAlign: 'left',
-        borderWidth:'0'
+        borderWidth: '0'
     },
     disabled: {
         opacity: 0.5
@@ -51,7 +51,7 @@ export class Button extends RX.Button<void> {
         const ariaRole = AccessibilityUtil.accessibilityTraitToString(this.props.accessibilityTraits, 
             _defaultAccessibilityTrait);
         const ariaSelected = AccessibilityUtil.accessibilityTraitToAriaSelected(this.props.accessibilityTraits);
-        const isAriaHidden = AccessibilityUtil.isHidden(this.props.importantForAccessibility)
+        const isAriaHidden = AccessibilityUtil.isHidden(this.props.importantForAccessibility);
 
         // NOTE: We use tabIndex=0 to support focus.
         return (

src/web/Clipboard.ts

@@ -17,7 +17,7 @@ export class Clipboard extends RX.Clipboard {
         document.body.appendChild(node);
         Clipboard._copyNode(node);
         document.body.removeChild(node);
-    };
+    }
 
     public getText(): SyncTasks.Promise<string> {
         // Not supported in web platforms. This should can be only handled in the paste event handlers
@@ -62,6 +62,6 @@ export class Clipboard extends RX.Clipboard {
         document.execCommand('copy');
         selection.removeAllRanges();
     }
-};
+}
 
 export default new Clipboard();

src/web/CustomScrollbar.ts

@@ -223,7 +223,7 @@ export class Scrollbar {
         var style = document.createElement('style') as any;
 
         style.type = 'text/css';
-        if (style.styleSheet){
+        if (style.styleSheet) {
             style.styleSheet.cssText = _customScrollbarCss;
         } else {
             style.appendChild(document.createTextNode(_customScrollbarCss));
@@ -483,12 +483,12 @@ export class Scrollbar {
     }
 
     init(options?: ScrollbarOptions) {
-        if (options) { 
+        if (options) {
             this._hasHorizontal = options.horizontal;
 
             // Only if vertical is explicitly false as opposed to null, set it to false (default is true)
             if (options.vertical === false) {
-                this._hasVertical = options.vertical; 
+                this._hasVertical = options.vertical;
             }
         }
         Scrollbar._installStyleSheet();
@@ -510,6 +510,6 @@ export class Scrollbar {
         this._verticalBar = null;
         this._horizontalBar = null;
     }
-};
+}
 
 export default Scrollbar;

src/web/FrontLayerViewManager.tsx

@@ -11,8 +11,7 @@ import React = require('react');
 import ReactDOM = require('react-dom');
 
 import { RootView } from './RootView';
-import RX = require('../common/Interfaces');
-import ScrollViewConfig from './ScrollViewConfig';
+
 import Types = require('../common/Types');
 
 export class FrontLayerViewManager {
@@ -63,12 +62,12 @@ export class FrontLayerViewManager {
 
     private _shouldPopupBeDismissed = (options: Types.PopupOptions): boolean => {
         return this._activePopupOptions &&
-            this._activePopupOptions.getAnchor() == options.getAnchor();
+            this._activePopupOptions.getAnchor() === options.getAnchor();
     }
 
-
     showPopup(options: Types.PopupOptions, popupId: string, showDelay?: number): boolean {
-        // If options.dismissIfShown is true, calling this methos will behave like a toggle. On one call, it will open the popup. If it is called when pop up is seen, it will dismiss the popup.        
+        // If options.dismissIfShown is true, calling this methos will behave like a toggle. On one call, it will open the popup.
+        // If it is called when pop up is seen, it will dismiss the popup.
         // If options.dismissIfShown is false, we will simply show the popup always.
         if (options.dismissIfShown) {
             if (this._shouldPopupBeDismissed(options)) {
@@ -150,8 +149,8 @@ export class FrontLayerViewManager {
         let rootView = (
             <RootView
                 mainView={ this._mainView }
-                keyBoardFocusOutline={ this._mainView.props.keyBoardFocusOutline } 
-                mouseFocusOutline={ this._mainView.props.mouseFocusOutline }            
+                keyBoardFocusOutline={ this._mainView.props.keyBoardFocusOutline }
+                mouseFocusOutline={ this._mainView.props.mouseFocusOutline }
                 modal={ topModal }
                 activePopupOptions={ this._activePopupShowDelay > 0 ? null : this._activePopupOptions }
                 autoDismiss={ this._activePopupAutoDismiss }

src/web/GestureView.tsx

@@ -38,7 +38,7 @@ enum GestureType {
     Pan,
     PanVertical,
     PanHorizontal
-};
+}
 
 let _idCounter = 1;
 
@@ -157,7 +157,7 @@ export class GestureView extends RX.GestureView<{}> {
             this._reportDelayedTap();
             this._startDoubleTapTimer(e);
         }
-    };
+    }
 
     private _detectGestureType = (gestureState: Types.PanGestureState) => {
         // we need to lock gesture type until it's completed
@@ -251,7 +251,7 @@ export class GestureView extends RX.GestureView<{}> {
 
             this.props.onScrollWheel(scrollWheelEvent);
         }
-    };
+    }
 
     private _calcDistance(dx: number, dy: number) {
         return Math.sqrt(dx * dx + dy * dy);

src/web/Image.tsx

@@ -41,7 +41,7 @@ export interface ImageState {
 
 export interface ImageContext {
     isRxParentAText?: boolean;
-};
+}
 
 interface XhrBlobUrlCacheEntry {
     xhrBlobUrl: string;
@@ -382,7 +382,7 @@ export class Image extends RX.Image<ImageState> {
         if (this.props.onLoad) {
             this.props.onLoad({ width: this._nativeImageWidth, height: this._nativeImageHeight });
         }
-    };
+    }
 
     private _imgOnError = () => {
         this._onError();
@@ -402,7 +402,7 @@ export class Image extends RX.Image<ImageState> {
         if (this.props.onError) {
             this.props.onError(err);
         }
-    };
+    }
 
     private _onMouseUp = (e: Types.MouseEvent) => {
         if (e.button === 0) {
@@ -413,7 +413,7 @@ export class Image extends RX.Image<ImageState> {
                 onClick(e);
             }
         }
-    };
+    }
 
     // Note: This works only if you have an onLoaded handler and wait for the image to load.
     getNativeWidth(): number {

src/web/Input.ts

@@ -25,6 +25,6 @@ export class Input extends RX.Input {
             e.stopPropagation();
         }
     }
-};
+}
 
 export default new Input();

src/web/Modal.ts

@@ -11,7 +11,6 @@ import React = require('react');
 
 import { default as FrontLayerViewManager } from './FrontLayerViewManager';
 import RX = require('../common/Interfaces');
-import Styles from './Styles';
 import Types = require('../common/Types');
 
 export class Modal extends RX.Modal {

src/web/NavigatorSceneConfigFactory.ts

@@ -32,7 +32,7 @@ export interface TransitionStyle {
     scaleX?: (progress: number) => number;
     scaleY?: (progress: number) => number;
     scaleZ?: (progress: number) => number;
-};
+}
 
 // Defined style interpolators for each transition type
 class SceneConfigStyles {
@@ -216,5 +216,5 @@ export class NavigatorSceneConfigFactory {
                 // Float from Right
                 return new NavigatorSceneConfig(SceneConfigStyles.fromTheLeft, SceneConfigStyles.fadeToTheRight);
         }
-    };
+    }
 }

src/web/Popup.ts

@@ -7,11 +7,8 @@
 * Web-specific implementation of the cross-platform Popup abstraction.
 */
 
-import React = require('react');
-
 import { default as FrontLayerViewManager } from './FrontLayerViewManager';
 import RX = require('../common/Interfaces');
-import Styles from './Styles';
 import Types = require('../common/Types');
 
 export class Popup extends RX.Popup {

src/web/ReactXP.ts

@@ -133,7 +133,7 @@ module ReactXP {
     export var Children = React.Children;
     export var __spread = (React as any).__spread;
     export import DeviceNetworkType = RXInterface.DeviceNetworkType;
-};
+}
 
 export = ReactXP;
 
@@ -155,7 +155,6 @@ var _rxImplementsRxInterface: RXInterface.ReactXP = ReactXP;
 
 /*
 
-
 var rx = module.exports;
 Object.keys(rx)
     .filter(key => rx[key] && rx[key].prototype instanceof React.Component && !rx[key].displayName)

src/web/RootView.tsx

@@ -29,7 +29,7 @@ export interface RootViewProps {
     autoDismissDelay?: number;
     onDismissPopup?: () => void;
     keyBoardFocusOutline?: string;
-    mouseFocusOutline?: string
+    mouseFocusOutline?: string;
 }
 
 export interface RootViewState {
@@ -107,7 +107,7 @@ export class RootView extends React.Component<RootViewProps, RootViewState> {
                 this.setState({
                     announcementText: announcement
                 });
-        })
+        });
 
         this.state = this._getInitialState();
     }
@@ -309,8 +309,9 @@ export class RootView extends React.Component<RootViewProps, RootViewState> {
                             }, 500);
                         }
 
-                        // If the popup is meant to behave like a toggle, we should not dimiss the popup from here
-                        // since the event came from the anchor/container of the popup. The popup will be dismissed during the click handling of the anchor/container.
+                        // If the popup is meant to behave like a toggle, we should not dimiss the popup from here since the event came
+                        // from the anchor/container of the popup. The popup will be dismissed during the click handling of the
+                        // anchor/container.
                         if (this.props.activePopupOptions.dismissIfShown) {
                             return;
                         }
@@ -319,9 +320,9 @@ export class RootView extends React.Component<RootViewProps, RootViewState> {
                 this._dismissPopup();
             });
         }
-    };
+    }
 
-    private _determineIfClickOnElement(elementReference: React.Component<any,any>, eventSource: Element): boolean {
+    private _determineIfClickOnElement(elementReference: React.Component<any, any>, eventSource: Element): boolean {
         const element = ReactDOM.findDOMNode<HTMLElement>(elementReference);
         const isClickOnElement = element && element.contains(eventSource);
         return isClickOnElement;
@@ -338,7 +339,7 @@ export class RootView extends React.Component<RootViewProps, RootViewState> {
             this.setState({ focusClass: this.props.keyBoardFocusOutline });
         }
         Input.dispatchKeyDown(e as any);
-    };
+    }
 
     private _onKeyUp = (e: KeyboardEvent) => {
         if (this.props.activePopupOptions && (e.keyCode === ESC_KEY_CODE)) {
@@ -350,7 +351,7 @@ export class RootView extends React.Component<RootViewProps, RootViewState> {
         }
 
         Input.dispatchKeyUp(e as any);
-    };
+    }
 
     private _onMouseEnter(e: React.MouseEvent) {
         this.setState({

src/web/ScrollViewConfig.ts

@@ -18,6 +18,6 @@ export class ScrollViewConfig {
     useCustomScrollbars(): boolean {
         return this._useCustomScrollbars;
     }
-};
+}
 
 export default new ScrollViewConfig();

src/web/StatusBar.tsx

@@ -33,6 +33,6 @@ export class StatusBar extends RX.StatusBar {
     setTranslucent(translucent: boolean): void {
         // Nothing to do on the web
     }
-};
+}
 
 export default new StatusBar();

src/web/TextInput.tsx

@@ -129,7 +129,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
         }
 
         this._checkSelectionChanged();
-    };
+    }
 
     private _onInput = (e: React.FormEvent) => {
         if (!e.defaultPrevented) {
@@ -154,7 +154,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
                 this._checkSelectionChanged();
             }
         }
-    };
+    }
 
     private _checkSelectionChanged = () => {
         let el = ReactDOM.findDOMNode<HTMLInputElement>(this);
@@ -168,7 +168,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
                 }
             }
         }
-    };
+    }
 
     private _onKeyDown = (e: Types.KeyboardEvent) => {
         // Generate a "submit editing" event if the user
@@ -188,7 +188,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
         }
 
         this._checkSelectionChanged();
-    };
+    }
 
     private _onScroll = (e: Types.UIEvent) => {
         if (this.props.onScroll) {

src/web/View.tsx

@@ -38,7 +38,7 @@ if (typeof document !== 'undefined') {
 
 export interface ViewContext {
     isRxParentAText?: boolean;
-};
+}
 
 export class View extends ViewBase<Types.ViewProps, {}> {
     static contextTypes: React.ValidationMap<any> = {

src/web/animated/executeTransition.ts

@@ -43,6 +43,7 @@ export function executeTransition(element: HTMLElement, transitions: ITransition
         // Resolve styles. This is a trick to force the browser to refresh the
         // computed styles. Without this, it won't pick up the new "from" value
         // that we just set above.
+        // tslint:disable-next-line
         getComputedStyle(element).opacity;
 
         // TODO: Cross-browser equivalent of 'transition' style (e.g. vendor prefixed).

src/web/listAnimations/MonitorListEdits.tsx

@@ -99,7 +99,7 @@ enum ComponentPhaseEnum {
     // The component is in the middle of playing an animation. The component should not
     // rerender while in this state.
     animating
-};
+}
 
 // Pieces of information we calculate in componentWillUpdate and consume in componentDidUpdate.
 // More specifically, we calculate animation information in componentWillUpdate and start the

src/web/utils/MouseResponder.ts

@@ -33,7 +33,7 @@ export interface MouseResponderConfig {
     shouldBecomeFirstResponder?: (event: MouseEvent, gestureState: Types.PanGestureState) => boolean;
     onMove?: (event: MouseEvent, gestureState: Types.PanGestureState) => void;
     onTerminate?: (event: MouseEvent, gestureState: Types.PanGestureState) => void;
-};
+}
 
 export interface MouseResponderSubscription {
     dispose(): void;

src/web/utils/lodashMini.ts

@@ -65,4 +65,4 @@ export {
     remove,
     throttle,
     union
-};
+};

src/windows/ReactXP.ts

@@ -124,7 +124,7 @@ module ReactXP {
     export import Children = React.Children;
     export var __spread = (React as any).__spread;
     export import DeviceNetworkType = RXInterface.DeviceNetworkType;
-};
+}
 
 export = ReactXP;
 

tslint.json

@@ -7,7 +7,6 @@
     "forin": true,
     "indent": [true, "spaces"],
     "label-position": true,
-    "label-undefined": true,
     "max-line-length": [ true, 140 ],
     "no-arg": true,
     "no-bitwise": false,
@@ -21,23 +20,19 @@
     "no-consecutive-blank-lines":  true,
     "no-construct": true,
     "no-debugger": true,
-    "no-duplicate-key": true,
     "no-duplicate-variable": true,
     "no-empty": true,
     "no-eval": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": false,
     "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-unreachable": true,
-    "no-use-before-declare": true,
     "one-line": [true,
         "check-open-brace",
         "check-catch",
         "check-else",
         "check-whitespace"
     ],
-    "quotemark": [true, "single"],
+    "quotemark": [true, "single", "jsx-single"],
     "radix": true,
     "semicolon": true,
     "triple-equals": [true, "allow-null-check"],