compile

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
-npm-debug.log
+npm-debug.log
+package-lock.json

lib/block.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const container = new Map();
+const callbacks = new Map();
+
+exports.default = {
+  lock: id => {
+    let count = container.get(id) || 0;
+    container.set(id, ++count);
+  },
+  release: function (id) {
+    let count = container.get(id) || 0;
+    if (count) {
+      container.set(id, --count);
+    }
+    this.check();
+  },
+  check: () => {
+    for (let [id, callback] of callbacks) {
+      const count = container.get(id);
+      if (count === 0) {
+        container.delete(id);
+        callback();
+      }
+    }
+  },
+  wait: function (id, callback) {
+    callbacks.set(id, function () {
+      callbacks.delete(id);
+      callback();
+    });
+    this.check();
+  }
+};
+module.exports = exports["default"];

lib/dvaServerSync.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = sync;
+function sync(key, filter, block) {
+  return {
+    onEffect: function (effect, { put }, model, actionType) {
+      const temp = [];
+      return function* (...args) {
+        if (filter(args[0])) {
+          block.lock(key);
+        }
+        yield effect(...args);
+        if (filter(args[0])) {
+          block.release(key);
+        }
+      };
+    }
+  };
+}
+module.exports = exports["default"];

lib/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _runtimeSSRMiddle = require('./runtimeSSRMiddle');
+
+var _runtimeSSRMiddle2 = _interopRequireDefault(_runtimeSSRMiddle);
+
+var _preSSRService = require('./preSSRService');
+
+var _preSSRService2 = _interopRequireDefault(_preSSRService);
+
+var _render = require('./render');
+
+var _render2 = _interopRequireDefault(_render);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  runtimeSSRMiddle: _runtimeSSRMiddle2.default,
+  preSSRService: _preSSRService2.default,
+  render: _render2.default
+};
+module.exports = exports['default'];

lib/preSSRService.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RenderService = undefined;
+exports.default = preSSRService;
+
+var _render = require('./render');
+
+var _render2 = _interopRequireDefault(_render);
+
+var _utils = require('./utils');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
+
+function getPathsFromRoutes(routes) {
+  const paths = [];
+  (0, _utils.searchRoutes)(routes, route => {
+    paths.push(route.props.path);
+  });
+  return paths;
+}
+
+class RenderService {
+  constructor({ url, interval, renderOptions }) {
+    this.url = url;
+    this.timeout = interval;
+    this.renderOptions = renderOptions;
+  }
+
+  render() {
+    var _this = this;
+
+    return _asyncToGenerator(function* () {
+      yield (0, _render2.default)(_this.renderOptions);
+      _this.timer = setTimeout(_this.run.bind(_this), _this.timeout);
+    })();
+  }
+
+  run() {
+    this.render();
+  }
+
+  stop() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  }
+}
+
+exports.RenderService = RenderService;
+function preSSRService({
+  renderFullPage, createApp, initialState, interval = 10000, onRenderSuccess, routes, timeout = 6000, verbose = true
+}) {
+  const paths = getPathsFromRoutes(routes);
+  paths.forEach(path => {
+    new RenderService({
+      url: path,
+      interval,
+      renderOptions: {
+        routes,
+        url: path,
+        renderFullPage,
+        createApp,
+        initialState,
+        onRenderSuccess,
+        timeout,
+        env: {
+          platform: 'pc'
+        },
+        verbose
+      }
+    }).run();
+    new RenderService({
+      url: path,
+      interval,
+      renderOptions: {
+        routes,
+        url: path,
+        renderFullPage,
+        createApp,
+        initialState,
+        onRenderSuccess,
+        timeout,
+        env: {
+          platform: 'mobile'
+        },
+        verbose
+      }
+    }).run();
+  });
+}

lib/render.js

