jiebi/CodeConvo huggingface dataset:
Change:
This logs both and : This seems weird to me and inconsistent with the behavior for non-static functions. Can we change this to give an error too?

Discussion:
continue; } <ins> var isReserved = name in RESERVED_SPEC_KEYS; invariant( !isReserved, 'ReactCompositeComponent: You are attempting to define a reserved ' + 'property, `%s`, that shouldn't be on the "statics" key. Define it ' + 'as an instance property instead; it will still be accessible on the ' + 'constructor.', name ); </ins> var isInherited = name in Constructor; <del> var result = property; if (isInherited) { var existingProperty = Constructor[name]; var existingType = typeof existingProperty; var propertyType = typeof property; invariant( existingType === 'function' && propertyType === 'function', 'ReactCompositeComponent: You are attempting to define ' + '`%s` on your component more than once, but that is only supported ' + 'for functions, which are chained together. This conflict may be ' + 'due to a mixin.', name ); result = createChainedFunction(existingProperty, property); } Constructor[name] = result; </del> <ins> invariant( !isInherited, 'ReactCompositeComponent: You are attempting to define ' + '`%s` on your component more than once. This conflict may be ' + 'due to a mixin.', name ); Constructor[name] = property; </ins> } }

expect(Component.pqr()).toBe(Component.type); }); <ins> it('should throw if a reserved property is in statics', function() { expect(function() { React.createClass({ statics: { getDefaultProps: function() { return { foo: 0 }; } }, render: function() { return <span />; } }); }).toThrow( 'Invariant Violation: ReactCompositeComponent: You are attempting to ' + 'define a reserved property, `getDefaultProps`, that shouldn't be on ' + 'the "statics" key. Define it as an instance property instead; it ' + 'will still be accessible on the constructor.' ); }); </ins> it('should support statics in mixins', function() { var Mixin = { statics: {

}); }).toThrow( 'Invariant Violation: ReactCompositeComponent: You are attempting to ' + <del> 'define `abc` on your component more than once, but that is only ' + 'supported for functions, which are chained together. This conflict ' + 'may be due to a mixin.' </del> <ins> 'define `abc` on your component more than once. This conflict may be ' + 'due to a mixin.' ); }); it("should throw if mixins override functions in statics", function() { expect(function() { var Mixin = { statics: { abc: function() { console.log('foo'); } } }; React.createClass({ mixins: [Mixin], statics: { abc: function() { console.log('bar'); } }, render: function() { return <span />; } }); }).toThrow( 'Invariant Violation: ReactCompositeComponent: You are attempting to ' + 'define `abc` on your component more than once. This conflict may be ' + 'due to a mixin.' </ins> ); });
Change:
We currently support this, but it makes code less understandable and we'd like to stop supporting it and encourage people to use either e.preventDefault() or e.stopPropagation() as appropriate.
:+1: And then free up the event handler's return value for something else.
you mean? :)
Maybe =) Otherwise we can always use it to indicate something in a potential future event system.

Discussion:
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

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

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,

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 invariant = require('invariant'); var keyOf = require('keyOf'); <ins> var warning = require('warning'); </ins> var topLevelTypes = EventConstants.topLevelTypes;

/** * 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.

*/ 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();
Change:
In 0.11, the code assigned implicit keys to both children. In 0.12, it gives the error and renders only "foo", because the key is cast to a string in ReactElement before it gets checked against null in traverseAllChildren: I guess it's okay if this is intentional but it broke a part of KA in the upgrade. (cc
hm. Yea, this was intentional to ensure more stable types through out the system. I don't think null should be treated as a valid "non-value" to align it with defaultProps, default arguments and default values in destructuring. The intention of "null" is to symbolize a missing object. However, this can be of any type. It's weird that is coerced into . It should be left as . For refs, we expect them to become objects so it is valid to have there to represent a missing value. We have a two options: 1) Allow any value to be coerced to strings. 2) Throw on non-string values. 3) Don't coerce to string and start using maps as keys. E.g. Dates would become by reference instead of by value. would be treated as a key and would still be duplicate.
Maybe we can support meaning no key for a 0.12 with a warning, then drop support in 0.13? Just trying to avoid breaking things (that are impossible to grep for) without a warning. (I have no idea if we have other places in our code that do this by accident…)
They don't in prod though, right? I thought we had a fallback for duplicate values that would be essentially the same?
No, that code previously outputted and outputs just with 0.12. We ignore all children after the first with a given key.
oh. fine, warning for one version and then swap behavior. Want to send a PR?
Will do.

