jiebi/CodeConvo huggingface dataset:
Change:
"version": "4.10.1", "version_name": "4.10.1", <del> "minimum_chrome_version": "49", </del> <ins> "minimum_chrome_version": "60", </ins> "icons": { "16": "icons/16-production.png",

Discussion:
We currently build DevTools to target Chrome 49 and Firefox 54. These are super old browser versions and they did not have full ES6 support, so the generated build is more bloated than it needs to be. DevTools uses most modern language features. Off the top of my head, the following features are used (basically everything but async and generator functions): The above min browser versions come from Assuming I'm not forgetting things, it looks like we'd need to target Chrome 60+ (released 2017-07-25) and Firefox 55+ (released 2017-04-18). This seems like a reasonable set of browsers to target. Interestingly enough, according to , but I think certain details (like spread in object literals) weren't included in the original spec and/or weren't until later. Note that we can't remove the IE 11 target from the backend yet due to Hermes (React Native) ES6 support but that should be doable by the end of the year given current engineering targets. But we could update the frontend target, as well as the targets for the extensions and the package. It would be good to increase the browser versions we target to at least the version numbers mentioned above, rebuild the DevTools, and compare bundle sizes and generated code.
Change:
* `jscodeshift -t react/packages/react-codemod/transforms/findDOMNode.js <file>` <ins> `react-to-react-dom` updates code for the split of the `react` and `react-dom` packages (e.g., `React.render` to `ReactDOM.render`). It looks for `require('react')` and replaces the appropriate property accesses using `require('react-dom')`. It does not support ES6 modules or other non-CommonJS systems. We recommend performing the `findDOMNode` conversion first. * `jscodeshift -t react/packages/react-codemod/transforms/react-to-react-dom.js <file>` * After running the automated codemod, you may want to run a regex-based find-and-replace to remove extra whitespace between the added requires, such as `codemod.py -m -d src --extensions js '(var Reacts*=s*require(.react.);)nn(s*var ReactDOM)' '1n2'` using https://github.com/facebook/codemod. </ins> `pure-render-mixin` removes `PureRenderMixin` and inlines `shouldComponentUpdate` so that the ES2015 class transform can pick up the React component and turn it into an ES2015 class. NOTE: This currently only works if you

Discussion:
I tried doing the following to pick up react-dom: However, it said that the only version available was Poking around on Github yielded a repo called that appears to be linked to Bower. I'm guessing this isn't the right library; what's the dependency installation story going to look like with Bower?
Never mind, just found that it shipped in the same package. However, the documentation is misleading on the :
Thanks, we should fix that.
Change:
return result; } <ins> const argvType = Array.isArray(argv.type) ? argv.type : [argv.type]; </ins> const requestedBundleTypes = argv.type <del> ? parseRequestedNames([argv.type], 'uppercase') </del> <ins> ? parseRequestedNames(argvType, 'uppercase') </ins> : []; const requestedBundleNames = parseRequestedNames(argv._, 'lowercase'); const forcePrettyOutput = argv.pretty; const isWatchMode = argv.watch;

