``` accept acceptCharset accessKey action allowFullScreen allowTransparency alt <del> async autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked classID className colSpan cols content contentEditable contextMenu controls </del> <ins> async autoComplete autoFocus autoPlay cellPadding cellSpacing charSet challenge checked classID className colSpan cols content contentEditable contextMenu controls </ins> coords crossOrigin data dateTime defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder <del> headers height hidden high href hrefLang htmlFor httpEquiv icon id label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min multiple muted name noValidate open optimum pattern placeholder </del> <ins> headers height hidden high href hrefLang htmlFor httpEquiv icon id keyParams keyType label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min multiple muted name noValidate open optimum pattern placeholder </ins> poster preload radioGroup readOnly rel required role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcSet start step style tabIndex target title type useMap value width wmode


expect(log).toEqual([]); });  it('should pass previous state to shouldComponentUpdate even with getDerivedStateFromProps', () => { const divRef = React.createRef(); class SimpleComponent extends React.Component { constructor(props) { super(props); this.state = { value: props.value, }; } static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.value === prevState.value) { return null; } return {value: nextProps.value}; } shouldComponentUpdate(nextProps, nextState) { return nextState.value !== this.state.value; } render() { return
value: {this.state.value}
; } } const div = document.createElement('div'); ReactDOM.render(<SimpleComponent value="initial" />, div); expect(divRef.current.textContent).toBe('value: initial'); ReactDOM.render(<SimpleComponent value="updated" />, div); expect(divRef.current.textContent).toBe('value: updated'); });  it('should call getSnapshotBeforeUpdate before mutations are committed', () => { const log = [];


} } } <del> this._updateStateFromStaticLifecycle(props); </del> // Read state after cWRP in case it calls setState <del> const state = this._newState || oldState; </del> <ins> let state = this._newState || oldState; if (typeof type.getDerivedStateFromProps === 'function') { const partialState = type.getDerivedStateFromProps.call( null, props, state, ); if (partialState != null) { state = Object.assign({}, state, partialState); } } </ins> let shouldUpdate = true; if (this._forcedUpdate) {


var React = require('React'); var ReactElement = require('ReactElement'); var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter'); <ins> var ReactCompositeComponent = require('ReactCompositeComponent'); var ReactInstanceHandles = require('ReactInstanceHandles'); </ins> var ReactInstanceMap = require('ReactInstanceMap'); var ReactMount = require('ReactMount'); var ReactUpdates = require('ReactUpdates'); var SyntheticEvent = require('SyntheticEvent'); var assign = require('Object.assign'); <ins> var instantiateReactComponent = require('instantiateReactComponent'); </ins> var topLevelTypes = EventConstants.topLevelTypes;


// an external backing store so that we can freeze the whole object. // This can be replaced with a WeakMap once they are implemented in // commonly used development environments. <del> this._store = { validated: false, props: props }; </del> <ins> this._store = { props: props }; // To make comparing ReactElements easier for testing purposes, we make // the validation flag non-enumerable (where possible, which should // include every environment we run tests in), so the test framework // ignores it. try { Object.defineProperty(this._store, 'validated', { configurable: false, enumerable: false, writable: true }); } catch (x) { } this._store.validated = false; </ins> // We're not allowed to set props directly on the object so we early // return and rely on the prototype membrane to forward to the backing


ReactDOMIDOperations.updateInnerHTMLByID( 'testID', <del> {__html: ' testContent'} </del> <ins> ' testContent' </ins> ); expect(


const commitTrees = ((rootToCommitTreeMap.get( rootID, ): any): Array<CommitTree>); if (commitIndex < commitTrees.length) { return commitTrees[commitIndex]; }


return [<div />]; } <ins> function ComponentWithSymbolWarning() { console.warn('this is a symbol', Symbol('foo')); console.error('this is a symbol', Symbol.for('bar')); return null; } </ins> export default function ErrorsAndWarnings() { const [count, setCount] = useState(0); const handleClick = () => setCount(count + 1);


expectTextNode(e.childNodes[1], 'bar'); } }); <ins> itRenders( 'a component returning text node between two text nodes', async render => { const B = () => 'b'; const e = await render(<div>{'a'}<B />{'c'}</div>); if ( render === serverRender || render === clientRenderOnServerString || render === streamRender ) { // In the server render output there's a comment between them. expect(e.childNodes.length).toBe(5); expectTextNode(e.childNodes[0], 'a'); expectTextNode(e.childNodes[2], 'b'); expectTextNode(e.childNodes[4], 'c'); } else { expect(e.childNodes.length).toBe(3); expectTextNode(e.childNodes[0], 'a'); expectTextNode(e.childNodes[1], 'b'); expectTextNode(e.childNodes[2], 'c'); } }, ); itRenders('a tree with sibling host and text nodes', async render => { class X extends React.Component { render() { return [null, [<Y key="1" />], false]; } } function Y() { return [<Z key="1" />, ['c']]; } function Z() { return null; } const e = await render( <div> {[['a'], 'b']} <div> <X key="1" /> d </div> e </div>, ); if ( render === serverRender || render === clientRenderOnServerString || render === streamRender ) { // In the server render output there's comments between text nodes. expect(e.childNodes.length).toBe(5); expectTextNode(e.childNodes[0], 'a'); expectTextNode(e.childNodes[2], 'b'); expect(e.childNodes[3].childNodes.length).toBe(3); expectTextNode(e.childNodes[3].childNodes[0], 'c'); expectTextNode(e.childNodes[3].childNodes[2], 'd'); expectTextNode(e.childNodes[4], 'e'); } else { expect(e.childNodes.length).toBe(4); expectTextNode(e.childNodes[0], 'a'); expectTextNode(e.childNodes[1], 'b'); expect(e.childNodes[2].childNodes.length).toBe(2); expectTextNode(e.childNodes[2].childNodes[0], 'c'); expectTextNode(e.childNodes[2].childNodes[1], 'd'); expectTextNode(e.childNodes[3], 'e'); } }); </ins> }); describe('number children', function() {


var inlineScriptCount = 0; <ins> // This method returns a nicely formated line of code pointing the // exactly location of the error `e`. // The line is limited in size so big lines of code are also shown // in a readable way. // Example: // // ... x', overflow:'scroll'}} id={} onScroll={this.scroll} class=" ... //                                 ^ var createSourceCodeErrorMessage = function(code, e) { var sourceLines = code.split('n'); var erroneousLine = sourceLines[e.lineNumber - 1]; // Removes any leading indenting spaces and gets the number of // chars indenting the `erroneousLine` var indentation = 0; erroneousLine = erroneousLine.replace(/^s+/, function(leadingSpaces) { indentation = leadingSpaces.length; return ''; }); // Defines the number of characters that are going to show // before and after the erroneous code var LIMIT = 30; var errorColumn = e.column - indentation; if (errorColumn > LIMIT) { erroneousLine = '... ' + erroneousLine.slice(errorColumn - LIMIT); errorColumn = 4 + LIMIT; } if (erroneousLine.length - errorColumn > LIMIT) { erroneousLine = erroneousLine.slice(0, errorColumn + LIMIT) + ' ...'; } var message = 'nn' + erroneousLine + 'n'; message += new Array(errorColumn - 1).join(' ') + '^'; return message; }; </ins> var transformCode = function(code, source) { var jsx = docblock.parseAsObject(docblock.extract(code)).jsx; if (jsx) { <del> var transformed = transformReact(code); </del> <ins> try { var transformed = transformReact(code); } catch(e) { e.message += 'n    at '; if (source) { if ('fileName' in e) { // We set `fileName` if it's supported by this error object and // a `source` was provided. // The error will correctly point to `source` in Firefox. e.fileName = source; } e.message += source + ':' + e.lineNumber + ':' + e.column; } else { e.message += location.href; } e.message += createSourceCodeErrorMessage(code, e); throw e; } </ins> var map = transformed.sourceMap.toJSON(); if (source == null) {


} const {operations} = dataForRoot; <ins> if (operations.length <= commitIndex) { throw Error( `getCommitTree(): Invalid commit "${commitIndex}" for root "${rootID}". There are only "${operations.length}" commits.`, ); } </ins> <del> // Commits are generated sequentially and cached. // If this is the very first commit, start with the cached snapshot and apply the first mutation. // Otherwise load (or generate) the previous commit and append a mutation to it. if (commitIndex === 0) { const nodes = new Map(); // Construct the initial tree. recursivelyInitializeTree(rootID, 0, nodes, dataForRoot); </del> <ins> let commitTree: CommitTree = ((null: any): CommitTree); for (let index = commitTrees.length; index <= commitIndex; index++) { // Commits are generated sequentially and cached. // If this is the very first commit, start with the cached snapshot and apply the first mutation. // Otherwise load (or generate) the previous commit and append a mutation to it. if (index === 0) { const nodes = new Map(); </ins> <del> // Mutate the tree if (operations != null && commitIndex < operations.length) { const commitTree = updateTree({nodes, rootID}, operations[commitIndex]); </del> <ins> // Construct the initial tree. recursivelyInitializeTree(rootID, 0, nodes, dataForRoot); </ins> <del> if (__DEBUG__) { __printTree(commitTree); } </del> <ins> // Mutate the tree if (operations != null && index < operations.length) { commitTree = updateTree({nodes, rootID}, operations[index]); </ins> <del> commitTrees.push(commitTree); return commitTree; } } else { const previousCommitTree = getCommitTree({ commitIndex: commitIndex - 1, profilerStore, rootID, }); </del> <ins> if (__DEBUG__) { __printTree(commitTree); } </ins> <del> if (operations != null && commitIndex < operations.length) { const commitTree = updateTree( previousCommitTree, operations[commitIndex], ); </del> <ins> commitTrees.push(commitTree); } } else { const previousCommitTree = commitTrees[index - 1]; commitTree = updateTree(previousCommitTree, operations[index]); </ins> if (__DEBUG__) { __printTree(commitTree); } commitTrees.push(commitTree); <del> return commitTree; </del> } } <del> throw Error( `getCommitTree(): Unable to reconstruct tree for root "${rootID}" and commit "${commitIndex}"`, ); </del> <ins> return commitTree; </ins> } function recursivelyInitializeTree(


 /** * Copyright 2013-2014, 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. * * @emails react-core */ "use strict"; var React; var ReactTestUtils; var mocks; var warn; describe('ReactTestUtils', function() { beforeEach(function() { mocks = require('mocks'); React = require('React'); ReactTestUtils = require('ReactTestUtils'); warn = console.warn; console.warn = mocks.getMockFunction(); }); afterEach(function() { console.warn = warn; }); it('should have shallow rendering', function() { var SomeComponent = React.createClass({ render: function() { return (

 ); } }); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent />); var result = shallowRenderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ ,  ]); }); it('lets you update shallowly rendered components', function() { var SomeComponent = React.createClass({ getInitialState: function() { return {clicked: false}; }, onClick: function() { this.setState({clicked: true}); }, render: function() { var className = this.state.clicked ? 'was-clicked' : ''; if (this.props.aNew === 'prop') { return (  Test link  ); } else { return (

 ); } } }); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent />); var result = shallowRenderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ ,  ]); shallowRenderer.render(<SomeComponent aNew="prop" />); var updatedResult = shallowRenderer.getRenderOutput(); expect(updatedResult.type).toBe('a'); var mockEvent = {}; updatedResult.props.onClick(mockEvent); var updatedResultCausedByClick = shallowRenderer.getRenderOutput(); expect(updatedResultCausedByClick.type).toBe('a'); expect(updatedResultCausedByClick.props.className).toBe('was-clicked'); }); });


_updateDOMChildren: function(lastProps, transaction) { var nextProps = this.props; <del> var lastUsedContent = </del> <ins> var lastContent = </ins> CONTENT_TYPES[typeof lastProps.children] ? lastProps.children : null; <del> var contentToUse = </del> <ins> var nextContent = </ins> CONTENT_TYPES[typeof nextProps.children] ? nextProps.children : null; <ins> var lastHtml = lastProps.dangerouslySetInnerHTML && lastProps.dangerouslySetInnerHTML.__html; var nextHtml = nextProps.dangerouslySetInnerHTML && nextProps.dangerouslySetInnerHTML.__html; </ins> // Note the use of `!=` which checks for null or undefined. <ins> var lastChildren = lastContent != null ? null : lastProps.children; var nextChildren = nextContent != null ? null : nextProps.children; </ins> <del> var lastUsedChildren = lastUsedContent != null ? null : lastProps.children; var childrenToUse = contentToUse != null ? null : nextProps.children; </del> <ins> // If we're switching from children to content/html or vice versa, remove // the old content var lastHasContentOrHtml = lastContent != null || lastHtml != null; var nextHasContentOrHtml = nextContent != null || nextHtml != null; if (lastChildren != null && nextChildren == null) { this.updateChildren(null, transaction); } else if (lastHasContentOrHtml && !nextHasContentOrHtml) { this.updateTextContent(''); } </ins> <del> if (contentToUse != null) { var childrenRemoved = lastUsedChildren != null && childrenToUse == null; if (childrenRemoved) { this.updateChildren(null, transaction); } if (lastUsedContent !== contentToUse) { this.updateTextContent('' + contentToUse); </del> <ins> if (nextContent != null) { if (lastContent !== nextContent) { this.updateTextContent('' + nextContent); </ins> } <del> } else { var contentRemoved = lastUsedContent != null && contentToUse == null; if (contentRemoved) { this.updateTextContent(''); </del> <ins> } else if (nextHtml != null) { if (lastHtml !== nextHtml) { ReactComponent.DOMIDOperations.updateInnerHTMLByID( this._rootNodeID, nextHtml ); </ins> } <del> this.updateChildren(flattenChildren(nextProps.children), transaction); </del> <ins> } else if (nextChildren != null) { this.updateChildren(flattenChildren(nextChildren), transaction); </ins> } },


* @internal */ unmountComponent: function() { <ins> this.unmountChildren(); </ins> ReactEventEmitter.deleteAllListeners(this._rootNodeID); ReactComponent.Mixin.unmountComponent.call(this); <del> this.unmountChildren(); </del> } };


styleUpdates[styleName] = ''; } } <del> } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { // http://jsperf.com/emptying-speed ReactComponent.DOMIDOperations.updateTextContentByID( this._rootNodeID, '' ); </del> } else if (registrationNames[propKey]) { deleteListener(this._rootNodeID, propKey); <del> } else { </del> <ins> } else if ( DOMProperty.isStandardName[propKey] || DOMProperty.isCustomAttribute(propKey)) { </ins> ReactComponent.DOMIDOperations.deletePropertyByID( this._rootNodeID, propKey


case topLevelTypes.topDoubleClick: case topLevelTypes.topMouseDown: case topLevelTypes.topMouseMove: <ins> case topLevelTypes.topMouseOut: case topLevelTypes.topMouseOver: </ins> case topLevelTypes.topMouseUp: EventConstructor = SyntheticMouseEvent; break;


); } <del> // stub element used by act() when flushing effects let actContainerElement = document.createElement('div'); </del> <ins> // a stub element, lazily initialized, used by act() when flushing effects let actContainerElement = null; </ins> /** * Utilities for making it easy to test React components.


html: createFullPageComponent(ReactDOM.html), head: createFullPageComponent(ReactDOM.head), <del> title: createFullPageComponent(ReactDOM.title), </del> body: createFullPageComponent(ReactDOM.body) });


expect(stub.getDOMNode().innerHTML).toEqual(''); });  it("should transition from string content to innerHTML", function() { var stub = ReactTestUtils.renderIntoDocument(
hello
 ); expect(stub.getDOMNode().innerHTML).toEqual('hello'); stub.receiveProps( {dangerouslySetInnerHTML: {__html: 'goodbye'}}, transaction ); expect(stub.getDOMNode().innerHTML).toEqual('goodbye'); }); it("should transition from innerHTML to string content", function() { var stub = ReactTestUtils.renderIntoDocument(
 ); expect(stub.getDOMNode().innerHTML).toEqual('bonjour'); stub.receiveProps({children: 'adieu'}, transaction); expect(stub.getDOMNode().innerHTML).toEqual('adieu'); });  it("should not incur unnecessary DOM mutations", function() { var stub = ReactTestUtils.renderIntoDocument(
);


SimulateNative: {}, act(callback: () => void): Thenable { <ins> if (actContainerElement === null) { // warn if we can't actually create the stub element if (__DEV__) { warningWithoutStack( typeof document !== 'undefined' && document !== null && typeof document.createElement === 'function', 'It looks like you called TestUtils.act(...) in a non-browser environment. ' + "If you're using TestRenderer for your tests, you should call " + 'TestRenderer.act(...) instead of TestUtils.act(...).', ); } // then make it actContainerElement = document.createElement('div'); } const result = ReactDOM.unstable_batchedUpdates(callback); </ins> // note: keep these warning messages in sync with // createReactNoop.js and ReactTestRenderer.js <del> const result = ReactDOM.unstable_batchedUpdates(callback); </del> if (__DEV__) { if (result !== undefined) { let addendum;


reactComponentExpect = require('reactComponentExpect'); React = require('React'); <ins> ReactComponent = require('ReactComponent'); </ins> ReactCurrentOwner = require('ReactCurrentOwner'); ReactDoNotBindDeprecated = require('ReactDoNotBindDeprecated'); ReactPropTypes = require('ReactPropTypes');


cellPadding: null, cellSpacing: null, charSet: MUST_USE_ATTRIBUTE, <ins> challenge: MUST_USE_ATTRIBUTE, </ins> checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, classID: MUST_USE_ATTRIBUTE, // To set className on SVG elements, it's necessary to use .setAttribute;


ReactCurrentOwner.current = this; var inst = this._instance; try { <del> renderedComponent = inst.render(); if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof renderedComponent === 'undefined' && inst.render._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. renderedComponent = null; } } </del> <ins> renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); </ins> } finally { ReactContext.current = previousContext; ReactCurrentOwner.current = null;


urls.unshift('../node_modules/es5-shim/es5-shim.js'); } <del> var cacheBust = '?_=' + Date.now().toString(36); </del> <ins> var cacheBust = '?_=' + (+new Date).toString(36); </ins> for (var urls_index = -1, urls_length = urls.length; ++urls_index < urls_length;) { document.write('<script src="' + urls[urls_index] + cacheBust + '"></script>');


static .grunt _SpecRunner.html <ins> __benchmarks__ </ins> build/ .module-cache *.gem


asap "~2.0.3" prop-types@^15.5.8: <del> version "15.5.8" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" </del> <ins> version "15.5.10" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" </ins> dependencies: fbjs "^0.8.9" <ins> loose-envify "^1.3.1" </ins> prr@~0.0.0: version "0.0.0"


this._updater, ); <del> this._updateStateFromStaticLifecycle(element.props); </del> <ins> if (typeof element.type.getDerivedStateFromProps === 'function') { const partialState = element.type.getDerivedStateFromProps.call( null, element.props, this._instance.state, ); if (partialState != null) { this._instance.state = Object.assign( {}, this._instance.state, partialState, ); } } </ins> if (element.type.hasOwnProperty('contextTypes')) { currentlyValidatingElement = element;


}); <ins> var ShallowMixin = assign({}, ReactCompositeComponentMixin, { /** * Initializes the component, renders markup, and registers event listeners. * * @param {string} rootID DOM ID of the root node. * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction * @param {number} mountDepth number of components in the owner hierarchy * @return {ReactElement} Shallow rendering of the component. * @final * @internal */ mountComponent: function(rootID, transaction, mountDepth) { ReactComponent.Mixin.mountComponent.call( this, rootID, transaction, mountDepth ); var inst = this._instance; // Store a reference from the instance back to the internal representation ReactInstanceMap.set(inst, this); this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING; // No context for shallow-mounted components. inst.props = this._processProps(this._currentElement.props); var initialState = inst.getInitialState ? inst.getInitialState() : null; if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof initialState === 'undefined' && inst.getInitialState._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. initialState = null; } } invariant( typeof initialState === 'object' && !Array.isArray(initialState), '%s.getInitialState(): must return an object or null', inst.constructor.displayName || 'ReactCompositeComponent' ); inst.state = initialState; this._pendingState = null; this._pendingForceUpdate = false; if (inst.componentWillMount) { inst.componentWillMount(); // When mounting, calls to `setState` by `componentWillMount` will set // `this._pendingState` without triggering a re-render. if (this._pendingState) { inst.state = this._pendingState; this._pendingState = null; } } // No recursive call to instantiateReactComponent for shallow rendering. this._renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); // Done with mounting, `setState` will now trigger UI changes. this._compositeLifeCycleState = null; // No call to this._renderedComponent.mountComponent for shallow // rendering. if (inst.componentDidMount) { transaction.getReactMountReady().enqueue(inst.componentDidMount, inst); } return this._renderedComponent; }, /** * Call the component's `render` method and update the DOM accordingly. * * @param {ReactReconcileTransaction} transaction * @internal */ _updateRenderedComponent: function(transaction) { var prevComponentInstance = this._renderedComponent; var prevRenderedElement = prevComponentInstance._currentElement; // Use the without-owner-or-context variant of _rVC below: var nextRenderedElement = this._renderValidatedComponentWithoutOwnerOrContext(); if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) { prevComponentInstance.receiveComponent( nextRenderedElement, transaction ); } else { // These two IDs are actually the same! But nothing should rely on that. var thisID = this._rootNodeID; var prevComponentID = prevComponentInstance._rootNodeID; // Don't unmount previous instance since it was never mounted, due to // shallow render. //prevComponentInstance.unmountComponent(); this._renderedComponent = nextRenderedElement; // ^ no instantiateReactComponent // // no recursive mountComponent return nextRenderedElement; } } }); </ins> var ReactCompositeComponent = { LifeCycle: CompositeLifeCycle, <del> Mixin: ReactCompositeComponentMixin </del> <ins> Mixin: ReactCompositeComponentMixin, ShallowMixin: ShallowMixin </ins> };


// For quickly matching children type, to test if can be treated as content. var CONTENT_TYPES = {'string': true, 'number': true}; <del> var DANGEROUSLY_SET_INNER_HTML = keyOf({dangerouslySetInnerHTML: null}); </del> var STYLE = keyOf({style: null}); /**


// Intentionally do not call componentDidUpdate() // because DOM refs are not available. } <del> _updateStateFromStaticLifecycle(props: Object) { if (this._element === null) { return; } const {type} = this._element; if (typeof type.getDerivedStateFromProps === 'function') { const oldState = this._newState || this._instance.state; const partialState = type.getDerivedStateFromProps.call( null, props, oldState, ); if (partialState != null) { const newState = Object.assign({}, oldState, partialState); this._instance.state = this._newState = newState; } } } </del> } let currentlyValidatingElement = null;


String type ``` <ins> > Note: > > As of v0.12, returning `false` from an event handler will no longer stop event propagation. Instead, `e.stopPropagation()` or `e.preventDefault()` should be triggered manually, as appropriate. </ins> ## Supported Events


