Merge pull request #36 from adifiore/master

Package v1.1.0

Author: stevedorke

README.md

@@ -2,9 +2,9 @@
 
 ## Overview
 React Component Caching is a component-level caching library for faster server-side rendering with React 16. 
-- Use any of React's four server-side rendering methods
-- Cache components using a simple or template strategy
-- Choose from three cache implementations (LRU, Redis, or Memcached)
+- Use any of React's four server-side rendering methods. Rendering is **asynchronous**.
+- Cache components using a simple or template strategy.
+- Choose from three cache implementations (LRU, Redis, or Memcached).
 
 ## Installation
 Using npm:
@@ -15,10 +15,16 @@ $ npm install react-component-caching
 ## Usage
 ### In Node rendering server:
 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`.
+
+**Note: All of these methods are asynchronous, and return a promise. To use them, `await` the response before rendering**
 ```javascript
 const ReactCC = require("react-component-caching");
-const cache = ReactCC.ComponentCache();
-ReactCC.renderToString(<App />, cache>)
+const cache = new ReactCC.ComponentCache();
+
+app.get('/example', async (req,res) => {
+ const renderString = await ReactCC.renderToString(<App />, cache);
+ res.send(renderString);
+});
 
 // ...
 ```
@@ -52,7 +58,12 @@ export default class App extends Component {
  <div>
  <ComponentNotToBeCached />
  <ComponentToCache cache />
- <ComponentToTemplatize templatizedProp1="value" templatizedProp2="value2" nonTemplatizedProp="anotherValue" cache templatized={["templatizedProp1", "templatizedProp2"]} />
+ <ComponentToTemplatize
+ templatizedProp1="value1"
+ templatizedProp2="value2"
+ nonTemplatizedProp="anotherValue"
+ cache
+ templatized={["templatizedProp1", "templatizedProp2"]} />
  </div>
  );
  }
@@ -77,32 +88,25 @@ React Component Caching provides its own cache implementation as well as support
 
 ```javascript
 const ReactCC = require("react-component-caching");
-
-const cache = ReactCC.ComponentCache();
-
-ReactCC.renderToString(<App />, cache);
+const cache = new ReactCC.ComponentCache();
 ```
 
 **Redis Example:**
 
 ```javascript
 const ReactCC = require("react-component-caching");
 const redis = require("redis");
-
 const cache = redis.createClient();
-
-ReactCC.renderToString(<App />, cache);
 ```
 
 **Memcached Example:**
 
 ```javascript
 const ReactCC = require("react-component-caching");
 const Memcached = require("memcached");
-
 const cache = new Memcached(server location, options);
 
