diff --git a/src/browser/server/ReactServerRendering.js b/src/browser/server/ReactServerRendering.js index 3fe7024f25674..776a1306bf7ad 100644 --- 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 index 0b89ac5ad32fc..ad6c516497718 100644 --- 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 index 09cac41db72f9..398c414db863e 100644 --- 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] ? '' : ''; - 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 = ''; + transaction.write(closeTag); + } }, /** diff --git a/src/browser/ui/ReactDOMTextComponent.js b/src/browser/ui/ReactDOMTextComponent.js index 23d877fc62dda..9dc892d143c86 100644 --- 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( '' + escapedText + ''