Merge pull request #16 from adifiore/redis

Redis support with async implementation

Author: adifiore

SSRtest/ModifiedReact.js

@@ -27,6 +27,7 @@ var checkPropTypes = require('prop-types/checkPropTypes');
 var camelizeStyleName = require('fbjs/lib/camelizeStyleName');
 var stream = require('stream');
 var lru = require('lru-cache');
+var {promisify} = require('util');
 
 /**
  * WARNING: DO NOT manually require this module.
@@ -2204,7 +2205,11 @@ var ReactDOMServerRenderer = function () {
  // TODO: type this more strictly:
 
 
- ReactDOMServerRenderer.prototype.read = function read(bytes, cache) {
+ ReactDOMServerRenderer.prototype.read = async function read(bytes, cache) {
+ // Promisify the get method, which is asynchronous for Redis
+ const getAsync = promisify(cache.get).bind(cache);
+ let continueLoop = true;
+ // Store starting locations of about-to-be-cached HTML within 'out'
  const start = {};
  if (this.exhausted) {
  return null;
@@ -2228,21 +2233,25 @@ var ReactDOMServerRenderer = function () {
  }
  continue;
  }
-
  var child = frame.children[frame.childIndex++];
  {
  setCurrentDebugStack(this.stack);
  }
 
- // IF THE CHILD HAS A CACHEKEY PROPERTY ON IT
- if(child.props.cache){
+ // CACHING LOGIC: EXECUTES IF THE CHILD HAS A 'CACHE' PROP ON IT
+ if(child.props && child.props.cache){
+ // Create unique cacheKey as a function of component name and props
  const cacheKey = child.type.name + JSON.stringify(child.props);
- if (!cache.storage.get(cacheKey)){
+
+ // Check cache (async function)
+ const reply = await getAsync(cacheKey);
+ if(reply){
+ out += reply;
+ } else {
  start[cacheKey] = out.length;
  out += this.render(child, frame.context, frame.domNamespace);
- } else {
- out += cache.storage.get(cacheKey);
  }
+ 
  } else {
  out += this.render(child, frame.context, frame.domNamespace);
  }
@@ -2252,13 +2261,14 @@ var ReactDOMServerRenderer = function () {
  }
  }
 
- for (let component in start) {
+ // Add newly marked items to the cache:
+ for (let cacheKey in start) {
  let tagStack = [];
  let tagStart;
  let tagEnd;
 
  do {
- if (!tagStart) tagStart = start[component];
+ if (!tagStart) tagStart = start[cacheKey];
  else tagStart = (out[tagEnd] === '<') ? tagEnd : out.indexOf('<', tagEnd)
  tagEnd = out.indexOf('>', tagStart) + 1;
  // Skip stack logic for void/self-closing elements
@@ -2270,7 +2280,7 @@ var ReactDOMServerRenderer = function () {
  } while (tagStack.length !== 0);
 
  // cache component by slicing 'out'
- cache.storage.set(component, out.slice(start[component], tagEnd));
+ cache.set(cacheKey, out.slice(start[cacheKey], tagEnd));
  }
  return out;
  };
@@ -2529,9 +2539,9 @@ var ReactDOMServerRenderer = function () {
  * server.
  * See https://reactjs.org/docs/react-dom-server.html#rendertostring
  */
-function renderToString(element, cache) {
+async function renderToString(element, cache) {
  var renderer = new ReactDOMServerRenderer(element, false);
- var markup = renderer.read(Infinity, cache);
+ var markup = await renderer.read(Infinity,cache);
  return markup;
 }
 
@@ -2613,8 +2623,17 @@ class ComponentCache {
 length: (n, key) => {
 return n.length + key.length;
 }
-});
+ });
+ }
+
+ get(cacheKey, cb) {
+ let reply = this.storage.get(cacheKey);
+ // return reply;
+ cb(null,reply);
+ }
 
+ set(cacheKey, html) {
+ this.storage.set(cacheKey, html);
  }
 } 
 

SSRtest/package-lock.json

@@ -34,6 +34,7 @@
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "react-universal-component": "^2.5.5",
+ "redis": "^2.8.0",
  "webpack-flush-chunks": "^1.1.23",
  "winston": "^2.3.1"
  },

SSRtest/package.json

@@ -9,15 +9,18 @@ import App from '../shared/App';
 
 // can pass in max-size, otherwise defaults to 1 million
 const cache = new ReactCC.ComponentCache();
+// import redis from 'redis';
+// const cache = redis.createClient();
 
 /**
  * @param clientStats Parameter passed by hot server middleware
  */
 export default ({ clientStats }) => async (req, res) => {
  const app = <App />;
  const start_cached = process.hrtime();
- // const appString = ReactCC.renderToStaticMarkup(app, cache);
- const appString = ReactCC.renderToString(app, cache);
+ 
+ 
+ const appString = await ReactCC.renderToString(app, cache);
  const end_cached = process.hrtime(start_cached);
  console.info(
  "Cached render time: %ds %dms",

SSRtest/src/server/index.js

@@ -19,7 +19,7 @@ export default class App extends Component {
  <h1>THIS IS AN APP</h1>
  <Button />
  <List cache/>
- <BlogPost />
+ <BlogPost thing='haha'/>
  </div>
  );
  }

SSRtest/src/shared/App.js

@@ -13,6 +13,7 @@ export default class BlogPost extends Component {
  <div>
  <h1>This is a great blog post!</h1>
  <BlogContent />
+ <p>{this.props.thing}</p>
  </div>
  );
  }

SSRtest/src/shared/BlogPost.js

@@ -16,9 +16,6 @@ export default class List extends Component {
  <div>
  <h1>Here's my list</h1>
  {bunchOfPics}
- {/* <ListItem />
- <ListItem />
- <ListItem /> */}
  </div>
  );
  }

SSRtest/src/shared/List.js

@@ -1,8 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
- // NOTE: CHANGE TO PRODUCTION WHEN WE HAVE THAT FINAL FILE
- module.exports = require('./development.js');
+ module.exports = require('./production.js');
 } else {
  module.exports = require('./development.js');
 }