CommandsObserver

lib/src/Navigation.ts

 import { EventsRegistry } from './events/EventsRegistry';
 import { ComponentProvider } from 'react-native';
 import { Element } from './adapters/Element';
-import { ComponentEventsRegistry } from './events/ComponentEventsRegistry';
+import { ComponentEventsObserver } from './events/ComponentEventsObserver';
+import { CommandsObserver } from './events/CommandsObserver';
 
 export class Navigation {
   public readonly Element;
   private readonly nativeCommandsSender;
   private readonly commands;
   private readonly eventsRegistry;
+  private readonly commandsObserver;
+  private readonly componentEventsObserver;
 
   constructor() {
     this.Element = Element;
     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.eventsRegistry = new EventsRegistry(this.nativeEventsReceiver);
+    this.commandsObserver = new CommandsObserver();
+    this.commands = new Commands(this.nativeCommandsSender, this.layoutTreeParser, this.layoutTreeCrawler, this.commandsObserver);
+    this.eventsRegistry = new EventsRegistry(this.nativeEventsReceiver, this.commandsObserver);
+    this.componentEventsObserver = new ComponentEventsObserver(this.eventsRegistry, this.store);
 
-    new ComponentEventsRegistry(this.eventsRegistry, this.store).registerForAllComponents();
+    this.componentEventsObserver.registerForAllComponents();
   }
 
   /**

lib/src/adapters/NativeEventsReceiver.ts

 import { NativeModules, NativeEventEmitter } from 'react-native';
-
-export interface EventSubscription {
-  remove();
-}
+import { EventSubscription } from '../events/EventsRegistry';
 
 export class NativeEventsReceiver {
   private emitter: NativeEventEmitter;

lib/src/commands/Commands.test.ts

+import * as _ from 'lodash';
 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';
+import { CommandsObserver } from '../events/CommandsObserver';
 
 describe('Commands', () => {
-  let uut;
+  let uut: Commands;
   let mockCommandsSender;
   let store;
+  let commandsObserver: CommandsObserver;
 
   beforeEach(() => {
     mockCommandsSender = new NativeCommandsSender();
     store = new Store();
-
-    uut = new Commands(mockCommandsSender, new LayoutTreeParser(), new LayoutTreeCrawler(new UniqueIdProvider(), store));
+    commandsObserver = new CommandsObserver();
+
+    uut = new Commands(
+      mockCommandsSender,
+      new LayoutTreeParser(),
+      new LayoutTreeCrawler(new UniqueIdProvider(), store),
+      commandsObserver
+    );
   });
 
   describe('setRoot', () => {
 
   describe('pop', () => {
     it('pops a component, passing componentId', () => {
-      uut.pop('theComponentId');
+      uut.pop('theComponentId', {});
       expect(mockCommandsSender.pop).toHaveBeenCalledTimes(1);
-      expect(mockCommandsSender.pop).toHaveBeenCalledWith('theComponentId', undefined);
+      expect(mockCommandsSender.pop).toHaveBeenCalledWith('theComponentId', {});
     });
     it('pops a component, passing componentId and options', () => {
       const options = {
 
     it('pop returns a promise that resolves to componentId', async () => {
       mockCommandsSender.pop.mockReturnValue(Promise.resolve('theComponentId'));
-      const result = await uut.pop('theComponentId');
+      const result = await uut.pop('theComponentId', {});
       expect(result).toEqual('theComponentId');
     });
   });
       expect(mockCommandsSender.dismissOverlay).toHaveBeenCalledWith('Component1');
     });
   });
+
+  describe('notifies commandsObserver', () => {
+    let cb;
+
+    beforeEach(() => {
+      cb = jest.fn();
+      const mockParser = { parse: () => 'parsed' };
+      const mockCrawler = { crawl: (x) => x };
+      commandsObserver.register(cb);
+      uut = new Commands(mockCommandsSender, mockParser, mockCrawler, commandsObserver);
+    });
+
+    it('always call last', () => {
+      const nativeCommandsSenderFns = _.functions(mockCommandsSender);
+      expect(nativeCommandsSenderFns.length).toBeGreaterThan(1);
+
+      // throw when calling any native commands sender
+      _.forEach(nativeCommandsSenderFns, (fn) => {
+        mockCommandsSender[fn].mockImplementation(() => {
+          throw new Error(`throwing from mockNativeCommandsSender`);
+        });
+      });
+
+      // call all commands on uut, all should throw, no commandObservers called
+      const uutFns = Object.getOwnPropertyNames(Commands.prototype);
+      const methods = _.filter(uutFns, (fn) => fn !== 'constructor');
+      expect(methods.sort()).toEqual(nativeCommandsSenderFns.sort());
+
+      _.forEach(methods, (m) => {
+        expect(() => uut[m]()).toThrow();
+        expect(cb).not.toHaveBeenCalled();
+      });
+    });
+
+    it('setRoot', () => {
+      uut.setRoot({});
+      expect(cb).toHaveBeenCalledTimes(1);
+      expect(cb).toHaveBeenCalledWith('setRoot', { layout: 'parsed' });
+    });
+
+    it('setDefaultOptions', () => {
+      const options = { x: 1 };
+      uut.setDefaultOptions(options);
+      expect(cb).toHaveBeenCalledTimes(1);
+      expect(cb).toHaveBeenCalledWith('setDefaultOptions', { options });
+    });
+
+    xit('setOptions', () => {
+      const options = { x: 1 };
+      uut.setOptions('compId', options);
+      expect(cb).toHaveBeenCalledTimes(1);
+      expect(cb).toHaveBeenCalledWith('setOptions', { componentId: 'compId', options: {} });
+    });
+  });
 });

lib/src/commands/Commands.ts

 import * as _ from 'lodash';
 import { OptionsProcessor } from './OptionsProcessor';
+import { CommandsObserver } from '../events/CommandsObserver';
 
 export class Commands {
-  private nativeCommandsSender;
-  private layoutTreeParser;
-  private layoutTreeCrawler;
   private optionsProcessor: OptionsProcessor;
 
-  constructor(nativeCommandsSender, layoutTreeParser, layoutTreeCrawler) {
-    this.nativeCommandsSender = nativeCommandsSender;
-    this.layoutTreeParser = layoutTreeParser;
-    this.layoutTreeCrawler = layoutTreeCrawler;
+  constructor(
+    private readonly nativeCommandsSender,
+    private readonly layoutTreeParser,
+    private readonly layoutTreeCrawler,
+    private readonly commandsObserver: CommandsObserver) {
     this.optionsProcessor = new OptionsProcessor(this.layoutTreeCrawler.store);
   }
 
-  setRoot(simpleApi) {
+  public setRoot(simpleApi) {
     const input = _.cloneDeep(simpleApi);
     const layout = this.layoutTreeParser.parse(input);
     this.layoutTreeCrawler.crawl(layout);
-    return this.nativeCommandsSender.setRoot(layout);
+
+    const result = this.nativeCommandsSender.setRoot(layout);
+    this.commandsObserver.notify('setRoot', { layout });
+
+    return result;
   }
 
-  setDefaultOptions(options) {
+  public setDefaultOptions(options) {
     const input = _.cloneDeep(options);
     this.optionsProcessor.processOptions(input);
+
     this.nativeCommandsSender.setDefaultOptions(input);
+    this.commandsObserver.notify('setDefaultOptions', { options });
   }
 
-  setOptions(componentId, options) {
+  public setOptions(componentId, options) {
     const input = _.cloneDeep(options);
     this.optionsProcessor.processOptions(input);
+
     this.nativeCommandsSender.setOptions(componentId, input);
+    this.commandsObserver.notify('setOptions', { componentId, options });
   }
 
-  showModal(simpleApi) {
+  public showModal(simpleApi) {
     const input = _.cloneDeep(simpleApi);
     const layout = this.layoutTreeParser.parse(input);
     this.layoutTreeCrawler.crawl(layout);
     return this.nativeCommandsSender.showModal(layout);
   }
 
-  dismissModal(id) {
+  public dismissModal(id) {
     return this.nativeCommandsSender.dismissModal(id);
   }
 
-  dismissAllModals() {
+  public dismissAllModals() {
     return this.nativeCommandsSender.dismissAllModals();
   }
 
-  push(onComponentId, componentData) {
+  public push(onComponentId, componentData) {
     const input = _.cloneDeep(componentData);
     this.optionsProcessor.processOptions(input);
     const layout = this.layoutTreeParser.parse(input);
     return this.nativeCommandsSender.push(onComponentId, layout);
   }
 
-  pop(componentId, options) {
+  public pop(componentId, options) {
     return this.nativeCommandsSender.pop(componentId, options);
   }
 
-  popTo(componentId) {
+  public popTo(componentId) {
     return this.nativeCommandsSender.popTo(componentId);
   }
 
-  popToRoot(componentId) {
+  public popToRoot(componentId) {
     return this.nativeCommandsSender.popToRoot(componentId);
   }
 
-  showOverlay(componentData) {
+  public showOverlay(componentData) {
     const input = _.cloneDeep(componentData);
     this.optionsProcessor.processOptions(input);
 
     return this.nativeCommandsSender.showOverlay(layout);
   }
 
-  dismissOverlay(componentId) {
+  public dismissOverlay(componentId) {
     return this.nativeCommandsSender.dismissOverlay(componentId);
   }
 }

lib/src/events/CommandsObserver.test.ts

+import { CommandsObserver } from './CommandsObserver';
+
+describe('CommandsObserver', () => {
+  let uut: CommandsObserver;
+  let cb1;
+  let cb2;
+
+  beforeEach(() => {
+    cb1 = jest.fn();
+    cb2 = jest.fn();
+    uut = new CommandsObserver();
+  });
+
+  it('register and notify listener', () => {
+    const theCommandName = 'theCommandName';
+    const theParams = { x: 1 };
+
+    uut.register(cb1);
+    uut.register(cb2);
+
+    expect(cb1).toHaveBeenCalledTimes(0);
+    expect(cb2).toHaveBeenCalledTimes(0);
+
+    uut.notify(theCommandName, theParams);
+
+    expect(cb1).toHaveBeenCalledTimes(1);
+    expect(cb1).toHaveBeenCalledWith(theCommandName, theParams);
+    expect(cb2).toHaveBeenCalledTimes(1);
+    expect(cb2).toHaveBeenCalledWith(theCommandName, theParams);
+  });
+
+  it('remove listener', () => {
+    uut.register(cb1);
+    const result = uut.register(cb2);
+    expect(result).toBeDefined();
+
+    uut.notify('commandName', {});
+    expect(cb1).toHaveBeenCalledTimes(1);
+    expect(cb2).toHaveBeenCalledTimes(1);
+
+    result.remove();
+
+    uut.notify('commandName', {});
+    expect(cb1).toHaveBeenCalledTimes(2);
+    expect(cb2).toHaveBeenCalledTimes(1);
+  });
+});

lib/src/events/CommandsObserver.ts

+import * as _ from 'lodash';
+import { EventSubscription } from './EventsRegistry';
+
+export type CommandsListener = (name: string, params: {}) => void;
+
+export class CommandsObserver {
+  private readonly listeners = {};
+
+  public register(listener: CommandsListener): EventSubscription {
+    const id = _.uniqueId();
+    _.set(this.listeners, id, listener);
+    return {
+      remove: () => _.unset(this.listeners, id)
+    };
+  }
+
+  public notify(commandName: string, params: {}): void {
+    _.forEach(this.listeners, (listener) => listener(commandName, params));
+  }
+}

lib/src/events/ComponentEventsRegistry.test.ts → lib/src/events/ComponentEventsObserver.test.ts

-import { ComponentEventsRegistry } from './ComponentEventsRegistry';
+import { ComponentEventsObserver } from './ComponentEventsObserver';
 import { Store } from '../components/Store';
 
 describe(`ComponentEventRegistry`, () => {
-  let uut: ComponentEventsRegistry;
+  let uut: ComponentEventsObserver;
   let eventRegistry;
   let store: Store;
   let mockComponentRef;
     store = new Store();
     store.setRefForId(refId, mockComponentRef);
 
-    uut = new ComponentEventsRegistry(eventRegistry, store);
+    uut = new ComponentEventsObserver(eventRegistry, store);
   });
 
   it('register for lifecycle events on eventRegistry', () => {

lib/src/events/ComponentEventsRegistry.ts → lib/src/events/ComponentEventsObserver.ts

 import { EventsRegistry } from './EventsRegistry';
 import { Store } from '../components/Store';
 
-export class ComponentEventsRegistry {
+export class ComponentEventsObserver {
   constructor(private eventsRegistry: EventsRegistry, private store: Store) {
     this.componentDidAppear = this.componentDidAppear.bind(this);
     this.componentDidDisappear = this.componentDidDisappear.bind(this);

lib/src/events/EventsRegistry.test.ts

 import { EventsRegistry } from './EventsRegistry';
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
+import { CommandsObserver } from './CommandsObserver';
 
 describe('EventsRegistry', () => {
   let uut: EventsRegistry;
-  let mockNativeEventsReceiver;
+  const mockNativeEventsReceiver = new NativeEventsReceiver();
+  let commandsObserver: CommandsObserver;
 
   beforeEach(() => {
-    mockNativeEventsReceiver = new NativeEventsReceiver();
-    uut = new EventsRegistry(mockNativeEventsReceiver);
+    commandsObserver = new CommandsObserver();
+    uut = new EventsRegistry(mockNativeEventsReceiver, commandsObserver);
   });
 
   it('exposes onAppLaunched event', () => {
     mockNativeEventsReceiver.registerOnNavigationButtonPressed.mock.calls[0][0]({ componentId: 'theId', buttonId: 'theBtnId' });
     expect(cb).toHaveBeenCalledWith('theId', 'theBtnId');
   });
+
+  it('exposes onNavigationCommand registers listener to commandObserver', () => {
+    const cb = jest.fn();
+    const result = uut.onNavigationCommand(cb);
+    expect(result).toBeDefined();
+    commandsObserver.notify('theCommandName', { x: 1 });
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenCalledWith('theCommandName', { x: 1 });
+  });
+
+  it('onNavigationCommand unregister', () => {
+    const cb = jest.fn();
+    const result = uut.onNavigationCommand(cb);
+    result.remove();
+    commandsObserver.notify('theCommandName', { x: 1 });
+    expect(cb).not.toHaveBeenCalled();
+  });
 });

lib/src/events/EventsRegistry.ts

-import { EventSubscription, NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
+import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
+import { CommandsObserver } from './CommandsObserver';
 
-export class EventsRegistry {
-  private nativeEventsReceiver: NativeEventsReceiver;
+export interface EventSubscription {
+  remove();
+}
 
-  constructor(nativeEventsReceiver: NativeEventsReceiver) {
-    this.nativeEventsReceiver = nativeEventsReceiver;
-  }
+export class EventsRegistry {
+  constructor(private nativeEventsReceiver: NativeEventsReceiver, private commandsObserver: CommandsObserver) { }
 
   public onAppLaunched(callback: () => void): EventSubscription {
     return this.nativeEventsReceiver.registerOnAppLaunched(callback);
   public onNavigationButtonPressed(callback: (componentId: string, buttonId: string) => void): EventSubscription {
     return this.nativeEventsReceiver.registerOnNavigationButtonPressed(({ componentId, buttonId }) => callback(componentId, buttonId));
   }
+
+  public onNavigationCommand(callback: (name: string, params: any) => void): EventSubscription {
+    return this.commandsObserver.register(callback);
+  }
 }