Extract Initializer

.storybook/webpack.config.js

@@ -11,6 +11,7 @@ const include = path.resolve(__dirname, '../');
 // to "React Create App". This only has babel loader to load JavaScript.
 
 module.exports = {
+  devtool: 'source-map',
   entry: './stories/index.tsx',
   output: {
     filename: include + '/dist/examples/storybook.js'

src/index.js

@@ -1,5 +1,4 @@
 import { createStore, combineReducers, bindActionCreators, applyMiddleware, compose } from 'redux';
-import Immutable from 'immutable';
 import { createProvider } from 'react-redux';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -10,20 +9,10 @@ import components from './components';
 import settingsComponentObjects from './settingsComponentObjects';
 import * as selectors from './selectors/dataSelectors';
 
-import { buildGriddleReducer, buildGriddleComponents } from './utils/compositionUtils';
-import { getColumnProperties } from './utils/columnUtils';
-import { getRowProperties } from './utils/rowUtils';
-import { setSortProperties } from './utils/sortUtils';
+import init from './utils/initializer';
 import { StoreListener } from './utils/listenerUtils';
 import * as actions from './actions';
 
-const defaultEvents = {
-  ...actions,
-  onFilter: actions.setFilter,
-  setSortProperties
-};
-
-
 const defaultStyleConfig = {
   icons: {
     TableHeadingCell: {
@@ -69,86 +58,39 @@ class Griddle extends Component {
     super(props);
 
     const {
-      plugins=[],
-      data,
-      children:rowPropertiesComponent,
-      events={},
-      sortProperties={},
-      styleConfig={},
-      pageProperties:importedPageProperties,
-      components:userComponents,
-      renderProperties:userRenderProperties={},
-      settingsComponentObjects:userSettingsComponentObjects,
       storeKey = Griddle.storeKey || 'store',
-      reduxMiddleware = [],
-      listeners = {},
-      ...userInitialState
     } = props;
 
-    const rowProperties = getRowProperties(rowPropertiesComponent);
-    const columnProperties = getColumnProperties(rowPropertiesComponent);
-
-    //Combine / compose the reducers to make a single, unified reducer
-    const reducers = buildGriddleReducer([dataReducers, ...plugins.map(p => p.reducer)]);
-
-    //Combine / Compose the components to make a single component for each component type
-    this.components = buildGriddleComponents([components, ...plugins.map(p => p.components), userComponents]);
-
-    this.settingsComponentObjects = Object.assign({}, settingsComponentObjects, ...plugins.map(p => p.settingsComponentObjects), userSettingsComponentObjects);
-
-    this.events = Object.assign({}, events, ...plugins.map(p => p.events));
+    const { initialState, reducers, reduxMiddleware } = init.call(this, {
+      reducers: dataReducers,
+      components,
+      settingsComponentObjects,
+      selectors,
+      styleConfig: defaultStyleConfig,
 
-    this.selectors = plugins.reduce((combined, plugin) => ({ ...combined, ...plugin.selectors }), {...selectors});
-
-    const mergedStyleConfig = _.merge({}, defaultStyleConfig, ...plugins.map(p => p.styleConfig), styleConfig);
-
-    const pageProperties = Object.assign({}, {
+      pageProperties: {
         currentPage: 1,
         pageSize: 10
       },
-      importedPageProperties,
-    );
-
-    //TODO: This should also look at the default and plugin initial state objects
-    const renderProperties = Object.assign({
-      rowProperties,
-      columnProperties
-    }, ...plugins.map(p => p.renderProperties), userRenderProperties);
-
-    // TODO: Make this its own method
-    const initialState = _.merge(
-      {
-        enableSettings: true,
-        textProperties: {
-          next: 'Next',
-          previous: 'Previous',
-          settingsToggle: 'Settings'
-        },
+      enableSettings: true,
+      textProperties: {
+        next: 'Next',
+        previous: 'Previous',
+        settingsToggle: 'Settings'
       },
-      ...plugins.map(p => p.initialState),
-      userInitialState,
-      {
-        data,
-        pageProperties,
-        renderProperties,
-        sortProperties,
-        styleConfig: mergedStyleConfig,
-      }
-    );
+    });
 
     const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
     this.store = createStore(
       reducers,
       initialState,
       composeEnhancers(
-        applyMiddleware(..._.compact(_.flatten(plugins.map(p => p.reduxMiddleware))), ...reduxMiddleware)
+        applyMiddleware(...reduxMiddleware)
       )
     );
 
     this.provider = createProvider(storeKey);
 
-    const sanitizedListeners = _.pickBy(listeners, (value, key) => typeof value === "function");
-    this.listeners = plugins.reduce((combined, plugin) => ({...combined, ..._.pickBy(plugin.listeners, (value, key) => typeof value === "function")}), {...sanitizedListeners});
     this.storeListener = new StoreListener(this.store);
     _.forIn(this.listeners, (listener, name) => {
       this.storeListener.addListener(listener, name, {events: this.events, selectors: this.selectors});

src/module.d.ts

@@ -383,7 +383,9 @@ interface GriddleExtensibility {
 
 interface GriddleInitialState {
     enableSettings?: boolean;
+    pageProperties?: GriddlePageProperties;
     sortMethod?: (data: any[], column: string, sortAscending?: boolean) => number;
+    sortProperties?: GriddleSortKey[];
     textProperties?: {
       next?: string,
       previous?: string,
@@ -401,8 +403,6 @@ export interface GriddlePlugin extends GriddleExtensibility {
 export interface GriddleProps<T> extends GriddlePlugin, GriddleInitialState {
     plugins?: GriddlePlugin[];
     data?: T[];
-    sortProperties?: GriddleSortKey[];
-    pageProperties?: GriddlePageProperties;
     storeKey?: string;
 }
 

src/utils/__tests__/compositionUtilsTest.js

@@ -11,7 +11,6 @@ import {
   removeHooksFromObject,
   isKeyGriddleHook,
   buildGriddleReducer,
-  buildGriddleReducerObject,
   getAfterHooksFromObject,
   getBeforeHooksFromObject,
   removeKeyNamePartFromObject,
@@ -326,7 +325,7 @@ test('builds griddle reducer', test => {
     }
   }
 
-  const griddleReducer = buildGriddleReducerObject([reducer1, reducer2, reducer3]);
+  const griddleReducer = buildGriddleReducer([reducer1, reducer2, reducer3]);
 
   test.deepEqual(Object.keys(griddleReducer), ['REDUCE_THING', 'REDUCE_OTHER']);
   test.deepEqual(griddleReducer.REDUCE_THING({ number: 5}), { number: -45 });
@@ -357,6 +356,7 @@ test('builds griddle reducer with BEFORE_REDUCE and AFTER_REDUCE', (t) => {
   const griddleReducer = buildGriddleReducer([reducer1, reducer2]);
   const output = griddleReducer({number: 5}, { type: 'REDUCE_THING'});
 
+  t.deepEqual(Object.keys(griddleReducer), ['AFTER_REDUCE', 'REDUCE_THING', 'BEFORE_REDUCE']);
   t.deepEqual(output, { number: 55 });
 });
 
@@ -376,9 +376,25 @@ test('builds griddle reducer without BEFORE / AFTER if they dont exist', (t) =>
   const griddleReducer = buildGriddleReducer([reducer1, reducer2]);
   const output = griddleReducer({number: 5}, { type: 'REDUCE_THING'});
 
+  t.deepEqual(Object.keys(griddleReducer), ['REDUCE_THING']);
   t.deepEqual(output, { number: 15 });
 });
 
+test('builds griddle reducer that calls GRIDDLE_INITIALIZED for missing action type, if it exists', (assert) => {
+  const initReducer = { GRIDDLE_INITIALIZED: () => ({ init: true }) };
+  const griddleReducer = buildGriddleReducer([initReducer]);
+  const output = griddleReducer({}, { type: 'MISSING' });
+
+  assert.deepEqual(output, { init: true });
+});
+
+test('builds griddle reducer that does noop for missing action type, if GRIDDLE_INITIALIZED is also missing', (assert) => {
+  const griddleReducer = buildGriddleReducer([]);
+  const output = griddleReducer({}, { type: 'MISSING' });
+
+  assert.deepEqual(output, {});
+});
+
 test('combineAndEnhanceComponents', test => {
   const initial = { one: (someNumber) => (someNumber + 5)}
   const enhancing = { oneEnhancer: originalMethod => (someNumber) => originalMethod(someNumber * 5)};