jiebi/CodeConvo huggingface dataset:
Change:
} 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;

Discussion:
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:
Change:
} } <del> // Map of one or more Fibers in a pair to their unique id number. // We track both Fibers to support Fast Refresh, // which may forcefully replace one of the pair as part of hot reloading. // In that case it's still important to be able to locate the previous ID during subsequent renders. const fiberToIDMap: Map<Fiber, number> = new Map(); // Map of id to one (arbitrary) Fiber in a pair. // This Map is used to e.g. get the display name for a Fiber or schedule an update, // operations that should be the same whether the current and work-in-progress Fiber is used. const idToArbitraryFiberMap: Map<number, Fiber> = new Map(); </del> // When profiling is supported, we store the latest tree base durations for each Fiber. // This is so that we can quickly capture a snapshot of those values if profiling starts. // If we didn't store these values, we'd have to crawl the tree when profiling started,

Discussion:
Run the Next app, open up react dev tools and inspect the Box component, rendered by Every time react-devtools-extensions 23.0- Could not find ID for Fiber "App"
Hey, thanks for reporting this issue, and sorry it's blocking your workflow. Edit: The reason for this issue seems to be that there are multiple instances, and the one that we are using to get the fiber's ID when we inspect doesn't have the App fiber (a recursive owner of Box). We'll look into why this is occurring soon!
Fixed via
Change:
<li><a href="/react/docs/component-lifecycle.html"{% if page.id == 'docs-component-lifecycle' %} class="active"{% endif %}>Component Lifecycle</a></li> <li><a href="/react/docs/event-handling.html"{% if page.id == 'docs-event-handling' %} class="active"{% endif %}>Event Handling</a></li> <li><a href="/react/docs/advanced-components.html"{% if page.id == 'docs-advanced-components' %} class="active"{% endif %}>Advanced Components</a></li> <ins> <li><a href="/react/docs/mixins.html"{% if page.id == 'docs-mixins' %} class="active"{% endif %}>Mixins</a></li> </ins> <li><a href="/react/docs/api.html"{% if page.id == 'docs-api' %} class="active"{% endif %}>API</a></li> </ul> </div>

Discussion:
There was another issue tracking this , but it looks like it got merged into an issue that was already closed so it never got fixed.
There's also .
SVG images are an important part of my current project - is there anything I could do to help push this issue through?
is a newer PR without the merge conflicts of
Closed with
Change:
<div class="right">&copy; 2013 Facebook Inc.</div> </footer> </div> <ins> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-41298772-1', 'facebook.github.io'); ga('send', 'pageview'); </script> </ins> </body> </html>

Discussion:
Replace with and no parse error happens. What’s going on?
I had the same issue with this: We actually have an internal task tracking this at Facebook but I don't think it's been looked in to yet. Here's a comment explaining why it happens:
Fixed in esprima-fb () when for esprima-fb, jstransform and react are sorted out.
I'm actually going to leave this open for now so we remember to do the version update.
Now fixed in
Change:
this.props.onCommentSubmit({author: author, text: text}); this.refs.author.getDOMNode().value = ''; this.refs.text.getDOMNode().value = ''; <ins> return false; </ins> }), render: function() { return (

Discussion:
Do you want to request a feature or report a bug? bug What is the current behavior? When using the latest Dev tools (v4.0.5) on my project, when I inspect react-redux elements that use connect() devtools crashes. I can't map from my crash to the actual source but the code is react devtools: up one level of stack is react: and up one level is react-redux: () If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle () or CodeSandbox () example below: I'll have to try and make a small repro, but I hope there's something obvious given the info above. It's not clear to me if react-redux is doing something or if its devtools. This behavior existed in v3 and i was hoping it'd get magically fixed with v4 but it remains. What is the expected behavior? Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? This is in an electron app w/ react-redux v7.1.0 and react v16.8.3 (have to use this due to the version of react native i'm on)
Unfortunately this is a bug with React that was fixed via PR and released with v16.8.4. Thank you for the detailed bug report though! Originally reported here:
Change:
} } <del> var IsMountedMixin = { </del> <ins> var IsMountedPreMixin = { </ins> componentDidMount: function () { this.__isMounted = true; <del> }, </del> <ins> } }; var IsMountedPostMixin = { </ins> componentWillUnmount: function () { this.__isMounted = false; }

Discussion:
Do you want to request a feature or report a bug? Bug What is the current behavior? Calling in in prior versions would return . Now it returns . I believe this was untested behavior before, but the new tests that were may check the wrong value: Changing this line to test for will exhibit the behavior. The fix would be to defer setting the flag to until after all mixins and the method were called on the component. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? and anything using is broken. Working correctly in 15.4.x with .
I fixed this locally by splitting the IsMountedMixin into two: Then installing the Post after the spec has been mixed in: For the life of me I can't find the right repo to PR this against though.
This should be fixed with . Can you please verify?
I don't see that version published yet.
It's not set to (still an RC) but it exists: Will turn into 15.6.0 tomorrow.
Ah indeed. It's probably our internal registry being slow. I'll try it out soon.
Confirmed working correctly in .
Great. Thanks for sending the fix!
Change:
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; }

