typescripting

lib/src/Navigation.ts

@@ -12,20 +12,33 @@ import { ComponentProvider } from 'react-native';
 import { Element } from './adapters/Element';
 
 class Navigation {
-  public readonly Element = Element;
-
-  private readonly store = new Store();
-  private readonly nativeEventsReceiver = new NativeEventsReceiver();
-  private readonly uniqueIdProvider = new UniqueIdProvider();
-  private readonly componentRegistry = new ComponentRegistry(this.store);
-  private readonly layoutTreeParser = new LayoutTreeParser();
-  private readonly layoutTreeCrawler = new LayoutTreeCrawler(this.uniqueIdProvider, this.store);
-  private readonly nativeCommandsSender = new NativeCommandsSender();
-  private readonly commands = new Commands(this.nativeCommandsSender, this.layoutTreeParser, this.layoutTreeCrawler);
-  private readonly publicEventsRegistry = new PublicEventsRegistry(this.nativeEventsReceiver);
-  private readonly privateEventsListener = new PrivateEventsListener(this.nativeEventsReceiver, this.store);
+  public readonly Element;
+
+  private readonly store;
+  private readonly nativeEventsReceiver;
+  private readonly uniqueIdProvider;
+  private readonly componentRegistry;
+  private readonly layoutTreeParser;
+  private readonly layoutTreeCrawler;
+  private readonly nativeCommandsSender;
+  private readonly commands;
+  private readonly publicEventsRegistry;
+  private readonly privateEventsListener;
 
   constructor() {
+    this.Element = Element;
+
+    this.store = new Store();
+    this.nativeEventsReceiver = new NativeEventsReceiver();
+    this.uniqueIdProvider = new UniqueIdProvider();
+    this.componentRegistry = new ComponentRegistry(this.store);
+    this.layoutTreeParser = new LayoutTreeParser();
+    this.layoutTreeCrawler = new LayoutTreeCrawler(this.uniqueIdProvider, this.store);
+    this.nativeCommandsSender = new NativeCommandsSender();
+    this.commands = new Commands(this.nativeCommandsSender, this.layoutTreeParser, this.layoutTreeCrawler);
+    this.publicEventsRegistry = new PublicEventsRegistry(this.nativeEventsReceiver);
+    this.privateEventsListener = new PrivateEventsListener(this.nativeEventsReceiver, this.store);
+
     this.privateEventsListener.listenAndHandlePrivateEvents();
   }
 
@@ -108,7 +121,7 @@ class Navigation {
    * Pop the stack to a given component
    * @param {string} componentId The component's id.
    */
-  popTo(componentId) {
+  popTo(componentId: string) {
     return this.commands.popTo(componentId);
   }
 
@@ -116,7 +129,7 @@ class Navigation {
    * Pop the component's stack to root.
    * @param {*} componentId
    */
-  popToRoot(componentId) {
+  popToRoot(componentId: string) {
     return this.commands.popToRoot(componentId);
   }
 
@@ -132,12 +145,12 @@ class Navigation {
    * dismiss overlay by componentId
    * @param {string} componentId
    */
-  dismissOverlay(componentId) {
+  dismissOverlay(componentId: string) {
     return this.commands.dismissOverlay(componentId);
   }
 
   /**
-   * Obtain the events registery instance
+   * Obtain the events registry instance
    */
   events() {
     return this.publicEventsRegistry;

lib/src/adapters/Element.tsx

@@ -3,13 +3,13 @@ import * as PropTypes from 'prop-types';
 import { requireNativeComponent } from 'react-native';
 
 interface ElementProps {
-  elementId;
-  resizeMode;
+  elementId: PropTypes.Requireable<string>;
+  resizeMode: any;
 }
 
-let RNNElement: React.ComponentClass;
+let RNNElement: React.ComponentType<any>;
 
-export class Element extends React.Component<ElementProps, object> {
+export class Element extends React.Component<ElementProps, any> {
   static propTypes = {
     elementId: PropTypes.string.isRequired,
     resizeMode: PropTypes.string
@@ -26,3 +26,4 @@ export class Element extends React.Component<ElementProps, object> {
 }
 
 RNNElement = requireNativeComponent('RNNElement', Element);
+

lib/src/commands/LayoutTreeParser.ts

@@ -42,7 +42,7 @@ export class LayoutTreeParser {
     if (!api.center) {
       throw new Error(`sideMenu.center is required`);
     }
-    const children = [];
+    const children: Array<LayoutNode> = [];
     if (api.left) {
       children.push({
         type: LayoutType.SideMenuLeft,

lib/src/commands/LayoutType.test.ts

@@ -11,8 +11,6 @@ describe.only('LayoutType', () => {
   });
 
   it('isLayoutType', () => {
-    expect(isLayoutType(null)).toBe(false);
-    expect(isLayoutType(undefined)).toBe(false);
     expect(isLayoutType('')).toBe(false);
     expect(isLayoutType('asdasd')).toBe(false);
     expect(isLayoutType('TopTabs')).toBe(true);

lib/src/components/ComponentRegistry.test.tsx

@@ -46,6 +46,6 @@ describe('ComponentRegistry', () => {
     uut.registerComponent('example.MyComponent.name', () => MyComponent);
     const Component = mockRegistry.mock.calls[0][1]();
     const tree = renderer.create(<Component componentId="123" />);
-    expect(tree.toJSON().children).toEqual(['Hello, World!']);
+    expect(tree.toJSON()!.children).toEqual(['Hello, World!']);
   });
 });

lib/src/components/ComponentRegistry.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { AppRegistry, ComponentProvider } from 'react-native';
 import { ComponentWrapper } from './ComponentWrapper';
 

lib/src/components/ComponentWrapper.test.tsx

@@ -61,21 +61,21 @@ describe('ComponentWrapper', () => {
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
     expect(NavigationComponent).not.toBeInstanceOf(MyComponent);
     const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-    expect(tree.toJSON().children).toEqual(['Hello, World!']);
-    expect(tree.getInstance().originalComponentRef).toBeInstanceOf(MyComponent);
+    expect(tree.toJSON()!.children).toEqual(['Hello, World!']);
+    expect(tree.getInstance()!.originalComponentRef).toBeInstanceOf(MyComponent);
   });
 
   it('injects props from wrapper into original component', () => {
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
     const tree = renderer.create(<NavigationComponent componentId={'component1'} myProp={'yo'} />);
-    expect(tree.getInstance().originalComponentRef.props.myProp).toEqual('yo');
+    expect(tree.getInstance()!.originalComponentRef.props.myProp).toEqual('yo');
   });
 
   it('updates props from wrapper into original component', () => {
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
     const tree = renderer.create(<TestParent ChildClass={NavigationComponent} />);
     expect(childRef.props.foo).toEqual(undefined);
-    tree.getInstance().setState({ propsFromState: { foo: 'yo' } });
+    tree.getInstance()!.setState({ propsFromState: { foo: 'yo' } });
     expect(childRef.props.foo).toEqual('yo');
   });
 
@@ -83,7 +83,7 @@ describe('ComponentWrapper', () => {
     store.setPropsForComponentId('component123', { numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
     const tree = renderer.create(<NavigationComponent componentId={'component123'} />);
-    const originalComponentProps = tree.getInstance().originalComponentRef.props;
+    const originalComponentProps = tree.getInstance()!.originalComponentRef.props;
     expect(originalComponentProps).toEqual({ componentId: 'component123', numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
   });
 
@@ -93,7 +93,7 @@ describe('ComponentWrapper', () => {
     store.setPropsForComponentId('component1', { myProp: 'hello' });
     expect(childRef.originalComponentRef.props.foo).toEqual(undefined);
     expect(childRef.originalComponentRef.props.myProp).toEqual(undefined);
-    tree.getInstance().setState({ propsFromState: { foo: 'yo' } });
+    tree.getInstance()!.setState({ propsFromState: { foo: 'yo' } });
     expect(childRef.originalComponentRef.props.foo).toEqual('yo');
     expect(childRef.originalComponentRef.props.myProp).toEqual('hello');
   });
@@ -102,15 +102,15 @@ describe('ComponentWrapper', () => {
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
     const tree = renderer.create(<TestParent ChildClass={NavigationComponent} />);
     expect(childRef.originalComponentRef.props.componentId).toEqual('component1');
-    tree.getInstance().setState({ propsFromState: { id: 'ERROR' } });
+    tree.getInstance()!.setState({ propsFromState: { id: 'ERROR' } });
     expect(childRef.originalComponentRef.props.componentId).toEqual('component1');
   });
 
   it('assignes key by id', () => {
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
     const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-    expect(tree.getInstance().originalComponentRef.props.componentId).toEqual('component1');
-    expect(tree.getInstance().originalComponentRef._reactInternalInstance.key).toEqual('component1');
+    expect(tree.getInstance()!.originalComponentRef.props.componentId).toEqual('component1');
+    expect(tree.getInstance()!.originalComponentRef._reactInternalInstance.key).toEqual('component1');
   });
 
   it('saves self ref into store', () => {
@@ -131,14 +131,14 @@ describe('ComponentWrapper', () => {
   it('holds ref to OriginalComponent', () => {
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
     const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-    expect(tree.getInstance().originalComponentRef).toBeDefined();
-    expect(tree.getInstance().originalComponentRef).toBeInstanceOf(MyComponent);
+    expect(tree.getInstance()!.originalComponentRef).toBeDefined();
+    expect(tree.getInstance()!.originalComponentRef).toBeInstanceOf(MyComponent);
   });
 
   it('cleans ref to internal component on unount', () => {
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
     const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-    const instance = tree.getInstance();
+    const instance = tree.getInstance()!;
     expect(instance.originalComponentRef).toBeInstanceOf(React.Component);
     tree.unmount();
     expect(instance.originalComponentRef).toBeFalsy();
@@ -166,16 +166,16 @@ describe('ComponentWrapper', () => {
     it('didAppear, didDisappear and onNavigationButtonPressed are optional', () => {
       const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
       const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-      expect(() => tree.getInstance().didAppear()).not.toThrow();
-      expect(() => tree.getInstance().didDisappear()).not.toThrow();
-      expect(() => tree.getInstance().onNavigationButtonPressed()).not.toThrow();
+      expect(() => tree.getInstance()!.didAppear()).not.toThrow();
+      expect(() => tree.getInstance()!.didDisappear()).not.toThrow();
+      expect(() => tree.getInstance()!.onNavigationButtonPressed()).not.toThrow();
     });
 
     it('calls didAppear on OriginalComponent', () => {
       const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
       const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
       expect(didAppearCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance().didAppear();
+      tree.getInstance()!.didAppear();
       expect(didAppearCallback).toHaveBeenCalledTimes(1);
     });
 
@@ -183,7 +183,7 @@ describe('ComponentWrapper', () => {
       const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
       const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
       expect(didDisappearCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance().didDisappear();
+      tree.getInstance()!.didDisappear();
       expect(didDisappearCallback).toHaveBeenCalledTimes(1);
     });
 
@@ -191,7 +191,7 @@ describe('ComponentWrapper', () => {
       const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
       const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
       expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance().onNavigationButtonPressed();
+      tree.getInstance()!.onNavigationButtonPressed();
       expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(1);
     });
   });

package.json

@@ -69,11 +69,11 @@
     "shell-utils": "1.x.x",
     "xo": "0.18.x",
     "typescript": "2.x.x",
-    "@types/react": "16.0.0",
+    "@types/react": "16.x.x",
     "@types/react-native": "0.49.x",
     "@types/lodash": "4.x.x",
     "@types/prop-types": "15.x.x",
-    "@types/react-test-renderer": "16.0.0",
+    "@types/react-test-renderer": "16.x.x",
     "@types/jest": "22.x.x"
   },
   "babel": {

tsconfig-strict.json

@@ -10,14 +10,14 @@
     "importHelpers": true,
     "noEmitOnError": true,
     "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "pretty": true,
-    "strictFunctionTypes": false,
+    "strictFunctionTypes": true,
     "strictNullChecks": true,
-    "strict": true
+    "strict": true,
+    "noImplicitAny": true
   }
 }

tsconfig.json

@@ -1,18 +1,11 @@
 {
+  "extends": "./tsconfig-strict.json",
   "compilerOptions": {
     "outDir": "./lib/dist",
-    "allowJs": true,
+    "allowJs": false,
     "target": "esnext",
     "module": "commonjs",
-    "jsx": "react-native",
-    "types": [
-      "lodash",
-      "react",
-      "react-native",
-      "prop-types",
-      "react-test-renderer",
-      "jest"
-    ]
+    "jsx": "react-native"
   },
   "include": [
     "./lib/src/**/*"