Merge pull request #26 from kodakyellow/nodeStreaming

inserted renderToNodeStream code

Author: kodakyellow

SSRtest/ModifiedReact.js

@@ -2204,7 +2204,8 @@ var ReactDOMServerRenderer = function () {
  // TODO: type this more strictly:
 
 
- ReactDOMServerRenderer.prototype.read = function read(bytes, cache) { 
+ ReactDOMServerRenderer.prototype.read = function read(bytes, cache, isStreaming,
+ streamingStart) { 
  /* 
  --- Component caching variables ---
  start: Tracks start index in output string and templatization data for cached components
@@ -2304,7 +2305,13 @@ var ReactDOMServerRenderer = function () {
  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;
+ if (!isTemplate) {
+ if (isStreaming) {
+ // streamingStart[cacheKey] = out.length;
+ streamingStart[cacheKey] = streamingStart.sliceStartCount + out.length;
+ console.log("finalcount", streamingStart.finalSliceStart);
+ } else start[cacheKey] = out.length;
+ }
  } else { // Component found in cache
  if (isTemplate) {
  restoredTemplate = restoreProps(reply, realProps, lookup);
@@ -2326,47 +2333,53 @@ 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 = componentStart;
- else tagStart = (out[tagEnd] === '<') ? tagEnd : out.indexOf('<', tagEnd);
- tagEnd = out.indexOf('>', tagStart) + 1;
- // 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();
+ if (!isStreaming) {
+ 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 = componentStart;
+ else tagStart = (out[tagEnd] === '<') ? tagEnd : out.indexOf('<', tagEnd);
+ tagEnd = out.indexOf('>', tagStart) + 1;
+ // 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'
+ const cachedComponent = out.slice(componentStart, tagEnd);
+ if (typeof start[component] === 'object') {
+ saveTemplates.push(start[component]);
+ start[component].endIndex = tagEnd;
  }
- } while (tagStack.length !== 0);
- // Cache component by slicing 'out'
- const cachedComponent = out.slice(componentStart, tagEnd);
- if (typeof start[component] === 'object') {
- saveTemplates.push(start[component]);
- start[component].endIndex = tagEnd;
+ cache.set(component, cachedComponent);
  }
- 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);
+ // 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);
+ }
+ } else {
+ // console.log(out.length, streamingStart);
+ streamingStart.sliceStartCount += out.length;
+ console.log("rolling count", streamingStart["sliceStartCount"]);
  }
  return out;
  };
@@ -2653,21 +2666,29 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var ReactMarkupReadableStream = function (_Readable) {
  _inherits(ReactMarkupReadableStream, _Readable);
 
- function ReactMarkupReadableStream(element, makeStaticMarkup) {
+ function ReactMarkupReadableStream(element, makeStaticMarkup, cache, streamingStart) {
  _classCallCheck$1(this, ReactMarkupReadableStream);
 
  var _this = _possibleConstructorReturn(this, _Readable.call(this, {}));
  // Calls the stream.Readable(options) constructor. Consider exposing built-in
  // features like highWaterMark in the future.
 
-
+ _this.cache = cache;
+ _this.streamingStart = streamingStart;
  _this.partialRenderer = new ReactDOMServerRenderer(element, makeStaticMarkup);
  return _this;
  }
 
  ReactMarkupReadableStream.prototype._read = function _read(size) {
  try {
- this.push(this.partialRenderer.read(size));
+ this.push(
+ this.partialRenderer.read(
+ size,
+ this.cache,
+ true,
+ this.streamingStart
+ )
+ );
  } catch (err) {
  this.emit('error', err);
  }
@@ -2682,8 +2703,13 @@ var ReactMarkupReadableStream = function (_Readable) {
  */
 
 
-function renderToNodeStream(element) {
- return new ReactMarkupReadableStream(element, false);
+function renderToNodeStream(element, cache, streamingStart) {
+ return new ReactMarkupReadableStream(
+ element,
+ false,
+ cache,
+ streamingStart
+ );
 }
 
 /**

SSRtest/src/server/cacheStream.js

@@ -0,0 +1,58 @@
+import { Transform } from "stream";
+import { create } from "domain";
+
+const createCacheStream = (cache, streamingStart) => {
+ const bufferedChunks = [];
+ return new Transform({
+ // transform() is called with each chunk of data
+ transform(data, enc, cb) {
+ // We store the chunk of data (which is a Buffer) in memory
+ bufferedChunks.push(data);
+ // Then pass the data unchanged onwards to the next stream
+ cb(null, data);
+ },
+
+ // flush() is called when everything is done
+ flush(cb) {
+ // We concatenate all the buffered chunks of HTML to get the full HTML
+ // then cache it at "key"
+
+ // console.log(cache);
+ // console.log(bufferedChunks.join());
+ // cache.set(key, Buffer.concat(bufferedChunks));
+ // console.log("final", streamingStart.finalSliceStart);
+ //joinedChunks = bufferedChunks.join(""); 
+ let html = bufferedChunks.join("");
+ delete streamingStart.sliceStartCount; 
+
+ for (let component in streamingStart) {
+ let tagStack = [];
+ let tagStart;
+ let tagEnd;
+
+ do {
+ 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
+ if (html[tagEnd - 2] !== "/") {
+ // Push opening tags onto stack; pop closing tags off of stack
+ if (html[tagStart + 1] !== "/")
+ tagStack.push(html.slice(tagStart, tagEnd));
+ else tagStack.pop();
+ }
+ } while (tagStack.length !== 0);
+ //console.log(html.slice(streamingStart[component], tagEnd));
+ // cache component by slicing 'html'
+ cache.storage.set(component, html.slice(streamingStart[component], tagEnd));
+ }
+ //console.log("to be saved:", bufferedChunks.join(""));
+ //console.log(cache);
+ cb();
+ }
+ });
+};
+
+export default createCacheStream;

SSRtest/src/server/index.js

@@ -7,12 +7,36 @@ import flushChunks from 'webpack-flush-chunks';
 
 import App from '../shared/App';
 
+import createCacheStream from "./cacheStream";
 // can pass in max-size, otherwise defaults to 1 million
 const cache = new ReactCC.ComponentCache();
+// Force NodeStream
+
+const htmlStart =
+ '<html><head><title>Page</title></head><body><div id="react-root">';
+const htmlEnd = "</div></body></html>";
+
+
+const streamingStart = {
+ sliceStartCount: htmlStart.length, 
+};
 /**
  * @param clientStats Parameter passed by hot server middleware
  */
 export default ({ clientStats }) => async (req, res) => {
+ // Need To Come back To If Statement
+ if(true){
+ const cacheStream = createCacheStream(cache, streamingStart);
+ cacheStream.pipe(res);
+ cacheStream.write(htmlStart);
+
+ const stream = ReactCC.renderToNodeStream(<App />, cache, streamingStart);
+ stream.pipe(cacheStream, { end: false });
+ stream.on("end", () => {
+ cacheStream.end(htmlEnd);
+ });
+ }
+ else{
  const app = <App />;
  const start_cached = process.hrtime();
  // const appString = ReactCC.renderToStaticMarkup(app, cache);
@@ -32,4 +56,6 @@ export default ({ clientStats }) => async (req, res) => {
  styles,
  cssHash
  });
+ }
+ 
  };

SSRtest/src/shared/App.js

@@ -18,8 +18,8 @@ export default class App extends Component {
  <div>
  <h1>THIS IS AN APP</h1>
  <Button cache />
- <BlogPost day="Monday" cache templatized="day" />
- <BlogPost day="Tuesday" cache templatized="day" />
+ <BlogPost cache />
+ <BlogPost cache />
 
  <List />
 

SSRtest/src/shared/List.js

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