Skip to content

[WIP]feat:support inject context to do isomorphic #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jtyjty99999 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[WIP]feat:support inject context to do isomorphic #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions config/config.default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Copy link
Member

@atian25 atian25 Mar 12, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个在 view 那边配

injectContext: true,
globalVariable: '__REACT_DATA__',
contextGetter: 'data',
};

return config;
};
5 changes: 5 additions & 0 deletions config/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
'use strict';

exports.react = {
package: 'egg-view-react',
};
26 changes: 26 additions & 0 deletions lib/string_util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
};
17 changes: 17 additions & 0 deletions lib/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand All @@ -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 `<script> window.${this.config.globalVariable} = ${string}</script>`;
}

render(name, locals) {
const reactFile = path.join(this.config.dir, name + this.extname);
let contectJavascript;

return new Promise((resolve, reject) => {
let html = '<!DOCTYPE html>';
Expand All @@ -24,6 +35,12 @@ class View {
reject(error);
}

if (this.config.injectContext) {
// 添加页面数据
contectJavascript = this.INPUT_CONTEXT(locals);
html = stringUtil.insertString(html, '</body>', contectJavascript);
}

resolve(html);
});
}
Expand Down
30 changes: 17 additions & 13 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Member

@popomore popomore Jun 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react 跟着插件走？应用是怎么用 react 的？

Copy link
Contributor

@hubcarl hubcarl Nov 6, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@popomore 正在升级插件(支持单页面同构，去掉内置 react 依赖），react 和 react-dom 不想再内置插件，大家意见？

Copy link
Member

@popomore popomore Nov 6, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

写个 peerdep 吧，不然前后端会有多个 react 版本

Copy link
Contributor

@hubcarl hubcarl Nov 7, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好

"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",
Expand All @@ -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"
},
Expand Down
10 changes: 10 additions & 0 deletions test/fixtures/apps/view-react-test/config/config.default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
'use strict';

exports.keys = '123456';
exports.view = {
defaultViewEngine: 'react',
mapping :{
'.js':'react'
Copy link
Member

@popomore popomore Jun 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不是 jsx？

},
defaultExtension: '.js'
};