Skip to content

Commit 182d279

Browse files
njugrayjustquanyin
njugray
authored and
justquanyin
committed
feat: support render to stream (#126)
* feat: support render to stream #124 * examples: stream render * docs(view-react): add stream render doc
1 parent ecd7b18 commit 182d279

23 files changed

+1881
-3
lines changed

‎examples/stream/.eslintignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
app/proxy*
2+
coverage
3+
dist
4+
fntest
5+
mocks
6+
node_modules
7+
spm_modules
8+
test/fixtures

‎examples/stream/.eslintrc

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "eslint-config-beidou",
3+
"rules": {
4+
"react/jsx-uses-react": "error",
5+
"react/jsx-uses-vars": "error",
6+
"react/forbid-prop-types": [1, { "forbid": ["any"] }],
7+
"react/prefer-stateless-function": 0,
8+
"no-template-curly-in-string": 0,
9+
"react/no-danger": 0,
10+
"react/prop-types": 0
11+
}
12+
}

‎examples/stream/.npmignore

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
.DS_Store
3+
.idea
4+
.isomorphic/
5+
.nyc_output
6+
.stats
7+
.tmp
8+
.vscode
9+
build/
10+
coverage
11+
logs
12+
node_modules
13+
npm-debug.log
14+
run
15+
test
16+
yarn-error.log

‎examples/stream/CHANGELOG.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Change Log
2+
3+
All notable changes to this project will be documented in this file.
4+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5+
6+
<a name="1.0.9"></a>
7+
8+
## [1.0.9](https://github.com/alibaba/beidou/compare/v1.0.8...v1.0.9) (2018-09-17)
9+
10+
**Note:** Version bump only for package beidou-example-simple
11+
12+
<a name="1.0.8"></a>
13+
14+
## [1.0.8](https://github.com/alibaba/beidou/compare/v1.0.7...v1.0.8) (2018-08-11)
15+
16+
**Note:** Version bump only for package beidou-example-simple
17+
18+
<a name="1.0.5"></a>
19+
20+
## [1.0.5](https://github.com/alibaba/beidou/compare/v1.0.4...v1.0.5) (2018-06-14)
21+
22+
**Note:** Version bump only for package beidou-example-simple
23+
24+
<a name="1.0.1"></a>
25+
26+
## [1.0.1](https://github.com/alibaba/beidou/compare/v1.0.0...v1.0.1) (2018-03-26)
27+
28+
**Note:** Version bump only for package beidou-example-simple
29+
30+
<a name="0.3.5"></a>
31+
32+
## [0.3.5](https://github.com/alibaba/beidou/compare/v0.3.4...v0.3.5) (2017-12-20)
33+
34+
**Note:** Version bump only for package beidou-example-simple

