Merge pull request #3429 from ProjectMirador/mirador-viewer

Refactor MiradorViewer to make it easier to get at the store and components

__tests__/src/lib/MiradorViewer.test.js

 import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
 import MiradorViewer from '../../../src/lib/MiradorViewer';
 
 jest.unmock('react-i18next');
@@ -10,7 +11,7 @@ describe('MiradorViewer', () => {
   beforeAll(() => {
     ReactDOM.render = jest.fn();
     ReactDOM.unmountComponentAtNode = jest.fn();
-    instance = new MiradorViewer({});
+    instance = new MiradorViewer({ id: 'mirador' });
   });
   describe('constructor', () => {
     it('returns viewer store', () => {
@@ -104,6 +105,15 @@ describe('MiradorViewer', () => {
       }));
     });
   });
+
+  describe('render', () => {
+    it('passes props through to the App component', () => {
+      const rendered = shallow(instance.render({ some: 'prop' }));
+      expect(rendered.find('App').length).toBe(1);
+      expect(rendered.find('App').prop('some')).toBe('prop');
+    });
+  });
+
   describe('unmount', () => {
     it('unmounts via ReactDOM', () => {
       instance.unmount();

src/lib/MiradorViewer.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import deepmerge from 'deepmerge';
 import HotApp from '../components/App';
-import createStore from '../state/createStore';
-import { importConfig } from '../state/actions/config';
 import {
   filterValidPlugins,
-  getConfigFromPlugins,
-  getReducersFromPlugins,
-  getSagasFromPlugins,
 } from '../extend/pluginPreprocessing';
+import createPluggableStore from '../state/createPluggableStore';
 
 /**
  * Default Mirador instantiation
@@ -19,28 +14,25 @@ class MiradorViewer {
   /**
    */
   constructor(config, viewerConfig = {}) {
-    this.config = config;
     this.plugins = filterValidPlugins(viewerConfig.plugins || []);
+    this.config = config;
     this.store = viewerConfig.store
-      || createStore(getReducersFromPlugins(this.plugins), getSagasFromPlugins(this.plugins));
-    this.processConfig();
+      || createPluggableStore(this.config, this.plugins);
 
-    ReactDOM.render(
-      <Provider store={this.store}>
-        <HotApp plugins={this.plugins} />
-      </Provider>,
+    config.id && ReactDOM.render(
+      this.render(),
       document.getElementById(config.id),
     );
   }
 
   /**
-   * Process config with plugin configs into actions
+   * Render the mirador viewer
    */
-  processConfig() {
-    this.store.dispatch(
-      importConfig(
-        deepmerge(getConfigFromPlugins(this.plugins), this.config),
-      ),
+  render(props = {}) {
+    return (
+      <Provider store={this.store}>
+        <HotApp plugins={this.plugins} {...props} />
+      </Provider>
     );
   }
 
@@ -48,7 +40,7 @@ class MiradorViewer {
    * Cleanup method to unmount Mirador from the dom
    */
   unmount() {
-    ReactDOM.unmountComponentAtNode(document.getElementById(this.config.id));
+    this.config.id && ReactDOM.unmountComponentAtNode(document.getElementById(this.config.id));
   }
 }
 

src/state/createPluggableStore.js

+import deepmerge from 'deepmerge';
+import createStore from './createStore';
+import { importConfig } from './actions/config';
+import {
+  filterValidPlugins,
+  getConfigFromPlugins,
+  getReducersFromPlugins,
+  getSagasFromPlugins,
+} from '../extend/pluginPreprocessing';
+
+/**
+ * Configure Store
+ */
+function createPluggableStore(config, plugins = []) {
+  const filteredPlugins = filterValidPlugins(plugins);
+
+  const store = createStore(
+    getReducersFromPlugins(filteredPlugins),
+    getSagasFromPlugins(filteredPlugins),
+  );
+
+  store.dispatch(
+    importConfig(
+      deepmerge(getConfigFromPlugins(filteredPlugins), config),
+    ),
+  );
+
+  return store;
+}
+
+export default createPluggableStore;