Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Server rendering: rendering of entire document using React.

Browse Source 
Summary: Allows rendering of React into the "document" as opposed to into a
particular node. To recap some basics:

document: One level above the <html> tag - like the browser.
document.documentElement: <body>

To support full-page server side rendering, we need to be able to render
*everything* including the HTML/BODY tags. This allows that.
This commit is contained in:
Jordan Walke
2013-08-23 02:04:07 -07:00
parent 6ca8d31c83
commit 49f174cdad
4 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/ReactComponentBrowserEnvironment.js
+7 -1
View File
@@ -29,6 +29,9 @@ var getReactRootElementInContainer = require('getReactRootElementInContainer');
var invariant = require('invariant');
var ELEMENT_NODE_TYPE = 1;
var DOC_NODE_TYPE = 9;
/**
* Abstracts away all functionality of `ReactComponent` requires knowledge of
@@ -78,7 +81,10 @@ var ReactComponentBrowserEnvironment = {
*/
mountImageIntoNode: function(markup, container, shouldReuseMarkup) {
invariant(
container && container.nodeType === 1,
container && (
container.nodeType === ELEMENT_NODE_TYPE ||
container.nodeType === DOC_NODE_TYPE && ReactMount.allowFullPageRender
),
'mountComponentIntoNode(...): Target container is not a DOM element.'
);
if (shouldReuseMarkup) {
src/core/ReactMount.js
+4
View File
@@ -197,6 +197,10 @@ function purgeID(id) {
* Inside of `container`, the first element rendered is the "reactRoot".
*/
var ReactMount = {
/**
* Safety guard to prevent accidentally rendering over the entire HTML tree.
*/
allowFullPageRender: false,
/** Time spent generating markup. */
totalInstantiationTime: 0,
src/vendor/core/createNodesFromMarkup.js
Vendored
+5 -1
View File
@@ -19,6 +19,8 @@
/*jslint evil: true, sub: true */
var ExecutionEnvironment = require('ExecutionEnvironment');
var createArrayFrom = require('createArrayFrom');
var getMarkupWrap = require('getMarkupWrap');
var invariant = require('invariant');
@@ -26,7 +28,8 @@ var invariant = require('invariant');
/**
* Dummy container used to render all markup.
*/
var dummyNode = document.createElement('div');
var dummyNode =
ExecutionEnvironment.canUseDOM ? document.createElement('div') : null;
/**
* Pattern used by `getNodeName`.
@@ -56,6 +59,7 @@ function getNodeName(markup) {
*/
function createNodesFromMarkup(markup, handleScript) {
var node = dummyNode;
invariant(!!dummyNode, 'createNodesFromMarkup dummy not initialized');
var nodeName = getNodeName(markup);
var wrap = nodeName && getMarkupWrap(nodeName);
src/vendor/core/getMarkupWrap.js
Vendored
+7 -1
View File
@@ -16,10 +16,15 @@
* @providesModule getMarkupWrap
*/
var ExecutionEnvironment = require('ExecutionEnvironment');
var invariant = require('invariant');
/**
* Dummy container used to detect which wraps are necessary.
*/
var dummyNode = document.createElement('div');
var dummyNode =
ExecutionEnvironment.canUseDOM ? document.createElement('div') : null;
/**
* Some browsers cannot use `innerHTML` to render certain elements standalone,
@@ -55,6 +60,7 @@ var markupWrap = {
* @return {?array} Markup wrap configuration, if applicable.
*/
function getMarkupWrap(nodeName) {
invariant(!!dummyNode, 'Markup wrapping node not initialized');
if (!markupWrap.hasOwnProperty(nodeName)) {
nodeName = '*';
}