PoC hack for facebook#3009.

Allows feeding a write callback for renderToStaticMarkup().
jussi-kalliokoski · Feb 4, 2015 · 5dcf432 · 5dcf432
1 parent c8833da
commit 5dcf432
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 15 deletions.
diff --git a/src/browser/server/ReactServerRendering.js b/src/browser/server/ReactServerRendering.js
@@ -25,21 +25,27 @@ var invariant = require('invariant');
  * @param {ReactElement} element
  * @return {string} the HTML markup
  */
-function renderToString(element) {
+function renderToString(element, writeFn) {
   invariant(
     ReactElement.isValidElement(element),
     'renderToString(): You must pass a valid ReactElement.'
   );
 
+  var markup = '';
+
+  writeFn = writeFn || function (string) {
+      markup += string;
+  };
+
   var transaction;
   try {
     var id = ReactInstanceHandles.createReactRootID();
     transaction = ReactServerRenderingTransaction.getPooled(false);
+    transaction.write = writeFn;
 
     return transaction.perform(function() {
       var componentInstance = instantiateReactComponent(element, null);
-      var markup =
-        componentInstance.mountComponent(id, transaction, emptyObject);
+      componentInstance.mountComponent(id, transaction, emptyObject);
       return ReactMarkupChecksum.addChecksumToMarkup(markup);
     }, null);
   } finally {
@@ -52,20 +58,28 @@ function renderToString(element) {
  * @return {string} the HTML markup, without the extra React ID and checksum
  * (for generating static pages)
  */
-function renderToStaticMarkup(element) {
+function renderToStaticMarkup(element, writeFn) {
   invariant(
     ReactElement.isValidElement(element),
     'renderToStaticMarkup(): You must pass a valid ReactElement.'
   );
 
+  var markup = '';
+
+  writeFn = writeFn || function (string) {
+      markup += string;
+  };
+
   var transaction;
   try {
     var id = ReactInstanceHandles.createReactRootID();
-    transaction = ReactServerRenderingTransaction.getPooled(true);
+    transaction = ReactServerRenderingTransaction.getPooled(true, writeFn);
+    transaction.write = writeFn;
 
     return transaction.perform(function() {
       var componentInstance = instantiateReactComponent(element, null);
-      return componentInstance.mountComponent(id, transaction, emptyObject);
+      componentInstance.mountComponent(id, transaction, emptyObject);
+      return markup;
     }, null);
   } finally {
     ReactServerRenderingTransaction.release(transaction);

diff --git a/src/browser/server/ReactServerRenderingTransaction.js b/src/browser/server/ReactServerRenderingTransaction.js
@@ -57,7 +57,7 @@ var TRANSACTION_WRAPPERS = [
  * @class ReactServerRenderingTransaction
  * @param {boolean} renderToStaticMarkup
  */
-function ReactServerRenderingTransaction(renderToStaticMarkup) {
+function ReactServerRenderingTransaction(renderToStaticMarkup, writeFn) {
   this.reinitializeTransaction();
   this.renderToStaticMarkup = renderToStaticMarkup;
   this.reactMountReady = CallbackQueue.getPooled(null);

diff --git a/src/browser/ui/ReactDOMComponent.js b/src/browser/ui/ReactDOMComponent.js
@@ -193,12 +193,12 @@ ReactDOMComponent.Mixin = {
   mountComponent: function(rootID, transaction, context) {
     this._rootNodeID = rootID;
     assertValidProps(this._currentElement.props);
-    var closeTag = omittedCloseTags[this._tag] ? '' : '</' + this._tag + '>';
-    return (
-      this._createOpenTagMarkupAndPutListeners(transaction) +
-      this._createContentMarkup(transaction, context) +
-      closeTag
-    );
+    transaction.write(this._createOpenTagMarkupAndPutListeners(transaction));
+    transaction.write(this._createContentMarkup(transaction, context));
+    if (!omittedCloseTags[this._tag]) {
+        var closeTag = '</' + this._tag + '>';
+        transaction.write(closeTag);
+    }
   },
 
   /**

diff --git a/src/browser/ui/ReactDOMTextComponent.js b/src/browser/ui/ReactDOMTextComponent.js
@@ -73,10 +73,10 @@ assign(ReactDOMTextComponent.prototype, {
       // Normally we'd wrap this in a `span` for the reasons stated above, but
       // since this is a situation where React won't take over (static pages),
       // we can simply return the text as it is.
-      return escapedText;
+      transaction.write(escapedText);
     }
 
-    return (
+    transaction.write(
       '<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +
         escapedText +
       '</span>'