Merge pull request rookLab#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"
   }
 }