Merge pull request #6 from horacioh/feature/typescript

add typecript to co-exist with js

packages/core/.gitignore

@@ -51,3 +51,7 @@ android/keystores/debug.keystore
 
 # Build
 dist/
+
+# TypeScript-generated files
+*.d.ts
+!src/react-navigation.d.ts

packages/core/package.json

@@ -11,10 +11,15 @@
   ],
   "react-native": "src/index.js",
   "scripts": {
+    "pretest": "yarn lint && yarn build",
     "test": "jest",
     "lint": "eslint .",
     "format": "eslint . --fix",
-    "build": "babel --no-babelrc --plugins=transform-react-jsx,transform-class-properties,transform-object-rest-spread,transform-flow-strip-types src --copy-files --out-dir dist --ignore '**/__tests__/**'",
+    "prettier:js": "prettier --write src/**/*.js",
+    "prettier:ts": "prettier --parser typescript --write src/**/*.ts",
+    "babel": "babel --no-babelrc --plugins=transform-react-jsx,transform-class-properties,transform-object-rest-spread,transform-flow-strip-types src --copy-files --out-dir dist --ignore '**/__tests__/**'",
+    "tsc": "tsc",
+    "build": "yarn babel && yarn tsc",
     "prepare": "yarn build",
     "release": "release-it"
   },
@@ -46,48 +51,76 @@
     "react-lifecycles-compat": "^3.0.4"
   },
   "devDependencies": {
+    "@types/jest": "^23.3.5",
     "babel-cli": "^6.26.0",
     "babel-jest": "^22.4.1",
     "babel-plugin-transform-class-properties": "^6.13.0",
-    "babel-plugin-transform-react-jsx": "^6.18.0",
-    "babel-plugin-transform-object-rest-spread": "^6.13.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.13.0",
+    "babel-plugin-transform-react-jsx": "^6.18.0",
     "babel-preset-react-native": "^4.0.0",
     "conventional-changelog-cli": "^2.0.5",
     "eslint": "^4.12.1",
     "eslint-config-satya164": "^1.0.1",
     "eslint-plugin-react-native-globals": "^0.1.0",
-    "husky": "^0.14.3",
+    "husky": "^1.1.2",
     "jest": "^22.1.3",
     "jest-expo": "^30.0.0",
+    "lint-staged": "^7.3.0",
     "prettier": "^1.8.2",
     "react": "16.3.1",
     "react-dom": "16.3.1",
     "react-native": "^0.55.4",
     "react-test-renderer": "16.3.1",
-    "release-it": "^7.6.1"
+    "release-it": "^7.6.1",
+    "ts-jest": "^23.10.4",
+    "tslint": "^5.11.0",
+    "typescript": "^3.1.3"
   },
   "peerDependencies": {
     "react": "*"
   },
   "jest": {
     "preset": "react-native",
-    "testRegex": "/__tests__/[^/]+-test\\.js$",
+    "testRegex": "/__tests__/[^/]+-test\\.[jt]sx?$",
     "setupFiles": [
       "<rootDir>/jest-setup.js"
     ],
     "coveragePathIgnorePatterns": [
       "jest-setup.js"
     ],
-    "modulePathIgnorePatterns": [
-      "<rootDir>/example/"
-    ],
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest"
+    },
     "transformIgnorePatterns": [
       "node_modules/(?!(jest-)?react-native|react-clone-referenced-element)"
-    ]
+    ],
+    "globals": {
+      "ts-jest": {
+        "diagnostics": {
+          "ignoreCodes": [151001]
+        }
+      }
+    }
   },
   "prettier": {
     "trailingComma": "es5",
     "singleQuote": true
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "yarn prettier:ts",
+      "git add"
+    ],
+    "*.js": [
+      "yarn format",
+      "yarn prettier:js",
+      "git add"
+    ]
   }
 }

packages/core/src/__tests__/getChildEventSubscriber-test.js

