jiebi/CodeConvo huggingface dataset:
Change:
<div className={styles.HooksTreeView}> <div className={styles.HeaderRow}> <div className={styles.Header}>hooks</div> <del> {enableHookNameParsing && !parseHookNames && ( </del> <ins> {enableHookNameParsing && (!parseHookNames || hookParsingFailed) && ( </ins> <Toggle <ins> className={hookParsingFailed ? styles.ToggleError : null} </ins> isChecked={parseHookNamesOptimistic} <del> isDisabled={parseHookNamesOptimistic} </del> <ins> isDisabled={parseHookNamesOptimistic || hookParsingFailed} </ins> onChange={handleChange} <del> title={ parseHookNames ? 'Parse hook names' : 'Parse hook names (may be slow)' }> </del> <ins> title={toggleTitle}> </ins> <ButtonIcon type="parse-hook-names" /> </Toggle> )}

Discussion:
The named hooks cache returns The first (mixed array of string and null) indicates an overall success, even if some names couldn't be inferred. The second indicates an error (e.g. couldn't locate or load source map). In the event of the 2nd response type, the UI currently does nothing (falls back to default) but we should show an error badge (maybe a disabled but red icon with a tooltip saying there was an error) since it's a confusing user experience to just do nothing.
Change:
} const {types: t} = babel; <ins> const refreshReg = t.identifier(opts.refreshReg || '$RefreshReg$'); const refreshSig = t.identifier(opts.refreshSig || '$RefreshSig$'); </ins> const registrationsByProgramPath = new Map(); function createRegistration(programPath, persistentID) {

Discussion:
Do you want to request a feature or report a bug? Feature Right now babel plugin emits globals: It would be nice to have them configurable. That would allow to use in environments like SystemJS and have simpler implementation: If you don't mind I could create PR with changes to react-refresh/babel next week. environment:
Happy to take a PR.
Change:
<del> 'use strict'; var _extends = Object.assign || function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /** * 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 Rectangle.art * @typechecks * * Example usage: * <Rectangle *   width={50} *   height={50} *   stroke="green" *   fill="blue" * /> * * Additional optional properties: *   (Number) radius *   (Number) radiusTopLeft *   (Number) radiusTopRight *   (Number) radiusBottomLeft *   (Number) radiusBottomRight * */ var PropTypes = require('prop-types'); var React = require('react'); var ReactART = require('..'); var createReactClass = require('create-react-class'); var Shape = ReactART.Shape; var Path = ReactART.Path; /** * Rectangle is a React component for drawing rectangles. Like other ReactART * components, it must be used in a <Surface>. */ var Rectangle = createReactClass({ displayName: 'Rectangle', propTypes: { width: PropTypes.number.isRequired, height: PropTypes.number.isRequired, radius: PropTypes.number, radiusTopLeft: PropTypes.number, radiusTopRight: PropTypes.number, radiusBottomRight: PropTypes.number, radiusBottomLeft: PropTypes.number, }, render: function render() { var width = this.props.width; var height = this.props.height; var radius = this.props.radius ? this.props.radius : 0; // if unspecified, radius(Top|Bottom)(Left|Right) defaults to the radius // property var tl = this.props.radiusTopLeft ? this.props.radiusTopLeft : radius; var tr = this.props.radiusTopRight ? this.props.radiusTopRight : radius; var br = this.props.radiusBottomRight ? this.props.radiusBottomRight : radius; var bl = this.props.radiusBottomLeft ? this.props.radiusBottomLeft : radius; var path = Path(); // for negative width/height, offset the rectangle in the negative x/y // direction. for negative radius, just default to 0. if (width < 0) { path.move(width, 0); width = -width; } if (height < 0) { path.move(0, height); height = -height; } if (tl < 0) { tl = 0; } if (tr < 0) { tr = 0; } if (br < 0) { br = 0; } if (bl < 0) { bl = 0; } // disable border radius if it doesn't fit within the specified // width/height if (tl + tr > width) { tl = 0; tr = 0; } if (bl + br > width) { bl = 0; br = 0; } if (tl + bl > height) { tl = 0; bl = 0; } if (tr + br > height) { tr = 0; br = 0; } path.move(0, tl); if (tl > 0) { path.arc(tl, -tl); } path.line(width - (tr + tl), 0); if (tr > 0) { path.arc(tr, tr); } path.line(0, height - (tr + br)); if (br > 0) { path.arc(-br, br); } path.line(-width + (br + bl), 0); if (bl > 0) { path.arc(-bl, -bl); } path.line(0, -height + (bl + tl)); return React.createElement(Shape, _extends({}, this.props, {d: path})); }, }); module.exports = Rectangle; </del>

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

Discussion:
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
Change:
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); });

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> class Pure extends React.PureComponent { render() { return this.props.children; } } </del> const renderer = ReactTestRenderer.create( <React.Profiler id="outer" onRender={callback}> <Updater> <del> <React.Profiler id="middle" onRender={callback}> <Pure> <React.Profiler id="inner" onRender={callback}> <div /> </React.Profiler> </Pure> </del> <ins> <React.Profiler id="inner" onRender={callback}> <div /> </ins> </React.Profiler> </Updater> </React.Profiler>, ); // All profile callbacks are called for initial render <del> expect(callback).toHaveBeenCalledTimes(3); </del> <ins> expect(callback).toHaveBeenCalledTimes(2); </ins> callback.mockReset();

Discussion:
: However, given: I'm getting a log when I click on the unprofiled counter. Reproduction: Am I misunderstanding this API, or is this a bug?
As the state is being updated by Counter function which is being called on both the profiled and unprofiled counter, is causing re render and is being called both the times.
Thanks but I'm pretty sure that the way it's documented (and what would be sensible) it shouldn't be operating like that. Also, I tried making a separate component instead of using the same one and I got the same result.
At a quick glance it does look unexpected. Don't have time to dig in further at the moment though.
It seems that this occurs for elements which have same type with greater or equal depth in same tree. See:
I don't think it has anything to do with the element type, but where they are declared relative to where the tags are defined. It looks like for a subtree that belongs to a single owner- rendering further down in the subtree will cause the Profiler higher up to call . Given the above example:
This does not look to be hooks-specific, nor is it a recent regression. (Same behavior is exhibited for class components in the earliest release of the Profiler component- v16.5.)
It seems that the is always marked as in phase.
Thanks
Change:
var shouldUpdateReactComponent = require('shouldUpdateReactComponent'); var warning = require('warning'); <ins> var MIXINS_KEY = keyOf({mixins: null}); </ins> /** * Policies that describe methods in `ReactCompositeComponentInterface`. */

Discussion:
Right now we don't do this consistently, so you could have behavior that varies depending on where you put the key in your class spec. That's not great. Here's an example: (using master) This outputs: I think we should consistently behave like CompB (component, then mixin methods) but disagrees. Any other opinions. Potentially interested (once we figure out which way we go)? This is relatively contained and testable but it does take you right into core.
Doing mixins first is more intuitive to me because that's normally how people write the specs (in my experience, at least).
Hi, thanks for the mention. I'd like to take on this if nobody minds. I agree with that calling mixins first is more intuitive.
Go for it! Let me know if you have any questions; I'm happy to help.
OK great. I'll try to do it tomorrow.
Mention me if there's something else I can take. I liked that although this task had a small scope, it introduced me to the way actually works and how spec transforms into a component instance. It would be cool if I could take a few small tasks in other areas (rendering, batching) that introduce me to these areas.
Change:
}; case 'string': <del> return data.length <= 500 ? data : data.slice(0, 500) + '...'; </del> <ins> isPathAllowedCheck = isPathAllowed(path); if (isPathAllowedCheck) { return data; } else { return data.length <= 500 ? data : data.slice(0, 500) + '...'; } </ins> case 'bigint': cleaned.push(path);

