Phase A: Zustand store cutover (remove Redux)

demo/dist/index.html

@@ -28,5 +28,5 @@
       alt="Fork me on GitHub"
       data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"/>
     </a>
-  <script type="text/javascript" src="28112a5db78339d759b3.vendor.js"></script><script type="text/javascript" src="110d53ec745844ca89d7.app.js"></script></body>
+  <script type="text/javascript" src="fc6222f87fc751d90346.vendor.js"></script><script type="text/javascript" src="1ed23553dada0939a128.app.js"></script></body>
 </html>

demo/src/renderer.jsx

@@ -1,70 +1,34 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ContainerDimensions from 'react-container-dimensions';
-import Immutable, {Map} from 'immutable';
+import Immutable from 'immutable';
 import immutableDevtools from 'immutable-devtools';
-import {createStore} from 'redux';
-import {Provider} from 'react-redux';
 
 import MyCatalog from './catalog/mycatalog';
 
 import ToolbarScreenshotButton from './ui/toolbar-screenshot-button';
 
 import {
   Models as PlannerModels,
-  reducer as PlannerReducer,
   ReactPlanner,
   Plugins as PlannerPlugins,
-} from 'react-planner'; //react-planner
+  createPlannerStore,
+} from 'react-planner';
 
-//define state
-let AppState = Map({
-  'react-planner': new PlannerModels.State()
-});
-
-//define reducer
-let reducer = (state, action) => {
-  state = state || AppState;
-  state = state.update('react-planner', plannerState => PlannerReducer(plannerState, action));
-  return state;
-};
+let plannerStore = createPlannerStore(new PlannerModels.State());
 
 let blackList = isProduction === true ? [] : [
   'UPDATE_MOUSE_COORDS',
   'UPDATE_ZOOM_SCALE',
   'UPDATE_2D_CAMERA'
 ];
 
