feat: support ssr for egg framework (#168)

Author: justquanyin

packages/egg-beidou/README-ZH.md

@@ -6,8 +6,7 @@
 
 ### 使用方式
 
-- ctx.render(filepath,props) 将 filepath 文件内的 react 代码使用 props 参数进行渲染，并赋值在 ctx.body 上
-- ctx.renderView(filepath,props) 将 filepath 文件内的 react 代码使用 props 参数进行渲染,并将渲染结果返回
+- ctx.ssr(filepath,props) 将 绝对路径 filepath 文件内的 react 代码使用 props 参数进行渲染,并将渲染结果返回
 
 ## 配置
 
@@ -20,21 +19,29 @@ exports.beidou = {
 
 // config.default.js
 exports.beidou = {
-  static: true, //   是否开启 static 渲染
+  static: false, //   是否开启 static 渲染
   stream: false, //  是否开启 stream 渲染
+  cache: true,   //  是否清除require.cache (开发阶段建议关闭)
+  onError: function(error){  // 渲染发生错误时的回调函数
+    // do something
+  },
+  view: "/home/admin/project/", // 渲染文件相对路径
+  extensions: [ '.js', 'jsx', '.ts', '.tsx' ] , // 默认文件添加后缀
 };
 ```
 
 ## 示例
 
 > 更多示例可查看单测目录下的 example 目录
 
+### 方式1： 渲染打包后代码
 ```js
+
 // Controller
 'use strict';
 
 exports.index = async function(ctx) {
-  await ctx.render('simple/index.js', {
+  await ctx.ssr('simple/index.js', {
     data: {
       text: 'hello world!',
     },
@@ -43,10 +50,47 @@ exports.index = async function(ctx) {
 
 // 将数据传入 react render中的this.props
 exports.simple = async function(ctx) {
-  ctx.body = await ctx.renderView('simple/index.js', {
+  ctx.body = await ctx.ssr('simple/index.js', {
+    data: {
+      text: 'hello world!',
+    },
+  });
+};
+
+// 使用绝对路径的方式
+exports.test = async function(ctx) {
+  ctx.body = await ctx.ssr('/usr/local/project/simple/index.js', {
+    data: {
+      text: 'hello world!',
+    },
+  });
+};
+```
+
+
+### 方式2： 渲染React代码
+> 此插件渲染React代码的方案与北斗同构框架使用一致的方案，具体可参考北斗同构框架文档使用
+```js
+//config/plugin.js
+// 安装 beidou-isomorphic 与 beidou-webpack 依赖，并开启插件
+isomorphic: {
+  enable: true,
+  package: 'beidou-isomorphic',
+},
+webpack: {
+  enable: true,
+  package: 'beidou-webpack',
+  env: [ 'local', 'unittest' ],
+}
+
+// controller/index.js
+exports.simple = async function(ctx) {
+  ctx.body = await ctx.ssr('simple/index.jsx', {
     data: {
       text: 'hello world!',
     },
   });
 };
 ```
+
+

packages/egg-beidou/README.md

@@ -8,43 +8,85 @@ neet to open the plugin for using
 
 ### extends
 
-- ctx.render(filepath,props) Render the `filepath` by proprs and set the result as `ctx.body` value
-- ctx.renderView(filepath,props) Render the `filepath` by proprs and return result for SSR
+- ctx.ssr(filepath,props) Render the `filepath` by proprs and return result for SSR, `filepath` is absolute path
 
 ## Configure
 
 ```js
+// config/pulgin.js
 exports.beidou = {
   enable: true,
   package: 'egg-beidou',
 };
 
 // config.default.js
 exports.beidou = {
-  static: true, //  whether use static render for SSR
+  static: false, //  whether use static render for SSR
   stream: false, //  whether use stream render for SSR
+  cache: true, // whether open require cache
+  onError: function(error){  // call the function when render occur error
+    // do something
+  },
+  view:"/home/admin/project/",
+  extensions: [ '.js', 'jsx', '.ts', '.tsx' ] , // file suffix
 };
 ```
 
 ## Example
 
 > see more example to test/exmaple folder
 
+### case1 : render packaged code
 ```js
 // Controller
 'use strict';
 
 exports.index = async function(ctx) {
-  await ctx.render('simple/index.js', {
+  await ctx.ssr('simple/index.js', {
     data: {
       text: 'hello world!',
     },
   });
 };
 
-// if you need pass server data to render
+// put your data into react render for react this.props
 exports.simple = async function(ctx) {
-  ctx.body = await ctx.renderView('simple/index.js', {
+  ctx.body = await ctx.ssr('simple/index.js', {
+    data: {
+      text: 'hello world!',
+    },
+  });
+};
+
+// if you need to pass absolute path
+exports.test = async function(ctx) {
+  ctx.body = await ctx.ssr('/usr/local/project/simple/index.js', {
+    data: {
+      text: 'hello world!',
+    },
+  });
+};
+```
+
+### case2: render react native code
+> The scheme of rendering React code by this plug-in is consistent with that of Beidou isomorphic framework, which can be used with reference to Beidou isomorphic framework document.
+
+```js
+// config/plugin.js
+// install egg-plugin:  beidou-isomorphic & beidou-webpack and enable plugin
+isomorphic: {
+  enable: true,
+  package: 'beidou-isomorphic',
+},
+webpack: {
+  enable: true,
+  package: 'beidou-webpack',
+  env: [ 'local', 'unittest' ],
+}
+
+// controller/index.js
+exports.simple = async function(ctx) {
+  ctx.body = await ctx.ssr('simple/index.jsx', {
     data: {
       text: 'hello world!',
     },

packages/egg-beidou/app.js

@@ -1,10 +1,8 @@
 'use strict';
 
-const BeidouView = require('./lib/beidou');
 const { basicPolyfill, setGlobal } = require('beidou-isomorphic/lib/polyfill');
 
-module.exports = (app) => {
+module.exports = app => {
   basicPolyfill();
   setGlobal(app.config.env);
-  app.view.use('beidou', BeidouView);
 };

packages/egg-beidou/app/extend/context.js

@@ -0,0 +1,56 @@
+'use strict';
+const fs = require('fs');
+const path = require('path');
+const is = require('is');
+const BeidouView = require('../../lib/beidou');
+const symbol = Symbol.for('beidou#renderView');
+module.exports = {
+  [symbol]: null,
+  async ssr(filepath, props) {
+    let beidou = null;
+    const { beidou: option } = this.app.config;
+    if (this[symbol]) {
+      beidou = null;
+    } else {
+      beidou = new BeidouView(this);
+    }
+    let pathArr = [ filepath, path.join(option.view || this.app.baseDir, filepath) ];
+    if (is.function(this.remoteAsset)) {
+      pathArr.push(await this.remoteAsset(filepath));
+    }
+
+    if (option.extensions && is.array(option.extensions)) {
+      const pathArrExt = [];
+
+      pathArr.forEach(v => {
+        option.extensions.forEach(
+          ext => {
+            pathArrExt.push(v + ext);
+          }
+        );
+      });
+      pathArr = pathArr.concat(pathArrExt);
+    }
+    const p = pathArr.find(
+      v => {
+        return fs.existsSync(v);
+      }
+    );
+    try {
+      if (!p) {
+        throw new Error(`${filepath} is not exsit, please check it`);
+      }
+      const res = await beidou.render(p, {
+        ...props,
+        ctx: this,
+      });
+      return res;
+    } catch (e) {
+      this.coreLogger.warn(`SSRError: render ${filepath} occur exception !`, e);
+      if (option.onError) {
+        return await option.onError.call(this, e);
+      }
+      throw e;
+    }
+  },
+};

packages/egg-beidou/app/view-middlewares/custom.js

@@ -2,7 +2,7 @@
 
 const is = require('is-type-of');
 
-module.exports = async function (viewCtx, next) {
+module.exports = async function(viewCtx, next) {
   const { Component, props } = viewCtx;
 
   const render = Component.custom;

packages/egg-beidou/app/view-middlewares/render.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const through = require('through');
 
-module.exports = async function (viewCtx, next) {
+module.exports = async function(viewCtx, next) {
   await next();
   const { Component, props, view, html } = viewCtx;
   const instance = React.createElement(Component, props);

packages/egg-beidou/app/view-middlewares/script.js

@@ -2,7 +2,7 @@
 
 const is = require('is-type-of');
 
-module.exports = async function (viewCtx, next) {
+module.exports = async function(viewCtx, next) {
   const { Component, props } = viewCtx;
 
   const render = Component.script;

packages/egg-beidou/app/view-middlewares/style.js

@@ -2,7 +2,7 @@
 
 const is = require('is-type-of');
 
-module.exports = async function (viewCtx, next) {
+module.exports = async function(viewCtx, next) {
   const { Component, props } = viewCtx;
   const render = Component.style;
   if (typeof render === 'function') {

packages/egg-beidou/config/config.default.js

@@ -1,13 +1,9 @@
 'use strict';
-
-const path = require('path');
-
-module.exports = appInfo => ({
+module.exports = () => ({
   beidou: {
     middlewares: [
       'render',
       'custom',
-      'cache',
       'initialprops',
       'redux',
       'partial',
@@ -18,16 +14,8 @@ module.exports = appInfo => ({
     ],
     doctype: '<!DOCTYPE html>',
     cache: true,
-    static: true,
+    static: false,
     stream: false,
-  },
-  view: {
-    mapping: {
-      '.js': 'beidou',
-    },
-    root: `${path.join(appInfo.baseDir, 'app/views')},${path.join(
-      appInfo.baseDir,
-      'clients'
-    )}`,
+    extensions: [ '.js', 'jsx', '.ts', '.tsx' ],
   },
 });

packages/egg-beidou/lib/beidou.js

@@ -26,31 +26,32 @@ class BeidouView extends BaseView {
 
   async render(...args) {
     this.ctx.type = 'html';
+    if (this.options.cache === false) {
+      this.clearCache(args[0]);
+    }
     const res = await super.render(...args);
     return res;
   }
 
-  async renderString() {
-    this.app.logger.info('reject');
-    const err = new Error();
-    err.name = 'not implemented yet!';
-    err.status = 500;
-    throw err;
-  }
-
   renderElementToStream(component, props = {}) {
     if (this.options.static) {
       return ReactDOMServer.renderToStaticNodeStream(component, props);
-    } else {
-      return ReactDOMServer.renderToNodeStream(component, props);
     }
+    return ReactDOMServer.renderToNodeStream(component, props);
+
   }
 
   renderElement(component, props = {}) {
     if (this.options.static) {
       return ReactDOMServer.renderToStaticMarkup(component, props);
-    } else {
-      return ReactDOMServer.renderToString(component, props);
+    }
+    return ReactDOMServer.renderToString(component, props);
+  }
+
+  clearCache(filepath) {
+    const absolutePath = path.resolve(filepath);
+    if (require.cache[absolutePath]) {
+      delete require.cache[absolutePath];
     }
   }
 }

packages/egg-beidou/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "beidou-isomorphic": "^2.0.1",
     "beidou-view": "^2.0.1",
+    "is": "^3.3.0",
     "koa-compose": "^4.1.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
@@ -24,11 +25,11 @@
   },
   "devDependencies": {
     "autod": "^3.0.1",
-    "egg": "^2.10.0",
-    "egg-bin": "^4.0.0",
-    "egg-mock": "^3.7.1",
     "eslint": "^5.3.0",
-    "eslint-config-egg": "^7.0.0"
+    "eslint-config-egg": "^7.0.0",
+    "egg-bin": "^4.0.0",
+    "egg": "^2.10.0",
+    "egg-mock": "^3.7.1"
   },
   "scripts": {
     "autod": "autod",