jiebi/CodeConvo huggingface dataset:
Change:
); } }); <ins> it('should not warn about transition updates scheduled during commit phase', async () => { function Component() { const [value, setValue] = React.useState(0); // eslint-disable-next-line no-unused-vars const [isPending, startTransition] = React.useTransition(); Scheduler.unstable_yieldValue( `Component rendered with value ${value}`, ); // Fake a long render if (value !== 0) { Scheduler.unstable_yieldValue('Long render'); startTime += 20000; } React.useLayoutEffect(() => { startTransition(() => { setValue(1); }); }, []); return value; } if (gate(flags => flags.enableSchedulingProfiler)) { const cpuProfilerSample = creactCpuProfilerSample(); const root = ReactDOM.createRoot(document.createElement('div')); act(() => { root.render(<Component />); }); expect(Scheduler).toHaveYielded([ 'Component rendered with value 0', 'Component rendered with value 0', 'Component rendered with value 1', 'Long render', ]); const testMarks = []; clearedMarks.forEach(markName => { if (markName === '--component-render-start-Component') { // Fake a long running render startTime += 20000; } testMarks.push({ pid: ++pid, tid: ++tid, ts: ++startTime, args: {data: {}}, cat: 'blink.user_timing', name: markName, ph: 'R', }); }); const data = await preprocessData([ cpuProfilerSample, ...createBoilerplateEntries(), ...testMarks, ]); data.schedulingEvents.forEach(event => { expect(event.warning).toBeNull(); }); } }); it('should not warn about deferred value updates scheduled during commit phase', async () => { function Component() { const [value, setValue] = React.useState(0); const deferredValue = React.useDeferredValue(value); Scheduler.unstable_yieldValue( `Component rendered with value ${value} and deferredValue ${deferredValue}`, ); // Fake a long render if (deferredValue !== 0) { Scheduler.unstable_yieldValue('Long render'); startTime += 20000; } React.useLayoutEffect(() => { setValue(1); }, []); return value + deferredValue; } if (gate(flags => flags.enableSchedulingProfiler)) { const cpuProfilerSample = creactCpuProfilerSample(); const root = ReactDOM.createRoot(document.createElement('div')); act(() => { root.render(<Component />); }); expect(Scheduler).toHaveYielded([ 'Component rendered with value 0 and deferredValue 0', 'Component rendered with value 1 and deferredValue 0', 'Component rendered with value 1 and deferredValue 1', 'Long render', ]); const testMarks = []; clearedMarks.forEach(markName => { if (markName === '--component-render-start-Component') { // Fake a long running render startTime += 20000; } testMarks.push({ pid: ++pid, tid: ++tid, ts: ++startTime, args: {data: {}}, cat: 'blink.user_timing', name: markName, ph: 'R', }); }); const data = await preprocessData([ cpuProfilerSample, ...createBoilerplateEntries(), ...testMarks, ]); data.schedulingEvents.forEach(event => { expect(event.warning).toBeNull(); }); } }); </ins> }); describe('errors thrown while rendering', () => {

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:
} .example-enter.example-enter-active { <del> opacity: 0.99; </del> <ins> opacity: 1; </ins> } ```

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:
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>'],

Discussion:
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.
Change:
const sigCallID = path.scope.generateUidIdentifier('_s'); path.scope.parent.push({ id: sigCallID, <del> init: t.callExpression(t.identifier('$RefreshSig$'), []), </del> <ins> init: t.callExpression(refreshSig, []), </ins> }); // The signature call is split in two parts. One part is called inside the function.

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:
injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor)); <del> mixSpecIntoComponent(Constructor, IsMountedMixin); </del> <ins> mixSpecIntoComponent(Constructor, IsMountedPreMixin); </ins> mixSpecIntoComponent(Constructor, spec); <ins> mixSpecIntoComponent(Constructor, IsMountedPostMixin); </ins> // Initialize the defaultProps property after all mixins have been merged. if (Constructor.getDefaultProps) {

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:
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> ); var internalInstance = getInternalInstanceReadyForUpdate(publicInstance);

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:
var renderedComponent = inst.render(); if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. <del> if (typeof renderedComponent === 'undefined' && </del> <ins> if (renderedComponent === undefined && </ins> inst.render._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience.

Discussion:
Introduction I found a bug on resolving default props when component props have property with HTMLAllCollection. React ignores value and uses default value (it should take that collection). isIE9OrLower (look at the end of topic) is simple function to test Internet Explorer in version 9 or lower. Simple use case: Chrome/Firefox/modern IE (yeah, i know....) returns HTMLAllColection (as ), but old IE returns true. HTMLAllCollection is weird collection: Source of bug and fix release: 0.14.7 file: line: 9149 code (bug): if (typeof props[propName] === 'undefined') { code (fix): if (props[propName] === undefined) { Btw, === undefined is faster than typeof === 'undefined' on Chrome and IE. Reproduction Open in Firefox / Chrome / IE10 or higher. Fiddle: Raw: Workaround Change to
Haha, browsers suck. Want to submit a PR? It looks like we do that thing unnecessarily in a few places in the React codebase. Note that we do need to use typeof if the binding might not exist, so we need to look at each case individually to make sure the change is valid there.
I went through the react repo configuration (build, tests execution). Fix didn't break anything, but so far I didn't find solution to make good test (phantomjs doesn't have property). (HTMLAllCollection) is probably the only exception to the typeof and is not a html standard. Any suggestions to the unit test for this fix/improvement?
As long as you tested it manually and it worked in IE, I think we can accept this change without a unit test.
Fixed in
lol what even
I can't reproduce being in IE 8 or IE 9 on Windows 7, either in standards or quirks mode. What am I missing?
IE < 10 is fine. Problem occurs when using modern browser like Chrome, Firefox, IE = 10 or Edge. They returns . component prop as in Chrome. will compare your prop with default prop (which is ). on Chrome is so React treats it as missing value. Default prop () will be selected. the end, prop will be always set to on modern browser in this case.
Oh! Sorry I totally misread. Yes I can repro this.
Change:
return 0; }; } else { <del> rAF = requestAnimationFrame; </del> rIC = requestIdleCallback; } <del> exports.rAF = rAF; </del> exports.rIC = rIC;

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:
topLevelTypes.topContextMenu, topLevelTypes.topFocus, topLevelTypes.topKeyDown, <ins> topLevelTypes.topKeyUp, </ins> topLevelTypes.topMouseDown, topLevelTypes.topMouseUp, topLevelTypes.topSelectionChange,

Discussion:
Do you want to request a feature or report a bug? Bug. What is the current behavior? Right now, React provides a cross-browser workaround for the event. , so React hacks around this by evaluating the selection after both and , which is smart! However, if you haven't an handler to your component, the part of the selection listening hack for Firefox won't ever fire. Which means if you happen to be doing something in that changes the selection, it won't be caught by as expected, such that the next time fires, the handler will be triggered (via the part of the hack), since React thinks the selection has changed. Example: You place your cursor at the end of a sentence. fires thanks to . updates the selection. You the last character: you handle deleting the character, and preventing default. doesn't fire, because on change hasn't taken place yet, as expected. updates the selection. You another character: you handle deleting another character. fires thanks to , but its internal state is comparing it to the selection before it was updated by , so it is out of date. Not expected. If you add a noop handler for , this problem goes away, since will always fire after rendering thanks to , and then it will never fire incorrectly due to . An example is in , actually doesn't do anything. Except without, the handling wouldn't stay in sync in Firefox. What is the expected behavior? Ideally I'd think that the event hack would still fire even without having to have the developer add a noop to their component? Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 15 in Firefox.
Thanks for the detailed report Sorry I didn't get to this until now. This should be an easy fix – just adding onKeyUp below onKeyDown here:
Change:
var isInputEventSupported = false; if (ExecutionEnvironment.canUseDOM) { // IE9 claims to support the input event but fails to trigger it when <del> // deleting text, so we ignore its input events </del> <ins> // deleting text, so we ignore its input events. // IE10+ fire input events to often, such when a placeholder // changes or when an input with a placeholder is focused. </ins> isInputEventSupported = isEventSupported('input') && ( <del> !('documentMode' in document) || document.documentMode > 9 </del> <ins> !('documentMode' in document) || document.documentMode > 11 </ins> ); } /** <del> * (For old IE.) Replacement getter/setter for the `value` property that gets </del> <ins> * (For IE <=11) Replacement getter/setter for the `value` property that gets </ins> * set on the active element. */ var newValueProp = {

Discussion:
Check: Tested in IE10. Likely related to .
We're having issues with this too and had to put in a workaround to deal with it. is this on your roadmap?
Having the same issue with on using IE 11.0.
I have the same issue as when adding a placeholder a textarea, with no value, the onChange event is fired.
I hava the same issue. A input with a placeholder and no value, the onChange event is fired.

See for example code. When setting and removing focus from an empty field with some text, the event is triggered for IE 11 (I have not tested older versions). It does not trigger for other browsers. My current work-around is to test the that was last passed to the input with what is returned by , and only act if they are different, but it would be nice if React would not send the change-event in the first place.
Sounds like a browser quark that we should normalize against, right? Is there anything other than value that we would need to check?
Yeah, this seems odd. Probably on the challenging side for a first bug, but it would be good to figure out why this is happening and how we can prevent it, while still making it possible to type the placeholder text in directly as says.
, not really related but I imagine both could be solved by a similar fix.
Also goes for IE10.
Change:
var result = {}; result[DOMProperty.ID_ATTRIBUTE_NAME] = item.id; result.type = item.type; <del> result.args = JSON.stringify(item.args); </del> <ins> result.args = JSON.stringify(item.args, stripComplexValues); </ins> return result; })); console.log(

Discussion:
Identical app. I call after the app is loaded. React 0.14.7: <img width="622" alt="screen shot 2016-03-17 at 20 31 56" src=""React 15.0 RC1, RC2 and master: <img width="635" alt="screen shot 2016-03-17 at 20 34 02" src=""We should fix this before releasing 15.0.
There seem to be two distinct things causing this issue: is now a possible argument for and points to DOM nodes which now have a hidden field which points to the component instances which point to .. DOM nodes, I guess. now accepts a argument for a better warning which pulls component instances into the which in turn pull nodes which in turn pull components.
Change:
window.devtools = devtools; window.server = devtools .setContentDOMNode(document.getElementById("container")) <ins> .setDisconnectedCallback(attachListeners) </ins> .setStatusListener(function(status) { const element = document.getElementById("loading-status"); if (element) {

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:
}; } <ins> // 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(); </ins> export function attach( hook: DevToolsHook, rendererID: number,

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:
;(function(){ var urls = [ <ins> '../src/shared/vendor/third_party/webcomponents.js', </ins> '../vendor/jasmine/jasmine.js', '../vendor/jasmine/jasmine-support.js', '../vendor/jasmine/jasmine-html.js',

Discussion:
Our tests currently only pass in the browser when running in Chrome. This is because it supports WebComponents already. However they fail in every other browser. I think this is because of when is actually loaded. It's currently getting packaged into react-test because we're requiring it. It creates a new which is resulting in nodes we create with to have a different prototype than what is expected in WebComponents. WebComponents's new Node prototype has a different implementation of which does an check which our nodes are failing. I think if we loaded into the browser before we loaded JS, the node we create for markup wrapping would have the right prototype.
Change:
); } <ins> function _assertCheckedLink(input) { _assertSingleLink(input); invariant( input.props.checked == null && input.props.onChange == null, 'Cannot provide a checkedLink and a checked property or onChange event. ' + 'If you want to use checked or onChange, you probably don't want to ' + 'use checkedLink' ); } </ins> /** * @param {SyntheticEvent} e change event to handle */

Discussion:
When using ReactLink with checkboxes or dropdowns, the state should not be bound to 'value', but to 'checked' and 'selected' instead.
I guess it's not obvious what the API should be here. I suppose the most obvious way is to do but keep as-is (and should still not work). Any opinions?
Either or change to do the same thing as ?
Change:
// The error will correctly point to `url` in Firefox. e.fileName = url; } <del> e.message += url + ':' + e.lineNumber + ':' + e.column; </del> <ins> e.message += url + ':' + e.lineNumber + ':' + e.columnNumber; </ins> } else { e.message += location.href; }

Discussion:
When attempting to use a react class with a lowercase ClassName, the transformer is not able to display line on which the error occurred. It turns out that the event variable passed to the to function does not contain an attribute called lineNumber. An error is thrown that states: Uncaught TypeError: Cannot read property 'replace' of undefined The actual error has only the properties and . Error: Lower case component names (myClass) are no longer supported in JSX: See at
What environment/browser are you in?
I am running Yosemite and in Chrome. Also using the jsxtransformer and react provided by the CDN. On Tuesday, November 25, 2014, Paul O’Shannessy wrote: Cooper Union EE' 14
Change:
getDisplayName, getDisplayNameForReactElement, } from 'react-devtools-shared/src/utils'; <ins> import {format} from 'react-devtools-shared/src/backend/utils'; </ins> import { REACT_SUSPENSE_LIST_TYPE as SuspenseList, REACT_STRICT_MODE_TYPE as StrictMode,

Discussion:
This function will throw this error if one of the arguments is type of . The error is swallowed but it does interfere with debugging. When I run with the "pause on caught exceptions" I get trapped here all the time. Can we change into ??? Every time No response 13.2- TypeError: Cannot convert a Symbol value to a string No response No response No response