Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 755720d

Browse files
Merge pull request #36 from adifiore/master
Package v1.1.0
2 parents fe33d41 + 82fbdca commit 755720d

File tree

9 files changed

+3725
-46
lines changed

9 files changed

+3725
-46
lines changed

‎README.md‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
## Overview
44
React Component Caching is a component-level caching library for faster server-side rendering with React 16.
5-
- Use any of React's four server-side rendering methods
6-
- Cache components using a simple or template strategy
7-
- Choose from three cache implementations (LRU, Redis, or Memcached)
5+
- Use any of React's four server-side rendering methods. Rendering is **asynchronous**.
6+
- Cache components using a simple or template strategy.
7+
- Choose from three cache implementations (LRU, Redis, or Memcached).
88

99
## Installation
1010
Using npm:
@@ -15,10 +15,16 @@ $ npm install react-component-caching
1515
## Usage
1616
### In Node rendering server:
1717
Instantiate a cache and pass it to any rendering method (`renderToString`, `renderToStaticMarkup`, `renderToNodeStream`, or `renderToStaticNodeStream`) as a second argument. Wherever you would use `ReactDOM.renderToString`, use `ReactCC.renderToString`.
18+
19+
**Note: All of these methods are asynchronous, and return a promise. To use them, `await` the response before rendering**
1820
```javascript
1921
const ReactCC = require("react-component-caching");
20-
const cache = ReactCC.ComponentCache();
21-
ReactCC.renderToString(<App />, cache>)
22+
const cache = new ReactCC.ComponentCache();
23+
24+
app.get('/example', async (req,res) => {
25+
const renderString = await ReactCC.renderToString(<App />, cache);
26+
res.send(renderString);
27+
});
2228

2329
// ...
2430
```
@@ -52,7 +58,12 @@ export default class App extends Component {
5258
<div>
5359
<ComponentNotToBeCached />
5460
<ComponentToCache cache />
55-
<ComponentToTemplatize templatizedProp1="value" templatizedProp2="value2" nonTemplatizedProp="anotherValue" cache templatized={["templatizedProp1", "templatizedProp2"]} />
61+
<ComponentToTemplatize
62+
templatizedProp1="value1"
63+
templatizedProp2="value2"
64+
nonTemplatizedProp="anotherValue"
65+
cache
66+
templatized={["templatizedProp1", "templatizedProp2"]} />
5667
</div>
5768
);
5869
}
@@ -77,32 +88,25 @@ React Component Caching provides its own cache implementation as well as support
7788

7889
```javascript
7990
const ReactCC = require("react-component-caching");
80-
81-
const cache = ReactCC.ComponentCache();
82-
83-
ReactCC.renderToString(<App />, cache);
91+
const cache = new ReactCC.ComponentCache();
8492
```
8593

8694
**Redis Example:**
8795

8896
```javascript
8997
const ReactCC = require("react-component-caching");
9098
const redis = require("redis");
91-
9299
const cache = redis.createClient();
93-
94-
ReactCC.renderToString(<App />, cache);
95100
```
96101

97102
**Memcached Example:**
98103

99104
```javascript
100105
const ReactCC = require("react-component-caching");
101106
const Memcached = require("memcached");
102-
103107
const cache = new Memcached(server location, options);
104108

105-
// Make sure to pass in the lifetime of the data (in seconds) as a number.
109+
// If using Memcached, make sure to pass in the lifetime of the data (in seconds) as a number.
106110
ReactCC.renderToString(<App />, cache, 1000);
107111
```
108112

