1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | 'use strict';
|
10 |
|
11 | var _prodInvariant = require('./reactProdInvariant');
|
12 |
|
13 | var DOMLazyTree = require('./DOMLazyTree');
|
14 | var DOMProperty = require('./DOMProperty');
|
15 | var React = require('react/lib/React');
|
16 | var ReactBrowserEventEmitter = require('./ReactBrowserEventEmitter');
|
17 | var ReactCurrentOwner = require('react/lib/ReactCurrentOwner');
|
18 | var ReactDOMComponentTree = require('./ReactDOMComponentTree');
|
19 | var ReactDOMContainerInfo = require('./ReactDOMContainerInfo');
|
20 | var ReactDOMFeatureFlags = require('./ReactDOMFeatureFlags');
|
21 | var ReactFeatureFlags = require('./ReactFeatureFlags');
|
22 | var ReactInstanceMap = require('./ReactInstanceMap');
|
23 | var ReactInstrumentation = require('./ReactInstrumentation');
|
24 | var ReactMarkupChecksum = require('./ReactMarkupChecksum');
|
25 | var ReactReconciler = require('./ReactReconciler');
|
26 | var ReactUpdateQueue = require('./ReactUpdateQueue');
|
27 | var ReactUpdates = require('./ReactUpdates');
|
28 |
|
29 | var emptyObject = require('fbjs/lib/emptyObject');
|
30 | var instantiateReactComponent = require('./instantiateReactComponent');
|
31 | var invariant = require('fbjs/lib/invariant');
|
32 | var setInnerHTML = require('./setInnerHTML');
|
33 | var shouldUpdateReactComponent = require('./shouldUpdateReactComponent');
|
34 | var warning = require('fbjs/lib/warning');
|
35 |
|
36 | var ATTR_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
|
37 | var ROOT_ATTR_NAME = DOMProperty.ROOT_ATTRIBUTE_NAME;
|
38 |
|
39 | var ELEMENT_NODE_TYPE = 1;
|
40 | var DOC_NODE_TYPE = 9;
|
41 | var DOCUMENT_FRAGMENT_NODE_TYPE = 11;
|
42 |
|
43 | var instancesByReactRootID = {};
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 | function firstDifferenceIndex(string1, string2) {
|
52 | var minLen = Math.min(string1.length, string2.length);
|
53 | for (var i = 0; i < minLen; i++) {
|
54 | if (string1.charAt(i) !== string2.charAt(i)) {
|
55 | return i;
|
56 | }
|
57 | }
|
58 | return string1.length === string2.length ? -1 : minLen;
|
59 | }
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 | function getReactRootElementInContainer(container) {
|
67 | if (!container) {
|
68 | return null;
|
69 | }
|
70 |
|
71 | if (container.nodeType === DOC_NODE_TYPE) {
|
72 | return container.documentElement;
|
73 | } else {
|
74 | return container.firstChild;
|
75 | }
|
76 | }
|
77 |
|
78 | function internalGetID(node) {
|
79 |
|
80 |
|
81 |
|
82 | return node.getAttribute && node.getAttribute(ATTR_NAME) || '';
|
83 | }
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 | function mountComponentIntoNode(wrapperInstance, container, transaction, shouldReuseMarkup, context) {
|
94 | var markerName;
|
95 | if (ReactFeatureFlags.logTopLevelRenders) {
|
96 | var wrappedElement = wrapperInstance._currentElement.props.child;
|
97 | var type = wrappedElement.type;
|
98 | markerName = 'React mount: ' + (typeof type === 'string' ? type : type.displayName || type.name);
|
99 | console.time(markerName);
|
100 | }
|
101 |
|
102 | var markup = ReactReconciler.mountComponent(wrapperInstance, transaction, null, ReactDOMContainerInfo(wrapperInstance, container), context, 0
|
103 | );
|
104 |
|
105 | if (markerName) {
|
106 | console.timeEnd(markerName);
|
107 | }
|
108 |
|
109 | wrapperInstance._renderedComponent._topLevelWrapper = wrapperInstance;
|
110 | ReactMount._mountImageIntoNode(markup, container, wrapperInstance, shouldReuseMarkup, transaction);
|
111 | }
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 | function batchedMountComponentIntoNode(componentInstance, container, shouldReuseMarkup, context) {
|
121 | var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
|
122 |
|
123 | !shouldReuseMarkup && ReactDOMFeatureFlags.useCreateElement);
|
124 | transaction.perform(mountComponentIntoNode, null, componentInstance, container, transaction, shouldReuseMarkup, context);
|
125 | ReactUpdates.ReactReconcileTransaction.release(transaction);
|
126 | }
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 | function unmountComponentFromNode(instance, container, safely) {
|
138 | if (process.env.NODE_ENV !== 'production') {
|
139 | ReactInstrumentation.debugTool.onBeginFlush();
|
140 | }
|
141 | ReactReconciler.unmountComponent(instance, safely);
|
142 | if (process.env.NODE_ENV !== 'production') {
|
143 | ReactInstrumentation.debugTool.onEndFlush();
|
144 | }
|
145 |
|
146 | if (container.nodeType === DOC_NODE_TYPE) {
|
147 | container = container.documentElement;
|
148 | }
|
149 |
|
150 |
|
151 | while (container.lastChild) {
|
152 | container.removeChild(container.lastChild);
|
153 | }
|
154 | }
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 | function hasNonRootReactChild(container) {
|
167 | var rootEl = getReactRootElementInContainer(container);
|
168 | if (rootEl) {
|
169 | var inst = ReactDOMComponentTree.getInstanceFromNode(rootEl);
|
170 | return !!(inst && inst._hostParent);
|
171 | }
|
172 | }
|
173 |
|
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 | function nodeIsRenderedByOtherInstance(container) {
|
183 | var rootEl = getReactRootElementInContainer(container);
|
184 | return !!(rootEl && isReactNode(rootEl) && !ReactDOMComponentTree.getInstanceFromNode(rootEl));
|
185 | }
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 | function isValidContainer(node) {
|
195 | return !!(node && (node.nodeType === ELEMENT_NODE_TYPE || node.nodeType === DOC_NODE_TYPE || node.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE));
|
196 | }
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 | function isReactNode(node) {
|
206 | return isValidContainer(node) && (node.hasAttribute(ROOT_ATTR_NAME) || node.hasAttribute(ATTR_NAME));
|
207 | }
|
208 |
|
209 | function getHostRootInstanceInContainer(container) {
|
210 | var rootEl = getReactRootElementInContainer(container);
|
211 | var prevHostInstance = rootEl && ReactDOMComponentTree.getInstanceFromNode(rootEl);
|
212 | return prevHostInstance && !prevHostInstance._hostParent ? prevHostInstance : null;
|
213 | }
|
214 |
|
215 | function getTopLevelWrapperInContainer(container) {
|
216 | var root = getHostRootInstanceInContainer(container);
|
217 | return root ? root._hostContainerInfo._topLevelWrapper : null;
|
218 | }
|
219 |
|
220 |
|
221 |
|
222 |
|
223 |
|
224 |
|
225 | var topLevelRootCounter = 1;
|
226 | var TopLevelWrapper = function () {
|
227 | this.rootID = topLevelRootCounter++;
|
228 | };
|
229 | TopLevelWrapper.prototype.isReactComponent = {};
|
230 | if (process.env.NODE_ENV !== 'production') {
|
231 | TopLevelWrapper.displayName = 'TopLevelWrapper';
|
232 | }
|
233 | TopLevelWrapper.prototype.render = function () {
|
234 | return this.props.child;
|
235 | };
|
236 | TopLevelWrapper.isReactTopLevelWrapper = true;
|
237 |
|
238 |
|
239 |
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|
245 |
|
246 |
|
247 |
|
248 |
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 |
|
255 |
|
256 | var ReactMount = {
|
257 | TopLevelWrapper: TopLevelWrapper,
|
258 |
|
259 | |
260 |
|
261 |
|
262 | _instancesByReactRootID: instancesByReactRootID,
|
263 |
|
264 | |
265 |
|
266 |
|
267 |
|
268 |
|
269 |
|
270 |
|
271 |
|
272 | scrollMonitor: function (container, renderCallback) {
|
273 | renderCallback();
|
274 | },
|
275 |
|
276 | |
277 |
|
278 |
|
279 |
|
280 |
|
281 |
|
282 |
|
283 | _updateRootComponent: function (prevComponent, nextElement, nextContext, container, callback) {
|
284 | ReactMount.scrollMonitor(container, function () {
|
285 | ReactUpdateQueue.enqueueElementInternal(prevComponent, nextElement, nextContext);
|
286 | if (callback) {
|
287 | ReactUpdateQueue.enqueueCallbackInternal(prevComponent, callback);
|
288 | }
|
289 | });
|
290 |
|
291 | return prevComponent;
|
292 | },
|
293 |
|
294 | |
295 |
|
296 |
|
297 |
|
298 |
|
299 |
|
300 |
|
301 |
|
302 | _renderNewRootComponent: function (nextElement, container, shouldReuseMarkup, context) {
|
303 |
|
304 |
|
305 |
|
306 | process.env.NODE_ENV !== 'production' ? warning(ReactCurrentOwner.current == null, '_renderNewRootComponent(): Render methods should be a pure function ' + 'of props and state; triggering nested component updates from ' + 'render is not allowed. If necessary, trigger nested updates in ' + 'componentDidUpdate. Check the render method of %s.', ReactCurrentOwner.current && ReactCurrentOwner.current.getName() || 'ReactCompositeComponent') : void 0;
|
307 |
|
308 | !isValidContainer(container) ? process.env.NODE_ENV !== 'production' ? invariant(false, '_registerComponent(...): Target container is not a DOM element.') : _prodInvariant('37') : void 0;
|
309 |
|
310 | ReactBrowserEventEmitter.ensureScrollValueMonitoring();
|
311 | var componentInstance = instantiateReactComponent(nextElement, false);
|
312 |
|
313 |
|
314 |
|
315 |
|
316 |
|
317 | ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);
|
318 |
|
319 | var wrapperID = componentInstance._instance.rootID;
|
320 | instancesByReactRootID[wrapperID] = componentInstance;
|
321 |
|
322 | return componentInstance;
|
323 | },
|
324 |
|
325 | |
326 |
|
327 |
|
328 |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 | renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) {
|
339 | !(parentComponent != null && ReactInstanceMap.has(parentComponent)) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'parentComponent must be a valid React Component') : _prodInvariant('38') : void 0;
|
340 | return ReactMount._renderSubtreeIntoContainer(parentComponent, nextElement, container, callback);
|
341 | },
|
342 |
|
343 | _renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) {
|
344 | ReactUpdateQueue.validateCallback(callback, 'ReactDOM.render');
|
345 | !React.isValidElement(nextElement) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'ReactDOM.render(): Invalid component element.%s', typeof nextElement === 'string' ? " Instead of passing a string like 'div', pass " + "React.createElement('div') or <div />." : typeof nextElement === 'function' ? ' Instead of passing a class like Foo, pass ' + 'React.createElement(Foo) or <Foo />.' :
|
346 | nextElement != null && nextElement.props !== undefined ? ' This may be caused by unintentionally loading two independent ' + 'copies of React.' : '') : _prodInvariant('39', typeof nextElement === 'string' ? " Instead of passing a string like 'div', pass " + "React.createElement('div') or <div />." : typeof nextElement === 'function' ? ' Instead of passing a class like Foo, pass ' + 'React.createElement(Foo) or <Foo />.' : nextElement != null && nextElement.props !== undefined ? ' This may be caused by unintentionally loading two independent ' + 'copies of React.' : '') : void 0;
|
347 |
|
348 | process.env.NODE_ENV !== 'production' ? warning(!container || !container.tagName || container.tagName.toUpperCase() !== 'BODY', 'render(): Rendering components directly into document.body is ' + 'discouraged, since its children are often manipulated by third-party ' + 'scripts and browser extensions. This may lead to subtle ' + 'reconciliation issues. Try rendering into a container element created ' + 'for your app.') : void 0;
|
349 |
|
350 | var nextWrappedElement = React.createElement(TopLevelWrapper, {
|
351 | child: nextElement
|
352 | });
|
353 |
|
354 | var nextContext;
|
355 | if (parentComponent) {
|
356 | var parentInst = ReactInstanceMap.get(parentComponent);
|
357 | nextContext = parentInst._processChildContext(parentInst._context);
|
358 | } else {
|
359 | nextContext = emptyObject;
|
360 | }
|
361 |
|
362 | var prevComponent = getTopLevelWrapperInContainer(container);
|
363 |
|
364 | if (prevComponent) {
|
365 | var prevWrappedElement = prevComponent._currentElement;
|
366 | var prevElement = prevWrappedElement.props.child;
|
367 | if (shouldUpdateReactComponent(prevElement, nextElement)) {
|
368 | var publicInst = prevComponent._renderedComponent.getPublicInstance();
|
369 | var updatedCallback = callback && function () {
|
370 | callback.call(publicInst);
|
371 | };
|
372 | ReactMount._updateRootComponent(prevComponent, nextWrappedElement, nextContext, container, updatedCallback);
|
373 | return publicInst;
|
374 | } else {
|
375 | ReactMount.unmountComponentAtNode(container);
|
376 | }
|
377 | }
|
378 |
|
379 | var reactRootElement = getReactRootElementInContainer(container);
|
380 | var containerHasReactMarkup = reactRootElement && !!internalGetID(reactRootElement);
|
381 | var containerHasNonRootReactChild = hasNonRootReactChild(container);
|
382 |
|
383 | if (process.env.NODE_ENV !== 'production') {
|
384 | process.env.NODE_ENV !== 'production' ? warning(!containerHasNonRootReactChild, 'render(...): Replacing React-rendered children with a new root ' + 'component. If you intended to update the children of this node, ' + 'you should instead have the existing children update their state ' + 'and render the new components instead of calling ReactDOM.render.') : void 0;
|
385 |
|
386 | if (!containerHasReactMarkup || reactRootElement.nextSibling) {
|
387 | var rootElementSibling = reactRootElement;
|
388 | while (rootElementSibling) {
|
389 | if (internalGetID(rootElementSibling)) {
|
390 | process.env.NODE_ENV !== 'production' ? warning(false, 'render(): Target node has markup rendered by React, but there ' + 'are unrelated nodes as well. This is most commonly caused by ' + 'white-space inserted around server-rendered markup.') : void 0;
|
391 | break;
|
392 | }
|
393 | rootElementSibling = rootElementSibling.nextSibling;
|
394 | }
|
395 | }
|
396 | }
|
397 |
|
398 | var shouldReuseMarkup = containerHasReactMarkup && !prevComponent && !containerHasNonRootReactChild;
|
399 | var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, nextContext)._renderedComponent.getPublicInstance();
|
400 | if (callback) {
|
401 | callback.call(component);
|
402 | }
|
403 | return component;
|
404 | },
|
405 |
|
406 | |
407 |
|
408 |
|
409 |
|
410 |
|
411 |
|
412 |
|
413 |
|
414 |
|
415 |
|
416 |
|
417 |
|
418 |
|
419 | render: function (nextElement, container, callback) {
|
420 | return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);
|
421 | },
|
422 |
|
423 | |
424 |
|
425 |
|
426 |
|
427 |
|
428 |
|
429 |
|
430 |
|
431 | unmountComponentAtNode: function (container) {
|
432 |
|
433 |
|
434 |
|
435 |
|
436 | process.env.NODE_ENV !== 'production' ? warning(ReactCurrentOwner.current == null, 'unmountComponentAtNode(): Render methods should be a pure function ' + 'of props and state; triggering nested component updates from render ' + 'is not allowed. If necessary, trigger nested updates in ' + 'componentDidUpdate. Check the render method of %s.', ReactCurrentOwner.current && ReactCurrentOwner.current.getName() || 'ReactCompositeComponent') : void 0;
|
437 |
|
438 | !isValidContainer(container) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'unmountComponentAtNode(...): Target container is not a DOM element.') : _prodInvariant('40') : void 0;
|
439 |
|
440 | if (process.env.NODE_ENV !== 'production') {
|
441 | process.env.NODE_ENV !== 'production' ? warning(!nodeIsRenderedByOtherInstance(container), "unmountComponentAtNode(): The node you're attempting to unmount " + 'was rendered by another copy of React.') : void 0;
|
442 | }
|
443 |
|
444 | var prevComponent = getTopLevelWrapperInContainer(container);
|
445 | if (!prevComponent) {
|
446 |
|
447 |
|
448 | var containerHasNonRootReactChild = hasNonRootReactChild(container);
|
449 |
|
450 |
|
451 | var isContainerReactRoot = container.nodeType === 1 && container.hasAttribute(ROOT_ATTR_NAME);
|
452 |
|
453 | if (process.env.NODE_ENV !== 'production') {
|
454 | process.env.NODE_ENV !== 'production' ? warning(!containerHasNonRootReactChild, "unmountComponentAtNode(): The node you're attempting to unmount " + 'was rendered by React and is not a top-level container. %s', isContainerReactRoot ? 'You may have accidentally passed in a React root node instead ' + 'of its container.' : 'Instead, have the parent component update its state and ' + 'rerender in order to remove this component.') : void 0;
|
455 | }
|
456 |
|
457 | return false;
|
458 | }
|
459 | delete instancesByReactRootID[prevComponent._instance.rootID];
|
460 | ReactUpdates.batchedUpdates(unmountComponentFromNode, prevComponent, container, false);
|
461 | return true;
|
462 | },
|
463 |
|
464 | _mountImageIntoNode: function (markup, container, instance, shouldReuseMarkup, transaction) {
|
465 | !isValidContainer(container) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'mountComponentIntoNode(...): Target container is not valid.') : _prodInvariant('41') : void 0;
|
466 |
|
467 | if (shouldReuseMarkup) {
|
468 | var rootElement = getReactRootElementInContainer(container);
|
469 | if (ReactMarkupChecksum.canReuseMarkup(markup, rootElement)) {
|
470 | ReactDOMComponentTree.precacheNode(instance, rootElement);
|
471 | return;
|
472 | } else {
|
473 | var checksum = rootElement.getAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME);
|
474 | rootElement.removeAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME);
|
475 |
|
476 | var rootMarkup = rootElement.outerHTML;
|
477 | rootElement.setAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME, checksum);
|
478 |
|
479 | var normalizedMarkup = markup;
|
480 | if (process.env.NODE_ENV !== 'production') {
|
481 |
|
482 |
|
483 |
|
484 |
|
485 | var normalizer;
|
486 | if (container.nodeType === ELEMENT_NODE_TYPE) {
|
487 | normalizer = document.createElement('div');
|
488 | normalizer.innerHTML = markup;
|
489 | normalizedMarkup = normalizer.innerHTML;
|
490 | } else {
|
491 | normalizer = document.createElement('iframe');
|
492 | document.body.appendChild(normalizer);
|
493 | normalizer.contentDocument.write(markup);
|
494 | normalizedMarkup = normalizer.contentDocument.documentElement.outerHTML;
|
495 | document.body.removeChild(normalizer);
|
496 | }
|
497 | }
|
498 |
|
499 | var diffIndex = firstDifferenceIndex(normalizedMarkup, rootMarkup);
|
500 | var difference = ' (client) ' + normalizedMarkup.substring(diffIndex - 20, diffIndex + 20) + '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);
|
501 |
|
502 | !(container.nodeType !== DOC_NODE_TYPE) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'You\'re trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:\n%s', difference) : _prodInvariant('42', difference) : void 0;
|
503 |
|
504 | if (process.env.NODE_ENV !== 'production') {
|
505 | process.env.NODE_ENV !== 'production' ? warning(false, 'React attempted to reuse markup in a container but the ' + 'checksum was invalid. This generally means that you are ' + 'using server rendering and the markup generated on the ' + 'server was not what the client was expecting. React injected ' + 'new markup to compensate which works but you have lost many ' + 'of the benefits of server rendering. Instead, figure out ' + 'why the markup being generated is different on the client ' + 'or server:\n%s', difference) : void 0;
|
506 | }
|
507 | }
|
508 | }
|
509 |
|
510 | !(container.nodeType !== DOC_NODE_TYPE) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'You\'re trying to render a component to the document but you didn\'t use server rendering. We can\'t do this without using server rendering due to cross-browser quirks. See ReactDOMServer.renderToString() for server rendering.') : _prodInvariant('43') : void 0;
|
511 |
|
512 | if (transaction.useCreateElement) {
|
513 | while (container.lastChild) {
|
514 | container.removeChild(container.lastChild);
|
515 | }
|
516 | DOMLazyTree.insertTreeBefore(container, markup, null);
|
517 | } else {
|
518 | setInnerHTML(container, markup);
|
519 | ReactDOMComponentTree.precacheNode(instance, container.firstChild);
|
520 | }
|
521 |
|
522 | if (process.env.NODE_ENV !== 'production') {
|
523 | var hostNode = ReactDOMComponentTree.getInstanceFromNode(container.firstChild);
|
524 | if (hostNode._debugID !== 0) {
|
525 | ReactInstrumentation.debugTool.onHostOperation({
|
526 | instanceID: hostNode._debugID,
|
527 | type: 'mount',
|
528 | payload: markup.toString()
|
529 | });
|
530 | }
|
531 | }
|
532 | }
|
533 | };
|
534 |
|
535 | module.exports = ReactMount; |
\ | No newline at end of file |