Discussion:
React version: 18.x.x up to latest the React repository. : either: - the output of the function logs within the script. Relevant code: Relevant function: The function, responsible for determining whether to include a bundle in the build output, contains incorrect logic for filtering when multiple bundle types are specified. Specifically, the following line causes the issue: This code uses with to check if all requested bundle types are missing in the current bundle type. However, when multiple types are specified, it should skip a bundle only if none of the requested types are present. Here's an example of the incorrect behavior observed during debugging: In this case, even though the is and doesn't include , is incorrectly evaluated as , leading to the bundle not being skipped. The function should correctly filter bundles based on multiple requested types. In the example above, the expected behavior is that should be for the bundle type, as it does not include the type. In general, the function should return (skip the bundle) only if none of the requested types are included in the current bundle type.

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --React version: 18.x.x up to latest Node version: 16.x.x up to latest the React repository. : either: - Link to code example: Relevant code: (line 72) Relevant function: The current behavior: When running the commands or , a is thrown: . This is evident in the provided screenshot. The error originates from the function in . The problem stems from how the value is handled. In these specific commands, is passed as an array (e.g., ), but the code incorrectly wraps it in another array: The function then attempts to apply the method to each element of , expecting them to be strings. However, due to the erroneous wrapping, it encounters an array instead, leading to the TypeError. The expected behavior: The or commands should run without errors. The value should be handled correctly even when passed as an array, and bundle type filtering should work as expected. Additional information: The or commands work without issues because the value is passed as a string or undefined. The function generates and arrays based on the provided names ( or ). These arrays are used for bundle filtering in the function.
Change:
: data.constructor.name, }; <del> if (typeof data[Symbol.iterator]) { // TRICKY // Don't use [...spread] syntax for this purpose. // This project uses @babel/plugin-transform-spread in "loose" mode which only works with Array values. // Other types (e.g. typed arrays, Sets) will not spread correctly. Array.from(data).forEach( (item, i) => (unserializableValue[i] = dehydrate( item, cleaned, unserializable, path.concat([i]), isPathAllowed, isPathAllowedCheck ? 1 : level + 1, )), ); } </del> <ins> // TRICKY // Don't use [...spread] syntax for this purpose. // This project uses @babel/plugin-transform-spread in "loose" mode which only works with Array values. // Other types (e.g. typed arrays, Sets) will not spread correctly. Array.from(data).forEach( (item, i) => (unserializableValue[i] = dehydrate( item, cleaned, unserializable, path.concat([i]), isPathAllowed, isPathAllowedCheck ? 1 : level + 1, )), ); </ins> unserializable.push(path);

Discussion:
This is not important but it seems that this if statement is superfluous since always returns a string.
Yeah, looks like maybe this got broken during a refactor (). Actually since we check the type right above, maybe the condition should have just been deleted entirely. (I don't remember this code very well.)
Hey, I'm gonna pick this up and try to get a PR through to tidy this :) This would be my first issue in this repo. I've given the contribution guidelines a read through, and so will do my best to follow all the CoC and best practices in there.
This issue is all yours I've the "good first issue (taken)" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim. Cheers!
Hey! Raised a PR for this. Couldn't find any unit tests that covered the function here, and I started to write a few, but thought that it was probably out of scope of this PR. Can definitely create some tests for this function if needed though!
Change:
import requestAnimationFrameForReact from 'shared/requestAnimationFrameForReact'; import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; <ins> import invariant from 'fbjs/lib/invariant'; import warning from 'fbjs/lib/warning'; </ins> // We capture a local reference to any global, in case it gets polyfilled after // this module is initially evaluated.

Discussion:
<!-- Note: if the issue is about documentation or the website, please file it at: --Do you want to request a feature or report a bug? bug What is the current behavior? <!-- 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: --The change seems to have broken the server-side rendering on : I'm attempting to the to test and getting the following error from the server-side when I load the page: It points to this line: What is the expected behavior? No ReferenceError in server-side environment. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? (not published at the time of writing) Node environment: during server-side rendering in response to a browser request.
fixed in
Change:
// See how long the subsequent batch of React work was. const [startTime, stopTime] = getBatchRange(batchUID, profilerData); if (stopTime - startTime > NESTED_UPDATE_DURATION_THRESHOLD) { <del> schedulingEvent.warning = WARNING_STRINGS.NESTED_UPDATE; </del> <ins> // Don't warn about transition updates scheduled during the commit phase. // e.g. useTransition, useDeferredValue // These are allowed to be long-running. if ( !schedulingEvent.lanes.some( lane => profilerData.laneToLabelMap.get(lane) === 'Transition', ) ) { schedulingEvent.warning = WARNING_STRINGS.NESTED_UPDATE; } </ins> } }); state.potentialSuspenseEventsOutsideOfTransition.forEach(

Discussion:
This feature is meant to warn about sync priority updates that block paint (e.g. set state in layout effect) but it appears to also warn for transition priority updates. We should fix this.
Change:
chrome.runtime.onMessage.addListener(onPortMessage); chrome.devtools.inspectedWindow.eval(` <del> window.postMessage({ source: 'react-devtools-extension', extensionId: "${CURRENT_EXTENSION_ID}" payload: { type: 'fetch-file-with-cache', url: "${url}", }, }); `); </del> <ins> window.postMessage({ source: 'react-devtools-extension', extensionId: "${CURRENT_EXTENSION_ID}", payload: { type: 'fetch-file-with-cache', url: "${url}", }, }, '*'); `); </ins> }; // Fetching files from the extension won't make use of the network cache

Discussion:
a website that uses React. an element that uses Hooks. to load hook names. hook names always fails: !
Fix landed in , it should be a few days before it can be published to the Chrome Web Store, since it needs to go through the review process.
Change:
if (__DEV__) { if (typeof (type: any).tag === 'number') { console.error( <del> 'Received an unexpected object in getComponentName(). ' + </del> <ins> 'Received an unexpected object in getComponentNameFromType(). ' + </ins> 'This is likely a bug in React. Please file an issue.', ); }

Discussion:
A very small thing, would it be better to change the to in the error log since we separated the original logic into two functions (, )? Although it wouldn't be an issue for the authors, it feels like it would be better to sync it with the function name? Would you mind renaming it in the next 'typo fixing'?
Thanks!
Change:
// Without this, we would see a "Download failed: network error" failure. let downloadUrl = null; <del> export function downloadFile(filename: string, text: string): void { </del> <ins> export function downloadFile( element: HTMLAnchorElement, filename: string, text: string, ): void { </ins> const blob = new Blob([text], {type: 'text/plain;charset=utf-8'}); if (downloadUrl !== null) {

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:
<li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' %} class="active"{% endif %}>docs</a></li> <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>support</a></li> <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>download</a></li> <ins> <li><a href="/react/blog.html"{% if page.sectionid == 'blog' %} class="active"{% endif %}>blog</a></li> </ins> <li><a href="http://github.com/facebook/react">github</a> </ul> <!-- <iframe src="http://ghbtns.com/github&#45;btn.html?user=facebook&#38;repo=react.js&#38;type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->

Discussion:
I am having an issue with text based inputs in React 0.14.3 and React DOM 0.14.3. When the event is fired for an input, the input will be deselected. Here is what this looks like in the UI: ! Here is an example of my components. There is a top-level component, which describes the fields on the form. This component also holds the state of the form and is the only component that extends . For each field in the form, there is a child component—which each has a and child. The form also has one component, which, when clicked, will fire an function with the state of the form. With the exception of , these components are all stateless functional components. The components are controlled. They get their value from the top level form component. The state is properly updated in this top level after the event is fired—as you would expect things to typically work with a controlled form. This state is then passed down via props to the input. I've been trying to figure out what could possibly be the cause of this weird deselection issue, but haven't made any progress... any ideas? Thanks.
This causes it: On every render the is a different random value. When the key is different, then React will not reuse the old component. So you lose focus because the input got replaced.
Ah, right, that would make sense. Bad mistake! Thanks.
as a key is definitely a bad idea
Haha, yes. I have long sense moved away from this solution.
Change:
description: How to build advanced composite components. layout: docs prev: event-handling.html <del> next: api.html </del> <ins> next: mixins.html </ins> --- Composite components extend a `ReactCompositeComponent` base class that provides

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:
safeUnmount(); node.innerHTML = nodeWaitingToConnectHTML; <ins> disconnectedCallback(); </ins> } function onError({code, message}) {

Discussion:
Any client that connects to the standalone DevTools While using the standalone DevTools app: a client to the DevTools that client and you should be redirected to the introduction page The event listeners are not re-attached to the splash page elements after the client disconnects. The <scripttags that can be copied on click and the "Profiler tab" link stop working. Every time No response No response No response No response No response No response
I was thinking about two ways to fix this issue: set a MutationObserver to re-attach the listeners when the contents of the root node are changed, or add a callback to the DevToolsUI in the core of the standalone version and re-attach the listeners on that callback.
Nice find! If you'd be interested in submitting a proposal (PR) I'd be happy to review and discuss.
Sure thing, will do!
Change:
id: docs-api title: React API layout: docs <del> prev: advanced-components.html </del> <ins> prev: mixins.html </ins> --- ## React

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:
@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; }

Discussion:
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 .
Change:
); break; case ReactMultiChildUpdateTypes.TEXT_CONTENT: <del> update.parentNode[textContentAccessor] = update.textContent; </del> <ins> updateTextContent( update.parentNode, update.textContent ); </ins> break; case ReactMultiChildUpdateTypes.REMOVE_NODE: // Already removed by the for-loop above.

Discussion:
On re-render, we innerText. This causes inconsistencies in rendering whitespace. See demo: We should make sure this doesn't happen.
We switched to use but it broke some contentEditable stuff internal to FB. knows more.
I'm switching it back (D1174395), but regardless, this is an innerText issue. Browsers that don't have textcontent (ie8) suffer
looks like this was brought up in
Right, we should also do the right thing in IE8.
jQuery empties then adds a text node. Relevant commits: ()
okay interesting. I'll do this for ie8
I have a patch almost ready.
I'm curious if is a simpler solution to the newline problem (for IE8), or if that only works for innerHTML.
hmm interesting. We definitely want to preserve whitespace though. (because of and and )
Change:
.example-enter.example-enter-active, .example-leave { margin-left: 0; <del> opacity: 0.99; </del> <ins> opacity: 1; </ins> } .animateExample {

Discussion:
Hello, Today I have spotted the bug(?) in IE10/IE11: while setting the inner HTML on any element (, , ) using property the browser will raise an error . I use this with SSR, but the actual HTML received from the server is good, so probably there's a problem with func. Some code: where is some string that contains HTML. !
Hey! This was fixed in and is a known issue. A fix should be out in the next release. However thank you for the great write up!
React has been released. Please update , , and (if you use it) to this version and let us know if it solved the issue! We’d appreciate if you could test before Monday when we plan to get out.
Hi Dan, everything is working now, thank you!
Change:
<ins> /** * Copyright (c) 2013-present, Facebook, Inc. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * @providesModule Circle.art * @typechecks * * Example usage: * <Circle *   radius={10} *   stroke="green" *   strokeWidth={3} *   fill="blue" * /> * */ 'use strict'; var assign = require('object-assign'); var PropTypes = require('prop-types'); var React = require('react'); var ReactART = require('react-art'); var createReactClass = require('create-react-class'); var Path = ReactART.Path; var Shape = ReactART.Shape; /** * Circle is a React component for drawing circles. Like other ReactART * components, it must be used in a <Surface>. */ var Circle = createReactClass({ displayName: 'Circle', propTypes: { radius: PropTypes.number.isRequired, }, render: function render() { var radius = this.props.radius; var path = Path() .moveTo(0, -radius) .arc(0, radius * 2, radius) .arc(0, radius * -2, radius) .close(); return React.createElement(Shape, assign({}, this.props, {d: path})); }, }); module.exports = Circle; </ins>

Discussion:
It seems like those were intended to be public APIs () but they’re not published on npm because folder is not in the whitelist.
Change:
'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 = {

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:
<del> --- pygments: true </del> <ins> --- markdown: redcarpet </ins> name: React <ins> redcarpet: extensions: - fenced_code_blocks </ins> react_version: 0.3.0 <del> exclude: </del> <ins> pygments: true exclude: </ins> - Gemfile - Gemfile.lock - README.md - Rakefile <del> redcarpet: extensions: - fenced_code_blocks markdown: redcarpet </del> baseurl: /react

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:
// might want to still have setTimeout trigger scheduleWork as a backup to ensure // that we keep performing work. isAnimationFrameScheduled = true; <del> requestAnimationFrameForReact(animationTick); </del> <ins> localRequestAnimationFrame(animationTick); </ins> } return scheduledCallbackConfig; };

Discussion:
<!-- Note: if the issue is about documentation or the website, please file it at: --Do you want to request a feature or report a bug? bug What is the current behavior? <!-- 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: --The change seems to have broken the server-side rendering on : I'm attempting to the to test and getting the following error from the server-side when I load the page: It points to this line: What is the expected behavior? No ReferenceError in server-side environment. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? (not published at the time of writing) Node environment: during server-side rendering in response to a browser request.
fixed in