‎SSRtest/package-lock.json‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎SSRtest/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
"description": "Server side rendering template for React 16",
55
"main": "src/index.js",
66
"scripts": {
7-
"start": "cross-env NODE_ENV=development babel-node src/index",
8-
"watch": "cross-env NODE_ENV=development babel-watch src/index",
7+
"start": "cross-env NODE_ENV=production babel-node src/index",
8+
"watch": "cross-env NODE_ENV=production babel-watch src/index",
99
"build": "npm run build:client && npm run build:server && npm run build:node",
1010
"build:client": "cross-env NODE_ENV=production webpack -p --config webpack/client.production.js",
1111
"build:server": "cross-env NODE_ENV=production webpack -p --config webpack/server.production.js",
@@ -33,6 +33,7 @@
3333
"memcached": "^2.2.2",
3434
"npm": "^5.7.1",
3535
"react": "^16.2.0",
36+
"react-component-caching": "^1.1.0",
3637
"react-dom": "^16.2.0",
3738
"react-universal-component": "^2.5.5",
3839
"redis": "^2.8.0",

‎SSRtest/src/server/index.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react';
22
// import ReactCC from '../../developmentBuild';
33
// import ReactCC from '../../productionBuild';
4-
import ReactCC from 'react-dom/server'
4+
// import ReactCC from 'react-dom/server'
5+
import ReactCC from 'react-component-caching'
56
import { flushChunkNames } from 'react-universal-component/server';
67
import flushChunks from 'webpack-flush-chunks';
78
// import nodeStream from "./nodeStream.js";
89
import App from '../shared/App';
910

1011
// can pass in max-size, otherwise defaults to 1 million
11-
// const cache = new ReactCC.ComponentCache();
12+
const cache = new ReactCC.ComponentCache();
1213
// import redis from 'redis';
1314
// const cache = redis.createClient();
1415
// import memcached from 'memcached';
@@ -30,22 +31,22 @@ import App from '../shared/App';
3031
*/
3132
export default ({ clientStats }) => async (req, res) => {
3233
// Need To Come back To If Statement
33-
if(true){
34-
let htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
34+
// if(true){
35+
// let htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
3536

36-
let htmlEnd = "</div></body></html>";
37+
// let htmlEnd = "</div></body></html>";
3738

38-
ReactCC.renderToNodeStream(<App/>, cache, res, htmlStart, htmlEnd);
39-
// const cacheStream = ReactCC.createCacheStream(cache, streamingStart);
40-
// cacheStream.pipe(res);
41-
// cacheStream.write(htmlStart);
39+
// ReactCC.renderToNodeStream(<App/>, cache, res, htmlStart, htmlEnd);
40+
// // const cacheStream = ReactCC.createCacheStream(cache, streamingStart);
41+
// // cacheStream.pipe(res);
42+
// // cacheStream.write(htmlStart);
4243

43-
}
44-
else if (false){
44+
// }
45+
// else if (false){
4546
const app = <App />;
4647
const start_cached = process.hrtime();
4748

48-
const appString = await ReactCC.renderToString(app);
49+
const appString = await ReactCC.renderToString(app,cache);
4950
const end_cached = process.hrtime(start_cached);
5051
console.info(
5152
"Cached render time: %ds %dms",
@@ -61,6 +62,6 @@ export default ({ clientStats }) => async (req, res) => {
6162
styles,
6263
cssHash
6364
});
64-
}
65+
// }
6566

6667
};

‎SSRtest/src/shared/App.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ export default class App extends Component {
1717
return (
1818
<div>
1919
<h1>THIS IS AN APP</h1>
20-
<Button />
21-
<BlogPost />
22-
<BlogPost />
23-
<List />
20+
<Button cache/>
21+
<BlogPost cache/>
22+
<BlogPost cache/>
23+
<List cache/>
2424

2525
</div>
2626
);

‎SSRtest/src/shared/List.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default class List extends Component {
1212
let bunchOfProducts = [];
1313
const templatizedProps = ["name", "description", "price"];
1414
for (let i=0; i<1000; i++) {
15-
bunchOfProducts.push(<ProductInfo key={i} name={`Thing ${i}`} description="This product is awesome!" price={i * 10} nonTemplatized="THIS TEXT SHOULD NEVER CHANGE" />);
15+
bunchOfProducts.push(<ProductInfo key={i} name={`Thing ${i}`} description="This product is awesome!" price={i * 10} nonTemplatized="THIS TEXT SHOULD NEVER CHANGE" templatized={templatizedProps}/>);
1616
}
1717
return (
1818
<div>

‎npmPackage/development.js‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2750,18 +2750,28 @@ function createCacheStream(cache, streamingStart) {
27502750
var tagEnd = void 0;
27512751

27522752
do {
2753-
if (!tagStart) tagStart = streamingStart[component];else tagStart = html[tagEnd] === '<' ? tagEnd : html.indexOf('<', tagEnd);
2753+
if (!tagStart) {
2754+
tagStart = streamingStart[component];
2755+
} else {
2756+
tagStart = html[tagEnd] === '<' ? tagEnd : html.indexOf('<', tagEnd);
2757+
}
27542758
tagEnd = html.indexOf('>', tagStart) + 1;
27552759
// Skip stack logic for void/self-closing elements and HTML comments
27562760
if (html[tagEnd - 2] !== '/' && html[tagStart + 1] !== '!') {
27572761
// Push opening tags onto stack; pop closing tags off of stack
2758-
if (html[tagStart + 1] !== '/') tagStack.push(html.slice(tagStart, tagEnd));else tagStack.pop();
2762+
if (html[tagStart + 1] !== '/') {
2763+
tagStack.push(html.slice(tagStart, tagEnd));
2764+
} else {
2765+
tagStack.pop();
2766+
}
27592767
}
27602768
} while (tagStack.length !== 0);
27612769
// cache component by slicing 'html'
27622770
if (memLife) {
27632771
cache.set(component, html.slice(streamingStart[component], tagEnd), memLife, function (err) {
2764-
if (err) console.log(err);
2772+
if (err) {
2773+
console.log(err);
2774+
}
27652775
});
27662776
} else {
27672777
cache.set(component, html.slice(streamingStart[component], tagEnd));
@@ -2782,7 +2792,7 @@ function originalRenderToNodeStream(element, cache, streamingStart) {
27822792
return new ReactMarkupReadableStream(element, false, cache, streamingStart, memLife);
27832793
}
27842794

2785-
function renderToNodeStream(compo, cache, res) {
2795+
function renderToNodeStream(element, cache, res) {
27862796

27872797
var htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
27882798

@@ -2796,7 +2806,7 @@ function renderToNodeStream(compo, cache, res) {
27962806
cacheStream.pipe(res);
27972807
cacheStream.write(htmlStart);
27982808

2799-
var stream$1ドル = originalRenderToNodeStream(compo, cache, streamingStart);
2809+
var stream$1ドル = originalRenderToNodeStream(element, cache, streamingStart);
28002810
stream$1ドル.pipe(cacheStream, { end: false });
28012811
stream$1ドル.on("end", function () {
28022812
cacheStream.end(htmlEnd);
@@ -2808,12 +2818,32 @@ function renderToNodeStream(compo, cache, res) {
28082818
* such as data-react-id that React uses internally.
28092819
* See https://reactjs.org/docs/react-dom-stream.html#rendertostaticnodestream
28102820
*/
2811-
function renderToStaticNodeStream(element, cache, streamingStart) {
2821+
function originalRenderToStaticNodeStream(element, cache, streamingStart) {
28122822
var memLife = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
28132823

28142824
return new ReactMarkupReadableStream(element, true, cache, streamingStart, memLife);
28152825
}
28162826

2827+
function renderToStaticNodeStream(element, cache, res) {
2828+
var htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
2829+
2830+
var htmlEnd = '</div></body></html>';
2831+
2832+
var streamingStart = {
2833+
sliceStartCount: htmlStart.length
2834+
};
2835+
2836+
var cacheStream = createCacheStream(cache, streamingStart);
2837+
cacheStream.pipe(res);
2838+
cacheStream.write(htmlStart);
2839+
2840+
var stream$1ドル = originalRenderToStaticNodeStream(element, cache, streamingStart);
2841+
stream$1ドル.pipe(cacheStream, { end: false });
2842+
stream$1ドル.on("end", function () {
2843+
cacheStream.end(htmlEnd);
2844+
});
2845+
}
2846+
28172847
function createCommonjsModule(fn, module) {
28182848
return module = { exports: {} }, fn(module, module.exports), module.exports;
28192849
}

‎npmPackage/package.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-component-caching",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"description": "Component caching library for server-side rendering in React",
55
"main": "index.js",
66
"directories": {
@@ -21,10 +21,6 @@
2121
"homepage": "https://github.com/rookLab/react-component-caching#readme",
2222
"dependencies": {
2323
"fbjs": "^0.8.16",
24-
"lru-cache": "^4.1.2",
2524
"object-assign": "^4.1.1"
26-
},
27-
"devDependencies": {
28-
"uglifyjs-webpack-plugin": "^1.2.4"
2925
}
3026
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /