[ { "path": ".gitignore", "content": "# Created by https://www.gitignore.io\n\n### Node ###\n# Logs\nlogs\n*.log\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directory\n# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git\nnode_modules\n\n\n### Windows ###\n# Windows image file caches\nThumbs.db\nehthumbs.db\n\n# Folder config file\nDesktop.ini\n\n# Recycle Bin used on file shares\n$RECYCLE.BIN/\n\n# Windows Installer files\n*.cab\n*.msi\n*.msm\n*.msp\n\n# Windows shortcuts\n*.lnk\n\n\n### Linux ###\n*~\n\n# KDE directory preferences\n.directory\n\n# Linux trash folder which might appear on any partition or disk\n.Trash-*\n\n\n### OSX ###\n.DS_Store\n.AppleDouble\n.LSOverride\n\n# Icon must end with two \\r\nIcon\n\n\n# Thumbnails\n._*\n\n# Files that might appear in the root of a volume\n.DocumentRevisions-V100\n.fseventsd\n.Spotlight-V100\n.TemporaryItems\n.Trashes\n.VolumeIcon.icns\n\n# Directories potentially created on remote AFP share\n.AppleDB\n.AppleDesktop\nNetwork Trash Folder\nTemporary Items\n.apdisk\n\n\n### SublimeText ###\n# cache files for sublime text\n*.tmlanguage.cache\n*.tmPreferences.cache\n*.stTheme.cache\n\n# workspace files are user-specific\n*.sublime-workspace\n\n# project files should be checked into the repository, unless a significant\n# proportion of contributors will probably not be using SublimeText\n# *.sublime-project\n\n# sftp configuration file\nsftp-config.json\n\n\n### TextMate ###\n*.tmproj\n*.tmproject\ntmtags\n\n\n### Vim ###\n[._]*.s[a-w][a-z]\n[._]s[a-w][a-z]\n*.un~\nSession.vim\n.netrwhist\n*~" }, { "path": ".tern-project", "content": "{\n \"libs\": [\"ecma6\"],\n \"plugins\": {\n \"doc_comment\": true,\n \"node\": {}\n }\n}" }, { "path": "package.json", "content": "{\n \"name\": \"react-tvml\",\n \"version\": \"1.0.4\",\n \"license\": \"BSD\",\n \"description\": \"react bindings to Apple's TVJS & TVML\",\n \"author\": \"Sérgio Ramos \",\n \"main\": \"src/react-tvml.js\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/ramitos/react-tvml\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/ramitos/react-tvml/issues\"\n },\n \"keywords\": [\n \"react\",\n \"tvjs\",\n \"tvml\",\n \"tvos\",\n \"apple\"\n ],\n \"dependencies\": {\n \"fbjs\": \"0.7.0\",\n \"has-own-prop\": \"1.0.0\",\n \"lodash.clone\": \"^3.0.3\",\n \"react\": \"^0.14.6\"\n },\n \"devDependencies\": {\n \"imports-loader\": \"0.6.5\"\n }\n}\n" }, { "path": "readme.md", "content": "# react-tvml\n\n**this is a very alpha release**\n\nReact bindings to Apple's [TVJS and TVML](https://developer.apple.com/library/prerelease/tvos/navigation/)\n\n[![](http://g.recordit.co/qWrCpEb3MQ.gif)](https://cldup.com/u6sOUJLLE9.mp4)\n(it's not this slow, click on the gif to see a video)\n\n## install\n```bash\n$ npm install --save react-tvml\n```\n\n## example\n\n[sprice/tvOS-hello-world-example](https://github.com/sprice/tvOS-hello-world-example)\n\n## usage\n\n```js\nvar React = require('react');\nvar TVML = require('react-tvml');\n\nvar App = React.createClass({\n render: function() {\n return (\n \n Loading...\n \n );\n }\n});\n\nTVML.render();\n```\n\n## todo (PRs are welcome)\n\n * Most of the code is copied from the react dom renderer. A lot of it needs to be removed and cleaned according to TVML use case\n * push vs replace document\n * some events\n * A **lot** of polish\n * Validations: e.g. some components can only be children of some specific components\n * consistent code style and linting\n * tests\n\n## license\n\nBSD" }, { "path": "src/Component.js", "content": "'use strict';\n\n// TODO: validate children elements (or parents?). Ex: can only be a child of\n// - buttonLockup\n// - header\n// - lockup\n// - overlay\n// - row\n// - text\n// - title\n\n// TODO: validate CSS props. Only some are valid\nvar __DEV__ = process.env.NODE_ENV !== 'production';\n\nvar CSSPropertyOperations = require('react/lib/CSSPropertyOperations');\nvar DOMProperty = require('react/lib/DOMProperty');\nvar DOMPropertyOperations = require('react/lib/DOMPropertyOperations');\n// var EventConstants = require('react/lib/EventConstants');\nvar EventEmitter = require('./EventEmitter');\nvar IDOperations = require('./IDOperations');\nvar MultiChild = require('react/lib/ReactMultiChild');\nvar Perf = require('react/lib/ReactPerf');\nvar UpdateQueue = require('react/lib/ReactUpdateQueue');\n\nvar assign = require('react/lib/Object.assign');\nvar escapeTextContentForBrowser = require('react/lib/escapeTextContentForBrowser');\nvar invariant = require('fbjs/lib/invariant');\nvar isEventSupported = require('react/lib/isEventSupported');\nvar keyOf = require('fbjs/lib/keyOf');\nvar setInnerHTML = require('react/lib/setInnerHTML');\nvar setTextContent = require('react/lib/setTextContent');\nvar shallowEqual = require('fbjs/lib/shallowEqual');\nvar validateDOMNesting = require('react/lib/validateDOMNesting');\nvar warning = require('fbjs/lib/warning');\n\nvar hasOwnProperty = require('has-own-prop');\n\nvar Mount = require('./Mount');\n\n\nvar ELEMENT_NODE_TYPE = 1;\n\n// For quickly matching children type, to test if can be treated as content.\nvar CONTENT_TYPES = {\n 'string': true,\n 'number': true\n};\n\nvar STYLE = keyOf({\n 'style': null\n});\n\nvar COMPONENT_CLASSES = {\n menubar: require('./menuBar')\n};\n\nfunction getDeclarationErrorAddendum(internalInstance) {\n if (internalInstance) {\n var owner = internalInstance._currentElement._owner || null;\n if (owner) {\n var name = owner.getName();\n if (name) {\n return ' This DOM node was rendered by `' + name + '`.';\n }\n }\n }\n return '';\n}\n\n\nfunction legacyGetDOMNode() {\n if (__DEV__) {\n var component = this._reactInternalComponent;\n warning(\n false,\n 'ReactTVMLComponent: Do not access .getDOMNode() of a DOM node; ' +\n 'instead, use the node directly.%s',\n getDeclarationErrorAddendum(component)\n );\n }\n return this;\n}\n\nfunction legacyIsMounted() {\n var component = this._reactInternalComponent;\n if (__DEV__) {\n warning(\n false,\n 'ReactTVMLComponent: Do not access .isMounted() of a DOM node.%s',\n getDeclarationErrorAddendum(component)\n );\n }\n return !!component;\n}\n\nfunction legacySetStateEtc() {\n if (__DEV__) {\n var component = this._reactInternalComponent;\n warning(\n false,\n 'ReactTVMLComponent: Do not access .setState(), .replaceState(), or ' +\n '.forceUpdate() of a DOM node. This is a no-op.%s',\n getDeclarationErrorAddendum(component)\n );\n }\n}\n\nfunction legacySetProps(partialProps, callback) {\n var component = this._reactInternalComponent;\n if (__DEV__) {\n warning(\n false,\n 'ReactTVMLComponent: Do not access .setProps() of a DOM node. ' +\n 'Instead, call ReactDOM.render again at the top level.%s',\n getDeclarationErrorAddendum(component)\n );\n }\n if (!component) {\n return;\n }\n UpdateQueue.enqueueSetPropsInternal(component, partialProps);\n if (callback) {\n UpdateQueue.enqueueCallbackInternal(component, callback);\n }\n}\n\nfunction legacyReplaceProps(partialProps, callback) {\n var component = this._reactInternalComponent;\n if (__DEV__) {\n warning(\n false,\n 'ReactTVMLComponent: Do not access .replaceProps() of a DOM node. ' +\n 'Instead, call ReactDOM.render again at the top level.%s',\n getDeclarationErrorAddendum(component)\n );\n }\n if (!component) {\n return;\n }\n UpdateQueue.enqueueReplacePropsInternal(component, partialProps);\n if (callback) {\n UpdateQueue.enqueueCallbackInternal(component, callback);\n }\n}\n\nvar styleMutationWarning = {};\n\nfunction checkAndWarnForMutatedStyle(style1, style2, component) {\n if (style1 == null || style2 == null) {\n return;\n }\n if (shallowEqual(style1, style2)) {\n return;\n }\n\n var componentName = component._tag;\n var owner = component._currentElement._owner;\n var ownerName;\n if (owner) {\n ownerName = owner.getName();\n }\n\n var hash = ownerName + '|' + componentName;\n\n if (hasOwnProperty(styleMutationWarning, hash)) {\n return;\n }\n\n styleMutationWarning[hash] = true;\n\n warning(\n false,\n '`%s` was passed a style object that has previously been mutated. ' +\n 'Mutating `style` is deprecated. Consider cloning it beforehand. Check ' +\n 'the `render` %s. Previous style: %s. Mutated style: %s.',\n componentName,\n owner ? 'of `' + ownerName + '`' : 'using <' + componentName + '>',\n JSON.stringify(style1),\n JSON.stringify(style2)\n );\n}\n\n/**\n * @param {object} component\n * @param {?object} props\n */\nfunction assertValidProps(component, props) {\n if (!props) {\n return;\n }\n // Note the use of `==` which checks for null or undefined.\n if (__DEV__) {\n if (voidElementTags[component._tag]) {\n warning(\n props.children == null && props.dangerouslySetInnerHTML == null,\n '%s is a void element tag and must not have `children` or ' +\n 'use `props.dangerouslySetInnerHTML`.%s',\n component._tag,\n component._currentElement._owner ?\n ' Check the render method of ' +\n component._currentElement._owner.getName() + '.' :\n ''\n );\n }\n }\n if (props.dangerouslySetInnerHTML != null) {\n invariant(\n props.children == null,\n 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.'\n );\n invariant(\n typeof props.dangerouslySetInnerHTML === 'object' &&\n '__html' in props.dangerouslySetInnerHTML,\n '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +\n 'Please visit https://fb.me/react-invariant-dangerously-set-inner-html ' +\n 'for more information.'\n );\n }\n if (__DEV__) {\n warning(\n props.innerHTML == null,\n 'Directly setting property `innerHTML` is not permitted. ' +\n 'For more information, lookup documentation on `dangerouslySetInnerHTML`.'\n );\n warning(\n !props.contentEditable || props.children == null,\n 'A component is `contentEditable` and contains `children` managed by ' +\n 'React. It is now your responsibility to guarantee that none of ' +\n 'those nodes are unexpectedly modified or duplicated. This is ' +\n 'probably not intentional.'\n );\n }\n invariant(\n props.style == null || typeof props.style === 'object',\n 'The `style` prop expects a mapping from style properties to values, ' +\n 'not a string. For example, style={{marginRight: spacing + \\'em\\'}} when ' +\n 'using JSX.%s',\n getDeclarationErrorAddendum(component)\n );\n}\n\nfunction enqueuePutListener(id, registrationName, listener, transaction) {\n var container = Mount.findReactContainerForID(id);\n if (container) {\n var doc = container.nodeType === ELEMENT_NODE_TYPE ? container.ownerDocument : container;\n EventEmitter.listenTo(registrationName, doc);\n }\n transaction.getReactMountReady().enqueue(putListener, {\n id: id,\n registrationName: registrationName,\n listener: listener\n });\n}\n\nfunction putListener(id, registrationName, listener, transaction) {\n // TODO check if tvml registers events the same way as listenTo\n // TODO I'm not sure we can register events in `document` and delegate\n EventEmitter.EventEmitter.listenTo(registrationName, Mount.findReactContainerForID(id));\n\n transaction.getReactMountReady().enqueue(putListener, {\n id: id,\n registrationName: registrationName,\n listener: listener,\n });\n\n // if (container) {\n // var doc = container.nodeType === ELEMENT_NODE_TYPE ?\n // container.ownerDocument :\n // container;\n // EventEmitter.listenTo(registrationName, doc);\n // }\n}\n\nfunction putListener() {\n var listenerToPut = this;\n EventEmitter.putListener(\n listenerToPut.id,\n listenerToPut.registrationName,\n listenerToPut.listener\n );\n}\n\n// There are so many media events, it makes sense to just\n// maintain a list rather than create a `trapBubbledEvent` for each\nvar mediaEvents = {\n // topAbort: 'abort',\n // topCanPlay: 'canplay',\n // topCanPlayThrough: 'canplaythrough',\n // topDurationChange: 'durationchange',\n // topEmptied: 'emptied',\n // topEncrypted: 'encrypted',\n // topEnded: 'ended',\n // topError: 'error',\n // topLoadedData: 'loadeddata',\n // topLoadedMetadata: 'loadedmetadata',\n // topLoadStart: 'loadstart',\n // topPause: 'pause',\n // topPlay: 'play',\n // topPlaying: 'playing',\n // topProgress: 'progress',\n // topRateChange: 'ratechange',\n // topSeeked: 'seeked',\n // topSeeking: 'seeking',\n // topStalled: 'stalled',\n // topSuspend: 'suspend',\n // topTimeUpdate: 'timeupdate',\n // topVolumeChange: 'volumechange',\n // topWaiting: 'waiting',\n};\n\nfunction postUpdateSelectWrapper() {\n DOMSelect.postUpdateWrapper(this);\n}\n\n// For HTML, certain tags should omit their close tag. We keep a whitelist for\n// those special cased tags.\nvar omittedCloseTags = {\n 'badge': true,\n 'decorationImage': true,\n 'fullscreenImg': true,\n 'heroImg': true,\n 'img': true,\n 'ratingBadge': true,\n 'asset': true,\n 'monogram': true\n};\n\nvar newlineEatingTags = {\n // 'listing': true,\n // 'pre': true,\n // 'textarea': true,\n};\n\n// For HTML, certain tags cannot have children. This has the same purpose as\n// `omittedCloseTags` except that `menuitem` should still have its closing tag.\nvar voidElementTags = assign({\n}, omittedCloseTags);\n\n// We accept any tag to be rendered but since this gets injected into arbitrary\n// HTML, we want to make sure that it's a safe tag.\n// http://www.w3.org/TR/REC-xml/#NT-Name\n\nvar VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\\.\\-\\d]*$/; // Simplified subset\nvar validatedTagCache = {};\n\nfunction validateDangerousTag(tag) {\n if (!hasOwnProperty(validatedTagCache, tag)) {\n invariant(VALID_TAG_REGEX.test(tag), 'Invalid tag: %s', tag);\n validatedTagCache[tag] = true;\n }\n}\n\nfunction processChildContext(context, inst) {\n if (__DEV__) {\n // Pass down our tag name to child components for validation purposes\n context = assign({}, context);\n var info = context[validateDOMNesting.ancestorInfoContextKey];\n context[validateDOMNesting.ancestorInfoContextKey] =\n validateDOMNesting.updatedAncestorInfo(info, inst._tag, inst);\n }\n return context;\n}\n\nfunction isCustomComponent(tagName, props) {\n return tagName.indexOf('-') >= 0 || props.is != null;\n}\n\n/**\n * Creates a new React class that is idempotent and capable of containing other\n * React components. It accepts event listeners and DOM properties that are\n * valid according to `DOMProperty`.\n *\n * - Event listeners: `onClick`, `onMouseDown`, etc.\n * - DOM properties: `className`, `name`, `title`, etc.\n *\n * The `style` property functions differently from the DOM API. It accepts an\n * object mapping of style properties to values.\n *\n * @constructor ReactTVMLComponent\n * @extends ReactMultiChild\n */\nfunction ReactTVMLComponent(tag) {\n validateDangerousTag(tag);\n this._tag = tag.toLowerCase();\n this._renderedChildren = null;\n this._previousStyle = null;\n this._previousStyleCopy = null;\n this._rootNodeID = null;\n this._wrapperState = null;\n this._topLevelWrapper = null;\n this._nodeWithLegacyProperties = null;\n}\n\nReactTVMLComponent.displayName = 'ReactTVMLComponent';\n\nReactTVMLComponent.Mixin = {\n\n construct: function(element) {\n this._currentElement = element;\n },\n\n /**\n * Generates root tag markup then recurses. This method has side effects and\n * is not idempotent.\n *\n * @internal\n * @param {string} rootID The root DOM ID for this node.\n * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction\n * @param {object} context\n * @return {string} The computed markup.\n */\n mountComponent: function(rootID, transaction, context) {\n this._rootNodeID = rootID;\n\n var props = this._currentElement.props;\n\n if (hasOwnProperty(COMPONENT_CLASSES, this._tag)) {\n if (hasOwnProperty(COMPONENT_CLASSES[this._tag], 'getNativeProps')) {\n props = COMPONENT_CLASSES[this._tag].getNativeProps(this, props, context);\n }\n }\n\n assertValidProps(this, props);\n if (__DEV__) {\n if (context[validateDOMNesting.ancestorInfoContextKey]) {\n validateDOMNesting(\n this._tag,\n this,\n context[validateDOMNesting.ancestorInfoContextKey]\n );\n }\n }\n\n var mountImage;\n // isn't useCreateElement always false?\n if (transaction.useCreateElement) {\n var ownerDocument = context[Mount.ownerDocumentContextKey];\n var el = ownerDocument.createElement(this._currentElement.type);\n DOMPropertyOperations.setAttributeForID(el, this._rootNodeID);\n // Populate node cache\n Mount.getID(el);\n this._updateDOMProperties({}, props, transaction, el);\n this._createInitialChildren(transaction, props, context, el);\n mountImage = el;\n } else {\n var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction, props);\n var tagContent = this._createContentMarkup(transaction, props, context);\n if (!tagContent && omittedCloseTags[this._tag]) {\n mountImage = tagOpen + '/>';\n } else {\n mountImage =\n tagOpen + '>' + tagContent + '';\n }\n }\n\n return mountImage;\n },\n\n /**\n * Creates markup for the open tag and all attributes.\n *\n * This method has side effects because events get registered.\n *\n * Iterating over object properties is faster than iterating over arrays.\n * @see http://jsperf.com/obj-vs-arr-iteration\n *\n * @private\n * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction\n * @param {object} props\n * @return {string} Markup of opening tag.\n */\n _createOpenTagMarkupAndPutListeners: function(transaction, props) {\n var ret = '<' + this._currentElement.type;\n\n for (var propKey in props) {\n if (!hasOwnProperty(props, propKey)) {\n continue;\n }\n var propValue = props[propKey];\n if (propValue == null) {\n continue;\n }\n if (hasOwnProperty(EventEmitter.registrationNameModules, propKey)) {\n enqueuePutListener(this._rootNodeID, propKey, propValue, transaction);\n } else {\n if (propKey === STYLE) {\n if (propValue) {\n if (__DEV__) {\n // See `_updateDOMProperties`. style block\n this._previousStyle = propValue;\n }\n propValue = this._previousStyleCopy = assign({}, props.style);\n }\n propValue = CSSPropertyOperations.createMarkupForStyles(propValue);\n }\n var markup = null;\n if (this._tag != null && isCustomComponent(this._tag, props)) {\n markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);\n } else {\n markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue);\n }\n if (markup) {\n ret += ' ' + markup;\n }\n }\n }\n\n // For static pages, no need to put React ID and checksum. Saves lots of\n // bytes.\n if (transaction.renderToStaticMarkup) {\n return ret;\n }\n\n var markupForID = DOMPropertyOperations.createMarkupForID(this._rootNodeID);\n return ret + ' ' + markupForID;\n },\n\n /**\n * Creates markup for the content between the tags.\n *\n * @private\n * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction\n * @param {object} props\n * @param {object} context\n * @return {string} Content markup.\n */\n _createContentMarkup: function(transaction, props, context) {\n var ret = '';\n\n // Intentional use of != to avoid catching zero/false.\n var innerHTML = props.dangerouslySetInnerHTML;\n if (innerHTML != null) {\n if (innerHTML.__html != null) {\n ret = innerHTML.__html;\n }\n } else {\n var contentToUse =\n CONTENT_TYPES[typeof props.children] ? props.children : null;\n var childrenToUse = contentToUse != null ? null : props.children;\n if (contentToUse != null) {\n // TODO: Validate that text is allowed as a child of this node\n ret = escapeTextContentForBrowser(contentToUse);\n } else if (childrenToUse != null) {\n var mountImages = this.mountChildren(\n childrenToUse,\n transaction,\n processChildContext(context, this)\n );\n ret = mountImages.join('');\n }\n }\n if (newlineEatingTags[this._tag] && ret.charAt(0) === '\\n') {\n // text/html ignores the first character in these tags if it's a newline\n // Prefer to break application/xml over text/html (for now) by adding\n // a newline specifically to get eaten by the parser. (Alternately for\n // textareas, replacing \"^\\n\" with \"\\r\\n\" doesn't get eaten, and the first\n // \\r is normalized out by HTMLTextAreaElement#value.)\n // See: \n // See: \n // See: \n // See: Parsing of \"textarea\" \"listing\" and \"pre\" elements\n // from \n return '\\n' + ret;\n } else {\n return ret;\n }\n },\n\n _createInitialChildren: function(transaction, props, context, el) {\n // Intentional use of != to avoid catching zero/false.\n var innerHTML = props.dangerouslySetInnerHTML;\n if (innerHTML != null) {\n if (innerHTML.__html != null) {\n setInnerHTML(el, innerHTML.__html);\n }\n } else {\n var contentToUse =\n CONTENT_TYPES[typeof props.children] ? props.children : null;\n var childrenToUse = contentToUse != null ? null : props.children;\n if (contentToUse != null) {\n // TODO: Validate that text is allowed as a child of this node\n setTextContent(el, contentToUse);\n } else if (childrenToUse != null) {\n var mountImages = this.mountChildren(\n childrenToUse,\n transaction,\n processChildContext(context, this)\n );\n for (var i = 0; i < mountImages.length; i++) {\n el.appendChild(mountImages[i]);\n }\n }\n }\n },\n\n /**\n * Receives a next element and updates the component.\n *\n * @internal\n * @param {ReactElement} nextElement\n * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction\n * @param {object} context\n */\n receiveComponent: function(nextElement, transaction, context) {\n var prevElement = this._currentElement;\n this._currentElement = nextElement;\n this.updateComponent(transaction, prevElement, nextElement, context);\n },\n\n /**\n * Updates a native DOM component after it has already been allocated and\n * attached to the DOM. Reconciles the root DOM node, then recurses.\n *\n * @param {ReactReconcileTransaction} transaction\n * @param {ReactElement} prevElement\n * @param {ReactElement} nextElement\n * @internal\n * @overridable\n */\n updateComponent: function(transaction, prevElement, nextElement, context) {\n var lastProps = prevElement.props;\n var nextProps = this._currentElement.props;\n\n if (hasOwnProperty(COMPONENT_CLASSES, this._tag)) {\n if (hasOwnProperty(COMPONENT_CLASSES[this._tag], 'getNativeProps')) {\n lastProps = COMPONENT_CLASSES[this._tag].getNativeProps(this, lastProps);\n nextProps = COMPONENT_CLASSES[this._tag].getNativeProps(this, nextProps);\n }\n }\n\n assertValidProps(this, nextProps);\n this._updateDOMProperties(lastProps, nextProps, transaction, null);\n this._updateDOMChildren(\n lastProps,\n nextProps,\n transaction,\n processChildContext(context, this)\n );\n },\n\n /**\n * Reconciles the properties by detecting differences in property values and\n * updating the DOM as necessary. This function is probably the single most\n * critical path for performance optimization.\n *\n * TODO: Benchmark whether checking for changed values in memory actually\n * improves performance (especially statically positioned elements).\n * TODO: Benchmark the effects of putting this at the top since 99% of props\n * do not change for a given reconciliation.\n * TODO: Benchmark areas that can be improved with caching.\n *\n * @private\n * @param {object} lastProps\n * @param {object} nextProps\n * @param {ReactReconcileTransaction} transaction\n * @param {?DOMElement} node\n */\n _updateDOMProperties: function(lastProps, nextProps, transaction, node) {\n var propKey;\n var styleName;\n var styleUpdates;\n for (propKey in lastProps) {\n if (hasOwnProperty(nextProps, propKey) || !hasOwnProperty(lastProps, propKey)) {\n continue;\n }\n if (propKey === STYLE) {\n var lastStyle = this._previousStyleCopy;\n for (styleName in lastStyle) {\n if (hasOwnProperty(lastStyle, styleName)) {\n styleUpdates = styleUpdates || {};\n styleUpdates[styleName] = '';\n }\n }\n this._previousStyleCopy = null;\n } else if (hasOwnProperty(EventEmitter.registrationNameModules, propKey)) {\n if (lastProps[propKey]) {\n // Only call deleteListener if there was a listener previously or\n // else willDeleteListener gets called when there wasn't actually a\n // listener (e.g., onClick={null})\n EventEmitter.deleteListener(this._rootNodeID, propKey);\n }\n } else if (\n DOMProperty.properties[propKey] ||\n DOMProperty.isCustomAttribute(propKey)) {\n if (!node) {\n node = Mount.getNode(this._rootNodeID);\n }\n DOMPropertyOperations.deleteValueForProperty(node, propKey);\n }\n }\n for (propKey in nextProps) {\n var nextProp = nextProps[propKey];\n var lastProp = propKey === STYLE ?\n this._previousStyleCopy :\n lastProps[propKey];\n if (!hasOwnProperty(nextProps, propKey) || nextProp === lastProp) {\n continue;\n }\n if (propKey === STYLE) {\n if (nextProp) {\n if (__DEV__) {\n checkAndWarnForMutatedStyle(\n this._previousStyleCopy,\n this._previousStyle,\n this\n );\n this._previousStyle = nextProp;\n }\n nextProp = this._previousStyleCopy = assign({}, nextProp);\n } else {\n this._previousStyleCopy = null;\n }\n if (lastProp) {\n // Unset styles on `lastProp` but not on `nextProp`.\n for (styleName in lastProp) {\n if (hasOwnProperty(lastProp, styleName) &&\n (!nextProp || !hasOwnProperty(nextProp, styleName))) {\n styleUpdates = styleUpdates || {};\n styleUpdates[styleName] = '';\n }\n }\n // Update styles that changed since `lastProp`.\n for (styleName in nextProp) {\n if (hasOwnProperty(nextProp, styleName) &&\n lastProp[styleName] !== nextProp[styleName]) {\n styleUpdates = styleUpdates || {};\n styleUpdates[styleName] = nextProp[styleName];\n }\n }\n } else {\n // Relies on `updateStylesByID` not mutating `styleUpdates`.\n styleUpdates = nextProp;\n }\n } else if (hasOwnProperty(propKey)) {\n if (nextProp) {\n enqueuePutListener(this._rootNodeID, propKey, nextProp, transaction);\n } else if (lastProp) {\n EventEmitter.deleteListener(this._rootNodeID, propKey);\n }\n } else if (isCustomComponent(this._tag, nextProps)) {\n if (!node) {\n node = Mount.getNode(this._rootNodeID);\n }\n DOMPropertyOperations.setValueForAttribute(\n node,\n propKey,\n nextProp\n );\n } else if (\n DOMProperty.properties[propKey] ||\n DOMProperty.isCustomAttribute(propKey)) {\n if (!node) {\n node = Mount.getNode(this._rootNodeID);\n }\n // If we're updating to null or undefined, we should remove the property\n // from the DOM node instead of inadvertantly setting to a string. This\n // brings us in line with the same behavior we have on initial render.\n if (nextProp != null) {\n DOMPropertyOperations.setValueForProperty(node, propKey, nextProp);\n } else {\n DOMPropertyOperations.deleteValueForProperty(node, propKey);\n }\n }\n }\n if (styleUpdates) {\n if (!node) {\n node = Mount.getNode(this._rootNodeID);\n }\n CSSPropertyOperations.setValueForStyles(node, styleUpdates);\n }\n },\n\n /**\n * Reconciles the children with the various properties that affect the\n * children content.\n *\n * @param {object} lastProps\n * @param {object} nextProps\n * @param {ReactReconcileTransaction} transaction\n * @param {object} context\n */\n _updateDOMChildren: function(lastProps, nextProps, transaction, context) {\n var lastContent =\n CONTENT_TYPES[typeof lastProps.children] ? lastProps.children : null;\n var nextContent =\n CONTENT_TYPES[typeof nextProps.children] ? nextProps.children : null;\n\n var lastHtml =\n lastProps.dangerouslySetInnerHTML &&\n lastProps.dangerouslySetInnerHTML.__html;\n var nextHtml =\n nextProps.dangerouslySetInnerHTML &&\n nextProps.dangerouslySetInnerHTML.__html;\n\n // Note the use of `!=` which checks for null or undefined.\n var lastChildren = lastContent != null ? null : lastProps.children;\n var nextChildren = nextContent != null ? null : nextProps.children;\n\n // If we're switching from children to content/html or vice versa, remove\n // the old content\n var lastHasContentOrHtml = lastContent != null || lastHtml != null;\n var nextHasContentOrHtml = nextContent != null || nextHtml != null;\n if (lastChildren != null && nextChildren == null) {\n this.updateChildren(null, transaction, context);\n } else if (lastHasContentOrHtml && !nextHasContentOrHtml) {\n this.updateTextContent('');\n }\n\n if (nextContent != null) {\n if (lastContent !== nextContent) {\n this.updateTextContent('' + nextContent);\n }\n } else if (nextHtml != null) {\n if (lastHtml !== nextHtml) {\n this.updateMarkup('' + nextHtml);\n }\n } else if (nextChildren != null) {\n this.updateChildren(nextChildren, transaction, context);\n }\n },\n\n /**\n * Destroys all event registrations for this instance. Does not remove from\n * the DOM. That must be done by the parent.\n *\n * @internal\n */\n unmountComponent: function() {\n this.unmountChildren();\n EventEmitter.deleteAllListeners(this._rootNodeID);\n IDOperations.unmountIDFromEnvironment(this._rootNodeID);\n this._rootNodeID = null;\n this._wrapperState = null;\n if (this._nodeWithLegacyProperties) {\n var node = this._nodeWithLegacyProperties;\n node._reactInternalComponent = null;\n this._nodeWithLegacyProperties = null;\n }\n },\n\n getPublicInstance: function() {\n if (this._nodeWithLegacyProperties) {\n return this._nodeWithLegacyProperties;\n }\n\n var node = Mount.getNode(this._rootNodeID);\n\n node._reactInternalComponent = this;\n node.getDOMNode = legacyGetDOMNode;\n node.isMounted = legacyIsMounted;\n node.setState = legacySetStateEtc;\n node.replaceState = legacySetStateEtc;\n node.forceUpdate = legacySetStateEtc;\n node.setProps = legacySetProps;\n node.replaceProps = legacyReplaceProps;\n\n // updateComponent will update this property on subsequent renders\n node.props = this._currentElement.props;\n\n this._nodeWithLegacyProperties = node;\n }\n};\n\nPerf.measureMethods(ReactTVMLComponent, 'ReactTVMLComponent', {\n mountComponent: 'mountComponent',\n updateComponent: 'updateComponent'\n});\n\nassign(\n ReactTVMLComponent.prototype,\n ReactTVMLComponent.Mixin,\n MultiChild.Mixin\n);\n\nmodule.exports = ReactTVMLComponent;\n" }, { "path": "src/EventEmitter.js", "content": "// For components like lockup, listItemLockup you can expect select, play, highlight, holdselect. For Buttons only select and play events are fired. For text fields change event is sent.\n'use strict';\n\nvar EventPluginHub = require('react/lib//EventPluginHub');\nvar EventPluginRegistry = require('react/lib//EventPluginRegistry');\nvar ReactEventEmitterMixin = require('react/lib//ReactEventEmitterMixin');\nvar EventListener = require('./EventListener');\n\nvar assign = require('react/lib/Object.assign');\nvar hasOwnProperty = require('has-own-prop');\n\n\n/**\n * Summary of `EventEmitter` event handling:\n *\n * - Top-level delegation is used to trap most native browser events. This\n * may only occur in the main thread and is the responsibility of\n * EventListener, which is injected and can therefore support pluggable\n * event sources. This is the only work that occurs in the main thread.\n *\n * - We normalize and de-duplicate events to account for browser quirks. This\n * may be done in the worker thread.\n *\n * - Forward these native events (with the associated top-level type used to\n * trap it) to `EventPluginHub`, which in turn will ask plugins if they want\n * to extract any synthetic events.\n *\n * - The `EventPluginHub` will then process each event by annotating them with\n * \"dispatches\", a sequence of listeners and IDs that care about that event.\n *\n * - The `EventPluginHub` then dispatches the events.\n *\n * Overview of React and the event system:\n *\n * +------------+ .\n * | DOM | .\n * +------------+ .\n * | .\n * v .\n * +------------+ .\n * | ReactEvent | .\n * | Listener | .\n * +------------+ . +-----------+\n * | . +--------+|SimpleEvent|\n * | . | |Plugin |\n * +-----|------+ . v +-----------+\n * | | | . +--------------+ +------------+\n * | +-----------.--->|EventPluginHub| | Event |\n * | | . | | +-----------+ | Propagators|\n * | ReactEvent | . | | |TapEvent | |------------|\n * | Emitter | . | |<---+|Plugin | |other plugin|\n * | | . | | +-----------+ | utilities |\n * | +-----------.--->| | +------------+\n * | | | . +--------------+\n * +-----|------+ . ^ +-----------+\n * | . | |Enter/Leave|\n * + . +-------+|Plugin |\n * +-------------+ . +-----------+\n * | application | .\n * |-------------| .\n * | | .\n * | | .\n * +-------------+ .\n * .\n * React Core . General Purpose Event Plugin System\n */\n\nvar alreadyListeningTo = {};\nvar reactTopListenersCounter = 0;\n\n// For events like 'submit' which don't consistently bubble (which we trap at a\n// lower node than `document`), binding at `document` would cause duplicate\n// events so we don't include them here\nvar topEventMapping = {\n topSelect: 'select',\n topPlay: 'play',\n topHighlight: 'highlight',\n topHoldselect: 'holdselect'\n};\n\n/**\n * To ensure no conflicts with other potential React instances on the page\n */\nvar topListenersIDKey = '_reactListenersID' + String(Math.random()).slice(2);\n\nfunction getListeningForDocument(mountAt) {\n if (!hasOwnProperty(mountAt, topListenersIDKey)) {\n mountAt[topListenersIDKey] = reactTopListenersCounter + 1;\n alreadyListeningTo[mountAt[topListenersIDKey]] = {};\n }\n\n return alreadyListeningTo[mountAt[topListenersIDKey]];\n}\n\nvar getDependencies = function(name) {\n return EventPluginRegistry.registrationNameDependencies[name];\n};\n\n/**\n * `EventEmitter` is used to attach top-level event listeners. For\n * example:\n *\n * EventEmitter.putListener('myID', 'onClick', myFunction);\n *\n * This would allocate a \"registration\" of `('onClick', myFunction)` on 'myID'.\n *\n * @internal\n */\nvar EventEmitter = assign({}, ReactEventEmitterMixin, {\n /**\n * Sets whether or not any created callbacks should be enabled.\n *\n * @param {boolean} enabled True if callbacks should be enabled.\n */\n setEnabled: function(enabled) {\n EventListener.setEnabled(enabled);\n },\n\n /**\n * @return {boolean} True if callbacks are enabled.\n */\n isEnabled: function() {\n return EventListener.isEnabled();\n },\n\n /**\n * We listen for bubbled touch events on the document object.\n *\n *\n * @param {string} registrationName Name of listener (e.g. `onSelect`).\n * @param {object} mountAt Document which owns the container\n */\n listenTo: function(registrationName, mountAt) {\n var isListening = getListeningForDocument(mountAt);\n var dependencies = getDependencies(registrationName);\n\n dependencies.forEach(function(dependency) {\n if ((hasOwnProperty(isListening, dependency) && isListening[dependency])) {\n return;\n }\n\n if (hasOwnProperty(topEventMapping, dependency)) {\n EventEmitter.trapBubbledEvent(dependency, topEventMapping[dependency], mountAt);\n }\n\n isListening[dependency] = true;\n });\n },\n\n trapBubbledEvent: function(topLevelType, handlerBaseName, handle) {\n return EventListener.trapBubbledEvent(topLevelType, handlerBaseName, handle);\n },\n\n trapCapturedEvent: function(topLevelType, handlerBaseName, handle) {\n return EventListener.trapCapturedEvent(topLevelType, handlerBaseName, handle);\n },\n\n eventNameDispatchConfigs: EventPluginHub.eventNameDispatchConfigs,\n registrationNameModules: EventPluginHub.registrationNameModules,\n putListener: EventPluginHub.putListener,\n getListener: EventPluginHub.getListener,\n deleteListener: EventPluginHub.deleteListener,\n deleteAllListeners: EventPluginHub.deleteAllListeners\n});\n\nmodule.exports = EventEmitter;\n" }, { "path": "src/EventListener.js", "content": "'use strict';\n\nvar EventListener = require('fbjs/lib/EventListener');\nvar ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');\nvar PooledClass = require('react/lib/PooledClass');\nvar ReactInstanceHandles = require('react/lib/ReactInstanceHandles');\nvar ReactMount = require('./Mount');\nvar ReactUpdates = require('react/lib/ReactUpdates');\n\nvar assign = require('react/lib/Object.assign');\nvar getEventTarget = require('react/lib/getEventTarget');\nvar getUnboundedScrollPosition = require('fbjs/lib/getUnboundedScrollPosition');\n\n\nvar DOCUMENT_FRAGMENT_NODE_TYPE = 11;\n\n/**\n * Finds the parent React component of `node`.\n *\n * @param {*} node\n * @return {?DOMEventTarget} Parent container, or `null` if the specified node\n * is not nested.\n */\nfunction findParent(node) {\n // TODO: It may be a good idea to cache this to prevent unnecessary DOM\n // traversal, but caching is difficult to do correctly without using a\n // mutation observer to listen for all DOM changes.\n var nodeID = ReactMount.getID(node);\n var rootID = ReactInstanceHandles.getReactRootIDFromNodeID(nodeID);\n var container = ReactMount.findReactContainerForID(rootID);\n var parent = ReactMount.getFirstReactDOM(container);\n return parent;\n}\n\n// Used to store ancestor hierarchy in top level callback\nfunction TopLevelCallbackBookKeeping(topLevelType, nativeEvent) {\n this.topLevelType = topLevelType;\n this.nativeEvent = nativeEvent;\n this.ancestors = [];\n}\nassign(TopLevelCallbackBookKeeping.prototype, {\n destructor: function () {\n this.topLevelType = null;\n this.nativeEvent = null;\n this.ancestors.length = 0;\n }\n});\nPooledClass.addPoolingTo(TopLevelCallbackBookKeeping, PooledClass.twoArgumentPooler);\n\nfunction handleTopLevelImpl(bookKeeping) {\n // TODO: Re-enable event.path handling\n //\n // if (bookKeeping.nativeEvent.path && bookKeeping.nativeEvent.path.length > 1) {\n // // New browsers have a path attribute on native events\n // handleTopLevelWithPath(bookKeeping);\n // } else {\n // // Legacy browsers don't have a path attribute on native events\n // handleTopLevelWithoutPath(bookKeeping);\n // }\n\n void handleTopLevelWithPath; // temporarily unused\n handleTopLevelWithoutPath(bookKeeping);\n}\n\n// Legacy browsers don't have a path attribute on native events\nfunction handleTopLevelWithoutPath(bookKeeping) {\n var topLevelTarget = ReactMount.getFirstReactDOM(getEventTarget(bookKeeping.nativeEvent)) || window;\n\n // Loop through the hierarchy, in case there's any nested components.\n // It's important that we build the array of ancestors before calling any\n // event handlers, because event handlers can modify the DOM, leading to\n // inconsistencies with ReactMount's node cache. See #1105.\n var ancestor = topLevelTarget;\n while (ancestor) {\n bookKeeping.ancestors.push(ancestor);\n ancestor = findParent(ancestor);\n }\n\n for (var i = 0; i < bookKeeping.ancestors.length; i++) {\n topLevelTarget = bookKeeping.ancestors[i];\n var topLevelTargetID = ReactMount.getID(topLevelTarget) || '';\n ReactEventListener._handleTopLevel(bookKeeping.topLevelType, topLevelTarget, topLevelTargetID, bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent));\n }\n}\n\n// New browsers have a path attribute on native events\nfunction handleTopLevelWithPath(bookKeeping) {\n var path = bookKeeping.nativeEvent.path;\n var currentNativeTarget = path[0];\n var eventsFired = 0;\n for (var i = 0; i < path.length; i++) {\n var currentPathElement = path[i];\n if (currentPathElement.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE) {\n currentNativeTarget = path[i + 1];\n }\n // TODO: slow\n var reactParent = ReactMount.getFirstReactDOM(currentPathElement);\n if (reactParent === currentPathElement) {\n var currentPathElementID = ReactMount.getID(currentPathElement);\n var newRootID = ReactInstanceHandles.getReactRootIDFromNodeID(currentPathElementID);\n bookKeeping.ancestors.push(currentPathElement);\n\n var topLevelTargetID = ReactMount.getID(currentPathElement) || '';\n eventsFired++;\n ReactEventListener._handleTopLevel(bookKeeping.topLevelType, currentPathElement, topLevelTargetID, bookKeeping.nativeEvent, currentNativeTarget);\n\n // Jump to the root of this React render tree\n while (currentPathElementID !== newRootID) {\n i++;\n currentPathElement = path[i];\n currentPathElementID = ReactMount.getID(currentPathElement);\n }\n }\n }\n if (eventsFired === 0) {\n ReactEventListener._handleTopLevel(bookKeeping.topLevelType, window, '', bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent));\n }\n}\n\nfunction scrollValueMonitor(cb) {\n var scrollPosition = getUnboundedScrollPosition(window);\n cb(scrollPosition);\n}\n\nvar ReactEventListener = {\n _enabled: true,\n _handleTopLevel: null,\n\n WINDOW_HANDLE: ExecutionEnvironment.canUseDOM ? window : null,\n\n setHandleTopLevel: function (handleTopLevel) {\n ReactEventListener._handleTopLevel = handleTopLevel;\n },\n\n setEnabled: function (enabled) {\n ReactEventListener._enabled = !!enabled;\n },\n\n isEnabled: function () {\n return ReactEventListener._enabled;\n },\n\n /**\n * Traps top-level events by using event bubbling.\n *\n * @param {string} topLevelType Record from `EventConstants`.\n * @param {string} handlerBaseName Event name (e.g. \"click\").\n * @param {object} handle Element on which to attach listener.\n * @return {?object} An object with a remove function which will forcefully\n * remove the listener.\n * @internal\n */\n trapBubbledEvent: function (topLevelType, handlerBaseName, handle) {\n var element = handle;\n if (!element) {\n return null;\n }\n return EventListener.listen(element, handlerBaseName, ReactEventListener.dispatchEvent.bind(null, topLevelType));\n },\n\n /**\n * Traps a top-level event by using event capturing.\n *\n * @param {string} topLevelType Record from `EventConstants`.\n * @param {string} handlerBaseName Event name (e.g. \"click\").\n * @param {object} handle Element on which to attach listener.\n * @return {?object} An object with a remove function which will forcefully\n * remove the listener.\n * @internal\n */\n trapCapturedEvent: function (topLevelType, handlerBaseName, handle) {\n var element = handle;\n if (!element) {\n return null;\n }\n return EventListener.capture(element, handlerBaseName, ReactEventListener.dispatchEvent.bind(null, topLevelType));\n },\n\n dispatchEvent: function (topLevelType, nativeEvent) {\n if (!ReactEventListener._enabled) {\n return;\n }\n\n var bookKeeping = TopLevelCallbackBookKeeping.getPooled(topLevelType, nativeEvent);\n try {\n // Event queue being processed in the same cycle allows\n // `preventDefault`.\n ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);\n } finally {\n TopLevelCallbackBookKeeping.release(bookKeeping);\n }\n }\n};\n\nmodule.exports = ReactEventListener;\n" }, { "path": "src/EventPlugin.js", "content": "'use strict';\n\nvar EventPropagators = require('react/lib/EventPropagators');\nvar SyntheticEvent = require('react/lib/SyntheticEvent');\n\nvar keyOf = require('fbjs/lib/keyOf');\n\n\nvar eventTypes = {\n select: {\n phasedRegistrationNames: {\n bubbled: keyOf({\n onSelect: true\n }),\n captured: keyOf({\n onSelectCapture: true\n })\n }\n },\n play: {\n phasedRegistrationNames: {\n bubbled: keyOf({\n onPlay: true\n }),\n captured: keyOf({\n onPlayCapture: true\n })\n }\n },\n highlight: {\n phasedRegistrationNames: {\n bubbled: keyOf({\n onHighlight: true\n }),\n captured: keyOf({\n onHighlightCapture: true\n })\n }\n },\n holdSelect: {\n phasedRegistrationNames: {\n bubbled: keyOf({\n onHoldSelect: true\n }),\n captured: keyOf({\n onHoldSelectCapture: true\n })\n }\n }\n};\n\nvar topLevelEventsToDispatchConfig = {\n topSelect: eventTypes.select,\n topPlay: eventTypes.play,\n topHighlight: eventTypes.highlight,\n topHoldSelect: eventTypes.holdSelect\n};\n\nfor (var type in topLevelEventsToDispatchConfig) {\n topLevelEventsToDispatchConfig[type].dependencies = [type];\n}\n\n\nvar SimpleEventPlugin = {\n eventTypes: eventTypes,\n\n /**\n * @param {string} topLevelType Record from `EventConstants`.\n * @param {DOMEventTarget} topLevelTarget The listening component root node.\n * @param {string} topLevelTargetID ID of `topLevelTarget`.\n * @param {object} nativeEvent Native browser event.\n * @return {*} An accumulation of synthetic events.\n * @see {EventPluginHub.extractEvents}\n */\n extractEvents: function (topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget) {\n var dispatchConfig = topLevelEventsToDispatchConfig[topLevelType];\n\n if (!dispatchConfig) {\n return null;\n }\n\n var ev = SyntheticEvent.getPooled(dispatchConfig, topLevelTargetID, nativeEvent, nativeEventTarget);\n EventPropagators.accumulateTwoPhaseDispatches(ev);\n return ev;\n }\n};\n\nmodule.exports = SimpleEventPlugin;" }, { "path": "src/IDOperations.js", "content": "'use strict';\n\nvar DOMChildrenOperations = require('react/lib/DOMChildrenOperations');\nvar DOMPropertyOperations = require('react/lib/DOMPropertyOperations');\nvar ReactPerf = require('react/lib/ReactPerf');\nvar Mount = require('./Mount');\n\nvar invariant = require('fbjs/lib/invariant');\n\n\n/**\n * Operations used to process updates to DOM nodes.\n */\nvar ReactTVMLIDOperations = {\n /**\n * Replaces a DOM node that exists in the document with markup.\n *\n * @param {string} id ID of child to be replaced.\n * @param {string} markup Dangerous markup to inject in place of child.\n * @internal\n * @see {Danger.dangerouslyReplaceNodeWithMarkup}\n */\n replaceNodeWithMarkupByID: function(id, markup) {\n var node = Mount.getNode(id);\n DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);\n },\n\n /**\n * Updates a component's children by processing a series of updates.\n *\n * @param {array} updates List of update configurations.\n * @param {array} markup List of markup strings.\n * @internal\n */\n processChildrenUpdates: function(updates, markup) {\n DOMChildrenOperations.processUpdates(updates.map(function(update) {\n update.parentNode = Mount.getNode(update.parentID);\n return update;\n }), markup);\n },\n\n /**\n * If a particular environment requires that some resources be cleaned up,\n * specify this in the injected Mixin. In the DOM, we would likely want to\n * purge any cached node ID lookups.\n *\n * @private\n */\n unmountIDFromEnvironment: function(rootNodeID) {\n Mount.purgeID(rootNodeID);\n }\n};\n\nReactPerf.measureMethods(ReactTVMLIDOperations, 'ReactTVMLIDOperations', {\n updatePropertyByID: 'updatePropertyByID',\n replaceNodeWithMarkupByID: 'replaceNodeWithMarkupByID',\n processChildrenUpdates: 'processChildrenUpdates'\n});\n\nmodule.exports = ReactTVMLIDOperations;" }, { "path": "src/Mount.js", "content": "'use strict';\n\nvar __DEV__ = false; // process.env.NODE_ENV !== 'production';\n\nvar DOMProperty = require('react/lib/DOMProperty');\nvar ReactCurrentOwner = require('react/lib/ReactCurrentOwner');\nvar ReactDOMFeatureFlags = require('react/lib/ReactDOMFeatureFlags');\nvar ReactElement = require('react/lib/ReactElement');\nvar ReactEmptyComponentRegistry = require('react/lib/ReactEmptyComponentRegistry');\nvar ReactInstanceHandles = require('react/lib/ReactInstanceHandles');\nvar ReactInstanceMap = require('react/lib/ReactInstanceMap');\nvar ReactMarkupChecksum = require('react/lib/ReactMarkupChecksum');\nvar ReactPerf = require('react/lib/ReactPerf');\nvar ReactReconciler = require('react/lib/ReactReconciler');\nvar ReactUpdateQueue = require('react/lib/ReactUpdateQueue');\nvar ReactUpdates = require('react/lib/ReactUpdates');\n\nvar assign = require('react/lib/Object.assign');\nvar emptyObject = require('fbjs/lib/emptyObject');\nvar containsNode = require('fbjs/lib/containsNode');\nvar instantiateReactComponent = require('./instantiateReactComponent');\nvar invariant = require('fbjs/lib/invariant');\nvar setInnerHTML = require('react/lib/setInnerHTML');\nvar shouldUpdateReactComponent = require('react/lib/shouldUpdateReactComponent');\nvar validateDOMNesting = require('react/lib/validateDOMNesting');\nvar warning = require('fbjs/lib/warning');\n\nvar parser = new DOMParser();\nvar ATTR_NAME = DOMProperty.ID_ATTRIBUTE_NAME;\nvar nodeCache = {};\n\nvar ELEMENT_NODE_TYPE = 1;\nvar DOC_NODE_TYPE = 9;\nvar DOCUMENT_FRAGMENT_NODE_TYPE = 11;\n\nvar ownerDocumentContextKey =\n '__TVMLMount_ownerDocument$' + Math.random().toString(36).slice(2);\n\n\n/** Mapping from reactRootID to React component instance. */\nvar instancesByReactRootID = {};\n\n/** Mapping from reactRootID to `container` nodes. */\nvar containersByReactRootID = {};\n\nif (__DEV__) {\n /** __DEV__-only mapping from reactRootID to root elements. */\n var rootElementsByReactRootID = {};\n}\n\n// Used to store breadth-first search state in findComponentRoot.\nvar findComponentRootReusableArray = [];\n\n/**\n * Finds the index of the first character\n * that's not common between the two given strings.\n *\n * @return {number} the index of the character where the strings diverge\n */\nfunction firstDifferenceIndex(string1, string2) {\n var minLen = Math.min(string1.length, string2.length);\n for (var i = 0; i < minLen; i++) {\n if (string1.charAt(i) !== string2.charAt(i)) {\n return i;\n }\n }\n return string1.length === string2.length ? -1 : minLen;\n}\n\n/**\n * @param {DOMElement|DOMDocument} container DOM element that may contain\n * a React component\n * @return {?*} DOM element that may have the reactRoot ID, or null.\n */\nfunction getReactRootElementInContainer(container) {\n if (!container) {\n return null;\n }\n\n return container.documentElement;\n}\n\n/**\n * @param {DOMElement} container DOM element that may contain a React component.\n * @return {?string} A \"reactRoot\" ID, if a React component is rendered.\n */\nfunction getReactRootID(container) {\n var rootElement = getReactRootElementInContainer(container);\n return rootElement && TVMLMount.getID(rootElement);\n}\n\n/**\n * Accessing node[ATTR_NAME] or calling getAttribute(ATTR_NAME) on a form\n * element can return its control whose name or ID equals ATTR_NAME. All\n * DOM nodes support `getAttributeNode` but this can also get called on\n * other objects so just return '' if we're given something other than a\n * DOM node (such as window).\n *\n * @param {?DOMElement|DOMWindow|DOMDocument|DOMTextNode} node DOM node.\n * @return {string} ID of the supplied `domNode`.\n */\nfunction getID(node) {\n var id = internalGetID(node);\n if (id) {\n if (nodeCache.hasOwnProperty(id)) {\n var cached = nodeCache[id];\n if (cached !== node) {\n invariant(\n !isValid(cached, id),\n 'TVMLMount: Two valid but unequal nodes with the same `%s`: %s',\n ATTR_NAME, id\n );\n\n nodeCache[id] = node;\n }\n } else {\n nodeCache[id] = node;\n }\n }\n\n return id;\n}\n\nfunction internalGetID(node) {\n // If node is something like a window, document, or text node, none of\n // which support attributes or a .getAttribute method, gracefully return\n // the empty string, as if the attribute were missing.\n return node && node.getAttribute && node.getAttribute(ATTR_NAME) || '';\n}\n\n/**\n * Sets the React-specific ID of the given node.\n *\n * @param {DOMElement} node The DOM node whose ID will be set.\n * @param {string} id The value of the ID attribute.\n */\nfunction setID(node, id) {\n var oldID = internalGetID(node);\n if (oldID !== id) {\n delete nodeCache[oldID];\n }\n node.setAttribute(ATTR_NAME, id);\n nodeCache[id] = node;\n}\n\n/**\n * Finds the node with the supplied React-generated DOM ID.\n *\n * @param {string} id A React-generated DOM ID.\n * @return {DOMElement} DOM node with the suppled `id`.\n * @internal\n */\nfunction getNode(id) {\n if (!nodeCache.hasOwnProperty(id) || !isValid(nodeCache[id], id)) {\n nodeCache[id] = TVMLMount.findReactNodeByID(id);\n }\n return nodeCache[id];\n}\n\n/**\n * Finds the node with the supplied public React instance.\n *\n * @param {*} instance A public React instance.\n * @return {?DOMElement} DOM node with the suppled `id`.\n * @internal\n */\nfunction getNodeFromInstance(instance) {\n var id = ReactInstanceMap.get(instance)._rootNodeID;\n if (ReactEmptyComponentRegistry.isNullComponentID(id)) {\n return null;\n }\n if (!nodeCache.hasOwnProperty(id) || !isValid(nodeCache[id], id)) {\n nodeCache[id] = TVMLMount.findReactNodeByID(id);\n }\n return nodeCache[id];\n}\n\n/**\n * A node is \"valid\" if it is contained by a currently mounted container.\n *\n * This means that the node does not have to be contained by a document in\n * order to be considered valid.\n *\n * @param {?DOMElement} node The candidate DOM node.\n * @param {string} id The expected ID of the node.\n * @return {boolean} Whether the node is contained by a mounted container.\n */\nfunction isValid(node, id) {\n if (node) {\n invariant(\n internalGetID(node) === id,\n 'TVMLMount: Unexpected modification of `%s`',\n ATTR_NAME\n );\n\n var container = TVMLMount.findReactContainerForID(id);\n if (container && containsNode(container, node)) {\n return true;\n }\n }\n\n return false;\n}\n\n/**\n * Causes the cache to forget about one React-specific ID.\n *\n * @param {string} id The ID to forget.\n */\nfunction purgeID(id) {\n delete nodeCache[id];\n}\n\nvar deepestNodeSoFar = null;\nfunction findDeepestCachedAncestorImpl(ancestorID) {\n var ancestor = nodeCache[ancestorID];\n if (ancestor && isValid(ancestor, ancestorID)) {\n deepestNodeSoFar = ancestor;\n } else {\n // This node isn't populated in the cache, so presumably none of its\n // descendants are. Break out of the loop.\n return false;\n }\n}\n\n/**\n * Return the deepest cached node whose ID is a prefix of `targetID`.\n */\nfunction findDeepestCachedAncestor(targetID) {\n deepestNodeSoFar = null;\n ReactInstanceHandles.traverseAncestors(\n targetID,\n findDeepestCachedAncestorImpl\n );\n\n var foundNode = deepestNodeSoFar;\n deepestNodeSoFar = null;\n return foundNode;\n}\n\n/**\n * Mounts this component and inserts it into the DOM.\n *\n * @param {ReactComponent} componentInstance The instance to mount.\n * @param {string} rootID DOM ID of the root node.\n * @param {DOMElement} container DOM element to mount into.\n * @param {ReactReconcileTransaction} transaction\n * @param {boolean} shouldReuseMarkup If true, do not insert markup\n */\nfunction mountComponentIntoNode(\n componentInstance,\n rootID,\n container,\n transaction,\n shouldReuseMarkup,\n context\n) {\n if (ReactDOMFeatureFlags.useCreateElement) {\n context = assign({}, context);\n if (container.nodeType === DOC_NODE_TYPE) {\n context[ownerDocumentContextKey] = container;\n } else {\n context[ownerDocumentContextKey] = container.ownerDocument;\n }\n }\n if (__DEV__) {\n if (context === emptyObject) {\n context = {};\n }\n var tag = container.nodeName.toLowerCase();\n context[validateDOMNesting.ancestorInfoContextKey] =\n validateDOMNesting.updatedAncestorInfo(null, tag, null);\n }\n var markup = ReactReconciler.mountComponent(\n componentInstance, rootID, transaction, context\n );\n componentInstance._renderedComponent._topLevelWrapper = componentInstance;\n TVMLMount._mountImageIntoNode(\n markup,\n container,\n shouldReuseMarkup,\n transaction\n );\n}\n\n/**\n * Batched mount.\n *\n * @param {ReactComponent} componentInstance The instance to mount.\n * @param {string} rootID DOM ID of the root node.\n * @param {DOMElement} container DOM element to mount into.\n * @param {boolean} shouldReuseMarkup If true, do not insert markup\n */\nfunction batchedMountComponentIntoNode(\n componentInstance,\n rootID,\n container,\n shouldReuseMarkup,\n context\n) {\n var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(\n /* forceHTML */ shouldReuseMarkup\n );\n transaction.perform(\n mountComponentIntoNode,\n null,\n componentInstance,\n rootID,\n container,\n transaction,\n shouldReuseMarkup,\n context\n );\n ReactUpdates.ReactReconcileTransaction.release(transaction);\n}\n\n/**\n * Unmounts a component and removes it from the DOM.\n *\n * @param {ReactComponent} instance React component instance.\n * @param {DOMElement} container DOM element to unmount from.\n * @final\n * @internal\n * @see {TVMLMount.unmountComponentAtNode}\n */\nfunction unmountComponentFromNode(instance, container) {\n ReactReconciler.unponent(instance);\n\n if (container.nodeType === DOC_NODE_TYPE) {\n container = container.documentElement;\n }\n\n // http://jsperf.com/emptying-a-node\n while (container.lastChild) {\n container.removeChild(container.lastChild);\n }\n}\n\n/**\n * True if the supplied DOM node has a direct React-rendered child that is\n * not a React root element. Useful for warning in `render`,\n * `unmountComponentAtNode`, etc.\n *\n * @param {?DOMElement} node The candidate DOM node.\n * @return {boolean} True if the DOM element contains a direct child that was\n * rendered by React but is not a root element.\n * @internal\n */\nfunction hasNonRootReactChild(node) {\n var reactRootID = getReactRootID(node);\n return reactRootID ? reactRootID !==\n ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID) : false;\n}\n\n/**\n * Returns the first (deepest) ancestor of a node which is rendered by this copy\n * of React.\n */\nfunction findFirstReactDOMImpl(node) {\n // This node might be from another React instance, so we make sure not to\n // examine the node cache here\n for (; node && node.parentNode !== node; node = node.parentNode) {\n var nodeID = internalGetID(node);\n if (!nodeID) {\n continue;\n }\n var reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(nodeID);\n\n // If containersByReactRootID contains the container we find by crawling up\n // the tree, we know that this instance of React rendered the node.\n // nb. isValid's strategy (with containsNode) does not work because render\n // trees may be nested and we don't want a false positive in that case.\n var current = node;\n var lastID;\n do {\n lastID = internalGetID(current);\n current = current.parentNode;\n if (current == null) {\n // The passed-in node has been detached from the container it was\n // originally rendered into.\n return null;\n }\n } while (lastID !== reactRootID);\n\n var expected = containersByReactRootID[reactRootID];\n\n if ((\n expected.nodeType === DOC_NODE_TYPE &&\n current.nodeType === ELEMENT_NODE_TYPE &&\n current.ownerDocument === expected\n )) {\n return node;\n }\n\n if (current === expected) {\n return node;\n }\n }\n return null;\n}\n\n/**\n * Temporary (?) hack so that we can store all top-level pending updates on\n * composites instead of having to worry about different types of components\n * here.\n */\nvar TopLevelWrapper = function() {};\nTopLevelWrapper.isReactClass = {};\nif (__DEV__) {\n TopLevelWrapper.displayName = 'TopLevelWrapper';\n}\nTopLevelWrapper.prototype.render = function() {\n // this.props is actually a ReactElement\n return this.props;\n};\n\n/**\n * Mounting is the process of initializing a React component by creating its\n * representative DOM elements and inserting them into a supplied `container`.\n * Any prior content inside `container` is destroyed in the process.\n *\n * TVMLMount.render(\n * component,\n * document.getElementById('container')\n * );\n *\n *
<-- Supplied `container`.\n *
<-- Rendered reactRoot of React\n * // ... component.\n *
\n *
\n *\n * Inside of `container`, the first element rendered is the \"reactRoot\".\n */\nvar TVMLMount = {\n /** Exposed for debugging purposes **/\n _instancesByReactRootID: instancesByReactRootID,\n\n generateEmptyContainer: function () {\n return parser.parseFromString('', 'text/xml');\n },\n\n /**\n * Take a component that's already mounted into the DOM and replace its props\n * @param {ReactComponent} prevComponent component instance already in the DOM\n * @param {ReactElement} nextElement component instance to render\n * @param {DOMElement} container container to render into\n * @param {?function} callback function triggered on completion\n */\n _updateRootComponent: function(\n prevComponent,\n nextElement,\n container,\n callback) {\n TVMLMount.scrollMonitor(container, function() {\n ReactUpdateQueue.enqueueElementInternal(prevComponent, nextElement);\n if (callback) {\n ReactUpdateQueue.enqueueCallbackInternal(prevComponent, callback);\n }\n });\n\n if (__DEV__) {\n // Record the root element in case it later gets transplanted.\n rootElementsByReactRootID[getReactRootID(container)] =\n getReactRootElementInContainer(container);\n }\n\n return prevComponent;\n },\n\n /**\n * Register a component into the instance map and starts scroll value\n * monitoring\n * @param {ReactComponent} nextComponent component instance to render\n * @param {DOMElement} container container to render into\n * @return {string} reactRoot ID prefix\n */\n _registerComponent: function(nextComponent, container) {\n invariant(\n container && (\n container.nodeType === ELEMENT_NODE_TYPE ||\n container.nodeType === DOC_NODE_TYPE ||\n container.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE\n ),\n '_registerComponent(...): Target container is not a DOM element.'\n );\n\n var reactRootID = TVMLMount.registerContainer(container);\n instancesByReactRootID[reactRootID] = nextComponent;\n return reactRootID;\n },\n\n /**\n * Render a new component into the DOM.\n * @param {ReactElement} nextElement element to render\n * @param {DOMElement} container container to render into\n * @param {boolean} shouldReuseMarkup if we should skip the markup insertion\n * @return {ReactComponent} nextComponent\n */\n _renderNewRootComponent: function(\n nextElement,\n container,\n shouldReuseMarkup,\n context\n ) {\n // Various parts of our code (such as ReactCompositeComponent's\n // _renderValidatedComponent) assume that calls to render aren't nested;\n // verify that that's the case.\n warning(\n ReactCurrentOwner.current == null,\n '_renderNewRootComponent(): Render methods should be a pure function ' +\n 'of props and state; triggering nested component updates from ' +\n 'render is not allowed. If necessary, trigger nested updates in ' +\n 'componentDidUpdate. Check the render method of %s.',\n ReactCurrentOwner.current && ReactCurrentOwner.current.getName() ||\n 'ReactCompositeComponent'\n );\n\n var componentInstance = instantiateReactComponent(nextElement, null);\n var reactRootID = TVMLMount._registerComponent(\n componentInstance,\n container\n );\n\n // The initial render is synchronous but any updates that happen during\n // rendering, in componentWillMount or componentDidMount, will be batched\n // according to the current batching strategy.\n ReactUpdates.batchedUpdates(\n batchedMountComponentIntoNode,\n componentInstance,\n reactRootID,\n container,\n shouldReuseMarkup,\n context\n );\n\n if (__DEV__) {\n // Record the root element in case it later gets transplanted.\n rootElementsByReactRootID[reactRootID] =\n getReactRootElementInContainer(container);\n }\n\n return componentInstance;\n },\n\n /**\n * Renders a React component into the DOM in the supplied `container`.\n *\n * If the React component was previously rendered into `container`, this will\n * perform an update on it and only mutate the DOM as necessary to reflect the\n * latest React component.\n *\n * @param {ReactComponent} parentComponent The conceptual parent of this render tree.\n * @param {ReactElement} nextElement Component element to render.\n * @param {DOMElement} container DOM element to render into.\n * @param {?function} callback function triggered on completion\n * @return {ReactComponent} Component instance rendered in `container`.\n */\n renderSubtreeIntoContainer: function(parentComponent, nextElement, container, callback) {\n invariant(\n parentComponent != null && parentComponent._reactInternalInstance != null,\n 'parentComponent must be a valid React Component'\n );\n return TVMLMount._renderSubtreeIntoContainer(\n parentComponent,\n nextElement,\n container,\n callback\n );\n },\n\n\n\n _renderSubtreeIntoContainer: function(parentComponent, nextElement, container, callback) {\n invariant(\n ReactElement.isValidElement(nextElement),\n 'ReactDOM.render(): Invalid component element.%s',\n (\n typeof nextElement === 'string' ?\n ' Instead of passing an element string, make sure to instantiate ' +\n 'it by passing it to React.createElement.' :\n typeof nextElement === 'function' ?\n ' Instead of passing a component class, make sure to instantiate ' +\n 'it by passing it to React.createElement.' :\n // Check if it quacks like an element\n nextElement != null && nextElement.props !== undefined ?\n ' This may be caused by unintentionally loading two independent ' +\n 'copies of React.' :\n ''\n )\n );\n\n warning(\n !container || !container.tagName ||\n container.tagName.toUpperCase() !== 'BODY',\n 'render(): Rendering components directly into document.body is ' +\n 'discouraged, since its children are often manipulated by third-party ' +\n 'scripts and browser extensions. This may lead to subtle ' +\n 'reconciliation issues. Try rendering into a container element created ' +\n 'for your app.'\n );\n\n var nextWrappedElement = new ReactElement(\n TopLevelWrapper,\n null,\n null,\n null,\n null,\n null,\n nextElement\n );\n\n var prevComponent = instancesByReactRootID[getReactRootID(container)];\n\n if (prevComponent) {\n var prevWrappedElement = prevComponent._currentElement;\n var prevElement = prevWrappedElement.props;\n if (shouldUpdateReactComponent(prevElement, nextElement)) {\n return TVMLMount._updateRootComponent(\n prevComponent,\n nextWrappedElement,\n container,\n callback\n )._renderedComponent.getPublicInstance();\n } else {\n TVMLMount.unmountComponentAtNode(container);\n }\n }\n\n var reactRootElement = getReactRootElementInContainer(container);\n var containerHasReactMarkup =\n reactRootElement && !!internalGetID(reactRootElement);\n var containerHasNonRootReactChild = hasNonRootReactChild(container);\n\n if (__DEV__) {\n warning(\n !containerHasNonRootReactChild,\n 'render(...): Replacing React-rendered children with a new root ' +\n 'component. If you intended to update the children of this node, ' +\n 'you should instead have the existing children update their state ' +\n 'and render the new components instead of calling ReactDOM.render.'\n );\n\n if (!containerHasReactMarkup || reactRootElement.nextSibling) {\n var rootElementSibling = reactRootElement;\n while (rootElementSibling) {\n if (internalGetID(rootElementSibling)) {\n warning(\n false,\n 'render(): Target node has markup rendered by React, but there ' +\n 'are unrelated nodes as well. This is most commonly caused by ' +\n 'white-space inserted around server-rendered markup.'\n );\n break;\n }\n rootElementSibling = rootElementSibling.nextSibling;\n }\n }\n }\n\n var shouldReuseMarkup =\n containerHasReactMarkup &&\n !prevComponent &&\n !containerHasNonRootReactChild;\n var component = TVMLMount._renderNewRootComponent(\n nextWrappedElement,\n container,\n shouldReuseMarkup,\n parentComponent != null ?\n parentComponent._reactInternalInstance._processChildContext(\n parentComponent._reactInternalInstance._context\n ) :\n emptyObject\n )._renderedComponent.getPublicInstance();\n if (callback) {\n callback.call(component);\n }\n return component;\n },\n\n\n /**\n * Renders a React component into the DOM in the supplied `container`.\n *\n * If the React component was previously rendered into `container`, this will\n * perform an update on it and only mutate the DOM as necessary to reflect the\n * latest React component.\n *\n * @param {ReactElement} nextElement Component element to render.\n * @param {DOMElement} container DOM element to render into.\n * @param {?function} callback function triggered on completion\n * @return {ReactComponent} Component instance rendered in `container`.\n */\n render: function(nextElement, callback) {\n var container = TVMLMount.generateEmptyContainer();\n var component = TVMLMount._renderSubtreeIntoContainer(null, nextElement, container, callback);\n navigationDocument.pushDocument(container);\n return component;\n },\n\n /**\n * Registers a container node into which React components will be rendered.\n * This also creates the \"reactRoot\" ID that will be assigned to the element\n * rendered within.\n *\n * @param {DOMElement} container DOM element to register as a container.\n * @return {string} The \"reactRoot\" ID of elements rendered within.\n */\n registerContainer: function(container) {\n var reactRootID = getReactRootID(container);\n if (reactRootID) {\n // If one exists, make sure it is a valid \"reactRoot\" ID.\n reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID);\n }\n if (!reactRootID) {\n // No valid \"reactRoot\" ID found, create one.\n reactRootID = ReactInstanceHandles.createReactRootID();\n }\n containersByReactRootID[reactRootID] = container;\n return reactRootID;\n },\n\n /**\n * Unmounts and destroys the React component rendered in the `container`.\n *\n * @param {DOMElement} container DOM element containing a React component.\n * @return {boolean} True if a component was found in and unmounted from\n * `container`\n */\n unmountComponentAtNode: function(container) {\n // Various parts of our code (such as ReactCompositeComponent's\n // _renderValidatedComponent) assume that calls to render aren't nested;\n // verify that that's the case. (Strictly speaking, unmounting won't cause a\n // render but we still don't expect to be in a render call here.)\n warning(\n ReactCurrentOwner.current == null,\n 'unmountComponentAtNode(): Render methods should be a pure function ' +\n 'of props and state; triggering nested component updates from render ' +\n 'is not allowed. If necessary, trigger nested updates in ' +\n 'componentDidUpdate. Check the render method of %s.',\n ReactCurrentOwner.current && ReactCurrentOwner.current.getName() ||\n 'ReactCompositeComponent'\n );\n\n invariant(\n container && (\n container.nodeType === ELEMENT_NODE_TYPE ||\n container.nodeType === DOC_NODE_TYPE ||\n container.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE\n ),\n 'unmountComponentAtNode(...): Target container is not a DOM element.'\n );\n\n var reactRootID = getReactRootID(container);\n var component = instancesByReactRootID[reactRootID];\n if (!component) {\n // Check if the node being unmounted was rendered by React, but isn't a\n // root node.\n var containerHasNonRootReactChild = hasNonRootReactChild(container);\n\n // Check if the container itself is a React root node.\n var containerID = internalGetID(container);\n var isContainerReactRoot =\n containerID &&\n containerID ===\n ReactInstanceHandles.getReactRootIDFromNodeID(containerID);\n\n if (__DEV__) {\n warning(\n !containerHasNonRootReactChild,\n 'unmountComponentAtNode(): The node you\\'re attempting to unmount ' +\n 'was rendered by React and is not a top-level container. %s',\n (\n isContainerReactRoot ?\n 'You may have accidentally passed in a React root node instead ' +\n 'of its container.' :\n 'Instead, have the parent component update its state and ' +\n 'rerender in order to remove this component.'\n )\n );\n }\n\n return false;\n }\n ReactUpdates.batchedUpdates(\n unmountComponentFromNode,\n component,\n container\n );\n delete instancesByReactRootID[reactRootID];\n delete containersByReactRootID[reactRootID];\n if (__DEV__) {\n delete rootElementsByReactRootID[reactRootID];\n }\n return true;\n },\n\n /**\n * Finds the container DOM element that contains React component to which the\n * supplied DOM `id` belongs.\n *\n * @param {string} id The ID of an element rendered by a React component.\n * @return {?DOMElement} DOM element that contains the `id`.\n */\n findReactContainerForID: function(id) {\n var reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(id);\n var container = containersByReactRootID[reactRootID];\n\n if (__DEV__) {\n var rootElement = rootElementsByReactRootID[reactRootID];\n if (rootElement && rootElement.parentNode !== container) {\n warning(\n // Call internalGetID here because getID calls isValid which calls\n // findReactContainerForID (this function).\n internalGetID(rootElement) === reactRootID,\n 'TVMLMount: Root element ID differed from reactRootID.'\n );\n var containerChild = container.firstChild;\n if (containerChild &&\n reactRootID === internalGetID(containerChild)) {\n // If the container has a new child with the same ID as the old\n // root element, then rootElementsByReactRootID[reactRootID] is\n // just stale and needs to be updated. The case that deserves a\n // warning is when the container is empty.\n rootElementsByReactRootID[reactRootID] = containerChild;\n } else {\n warning(\n false,\n 'TVMLMount: Root element has been removed from its original ' +\n 'container. New container: %s',\n rootElement.parentNode\n );\n }\n }\n }\n\n return container;\n },\n\n /**\n * Finds an element rendered by React with the supplied ID.\n *\n * @param {string} id ID of a DOM node in the React component.\n * @return {DOMElement} Root DOM node of the React component.\n */\n findReactNodeByID: function(id) {\n var reactRoot = TVMLMount.findReactContainerForID(id);\n return TVMLMount.findComponentRoot(reactRoot, id);\n },\n\n /**\n * Traverses up the ancestors of the supplied node to find a node that is a\n * DOM representation of a React component rendered by this copy of React.\n *\n * @param {*} node\n * @return {?DOMEventTarget}\n * @internal\n */\n getFirstReactDOM: function(node) {\n return findFirstReactDOMImpl(node);\n },\n\n /**\n * Finds a node with the supplied `targetID` inside of the supplied\n * `ancestorNode`. Exploits the ID naming scheme to perform the search\n * quickly.\n *\n * @param {DOMEventTarget} ancestorNode Search from this root.\n * @pararm {string} targetID ID of the DOM representation of the component.\n * @return {DOMEventTarget} DOM node with the supplied `targetID`.\n * @internal\n */\n findComponentRoot: function(ancestorNode, targetID) {\n var firstChildren = findComponentRootReusableArray;\n var childIndex = 0;\n\n var deepestAncestor = findDeepestCachedAncestor(targetID) || ancestorNode;\n\n if (__DEV__) {\n // This will throw on the next line; give an early warning\n warning(\n deepestAncestor != null,\n 'React can\\'t find the root component node for data-reactid value ' +\n '`%s`. If you\\'re seeing this message, it probably means that ' +\n 'you\\'ve loaded two copies of React on the page. At this time, only ' +\n 'a single copy of React can be loaded at a time.',\n targetID\n );\n }\n\n firstChildren[0] = deepestAncestor.firstChild;\n firstChildren.length = 1;\n\n while (childIndex < firstChildren.length) {\n var child = firstChildren[childIndex++];\n var targetChild;\n\n while (child) {\n var childID = TVMLMount.getID(child);\n if (childID) {\n // Even if we find the node we're looking for, we finish looping\n // through its siblings to ensure they're cached so that we don't have\n // to revisit this node again. Otherwise, we make n^2 calls to getID\n // when visiting the many children of a single node in order.\n\n if (targetID === childID) {\n targetChild = child;\n } else if (ReactInstanceHandles.isAncestorIDOf(childID, targetID)) {\n // If we find a child whose ID is an ancestor of the given ID,\n // then we can be sure that we only want to search the subtree\n // rooted at this child, so we can throw out the rest of the\n // search state.\n firstChildren.length = childIndex = 0;\n firstChildren.push(child.firstChild);\n }\n\n } else {\n // If this child had no ID, then there's a chance that it was\n // injected automatically by the browser, as when a ``\n // element sprouts an extra `` child as a side effect of\n // `.innerHTML` parsing. Optimistically continue down this\n // branch, but not before examining the other siblings.\n firstChildren.push(child.firstChild);\n }\n\n child = child.nextSibling;\n }\n\n if (targetChild) {\n // Emptying firstChildren/findComponentRootReusableArray is\n // not necessary for correctness, but it helps the GC reclaim\n // any nodes that were left at the end of the search.\n firstChildren.length = 0;\n\n return targetChild;\n }\n }\n\n firstChildren.length = 0;\n\n invariant(\n false,\n 'findComponentRoot(..., %s): Unable to find element. This probably ' +\n 'means the DOM was unexpectedly mutated (e.g., by the browser), ' +\n 'usually due to forgetting a when using tables, nesting tags ' +\n 'like ,

, or , or using non-SVG elements in an ' +\n 'parent. ' +\n 'Try inspecting the child nodes of the element with React ID `%s`.',\n targetID,\n TVMLMount.getID(ancestorNode)\n );\n },\n\n _mountImageIntoNode: function(\n markup,\n container,\n shouldReuseMarkup,\n transaction\n ) {\n invariant(\n container && (\n container.nodeType === ELEMENT_NODE_TYPE ||\n container.nodeType === DOC_NODE_TYPE ||\n container.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE\n ),\n 'mountComponentIntoNode(...): Target container is not valid.'\n );\n\n if (shouldReuseMarkup) {\n var rootElement = getReactRootElementInContainer(container);\n if (ReactMarkupChecksum.canReuseMarkup(markup, rootElement)) {\n return;\n } else {\n var checksum = rootElement.getAttribute(\n ReactMarkupChecksum.CHECKSUM_ATTR_NAME\n );\n rootElement.removeAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME);\n\n var rootMarkup = rootElement.outerHTML;\n rootElement.setAttribute(\n ReactMarkupChecksum.CHECKSUM_ATTR_NAME,\n checksum\n );\n\n var normalizedMarkup = markup;\n if (__DEV__) {\n // because rootMarkup is retrieved from the DOM, various normalizations\n // will have occurred which will not be present in `markup`. Here,\n // insert markup into a

or