ssr version 0.0.1

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2017", "react"],
+  "plugins": ["babel-plugin-add-module-exports", "babel-plugin-transform-es2015-modules-commonjs"]
+}

.eslintrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["es2017"],
+    "plugins": ["babel-plugin-add-module-exports", "babel-plugin-transform-es2015-modules-commonjs"]   
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.DS_Store
+npm-debug.log

README.md

@@ -0,0 +1,4 @@
+## Server Side Render
+
+TODO...
+

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "ssr",
+  "description": "dva server side render",
+  "main": "lib/index.js",
+  "version": "0.0.1",
+  "scripts": {
+    "compile": "babel ./src  --out-dir ./lib",
+    "prepublish": "npm run compile",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "ssr"
+  ],
+  "author": "node",
+  "repository": {
+    "type": "git",
+    "url": "git+https://git.links123.net/node/ssr.git"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react-router": ">= 4.0.0",
+    "dva": ">= 2.0.0"
+  },
+  "dependencies": {
+    "history": "^4.7.2",
+    "lodash.merge": "^4.6.0",
+    "mobile-detect": "^1.3.6",
+    "react": "^15.4.0",
+    "react-dom": "^15.4.0",
+    "react-router": "^4.2.0",
+    "uid": "^0.0.2"
+  },
+  "devDependencies": {
+    "@types/history": "^4.6.1",
+    "@types/react-dom": "^16.0.1",
+    "@types/react-router": "^4.0.15",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.25.0",
+    "babel-eslint": "^8.0.1",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
+    "babel-preset-es2017": "latest",
+    "babel-preset-react": "^6.24.1",
+    "babel-types": "^6.25.0",
+    "dva": "^2.0.0",
+    "eslint": "^4.9.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0"
+  }
+}

src/block.js

@@ -0,0 +1,32 @@
+const container = new Map();
+const callbacks = new Map();
+
+export 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();
+  }
+};

src/dvaServerSync.js

@@ -0,0 +1,16 @@
+export default 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);
+        }
+      }
+    }
+  };
+}

src/index.js

@@ -0,0 +1,9 @@
+import runtimeSSRMiddle from './runtimeSSRMiddle';
+import preSSRService from './preSSRService';
+import render from './render';
+
+export default {
+  runtimeSSRMiddle,
+  preSSRService,
+  render,
+};

src/preSSRService.js

@@ -0,0 +1,75 @@
+import Render from './render';
+import { searchRoutes } from './utils';
+
+function getPathsFromRoutes(routes) {
+  const paths = [];
+  searchRoutes(routes, (route) => {
+    paths.push(route.props.path);
+  });
+  return paths;
+}
+
+export class RenderService {
+  constructor({ url, interval, renderOptions }) {
+    this.url = url;
+    this.timeout = interval;
+    this.renderOptions = renderOptions;
+  }
+
+  async render() {
+    await Render(this.renderOptions);
+    this.timer = setTimeout(this.run.bind(this), this.timeout);
+  }
+
+  run() {
+    this.render();
+  }
+
+  stop() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  }
+}
+
+export default 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();
+  });
+}

src/render.jsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import uid from 'uid';
+import { StaticRouter } from 'react-router';
+import { createMemoryHistory } from 'history';
+import merge from 'lodash.merge';
+import { renderToStaticMarkup } from 'react-dom/server';
+import ssrModel from './ssrModel';
+import { findRouteByUrl } from './utils';
+import dvaServerSync from './dvaServerSync';
+import block from './block';
+
+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;
+}
+
+async function renderFragment(createApp, routes, url, initialState, timeout, verbose) {
+  const history = createMemoryHistory();
+  history.push(url);
+  const context = {};
+  const app = createApp({
+    history,
+    initialState,
+  });
+  if (!existSSRModel(app)) {
+    app.model(ssrModel);
+  }
+  app.router(options => (<StaticRouter location={url} context={options.context}>
+    <div>
+      {routes}
+    </div>
+  </StaticRouter>));
+  const asyncActions = getAsyncActions(app);
+  const branch = findRouteByUrl(routes, url);
+  if (branch.length === 0) {
+    return {};
+  }
+  const sync = findSync(branch);
+  if (!sync && asyncActions && asyncActions.length > 0) {
+    const id = uid(10);
+    app.use(dvaServerSync(id, (action) => {
+      if (asyncActions.indexOf(action.type) > -1) {
+        return true;
+      }
+      return false;
+    }, block));
+    const appDOM = app.start()({
+      context,
+    });
+    if (verbose) {
+      console.time(`${url}: async wait time`);
+    }
+    const result = await new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        reject(new Error('render timeout'));
+      }, timeout)
+      block.wait(id, () => {
+        if (verbose) {
+          console.timeEnd(`${url}: async wait time`);
+        }
+        clearTimeout(timer);
+        const curState = appDOM.props.store.getState();
+        const html = renderToStaticMarkup(appDOM);
+        resolve({ html, state: curState, context });
+      });
+    });
+    return result;
+  }
+  const appDOM = app.start()({
+    context,
+  });
+  const html = renderToStaticMarkup(appDOM);
+  const curState = appDOM.props.store.getState();
+  return { html, state: curState, context };
+}
+
+export default async function render({
+  url, env, routes, renderFullPage, createApp, initialState, onRenderSuccess, timeout = 6000, verbose = true
+}) {
+  try {
+    if (verbose) {
+      console.log(`[${url}]`)
+      console.time(`${url}: render time`);
+    }
+    const state = merge({}, initialState || {}, {
+      ssr: {
+        env,
+      }
+    });
+    const fragment = await 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 = await renderFullPage(fragment);
+    if (onRenderSuccess) {
+      await 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,
+    };
+  }
+}

src/runtimeSSRMiddle.js

@@ -0,0 +1,36 @@
+import MobileDetect from 'mobile-detect';
+import render from './render';
+
+export default function runtimeSSRMiddle({
+  routes, renderFullPage, createApp, initialState, onRenderSuccess, timeout=6000, verbose=true
+}) {
+  return async (req, res, next) => {
+    const isMobile = !!new MobileDetect(req.headers['user-agent']).mobile();
+    const result = await render({
+      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;
+    }
+  };
+}

src/ssrModel.js

@@ -0,0 +1,6 @@
+export default {
+  namespace: 'ssr',
+  state: {
+    env: null,
+  },
+};

src/utils.js

@@ -0,0 +1,44 @@
+import { matchPath } from 'react-router';
+import React from 'react';
+
+function isArray(element) {
+  return Object.prototype.toString.call(element) === '[object Array]';
+}
+
+export function searchRoutes(r, callback) {
+  function searchPaths(routes) {
+    if (isArray(routes)) {
+      routes.forEach((route) => {
+        searchPaths(route);
+      });
+    }
+    if (typeof routes === 'object' && routes.props && routes.props.children) {
+      React.Children.forEach(routes.props.children, (route) => {
+        searchPaths(route);
+      });
+    }
+    if (typeof routes === 'object' && routes.props && routes.props.path) {
+      callback(routes);
+    }
+  }
+  searchPaths(r);
+}
+
+
+export 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 = matchPath(url, route.props);
+    if (match) {
+      rtn.push(route);
+    }
+  });
+  return rtn;
+}