rechannel
Version:
Opinionated glue for building web apps with `React` and `Redux`.
181 lines (141 loc) • 6.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.createHtml = 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 _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 html = _defaultOptions$optio.html;
var send = _defaultOptions$optio.send;
var Html = html || (0, _createHtml2.default)();
//validate options
if (isDevMode) {
if ((typeof reducer === 'undefined' ? 'undefined' : _typeof(reducer)) !== 'object') {
throw new Error('Your `reducer` must be an object passable to `combineReducers`.');
}
}
//add middleware to freeze the redux state
var allTheMiddleware = [].concat(_toConsumableArray(middleware));
if (isDevMode) {
allTheMiddleware.push(require('redux-immutable-state-invariant')());
}
return function (req, res, next) {
//create the store
var store = (0, _redux.createStore)((0, _redux.combineReducers)(_extends({}, reducer, {
routing: _reactRouterRedux.routerReducer
})), undefined, //eslint-disable-line
_redux.compose.apply(undefined, [_redux.applyMiddleware.apply(undefined, _toConsumableArray(allTheMiddleware))].concat(_toConsumableArray(enhancer))));
var context = {
headers: req.headers || {},
cookies: req.cookies || {},
query: req.query || {}
};
Promise.resolve($init(_extends({ getState: store.getState, dispatch: store.dispatch }, context))).then(function () {
//create the routes if we've been given a factory function
var routesForRequest = routes;
if (typeof routes === 'function') {
routesForRequest = routes(_extends({ getState: store.getState, dispatch: store.dispatch }, context));
}
//route the URL to a component
(0, _reactRouter.match)({ routes: routesForRequest, location: req.url, history: history }, function (routeError, redirectLocation, renderProps) {
var render = function render() {
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);
}).then(function () {
//render the app
var elements = _react2.default.createElement(
Html,
_extends({}, context, { state: store.getState() }),
_react2.default.createElement(
_reactRedux.Provider,
{ store: store },
_react2.default.createElement(_reactRouter.RouterContext, renderProps)
)
);
//render the layout
var htmlForResponse = '';
try {
htmlForResponse = '<!doctype html>' + (0, _server.renderToStaticMarkup)(elements);
} catch (renderError) {
return next(renderError);
}
//send the response
if (send) {
send(res, htmlForResponse);
} else {
res.send(htmlForResponse);
}
}).catch(next);
};
if (routeError) {
//500 - an error ocurred during routing
return next(routeError);
} else if (redirectLocation) {
//302 - routing matched the URL to a redirect
return res.redirect(302, '' + redirectLocation.pathname + redirectLocation.search);
} else if (renderProps) {
//200 - routing matched the URL to a component
render();
} else {
//404 - routing could not match a URL to a component
return next();
}
});
}).catch(next);
};
};
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _server = require('react-dom/server');
var _reactRedux = require('react-redux');
var _redux = require('redux');
var _reactRouter = require('react-router');
var _reactRouterRedux = require('react-router-redux');
var _redial = require('redial');
var _createHtml = require('./createHtml');
var _createHtml2 = _interopRequireDefault(_createHtml);
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();
}
};
/**
*
* @param {object} options
* @param {function} 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 {Component} [options.html] Your root HTML component
* @param {function} [options.send] A function
* @returns {function}
*/
exports.createHtml = _createHtml2.default;