rechannel/dist/lib/client.js

Opinionated glue for building web apps with `React` and `Redux`.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

exports.default = function (options) {
  var _defaultOptions$optio = _extends({}, defaultOptions, options);

  var routes = _defaultOptions$optio.routes;
  var reducer = _defaultOptions$optio.reducer;
  var middleware = _defaultOptions$optio.middleware;
  var enhancer = _defaultOptions$optio.enhancer;
  var history = _defaultOptions$optio.history;
  var $init = _defaultOptions$optio.$init;
  var $load = _defaultOptions$optio.$load;
  var element = _defaultOptions$optio.element;

  //get the app element to render into

  element = element || document.querySelector('#app');

  //validate options
  if (isDevMode) {
    if ((typeof reducer === 'undefined' ? 'undefined' : _typeof(reducer)) !== 'object') {
      throw new Error('Your `reducer` must be an object passable to `combineReducers`.');
    }
  }

  //use the browser history if the user hasn't specified one
  if (!history) {
    history = _reactRouter.browserHistory;
  }

  //add middleware to freeze the redux state
  var allTheMiddleware = [].concat(_toConsumableArray(middleware), [(0, _reactRouterRedux.routerMiddleware)(history)]);
  if (isDevMode) {
    allTheMiddleware.unshift(require('redux-immutable-state-invariant')());
  }

  //create the store
  var store = (0, _redux.createStore)((0, _redux.combineReducers)(_extends({}, reducer, {
    routing: _reactRouterRedux.routerReducer
  })), window.__INITIAL_STATE__, _redux.compose.apply(undefined, [_redux.applyMiddleware.apply(undefined, _toConsumableArray(allTheMiddleware))].concat(_toConsumableArray(enhancer), [(typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : function (f) {
    return f;
  }])));

  var context = {
    headers: {},
    cookies: (0, _componentCookie2.default)() || {},
    query: _queryString2.default.parse(window.location.search) || {}
  };

  Promise.resolve($init(_extends({ getState: store.getState, dispatch: store.dispatch }, context))).then(function () {

    //create the routes if we've been given a factory function
    if (typeof routes === 'function') {
      routes = routes(_extends({ getState: store.getState, dispatch: store.dispatch }, context));
    }

    //create the enhanced history
    var enhancedHistory = (0, _reactRouterRedux.syncHistoryWithStore)(history, store);

    //when the URL changes
    enhancedHistory.listen(function (location) {

      //route the URL to a component
      (0, _reactRouter.match)({ routes: routes, history: enhancedHistory }, function (routeError, redirectLocation, renderProps) {

        if (window.__INITIAL_STATE__) {
          //the current page was rendered by the server, we don't need to fetch
          delete window.__INITIAL_STATE__;
        } else {
          //the current page was navigated to on the client, we need to fetch

          if (renderProps) {
            (function () {

              var locals = _extends({

                dispatch: store.dispatch,
                getState: store.getState,

                location: renderProps.location,
                params: renderProps.params

              }, context);

              //fetch data required by the component
              Promise.resolve().then(function () {
                return (0, _redial.trigger)('fetch', renderProps.components, locals);
              }).then(function () {
                return $load(locals);
              });
            })();
          }
        }
      });
    });

    //route the URL to a component
    //this is required for https://github.com/ReactTraining/react-router/blob/master/docs/guides/ServerRendering.md#async-routes
    (0, _reactRouter.match)({ routes: routes, history: enhancedHistory }, function (routeError, redirectLocation, renderProps) {

      //render the app
      (0, _reactDom.render)(_react2.default.createElement(
        _reactRedux.Provider,
        { store: store },
        _react2.default.createElement(_reactRouter.Router, renderProps)
      ), element);
    });
  }).catch(function (err) {
    return console.error(err);
  });
};

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _redial = require('redial');

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

var _redux = require('redux');

var _reactRouter = require('react-router');

var _reactRouterRedux = require('react-router-redux');

var _componentCookie = require('component-cookie');

var _componentCookie2 = _interopRequireDefault(_componentCookie);

var _queryString = require('query-string');

var _queryString2 = _interopRequireDefault(_queryString);

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

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var isDevMode = process.env.NODE_ENV !== 'production';

var defaultOptions = {
  reducer: {},
  middleware: [],
  enhancer: [],
  $init: function $init() {
    return Promise.resolve();
  },
  $load: function $load() {
    return Promise.resolve();
  }
};

/**
 * Render an app on the client
 * @param   {object}          options
 * @param   {Element}         options.routes            Your react-router routes
 * @param   {object}          options.reducer           Your redux reducer
 * @param   {Array<function>} [options.middleware]      Your redux middleware(s)
 * @param   {Array<function>} [options.enhancer]        Your Redux enhancer(s)
 * @param   {History}         [options.history]         Your react-router history instance
 * @param   {HTMLElement}     [options.element]         The HTMLElement which react will render into
 * @returns {function}
 */