-// Make sure to pass in the lifetime of the data (in seconds) as a number.
+// If using Memcached, make sure to pass in the lifetime of the data (in seconds) as a number.
 ReactCC.renderToString(<App />, cache, 1000);
 ```
 

SSRtest/package-lock.json

@@ -4,8 +4,8 @@
  "description": "Server side rendering template for React 16",
  "main": "src/index.js",
  "scripts": {
- "start": "cross-env NODE_ENV=development babel-node src/index",
- "watch": "cross-env NODE_ENV=development babel-watch src/index",
+ "start": "cross-env NODE_ENV=production babel-node src/index",
+ "watch": "cross-env NODE_ENV=production babel-watch src/index",
  "build": "npm run build:client && npm run build:server && npm run build:node",
  "build:client": "cross-env NODE_ENV=production webpack -p --config webpack/client.production.js",
  "build:server": "cross-env NODE_ENV=production webpack -p --config webpack/server.production.js",
@@ -33,6 +33,7 @@
  "memcached": "^2.2.2",
  "npm": "^5.7.1",
  "react": "^16.2.0",
+ "react-component-caching": "^1.1.0",
  "react-dom": "^16.2.0",
  "react-universal-component": "^2.5.5",
  "redis": "^2.8.0",

SSRtest/package.json

@@ -1,14 +1,15 @@
 import React from 'react';
 // import ReactCC from '../../developmentBuild';
 // import ReactCC from '../../productionBuild';
-import ReactCC from 'react-dom/server'
+// import ReactCC from 'react-dom/server'
+import ReactCC from 'react-component-caching'
 import { flushChunkNames } from 'react-universal-component/server';
 import flushChunks from 'webpack-flush-chunks';
 // import nodeStream from "./nodeStream.js";
 import App from '../shared/App';
 
 // can pass in max-size, otherwise defaults to 1 million
-// const cache = new ReactCC.ComponentCache();
+const cache = new ReactCC.ComponentCache();
 // import redis from 'redis';
 // const cache = redis.createClient();
 // import memcached from 'memcached';
@@ -30,22 +31,22 @@ import App from '../shared/App';
  */
 export default ({ clientStats }) => async (req, res) => {
  // Need To Come back To If Statement
- if(true){
- let htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
+ // if(true){
+ //  let htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
 
- let htmlEnd = "</div></body></html>";
+ //  let htmlEnd = "</div></body></html>";
 
- ReactCC.renderToNodeStream(<App/>, cache, res, htmlStart, htmlEnd); 
- // const cacheStream = ReactCC.createCacheStream(cache, streamingStart);
- // cacheStream.pipe(res);
- // cacheStream.write(htmlStart);
+ //  ReactCC.renderToNodeStream(<App/>, cache, res, htmlStart, htmlEnd); 
+ //  // const cacheStream = ReactCC.createCacheStream(cache, streamingStart);
+ //  // cacheStream.pipe(res);
+ //  // cacheStream.write(htmlStart);
 
- }
- else if (false){
+ // }
+ // else if (false){
  const app = <App />;
  const start_cached = process.hrtime();
 
- const appString = await ReactCC.renderToString(app);
+ const appString = await ReactCC.renderToString(app, cache);
  const end_cached = process.hrtime(start_cached);
  console.info(
  "Cached render time: %ds %dms",
@@ -61,6 +62,6 @@ export default ({ clientStats }) => async (req, res) => {
  styles,
  cssHash
  });
- }
+ // }
 
 };

SSRtest/src/server/index.js

@@ -17,10 +17,10 @@ export default class App extends Component {
  return (
  <div>
  <h1>THIS IS AN APP</h1>
- <Button />
- <BlogPost />
- <BlogPost /> 
- <List />
+ <Button cache />
+ <BlogPost cache />
+ <BlogPost cache /> 
+ <List cache />
 
  </div>
  );

SSRtest/src/shared/App.js

@@ -12,7 +12,7 @@ export default class List extends Component {
  let bunchOfProducts = [];
  const templatizedProps = ["name", "description", "price"];
  for (let i=0; i<1000; i++) {
- bunchOfProducts.push(<ProductInfo key={i} name={`Thing ${i}`} description="This product is awesome!" price={i * 10} nonTemplatized="THIS TEXT SHOULD NEVER CHANGE" />);
+ bunchOfProducts.push(<ProductInfo key={i} name={`Thing ${i}`} description="This product is awesome!" price={i * 10} nonTemplatized="THIS TEXT SHOULD NEVER CHANGE" templatized={templatizedProps}/>);
  }
  return (
  <div>

SSRtest/src/shared/List.js

@@ -2750,18 +2750,28 @@ function createCacheStream(cache, streamingStart) {
  var tagEnd = void 0;
 
  do {
- if (!tagStart) tagStart = streamingStart[component];else tagStart = html[tagEnd] === '<' ? tagEnd : html.indexOf('<', tagEnd);
+ if (!tagStart) {
+ tagStart = streamingStart[component];
+ } else {
+ tagStart = html[tagEnd] === '<' ? tagEnd : html.indexOf('<', tagEnd);
+ }
  tagEnd = html.indexOf('>', tagStart) + 1;
  // Skip stack logic for void/self-closing elements and HTML comments 
  if (html[tagEnd - 2] !== '/' && html[tagStart + 1] !== '!') {
  // Push opening tags onto stack; pop closing tags off of stack
- if (html[tagStart + 1] !== '/') tagStack.push(html.slice(tagStart, tagEnd));else tagStack.pop();
+ if (html[tagStart + 1] !== '/') {
+ tagStack.push(html.slice(tagStart, tagEnd));
+ } else {
+ tagStack.pop();
+ }
  }
  } while (tagStack.length !== 0);
  // cache component by slicing 'html'
  if (memLife) {
  cache.set(component, html.slice(streamingStart[component], tagEnd), memLife, function (err) {
- if (err) console.log(err);
+ if (err) {
+ console.log(err);
+ }
  });
  } else {
  cache.set(component, html.slice(streamingStart[component], tagEnd));
@@ -2782,7 +2792,7 @@ function originalRenderToNodeStream(element, cache, streamingStart) {
  return new ReactMarkupReadableStream(element, false, cache, streamingStart, memLife);
 }
 
-function renderToNodeStream(compo, cache, res) {
+function renderToNodeStream(element, cache, res) {
 
  var htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
 
@@ -2796,7 +2806,7 @@ function renderToNodeStream(compo, cache, res) {
  cacheStream.pipe(res);
  cacheStream.write(htmlStart);
 
- var stream$$1 = originalRenderToNodeStream(compo, cache, streamingStart);
+ var stream$$1 = originalRenderToNodeStream(element, cache, streamingStart);
  stream$$1.pipe(cacheStream, { end: false });
  stream$$1.on("end", function () {
  cacheStream.end(htmlEnd);
@@ -2808,12 +2818,32 @@ function renderToNodeStream(compo, cache, res) {
  * such as data-react-id that React uses internally.
  * See https://reactjs.org/docs/react-dom-stream.html#rendertostaticnodestream
  */
-function renderToStaticNodeStream(element, cache, streamingStart) {
+function originalRenderToStaticNodeStream(element, cache, streamingStart) {
  var memLife = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
 
  return new ReactMarkupReadableStream(element, true, cache, streamingStart, memLife);
 }
 
+function renderToStaticNodeStream(element, cache, res) {
+ var htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
+
+ var htmlEnd = '</div></body></html>';
+
+ var streamingStart = {
+ sliceStartCount: htmlStart.length
+ };
+
+ var cacheStream = createCacheStream(cache, streamingStart);
+ cacheStream.pipe(res);
+ cacheStream.write(htmlStart);
+
+ var stream$$1 = originalRenderToStaticNodeStream(element, cache, streamingStart);
+ stream$$1.pipe(cacheStream, { end: false });
+ stream$$1.on("end", function () {
+ cacheStream.end(htmlEnd);
+ });
+}
+
 function createCommonjsModule(fn, module) {
 return module = { exports: {} }, fn(module, module.exports), module.exports;
 }

npmPackage/development.js

@@ -1,6 +1,6 @@
 {
  "name": "react-component-caching",
- "version": "1.0.0",
+ "version": "1.1.0",
  "description": "Component caching library for server-side rendering in React",
  "main": "index.js",
  "directories": {
@@ -21,10 +21,6 @@
  "homepage": "https://github.com/rookLab/react-component-caching#readme",
  "dependencies": {
  "fbjs": "^0.8.16",
- "lru-cache": "^4.1.2",
  "object-assign": "^4.1.1"
- },
- "devDependencies": {
- "uglifyjs-webpack-plugin": "^1.2.4"
  }
 }