Discussion:
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?
Change:
*/ export const isUnitlessNumber = { animationIterationCount: true, <ins> aspectRatio: true, </ins> borderImageOutset: true, borderImageSlice: true, borderImageWidth: true,

Discussion:
React version: 16.14.0, 17.0.2 aspectRatio via - no aspectRatio applied via className - aspectRatio applied Needs Chrome 79 or above: Link to code example: No aspectRatio rule applied: aspectRatio applied, here I'm adding it via a :
Yes, I have the same issue with another style property Basically I want to add or and it gets removed.
Try passing a string instead of number. React special cases numbers (to add the "px" suffix) and only doesn't for certain known attributes. So new ones sometimes need to be to this list if they shouldn't get a px suffix (most should):
Your issue is unrelated. Would you mind opening a separate issue for that thread? Basically try instead. I.e. double strings. It's confusing but CSS expects a JS string of a CSS string. This is similar to how you have to do in React but it's a little clearer there because it's a wrapper around it.
Thanks
how soon do you need this? Are you blocked?
no, no rush at all! Just something I stumbled upon. Thanks for the lightning-quick response though!
Change:
var ELEMENT_NODE_TYPE = 1; <ins> var styleMutationWarning = {}; function checkAndWarnForMutatedStyle(style1, style2, component) { if (style1 == null || style2 == null) { return; } if (shallowEqual(style1, style2)) { return; } var componentName = component._tag; var owner = component._currentElement._owner; var ownerName; if (owner) { ownerName = owner.getName(); } var hash = ownerName + '|' + componentName; if (styleMutationWarning.hasOwnProperty(hash)) { return; } styleMutationWarning[hash] = true; warning( false, '`%s` was passed a style object that has previously been mutated. ' + 'Mutating `style` will be deprecated. Consider cloning it beforehand. ' + 'Check the `render` %s. Previous style: %s. Mutated style: %s.', componentName, owner ? 'of `' + ownerName + '`' : 'using <' + componentName + '>', JSON.stringify(style1), JSON.stringify(style2) ); } </ins> /** * Optionally injectable operations for mutating the DOM */

Discussion:
Right now, we copy it in one of the hottest paths of React to allow users to mutate the style object afterward. I've come to realize that this pattern doesn't come up that often, since the style's often created inline inside and not retained after that. Additionally, is coming soon, so people could always clone the style themselves if there's the need.
You could start with a dev-only warning() if you're concerned about breaking stuff.
Would be extremely nice, especially since we're going to make a push to get more people to use inline styles in the future
Really? From my tests, it would seem that it would be a performance nightmare.
it's certainly nice if it was possible. I think there are some tricks to make this performant enough.
Change:
var children = {}; var childMapping = ReactTransitionKeySet.getChildMapping(sourceChildren); var transitionConfig = this.getTransitionConfig(); var currentKeys = ReactTransitionKeySet.mergeKeySets( this._transitionGroupCurrentKeys,

Discussion:
Consider this example: If is false or undefined, will be and will throw
Want to take a go at fixing this? I think it would be a good opportunity to learn a bit more about a constrained subset of internals.
yea - i'll give it a shot :)
Change:
invariant( typeof callback === 'function', 'enqueueCallback(...): You called `setProps`, `replaceProps`, ' + <del> '`setState`, `replaceState`, or `forceUpdate` with a callback that ' + 'isn't callable.' </del> <ins> '`setState`, `replaceState`, or `forceUpdate` with a callback of type ' + '%s. A function is expected', typeof callback === 'object' && Object.keys(callback).length && Object.keys(callback).length < 20 ? typeof callback + ' (keys: ' + Object.keys(callback) + ')' : typeof callback </ins> ); if (internalInstance._pendingCallbacks) { internalInstance._pendingCallbacks.push(callback);

Discussion:
Oddly enough, the two examples below are not equal as I thought they would be. The error is as follows: I'm assuming that is because the function as assuming an optional callback. But I would expect your code to do a typeof check, and not just a defined check. Can we change it to do a check? I can submit a PR.
Well, the typecheck happens with that exact typecheck, just not directly in forceupdate. Here's forceUpdate: and where the invariant happens: FWIW, is not the same as due to an important distinction. The former makes a new function that is bound but it will pass along any arguments. The latter also is a new function but it explicitly doesn't pass any arguments. So the former gets the event passed along while the latter just drops it. The event isn't callable, thus the invariant. We need to do the typecheck so I guess we could discuss whether we keep it as an invariant or a warning. But it is a misuse of the API.
To follow up on that, the more "equal" thing would be: Which should throw the same error that you see with your first bind example.
Correct. Yes, I understand all of that. It wasn't toooo hard for me to understand what is happening. And it is a misuse of the API. So I guess, I would consider adding the argument type to the invariant to help make it clearer? Something more like: It's kind of moot. But It confused me for a second. Might confuse others also.
Change:
const [prevValue, setValue] = mountState(value); mountEffect( () => { <del> Scheduler.unstable_next(() => { const previousConfig = ReactCurrentBatchConfig.suspense; ReactCurrentBatchConfig.suspense = config === undefined ? null : config; try { setValue(value); } finally { ReactCurrentBatchConfig.suspense = previousConfig; } }); </del> <ins> const previousConfig = ReactCurrentBatchConfig.suspense; ReactCurrentBatchConfig.suspense = config === undefined ? null : config; try { setValue(value); } finally { ReactCurrentBatchConfig.suspense = previousConfig; } </ins> }, [value, config], );

Discussion:
Do you want to request a feature or report a bug? Bug What is the current behavior? is never set to true when calling within , but it does work properly when within a . Here's the correct behavior (accomplished via ): ! Here's the incorrect behavior (via ): ! Note the difference is that the opacity never changes to 0.4 (which is determined based on the state). What is the expected behavior? I expect them to both behave the same (at least as far as the user can observe). Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? react react-dom
I guess startTransition is never intended to be used in effects. I didn't expect it even works. Looking at the doc again, Hmm, it doesn't clearly say so.
Ok but the use cases is interesting.
Do you think this is the same as
Yes, I believe that's the same issue.
Hello, I think I have a similar issue when using with . When returns a new value I would like to create a new resource. I tried to use for this, but I don't even have an idea where to put ...
you can see the isPending is if the is bigger than 5100 when calling in .
I'm seeing the same behavior as - setting to a value of 5200 or higher causes to fire reliably in the original CodeSandbox:
That is a bug we need to fix regardless.
Fixed by . Updated Sandbox:
Change:
const {profilerStore} = store; const inputRef = useRef<HTMLInputElement | null>(null); <ins> const downloadRef = useRef<HTMLAnchorElement | null>(null); </ins> const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);

Discussion:
Hi, long time user, first time issuer. I think I found a bug with the Profiler component. When I click on the button at the top nothing happens and there appears to be no new files in my Downloads folder. I think it might be silently failing and that's why I am not getting any response. Has anyone else ran into this issue? Another thing I would like to mention is that I haven't looked through all of the documentation material about the new Profiler. I only read , so if this issue is addressed elsewhere I apologize and also request the source to that solution. Thank you for your time! Versions: *
It seems that this is happening because of the call in the util function. I'll investigate this further.
I fixed the issue. I'll open a PR later today :)
Change:
if (mutationMethod) { mutationMethod(node, value); } else if (shouldIgnoreValue(propertyInfo, value)) { <del> this.deleteValueForProperty(node, name); </del> <ins> DOMPropertyOperations.deleteValueForProperty(node, name); </ins> return; } else if (propertyInfo.mustUseProperty) { // Contrary to `setAttribute`, object properties are properly

Discussion:
Do you want to request a feature or report a bug? Report a bug What is the current behavior? Referring to object's method from a another method within same object, , , breaks React build in Closure Compiler under advanced optimizations. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via or similar (template: ). Build a React app using Closure Compiler in advanced mode. (Unfortunately I can not provide a source of the app where I got this bug.) What is the expected behavior? An app built with Closure Compiler in advanced mode should not throw exception Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React v15.4.2 Changing to solves this issue. There are other methods of object which are using properly via call. If this makes sense, I'll prepare a PR.
Seems reasonable. A PR would be great :)
Change:
"electron": "^23.1.2", "internal-ip": "^6.2.0", "minimist": "^1.2.3", <del> "react-devtools-core": "5.3.1", </del> <ins> "react-devtools-core": "6.0.0", </ins> "update-notifier": "^2.1.0" } }

