this doesnt quite work

lib/src/commands/Commands.test.js → lib/src/commands/Commands.test.ts

@@ -1,9 +1,9 @@
-const LayoutTreeParser = require('./LayoutTreeParser');
-const LayoutTreeCrawler = require('./LayoutTreeCrawler');
-const Store = require('../components/Store');
-const { UniqueIdProvider } = require('../adapters/UniqueIdProvider.mock');
-const { NativeCommandsSender } = require('../adapters/NativeCommandsSender.mock');
-const Commands = require('./Commands');
+import { LayoutTreeParser } from './LayoutTreeParser';
+import { LayoutTreeCrawler } from './LayoutTreeCrawler';
+import { Store } from '../components/Store';
+import { UniqueIdProvider } from '../adapters/UniqueIdProvider.mock';
+import { NativeCommandsSender } from '../adapters/NativeCommandsSender.mock';
+import { Commands } from './Commands';
 
 describe('Commands', () => {
   let uut;

lib/src/commands/Commands.js → lib/src/commands/Commands.ts

@@ -1,14 +1,18 @@
-const _ = require('lodash');
-const OptionsProcessor = require('./OptionsProcessor');
+import * as _ from 'lodash';
+import { OptionsProcessor } from './OptionsProcessor';
+
+export class Commands {
+  private nativeCommandsSender: any;
+  private layoutTreeParser: any;
+  private layoutTreeCrawler: any;
 
-class Commands {
   constructor(nativeCommandsSender, layoutTreeParser, layoutTreeCrawler) {
     this.nativeCommandsSender = nativeCommandsSender;
     this.layoutTreeParser = layoutTreeParser;
     this.layoutTreeCrawler = layoutTreeCrawler;
   }
 
-  setRoot(simpleApi) {
+  setRoot(simpleApi: any) {
     const input = _.cloneDeep(simpleApi);
     const layout = this.layoutTreeParser.parse(input);
     this.layoutTreeCrawler.crawl(layout);
@@ -63,22 +67,20 @@ class Commands {
   }
 
   // showOverlay(type, options) {
-    // let promise;
-    // if (type === 'custom') {
-    //   const layout = this.layoutTreeParser.createDialogComponent({ name: options });
-    //   this.layoutTreeCrawler.crawl(layout);
-    //   promise = this.nativeCommandsSender.showOverlay(type, layout);
-    // } else {
-    //   const input = _.cloneDeep(options);
-    //   OptionsProcessor.processOptions(input);
-    //   promise = this.nativeCommandsSender.showOverlay(type, input);
-    // }
-    // return promise;
+  // let promise;
+  // if (type === 'custom') {
+  //   const layout = this.layoutTreeParser.createDialogComponent({ name: options });
+  //   this.layoutTreeCrawler.crawl(layout);
+  //   promise = this.nativeCommandsSender.showOverlay(type, layout);
+  // } else {
+  //   const input = _.cloneDeep(options);
+  //   OptionsProcessor.processOptions(input);
+  //   promise = this.nativeCommandsSender.showOverlay(type, input);
+  // }
+  // return promise;
   // }
 
   dismissOverlay() {
     return this.nativeCommandsSender.dismissOverlay();
   }
 }
-
-module.exports = Commands;

lib/src/commands/LayoutTreeCrawler.test.js → lib/src/commands/LayoutTreeCrawler.test.ts

@@ -1,7 +1,8 @@
-const LayoutTypes = require('./LayoutTypes');
-const LayoutTreeCrawler = require('./LayoutTreeCrawler');
+import { LayoutType } from './values/LayoutType';
+import { LayoutTreeCrawler } from './LayoutTreeCrawler';
+import { UniqueIdProvider } from '../adapters/UniqueIdProvider.mock';
+import { LayoutNode } from './values/LayoutNode';
 const Store = require('../components/Store');
-const UniqueIdProvider = require('../adapters/UniqueIdProvider.mock');
 
 describe('LayoutTreeCrawler', () => {
   let uut;
@@ -13,34 +14,34 @@ describe('LayoutTreeCrawler', () => {
   });
 
   it('crawls a layout tree and adds unique id to each node', () => {
-    const node = { type: LayoutTypes.Stack, children: [{ type: LayoutTypes.BottomTabs }] };
+    const node: any = { type: LayoutType.Stack, children: [{ type: LayoutType.BottomTabs }] };
     uut.crawl(node);
     expect(node.id).toEqual('Stack+UNIQUE_ID');
     expect(node.children[0].id).toEqual('BottomTabs+UNIQUE_ID');
   });
 
   it('crawls a layout tree and ensures data exists', () => {
-    const node = { type: LayoutTypes.Stack, children: [{ type: LayoutTypes.BottomTabs }] };
+    const node: any = { type: LayoutType.Stack, children: [{ type: LayoutType.BottomTabs }] };
     uut.crawl(node);
     expect(node.data).toEqual({});
     expect(node.children[0].data).toEqual({});
   });
 
   it('crawls a layout tree and ensures children exists', () => {
-    const node = { type: LayoutTypes.Stack, children: [{ type: LayoutTypes.BottomTabs }] };
+    const node: any = { type: LayoutType.Stack, children: [{ type: LayoutType.BottomTabs }] };
     uut.crawl(node);
     expect(node.children[0].children).toEqual([]);
   });
 
   it('crawls a layout tree and asserts known layout type', () => {
-    const node = { type: LayoutTypes.Stack, children: [{ type: 'Bob' }] };
-    expect(() => uut.crawl(node)).toThrow(new Error('Unknown layout type Bob'));
+    const node = { type: LayoutType.Stack, children: [{ type: 'Bob' }] };
+    expect(() => uut.crawl(node)).toThrowError('Unknown layout type Bob');
   });
 
   it('saves passProps into store for Component nodes', () => {
     const node = {
-      type: LayoutTypes.BottomTabs, children: [
-        { type: LayoutTypes.Component, data: { name: 'the name', passProps: { myProp: 123 } } }]
+      type: LayoutType.BottomTabs, children: [
+        { type: LayoutType.Component, data: { name: 'the name', passProps: { myProp: 123 } } }]
     };
     expect(store.getPropsForComponentId('Component+UNIQUE_ID')).toEqual({});
     uut.crawl(node);
@@ -55,7 +56,7 @@ describe('LayoutTreeCrawler', () => {
       }
     };
 
-    const node = { type: LayoutTypes.Component, data: { name: 'theComponentName' } };
+    const node: any = { type: LayoutType.Component, data: { name: 'theComponentName' } };
     store.setOriginalComponentClassForName('theComponentName', MyComponent);
     uut.crawl(node);
     expect(node.data.options).toEqual(theStyle);
@@ -83,7 +84,7 @@ describe('LayoutTreeCrawler', () => {
       }
     };
 
-    const node = { type: LayoutTypes.Component, data: { name: 'theComponentName', options: passedOptions } };
+    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: passedOptions } };
     store.setOriginalComponentClassForName('theComponentName', MyComponent);
 
     uut.crawl(node);
@@ -106,21 +107,21 @@ describe('LayoutTreeCrawler', () => {
       }
     };
 
-    const node = { type: LayoutTypes.Component, data: { name: 'theComponentName' } };
+    const node: any = { type: LayoutType.Component, data: { name: 'theComponentName' } };
     store.setOriginalComponentClassForName('theComponentName', MyComponent);
     uut.crawl(node);
     expect(node.data.options).not.toBe(theStyle);
   });
 
   it('Components: must contain data name', () => {
-    const node = { type: LayoutTypes.Component, data: {} };
-    expect(() => uut.crawl(node)).toThrow(new Error('Missing component data.name'));
+    const node = { type: LayoutType.Component, data: {} };
+    expect(() => uut.crawl(node)).toThrowError('Missing component data.name');
   });
 
   it('Components: options default obj', () => {
     const MyComponent = class { };
 
-    const node = { type: LayoutTypes.Component, data: { name: 'theComponentName' } };
+    const node: any = { type: LayoutType.Component, data: { name: 'theComponentName' } };
     store.setOriginalComponentClassForName('theComponentName', MyComponent);
     uut.crawl(node);
     expect(node.data.options).toEqual({});
@@ -132,7 +133,7 @@ describe('LayoutTreeCrawler', () => {
 
     beforeEach(() => {
       options = {};
-      node = { type: LayoutTypes.Component, data: { name: 'theComponentName', options } };
+      node = { type: LayoutType.Component, data: { name: 'theComponentName', options } };
     });
 
     it('processes colors into numeric AARRGGBB', () => {

lib/src/commands/LayoutTreeCrawler.js → lib/src/commands/LayoutTreeCrawler.ts

@@ -1,21 +1,33 @@
-import { LayoutTypes } from './LayoutTypes';
+import * as _ from 'lodash';
+import { OptionsProcessor } from './OptionsProcessor';
+import { LayoutType, isLayoutType } from './values/LayoutType';
+import { LayoutNode } from './values/LayoutNode';
 
-const _ = require('lodash');
-const OptionsProcessor = require('./OptionsProcessor');
+interface IdProvider {
+  generate: (str: string) => string;
+}
+
+interface Store {
+  setPropsForComponentId: (str: string, props: object) => void;
+  getOriginalComponentClassForName: (str: string) => any;
+}
 
-class LayoutTreeCrawler {
-  constructor(uniqueIdProvider, store) {
+export class LayoutTreeCrawler {
+  private uniqueIdProvider: IdProvider
+  private store: Store
+
+  constructor(uniqueIdProvider: IdProvider, store: Store) {
     this.uniqueIdProvider = uniqueIdProvider;
     this.store = store;
     this.crawl = this.crawl.bind(this);
   }
 
-  crawl(node) {
+  crawl(node: LayoutNode): void {
     this._assertKnownLayoutType(node.type);
     node.id = this.uniqueIdProvider.generate(node.type);
     node.data = node.data || {};
     node.children = node.children || [];
-    if (_.isEqual(node.type, LayoutTypes.Component)) {
+    if (node.type == LayoutType.Component) {
       this._handleComponent(node);
     }
     _.forEach(node.children, this.crawl);
@@ -40,7 +52,7 @@ class LayoutTreeCrawler {
   }
 
   _assertKnownLayoutType(type) {
-    if (!_.includes(LayoutTypes, type)) {
+    if (!isLayoutType(type)) {
       throw new Error(`Unknown layout type ${type}`);
     }
   }
@@ -51,5 +63,3 @@ class LayoutTreeCrawler {
     }
   }
 }
-
-module.exports = LayoutTreeCrawler;

lib/src/commands/LayoutTreeParser.test.ts

@@ -11,7 +11,7 @@ describe('LayoutTreeParser', () => {
 
   describe('parses into { type, data, children }', () => {
     it('unknown type', () => {
-      expect(() => uut.parse({ wut: {} })).toThrow(new Error('unknown LayoutType "wut"'));
+      expect(() => uut.parse({ wut: {} })).toThrowError('unknown LayoutType "wut"');
     });
 
     it('single component', () => {
@@ -88,7 +88,7 @@ describe('LayoutTreeParser', () => {
     });
 
     it('side menu center is require', () => {
-      expect(() => uut.parse({ sideMenu: {} })).toThrow(new Error('sideMenu.center is required'));
+      expect(() => uut.parse({ sideMenu: {} })).toThrowError('sideMenu.center is required');
     });
 
     it('top tabs', () => {
@@ -127,120 +127,130 @@ describe('LayoutTreeParser', () => {
   });
 });
 
-const LayoutExamples = {
-  passProps: {
-    strProp: 'string prop',
-    numProp: 12345,
-    objProp: { inner: { foo: 'bar' } },
-    fnProp: () => 'Hello from a function'
-  },
-
-  options: {
-    topBar: {
-      title: 'Hello1'
-    }
-  },
+/* Layout Examples: */
 
-  singleComponent: {
-    component: {
-      name: 'MyReactComponent',
-      options: this.options,
-      passProps: this.passProps
-    }
-  },
-
-  stackWithTopBar: {
-    stack: {
-      children: [
-        {
-          component: {
-            name: 'MyReactComponent1'
-          }
-        },
-        {
-          component: {
-            name: 'MyReactComponent2',
-            options: this.options
-          }
+const passProps = {
+  strProp: 'string prop',
+  numProp: 12345,
+  objProp: { inner: { foo: 'bar' } },
+  fnProp: () => 'Hello from a function'
+};
+
+const options = {
+  topBar: {
+    title: 'Hello1'
+  }
+};
+
+const singleComponent = {
+  component: {
+    name: 'MyReactComponent',
+    options,
+    passProps
+  }
+};
+
+const stackWithTopBar = {
+  stack: {
+    children: [
+      {
+        component: {
+          name: 'MyReactComponent1'
         }
-      ],
-      options: this.options
-    }
-  },
+      },
+      {
+        component: {
+          name: 'MyReactComponent2',
+          options
+        }
+      }
+    ],
+    options
+  }
+};
 
+const bottomTabs = {
   bottomTabs: {
-    bottomTabs: {
-      children: [
-        { ...this.stackWithTopBar },
-        { ...this.stackWithTopBar },
-        {
-          component: {
-            name: 'MyReactComponent1'
-          }
+    children: [
+      stackWithTopBar,
+      stackWithTopBar,
+      {
+        component: {
+          name: 'MyReactComponent1'
         }
-      ]
-    }
-  },
+      }
+    ]
+  }
+};
 
+const sideMenu = {
   sideMenu: {
-    sideMenu: {
-      left: { ...this.singleComponent },
-      center: { ...this.stackWithTopBar },
-      right: { ...this.singleComponent }
-    }
-  },
+    left: singleComponent,
+    center: stackWithTopBar,
+    right: singleComponent
+  }
+};
 
+const topTabs = {
   topTabs: {
-    topTabs: {
-      children: [
-        { ...this.singleComponent },
-        { ...this.singleComponent },
-        { ...this.singleComponent },
-        { ...this.singleComponent },
-        { ...this.stackWithTopBar }
-      ],
-      options: this.options
-    }
-  },
-
-  complexLayout: {
-    sideMenu: {
-      left: { ...this.singleComponent },
-      center: {
-        bottomTabs: {
-          children: [
-            { ...this.stackWithTopBar },
-            { ...this.stackWithTopBar },
-            {
-              stack: {
-                children: [
-                  {
-                    topTabs: {
-                      children: [
-                        { ...this.stackWithTopBar },
-                        { ...this.stackWithTopBar },
-                        {
-                          topTabs: {
-                            options: this.options,
-                            children: [
-                              { ...this.singleComponent },
-                              { ...this.singleComponent },
-                              { ...this.singleComponent },
-                              { ...this.singleComponent },
-                              { ...this.stackWithTopBar }
-                            ]
-                          }
+    children: [
+      singleComponent,
+      singleComponent,
+      singleComponent,
+      singleComponent,
+      stackWithTopBar
+    ],
+    options
+  }
+};
+
+const complexLayout = {
+  sideMenu: {
+    left: singleComponent,
+    center: {
+      bottomTabs: {
+        children: [
+          stackWithTopBar,
+          stackWithTopBar,
+          {
+            stack: {
+              children: [
+                {
+                  topTabs: {
+                    children: [
+                      stackWithTopBar,
+                      stackWithTopBar,
+                      {
+                        topTabs: {
+                          options,
+                          children: [
+                            singleComponent,
+                            singleComponent,
+                            singleComponent,
+                            singleComponent,
+                            stackWithTopBar
+                          ]
                         }
-                      ]
-                    }
+                      }
+                    ]
                   }
-                ]
-              }
+                }
+              ]
             }
-          ]
-        }
+          }
+        ]
       }
     }
   }
-}
+};
 
+const LayoutExamples = {
+  passProps,
+  options,
+  singleComponent,
+  stackWithTopBar,
+  bottomTabs,
+  sideMenu,
+  topTabs,
+  complexLayout
+};

lib/src/commands/LayoutTreeParser.ts

@@ -1,15 +1,13 @@
 import * as _ from 'lodash';
 import { LayoutType } from './values/LayoutType';
+import { LayoutNode } from './values/LayoutNode';
 
 export class LayoutTreeParser {
   constructor() {
     this.parse = this.parse.bind(this);
   }
 
-  /**
-   * @returns correct layout tree of nodes which are { type, data, children }
-   */
-  parse(api) {
+  parse(api: any): LayoutNode {
     if (api.topTabs) {
       return this._topTabs(api.topTabs);
     } else if (api.sideMenu) {
@@ -24,7 +22,7 @@ export class LayoutTreeParser {
     throw new Error(`unknown LayoutType "${_.keys(api)}"`);
   }
 
-  _topTabs(api) {
+  _topTabs(api): LayoutNode {
     return {
       type: LayoutType.TopTabs,
       data: { options: api.options },
@@ -32,7 +30,7 @@ export class LayoutTreeParser {
     };
   }
 
-  _sideMenu(api) {
+  _sideMenu(api): LayoutNode {
     return {
       type: LayoutType.SideMenuRoot,
       data: { options: api.options },
@@ -40,7 +38,7 @@ export class LayoutTreeParser {
     };
   }
 
-  _sideMenuChildren(api) {
+  _sideMenuChildren(api): Array<LayoutNode> {
     if (!api.center) {
       throw new Error(`sideMenu.center is required`);
     }
@@ -67,7 +65,7 @@ export class LayoutTreeParser {
     return children;
   }
 
-  _bottomTabs(api) {
+  _bottomTabs(api): LayoutNode {
     return {
       type: LayoutType.BottomTabs,
       data: { options: api.options },
@@ -75,7 +73,7 @@ export class LayoutTreeParser {
     };
   }
 
-  _stack(api) {
+  _stack(api): LayoutNode {
     return {
       type: LayoutType.Stack,
       data: { name: api.name, options: api.options },
@@ -83,7 +81,7 @@ export class LayoutTreeParser {
     };
   }
 
-  _component(api) {
+  _component(api): LayoutNode {
     return {
       type: LayoutType.Component,
       data: { name: api.name, options: api.options, passProps: api.passProps },

lib/src/commands/values/LayoutNode.ts

@@ -1,7 +1,7 @@
 import { LayoutType } from "./LayoutType";
 
 export interface LayoutNode {
-  id: string;
+  id?: string;
   type: LayoutType;
   data: object;
   children: Array<LayoutNode>;

lib/src/components/ComponentWrapper.js → lib/src/components/ComponentWrapper.ts

@@ -1,11 +1,9 @@
-const _ = require('lodash');
+import * as  _ from 'lodash';
+import * as React from 'react';
 
-const React = require('react');
-const { Component } = require('react');
-
-class ComponentWrapper {
-  static wrap(componentName, OriginalComponent, store) {
-    return class extends Component {
+export class ComponentWrapper {
+  static wrap(componentName: string, OriginalComponent: any, store: any) {
+    return class extends React.Component<any, any> {
       constructor(props) {
         super(props);
         this._saveComponentRef = this._saveComponentRef.bind(this);
@@ -61,15 +59,13 @@ class ComponentWrapper {
       render() {
         return (
           <OriginalComponent
-            ref={this._saveComponentRef}
-            {...this.state.allProps}
-            componentId={this.state.componentId}
-            key={this.state.componentId}
+            ref= { this._saveComponentRef }
+        {...this.state.allProps }
+        componentId = { this.state.componentId }
+        key = { this.state.componentId }
           />
         );
       }
     };
   }
 }
-
-module.exports = ComponentWrapper;

lib/src/components/Lifecycle.test.js → lib/src/components/Lifecycle.test.ts

@@ -1,5 +1,5 @@
-const Lifecycle = require('./Lifecycle');
-const Store = require('../components/Store');
+import { Lifecycle } from './Lifecycle';
+import { Store } from '../components/Store';
 
 describe('Lifecycle', () => {
   let store;

lib/src/components/Lifecycle.js → lib/src/components/Lifecycle.ts

@@ -1,4 +1,6 @@
-class Lifecycle {
+export class Lifecycle {
+  private store: any;
+
   constructor(store) {
     this.store = store;
     this.componentDidAppear = this.componentDidAppear.bind(this);
@@ -27,5 +29,3 @@ class Lifecycle {
     }
   }
 }
-
-module.exports = Lifecycle;

lib/src/components/Store.test.js → lib/src/components/Store.test.ts

@@ -1,4 +1,4 @@
-const Store = require('./Store');
+import { Store } from './Store';
 
 describe('Store', () => {
   let uut;

lib/src/components/Store.js → lib/src/components/Store.ts

@@ -1,6 +1,10 @@
-const _ = require('lodash');
+import * as _ from 'lodash';
+
+export class Store {
+  private propsByComponentId: {};
+  private componentsByName: {};
+  private refsById: {};
 
-class Store {
   constructor() {
     this.propsByComponentId = {};
     this.componentsByName = {};
@@ -36,5 +40,3 @@ class Store {
     _.unset(this.propsByComponentId, id);
   }
 }
-
-module.exports = Store;

lib/src/events/PrivateEventsListener.test.ts

@@ -1,6 +1,6 @@
 import { PrivateEventsListener } from './PrivateEventsListener';
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
-import * as  Store from '../components/Store';
+import { Store } from '../components/Store';
 
 describe('PrivateEventsListener', () => {
   let uut: PrivateEventsListener;

lib/src/events/PublicEventsRegistry.test.js → lib/src/events/PublicEventsRegistry.test.ts

@@ -1,5 +1,5 @@
-const PublicEventsRegistry = require('./PublicEventsRegistry');
-const NativeEventsReceiver = require('../adapters/NativeEventsReceiver.mock');
+import { PublicEventsRegistry } from './PublicEventsRegistry';
+import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
 
 describe('PublicEventsRegistry', () => {
   let uut;

lib/src/events/PublicEventsRegistry.js → lib/src/events/PublicEventsRegistry.ts

@@ -1,4 +1,6 @@
-class PublicEventsRegistry {
+export class PublicEventsRegistry {
+  private nativeEventsReceiver: any;
+
   constructor(nativeEventsReceiver) {
     this.nativeEventsReceiver = nativeEventsReceiver;
   }
@@ -7,5 +9,3 @@ class PublicEventsRegistry {
     this.nativeEventsReceiver.registerAppLaunched(callback);
   }
 }
-
-module.exports = PublicEventsRegistry;