expect(console.warn.calls.length).toBe(0); }); <ins> it('should support injected wrapper components as DOM components', function() { var injectedDOMComponents = [ 'button', 'form', 'iframe', 'img', 'input', 'option', 'select', 'textarea', 'html', 'head', 'body' ]; injectedDOMComponents.forEach(function(type) { var component = ReactTestUtils.renderIntoDocument( React.createElement(type) ); expect(component.tagName).toBe(type.toUpperCase()); expect(ReactTestUtils.isDOMComponent(component)).toBe(true); }); }); </ins> });


Next → {% endif %}


*/ executeDispatch: function(event, listener, domID) { var returnValue = EventPluginUtils.executeDispatch(event, listener, domID); <ins> warning( typeof returnValue !== 'boolean', 'Returning `false` from an event handler is deprecated and will be ' + 'ignored in a future release. Instead, manually call ' + 'e.stopPropagation() or e.preventDefault(), as appropriate.' ); </ins> if (returnValue === false) { event.stopPropagation(); event.preventDefault();


ON_CLICK_KEY, recordID.bind(null, getID(GRANDPARENT)) ); <ins> spyOn(console, 'warn'); </ins> ReactTestUtils.Simulate.click(CHILD); expect(idCallOrder.length).toBe(1); expect(idCallOrder[0]).toBe(getID(CHILD)); <ins> expect(console.warn.calls.length).toEqual(1); expect(console.warn.calls[0].args[0]).toBe( 'Warning: Returning `false` from an event handler is deprecated and ' + 'will be ignored in a future release. Instead, manually call ' + 'e.stopPropagation() or e.preventDefault(), as appropriate.' ); </ins> }); /**


var MorphingComponent; var ChildUpdates; var React; <ins> var ReactComponent; </ins> var ReactCurrentOwner; var ReactPropTypes; var ReactTestUtils;


setRefreshHandler: __DEV__ ? setRefreshHandler : null, // Enables DevTools to append owner stacks to error messages in DEV mode. getCurrentFiber: __DEV__ ? getCurrentFiberForDevTools : null, <ins> // Enables DevTools to detect reconciler version rather than renderer version // which may not match for third party renderers. reconcilerVersion: ReactVersion, </ins> }); }


frame.debugElementStack = []; } this.stack.push(frame); <ins> this.previousWasTextNode = false; </ins> return out; } }


/** * @private */ <ins> _renderValidatedComponentWithoutOwnerOrContext: function() { var inst = this._instance; var renderedComponent = inst.render(); if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof renderedComponent === 'undefined' && inst.render._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. renderedComponent = null; } } return renderedComponent; }, /** * @private */ </ins> _renderValidatedComponent: ReactPerf.measure( 'ReactCompositeComponent', '_renderValidatedComponent',


httpEquiv: null, icon: null, id: MUST_USE_PROPERTY, <ins> keyParams: MUST_USE_ATTRIBUTE, keyType: MUST_USE_ATTRIBUTE, </ins> label: null, lang: null, list: MUST_USE_ATTRIBUTE,


findHostInstancesForRefresh, } from './ReactFiberHotReloading.old'; import {markRenderScheduled} from './SchedulingProfiler'; <ins> import ReactVersion from 'shared/ReactVersion'; </ins> export {registerMutableSourceForHydration} from './ReactMutableSource.old'; export {createPortal} from './ReactPortal'; export {


}; }, <ins> createRenderer: function() { return new ReactShallowRenderer(); }, </ins> Simulate: null, SimulateNative: {} }; /** <ins> * @class ReactShallowRenderer */ var ReactShallowRenderer = function() { this._instance = null; }; ReactShallowRenderer.prototype.getRenderOutput = function() { return (this._instance && this._instance._renderedComponent) || null; }; var ShallowComponentWrapper = function(inst) { this._instance = inst; } assign( ShallowComponentWrapper.prototype, ReactCompositeComponent.ShallowMixin ); ReactShallowRenderer.prototype.render = function(element) { var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(); this._render(element, transaction); ReactUpdates.ReactReconcileTransaction.release(transaction); }; ReactShallowRenderer.prototype._render = function(element, transaction) { if (!this._instance) { var rootID = ReactInstanceHandles.createReactRootID(); var instance = new ShallowComponentWrapper(new element.type(element.props)); instance.construct(element); instance.mountComponent(rootID, transaction, 0); this._instance = instance; } else { this._instance.receiveComponent(element, transaction); } }; /** </ins> * Exports: * * - `ReactTestUtils.Simulate.click(Element/ReactDOMComponent)`


if (consoleSettingsRef.appendComponentStack) { const lastArg = args.length > 0 ? args[args.length - 1] : null; const alreadyHasComponentStack = <del> lastArg !== null && isStringComponentStack(lastArg); </del> <ins> typeof lastArg === 'string' && isStringComponentStack(lastArg); </ins> // If we are ever called with a string that already has a component stack, // e.g. a React error/warning, don't append a second stack.


"scriptPreprocessor": "scripts/jest/preprocessor.js", "setupEnvScriptFile": "scripts/jest/environment.js", "setupTestFrameworkScriptFile": "scripts/jest/test-framework-setup.js", <ins> "testRunner": "jasmine1", </ins> "testFileExtensions": [ "coffee", "js",


HTML to JSX Compiler


}); describe('act', () => { <del> it('works', () => { </del> <ins> it('can use .act() to batch updates and effects', () => { </ins> function App(props) { React.useEffect(() => { props.callback();


Get Started Download React v{{site.react_version}}   Get Started Download React v{{site.react_version}}


}); }); <ins> it('should call componentWillUnmount before unmounting', function() { var container = document.createElement('div'); var innerUnmounted = false; spyOn(ReactMount, 'purgeID').andCallThrough(); var Component = React.createClass({ render: function() { return <div> <Inner /> </div>; } }); var Inner = React.createClass({ componentWillUnmount: function() { // It's important that ReactMount.purgeID be called after any component // lifecycle methods, because a componentWillMount implementation is // likely call this.getDOMNode(), which will repopulate the node cache // after it's been cleared, causing a memory leak. expect(ReactMount.purgeID.callCount).toBe(0); innerUnmounted = true; }, render: function() { return <div />; } }); React.renderComponent(<Component />, container); React.unmountComponentAtNode(container); expect(innerUnmounted).toBe(true); // <Component />, <Inner />, and both <div /> elements each call // unmountIDFromEnvironment which calls purgeID, for a total of 4. expect(ReactMount.purgeID.callCount).toBe(4); }); </ins> it('should detect valid CompositeComponent classes', function() { var Component = React.createClass({ render: function() {


jsxScripts.push(scripts.item(i)); } } console.warn("You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx"); jsxScripts.forEach(function(script) {


function getJSReport(browser){ return browser <del> .waitForCondition("typeof window.jasmine != 'undefined'", 5e3) </del> <ins> .waitFor(wd.asserters.jsCondition("typeof window.jasmine != 'undefined'"), 5e3, 50) </ins> .fail(function(error){ throw Error("The test page didn't load properly. " + error); }) <del> .waitForCondition("typeof window.jasmine.getJSReport != 'undefined'", 10e3) .waitForCondition("window.postDataToURL.running <= 0", 30e3) </del> <ins> .waitFor(wd.asserters.jsCondition("typeof window.jasmine.getJSReport != 'undefined'"), 60e3, 100) .waitFor(wd.asserters.jsCondition("window.postDataToURL.running <= 0"), 30e3, 500) </ins> .eval("jasmine.getJSReport().passed"); }


var elementFactory = ReactElement.createFactory(tag); var FullPageComponent = ReactClass.createClass({ <ins> tagName: tag.toUpperCase(), </ins> displayName: 'ReactFullPageComponent' + tag, componentWillUnmount: function() {


expect(idCallOrder[0]).toBe(getID(CHILD)); }); <del> it('should stopPropagation if false is returned', function() { </del> <ins> it('should stopPropagation if false is returned, but warn', function() { </ins> ReactBrowserEventEmitter.putListener( getID(CHILD), ON_CLICK_KEY,


<ReallyLongErrorMessageThatWillCauseTextToBeTruncated /> <DuplicateWarningsAndErrors /> <MultipleWarningsAndErrors /> <ins> <ComponentWithSymbolWarning /> </ins> </Fragment> ); }


if (!styles.hasOwnProperty(styleName)) { continue; } <ins> var styleValue = styles[styleName]; </ins> if (__DEV__) { <del> if (styleName.indexOf('-') > -1) { warnHyphenatedStyleName(styleName); } else if (badVendoredStyleNamePattern.test(styleName)) { warnBadVendoredStyleName(styleName); } </del> <ins> warnValidStyle(styleName, styleValue); </ins> } <del> var styleValue = styles[styleName]; </del> if (styleValue != null) { serialized += processStyleName(styleName) + ':'; serialized += dangerousStyleValue(styleName, styleValue) + ';';


} `, }, <ins> { code: normalizeIndent` export const notAComponent = () => { return () => { useState(); } } `, // TODO: this should error but doesn't. // errors: [functionError('use', 'notAComponent')], }, { code: normalizeIndent` export default () => { if (isVal) { useState(0); } } `, // TODO: this should error but doesn't. // errors: [genericError('useState')], }, { code: normalizeIndent` function notAComponent() { return new Promise.then(() => { useState(); }); } `, // TODO: this should error but doesn't. // errors: [genericError('useState')], }, </ins> ], invalid: [ {


findHostInstancesForRefresh, } from './ReactFiberHotReloading.new'; import {markRenderScheduled} from './SchedulingProfiler'; <ins> import ReactVersion from 'shared/ReactVersion'; </ins> export {registerMutableSourceForHydration} from './ReactMutableSource.new'; export {createPortal} from './ReactPortal'; export {


onMouseMove onMouseOut onMouseOver onMouseUp ``` <del> Properties: </del> <ins> Properties: </ins> ```javascript boolean altKey


} var frame = this.stack[this.stack.length - 1]; if (frame.childIndex >= frame.children.length) { <del> out += frame.footer; this.previousWasTextNode = false; </del> <ins> var footer = frame.footer; out += footer; if (footer !== '') { this.previousWasTextNode = false; } </ins> this.stack.pop(); if (frame.tag === 'select') { this.currentSelectValue = null;


this._instance.context = context; this._instance.props = props; this._instance.state = state; <ins> this._newState = null; </ins> if (shouldUpdate) { this._rendered = this._instance.render();


// 'msTransform' is correct, but the other prefixes should be capitalized var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/; <ins> // style values shouldn't contain a semicolon var badStyleValueWithSemicolonPattern = /;s*$/; </ins> var warnedStyleNames = {}; <ins> var warnedStyleValues = {}; </ins> var warnHyphenatedStyleName = function(name) { if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {


through2 "^2.0.0" fbjs@^0.8.9: <del> version "0.8.12" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" </del> <ins> version "0.8.14" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c" </ins> dependencies: core-js "^1.0.0" isomorphic-fetch "^2.1.1"


it("should empty element when removing innerHTML", function() { var stub = ReactTestUtils.renderIntoDocument(

  ); expect(stub.getDOMNode().innerHTML).toEqual(':)');


expect(result).toEqual(
value:1
); });  it('should pass previous state to shouldComponentUpdate even with getDerivedStateFromProps', () => { class SimpleComponent extends React.Component { constructor(props) { super(props); this.state = { value: props.value, }; } static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.value === prevState.value) { return null; } return {value: nextProps.value}; } shouldComponentUpdate(nextProps, nextState) { return nextState.value !== this.state.value; } render() { return
{`value:${this.state.value}`}
; } } const shallowRenderer = createRenderer(); const initialResult = shallowRenderer.render( <SimpleComponent value="initial" />, ); expect(initialResult).toEqual(
value:initial
); const updatedResult = shallowRenderer.render( <SimpleComponent value="updated" />, ); expect(updatedResult).toEqual(
value:updated
); });  it('can setState with an updater function', () => { let instance;


/** * Same as the default implementation, except cancels the event when return <del> * value is false. </del> <ins> * value is false. This behavior will be disabled in a future release. </ins> * * @param {object} Event to be dispatched. * @param {function} Application-level callback.


Next → {% endif %}


name.charAt(0).toUpperCase() + name.slice(1) + '?' ); }; <ins> var warnStyleValueWithSemicolon = function(name, value) { if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) { return; } warnedStyleValues[value] = true; warning( false, 'Style property values shouldn't contain a semicolon. ' + 'Try "%s: %s" instead.', name, value.replace(badStyleValueWithSemicolonPattern, '') ); }; /** * @param {string} name * @param {*} value */ var warnValidStyle = function(name, value) { if (name.indexOf('-') > -1) { warnHyphenatedStyleName(name); } else if (badVendoredStyleNamePattern.test(name)) { warnBadVendoredStyleName(name); } else if (badStyleValueWithSemicolonPattern.test(value)) { warnStyleValueWithSemicolon(name, value); } }; </ins> } /**


expect(called).toBe(true); }); <ins> it('warns and throws if you use TestUtils.act instead of TestRenderer.act in node', () => { // we warn when you try to load 2 renderers in the same 'scope' // so as suggested, we call resetModules() to carry on with the test jest.resetModules(); const {act} = require('react-dom/test-utils'); expect(() => { expect(() => act(() => {})).toThrow('document is not defined'); }).toWarnDev( [ 'It looks like you called TestUtils.act(...) in a non-browser environment', ], {withoutStack: 1}, ); }); </ins> }); });


<ins> ## 4.0.0 * **New Violations:** Consider `PascalCase.useFoo()` calls as Hooks. ([@cyan33](https://github.com/cyan33) in [#18722](https://github.com/facebook/react/pull/18722)) * **New Violations:** Check callback body when it's not written inline. ([@gaearon](https://github.com/gaearon) in [#18435](https://github.com/facebook/react/pull/18435)) * Add a way to enable the dangerous autofix. ([@gaearon](https://github.com/gaearon) in [#18437](https://github.com/facebook/react/pull/18437)) * Offer a more sensible suggestion when encountering an assignment. ([@Zzzen](https://github.com/Zzzen) in [#16784](https://github.com/facebook/react/pull/16784)) * Consider TypeScript casts of `useRef` as constant. ([@sophiebits](https://github.com/sophiebits) in [#18496](https://github.com/facebook/react/pull/18496)) * Add documentation. ([@ghmcadams](https://github.com/ghmcadams) in [#16607](https://github.com/facebook/react/pull/16607)) ## 3.0.0 * **New Violations:** Forbid calling Hooks from classes. ([@ianobermiller](https://github.com/ianobermiller) in [#18341](https://github.com/facebook/react/pull/18341)) * Add a recommended config. ([@SimenB](https://github.com/SimenB) in [#14762](https://github.com/facebook/react/pull/14762)) ## 2.5.0 * Fix a misleading error message in loops. ([@M-Izadmehr](https://github.com/M-Izadmehr) in [#16853](https://github.com/facebook/react/pull/16853)) ## 2.4.0 * **New Violations:** Run checks for functions passed to `forwardRef`. ([@dprgarner](https://github.com/dprgarner) in [#17255](https://github.com/facebook/react/pull/17255)) * **New Violations:** Check for ref usage in any Hook containing the word `Effect`. ([@gaearon](https://github.com/gaearon) in [#17663](https://github.com/facebook/react/pull/17663)) * Disable dangerous autofix and use ESLint Suggestions API instead. ([@wdoug](https://github.com/wdoug) in [#17385](https://github.com/facebook/react/pull/17385)) ## 2.0.0 * **New Violations:** Forbid calling Hooks at the top level. ([@gaearon](https://github.com/gaearon) in [#16455](https://github.com/facebook/react/pull/16455)) * Fix a crash when referencing arguments in arrow functions. ([@hristo-kanchev](https://github.com/hristo-kanchev) in [#16356](https://github.com/facebook/react/pull/16356)) ## 1.x The 1.x releases aren’t noted in this changelog, but you can find them in the [commit history](https://github.com/facebook/react/commits/master/packages/eslint-plugin-react-hooks). </ins>


}); }); <ins> describe('comparing jsx vs .createFactory() vs .createElement()', function() { var Child, mocks; beforeEach(function() { require('mock-modules').dumpCache(); mocks = require('mocks'); React = require('React'); ReactDOM = require('ReactDOM'); ReactTestUtils = require('ReactTestUtils'); var metaData = mocks.getMetadata(React.createClass({ render: function() { return React.createElement('div'); }, })); Child = mocks.generateFromMetadata(metaData); }); describe('when using jsx only', function() { var Parent, instance; beforeEach(function() { Parent = React.createClass({ render: function() { return ( <div> <Child ref="child" foo="foo value">children value</Child> </div> ); }, }); instance = ReactTestUtils.renderIntoDocument(<Parent/>); }); it('should scry children but cannot', function() { var children = ReactTestUtils.scryRenderedComponentsWithType(instance, Child); expect(children.length).toBe(1); }); it('does not maintain refs', function() { expect(instance.refs.child).not.toBeUndefined(); }); it('can capture Child instantiation calls', function() { expect(Child.mock.calls[0][0]).toEqual({ foo: 'foo value', children: 'children value' }); }); }); describe('when using parent that uses .createFactory()', function() { var factory, instance; beforeEach(function() { var childFactory = React.createFactory(Child); var Parent = React.createClass({ render: function() { return React.DOM.div({}, childFactory({ ref: 'child', foo: 'foo value' }, 'children value')); }, }); factory = React.createFactory(Parent); instance = ReactTestUtils.renderIntoDocument(factory()); }); it('can properly scry children', function() { var children = ReactTestUtils.scryRenderedComponentsWithType(instance, Child); expect(children.length).toBe(1); }); it('does not maintain refs', function() { expect(instance.refs.child).not.toBeUndefined(); }); it('can capture Child instantiation calls', function() { expect(Child.mock.calls[0][0]).toEqual({ foo: 'foo value', children: 'children value' }); }); }); describe('when using parent that uses .createElement()', function() { var factory, instance; beforeEach(function() { var Parent = React.createClass({ render: function() { return React.DOM.div({}, React.createElement(Child, { ref: 'child', foo: 'foo value' }, 'children value')); }, }); factory = React.createFactory(Parent); instance = ReactTestUtils.renderIntoDocument(factory()); }); it('should scry children but cannot', function() { var children = ReactTestUtils.scryRenderedComponentsWithType(instance, Child); expect(children.length).toBe(1); }); it('does not maintain refs', function() { expect(instance.refs.child).not.toBeUndefined(); }); it('can capture Child instantiation calls', function() { expect(Child.mock.calls[0][0]).toEqual({ foo: 'foo value', children: 'children value' }); }); }); }); </ins>


var invariant = require('invariant'); var keyOf = require('keyOf'); <ins> var warning = require('warning'); </ins> var topLevelTypes = EventConstants.topLevelTypes;


> lightweight description of what the DOM should look like. We call this process **reconciliation**. Check out <del> [this jsFiddle](http://jsfiddle.net/fv6RD/3/) to see an example of </del> <ins> [this jsFiddle](http://jsfiddle.net/2h6th4ju/) to see an example of </ins> reconciliation in action. Because this re-render is so fast (around 1ms for TodoMVC), the developer


this._defaultProps = null; <del> ReactComponent.Mixin.unmountComponent.call(this); </del> this._renderedComponent.unmountComponent(); this._renderedComponent = null; <ins> ReactComponent.Mixin.unmountComponent.call(this); </ins> if (this.refs) { this.refs = null; }


* **Computed data:** Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within `render()`. For example, if you have an array of list items in state and you want to render the count as a string, simply render `this.state.listItems.length + ' list items'` in your `render()` method rather than storing it on state. * **React components:** Build them in `render()` based on underlying props and state. <del> * **Duplicated data from props:** Try to use props as the source of truth where possible. Because props can change over time, it's appropriate to store props in state to be able to know its previous values. </del> <ins> * **Duplicated data from props:** Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know it's previous values, because props can change over time. </ins>


``` onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave <del> onMouseMove onMouseUp </del> <ins> onMouseMove onMouseOut onMouseOver onMouseUp </ins> ``` Properties:


'n    in Child (at **)n    in Intermediate (at **)n    in Parent (at **)', ); }); <ins> it('should correctly log Symbols', () => { const Component = ({children}) => { fakeConsole.warn('Symbol:', Symbol('')); return null; }; act(() => ReactDOM.render(<Component />, document.createElement('div'))); expect(mockWarn).toHaveBeenCalledTimes(1); expect(mockWarn.mock.calls[0][0]).toBe('Symbol:'); }); </ins> });


// Relies on `updateStylesByID` not mutating `styleUpdates`. styleUpdates = nextProp; } <del> } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { var lastHtml = lastProp && lastProp.__html; var nextHtml = nextProp && nextProp.__html; if (lastHtml !== nextHtml) { ReactComponent.DOMIDOperations.updateInnerHTMLByID( this._rootNodeID, nextProp ); } </del> } else if (registrationNames[propKey]) { putListener(this._rootNodeID, propKey, nextProp); } else if (


runScripts = function() { var scripts = document.getElementsByTagName('script'); // Array.prototype.slice cannot be used on NodeList on IE8 var jsxScripts = []; for (var i = 0; i < scripts.length; i++) {


For the remainder of this tutorial, we'll be writing our JavaScript code in this script tag. <ins> > Note: > > We included jQuery here because we want to simplify the code of our future ajax calls, but it's **NOT** mandatory for React to work. </ins> ### Your first component React is all about modular, composable components. For our comment box example, we'll have the following component structure:


}, /** <del> * Updates a DOM node's innerHTML set by `props.dangerouslySetInnerHTML`. </del> <ins> * Updates a DOM node's innerHTML. </ins> * * @param {string} id ID of the node to update. <del> * @param {object} html An HTML object with the `__html` property. </del> <ins> * @param {string} html An HTML string. </ins> * @internal */ updateInnerHTMLByID: function(id, html) { var node = ReactMount.getNode(id); // HACK: IE8- normalize whitespace in innerHTML, removing leading spaces. // @see quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html <del> node.innerHTML = (html && html.__html || '').replace(/^ /g, ' '); </del> <ins> node.innerHTML = html.replace(LEADING_SPACE, ' '); </ins> }, /**


'use strict'; <ins> var path = require("path"); </ins> var grunt = require("grunt"); var expand = grunt.file.expand; var spawn = grunt.util.spawn;


continue; } if (__DEV__) { <del> if (styleName.indexOf('-') > -1) { warnHyphenatedStyleName(styleName); } else if (badVendoredStyleNamePattern.test(styleName)) { warnBadVendoredStyleName(styleName); } </del> <ins> warnValidStyle(styleName, styles[styleName]); </ins> } var styleValue = dangerousStyleValue(styleName, styles[styleName]); if (styleName === 'float') {


topKeyUp:       eventTypes.keyUp, topMouseDown:   eventTypes.mouseDown, topMouseMove:   eventTypes.mouseMove, <ins> topMouseOut:    eventTypes.mouseOut, topMouseOver:   eventTypes.mouseOver, </ins> topMouseUp:     eventTypes.mouseUp, topPaste:       eventTypes.paste, topScroll:      eventTypes.scroll,


captured: keyOf({onMouseMoveCapture: true}) } }, <ins> mouseOut: { phasedRegistrationNames: { bubbled: keyOf({onMouseOut: true}), captured: keyOf({onMouseOutCapture: true}) } }, mouseOver: { phasedRegistrationNames: { bubbled: keyOf({onMouseOver: true}), captured: keyOf({onMouseOverCapture: true}) } }, </ins> mouseUp: { phasedRegistrationNames: { bubbled: keyOf({onMouseUp: true}),


*/ var textContentAccessor = getTextContentAccessor() || 'NA'; <ins> var LEADING_SPACE = /^ /; </ins> /** * Operations used to process updates to DOM nodes. This is made injectable via * `ReactComponent.DOMIDOperations`.


args.push("--config" /* from stdin */); var child = spawn({ <del> cmd: "bin/jsx-internal", args: args </del> <ins> cmd: "node", args: [path.join("bin", "jsx-internal")].concat(args) </ins> }, function(error, result, code) { if (error) { grunt.log.error(error);


expect(console.warn.argsForCall[1][0]).toContain('WebkitTransform'); }); <ins> it('should warn about style having a trailing semicolon', function() { spyOn(console, 'warn'); CSSPropertyOperations.createMarkupForStyles({ fontFamily: 'Helvetica, arial', backgroundImage: 'url(foo;bar)', backgroundColor: 'blue;', color: 'red;   ' }); expect(console.warn.callCount).toBe(2); expect(console.warn.argsForCall[0][0]).toContain('Try "backgroundColor: blue" instead'); expect(console.warn.argsForCall[1][0]).toContain('Try "color: red" instead'); }); </ins> });