Discussion:
development website Uncaught Error: getCommitTree(): Invalid commit "1" for root "1". There are only "1" commits. Every time react-devtools-extensions 1- getCommitTree(): Invalid commit "2" for root "1". There are only "1" commits.
Hi thank you for reporting. should fix this. It's scheduled to be included in DevTools 6.0.0. Let us know if it's still happening in 6.0.0
Change:
var mocks = require('mocks'); describe('ReactDOMInput', function() { <ins> var EventConstants; </ins> var React; var ReactLink; var ReactTestUtils; beforeEach(function() { require('mock-modules').dumpCache(); <ins> EventConstants = require('EventConstants'); </ins> React = require('React'); ReactLink = require('ReactLink'); ReactTestUtils = require('ReactTestUtils');

Discussion:
I tried updating from to . Something has changed in between these releases that is making it so that in onChange's synthetic event is undefined.
This appears to be related to a bug in . does not accept the argument and does not pass it on to . However that's not the only fix needed, also needs to pass something in place of the that expects. Also it seems has the same issue with being passed. I tried fixing this myself. However I have issues with the test setup and/or the test utils seem incapable of triggering from .
Yes I can confirm I have this issue too! This unfortunately makes the beta unusable in my app. The is null while the native event has a target
Same issue. The workaround is using instead of . But that's kinda wrong :(
Same here, but you can use for now.
Excuse me. I'm a beginners of React. Can I ask a question? Why can I use "jsx -watch src/build" to translate "" file to plain JavaScrip?
In fact, I can't see any result after do all steps
I don't know, but this is not the place for asking such questions. Ask this on Stackoverflow or IRC / Slack channels maybe
Thank you for your answer.
Change:
addChecksumToMarkup: function(markup) { var checksum = adler32(markup); <del> // Add checksum (handle both parent tags and self-closing tags) return markup.replace( TAG_END, ' ' + ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="' + checksum + '"$&' ); </del> <ins> // Add checksum (handle both parent tags, comments and self-closing tags) if (markup.test(COMMENT_START)) { return markup; } else { return markup.replace( TAG_END, ' ' + ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="' + checksum + '"$&' ); } </ins> }, /**

Discussion:
Run this: Get this: Not sure if this is a bug but I thought and friends are gone in , no? Also when testing with an old project using - which has a much complex scenario, returned following causing a blank page: Just wondering is the behavior for server rendering changing in ? Thanks.
is gone for client-side rendering, but still exists for server-side rendering. This is expected behavior. However, is NOT desired output. Can you provide an example component/render that generates this output?
This happens when a root composite component returns .
I spent all day trying to trace the root cause of the issue and ended up confirmed it's a false alarm, it was caused by lib which returns a null root component while rendering on the server. I'm currently working on different approaches to implement universal apps on both server and client, will report back if I hit any other issues with v15.
But, to be clear, this is a valid bug in React.
Update: just confirmed that is working fine with other apps in regard to server rendering once removed . One thing to note though I saw a lot of comments for text like this, just wondering is it necessary?
Right, but the use case that mentioned clearly demonstrates the bug. It's necessary for tracking separating the text elements in order to apply updates/diffs.
Understood, thanks for the explanation.
Change:
.Wrapper { padding: 0 0.25rem; <del> white-space: nowrap; </del> <ins> white-space: pre; </ins> height: var(--line-height-data); line-height: var(--line-height-data); display: inline-flex;

Discussion:
Compare two screenshots closely. The space after "from" disappears when the next word is selected. <img width="574" alt="Screenshot 2020-04-07 at 13 26 40" src="https://user-"<img width="776" alt="Screenshot 2020-04-07 at 13 26 35" src="https://user-"
Oops. Yeah this looks like a CSS bug. Each row in the tree is . This means that gets smushed together in a way we don't want. Need to think about this for a minute.
Change:
* 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.

Discussion:
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.
Change:
<option value="/email-inputs">Email Input</option> <option value="/selects">Selects</option> <option value="/textareas">Textareas</option> <ins> <option value="/progress">Progress</option> </ins> <option value="/input-change-events"> Input change events </option>

Discussion:
Maybe I missed it but I don't see this case in DOM fixtures: Seems important because it's easy to accidentally gloss over it if we stop syncing attributes and have to edit a bunch of jsdom tests.
Hello I would be interested in working on this. Thanks
Maybe it will really cool feature