Road to implicit any part5 (#4500)

- `registerCommandListener` documentation was wrong so that is fixed
- use `uniqueIdProvider` much as possible so we are not duplicating logic
- add `appRegistryService` which makes `componentRegistry` cleaner and also makes testing easier
- type return type of `NativeEventsReceiver.ts` correctly
- add types to `LayoutTreeParser`
- `ComponentRegistry.test.tsx` refactor so it tests only things that is should and not implementation of React Native functions
- fix type `center` prop to be required on `LayoutSideMenu`
- add missing layout props `topTabs` and `externalComponent`
- lots of minor cleaning

docs/docs/events.md

@@ -27,14 +27,14 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {
       this.navigationEventListener.remove();
     }
   }
-  
+
   componentDidAppear() {
 
   }
@@ -66,7 +66,7 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {
@@ -101,7 +101,7 @@ The `commandListener` is called whenever a *Navigation command* (i.e push, pop,
 
 ```js
 // Subscribe
-const commandListener = Navigation.events().registerCommandListener(({ name, params }) => {
+const commandListener = Navigation.events().registerCommandListener((name, params) => {
 
 });
 ...
@@ -158,7 +158,7 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {
@@ -197,7 +197,7 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {
@@ -220,7 +220,7 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {
@@ -243,7 +243,7 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {

lib/src/Navigation.ts

@@ -20,6 +20,7 @@ import { ComponentWrapper } from './components/ComponentWrapper';
 import { OptionsProcessor } from './commands/OptionsProcessor';
 import { ColorService } from './adapters/ColorService';
 import { AssetService } from './adapters/AssetResolver';
+import { AppRegistryService } from './adapters/AppRegistryService';
 
 export class NavigationRoot {
   public readonly Element: React.ComponentType<{ elementId: any; resizeMode?: any; }>;
@@ -45,12 +46,18 @@ export class NavigationRoot {
     this.nativeEventsReceiver = new NativeEventsReceiver();
     this.uniqueIdProvider = new UniqueIdProvider();
     this.componentEventsObserver = new ComponentEventsObserver(this.nativeEventsReceiver);
-    this.componentRegistry = new ComponentRegistry(this.store, this.componentEventsObserver);
+    const appRegistryService = new AppRegistryService();
+    this.componentRegistry = new ComponentRegistry(
+      this.store,
+      this.componentEventsObserver,
+      this.componentWrapper,
+      appRegistryService
+    );
     this.layoutTreeParser = new LayoutTreeParser();
     const optionsProcessor = new OptionsProcessor(this.store, this.uniqueIdProvider, new ColorService(), new AssetService());
     this.layoutTreeCrawler = new LayoutTreeCrawler(this.uniqueIdProvider, this.store, optionsProcessor);
     this.nativeCommandsSender = new NativeCommandsSender();
-    this.commandsObserver = new CommandsObserver();
+    this.commandsObserver = new CommandsObserver(this.uniqueIdProvider);
     this.commands = new Commands(
       this.nativeCommandsSender,
       this.layoutTreeParser,
@@ -69,7 +76,7 @@ export class NavigationRoot {
    * The component itself is a traditional React component extending React.Component.
    */
   public registerComponent(componentName: string | number, componentProvider: ComponentProvider, concreteComponentProvider?: ComponentProvider): ComponentProvider {
-    return this.componentRegistry.registerComponent(componentName, componentProvider, this.componentWrapper, concreteComponentProvider);
+    return this.componentRegistry.registerComponent(componentName, componentProvider, concreteComponentProvider);
   }
 
   /**
@@ -82,7 +89,7 @@ export class NavigationRoot {
     ReduxProvider: any,
     reduxStore: any
   ): ComponentProvider {
-    return this.componentRegistry.registerComponent(componentName, getComponentClassFunc, this.componentWrapper, undefined, ReduxProvider, reduxStore);
+    return this.componentRegistry.registerComponent(componentName, getComponentClassFunc, undefined, ReduxProvider, reduxStore);
   }
 
   /**

lib/src/adapters/AppRegistryService.ts

@@ -0,0 +1,7 @@
+import { ComponentProvider, AppRegistry } from 'react-native';
+
+export class AppRegistryService {
+  registerComponent(appKey: string, getComponentFunc: ComponentProvider) {
+    AppRegistry.registerComponent(appKey, getComponentFunc);
+  }
+}

lib/src/adapters/Element.tsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { requireNativeComponent } from 'react-native';
 
-let RNNElement: React.ComponentType<any>;
-
-export class Element extends React.Component<{ elementId: any; resizeMode?: any }> {
+export class Element extends React.Component<{ elementId: string; resizeMode?: string }> {
   static propTypes = {
     elementId: PropTypes.string.isRequired,
     resizeMode: PropTypes.string
@@ -19,8 +17,6 @@ export class Element extends React.Component<{ elementId: any; resizeMode?: any
   }
 }
 
-RNNElement = requireNativeComponent('RNNElement', Element, {
-  nativeOnly: {
-    nativeID: true
-  }
+const RNNElement = requireNativeComponent('RNNElement', Element, {
+  nativeOnly: { nativeID: true }
 });

lib/src/adapters/NativeEventsReceiver.ts

@@ -1,5 +1,4 @@
-import { NativeModules, NativeEventEmitter } from 'react-native';
-import { EventSubscription } from '../interfaces/EventSubscription';
+import { NativeModules, NativeEventEmitter, EventEmitter, EmitterSubscription } from 'react-native';
 import {
   ComponentDidAppearEvent,
   ComponentDidDisappearEvent,
@@ -12,7 +11,7 @@ import {
 import { CommandCompletedEvent, BottomTabSelectedEvent } from '../interfaces/Events';
 
 export class NativeEventsReceiver {
-  private emitter: { addListener(event: string, callback: any): EventSubscription };
+  private emitter: EventEmitter;
   constructor() {
     // NOTE: This try catch is workaround for integration tests
     // TODO: mock NativeEventEmitter in integration tests rather done adding try catch in source code
@@ -25,47 +24,47 @@ export class NativeEventsReceiver {
             remove: () => undefined
           };
         }
-      };
+      } as any as EventEmitter;
     }
   }
 
-  public registerAppLaunchedListener(callback: () => void): EventSubscription {
+  public registerAppLaunchedListener(callback: () => void): EmitterSubscription {
     return this.emitter.addListener('RNN.AppLaunched', callback);
   }
 
-  public registerComponentDidAppearListener(callback: (event: ComponentDidAppearEvent) => void): EventSubscription {
+  public registerComponentDidAppearListener(callback: (event: ComponentDidAppearEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.ComponentDidAppear', callback);
   }
 
-  public registerComponentDidDisappearListener(callback: (event: ComponentDidDisappearEvent) => void): EventSubscription {
+  public registerComponentDidDisappearListener(callback: (event: ComponentDidDisappearEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.ComponentDidDisappear', callback);
   }
 
-  public registerNavigationButtonPressedListener(callback: (event: NavigationButtonPressedEvent) => void): EventSubscription {
+  public registerNavigationButtonPressedListener(callback: (event: NavigationButtonPressedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.NavigationButtonPressed', callback);
   }
 
-  public registerModalDismissedListener(callback: (event: ModalDismissedEvent) => void): EventSubscription {
+  public registerModalDismissedListener(callback: (event: ModalDismissedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.ModalDismissed', callback);
   }
 
-  public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EventSubscription {
+  public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.SearchBarUpdated', callback);
   }
 
-  public registerSearchBarCancelPressedListener(callback: (event: SearchBarCancelPressedEvent) => void): EventSubscription {
+  public registerSearchBarCancelPressedListener(callback: (event: SearchBarCancelPressedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.SearchBarCancelPressed', callback);
   }
 
-  public registerPreviewCompletedListener(callback: (event: PreviewCompletedEvent) => void): EventSubscription {
+  public registerPreviewCompletedListener(callback: (event: PreviewCompletedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.PreviewCompleted', callback);
   }
 
-  public registerCommandCompletedListener(callback: (data: CommandCompletedEvent) => void): EventSubscription {
+  public registerCommandCompletedListener(callback: (data: CommandCompletedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.CommandCompleted', callback);
   }
 
-  public registerBottomTabSelectedListener(callback: (data: BottomTabSelectedEvent) => void): EventSubscription {
+  public registerBottomTabSelectedListener(callback: (data: BottomTabSelectedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.BottomTabSelected', callback);
   }
 }

lib/src/adapters/UniqueIdProvider.ts

@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 
 export class UniqueIdProvider {
-  generate(prefix: string): string {
+  generate(prefix?: string): string {
     return _.uniqueId(prefix);
   }
 }

lib/src/commands/Commands.test.ts

@@ -19,7 +19,7 @@ describe('Commands', () => {
 
   beforeEach(() => {
     store = new Store();
-    commandsObserver = new CommandsObserver();
+    commandsObserver = new CommandsObserver(new UniqueIdProvider());
     mockedNativeCommandsSender = mock(NativeCommandsSender);
     nativeCommandsSender = instance(mockedNativeCommandsSender);
 

lib/src/commands/Commands.ts

@@ -57,14 +57,14 @@ export class Commands {
     this.commandsObserver.notify('mergeOptions', { componentId, options });
   }
 
-  public showModal(simpleApi: Layout) {
-    const input = _.cloneDeep(simpleApi);
-    const layout = this.layoutTreeParser.parse(input);
-    this.layoutTreeCrawler.crawl(layout);
+  public showModal(layout: Layout) {
+    const layoutCloned = _.cloneDeep(layout);
+    const layoutNode = this.layoutTreeParser.parse(layoutCloned);
+    this.layoutTreeCrawler.crawl(layoutNode);
 
     const commandId = this.uniqueIdProvider.generate('showModal');
-    const result = this.nativeCommandsSender.showModal(commandId, layout);
-    this.commandsObserver.notify('showModal', { commandId, layout });
+    const result = this.nativeCommandsSender.showModal(commandId, layoutNode);
+    this.commandsObserver.notify('showModal', { commandId, layout: layoutNode });
     return result;
   }