-
Notifications
You must be signed in to change notification settings - Fork 47.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5205 from spicyj/cotree-num
Use incrementing numerical IDs to identify DOM components
- Loading branch information
Showing
68 changed files
with
1,808 additions
and
2,291 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| /** | ||
| * Copyright 2013-2015, Facebook, Inc. | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the BSD-style license found in the | ||
| * LICENSE file in the root directory of this source tree. An additional grant | ||
| * of patent rights can be found in the PATENTS file in the same directory. | ||
| * | ||
| * @providesModule ReactDOMComponentTree | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| var DOMProperty = require('DOMProperty'); | ||
| var ReactDOMComponentFlags = require('ReactDOMComponentFlags'); | ||
|
|
||
| var invariant = require('invariant'); | ||
|
|
||
| var ATTR_NAME = DOMProperty.ID_ATTRIBUTE_NAME; | ||
| var Flags = ReactDOMComponentFlags; | ||
|
|
||
| var internalInstanceKey = | ||
| '__reactInternalInstance$' + Math.random().toString(36).slice(2); | ||
|
|
||
| /** | ||
| * Drill down (through composites and empty components) until we get a native or | ||
| * native text component. | ||
| * | ||
| * This is pretty polymorphic but unavoidable with the current structure we have | ||
| * for `_renderedChildren`. | ||
| */ | ||
| function getRenderedNativeOrTextFromComponent(component) { | ||
| var rendered; | ||
| while ((rendered = component._renderedComponent)) { | ||
| component = rendered; | ||
| } | ||
| return component; | ||
| } | ||
|
|
||
| /** | ||
| * Populate `_nativeNode` on the rendered native/text component with the given | ||
| * DOM node. The passed `inst` can be a composite. | ||
| */ | ||
| function precacheNode(inst, node) { | ||
| var nativeInst = getRenderedNativeOrTextFromComponent(inst); | ||
| nativeInst._nativeNode = node; | ||
| node[internalInstanceKey] = nativeInst; | ||
| } | ||
|
|
||
| function uncacheNode(inst) { | ||
| var node = inst._nativeNode; | ||
| if (node) { | ||
| delete node[internalInstanceKey]; | ||
| inst._nativeNode = null; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Populate `_nativeNode` on each child of `inst`, assuming that the children | ||
| * match up with the DOM (element) children of `node`. | ||
| * | ||
| * We cache entire levels at once to avoid an n^2 problem where we access the | ||
| * children of a node sequentially and have to walk from the start to our target | ||
| * node every time. | ||
| * | ||
| * Since we update `_renderedChildren` and the actual DOM at (slightly) | ||
| * different times, we could race here and not get the | ||
| */ | ||
| function precacheChildNodes(inst, node) { | ||
| if (inst._flags & Flags.hasCachedChildNodes) { | ||
| return; | ||
| } | ||
| var children = inst._renderedChildren; | ||
| var childNode = node.firstChild; | ||
| outer: for (var name in children) { | ||
| if (!children.hasOwnProperty(name)) { | ||
| continue; | ||
| } | ||
| var childInst = children[name]; | ||
| var childID = getRenderedNativeOrTextFromComponent(childInst)._domID; | ||
| if (childID == null) { | ||
| // We're currently unmounting this child in ReactMultiChild; skip it. | ||
| continue; | ||
| } | ||
| // We assume the child nodes are in the same order as the child instances. | ||
| for (; childNode !== null; childNode = childNode.nextSibling) { | ||
| if (childNode.nodeType === 1 && | ||
| childNode.getAttribute(ATTR_NAME) === String(childID)) { | ||
| precacheNode(childInst, childNode); | ||
| continue outer; | ||
| } | ||
| } | ||
| // We reached the end of the DOM children without finding an ID match. | ||
| invariant(false, 'Unable to find element with ID %s.', childID); | ||
| } | ||
| inst._flags |= Flags.hasCachedChildNodes; | ||
| } | ||
|
|
||
| /** | ||
| * Given a DOM node, return the closest ReactDOMComponent or | ||
| * ReactDOMTextComponent instance ancestor. | ||
| */ | ||
| function getClosestInstanceFromNode(node) { | ||
| if (node[internalInstanceKey]) { | ||
| return node[internalInstanceKey]; | ||
| } | ||
|
|
||
| // Walk up the tree until we find an ancestor whose instance we have cached. | ||
| var parents = []; | ||
| while (!node[internalInstanceKey]) { | ||
| parents.push(node); | ||
| if (node.parentNode) { | ||
| node = node.parentNode; | ||
| } else { | ||
| // Top of the tree. This node must not be part of a React tree (or is | ||
| // unmounted, potentially). | ||
| return null; | ||
| } | ||
| } | ||
|
|
||
| var closest; | ||
| var inst; | ||
| for (; node && (inst = node[internalInstanceKey]); node = parents.pop()) { | ||
| closest = inst; | ||
| if (parents.length) { | ||
| precacheChildNodes(inst, node); | ||
| } | ||
| } | ||
|
|
||
| return closest; | ||
| } | ||
|
|
||
| /** | ||
| * Given a DOM node, return the ReactDOMComponent or ReactDOMTextComponent | ||
| * instance, or null if the node was not rendered by this React. | ||
| */ | ||
| function getInstanceFromNode(node) { | ||
| var inst = getClosestInstanceFromNode(node); | ||
| if (inst != null && inst._nativeNode === node) { | ||
| return inst; | ||
| } else { | ||
| return null; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Given a ReactDOMComponent or ReactDOMTextComponent, return the corresponding | ||
| * DOM node. | ||
| */ | ||
| function getNodeFromInstance(inst) { | ||
| // Without this first invariant, passing a non-DOM-component triggers the next | ||
| // invariant for a missing parent, which is super confusing. | ||
| invariant( | ||
| inst._nativeNode !== undefined, | ||
| 'getNodeFromInstance: Invalid argument.' | ||
| ); | ||
|
|
||
| if (inst._nativeNode) { | ||
| return inst._nativeNode; | ||
| } | ||
|
|
||
| // Walk up the tree until we find an ancestor whose DOM node we have cached. | ||
| var parents = []; | ||
| while (!inst._nativeNode) { | ||
| parents.push(inst); | ||
| invariant( | ||
| inst._nativeParent, | ||
| 'React DOM tree root should always have a node reference.' | ||
| ); | ||
| inst = inst._nativeParent; | ||
| } | ||
|
|
||
| // Now parents contains each ancestor that does *not* have a cached native | ||
| // node, and `inst` is the deepest ancestor that does. | ||
| for (; parents.length; inst = parents.pop()) { | ||
| precacheChildNodes(inst, inst._nativeNode); | ||
| } | ||
|
|
||
| return inst._nativeNode; | ||
| } | ||
|
|
||
| var ReactDOMComponentTree = { | ||
| getClosestInstanceFromNode: getClosestInstanceFromNode, | ||
| getInstanceFromNode: getInstanceFromNode, | ||
| getNodeFromInstance: getNodeFromInstance, | ||
| precacheChildNodes: precacheChildNodes, | ||
| precacheNode: precacheNode, | ||
| uncacheNode: uncacheNode, | ||
| }; | ||
|
|
||
| module.exports = ReactDOMComponentTree; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.