rename to Component

lib/src/Navigation.js

@@ -1,17 +1,14 @@
 const NativeCommandsSender = require('./adapters/NativeCommandsSender');
 const NativeEventsReceiver = require('./adapters/NativeEventsReceiver');
 const UniqueIdProvider = require('./adapters/UniqueIdProvider');
-const Store = require('./containers/Store');
-const ContainerRegistry = require('./containers/ContainerRegistry');
+const Store = require('./components/Store');
+const ComponentRegistry = require('./components/ComponentRegistry');
 const Commands = require('./commands/Commands');
 const LayoutTreeParser = require('./commands/LayoutTreeParser');
 const LayoutTreeCrawler = require('./commands/LayoutTreeCrawler');
 const PrivateEventsListener = require('./events/PrivateEventsListener');
 const PublicEventsRegistry = require('./events/PublicEventsRegistry');
 const Element = require('./adapters/Element');
-// const Root = require('./params/containers/Root');
-// const Container = require('./params/containers/Container');
-// const Options = require('./params/options/Options');
 
 /** @constructor */
 class Navigation {
@@ -19,7 +16,7 @@ class Navigation {
     this.store = new Store();
     this.nativeEventsReceiver = new NativeEventsReceiver();
     this.uniqueIdProvider = new UniqueIdProvider();
-    this.containerRegistry = new ContainerRegistry(this.store);
+    this.componentRegistry = new ComponentRegistry(this.store);
     this.layoutTreeParser = new LayoutTreeParser();
     this.layoutTreeCrawler = new LayoutTreeCrawler(this.uniqueIdProvider, this.store);
     this.nativeCommandsSender = new NativeCommandsSender();
@@ -31,16 +28,16 @@ class Navigation {
   }
 
   /**
-   * Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
-   * @param {string} containerName Unique container name
-   * @param {function} getContainerFunc generator function, typically `() => require('./myContainer')`
+   * Every navigation component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
+   * @param {string} componentName Unique component name
+   * @param {function} getComponentClassFunc generator function, typically `() => require('./myComponent')`
    */
-  registerContainer(containerName, getContainerFunc) {
-    this.containerRegistry.registerContainer(containerName, getContainerFunc);
+  registerComponent(componentName, getComponentClassFunc) {
+    this.componentRegistry.registerComponent(componentName, getComponentClassFunc);
   }
 
   /**
-   * Reset the navigation stack to a new screen (the stack root is changed).
+   * Reset the navigation stack to a new component (the stack root is changed).
    * @param {Root} root
    */
   setRoot(params) {
@@ -56,12 +53,12 @@ class Navigation {
   }
 
   /**
-   * Change a containers navigation options
-   * @param {string} containerId The container's id.
+   * Change a components navigation options
+   * @param {string} componentId The component's id.
    * @param {options:Options} options
    */
-  setOptions(containerId, options) {
-    this.commands.setOptions(containerId, options);
+  setOptions(componentId, options) {
+    this.commands.setOptions(componentId, options);
   }
 
   /**
@@ -73,11 +70,11 @@ class Navigation {
   }
 
   /**
-   * Dismiss a modal by containerId. The dismissed modal can be anywhere in the stack.
-   * @param {string} containerId The container's id.
+   * Dismiss a modal by componentId. The dismissed modal can be anywhere in the stack.
+   * @param {string} componentId The component's id.
    */
-  dismissModal(containerId) {
-    return this.commands.dismissModal(containerId);
+  dismissModal(componentId) {
+    return this.commands.dismissModal(componentId);
   }
 
   /**
@@ -89,36 +86,36 @@ class Navigation {
 
   /**
    * Push a new screen into this screen's navigation stack.
-   * @param {string} containerId The container's id.
-   * @param {Container} container
+   * @param {string} componentId The component's id.
+   * @param {Container} component
    */
-  push(containerId, container) {
-    return this.commands.push(containerId, container);
+  push(componentId, component) {
+    return this.commands.push(componentId, component);
   }
 
   /**
-   * Pop a container from the stack, regardless of it's position.
-   * @param {string} containerId The container's id.
+   * Pop a component from the stack, regardless of it's position.
+   * @param {string} componentId The component's id.
    * @param {*} params
    */
-  pop(containerId, params) {
-    return this.commands.pop(containerId, params);
+  pop(componentId, params) {
+    return this.commands.pop(componentId, params);
   }
 
   /**
-   * Pop the stack to a given container
-   * @param {string} containerId The container's id.
+   * Pop the stack to a given component
+   * @param {string} componentId The component's id.
    */
-  popTo(containerId) {
-    return this.commands.popTo(containerId);
+  popTo(componentId) {
+    return this.commands.popTo(componentId);
   }
 
   /**
-   * Pop the container's stack to root.
-   * @param {*} containerId
+   * Pop the component's stack to root.
+   * @param {*} componentId
    */
-  popToRoot(containerId) {
-    return this.commands.popToRoot(containerId);
+  popToRoot(componentId) {
+    return this.commands.popToRoot(componentId);
   }
 
   /**

lib/src/components/ComponentRegistry.js

@@ -0,0 +1,17 @@
+const { AppRegistry } = require('react-native');
+const ComponentWrapper = require('./ComponentWrapper');
+
+class ComponentRegistry {
+  constructor(store) {
+    this.store = store;
+  }
+
+  registerComponent(componentName, getComponentClassFunc) {
+    const OriginalComponentClass = getComponentClassFunc();
+    const NavigationComponent = ComponentWrapper.wrap(componentName, OriginalComponentClass, this.store);
+    this.store.setOriginalComponentClassForName(componentName, OriginalComponentClass);
+    AppRegistry.registerComponent(componentName, () => NavigationComponent);
+  }
+}
+
+module.exports = ComponentRegistry;

lib/src/components/ComponentWrapper.js

@@ -0,0 +1,75 @@
+const _ = require('lodash');
+
+const React = require('react');
+const { Component } = require('react');
+
+class ComponentWrapper {
+  static wrap(componentName, OriginalComponent, store) {
+    return class extends Component {
+      constructor(props) {
+        super(props);
+        this._saveComponentRef = this._saveComponentRef.bind(this);
+        this._assertComponentId(props);
+        this.state = {
+          componentId: props.componentId,
+          allProps: _.merge({}, props, store.getPropsForComponentId(props.componentId))
+        };
+      }
+
+      _assertComponentId(props) {
+        if (!props.componentId) {
+          throw new Error(`Component ${componentName} does not have a componentId!`);
+        }
+      }
+
+      _saveComponentRef(r) {
+        this.originalComponentRef = r;
+      }
+
+      componentWillMount() {
+        store.setRefForComponentId(this.state.componentId, this);
+      }
+
+      componentWillUnmount() {
+        store.cleanId(this.state.componentId);
+      }
+
+      didAppear() {
+        if (this.originalComponentRef.didAppear) {
+          this.originalComponentRef.didAppear();
+        }
+      }
+
+      didDisappear() {
+        if (this.originalComponentRef.didDisappear) {
+          this.originalComponentRef.didDisappear();
+        }
+      }
+
+      onNavigationButtonPressed(buttonId) {
+        if (this.originalComponentRef.onNavigationButtonPressed) {
+          this.originalComponentRef.onNavigationButtonPressed(buttonId);
+        }
+      }
+
+      componentWillReceiveProps(nextProps) {
+        this.setState({
+          allProps: _.merge({}, nextProps, store.getPropsForComponentId(this.state.componentId))
+        });
+      }
+
+      render() {
+        return (
+          <OriginalComponent
+            ref={this._saveComponentRef}
+            {...this.state.allProps}
+            componentId={this.state.componentId}
+            key={this.state.componentId}
+          />
+        );
+      }
+    };
+  }
+}
+
+module.exports = ComponentWrapper;

lib/src/components/ComponentWrapper.test.js

@@ -0,0 +1,191 @@
+const React = require('react');
+const { Component } = require('react');
+
+const { Text } = require('react-native');
+const renderer = require('react-test-renderer');
+const ComponentWrapper = require('./ComponentWrapper');
+const Store = require('./Store');
+
+describe('ComponentWrapper', () => {
+  let store;
+  const componentName = 'example.MyComponent';
+  let childRef;
+
+  class MyComponent extends Component {
+    render() {
+      return <Text>{'Hello, World!'}</Text>;
+    }
+  }
+
+  class TestParent extends Component {
+    constructor(props) {
+      super(props);
+      this.ChildClass = props.ChildClass;
+      this.state = { propsFromState: {} };
+    }
+
+    render() {
+      const Child = this.ChildClass;
+      return (
+        <Child
+          ref={(r) => childRef = r}
+          componentId="component1"
+          {...this.state.propsFromState}
+        />
+      );
+    }
+  }
+
+  beforeEach(() => {
+    store = new Store();
+  });
+
+  it('must have componentId as prop', () => {
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
+    const orig = console.error;
+    console.error = (a) => a;
+    expect(() => {
+      renderer.create(<NavigationComponent />);
+    }).toThrow(new Error('Component example.MyComponent does not have a componentId!'));
+    console.error = orig;
+  });
+
+  it('wraps the component', () => {
+    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);
+  });
+
+  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');
+  });
+
+  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' } });
+    expect(childRef.props.foo).toEqual('yo');
+  });
+
+  it('pulls props from the store and injects them into the inner component', () => {
+    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;
+    expect(originalComponentProps).toEqual({ componentId: 'component123', numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
+  });
+
+  it('updates props from store into inner component', () => {
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
+    const tree = renderer.create(<TestParent ChildClass={NavigationComponent} />);
+    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' } });
+    expect(childRef.originalComponentRef.props.foo).toEqual('yo');
+    expect(childRef.originalComponentRef.props.myProp).toEqual('hello');
+  });
+
+  it('protects id from change', () => {
+    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' } });
+    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');
+  });
+
+  it('saves self ref into store', () => {
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
+    const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
+    expect(store.getRefForComponentId('component1')).toBeDefined();
+    expect(store.getRefForComponentId('component1')).toBe(tree.getInstance());
+  });
+
+  it('cleans ref from store on unMount', () => {
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
+    const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
+    expect(store.getRefForComponentId('component1')).toBeDefined();
+    tree.unmount();
+    expect(store.getRefForComponentId('component1')).toBeUndefined();
+  });
+
+  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);
+  });
+
+  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();
+    expect(instance.originalComponentRef).toBeInstanceOf(Component);
+    tree.unmount();
+    expect(instance.originalComponentRef).toBeFalsy();
+  });
+
+  describe('component lifecycle', () => {
+    const didAppearCallback = jest.fn();
+    const didDisappearCallback = jest.fn();
+    const onNavigationButtonPressedCallback = jest.fn();
+
+    class MyLifecycleComponent extends MyComponent {
+      didAppear() {
+        didAppearCallback();
+      }
+
+      didDisappear() {
+        didDisappearCallback();
+      }
+
+      onNavigationButtonPressed() {
+        onNavigationButtonPressedCallback();
+      }
+    }
+
+    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();
+    });
+
+    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();
+      expect(didAppearCallback).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls didDisappear on OriginalComponent', () => {
+      const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
+      const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
+      expect(didDisappearCallback).toHaveBeenCalledTimes(0);
+      tree.getInstance().didDisappear();
+      expect(didDisappearCallback).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onNavigationButtonPressed on OriginalComponent', () => {
+      const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
+      const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
+      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(0);
+      tree.getInstance().onNavigationButtonPressed();
+      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -1,27 +1,27 @@
 class Lifecycle {
   constructor(store) {
     this.store = store;
-    this.containerDidAppear = this.containerDidAppear.bind(this);
-    this.containerDidDisappear = this.containerDidDisappear.bind(this);
+    this.componentDidAppear = this.componentDidAppear.bind(this);
+    this.componentDidDisappear = this.componentDidDisappear.bind(this);
     this.onNavigationButtonPressed = this.onNavigationButtonPressed.bind(this);
   }
 
-  containerDidAppear(id) {
-    const ref = this.store.getRefForContainerId(id);
+  componentDidAppear(id) {
+    const ref = this.store.getRefForComponentId(id);
     if (ref && ref.didAppear) {
       ref.didAppear();
     }
   }
 
-  containerDidDisappear(id) {
-    const ref = this.store.getRefForContainerId(id);
+  componentDidDisappear(id) {
+    const ref = this.store.getRefForComponentId(id);
     if (ref && ref.didDisappear) {
       ref.didDisappear();
     }
   }
 
   onNavigationButtonPressed(params) {
-    const ref = this.store.getRefForContainerId(params.containerId);
+    const ref = this.store.getRefForComponentId(params.componentId);
     if (ref && ref.onNavigationButtonPressed) {
       ref.onNavigationButtonPressed(params.buttonId);
     }

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

@@ -1,5 +1,5 @@
 const Lifecycle = require('./Lifecycle');
-const Store = require('../containers/Store');
+const Store = require('../components/Store');
 
 describe('Lifecycle', () => {
   let store;
@@ -13,53 +13,53 @@ describe('Lifecycle', () => {
       onNavigationButtonPressed: jest.fn()
     };
     store = new Store();
-    store.setRefForContainerId('myUniqueId', mockRef);
+    store.setRefForComponentId('myUniqueId', mockRef);
 
     uut = new Lifecycle(store);
   });
 
-  describe('containerDidAppear', () => {
-    it('calls didAppear on container ref from store', () => {
-      uut.containerDidAppear('myUniqueId');
+  describe('componentDidAppear', () => {
+    it('calls didAppear on component ref from store', () => {
+      uut.componentDidAppear('myUniqueId');
       expect(mockRef.didAppear).toHaveBeenCalledTimes(1);
     });
 
     it('skips undefined refs', () => {
-      uut.containerDidAppear('myUniqueId2');
+      uut.componentDidAppear('myUniqueId2');
       expect(mockRef.didAppear).not.toHaveBeenCalled();
     });
 
     it('skips unimplemented didAppear', () => {
       mockRef = {};
       expect(mockRef.didAppear).toBeUndefined();
-      store.setRefForContainerId('myUniqueId', mockRef);
-      uut.containerDidAppear('myUniqueId');
+      store.setRefForComponentId('myUniqueId', mockRef);
+      uut.componentDidAppear('myUniqueId');
     });
   });
 
-  describe('containerDidDisappear', () => {
-    it('calls didDisappear on container ref from store', () => {
-      uut.containerDidDisappear('myUniqueId');
+  describe('componentDidDisappear', () => {
+    it('calls didDisappear on component ref from store', () => {
+      uut.componentDidDisappear('myUniqueId');
       expect(mockRef.didDisappear).toHaveBeenCalledTimes(1);
     });
 
     it('skips undefined refs', () => {
-      uut.containerDidDisappear('myUniqueId2');
+      uut.componentDidDisappear('myUniqueId2');
       expect(mockRef.didDisappear).not.toHaveBeenCalled();
     });
 
     it('skips unimplemented didDisappear', () => {
       mockRef = {};
       expect(mockRef.didDisappear).toBeUndefined();
-      store.setRefForContainerId('myUniqueId', mockRef);
-      uut.containerDidDisappear('myUniqueId');
+      store.setRefForComponentId('myUniqueId', mockRef);
+      uut.componentDidDisappear('myUniqueId');
     });
   });
 
   describe('onNavigationButtonPressed', () => {
-    it('calls onNavigationButtonPressed on container ref from store', () => {
+    it('calls onNavigationButtonPressed on component ref from store', () => {
       uut.onNavigationButtonPressed({
-        containerId: 'myUniqueId',
+        componentId: 'myUniqueId',
         buttonId: 'myButtonId'
       });
       expect(mockRef.onNavigationButtonPressed).toHaveBeenCalledTimes(1);
@@ -73,8 +73,8 @@ describe('Lifecycle', () => {
     it('skips unimplemented onNavigationButtonPressed', () => {
       mockRef = {};
       expect(mockRef.onNavigationButtonPressed).toBeUndefined();
-      store.setRefForContainerId('myUniqueId', mockRef);
-      uut.containerDidAppear('myUniqueId');
+      store.setRefForComponentId('myUniqueId', mockRef);
+      uut.componentDidAppear('myUniqueId');
     });
   });
 });

lib/src/components/Store.js

@@ -0,0 +1,40 @@
+const _ = require('lodash');
+
+class Store {
+  constructor() {
+    this.propsByComponentId = {};
+    this.componentsByName = {};
+    this.refsById = {};
+  }
+
+  setPropsForComponentId(componentId, props) {
+    _.set(this.propsByComponentId, componentId, props);
+  }
+
+  getPropsForComponentId(componentId) {
+    return _.get(this.propsByComponentId, componentId, {});
+  }
+
+  setOriginalComponentClassForName(componentName, ComponentClass) {
+    _.set(this.componentsByName, componentName, ComponentClass);
+  }
+
+  getOriginalComponentClassForName(componentName) {
+    return _.get(this.componentsByName, componentName);
+  }
+
+  setRefForComponentId(id, ref) {
+    _.set(this.refsById, id, ref);
+  }
+
+  getRefForComponentId(id) {
+    return _.get(this.refsById, id);
+  }
+
+  cleanId(id) {
+    _.unset(this.refsById, id);
+    _.unset(this.propsByComponentId, id);
+  }
+}
+
+module.exports = Store;

lib/src/components/Store.test.js

@@ -0,0 +1,50 @@
+const Store = require('./Store');
+
+describe('Store', () => {
+  let uut;
+
+  beforeEach(() => {
+    uut = new Store();
+  });
+
+  it('initial state', () => {
+    expect(uut.getPropsForComponentId('component1')).toEqual({});
+  });
+
+  it('holds props by componentId', () => {
+    uut.setPropsForComponentId('component1', { a: 1, b: 2 });
+    expect(uut.getPropsForComponentId('component1')).toEqual({ a: 1, b: 2 });
+  });
+
+  it('defensive for invalid componentId and props', () => {
+    uut.setPropsForComponentId('component1', undefined);
+    uut.setPropsForComponentId(undefined, undefined);
+    expect(uut.getPropsForComponentId('component1')).toEqual({});
+  });
+
+  it('holds original components classes by componentName', () => {
+    const MyComponent = class {
+      //
+    };
+    uut.setOriginalComponentClassForName('example.mycomponent', MyComponent);
+    expect(uut.getOriginalComponentClassForName('example.mycomponent')).toEqual(MyComponent);
+  });
+
+  it('holds component refs by id', () => {
+    const ref = {};
+    uut.setRefForComponentId('refUniqueId', ref);
+    expect(uut.getRefForComponentId('other')).toBeUndefined();
+    expect(uut.getRefForComponentId('refUniqueId')).toBe(ref);
+  });
+
+  it('clean by id', () => {
+    uut.setRefForComponentId('refUniqueId', {});
+    uut.setPropsForComponentId('refUniqueId', { foo: 'bar' });
+
+    uut.cleanId('refUniqueId');
+
+    expect(uut.getRefForComponentId('refUniqueId')).toBeUndefined();
+    expect(uut.getPropsForComponentId('refUniqueId')).toEqual({});
+  });
+});
+

lib/src/containers/ContainerRegistry.js

@@ -1,17 +0,0 @@
-const { AppRegistry } = require('react-native');
-const ContainerWrapper = require('./ContainerWrapper');
-
-class ContainerRegistry {
-  constructor(store) {
-    this.store = store;
-  }
-
-  registerContainer(containerName, getContainerFunc) {
-    const OriginalContainer = getContainerFunc();
-    const NavigationContainer = ContainerWrapper.wrap(containerName, OriginalContainer, this.store);
-    this.store.setOriginalContainerClassForName(containerName, OriginalContainer);
-    AppRegistry.registerComponent(containerName, () => NavigationContainer);
-  }
-}
-
-module.exports = ContainerRegistry;

lib/src/containers/ContainerWrapper.js

@@ -1,75 +0,0 @@
-const _ = require('lodash');
-
-const React = require('react');
-const { Component } = require('react');
-
-class ContainerWrapper {
-  static wrap(containerName, OriginalContainer, store) {
-    return class extends Component {
-      constructor(props) {
-        super(props);
-        this._saveContainerRef = this._saveContainerRef.bind(this);
-        this._assertContainerId(props);
-        this.state = {
-          containerId: props.containerId,
-          allProps: _.merge({}, props, store.getPropsForContainerId(props.containerId))
-        };
-      }
-
-      _assertContainerId(props) {
-        if (!props.containerId) {
-          throw new Error(`Container ${containerName} does not have a containerId!`);
-        }
-      }
-
-      _saveContainerRef(r) {
-        this.originalContainerRef = r;
-      }
-
-      componentWillMount() {
-        store.setRefForContainerId(this.state.containerId, this);
-      }
-
-      componentWillUnmount() {
-        store.cleanId(this.state.containerId);
-      }
-
-      didAppear() {
-        if (this.originalContainerRef.didAppear) {
-          this.originalContainerRef.didAppear();
-        }
-      }
-
-      didDisappear() {
-        if (this.originalContainerRef.didDisappear) {
-          this.originalContainerRef.didDisappear();
-        }
-      }
-
-      onNavigationButtonPressed(buttonId) {
-        if (this.originalContainerRef.onNavigationButtonPressed) {
-          this.originalContainerRef.onNavigationButtonPressed(buttonId);
-        }
-      }
-
-      componentWillReceiveProps(nextProps) {
-        this.setState({
-          allProps: _.merge({}, nextProps, store.getPropsForContainerId(this.state.containerId))
-        });
-      }
-
-      render() {
-        return (
-          <OriginalContainer
-            ref={this._saveContainerRef}
-            {...this.state.allProps}
-            containerId={this.state.containerId}
-            key={this.state.containerId}
-          />
-        );
-      }
-    };
-  }
-}
-
-module.exports = ContainerWrapper;

lib/src/containers/ContainerWrapper.test.js

@@ -1,191 +0,0 @@
-const React = require('react');
-const { Component } = require('react');
-
-const { Text } = require('react-native');
-const renderer = require('react-test-renderer');
-const ContainerWrapper = require('./ContainerWrapper');
-const Store = require('./Store');
-
-describe('ContainerWrapper', () => {
-  let store;
-  const containerName = 'example.MyContainer';
-  let childRef;
-
-  class MyContainer extends Component {
-    render() {
-      return <Text>{'Hello, World!'}</Text>;
-    }
-  }
-
-  class TestParent extends Component {
-    constructor(props) {
-      super(props);
-      this.ChildClass = props.ChildClass;
-      this.state = { propsFromState: {} };
-    }
-
-    render() {
-      const Child = this.ChildClass;
-      return (
-        <Child
-          ref={(r) => childRef = r}
-          containerId="container1"
-          {...this.state.propsFromState}
-        />
-      );
-    }
-  }
-
-  beforeEach(() => {
-    store = new Store();
-  });
-
-  it('must have containerId as prop', () => {
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const orig = console.error;
-    console.error = (a) => a;
-    expect(() => {
-      renderer.create(<NavigationContainer />);
-    }).toThrow(new Error('Container example.MyContainer does not have a containerId!'));
-    console.error = orig;
-  });
-
-  it('wraps the container', () => {
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    expect(NavigationContainer).not.toBeInstanceOf(MyContainer);
-    const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-    expect(tree.toJSON().children).toEqual(['Hello, World!']);
-    expect(tree.getInstance().originalContainerRef).toBeInstanceOf(MyContainer);
-  });
-
-  it('injects props from wrapper into original container', () => {
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<NavigationContainer containerId={'container1'} myProp={'yo'} />);
-    expect(tree.getInstance().originalContainerRef.props.myProp).toEqual('yo');
-  });
-
-  it('updates props from wrapper into original container', () => {
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<TestParent ChildClass={NavigationContainer} />);
-    expect(childRef.props.foo).toEqual(undefined);
-    tree.getInstance().setState({ propsFromState: { foo: 'yo' } });
-    expect(childRef.props.foo).toEqual('yo');
-  });
-
-  it('pulls props from the store and injects them into the inner container', () => {
-    store.setPropsForContainerId('container123', { numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<NavigationContainer containerId={'container123'} />);
-    const originalContainerProps = tree.getInstance().originalContainerRef.props;
-    expect(originalContainerProps).toEqual({ containerId: 'container123', numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
-  });
-
-  it('updates props from store into inner container', () => {
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<TestParent ChildClass={NavigationContainer} />);
-    store.setPropsForContainerId('container1', { myProp: 'hello' });
-    expect(childRef.originalContainerRef.props.foo).toEqual(undefined);
-    expect(childRef.originalContainerRef.props.myProp).toEqual(undefined);
-    tree.getInstance().setState({ propsFromState: { foo: 'yo' } });
-    expect(childRef.originalContainerRef.props.foo).toEqual('yo');
-    expect(childRef.originalContainerRef.props.myProp).toEqual('hello');
-  });
-
-  it('protects id from change', () => {
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<TestParent ChildClass={NavigationContainer} />);
-    expect(childRef.originalContainerRef.props.containerId).toEqual('container1');
-    tree.getInstance().setState({ propsFromState: { id: 'ERROR' } });
-    expect(childRef.originalContainerRef.props.containerId).toEqual('container1');
-  });
-
-  it('assignes key by id', () => {
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-    expect(tree.getInstance().originalContainerRef.props.containerId).toEqual('container1');
-    expect(tree.getInstance().originalContainerRef._reactInternalInstance.key).toEqual('container1');
-  });
-
-  it('saves self ref into store', () => {
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-    expect(store.getRefForContainerId('container1')).toBeDefined();
-    expect(store.getRefForContainerId('container1')).toBe(tree.getInstance());
-  });
-
-  it('cleans ref from store on unMount', () => {
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-    expect(store.getRefForContainerId('container1')).toBeDefined();
-    tree.unmount();
-    expect(store.getRefForContainerId('container1')).toBeUndefined();
-  });
-
-  it('holds ref to OriginalContainer', () => {
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-    expect(tree.getInstance().originalContainerRef).toBeDefined();
-    expect(tree.getInstance().originalContainerRef).toBeInstanceOf(MyContainer);
-  });
-
-  it('cleans ref to internal container on unount', () => {
-    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-    const instance = tree.getInstance();
-    expect(instance.originalContainerRef).toBeInstanceOf(Component);
-    tree.unmount();
-    expect(instance.originalContainerRef).toBeFalsy();
-  });
-
-  describe('container lifecycle', () => {
-    const didAppearCallback = jest.fn();
-    const didDisappearCallback = jest.fn();
-    const onNavigationButtonPressedCallback = jest.fn();
-
-    class MyLifecycleContainer extends MyContainer {
-      didAppear() {
-        didAppearCallback();
-      }
-
-      didDisappear() {
-        didDisappearCallback();
-      }
-
-      onNavigationButtonPressed() {
-        onNavigationButtonPressedCallback();
-      }
-    }
-
-    it('didAppear, didDisappear and onNavigationButtonPressed are optional', () => {
-      const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-      const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-      expect(() => tree.getInstance().didAppear()).not.toThrow();
-      expect(() => tree.getInstance().didDisappear()).not.toThrow();
-      expect(() => tree.getInstance().onNavigationButtonPressed()).not.toThrow();
-    });
-
-    it('calls didAppear on OriginalContainer', () => {
-      const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
-      const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-      expect(didAppearCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance().didAppear();
-      expect(didAppearCallback).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls didDisappear on OriginalContainer', () => {
-      const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
-      const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-      expect(didDisappearCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance().didDisappear();
-      expect(didDisappearCallback).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls onNavigationButtonPressed on OriginalContainer', () => {
-      const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
-      const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance().onNavigationButtonPressed();
-      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(1);
-    });
-  });
-});

lib/src/containers/Store.js

@@ -1,40 +0,0 @@
-const _ = require('lodash');
-
-class Store {
-  constructor() {
-    this.propsByContainerId = {};
-    this.containersByName = {};
-    this.refsById = {};
-  }
-
-  setPropsForContainerId(containerId, props) {
-    _.set(this.propsByContainerId, containerId, props);
-  }
-
-  getPropsForContainerId(containerId) {
-    return _.get(this.propsByContainerId, containerId, {});
-  }
-
-  setOriginalContainerClassForName(containerName, ContainerClass) {
-    _.set(this.containersByName, containerName, ContainerClass);
-  }
-
-  getOriginalContainerClassForName(containerName) {
-    return _.get(this.containersByName, containerName);
-  }
-
-  setRefForContainerId(id, ref) {
-    _.set(this.refsById, id, ref);
-  }
-
-  getRefForContainerId(id) {
-    return _.get(this.refsById, id);
-  }
-
-  cleanId(id) {
-    _.unset(this.refsById, id);
-    _.unset(this.propsByContainerId, id);
-  }
-}
-
-module.exports = Store;

lib/src/containers/Store.test.js

@@ -1,50 +0,0 @@
-const Store = require('./Store');
-
-describe('Store', () => {
-  let uut;
-
-  beforeEach(() => {
-    uut = new Store();
-  });
-
-  it('initial state', () => {
-    expect(uut.getPropsForContainerId('container1')).toEqual({});
-  });
-
-  it('holds props by containerId', () => {
-    uut.setPropsForContainerId('container1', { a: 1, b: 2 });
-    expect(uut.getPropsForContainerId('container1')).toEqual({ a: 1, b: 2 });
-  });
-
-  it('defensive for invalid containerId and props', () => {
-    uut.setPropsForContainerId('container1', undefined);
-    uut.setPropsForContainerId(undefined, undefined);
-    expect(uut.getPropsForContainerId('container1')).toEqual({});
-  });
-
-  it('holds original containers classes by containerName', () => {
-    const MyComponent = class {
-      //
-    };
-    uut.setOriginalContainerClassForName('example.mycontainer', MyComponent);
-    expect(uut.getOriginalContainerClassForName('example.mycontainer')).toEqual(MyComponent);
-  });
-
-  it('holds container refs by id', () => {
-    const ref = {};
-    uut.setRefForContainerId('refUniqueId', ref);
-    expect(uut.getRefForContainerId('other')).toBeUndefined();
-    expect(uut.getRefForContainerId('refUniqueId')).toBe(ref);
-  });
-
-  it('clean by id', () => {
-    uut.setRefForContainerId('refUniqueId', {});
-    uut.setPropsForContainerId('refUniqueId', { foo: 'bar' });
-
-    uut.cleanId('refUniqueId');
-
-    expect(uut.getRefForContainerId('refUniqueId')).toBeUndefined();
-    expect(uut.getPropsForContainerId('refUniqueId')).toEqual({});
-  });
-});
-