Discussion:
if (config != null) { ref = config.ref === undefined ? null : config.ref; <del> key = config.key === undefined ? null : '' + config.key; </del> <ins> if (__DEV__) { warning( config.key !== null, 'createElement(...): Encountered component with a `key` of null. In ' + 'a future version, this will be treated as equivalent to the string ' + ''null'; instead, provide an explicit key or use undefined.' ); } // TODO: Change this back to `config.key === undefined` key = config.key == null ? null : '' + config.key; </ins> // Remaining properties are added to a new props object for (propName in config) { if (config.hasOwnProperty(propName) &&

expect(element.props).toEqual({foo:'56'}); }); <ins> it('treats a null key as omitted but warns', function() { spyOn(console, 'warn'); var element = React.createFactory(ComponentFactory)({ key: null, foo: '56' }); expect(element.type).toBe(ComponentClass); expect(element.key).toBe(null);  // as opposed to string 'null' expect(element.ref).toBe(null); expect(element.props).toEqual({foo:'56'}); expect(console.warn.argsForCall.length).toBe(1); expect(console.warn.argsForCall[0][0]).toContain( 'will be treated as equivalent to the string 'null'' ); }); </ins> it('preserves the context on the element', function() { var Component = React.createFactory(ComponentFactory); var element;
Change:
Docs here: And those ones taged as HTML5 are not in the list of supported tags:
, are in there. is handled at run time. The others are missing.
It seems autoFocus is not supported on server side rendering
The property should add the attribute to the html input element too. This is especially useful if you decide to do server-side rendering only. There shouldn’t be a conflict with the current JS code that handles auto focus on unsupported browsers.

Discussion:
draggable: null, encType: null, form: MUST_USE_ATTRIBUTE, <ins> formAction: MUST_USE_ATTRIBUTE, formEncType: MUST_USE_ATTRIBUTE, formMethod: MUST_USE_ATTRIBUTE, </ins> formNoValidate: HAS_BOOLEAN_VALUE, <ins> formTarget: MUST_USE_ATTRIBUTE, </ins> frameBorder: MUST_USE_ATTRIBUTE, headers: null, height: MUST_USE_ATTRIBUTE,
Change:
When attempting to use a react class with a lowercase ClassName, the transformer is not able to display line on which the error occurred. It turns out that the event variable passed to the to function does not contain an attribute called lineNumber. An error is thrown that states: Uncaught TypeError: Cannot read property 'replace' of undefined The actual error has only the properties and . Error: Lower case component names (myClass) are no longer supported in JSX: See at
What environment/browser are you in?
I am running Yosemite and in Chrome. Also using the jsxtransformer and react provided by the CDN. On Tuesday, November 25, 2014, Paul O’Shannessy wrote: Cooper Union EE' 14

Discussion:
*/ function createSourceCodeErrorMessage(code, e) { var sourceLines = code.split('n'); <ins> // e.lineNumber is non-standard so we can't depend on its availability. If // we're in a browser where it isn't supported, don't even bother trying to // format anything. We may also hit a case where the line number is reported // incorrectly and is outside the bounds of the actual code. Handle that too. if (!e.lineNumber || e.lineNumber > sourceLines.length) { return ''; } </ins> var erroneousLine = sourceLines[e.lineNumber - 1]; // Removes any leading indenting spaces and gets the number of

// The error will correctly point to `url` in Firefox. e.fileName = url; } <del> e.message += url + ':' + e.lineNumber + ':' + e.column; </del> <ins> e.message += url + ':' + e.lineNumber + ':' + e.columnNumber; </ins> } else { e.message += location.href; }
Change:
Hi. In the examples included in the Getting started kit from the version of react defined in in the "basic-commonjs" example is set to 0.10.0. In order for the example to work as expected it should be 0.12.0 Also using Browserify and Reactify to compile fails because of a missing jsx header in I have not tested this in other examples

Discussion:
"description": "Basic example of using React with CommonJS", "main": "index.js", "devDependencies": { <del> "envify": "~1.2.1", "react": "~0.10.0", "reactify": "~0.13.1", "browserify": "~3.44.2" </del> <ins> "browserify": "^6.3.3", "envify": "^3.2.0", "react": "^0.12.0", "reactify": "^0.17.1" </ins> }, "scripts": { "build": "browserify --debug --transform reactify index.js > bundle.js"
Change:
I came across this one because I'd extended with a custom key generator. React ends up treating the function itself as the child key, so it hides any strings that come after it. Object key handling is documented and makes sense. Not sure it makes sense to handle string keys this way.
what do you want to do here?
I think the issue is actually here yeah? Should probably be changed to
Nice catch. I think that we might actually have more of these flaws. We should be more careful as this prevents browsers to add to the string prototype. that if branch can be separated and we just use the implicit key for string/number.

Discussion:
} }); <ins> it('should allow extension of native prototypes', function() { /*eslint-disable no-extend-native */ String.prototype.key = 'react'; Number.prototype.key = 'rocks'; /*eslint-enable no-extend-native */ var instance = ( <div> {'a'} {13} </div> ); var traverseFn = jasmine.createSpy(); traverseAllChildren(instance.props.children, traverseFn, null); expect(traverseFn.calls.length).toBe(2); expect(traverseFn).toHaveBeenCalledWith( null, 'a', '.0' ); expect(traverseFn).toHaveBeenCalledWith( null, 13, '.1' ); delete String.prototype.key; delete Number.prototype.key; }); </ins> it('should throw on object', function() { expect(function() { traverseAllChildren({a: 1, b: 2}, function() {}, null);

* @return {string} */ function getComponentKey(component, index) { <del> if (component && component.key != null) { </del> <ins> // Do some typechecking here since we call this blindly. We want to ensure // that we don't block potential future ES APIs. if (component && typeof component === 'object' && component.key != null) { </ins> // Explicit key return wrapUserProvidedKey(component.key); }
Change:
I came across this, when using . When loading a route initially where the route handler is actually inside a and then removing it from the transition group leads to an . The weird thing is that it only happens on initial load of a nested route, not when the same view is being pulled up via the menu. I'm not sure if this is an issue related or if it belongs to . But the thing is that the component either returns a react element, or it returns . It seems like an edge case maybe, because it only happens in this specific initial render setup. It could be fixed, by adding a guard to the method of :
This was probably fixed by .
I don't think this is solved. It's easy to reproduce with React 0.12.2: just have the child return from . It's rather frustrating because some other developer may change the animated component to return when data is not ready, and not realize that this breaks the case when that component is inside the transition group.
Yup ran into this as well. If you pass a component to ReactCSSTransitionGroup that renders null you get this exception. Using React 0.12.1
Can you please reopen?
i've get the same exception, too. Hope this will be fixed soon.
is there anything stopping you people from implementing the suggested fix? :)
I'm encountering a similar issue.
I guess a PR would be welcome?
yeah, there is is!
I'm still seeing this issue. And can verify that it only happens when I return null. React with addons v0.13.3
Yes, the fix is in 0.14.
Ahh.. well that would explain things. How can I get my hands on 0.14?
Sorry – not released yet, but hopefully in the next few weeks. 0.14-beta is on npm (see the React blog).

Discussion:
transition: function(animationType, finishCallback) { var node = React.findDOMNode(this); <ins> if (!node) { if (finishCallback) { finishCallback(); } return; } </ins> var className = this.props.name + '-' + animationType; var activeClassName = className + '-active'; var noEventTimeout = null;
Change:
We're blocked on a few things here. Current JSHint is incompatible with what we do with template strings. I have a PR up there to mostly fix it but I bet there are more things. So even after that I think we'll want to switch to using ESLint. However that has its own set of problems as it is still working on ES6/JSX support (mostly blocked on other libraries at this point it seems). I have a PR () up to start using eslint, but there are a few rules disabled (because of incompatibilities on their end) which are really important and enabling them is a blocker for this. [x] Use eslint () [x] Enable all appropriate rules [ ] Add custom rules (namely, must use string literals for 2nd argument)

Discussion:
matrix: fast_finish: true allow_failures: <del> - env: TEST_TYPE=lint </del> - env: TEST_TYPE=test:coverage - env: TEST_TYPE=perf:full - env: TEST_TYPE=test:webdriver:saucelabs:modern

'use strict'; <del> var exec = require('child_process').exec; </del> var jsxTask = require('./grunt/tasks/jsx'); var browserifyTask = require('./grunt/tasks/browserify'); var populistTask = require('./grunt/tasks/populist');

.filter(function(npmTaskName) { return npmTaskName != 'grunt-cli'; }) .forEach(function(npmTaskName) { grunt.loadNpmTasks(npmTaskName); }); <del> // Alias 'jshint' to 'lint' to better match the workflow we know grunt.registerTask('lint', ['jshint']); </del> <ins> // Super simplified eslint task that we can use to replace linting. This just // shells out to eslint. grunt.registerTask('eslint', function() { var done = this.async(); grunt.util.spawn({ cmd: 'node_modules/.bin/eslint', args: ['src'] }, function(err, result, code) { if (result.stdout.length) { grunt.warn(result.stdout); } done(code === 0); }); }); grunt.registerTask('lint', ['eslint']); </ins> grunt.registerTask('download-previous-version', require('./grunt/tasks/download-previous-version.js'));
Change:
When I run: The following error is thrown: I'm trying to use a library called in an isomorphic app, which needs server-side rendering. The module works fine client-side, but the JSX/ES6 isn't playing nice on the server even though the server's already set up to render React components and other JSX code. As stated , it seems there's a transformation supported in (via its flag) which isn't supported in . I say "seems" because I have a hard time believing can't do the same thing. What am I missing?

Discussion:
'--harmony', 'Turns on JS transformations such as ES6 Classes etc.' ).option( <ins> '--target [version]', 'Specify your target version of ECMAScript. Valid values are "es3" and ' + '"es5". The default is "es5". "es3" will avoid uses of defineProperty and ' + 'will quote reserved words. WARNING: "es5" is not properly supported, even ' + 'with the use of es5shim, es5sham. If you need to support IE8, use "es3".', 'es5' ).option( </ins> '--strip-types', 'Strips out type annotations.' ).option(

sourceMap: this.options.sourceMapInline, stripTypes: this.options.stripTypes, es6module: this.options.es6module, <del> nonStrictEs6Module: this.options.nonStrictEs6Module </del> <ins> nonStrictEs6Module: this.options.nonStrictEs6Module, target: this.options.target </ins> }; return transform(source, options); });

options.sourceType = 'nonStrict6Module'; } <ins> // Instead of doing any fancy validation, only look for 'es3'. If we have // that, then use it. Otherwise use 'es5'. options.es3 = opts.target === 'es3'; options.es5 = !options.es3; </ins> return options; }

if (options.harmony) { visitorSets.push('harmony'); } <ins> if (options.es3) { visitorSets.push('es3'); } </ins> if (options.stripTypes) { // Stripping types needs to happen before the other transforms // unfortunately, due to bad interactions. For example,

require('jstransform/visitors/es7-spread-property-visitors'); var react = require('./transforms/react'); var reactDisplayName = require('./transforms/reactDisplayName'); <ins> var reservedWords = require('jstransform/visitors/reserved-words-visitors'); </ins> /** * Map from transformName => orderedListOfVisitors.

'es6-rest-params': es6RestParameters.visitorList, 'es6-templates': es6Templates.visitorList, 'es7-spread-property': es7SpreadProperty.visitorList, <del> 'react': react.visitorList.concat(reactDisplayName.visitorList) </del> <ins> 'react': react.visitorList.concat(reactDisplayName.visitorList), 'reserved-words': reservedWords.visitorList </ins> }; var transformSets = {

'es6-destructuring', 'es7-spread-property' ], <ins> 'es3': [ 'reserved-words' ], </ins> 'react': [ 'react' ]

* Specifies the order in which each transform should run. */ var transformRunOrder = [ <ins> 'reserved-words', </ins> 'es6-arrow-functions', 'es6-object-concise-method', 'es6-object-short-notation',
Change:
Ditto on invariant. But I think those are ok already.
I'd take this if I had a bit more detail. I looked at a few thought the codebase and couldn't understand.
Thanks

Discussion:
warnedStyleNames[name] = true; warning( false, <del> 'Unsupported style property ' + name + '. Did you mean ' + camelizeStyleName(name) + '?' </del> <ins> 'Unsupported style property %s. Did you mean %s?', name, camelizeStyleName(name) </ins> ); };

warnedStyleNames[name] = true; warning( false, <del> 'Unsupported vendor-prefixed style property ' + name + '. Did you mean ' + name.charAt(0).toUpperCase() + name.slice(1) + '?' </del> <ins> 'Unsupported vendor-prefixed style property %s. Did you mean %s?', name, name.charAt(0).toUpperCase() + name.slice(1) </ins> ); };

// logging too much when using transferPropsTo. warning( standardName == null, <del> 'Unknown DOM property ' + name + '. Did you mean ' + standardName + '?' </del> <ins> 'Unknown DOM property %s. Did you mean %s?', name, standardName </ins> ); };

set: function(value) { warning( false, <del> 'Don't set the ' + key + ' property of the React element. Instead, ' + 'specify the correct value when initially creating the element.' </del> <ins> 'Don't set the %s property of the React element. Instead, ' + 'specify the correct value when initially creating the element.', key </ins> ); this._store[key] = value; }

warning( false, <del> 'Don't set .props.' + propName + ' of the React component' + elementInfo + '. Instead, specify the correct value when ' + 'initially creating the element.' + ownerInfo </del> <ins> 'Don't set .props.%s of the React component%s. ' + 'Instead, specify the correct value when ' + 'initially creating the element.%s', propName, elementInfo, ownerInfo </ins> ); }

var newFn = function() { warning( warned, <del> `${namespace}.${oldName} will be deprecated in a future version. ` + `Use ${namespace}.${newName} instead.` </del> <ins> '%s.%s will be deprecated in a future version. ' + 'Use %s.%s instead.', namespace, oldName, namespace, newName </ins> ); warned = true; return fn.apply(ctx, arguments);
Change:
When I run the in examples jquery-mobile in the chromium browser, I get: Uncaught TypeError: Cannot read property '__reactAutoBindMap' of (anonymous function)
I can confirm. Works fine with React version “0.12.2", but "0.13.0-alpha.2" gives: Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefined ReactClass.createClass.Constructor (anonymous function) The jquery-mobile example is using component constructors in a way which makes the new version explode. gaearon lays is out here:
We'll make sure all the examples are working before we release 0.13 final but until then there's a non-trivial change they'll be broken at any point in time. Check out the latest stable branch for the working examples.

Discussion:
); } }); <ins> App = React.createFactory(App); </ins> /** jQuery Mobile button component. */ var JQueryMobileButton = React.createClass({

); } }); <ins> JQueryMobileButton = React.createFactory(JQueryMobileButton); </ins> /** jQuery Mobile page content component. */ var JQueryMobileContent = React.createClass({

); } }); <ins> JQueryMobileContent = React.createFactory(JQueryMobileContent); </ins> /** jQuery Mobile footer component. */ var JQueryMobileFooter = React.createClass({

); } }); <ins> JQueryMobileFooter = React.createFactory(JQueryMobileFooter); </ins> /** jQuery Mobile header component. */ var JQueryMobileHeader = React.createClass({

); } }); <ins> JQueryMobileHeader = React.createFactory(JQueryMobileHeader); </ins> /** jQuery Mobile page component. */ var JQueryMobilePage = React.createClass({

); } }); <ins> JQueryMobilePage = React.createFactory(JQueryMobilePage); </ins> /** Application page one component. */ var PageOneContent = React.createClass({

); } }); <ins> PageOneContent = React.createFactory(PageOneContent); </ins> /** Application page two component. */ var PageTwoContent = React.createClass({

); } }); <ins> PageTwoContent = React.createFactory(PageTwoContent); </ins> /** Application popup page component. */ var PagePopUpContent = React.createClass({

); } }); <ins> PagePopUpContent = React.createFactory(PagePopUpContent); </ins> // Render application. React.render(App(null), document.getElementById('content'));