[WIP] Typescript conversion

.eslintrc

@@ -10,6 +10,10 @@
     "jest": true
   },
 
+  "ignore": [
+    "build/**/*.js"
+  ],
+
   "plugins": [
     "react",
     "flow-vars",

.vscode/settings.json

@@ -31,5 +31,6 @@
     // Because we use Flow - see https://github.com/flowtype/flow-for-vscode#setup
     "javascript.validate.enable": false,
     "clang.compilationDatabase": "${workspaceRoot}/Example/compile_commands.json",
-    "flow.useNPMPackagedFlow": true
-}
+    "flow.useNPMPackagedFlow": true,
+    "typescript.tsdk": "./node_modules/typescript/lib"
+  }

.vscode/tasks.json

@@ -1,14 +1,32 @@
 {
   "version": "0.1.0",
-  "command": "npm",
+  "command": "sh",
+  "args": ["-c"],
   "isShellCommand": true,
-  "showOutput": "always",
+  "showOutput": "silent",
   "suppressTaskName": true,
   "tasks": [
     {
       "taskName": "Start Packager and Storybook Server",
       "isBuildCommand": true,
-      "args": ["start"]
+      "args": ["npm start"]
+    },
+    {
+      "taskName": "Start Typescript Compiler",
+      "isBuildCommand": true,
+      "args": ["tsc"],
+      "problemMatcher": [
+        "$tsc"
+      ]
+    },
+    {
+      "taskName": "Start Typescript Compiler (in watch mode)",
+      "isBuildCommand": true,
+      "args": ["tsc --watch"],
+      "isWatching": true,
+      "problemMatcher": [
+        "$tsc-watch"
+      ]
     }
-  ]
+ ]
 }

Example/Emission/index.ios.js

@@ -1,6 +1,2 @@
-/* @flow */
-'use strict';
-
 import 'emission';
-import './storybook';
 

Example/EmissionTests/TestApps.js

@@ -1,24 +1,21 @@
-/* @flow */
-'use strict';
-
-import Emission from 'emission';
-import React from 'react';
-import ReactNative from 'react-native';
-const { View } = ReactNative;
-const { TestModule } = ReactNative.NativeModules;
+import Emission from 'emission'
+import React from 'react'
+import ReactNative from 'react-native'
+const { View } = ReactNative
+const { TestModule } = ReactNative.NativeModules
 
 class OpaqueImageViewTest extends React.Component {
   assert() {
-    TestModule.verifySnapshot(TestModule.markTestPassed);
+    TestModule.verifySnapshot(TestModule.markTestPassed)
   }
 
   render() {
     return (
       <View style={this.props.containerStyle}>
         <Emission.Components.OpaqueImageView {...this.props.imageView} onLoad={this.assert} />
       </View>
-    );
+    )
   }
 }
 
-ReactNative.AppRegistry.registerComponent('OpaqueImageView', () => OpaqueImageViewTest);
+ReactNative.AppRegistry.registerComponent('OpaqueImageView', () => OpaqueImageViewTest)

dangerfile.js

@@ -1,5 +1,3 @@
-/* @flow */
-
 import { danger, fail, warn } from 'danger'
 import { includes } from 'lodash'
 
