From 66aa25efbca2be16c678de17d8176cae4b2994ce Mon Sep 17 00:00:00 2001 From: jtyjty99999 Date: Sun, 12 Mar 2017 00:53:17 +0800 Subject: [PATCH] feat:support inject context to do isomorphic --- config/config.default.js | 6 ++-- config/plugin.js | 5 ++++ lib/string_util.js | 26 ++++++++++++++++ lib/view.js | 17 +++++++++++ package.json | 30 +++++++++++-------- .../view-react-test/config/config.default.js | 10 +++++++ 6 files changed, 79 insertions(+), 15 deletions(-) create mode 100644 config/plugin.js create mode 100644 lib/string_util.js create mode 100644 test/fixtures/apps/view-react-test/config/config.default.js diff --git a/config/config.default.js b/config/config.default.js index 828437c..a586093 100644 --- a/config/config.default.js +++ b/config/config.default.js @@ -5,10 +5,12 @@ const path = require('path'); module.exports = appInfo => { const config = {}; - config.view = { + config.react = { extname: 'js', dir: path.join(appInfo.baseDir, 'app/view'), + injectContext: true, + globalVariable: '__REACT_DATA__', + contextGetter: 'data', }; - return config; }; diff --git a/config/plugin.js b/config/plugin.js new file mode 100644 index 0000000..a84012c --- /dev/null +++ b/config/plugin.js @@ -0,0 +1,5 @@ +'use strict'; + +exports.react = { + package: 'egg-view-react', +}; diff --git a/lib/string_util.js b/lib/string_util.js new file mode 100644 index 0000000..1cc167f --- /dev/null +++ b/lib/string_util.js @@ -0,0 +1,26 @@ +'use strict'; + +function getFront(mainStr, searchStr) { + const foundOffset = mainStr.indexOf(searchStr); + if (foundOffset === -1) { + return null; + } + return mainStr.substring(0, foundOffset); +} + +function getEnd(mainStr, searchStr) { + const foundOffset = mainStr.indexOf(searchStr); + if (foundOffset === -1) { + return null; + } + return mainStr.substring(foundOffset + searchStr.length, mainStr.length); +} + +exports.insertString = function(mainStr, searchStr, insertStr) { + const front = getFront(mainStr, searchStr); + const end = getEnd(mainStr, searchStr); + if (front !== null && end !== null) { + return front + insertStr + searchStr + end; + } + return null; +}; diff --git a/lib/view.js b/lib/view.js index eda114d..427b6cf 100644 --- a/lib/view.js +++ b/lib/view.js @@ -2,6 +2,9 @@ const path = require('path'); const React = require('react'); +const escape = require('escape-html'); +const INPUT_CONTEXT = Symbol('egg-view-react#INPUT_CONTEXT'); +const stringUtil = require('./string_util'); class View { @@ -12,8 +15,16 @@ class View { this.extname = this.config.extname.replace(/^\.?/, '.'); } + [INPUT_CONTEXT](locals) { + const context = locals[this.config.contextGetter]; + let string = JSON.stringify(context); + string = escape(string); + return ``; + } + render(name, locals) { const reactFile = path.join(this.config.dir, name + this.extname); + let contectJavascript; return new Promise((resolve, reject) => { let html = ''; @@ -24,6 +35,12 @@ class View { reject(error); } + if (this.config.injectContext) { + // 添加页面数据 + contectJavascript = this.INPUT_CONTEXT(locals); + html = stringUtil.insertString(html, '', contectJavascript); + } + resolve(html); }); } diff --git a/package.json b/package.json index b267895..beca47b 100644 --- a/package.json +++ b/package.json @@ -3,23 +3,26 @@ "version": "0.0.1", "description": "egg view plugin for react", "eggPlugin": { - "name": "view", - "dep": [ - "security" + "name": "react", + "dependencies": [ + "security", + "view" ] }, "keywords": [ "egg", "eggPlugin", "egg-plugin", - "egg-plugin-view" + "egg-plugin-view", + "react" ], "dependencies": { - "react": "^15.4.2", - "react-dom": "^15.4.2" + "escape-html": "^1.0.3", + "react": "^15.5.4", + "react-dom": "^15.5.4" }, "devDependencies": { - "autod": "^2.7.1", + "autod": "^2.8.0", "babel": "^6.5.2", "babel-core": "^6.10.0", "babel-plugin-transform-export-extensions": "^6.8.0", @@ -30,12 +33,13 @@ "babel-preset-stage-0": "^6.5.0", "babel-register": "^6.9.0", "babel-runtime": "^6.6.1", - "egg": "^0.11.0", - "egg-bin": "^2.0.2", - "egg-ci": "^1.1.0", - "egg-mock": "^2.4.0", - "eslint": "^3.15.0", - "eslint-config-egg": "^3.2.0", + "egg": "^1.2.1", + "egg-bin": "^3.3.2", + "egg-ci": "^1.6.0", + "egg-mock": "^3.6.0", + "eslint": "^3.19.0", + "egg-view": "^1.0.0", + "eslint-config-egg": "^4.1.0", "supertest": "^3.0.0", "webstorm-disable-index": "^1.1.2" }, diff --git a/test/fixtures/apps/view-react-test/config/config.default.js b/test/fixtures/apps/view-react-test/config/config.default.js new file mode 100644 index 0000000..3b7eb3f --- /dev/null +++ b/test/fixtures/apps/view-react-test/config/config.default.js @@ -0,0 +1,10 @@ +'use strict'; + +exports.keys = '123456'; +exports.view = { + defaultViewEngine: 'react', + mapping :{ + '.js':'react' + }, + defaultExtension: '.js' +}; \ No newline at end of file