Merge branch 'master' of https://github.com/rookLab/react-component-caching

Author: adifiore

SSRtest/ModifiedReact.js

@@ -2204,8 +2204,22 @@ var ReactDOMServerRenderer = function () {
  // TODO: type this more strictly:
 
 
- ReactDOMServerRenderer.prototype.read = function read(bytes, cache) {
- const start = {};
+ ReactDOMServerRenderer.prototype.read = function read(bytes, cache) { 
+ /* 
+ --- Component caching variables ---
+ start: Tracks start index in output string and templatization data for cached components
+ saveTemplates: Tracks templatized components so props can be restored in output string
+ restoreProps: Restores actual props to a templatized component
+ */
+ const start = {}; 
+ let saveTemplates; 
+ const restoreProps = (template, props, lookup) => {
+ return template.replace(/\{\{[0-9]+\}\}/g, match => props[lookup[match]]);
+ };
+ 
+ /*
+ --- Begin React 16 source code with addition of component caching logic ---
+ */
  if (this.exhausted) {
  return null;
  }
@@ -2233,17 +2247,68 @@ var ReactDOMServerRenderer = function () {
  {
  setCurrentDebugStack(this.stack);
  }
-
- // IF THE CHILD HAS A CACHEKEY PROPERTY ON IT
- if(child.props && child.props.cache){
- const cacheKey = child.type.name + JSON.stringify(child.props);
- if (!cache.get(cacheKey)){
- start[cacheKey] = out.length;
- out += this.render(child, frame.context, frame.domNamespace);
+ 
+ /* 
+ --- Component caching logic ---
+ */
+ if(child.props && child.props.cache) {
+ let cacheKey;
+ let isTemplate = child.props.templatized ? true : false;
+ let lookup; 
+ let modifiedChild;
+ let realProps;
+
+ if (isTemplate) {
+ // Generate templatized version of props to generate appropriate cache key
+ let cacheProps = Object.assign({}, child.props); 
+ let templatizedProps = child.props.templatized;
+ lookup = {};
+
+ if (typeof templatizedProps === 'string') templatizedProps = [templatizedProps];
+
+ // Generate template placeholders and lookup object for referencing prop names from placeholders
+ templatizedProps.forEach((templatizedProp, index) => {
+ const placeholder = `{{${index}}}`;
+ cacheProps[templatizedProp] = placeholder; 
+ lookup[placeholder] = templatizedProp; // Move down to next if statement? (Extra work/space if not generating template)
+ });
+ 
+ cacheKey = child.type.name + JSON.stringify(cacheProps);
+
+ // Generate modified child with placeholder props to render template
+ if (!start[cacheKey]) {
+ modifiedChild = Object.assign({}, child);
+ modifiedChild.props = cacheProps;
+ realProps = child.props;
+ }
  } else {
- out += cache.get(cacheKey);
+ // Generate cache key for non-templatized component from its name and props
+ cacheKey = child.type.name + JSON.stringify(child.props);
  }
- } else {
+
+ if (!cache.get(cacheKey)) { // Component not found in cache
+ let r;
+
+ // If templatized component and template hasn't been generated, render a template
+ if (!start[cacheKey] && isTemplate) {
+ r = this.render(modifiedChild, frame.context, frame.domNamespace);
+ start[cacheKey] = { startIndex: out.length, realProps, lookup };
+ }
+ // Otherwise, render with actual props
+ else r = this.render(child, frame.context, frame.domNamespace);
+
+ // For simple (non-template) caching, save start index of component in output string
+ if (!isTemplate) start[cacheKey] = out.length;
+
+ out += r;
+ } else { // Component found in cache
+ let r = cache.get(cacheKey);
+ let restoredTemplate;
+ if (isTemplate) restoredTemplate = restoreProps(r, realProps, lookup);
+ out += restoredTemplate ? restoredTemplate : r;
+ }
+ } else { 
+ // Normal rendering for non-cached components
  out += this.render(child, frame.context, frame.domNamespace);
  }
  {
@@ -2252,25 +2317,51 @@ var ReactDOMServerRenderer = function () {
  }
  }
 
+ /*
+ --- After initial render of cacheable components, recover from output string and store in cache ---
+ */
  for (let component in start) {
  let tagStack = [];
  let tagStart;
  let tagEnd;
+ let componentStart = (typeof start[component] === 'object') ? start[component].startIndex : start[component];
 
  do {
- if (!tagStart) tagStart = start[component];
- else tagStart = (out[tagEnd] === '<') ? tagEnd : out.indexOf('<', tagEnd)
+ if (!tagStart) tagStart = componentStart;
+ else tagStart = (out[tagEnd] === '<') ? tagEnd : out.indexOf('<', tagEnd);
  tagEnd = out.indexOf('>', tagStart) + 1;
- // Skip stack logic for void/self-closing elements
- if (out[tagEnd - 2] !== '/') {
+ // Skip stack logic for void/self-closing elements and HTML comments 
+ // Note: Does not account for tags inside HTML comments
+ if (out[tagEnd - 2] !== '/' && out[tagStart + 1] !== '!') {
  // Push opening tags onto stack; pop closing tags off of stack
  if (out[tagStart + 1] !== '/') tagStack.push(out.slice(tagStart, tagEnd));
  else tagStack.pop();
  }
  } while (tagStack.length !== 0);
-
- // cache component by slicing 'out'
- cache.set(component, out.slice(start[component], tagEnd));
+ // Cache component by slicing 'out'
+ const cachedComponent = out.slice(componentStart, tagEnd);
+ if (typeof start[component] === 'object') {
+ if (!saveTemplates) saveTemplates = [];
+ saveTemplates.push(start[component]);
+ start[component].endIndex = tagEnd;
+ }
+ cache.set(component, cachedComponent);
+ }
+ 
+ // After caching all cacheable components, restore props to templates
+ if (saveTemplates) {
+ let outCopy = out;
+ out = '';
+ let bookmark = 0;
+ saveTemplates.sort((a, b) => a.startIndex - b.startIndex);
+ // Rebuild output string with actual props
+ saveTemplates.forEach(savedTemplate => {
+ out += outCopy.substring(bookmark, savedTemplate.startIndex)
+ bookmark = savedTemplate.endIndex;
+ out += restoreProps(outCopy.slice(savedTemplate.startIndex, savedTemplate.endIndex), 
+ savedTemplate.realProps, savedTemplate.lookup);
+ });
+ out += outCopy.substring(bookmark, outCopy.length);
  }
  return out;
  };
@@ -2647,4 +2738,4 @@ var server_node = ReactDOMServer['default'] ? ReactDOMServer['default'] : ReactD
 
 module.exports = server_node;
  })();
-}
+}