@@ -26,7 +24,7 @@ if (packageChanged && !lockfileChanged) {
 
 const someoneAssigned = danger.github.pr.assignee
 if (someoneAssigned === null) {
-  fail('Please assign someone to merge this PR, and optionally include people who should review.');
+  fail('Please assign someone to merge this PR, and optionally include people who should review.')
 }
 
 // Danger JS doesn't support warn yet.

index.ios.js

@@ -1,12 +1,9 @@
-/* @flow */
-'use strict'
+import Containers from './build/lib/containers'
+import Components from './build/lib/components'
+import Routes from './build/lib/relay/routes'
 
-import Containers from './lib/containers'
-import Components from './lib/components'
-import Routes from './lib/relay/routes'
-
-import './lib/relay/config'
-import './lib/app_registry'
+import './build/lib/relay/config'
+import './build/lib/app_registry'
 
 export default {
   Containers,

package.json

@@ -12,20 +12,22 @@
     "lint": "eslint ./lib ./test",
     "fixlint": "eslint ./lib ./test --fix",
     "start": "npm run clean-example && concurrently --kill-others 'npm run start-packager' 'npm run storybook'",
-    "start-packager": "cd node_modules/react-native && npm start -- --reset-cache",
+    "start-packager": "node node_modules/react-native/local-cli/cli.js start --config rn-cli.config.js",
     "storybook": "storybook start -p 9001",
     "sync-colors": "cd externals/elan && git fetch && git checkout origin/master && cp components/lib/variables/colors.json ../../data",
     "sync-externals": "npm run-script sync-schema && npm run-script sync-colors",
     "sync-schema": "cd externals/metaphysics && git fetch && git checkout origin/master && npm install && npm run dump-schema -- ../../data && rm -rf node_modules",
     "test": "jest",
     "testing": "jest --watch",
-    "rndebugger": "REACT_DEBUGGER=\"open 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args\" npm start"
+    "rndebugger": "REACT_DEBUGGER=\"open 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args\" npm start",
+    "ios": "node node_modules/react-native/local-cli/cli.js run-ios"
   },
   "jest": {
     "preset": "jest-react-native",
     "testPathIgnorePatterns": [
       "\\.snap$",
-      "/node_modules/"
+      "/node_modules/",
+      "/src/"
     ]
   },
   "repository": {
@@ -54,10 +56,16 @@
     "react-native": "0.34.1",
     "react-native-parallax-scroll-view": "https://github.com/orta/react-native-parallax-scroll-view",
     "react-relay": "https://github.com/alloy/relay/releases/download/v0.9.3/react-relay-0.9.3.tgz",
-    "remove-markdown": "0.1.0"
+    "remove-markdown": "0.1.0",
+    "typescript": "^2.1.5"
   },
   "devDependencies": {
     "@kadira/react-native-storybook": "^1.12.6",
+    "@types/jest": "^18.1.1",
+    "@types/lodash": "^4.14.52",
+    "@types/node": "^7.0.4",
+    "@types/react-native": "^0.37.11",
+    "@types/react-relay": "^0.9.10",
     "apphub": "^0.5.1",
     "babel-eslint": "^7.1.1",
     "babel-jest": "^17.0.2",
@@ -75,7 +83,8 @@
     "jest-cli": "^17.0.3",
     "jest-react-native": "^17.0.3",
     "react-storybooks-relay-container": "^1.0.0",
-    "react-test-renderer": "^15.3.0"
+    "react-test-renderer": "^15.3.0",
+    "tslint": "^4.4.2"
   },
   "peerDependencies": {
     "babel-relay-plugin": "^0.9.0"

rn-cli.config.js

@@ -5,7 +5,15 @@ var config = {
     return blacklist(platform, [
       /coverage\/.*/
     ])
-  }
+  },
+
+  getSourceExts() {
+    return ["js", "ts", "tsx"]
+  },
+
+  getTransformModulePath() {
+    return require.resolve("./transformer")
+  },
 }
 
 module.exports = config

src/data/colors.ts

@@ -0,0 +1,14 @@
+export default {
+  "gray-light": "#f8f8f8",
+  "gray-regular": "#e5e5e5",
+  "gray-medium": "#cccccc",
+  "gray-semibold": "#666666",
+  "gray-bold": "#333333",
+  "purple-light": "#e2d2ff",
+  "purple-regular": "#6e1fff",
+  "red-regular": "#f7625a",
+  "yellow-regular": "#fdefd1",
+  "yellow-medium": "#fce1a8",
+  "yellow-bold": "#f1af1b",
+  "green-regular": "#0eda83"
+}

src/declarations.d.ts

@@ -0,0 +1 @@
+declare const __DEV__: boolean;