‎examples/stream/README.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Beidou Simple Example
2+
3+
=================
4+
5+
## Install
6+
7+
```bash
8+
$ yarn install
9+
```
10+
11+
## Start
12+
13+
```bash
14+
$ npm start
15+
```
16+
17+
then navigate to [http://127.0.0.1:6001/](http://127.0.0.1:6001/)
18+
19+
## Basic Usage
20+
21+
- add a new page in /client folder, eg. `/client/test.jsx`
22+
- start app: `npm start`
23+
- navigate to [http://127.0.0.1:6001/test](http://127.0.0.1:6001/test)
24+
25+
## License
26+
27+
[MIT](LICENSE)

‎examples/stream/client/app.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
3+
/* eslint-disable no-alert */
4+
5+
const App = ({ index }) => (
6+
<div className="app">
7+
<p>Part No.{index} of page, rendered in stream.</p>
8+
{[...new Array(1000)].map((v, i) =>
9+
(<span key={i} className="span">{i}</span>))}
10+
</div>
11+
);
12+
13+
export default App;

‎examples/stream/client/index.jsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './app';
4+
import Timing from './timing';
5+
import './index.less';
6+
7+
/**
8+
* custom view template
9+
*
10+
* @export
11+
* @class View
12+
* @extends {React.Component}
13+
*/
14+
export default class View extends React.Component {
15+
static getInitialProps(ctx) {
16+
const { stream } = ctx.request.query;
17+
return { stream };
18+
}
19+
20+
render() {
21+
const { helper, Render, stream } = this.props;
22+
const streams = [...new Array(10)].map((v, i) => (
23+
<Render
24+
id={i}
25+
key={i}
26+
stream={!!stream}
27+
app={<App stream index={i} />}
28+
/>
29+
));
30+
return (
31+
<html>
32+
<head>
33+
<title>Script</title>
34+
<link rel="stylesheet" href={helper.asset('index.css')} />
35+
</head>
36+
<body>
37+
<h1>RenderToNodeStream Demo</h1>
38+
<Render id="timing" stream={!!stream} >
39+
<Timing />
40+
</Render>
41+
{streams}
42+
<script src={helper.asset('manifest.js')} />
43+
<script src={helper.asset('index.js')} />
44+
</body>
45+
</html>
46+
);
47+
}
48+
}
49+
50+
if (__CLIENT__) {
51+
ReactDOM.hydrate(
52+
<Timing />,
53+
document.getElementById('timing'),
54+
);
55+
56+
[...new Array(10)].forEach((v, i) => {
57+
ReactDOM.hydrate(
58+
<App stream index={i} />,
59+
document.getElementById(i),
60+
);
61+
});
62+
}

‎examples/stream/client/index.less

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
body {
2+
margin: 0 auto;
3+
padding: 10px 20px;
4+
}
5+
6+
.app {
7+
border-bottom: 1px solid #f0f0f0;
8+
margin-bottom: 16px;
9+
line-height: 16px;
10+
11+
> p {
12+
font-size: 16px;
13+
line-height: 1.8;
14+
}
15+
16+
> span {
17+
display: inline-block;
18+
width: 16px;
19+
height: 16px;
20+
font-size: 0;
21+
background-color: #f2f2f2;
22+
margin: 2px;
23+
}
24+
}

‎examples/stream/client/timing.jsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
3+
/* eslint-disable no-alert */
4+
5+
class Timing extends React.Component {
6+
constructor() {
7+
super();
8+
this.state = {
9+
TTFB: null,
10+
contentDownload: null,
11+
total: null,
12+
};
13+
}
14+
15+
componentDidMount() {
16+
if (window.performance && window.performance.timing) {
17+
const { timing } = window.performance;
18+
const { requestStart, responseEnd, responseStart } = timing;
19+
const TTFB = responseStart - requestStart;
20+
const contentDownload = responseEnd - responseStart;
21+
const total = responseEnd - requestStart;
22+
this.setState({
23+
TTFB,
24+
contentDownload,
25+
total,
26+
});
27+
}
28+
}
29+
30+
render() {
31+
const { TTFB, contentDownload, total } = this.state;
32+
return (
33+
<div>
34+
<p>Use <a href="/">renderToString()</a></p>
35+
<p>Use <a href="/?stream=1">renderToNodeStream()</a></p>
36+
<h3>Timing</h3>
37+
{
38+
TTFB &&
39+
<div style={{ backgroundColor: '#f2f2f2' }}>
40+
<p>TTFB: {TTFB} ms</p>
41+
<p>Content Download: {contentDownload} ms</p>
42+
<p>Total: {total} ms</p>
43+
</div>
44+
}
45+
46+
</div>
47+
);
48+
}
49+
}
50+
51+
export default Timing;

‎examples/stream/config/config.default.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
'use strict';
2+
3+
module.exports = {
4+
keys: 'secrets',
5+
};

‎examples/stream/config/config.local.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
'use strict';
2+
3+
module.exports = {
4+
react: {},
5+
};

‎examples/stream/package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "beidou-example-stream",
3+
"version": "1.0.10",
4+
"description": "beidou example stream",
5+
"scripts": {
6+
"start": "beidou start",
7+
"debug": "beidou debug",
8+
"stop": "beidou stop",
9+
"dev": "beidou dev",
10+
"build": "beidou build",
11+
"build:node": "beidou build --target=node",
12+
"lint": "eslint --fix --ext .jsx,.js app client config"
13+
},
14+
"author": "",
15+
"devDependencies": {
16+
"babel-eslint": "^7.1.1",
17+
"eslint": "^4.11.0",
18+
"eslint-config-beidou": "^1.0.9",
19+
"eslint-plugin-import": "^2.8.0",
20+
"eslint-plugin-react": "^7.5.1"
21+
},
22+
"dependencies": {
23+
"babel-polyfill": "^6.26.0",
24+
"beidou-cli": "^1.0.10",
25+
"beidou-core": "^1.0.10",
26+
"react": "^16.2.0",
27+
"react-dom": "^16.2.0",
28+
"react-hot-loader": "^4.1.2"
29+
},
30+
"engines": {
31+
"node": ">= 8.0.0"
32+
},
33+
"license": "MIT"
34+
}

0 commit comments

Comments
 (0)