Discussion:
This can cause long file names (URLs) to be truncated which in turn will break named hooks code (since it needs to load those file names).
Change:
"manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.", <del> "version": "5.3.1", "version_name": "5.3.1", </del> <ins> "version": "6.0.0", "version_name": "6.0.0", </ins> "minimum_chrome_version": "102", "icons": { "16": "icons/16-production.png",

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:
author: vjeux --- <del> [JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](https://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](https://jsfiddle.net/vjeux/VkebS/) is also available. </del> <ins> [JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available. </ins> <blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>

Discussion:
The Post gave an example of reconciliation by this . but It's not working, If I understand correctly, it should be something like . Should I create a PR by change the url to fix it?
The problem is that it is a https link for a fiddle that only supports http. There are actually more links with the same bug. Updating the fiddles would be one way to fix it, but that is a lot of work. And since the fiddles are part of old blog posts, it would be kind of like rewriting history. In my opinion the best way to fix it is reverting the links back to http. See for my proposed solution.
I see, thank u
I feel like the more 'correct'/'ideal' solution is to have the fiddle authors update their fiddles. That said, I don't feel too strongly, and will let make the decision on this.
Change:
// Mount const create = effect.create; <ins> if (__DEV__) { if ((flags & HookInsertion) !== NoHookEffect) { setIsRunningInsertionEffect(true); } } </ins> effect.destroy = create(); <ins> if (__DEV__) { if ((flags & HookInsertion) !== NoHookEffect) { setIsRunningInsertionEffect(false); } } </ins> if (enableSchedulingProfiler) { if ((flags & HookPassive) !== NoHookEffect) {

Discussion:
Following up on (/cc ) React version: 18.0.0-rc.3-next-- an update (e.g. ) from within Link to code example: Update is applied and no warning is issued. According to cannot schedule updates. But seems to "work". Maybe this is just incidental because it's the first render? I got the impression that this should definitely cause a warning (not implemented) but I wonder if we also should consistently drop updates from ?
Change:
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,

Discussion:
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.
Change:
} var callback = scheduledRAFCallback; scheduledRAFCallback = null; <del> if (callback) { </del> <ins> if (callback !== null) { </ins> callback(rafTime); } }; <del> rAF = function(callback: (time: number) => void): number { // This assumes that we only schedule one callback at a time because that's // how Fiber uses it. scheduledRAFCallback = callback; if (!isAnimationFrameScheduled) { // If rIC didn't already schedule one, we need to schedule a frame. isAnimationFrameScheduled = true; requestAnimationFrame(animationTick); } return 0; }; </del> rIC = function(callback: (deadline: Deadline) => void): number { // This assumes that we only schedule one callback at a time because that's // how Fiber uses it.

Discussion:
We don't use rAF for scheduling anything anymore, yet we still enable it in ReactDOMFrameScheduling. It can probably be simplified a bit by not exposing it.
Change:
renderCode={true} transformer={transformer.bind(null, this.state.harmony)} showCompiledJSTab={false} <ins> showLineNumbers={true} </ins> /> <label className="compiler-option"> <input

Discussion:
is a tool for transforming jsx into js. If the supplied code contains syntax errors, the error displays an line number but since the code field doesn't have line numbers its hard to identify the actual line itself. !
Change:
"version": "0.15.0-alpha", "description": "React package for working with the DOM.", "main": "index.js", <del> "repository": { "type": "git", "url": "git+https://github.com/facebook/react.git" }, </del> <ins> "repository": "facebook/react", </ins> "keywords": [ "react" ],

Discussion:
Follow-up for : The react-addons-* packages should have a entry in their files.
Change:
}); }).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> ); });