@@ -0,0 +1,201 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+let renderFragment = (() => {
+  var _ref = _asyncToGenerator(function* (createApp, routes, url, initialState, timeout, verbose) {
+    const history = (0, _history.createMemoryHistory)();
+    history.push(url);
+    const context = {};
+    const app = createApp({
+      history,
+      initialState
+    });
+    if (!existSSRModel(app)) {
+      app.model(_ssrModel2.default);
+    }
+    app.router(function (options) {
+      return _react2.default.createElement(
+        _reactRouter.StaticRouter,
+        { location: url, context: options.context },
+        _react2.default.createElement(
+          'div',
+          null,
+          routes
+        )
+      );
+    });
+    const asyncActions = getAsyncActions(app);
+    const branch = (0, _utils.findRouteByUrl)(routes, url);
+    if (branch.length === 0) {
+      return {};
+    }
+    const sync = findSync(branch);
+    if (!sync && asyncActions && asyncActions.length > 0) {
+      const id = (0, _uid2.default)(10);
+      app.use((0, _dvaServerSync2.default)(id, function (action) {
+        if (asyncActions.indexOf(action.type) > -1) {
+          return true;
+        }
+        return false;
+      }, _block2.default));
+      const appDOM = app.start()({
+        context
+      });
+      if (verbose) {
+        console.time(`${url}: async wait time`);
+      }
+      const result = yield new Promise(function (resolve, reject) {
+        const timer = setTimeout(function () {
+          reject(new Error('render timeout'));
+        }, timeout);
+        _block2.default.wait(id, function () {
+          if (verbose) {
+            console.timeEnd(`${url}: async wait time`);
+          }
+          clearTimeout(timer);
+          const curState = appDOM.props.store.getState();
+          const html = (0, _server.renderToStaticMarkup)(appDOM);
+          resolve({ html, state: curState, context });
+        });
+      });
+      return result;
+    }
+    const appDOM = app.start()({
+      context
+    });
+    const html = (0, _server.renderToStaticMarkup)(appDOM);
+    const curState = appDOM.props.store.getState();
+    return { html, state: curState, context };
+  });
+
+  return function renderFragment(_x, _x2, _x3, _x4, _x5, _x6) {
+    return _ref.apply(this, arguments);
+  };
+})();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _uid = require('uid');
+
+var _uid2 = _interopRequireDefault(_uid);
+
+var _reactRouter = require('react-router');
+
+var _history = require('history');
+
+var _lodash = require('lodash.merge');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
+var _server = require('react-dom/server');
+
+var _ssrModel = require('./ssrModel');
+
+var _ssrModel2 = _interopRequireDefault(_ssrModel);
+
+var _utils = require('./utils');
+
+var _dvaServerSync = require('./dvaServerSync');
+
+var _dvaServerSync2 = _interopRequireDefault(_dvaServerSync);
+
+var _block = require('./block');
+
+var _block2 = _interopRequireDefault(_block);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
+
+function existSSRModel(app) {
+  try {
+    let model = null;
+    app._models.forEach(m => {
+      if (m.namespace === 'ssr') {
+        model = m;
+      }
+    });
+    return !!model;
+  } catch (e) {
+    return false;
+  }
+}
+
+function getAsyncActions(app) {
+  try {
+    let actions = [];
+    app._models.forEach(model => {
+      if (model.effects) {
+        actions = actions.concat(Object.keys(model.effects));
+      }
+    });
+    return actions;
+  } catch (e) {
+    return [];
+  }
+}
+
+function findSync(branch) {
+  let sync = false;
+  branch.forEach(b => {
+    sync = !!b.props.sync;
+  });
+  return sync;
+}
+
+exports.default = (() => {
+  var _ref2 = _asyncToGenerator(function* ({
+    url, env, routes, renderFullPage, createApp, initialState, onRenderSuccess, timeout = 6000, verbose = true
+  }) {
+    try {
+      if (verbose) {
+        console.log(`[${url}]`);
+        console.time(`${url}: render time`);
+      }
+      const state = (0, _lodash2.default)({}, initialState || {}, {
+        ssr: {
+          env
+        }
+      });
+      const fragment = yield renderFragment(createApp, routes, url, state, timeout, verbose);
+      if (verbose) {
+        console.timeEnd(`${url}: render time`);
+      }
+      const context = fragment.context;
+      if (!context) {
+        return { code: 404, url, env };
+      } else if (context.url) {
+        return {
+          code: 302, url, env, redirect: context.url
+        };
+      }
+      const html = yield renderFullPage(fragment);
+      if (onRenderSuccess) {
+        yield onRenderSuccess({
+          html, url, env, state: fragment.state
+        });
+      }
+      return {
+        code: 200, url, env, html
+      };
+    } catch (e) {
+      console.error(e);
+      return {
+        code: 500, url, env, error: e
+      };
+    }
+  });
+
+  function render(_x7) {
+    return _ref2.apply(this, arguments);
+  }
+
+  return render;
+})();
+
+module.exports = exports['default'];