-if( !isProduction ) {
+if (!isProduction) {
   console.info('Environment is in development and these actions will be blacklisted', blackList);
   console.info('Enable Chrome custom formatter for Immutable pretty print');
-  immutableDevtools( Immutable );
+  immutableDevtools(Immutable);
 }
 
-//init store
-let store = createStore(
-  reducer,
-  null,
-  !isProduction && window.devToolsExtension ?
-    window.devToolsExtension({
-      features: {
-        pause   : true,     // start/pause recording of dispatched actions
-        lock    : true,     // lock/unlock dispatching actions and side effects
-        persist : true,     // persist states on page reloading
-        export  : true,     // export history of actions in a file
-        import  : 'custom', // import history of actions from a file
-        jump    : true,     // jump back and forth (time travelling)
-        skip    : true,     // skip (cancel) actions
-        reorder : true,     // drag and drop actions in the history list
-        dispatch: true,     // dispatch custom actions or action creators
-        test    : true      // generate tests for the selected actions
-      },
-      actionsBlacklist: blackList,
-      maxAge: 999999
-    }) :
-    f => f
-);
-
 let plugins = [
   PlannerPlugins.Keyboard(),
   PlannerPlugins.Autosave('react-planner_v0'),
@@ -75,24 +39,20 @@ let toolbarButtons = [
   ToolbarScreenshotButton,
 ];
 
-//render
 ReactDOM.render(
   (
-    <Provider store={store}>
-      <ContainerDimensions>
-        {({width, height}) =>
-          <ReactPlanner
-            catalog={MyCatalog}
-            width={width}
-            height={height}
-            plugins={plugins}
-            toolbarButtons={toolbarButtons}
-            stateExtractor={state => state.get('react-planner')}
-          />
-        }
-      </ContainerDimensions>
-    </Provider>
+    <ContainerDimensions>
+      {({ width, height }) =>
+        <ReactPlanner
+          catalog={MyCatalog}
+          width={width}
+          height={height}
+          plugins={plugins}
+          toolbarButtons={toolbarButtons}
+          plannerStore={plannerStore}
+        />
+      }
+    </ContainerDimensions>
   ),
   document.getElementById('app')
 );
-

demo/webpack.config.js

@@ -3,7 +3,7 @@ const path = require('path');
 const webpack = require('webpack');
 
 const PAGE_TITLE = 'React Planner';
-const VENDORS_LIBRARIES = ['immutable', 'react', 'react-dom', 'react-redux', 'redux', 'three'];
+const VENDORS_LIBRARIES = ['immutable', 'react', 'react-dom', 'zustand', 'three'];
 
 module.exports = (env, self) => {
   let isProduction = self.hasOwnProperty('mode') ? ( self.mode === 'production' ) : true;

es/index.js

@@ -3,6 +3,7 @@ import Translator from './translator/translator';
 import * as Models from './models';
 import reducer from './reducers/reducer';
 import ReactPlanner from './react-planner';
+import { createPlannerStore } from './store/createPlannerStore';
 import Plugins from './plugins/export';
 import * as ReactPlannerConstants from './constants';
 import * as ReactPlannerSharedStyle from './shared-style';
@@ -13,4 +14,4 @@ import ReactPlannerClasses from './class/export';
 import ElementsFactories from './catalog/factories/export';
 import ReactPlannerUtils from './utils/export';
 
-export { Catalog, Translator, Models, reducer, ReactPlanner, Plugins, ReactPlannerConstants, ReactPlannerSharedStyle, ReactPlannerComponents, ReactPlannerActions, ReactPlannerReducers, ReactPlannerClasses, ElementsFactories, ReactPlannerUtils };
+export { Catalog, Translator, Models, reducer, ReactPlanner, createPlannerStore, Plugins, ReactPlannerConstants, ReactPlannerSharedStyle, ReactPlannerComponents, ReactPlannerActions, ReactPlannerReducers, ReactPlannerClasses, ElementsFactories, ReactPlannerUtils };

es/react-planner.js

@@ -12,15 +12,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
 
 import Translator from './translator/translator';
 import Catalog from './catalog/catalog';
 import actions from './actions/export';
 import { objectsMap } from './utils/objects-utils';
 import { ToolbarComponents, Content, SidebarComponents, FooterBarComponents } from './components/export';
 import { VERSION } from './version';
+import { createPlannerStore } from './store/createPlannerStore';
 import './styles/export';
 
 var Toolbar = ToolbarComponents.Toolbar;
@@ -37,13 +36,25 @@ var wrapperStyle = {
   flexFlow: 'row nowrap'
 };
 
+var defaultStateExtractor = function defaultStateExtractor(state) {
+  return state;
+};
+
 var ReactPlanner = function (_Component) {
   _inherits(ReactPlanner, _Component);
 
-  function ReactPlanner() {
+  function ReactPlanner(props) {
     _classCallCheck(this, ReactPlanner);
 
-    return _possibleConstructorReturn(this, (ReactPlanner.__proto__ || Object.getPrototypeOf(ReactPlanner)).apply(this, arguments));
+    var _this = _possibleConstructorReturn(this, (ReactPlanner.__proto__ || Object.getPrototypeOf(ReactPlanner)).call(this, props));
+
+    _this.plannerStore = props.plannerStore != null ? props.plannerStore : createPlannerStore(props.initialPlannerState);
+    var stateExtractor = props.stateExtractor;
+
+    _this.state = {
+      extractedState: stateExtractor(_this.plannerStore.getState())
+    };
+    return _this;
   }
 
   _createClass(ReactPlanner, [{
@@ -52,65 +63,124 @@ var ReactPlanner = function (_Component) {
       var _this2 = this;
 
       return _extends({}, objectsMap(actions, function (actionNamespace) {
-        return _this2.props[actionNamespace];
+        return _this2.plannerStore[actionNamespace];
       }), {
         translator: this.props.translator,
         catalog: this.props.catalog
       });
     }
   }, {
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      var store = this.context.store;
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this3 = this;
+
       var _props = this.props,
-          projectActions = _props.projectActions,
-          catalog = _props.catalog,
           stateExtractor = _props.stateExtractor,
+          catalog = _props.catalog,
           plugins = _props.plugins;
 
       plugins.forEach(function (plugin) {
-        return plugin(store, stateExtractor);
+        return plugin(_this3.plannerStore, stateExtractor);
+      });
+      this.plannerStore.projectActions.initCatalog(catalog);
+      this.unsubscribe = this.plannerStore.subscribe(function () {
+        var next = stateExtractor(_this3.plannerStore.getState());
+        if (next !== _this3.state.extractedState) {
+          _this3.setState({ extractedState: next });
+        }
       });
-      projectActions.initCatalog(catalog);
+      var _props2 = this.props,
+          locale = _props2.locale,
+          translator = _props2.translator;
+
+      if (locale) {
+        translator.setLocale(locale);
+      }
     }
   }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var stateExtractor = nextProps.stateExtractor,
-          state = nextProps.state,
-          projectActions = nextProps.projectActions,
-          catalog = nextProps.catalog;
-
-      var plannerState = stateExtractor(state);
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.unsubscribe) {
+        this.unsubscribe();
+      }
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      var _this4 = this;
+
+      var _props3 = this.props,
+          stateExtractor = _props3.stateExtractor,
+          catalog = _props3.catalog,
+          locale = _props3.locale,
+          translator = _props3.translator,
+          plugins = _props3.plugins;
+
+      if (locale !== prevProps.locale && locale) {
+        translator.setLocale(locale);
+      }
+      if (prevProps.plannerStore !== this.props.plannerStore) {
+        if (this.unsubscribe) {
+          this.unsubscribe();
+        }
+        this.plannerStore = this.props.plannerStore != null ? this.props.plannerStore : createPlannerStore(this.props.initialPlannerState);
+        plugins.forEach(function (plugin) {
+          return plugin(_this4.plannerStore, stateExtractor);
+        });
+        this.plannerStore.projectActions.initCatalog(catalog);
+        this.unsubscribe = this.plannerStore.subscribe(function () {
+          var next = stateExtractor(_this4.plannerStore.getState());
+          if (next !== _this4.state.extractedState) {
+            _this4.setState({ extractedState: next });
+          }
+        });
+        this.setState({
+          extractedState: stateExtractor(this.plannerStore.getState())
+        });
+        return;
+      }
+      if (prevProps.stateExtractor !== stateExtractor) {
+        this.setState({
+          extractedState: stateExtractor(this.plannerStore.getState())
+        });
+      }
+      var plannerState = stateExtractor(this.plannerStore.getState());
       var catalogReady = plannerState.getIn(['catalog', 'ready']);
       if (!catalogReady) {
-        projectActions.initCatalog(catalog);
+        this.plannerStore.projectActions.initCatalog(catalog);
       }
     }
   }, {
     key: 'render',
     value: function render() {
-      var _props2 = this.props,
-          width = _props2.width,
-          height = _props2.height,
-          state = _props2.state,
-          stateExtractor = _props2.stateExtractor,
-          props = _objectWithoutProperties(_props2, ['width', 'height', 'state', 'stateExtractor']);
+      var _props4 = this.props,
+          width = _props4.width,
+          height = _props4.height,
+          stateExtractor = _props4.stateExtractor,
+          props = _objectWithoutProperties(_props4, ['width', 'height', 'stateExtractor']);
+
+      void stateExtractor;
 
       var contentW = width - toolbarW - sidebarW;
       var toolbarH = height - footerBarH;
       var contentH = height - footerBarH;
       var sidebarH = height - footerBarH;
 
-      var extractedState = stateExtractor(state);
+      var extractedState = this.state.extractedState;
 
       return React.createElement(
         'div',
         { style: _extends({}, wrapperStyle, { height: height }) },
         React.createElement(Toolbar, _extends({ width: toolbarW, height: toolbarH, state: extractedState }, props)),
-        React.createElement(Content, _extends({ width: contentW, height: contentH, state: extractedState }, props, { onWheel: function onWheel(event) {
+        React.createElement(Content, _extends({
+          width: contentW,
+          height: contentH,
+          state: extractedState
+        }, props, {
+          onWheel: function onWheel(event) {
             return event.preventDefault();
-          } })),
+          }
+        })),
         React.createElement(Sidebar, _extends({ width: sidebarW, height: sidebarH, state: extractedState }, props)),
         React.createElement(FooterBar, _extends({ width: width, height: footerBarH, state: extractedState }, props))
       );
@@ -129,18 +199,21 @@ ReactPlanner.propTypes = {
   autosaveDelay: PropTypes.number,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
-  stateExtractor: PropTypes.func.isRequired,
+  stateExtractor: PropTypes.func,
+  plannerStore: PropTypes.shape({
+    dispatch: PropTypes.func.isRequired,
+    getState: PropTypes.func.isRequired,
+    subscribe: PropTypes.func.isRequired
+  }),
+  initialPlannerState: PropTypes.object,
+  locale: PropTypes.string,
   toolbarButtons: PropTypes.array,
   sidebarComponents: PropTypes.array,
   footerbarComponents: PropTypes.array,
   customContents: PropTypes.object,
   softwareSignature: PropTypes.string
 };
 
-ReactPlanner.contextTypes = {
-  store: PropTypes.object.isRequired
-};
-
 ReactPlanner.childContextTypes = _extends({}, objectsMap(actions, function () {
   return PropTypes.object;
 }), {
@@ -157,20 +230,8 @@ ReactPlanner.defaultProps = {
   toolbarButtons: [],
   sidebarComponents: [],
   footerbarComponents: [],
-  customContents: {}
+  customContents: {},
+  stateExtractor: defaultStateExtractor
 };
 
-//redux connect
-function mapStateToProps(reduxState) {
-  return {
-    state: reduxState
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return objectsMap(actions, function (actionNamespace) {
-    return bindActionCreators(actions[actionNamespace], dispatch);
-  });
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ReactPlanner);
+export default ReactPlanner;