jiebi/CodeConvo huggingface dataset:
Change:
Consider the following code: The first line is rendered in but the second one in . If you skip the first rendering it works.
Apparently, doesn't work with svg.
Or, maybe, I'd say that does not work as expected. I see it gets markup and it gets wrap and it creates nodes via like this: but for some reason of that is .
cc This wouldn't work with the context scenario. Maybe separate renderers are need at the top level? Or at least a flag.
what do you mean by 'context scenario'? Or separate renderers at the top level?
Sorry that was directed to based on a conversation I had with him yesterday
I thought you're referring to my PR and pinging Do you have any comments about my PR? In particular, where should I put tests?
It works if ReactMount supplies the context. Are you using XHTML? I was under the impression that in HTML, just an tag with no explicit namespace should work fine.
correct, I'm using xhtml (that's because in my svg there are foreign namespaces and they are ignored in html). I can test if my example works in pure html but I suppose that you might be right.
What about ambiguous elements like? This doesn't have a context to be picked up.
I assumed we'd look at the namespace of the container. Sorry for not being more precise.

Discussion:
var tableWrap = [1, '<table>', '</table>']; var trWrap = [3, '<table><tbody><tr>', '</tr></tbody></table>']; <del> var svgWrap = [1, '<svg>', '</svg>']; </del> <ins> var svgWrap = [1, '<svg xmlns="http://www.w3.org/2000/svg">', '</svg>']; </ins> var markupWrap = { '*': [1, '?<div>', '</div>'],
Change:
using npm mocha is not necessarily at (thanks to hoisting). (eg it's actually at for me)
We've found out that it's possible to use eslint-tester with jest, so we should just do that.

Discussion:
]); grunt.registerTask('build:test', [ 'delete-build-modules', <del> 'test:eslint-rules', </del> 'jsx:test', 'version-check', 'populist:test',

grunt.registerTask('coverage:parse', require('./grunt/tasks/coverage-parse')); <del> grunt.registerTask('test:eslint-rules', require('./grunt/tasks/test-eslint-rules')); </del> grunt.registerTask('test:webdriver:phantomjs', [ 'connect', 'webdriver-phantomjs',

<del> 'use strict'; var grunt = require('grunt'); module.exports = function() { var done = this.async(); grunt.util.spawn({ cmd: 'node_modules/eslint-tester/node_modules/mocha/bin/mocha', args: ['eslint-rules/__tests__'], opts: {stdio: 'inherit'}, // allows colors to passthrough }, function(err, result, code) { if (err) { grunt.log.error('Custom linter rules are broken'); } else { grunt.log.ok('Custom linter rules are okay'); } done(code === 0); }); }; </del>

"/.module-cache/" ], "testPathDirs": [ <del> "<rootDir>/src" </del> <ins> "<rootDir>/src", "<rootDir>/eslint-rules" </ins> ], "unmockedModulePathPatterns": [ ""
Change:
Not reporting a bug or issue. I just wanted to let you know I found this part of the walk-through to be unclear and confusing and others may, too: It took me a while to figure out whether I was supposed to be editing in the file provided when I cloned the repo or whether I should make a new file and how to link the two files if they were both necessary. I'm new to React and pretty new to programming overall, but I do have some Javascript and Javascript framework experience. I really enjoyed the walk-through because it was simple to get started, so thanks for the helpful resource!!
Good catch & thanks for the heads up! I'd definitely call that a bug :) We really need to go through the tutorial and make sure it's all cohesive. After 2 years of ad hoc updating it's definitely showing its age. If you have any other feedback (especially as somebody who is relatively new to programming), we'd definitely appreciate it.
No problem! I'm happy to help. Will definitely let you know if I see anything else. Thanks again for the great resources!
I've opened a PR with a minor change to make the bit that mentioned a little easier to follow. +1 on making sure the tutorial is cohesive. What are your thoughts on bringing the actual tutorial as a sub-directory of the React project as opposed to being in a separate repository? I am not even sure myself if that's the best way to go about it, but at least things wouldn't be going out of sync as they are now. If you look at the source code for the tutorial and compare it to the tutorial instructions in the React repo there are some striking differences which might catch people out. The major drawback with this approach would be having to clone the entire React source when you want to get just the tutorial, but I actually don't think that's a bad idea. It might even encourage people to have a poke about the source code, which is always a good thing.

Discussion:
### Getting started <del> For this tutorial, we'll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document: </del> <ins> For this tutorial, we'll use prebuilt JavaScript files on a CDN. Open up `public/index.html` in your favorite editor, which should contain the following: </ins> ```html <!-- index.html -->
Change:
After migrating from 0.13 to 0.14-beta1, some of our unit tests are reporting false positive failures. It seems as though is no longer able to find elements inside components.
Isn't findRenderedDOMComponentWithTag's first argument supposed to be the name of the react component tree that you've defined (MyElement)?
Oops. That was a typo in my code sample. I've corrected it.
The problem was that was passed as a lowerCase string to . Converting it to upperCase before hand doesn't hurt anyway. What do you guys think?

Discussion:
scryRenderedDOMComponentsWithTag: function(root, tagName) { return ReactTestUtils.findAllInRenderedTree(root, function(inst) { return ReactTestUtils.isDOMComponent(inst) && <del> inst.tagName === tagName.toUpperCase(); </del> <ins> inst.tagName.toUpperCase() === tagName.toUpperCase(); </ins> }); },
Change:
Flattening children to an array is 20 times faster than flattening to an object. For long list of elements, this shows up on the initial render flame graphs as pretty hot.

Discussion:
var flattenChildren = require('flattenChildren'); var instantiateReactComponent = require('instantiateReactComponent'); var shouldUpdateReactComponent = require('shouldUpdateReactComponent'); <ins> var traverseAllChildren = require('traverseAllChildren'); var warning = require('warning'); function instantiateChild(childInstances, child, name) { // We found a component instance. var keyUnique = (childInstances[name] === undefined); if (__DEV__) { warning( keyUnique, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.', name ); } if (child != null && keyUnique) { childInstances[name] = instantiateReactComponent(child, null); } } </ins> /** * ReactChildReconciler provides helpers for initializing or updating a set of

* does diffed reordering and insertion. */ var ReactChildReconciler = { /** * Generates a "mount image" for each of the supplied children. In the case * of `ReactDOMComponent`, a mount image is a string of markup.

* @internal */ instantiateChildren: function(nestedChildNodes, transaction, context) { <del> var children = flattenChildren(nestedChildNodes); for (var name in children) { if (children.hasOwnProperty(name)) { var child = children[name]; // The rendered children must be turned into instances as they're // mounted. var childInstance = instantiateReactComponent(child, null); children[name] = childInstance; } </del> <ins> if (nestedChildNodes == null) { return null; </ins> } <del> return children; </del> <ins> var childInstances = {}; traverseAllChildren(nestedChildNodes, instantiateChild, childInstances); return childInstances; </ins> }, /**
Change:
We shipped this in 0.13 but then exposed it as (or ) in master. We should deprecate the usage in (separately from other deprecation notices because we aren't shipping this as a standalone addon).
I can't find any information regarding this decision, if goes away, how are we supposed to batch setStates in non-dom event handlers?
. As of right now, the batching is a part of the reconciler which lives in , even if it's used by non-dom event handlers.

Discussion:
var cloneWithProps = require('cloneWithProps'); var shallowCompare = require('shallowCompare'); var update = require('update'); <ins> var warning = require('warning'); var warnedAboutBatchedUpdates = false; </ins> React.addons = { CSSTransitionGroup: ReactCSSTransitionGroup,

PureRenderMixin: ReactComponentWithPureRenderMixin, TransitionGroup: ReactTransitionGroup, <del> batchedUpdates: ReactUpdates.batchedUpdates, </del> <ins> batchedUpdates: function() { if (__DEV__) { warning( warnedAboutBatchedUpdates, 'React.addons.batchedUpdates is deprecated. Use ' + 'ReactDOM.unstable_batchedUpdates instead.' ); warnedAboutBatchedUpdates = true; } return ReactUpdates.batchedUpdates.apply(this, arguments); }, </ins> cloneWithProps: cloneWithProps, createFragment: ReactFragment.create, shallowCompare: shallowCompare,
Change:
Do we want to do this now? mentioned this but I forgot about it until this morning.
That would be nice but shouldn't be blocking. We can make that 0.15.

Discussion:
} } <ins> var testFunc = function testFn() {}; warning( (testFunc.name || testFunc.toString()).indexOf('testFn') !== -1, 'It looks like you're using a minified copy of the development build ' + 'of React. When deploying React apps to production, make sure to use ' + 'the production build which skips development warnings and is faster. ' + 'See https://fb.me/react-minification for more details.' ); </ins> // If we're in IE8, check to see if we are in compatibility mode and provide // information on preventing compatibility mode var ieCompatibilityMode =

for (var i = 0; i < expectedFeatures.length; i++) { if (!expectedFeatures[i]) { <del> console.error( </del> <ins> warning( false, </ins> 'One or more ES5 shims expected by React are not available: ' + 'https://fb.me/react-warning-polyfills' );
Change:
defines the "integrity" attribute. This attribute is not defined in HTMLDOMPropertyConfig so it is not included in HTML rendered on a server.
+1 here. Modern browsers have supported this feature. Bootstrap tell me to use the following from CDN: Here is the MDN introduction:
cc Contrary to popular belief, we do get these fairly frequently. Related to
Related in that there should be a good way of replacing whitelisting attributes, but it's not a custom attribute in the same sense as .
Yea "related", the underlying goal of that issue is to really get of the whitelist as much as possible, entirely would be good. I don't know that we called that out explicitly but they're mostly the same problem.
Yeah, my comment was directed at a conversation we had at our last team meeting when figuring out our priorities for the remainder of the year. Basically, there are a whole ton of attributes that we keep adding one-at-a-time, and I was/am pushing for us to solve and wipe them all out (past present and future) with a single swipe. But is a slightly non-trivial change with several dependencies and was thus demoted off the prioirty list :P.

Discussion:
icon: null, id: MUST_USE_PROPERTY, inputMode: MUST_USE_ATTRIBUTE, <ins> integrity: null, </ins> is: MUST_USE_ATTRIBUTE, keyParams: MUST_USE_ATTRIBUTE, keyType: MUST_USE_ATTRIBUTE,
Change:
The function isn't quite working for me anymore after upgrading from 0.14-rc1 and 0.14. The error stack looks something like this:
Can you post a minimal repro case please?
The minimal repro for me is this: If I use an element -- I get the error reported above. If I use a element -- there is no error. I tried dropping this as a Jest test in the React source code -- but it passed. However, running this exact same test in my local project -- it fails. I've confirmed that all React libs are 0.14. Could there be some kind of build process that's causing the issue? The line that fails is this when is the element.
Sounds like what mentioned here:
Indeed. Looks like this is the same issue. I hope you can push that out fix in 0.14.1 soon as this is a blocking issue for my team for upgrading to 0.14. Thanks for the fast response.
We'll try. In the meantime, you could copy the definition from here since it doesn't rely on any React internals:

Discussion:
* components with the class name matching `className`. * @return {array} an array of all the matches. */ <del> scryRenderedDOMComponentsWithClass: function(root, className) { </del> <ins> scryRenderedDOMComponentsWithClass: function(root, classNames) { if (!Array.isArray(classNames)) { classNames = classNames.split(/s+/); } </ins> return ReactTestUtils.findAllInRenderedTree(root, function(inst) { if (ReactTestUtils.isDOMComponent(inst)) { <del> var instClassName = ReactDOM.findDOMNode(inst).className; return ( instClassName && (('' + instClassName).split(/s+/)).indexOf(className) !== -1 ); </del> <ins> var classList = ReactDOM.findDOMNode(inst).className.split(/s+/); return classNames.every(function(className) { return classList.indexOf(className) !== -1; }); </ins> } return false; });

expect(scryResults.length).toBe(1); }); <ins> it('can scryRenderedDOMComponentsWithClass with multiple classes', function() { var Wrapper = React.createClass({ render: function() { return <div>Hello <span className={'x y z'}>Jim</span></div>; }, }); var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />); var scryResults1 = ReactTestUtils.scryRenderedDOMComponentsWithClass( renderedComponent, 'x y' ); expect(scryResults1.length).toBe(1); var scryResults2 = ReactTestUtils.scryRenderedDOMComponentsWithClass( renderedComponent, 'x z' ); expect(scryResults2.length).toBe(1); var scryResults3 = ReactTestUtils.scryRenderedDOMComponentsWithClass( renderedComponent, ['x', 'y'] ); expect(scryResults3.length).toBe(1); expect(scryResults1[0]).toBe(scryResults2[0]); expect(scryResults1[0]).toBe(scryResults3[0]); var scryResults4 = ReactTestUtils.scryRenderedDOMComponentsWithClass( renderedComponent, ['x', 'a'] ); expect(scryResults4.length).toBe(0); var scryResults5 = ReactTestUtils.scryRenderedDOMComponentsWithClass( renderedComponent, ['x a'] ); expect(scryResults5.length).toBe(0); }); </ins> it('traverses children in the correct order', function() { var Wrapper = React.createClass({ render: function() {
Change:
The function isn't quite working for me anymore after upgrading from 0.14-rc1 and 0.14. The error stack looks something like this:
Can you post a minimal repro case please?
The minimal repro for me is this: If I use an element -- I get the error reported above. If I use a element -- there is no error. I tried dropping this as a Jest test in the React source code -- but it passed. However, running this exact same test in my local project -- it fails. I've confirmed that all React libs are 0.14. Could there be some kind of build process that's causing the issue? The line that fails is this when is the element.
Sounds like what mentioned here:
Indeed. Looks like this is the same issue. I hope you can push that out fix in 0.14.1 soon as this is a blocking issue for my team for upgrading to 0.14. Thanks for the fast response.
We'll try. In the meantime, you could copy the definition from here since it doesn't rely on any React internals:

Discussion:
}, isDOMComponent: function(inst) { <del> // TODO: Fix this heuristic. It's just here because composites can currently // pretend to be DOM components. </del> return !!(inst && inst.nodeType === 1 && inst.tagName); },

} return ReactTestUtils.findAllInRenderedTree(root, function(inst) { if (ReactTestUtils.isDOMComponent(inst)) { <del> var classList = ReactDOM.findDOMNode(inst).className.split(/s+/); return classNames.every(function(className) { return classList.indexOf(className) !== -1; </del> <ins> var className = inst.className; if (typeof className !== 'string') { // SVG, probably. className = inst.getAttribute('class') || ''; } var classList = className.split(/s+/); return classNames.every(function(name) { return classList.indexOf(name) !== -1; </ins> }); } return false;
Change:
Did not know where to post this best. Since some weeks, the layout looks broken on Google Chrome 43, Linux Screenshot: !
Not Linux specific; broken in all browsers / operating systems. This is probably a good first bug if someone wants to submit a pull request.
Closed in .

Discussion:
@include clearfix; } <ins> /* JSX Compiler */ .jsxCompiler { margin: 0 auto; padding-top: 20px; width: 1220px; label.compiler-option { display: block; margin-top: 5px; } #jsxCompiler { margin-top: 20px; } .playgroundPreview { padding: 0; width: 600px; pre { @include code-typography; } } .playgroundError { // The compiler view kills padding in order to render the CodeMirror code // more nicely. For the error view, put a padding back padding: 15px 20px; } } </ins> .docs-prev { float: left; }
Change:
I'm trying to use Video element but some attributes doesn't work. from i'm trying to do: but it only renders to:
kind and srcLang were recently in They'll be a part of a future release (likely 0.14.1). I didn't see default then though so I guess we still need to add that.
Related to

Discussion:
crossOrigin: null, data: null, // For `<object />` acts as `src`. dateTime: MUST_USE_ATTRIBUTE, <ins> default: HAS_BOOLEAN_VALUE, </ins> defer: HAS_BOOLEAN_VALUE, dir: null, disabled: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
Change:
My project uses react, react-dom, and react-bootstrap. react-bootstrap requires react to be a peer dependency. react-dom includes react as a child dependency. So I must install react as a top-level dependency in order for react-bootstrap to work. Now I have two copies of react. When I try to use the Modal component in react-bootstrap, I get the error "Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's method, or you have multiple copies of React loaded". I can fix this by deleting the directory nodemodules/react-dom/nodemodules/react. Maybe react-dom should be changed so react is a peer dependency instead of a child dependency.
As far as I understand it; yeah it should be a peer dependency (cc ?). But dependencies are not child dependencies that's simply a result of how NPM2 unfortunately resolves version issues, so peer dependency is preferable, but a regular dependency is not wrong, you just have to be careful to avoid multiple installations.
I don't know what I did to cause react to be installed below react-dom. I had this: nodemodules/react-dom/nodemodules/react and also: node_modules/react. I can't find a way to reproduce that now.
It can happen quite stealthily when updating/etc in NPM2. I ran into the same issue recently. I'll reopen this for now because it really seems to me that it should be a peer dependency.
Any reason why it is a direct dependency in the first place? Was not the intend of npm's peerDependencies to cover this exact problem? (Avoid duplications of modules built around other module, like react and react-dom), just saying that seems there isn't a reason for react-dom to include react as a direct dependency
It probably should be a peerDep. I don't remember why I put it as a regular dep there… (I did addons-* with React as a peerDep).

Discussion:
"url": "https://github.com/facebook/react/issues" }, "homepage": "https://github.com/facebook/react/tree/master/npm-react-dom", <del> "dependencies": { </del> <ins> "peerDependencies": { </ins> "react": "^0.15.0-alpha" } }
Change:
I'm doing a simple shallow render on a component which has a button () with an handler. I can correctly assert most of its properties, but I can't get asserting whether the button has been clicked (by using and a passed in as handler) to work. TestUtils doesn't throw any Invariant Violation or whatever other error, the spy just never gets called. When I manually call it through it works. Is this expected behavior?
I'm not up to date with what the interaction is supposed to be with the shallow renderer these days so cc … But when you use the shallow renderer you aren't working on a real rendered tree. especially doesn't look like it should work - remember that props are not rendered output. will be a React Element, not a component instance. So as your test case seems to be written, yes this is expected.
That's expected. We should probably give a better error message – changing this issue title to reflect that.
Is there anything I can do to help with this? I haven't contributed to React yet, but we're investing heavily into in-company knowledge. If you can point me to where to assert this, I'd love to help.
Also, where do I submit PR's for React's website? I could clarify this in the documentation...
The docs/ directory has markdown files that turn into the website. Each page should also have an "Edit on GitHub" button at the top that links you straight to it. In the file, you could add an invariant that makes sure React.isValidElement returns false on the passed-in node.

Discussion:
function makeSimulator(eventType) { return function(domComponentOrNode, eventData) { var node; <ins> invariant( !React.isValidElement(domComponentOrNode), 'TestUtils.Simulate expects a component instance and not a ReactElement.' + 'TestUtils.Simulate will not work if you are using shallow rendering.' ); </ins> if (ReactTestUtils.isDOMComponent(domComponentOrNode)) { node = findDOMNode(domComponentOrNode); } else if (domComponentOrNode.tagName) {

expect(handler).toHaveBeenCalledWith(jasmine.objectContaining({target: node})); }); <ins> it('should throw when attempting to use ReactTestUtils.Simulate with shallow rendering', function() { var SomeComponent = React.createClass({ render: function() { return ( <div onClick={this.props.handleClick}> hello, world. </div> ); }, }); var handler = jasmine.createSpy('spy'); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent handleClick={handler} />); var result = shallowRenderer.getRenderOutput(); expect(() => ReactTestUtils.Simulate.click(result)).toThrow( 'TestUtils.Simulate expects a component instance and not a ReactElement.' + 'TestUtils.Simulate will not work if you are using shallow rendering.' ); expect(handler).not.toHaveBeenCalled(); }); </ins> it('can scry with stateless components involved', function() { var Stateless = () => <div><hr /></div>; var SomeComponent = React.createClass({
Change:
Count up with 0.14.0 But can't count up 0.14.1 I got this issue on IE 10 and 11 + Windows 8, 7. And Windows 10 + IE 11 is move fine.
:+1: I'm seeing the same issue when I use react-dom 0.14.1
:+1: same
cc seems bad.
Fix incoming. Worth noting (as reminded me) that this is only an issue in dev mode.
:+1:
:+1: Makes our app difficult to test on Windows 7 / 8. I can confirm that switching to production mode does resolve it for us.
Yea sorry about the issues, we'll be shipping 0.14.2 tomorrow with this fixed.
:+1:
Is this related only to anchor tags, or other elements as well? I've seen this when applying onClick to div elements as well as anchors in IE10 and IE11.
All elements.

Discussion:
var fakeNode = document.createElement('react'); ReactErrorUtils.invokeGuardedCallback = function(name, func, a, b) { var boundFunc = func.bind(null, a, b); <del> fakeNode.addEventListener(name, boundFunc, false); </del> <ins> var evtType = `react-${name}`; fakeNode.addEventListener(evtType, boundFunc, false); </ins> var evt = document.createEvent('Event'); <del> evt.initEvent(name, false, false); </del> <ins> evt.initEvent(evtType, false, false); </ins> fakeNode.dispatchEvent(evt); <del> fakeNode.removeEventListener(name, boundFunc, false); </del> <ins> fakeNode.removeEventListener(evtType, boundFunc, false); </ins> }; } }