injection-react-server
v0.0.1
Published
一个可以在react服务端渲染项目中使用的JavaScript和TypeScript依赖注入库。它是Angular依赖注入的一部分,这意味着它具有完整,快速,可靠且经过良好测试的功能。
Downloads
9
Readme
injection-react-server
一个可以在react服务端渲染项目中使用的JavaScript和TypeScript依赖注入库。它是Angular依赖注入的一部分,这意味着它具有完整,快速,可靠且经过良好测试的功能。
How to use?
$ npm i injection-react injection-react-server injection-js
# OR
$ yarn add injection-react injection-react-server injection-js
Note:
对于ES6
Class
语法和TypeScript,您需要Reflect API的polyfill. You can use:同样对于TypeScript,您将需要在您的
tsconfig.json
中设置experimentalDecorators
和emitDecoratorMetadata
为true
。
TypeScript
import 'reflect-metadata';
import React from 'react';
import { Injectable, Inject } from 'injection-js';
import { Component } from 'injection-react';
import { renderToStaticMarkup, renderToStaticNodeStream } from 'injection-react-server';
import { createServer } from 'http';
// service
@Injectable()
class Utils {
constructor(@Inject('request') public request: any) { }
isAndroid() {
return /android/g.test(this.request.headers['user-agent'])
}
}
// component
class App extends Component {
render() {
return (
<div>hello world!your phone is {this.get('Utils').isAndroid() ? 'android' : 'iphone'}</div>
);
}
}
// entry
console.log(renderToStaticMarkup([{ provide: 'Utils', useClass: Utils }, { provide: 'request', useValue: { headers: { 'user-agent': 'android' } } }], <App />));
// http-server entry
createServer(function (req, res) {
const stream = renderToStaticNodeStream(
[{
provide: 'Utils',
useClass: Utils
}, {
provide: 'request',
useValue: req
}],
<App />
);
stream.pipe(res, {
end: true
})
}).listen(8888);
or
import 'reflect-metadata';
import React from 'react';
import { Injectable, Injector, Inject } from 'injection-js';
import { stateLessComponentWithInjector } from 'injection-react';
import { renderToStaticMarkup, renderToStaticNodeStream } from 'injection-react-server';
import { createServer } from 'http';
// service
@Injectable()
class Utils {
constructor(@Inject('request') public request: any) {}
isAndroid() {
return /android/g.test(this.request.headers['user-agent'])
}
}
// component
const App = stateLessComponentWithInjector((_, injector: Injector) => (
<div>hello world!your phone is {injector.get('Utils').isAndroid() ? 'android': 'iphone'}</div>
));
// entry
renderToStaticMarkup([{ provide: 'Utils', useClass: Utils }, { provide: 'request', useValue: { headers: { 'user-agent': 'android' } } }], <App />);
// http-server entry
createServer(function (req, res) {
const stream = renderToStaticNodeStream(
[{
provide: 'Utils',
useClass: Utils
}, {
provide: 'request',
useValue: req
}],
<App />
);
stream.pipe(res, {
end: true
})
}).listen(8888);
API
有关完整的文档,请查看Angular DI文档:
License
MIT License