M major refactor

package.json

@@ -61,7 +61,8 @@
  "typescript": "^2.4.1",
  "webpack": "^1.14.0",
  "webpack-dev-server": "^1.16.2",
- "webpack-fail-plugin": "^1.0.6"
+ "webpack-fail-plugin": "^1.0.6",
+ "redux-logger": "^3.0.6"
  },
  "dependencies": {
  "immutable": "^3.8.1",

src/index.js

@@ -5,55 +5,26 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
-import * as dataReducers from './reducers/dataReducer';
-import components from './components';
+//import * as dataReducers from './reducers/dataReducer';
+//import components from './components';
 import settingsComponentObjects from './settingsComponentObjects';
-import * as selectors from './selectors/dataSelectors';
+//import * as selectors from './selectors/dataSelectors';
 
 import { buildGriddleReducer, buildGriddleComponents } from './utils/compositionUtils';
-import { getColumnProperties } from './utils/columnUtils';
-import { getRowProperties } from './utils/rowUtils';
+//import { getColumnProperties } from './utils/columnUtils';
+//import { getRowProperties } from './utils/rowUtils';
 import { setSortProperties } from './utils/sortUtils';
 import { StoreListener } from './utils/listenerUtils';
-import * as actions from './actions';
-
-const defaultEvents = {
- ...actions,
- onFilter: actions.setFilter,
- setSortProperties
-};
-
-
-const defaultStyleConfig = {
- icons: {
- TableHeadingCell: {
- sortDescendingIcon: '▼',
- sortAscendingIcon: '▲'
- },
- },
- classNames: {
- Cell: 'griddle-cell',
- Filter: 'griddle-filter',
- Loading: 'griddle-loadingResults',
- NextButton: 'griddle-next-button',
- NoResults: 'griddle-noResults',
- PageDropdown: 'griddle-page-select',
- Pagination: 'griddle-pagination',
- PreviousButton: 'griddle-previous-button',
- Row: 'griddle-row',
- RowDefinition: 'griddle-row-definition',
- Settings: 'griddle-settings',
- SettingsToggle: 'griddle-settings-toggle',
- Table: 'griddle-table',
- TableBody: 'griddle-table-body',
- TableHeading: 'griddle-table-heading',
- TableHeadingCell: 'griddle-table-heading-cell',
- TableHeadingCellAscending: 'griddle-heading-ascending',
- TableHeadingCellDescending: 'griddle-heading-descending',
- },
- styles: {
- }
-};
+import { composeSelectors } from './utils/selectorUtils';
+//import * as actions from './actions';
+
+import CorePlugin from './plugins/core';
+
+//const defaultEvents = {
+// ...actions,
+// onFilter: actions.setFilter,
+// setSortProperties
+//};
 
 class Griddle extends Component {
  static childContextTypes = {
@@ -62,13 +33,15 @@ class Griddle extends Component {
  events: PropTypes.object,
  selectors: PropTypes.object,
  storeKey: PropTypes.string,
- storeListener: PropTypes.object
+ storeListener: PropTypes.object,
+ actions: PropTypes.object,
  }
 
  constructor(props) {
  super(props);
 
  const {
+ baselinePlugin=CorePlugin,
  plugins=[],
  data,
  children:rowPropertiesComponent,
@@ -85,23 +58,40 @@ class Griddle extends Component {
  ...userInitialState
  } = props;
 
- const rowProperties = getRowProperties(rowPropertiesComponent);
- const columnProperties = getColumnProperties(rowPropertiesComponent);
+ switch(typeof baselinePlugin) {
+ case 'function':
+ plugins.unshift(baselinePlugin(props));
+ break;
+ case 'object':
+ plugins.unshift(baselinePlugin);
+ break;
+ };
+
+ this.plugins = plugins;
 
  //Combine / compose the reducers to make a single, unified reducer
- const reducers = buildGriddleReducer([dataReducers, ...plugins.map(p => p.reducer)]);
+ //const reducers = buildGriddleReducer([dataReducers, ...plugins.map(p => p.reducer)]);
+ const reducers = buildGriddleReducer([...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.components = buildGriddleComponents([components, ...plugins.map(p => p.components), userComponents]);
+ this.components = buildGriddleComponents([...plugins.map(p => p.components), userComponents]);
 
- this.settingsComponentObjects = Object.assign({}, settingsComponentObjects, ...plugins.map(p => p.settingsComponentObjects), userSettingsComponentObjects);
+ // NOTE this goes on the context which for the purposes of breaking out the 
+ // 'core' code into a plugin is somewhat of a problem as it should
+ // be associated with the core code not general griddle code.
+ this.settingsComponentObjects = Object.assign({}, ...plugins.map(p => p.settingsComponentObjects), userSettingsComponentObjects);
 
  this.events = Object.assign({}, events, ...plugins.map(p => p.events));
 
- this.selectors = plugins.reduce((combined, plugin) => ({ ...combined, ...plugin.selectors }), {...selectors});
+ this.selectors = composeSelectors(plugins);
+
+ this.actions = plugins.reduce((combined, plugin) => ({ ...combined, ...plugin.actions }), {});
 
- const mergedStyleConfig = _.merge({}, defaultStyleConfig, ...plugins.map(p => p.styleConfig), styleConfig);
+ const mergedStyleConfig = _.merge({}, ...plugins.map(p => p.styleConfig), styleConfig);
 
+ // this would be good to move into the core plugin
+ // and namespace this state to the core plugin
  const pageProperties = Object.assign({}, {
  currentPage: 1,
  pageSize: 10
@@ -110,21 +100,15 @@ class Griddle extends Component {
  );
 
  //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);
+ const renderProperties = Object.assign(...plugins.map(p => p.renderProperties), userRenderProperties);
 
  // TODO: Make this its own method
+ // It would be nice if state was namespaced to the plugin
+ // it was associated with. For example pageProperties and 
+ // sortProperties are specific to the core plugin. We could
+ // refactor the selectors to grab this data from a different
+ // place but would this affect other users?
  const initialState = _.merge(
- {
- enableSettings: true,
- textProperties: {
- next: 'Next',
- previous: 'Previous',
- settingsToggle: 'Settings'
- },
- },
  ...plugins.map(p => p.initialState),
  userInitialState,
  {
@@ -161,8 +145,12 @@ class Griddle extends Component {
  })
 
  // Only update the state if something has changed.
+ //
+ // NOTE the update state reducer in 'core' griddle is only
+ // concerned with the data, pageProperties, and sortProperties
+ // passing in only changed props breaks the contract it is expecting
  if (Object.keys(newState).length > 0) {
- this.store.dispatch(actions.updateState(newState));
+ this.store.dispatch(this.plugins[0].actions.updateState(newState));
  }
  }
 
@@ -183,7 +171,8 @@ class Griddle extends Component {
  events: this.events,
  selectors: this.selectors,
  storeKey: this.getStoreKey(),
- storeListener: this.storeListener
+ storeListener: this.storeListener,
+ actions: this.actions,
  };
  }
 

src/module.d.ts

@@ -425,6 +425,7 @@ export namespace utils {
  const compositionUtils: PropertyBag<Function>;
  const dataUtils: PropertyBag<Function>;
  const rowUtils: PropertyBag<Function>;
+ const selectorUtils: PropertyBag<Function>;
 
  const connect : typeof originalConnect;
 

src/module.js

@@ -1,9 +1,9 @@
 import Griddle from './index';
 
-import * as actions from './actions';
-import components from './components';
-import * as constants from './constants';
-import * as selectors from './selectors/dataSelectors';
+import * as actions from './plugins/core/actions';
+import components from './plugins/core/components';
+import * as constants from './plugins/core/constants';
+import * as selectors from './plugins/core/selectors/dataSelectors';
 import settingsComponentObjects from './settingsComponentObjects';
 import utils from './utils';
 
@@ -14,7 +14,7 @@ import PositionPlugin from './plugins/position';
 const plugins = {
  LegacyStylePlugin,
  LocalPlugin,
- PositionPlugin,
+ PositionPlugin
 };
 
 const ColumnDefinition = components.ColumnDefinition;