feature-router/es/StateRouter.js

Feature Based Navigation (using redux state)

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StateRouter = exports.logf = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRedux = require('react-redux');

var _featureU = require('feature-u');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // peerDependencies
// peerDependencies


// peerDependency ... strictly to tap into logging ... logf()

// our logger (integrated/activated via feature-u)
var logf = exports.logf = _featureU.launchApp.diag.logf.newLogger('- ***feature-router*** <StateRouter>: ');

/**
 * A top-level React component that serves as a simple router, driven
 * by our app-level redux state!  This component must be injected in
 * the root of your application DOM element.
 *
 * NOTE: We use React class in order to tap into it's life-cycle
 *       hooks, used by the optional componentDidUpdateHook property
 *       (initially developed to support ReactNative animation).
 */

var StateRouter = exports.StateRouter = function (_React$Component) {
  _inherits(StateRouter, _React$Component);

  // NOTE: this "named" export if for testing purposes only

  function StateRouter(props) {
    _classCallCheck(this, StateRouter);

    var _this = _possibleConstructorReturn(this, (StateRouter.__proto__ || Object.getPrototypeOf(StateRouter)).call(this, props));

    logf('Instantiating <StateRouter> with props: ', Object.keys(_this.props));

    // re-order our routes in their execution order
    var routes = _this.props.routes;
    // ... retain the original routes order (for sort tie breaker within same routePriority)
    routes.forEach(function (route, indx) {
      return route.originalOrder = indx;
    });
    // ... sort by execution order
    routes.sort(function (r1, r2) {
      return r2.routePriority - r1.routePriority || // ... FIRST:  routePriority (decending)
      r1.originalOrder - r2.originalOrder // ... SECOND: registration order (ascending)
      ;
    });

    var hookSummary = routes.map(function (route, indx) {
      return '\n  ' + (indx + 1) + ': Feature.name:' + route.featureName + ' with priority: ' + route.routePriority;
    });
    logf('route order ...' + hookSummary);
    return _this;
  }

  _createClass(StateRouter, [{
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      // optionally invoke the componentDidUpdateHook (when specified)
      // ... initially developed to support ReactNative animation
      //     SEE: React Native’s LayoutAnimation in the post-componentWillUpdate age
      //          ... https://medium.com/@benadamstyles/react-native-layoutanimation-in-the-post-componentwillupdate-age-9146b3af0243
      if (this.props.componentDidUpdateHook) {
        logf('running client specified componentDidUpdateHook()'); // AI: is this too much logging? ... however: only when enabled
        this.props.componentDidUpdateHook();
      }
    }

    /**
     * Our rendor() method implements our router/navigation, based
     * on simple app-level redux state!
     */

  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          routes = _props.routes,
          appState = _props.appState,
          fallbackElm = _props.fallbackElm,
          namedDependencies = _props.namedDependencies;

      // apply routes in order of 1: routePriority, 2: registration order (within same priority)

      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = routes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var route = _step.value;


          var content = route(_extends({ appState: appState }, namedDependencies));
          if (content) {
            logf('active route set by Feature.name:' + route.featureName + ' with priority: ' + route.routePriority);
            return content;
          }
        }

        // fallback
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator.return) {
            _iterator.return();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }

      logf('active route set by client configured fallbackElm');
      return fallbackElm;
    }
  }]);

  return StateRouter;
}(_react2.default.Component);

// NOTE: Because we are invoked within our controlled env, we bypass
//       prop-types npm pkg, and assume our props are correct!  This
//       eliminates the need for prop-types peerDependencies (or
//       dependency).
// import PropTypes from 'prop-types';
// StateRouter.propTypes = {
//   routes:      PropTypes.array.isRequired,   // all registered routes: routeCB[]
//   appState:    PropTypes.object.isRequired,  // appState, from which to reason about routes
//   fallbackElm: PropTypes.element.isRequired, // fallback elm representing a SplashScreen (of sorts) when no routes are in effect
//   componentDidUpdateHook: PropTypes.func     // OPTIONAL: invoked in componentDidUpdate() life-cycle hook (initially developed to support ReactNative animation)
//   namedDependencies: PropTypes.object        // OPTIONAL: object containing named dependencies to be injected into to routeCB() function call ... ex: <StateRouter namedDependencies={{fassets, api}}/>
// };

// access redux appState, via redux connect()


exports.default = (0, _reactRedux.connect)(function (appState) {
  return { appState: appState };
})(StateRouter);