lib/runtimeSSRMiddle.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = runtimeSSRMiddle;
+
+var _mobileDetect = require('mobile-detect');
+
+var _mobileDetect2 = _interopRequireDefault(_mobileDetect);
+
+var _render = require('./render');
+
+var _render2 = _interopRequireDefault(_render);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
+
+function runtimeSSRMiddle({
+  routes, renderFullPage, createApp, initialState, onRenderSuccess, timeout = 6000, verbose = true
+}) {
+  return (() => {
+    var _ref = _asyncToGenerator(function* (req, res, next) {
+      const isMobile = !!new _mobileDetect2.default(req.headers['user-agent']).mobile();
+      const result = yield (0, _render2.default)({
+        url: req.url,
+        env: { platform: isMobile ? 'mobile' : 'pc' },
+        routes,
+        renderFullPage,
+        createApp,
+        initialState,
+        onRenderSuccess,
+        timeout,
+        verbose
+      });
+      switch (result.code) {
+        case 200:
+          return res.end(result.html);
+        case 302:
+          return res.redirect(302, result.redirect);
+        case 404:
+          next();
+          break;
+        case 500:
+          next(result.error);
+          break;
+        default:
+          next();
+          break;
+      }
+    });
+
+    return function (_x, _x2, _x3) {
+      return _ref.apply(this, arguments);
+    };
+  })();
+}
+module.exports = exports['default'];

lib/ssrModel.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = {
+  namespace: 'ssr',
+  state: {
+    env: null
+  }
+};
+module.exports = exports['default'];

lib/utils.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchRoutes = searchRoutes;
+exports.findRouteByUrl = findRouteByUrl;
+
+var _reactRouter = require('react-router');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function isArray(element) {
+  return Object.prototype.toString.call(element) === '[object Array]';
+}
+
+function searchRoutes(r, callback) {
+  function searchPaths(routes) {
+    if (isArray(routes)) {
+      routes.forEach(route => {
+        searchPaths(route);
+      });
+    }
+    if (typeof routes === 'object' && routes.props && routes.props.children) {
+      _react2.default.Children.forEach(routes.props.children, route => {
+        searchPaths(route);
+      });
+    }
+    if (typeof routes === 'object' && routes.props && routes.props.path) {
+      callback(routes);
+    }
+  }
+  searchPaths(r);
+}
+
+function findRouteByUrl(routes, url) {
+  const rtn = [];
+  const queryIndex = url.indexOf('?');
+  if (queryIndex > -1) {
+    url = url.slice(0, queryIndex);
+  }
+  if (url.length > 1 && url[url.length - 1] === '/') {
+    url = url.slice(0, -1);
+  }
+  searchRoutes(routes, route => {
+    const match = (0, _reactRouter.matchPath)(url, route.props);
+    if (match) {
+      rtn.push(route);
+    }
+  });
+  return rtn;
+}