@@ -1,4 +1,4 @@
-import getChildEventSubscriber from '../getChildEventSubscriber';
+import getChildEventSubscriber from '../getChildEventSubscriber.ts';
 
 test('child action events only flow when focused', () => {
   const parentSubscriber = jest.fn();

packages/core/src/getChildEventSubscriber.ts

@@ -4,12 +4,18 @@
  * Based on the 'action' events that get fired for this navigation state, this utility will fire
  * focus and blur events for this child
  */
-export default function getChildEventSubscriber(addListener, key) {
-  const actionSubscribers = new Set();
-  const willFocusSubscribers = new Set();
-  const didFocusSubscribers = new Set();
-  const willBlurSubscribers = new Set();
-  const didBlurSubscribers = new Set();
+export default function getChildEventSubscriber(
+  addListener: (
+    eventName: string,
+    eventHandler: EventHandler
+  ) => { remove: () => void },
+  key: string
+) {
+  const actionSubscribers = new Set<EventHandler>();
+  const willFocusSubscribers = new Set<EventHandler>();
+  const didFocusSubscribers = new Set<EventHandler>();
+  const willBlurSubscribers = new Set<EventHandler>();
+  const didBlurSubscribers = new Set<EventHandler>();
 
   const removeAll = () => {
     [
@@ -23,7 +29,7 @@ export default function getChildEventSubscriber(addListener, key) {
     upstreamSubscribers.forEach(subs => subs && subs.remove());
   };
 
-  const getChildSubscribers = evtName => {
+  const getChildSubscribers = (evtName: string) => {
     switch (evtName) {
       case 'action':
         return actionSubscribers;
@@ -40,13 +46,14 @@ export default function getChildEventSubscriber(addListener, key) {
     }
   };
 
-  const emit = (type, payload) => {
+  const emit = (type: string, payload: IPayload) => {
     const payloadWithType = { ...payload, type };
     const subscribers = getChildSubscribers(type);
-    subscribers &&
+    if (subscribers) {
       subscribers.forEach(subs => {
         subs(payloadWithType);
       });
+    }
   };
 
   // lastEmittedEvent keeps track of focus state for one route. First we assume
@@ -63,7 +70,7 @@ export default function getChildEventSubscriber(addListener, key) {
     'action',
   ];
 
-  const upstreamSubscribers = upstreamEvents.map(eventName =>
+  const upstreamSubscribers = upstreamEvents.map((eventName: string) =>
     addListener(eventName, payload => {
       const { state, lastState, action } = payload;
       const lastRoutes = lastState && lastState.routes;
@@ -77,7 +84,7 @@ export default function getChildEventSubscriber(addListener, key) {
       const lastRoute =
         lastRoutes && lastRoutes.find(route => route.key === key);
       const newRoute = routes && routes.find(route => route.key === key);
-      const childPayload = {
+      const childPayload: IPayload = {
         context: `${key}:${action.type}_${payload.context || 'Root'}`,
         state: newRoute,
         lastState: lastRoute,
@@ -146,7 +153,7 @@ export default function getChildEventSubscriber(addListener, key) {
   );
 
   return {
-    addListener(eventName, eventHandler) {
+    addListener(eventName: string, eventHandler: EventHandler) {
       const subscribers = getChildSubscribers(eventName);
       if (!subscribers) {
         throw new Error(`Invalid event name "${eventName}"`);
@@ -159,3 +166,21 @@ export default function getChildEventSubscriber(addListener, key) {
     },
   };
 }
+
+export type EventHandler = (payload: IPayload) => void;
+
+export interface IPayload {
+  action: { type: string };
+  context?: string;
+  lastState: IRoute;
+  state: IRoute;
+  type: string;
+}
+
+export interface IRoute {
+  index: number;
+  isTransitioning: boolean;
+  key?: string;
+  routeName?: string;
+  routes: any[];
+}

packages/core/src/getChildNavigation.js

@@ -1,4 +1,4 @@
-import getChildEventSubscriber from './getChildEventSubscriber';
+import getChildEventSubscriber from './getChildEventSubscriber.ts';
 import getChildRouter from './getChildRouter';
 import getNavigationActionCreators from './routers/getNavigationActionCreators';
 

packages/core/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "sourceMap": true
+  }
+}

packages/core/tslint.json

@@ -0,0 +1,15 @@
+{
+  "extends": "tslint:recommended",
+  "rules": {
+    "arrow-parens": [true, "ban-single-arg-parens"],
+    "arrow-return-shorthand": [true, "multiline"],
+    "trailing-comma": false,
+    "quotemark": {
+      "options": [
+        "single",
+        "avoid-escape"
+      ]
+    },
+    "object-literal-sort-keys": false
+  }
+}