Discussion:
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?
Change:
function getCommandArgs() { // Add the correct Jest config. const args = ['./scripts/jest/jest.js', '--config']; <del> if (argv.build) { </del> <ins> if (argv.project === 'devtools') { args.push(devToolsConfig); } else if (argv.build) { </ins> args.push(buildConfig); } else if (argv.persistent) { args.push(persistentConfig); <del> } else if (argv.project === 'devtools') { args.push(devToolsConfig); </del> } else if (isWWWConfig()) { args.push(wwwConfig); } else if (isOSSConfig()) {

Discussion:
This doesn't actually run any DevTools tests. It runs the main React tests. Console output shows that it's choosing the wrong config: I wonder if this is also happening for other targets?
It's because of this: DevTools uses both and
Change:
"engines": { "node": ">=0.10.0" }, <del> "preferGlobal": true </del> <ins> "preferGlobal": true, "commonerConfig": { "version": 1 } </ins> }

Discussion:
I'd rather do it , if you don't mind.
I think we should do both. I think a forced clean should force clean all of the build artifacts (of which .module-cache is a part of).
can we distinguish between and ?
In what situation would you want to clean but not remove ?
I'm actually not aware of any other use cases for so maybe this is fine. But it still means we need to tell people to do if they encounter problems that might be fixed by doing so, whereas gives us a way to get the same effect with no verbal communication.
I'm going to do it. I think we should probably also do .
Closed by .
Change:
const map: HookNames = new Map(); hooksList.map(hook => { <del> // TODO (named hooks) We should probably filter before this point, // otherwise we are loading and parsing source maps and ASTs for nothing. if (isNonDeclarativePrimitiveHook(hook)) { if (__DEBUG__) { console.log('findHookNames() Non declarative primitive hook'); } // Not all hooks have names (e.g. useEffect or useLayoutEffect) return null; } </del> // We already guard against a null HookSource in parseHookNames() const hookSource = ((hook.hookSource: any): HookSource); const fileName = hookSource.fileName;

Discussion:
Hooks like or will never have names, so if a the only hooks for a given source file are these "unnamed" built-in hooks, we should skip loading the source code.
Change:
inspectElement, } from 'react-devtools-shared/src/inspectedElementCache'; import {loadHookNames} from 'react-devtools-shared/src/hookNamesCache'; <del> import {ElementTypeFunction} from 'react-devtools-shared/src/types'; </del> import LoadHookNamesFunctionContext from 'react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext'; import {SettingsContext} from '../Settings/SettingsContext';

Discussion:
The named hooks cache returns The first (mixed array of string and null) indicates an overall success, even if some names couldn't be inferred. The second indicates an error (e.g. couldn't locate or load source map). In the event of the 2nd response type, the UI currently does nothing (falls back to default) but we should show an error badge (maybe a disabled but red icon with a tooltip saying there was an error) since it's a confusing user experience to just do nothing.
Change:
case ContextConsumer: case MemoComponent: case SimpleMemoComponent: <ins> case ForwardRef: </ins> // For types that execute user code, we check PerformedWork effect. // We don't reflect bailouts (either referential or sCU) in DevTools. // eslint-disable-next-line no-bitwise

Discussion:
profiling "a" into the input profiling ! Every time No response 24.3- No response No response No response No response
Hey, I tried the steps you mentioned with the same version of Dev Tools and it works for me (image attached) on Chrome (Version 100.0.4896.127 (Official Build) (64-bit)), could you also mention the browser and its version along with your operating system and version. !
I linked the wrong codesandbox. Let me update it. If you wrap ValueReader in forwardRef you should be able to reproduce
Updated codesandbox. should reproduce
Change:
import {enableHookNameParsing} from 'react-devtools-feature-flags'; import LRU from 'lru-cache'; import {SourceMapConsumer} from 'source-map'; <del> import {getHookName, isNonDeclarativePrimitiveHook} from './astUtils'; </del> <ins> import {getHookName} from './astUtils'; </ins> import {areSourceMapsAppliedToErrors} from './ErrorTester'; import {__DEBUG__} from 'react-devtools-shared/src/constants'; import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';

Discussion:
Hooks like or will never have names, so if a the only hooks for a given source file are these "unnamed" built-in hooks, we should skip loading the source code.
Change:
> [Listening Scroll Event](https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk) > <del> >  * [JSFiddle](https://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not. </del> <ins> >  * [JSFiddle](http://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not. </ins> > > [Fade-in Transition](https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo) > <del> >  * [JSFiddle](https://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node. >  * [JSFiddle](https://jsfiddle.net/R8f5L/5/): Using CSS transition instead. </del> <ins> >  * [JSFiddle](http://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node. >  * [JSFiddle](http://jsfiddle.net/R8f5L/5/): Using CSS transition instead. </ins> > > [Socket.IO Integration](https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4) >

Discussion:
The Post gave an example of reconciliation by this . but It's not working, If I understand correctly, it should be something like . Should I create a PR by change the url to fix it?
The problem is that it is a https link for a fiddle that only supports http. There are actually more links with the same bug. Updating the fiddles would be one way to fix it, but that is a lot of work. And since the fiddles are part of old blog posts, it would be kind of like rewriting history. In my opinion the best way to fix it is reverting the links back to http. See for my proposed solution.
I see, thank u
I feel like the more 'correct'/'ideal' solution is to have the fiddle authors update their fiddles. That said, I don't feel too strongly, and will let make the decision on this.