jiebi/CodeConvo huggingface dataset:
Change:
We're currently not cleaning up strings from _mountImage after a component gets mounted. That memory could be freed. But the act of freeing the memory could be more expensive than it's worth. Needs proper benchmarks and a workaround.
I noticed this a little while ago. I'm not sure why we need to store it on the child instance in the first place -- PR incoming.

Discussion:
transaction, this._mountDepth + 1 ); <del> child._mountImage = mountImage; </del> child._mountIndex = index; mountImages.push(mountImage); index++;

* Creates a child component. * * @param {ReactComponent} child Component to create. <ins> * @param {string} mountImage Markup to insert. </ins> * @protected */ <del> createChild: function(child) { enqueueMarkup(this._rootNodeID, child._mountImage, child._mountIndex); </del> <ins> createChild: function(child, mountImage) { enqueueMarkup(this._rootNodeID, mountImage, child._mountIndex); </ins> }, /**

transaction, this._mountDepth + 1 ); <del> child._mountImage = mountImage; </del> child._mountIndex = index; <del> this.createChild(child); </del> <ins> this.createChild(child, mountImage); </ins> this._renderedChildren = this._renderedChildren || {}; this._renderedChildren[name] = child; },

// TODO: When is this not true? if (ReactComponent.isValidComponent(child)) { this.removeChild(child); <del> child._mountImage = null; </del> child._mountIndex = null; child.unmountComponent(); delete this._renderedChildren[name];
Change:
Should those comment sections exist? I'd rather people come to IRC. Their questions are often neglected at the bottom of a doc page.
:+1: for shutting down comments
+1
:+1:

Discussion:
<a class="docs-next" href="/react/docs/{{ page.next }}">Next &rarr;</a> {% endif %} </div> <del> <div class="fb-comments" data-width="650" data-num-posts="10" data-href="{{ site.url }}{{ site.baseurl }}{{ page.url }}"></div> </del> </div> </section>

</div> <div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div> <del> <div class="fb-comments" data-width="650" data-num-posts="10" data-href="{{ site.url }}{{ site.baseurl }}{{ page.url }}"></div> </del> </div> </section>

<a class="docs-next" href="/react/tips/{{ page.next }}">Next &rarr;</a> {% endif %} </div> <del> <div class="fb-comments" data-width="650" data-num-posts="10" data-href="{{ site.url }}{{ site.baseurl }}{{ page.url }}"></div> </del> </div> </section>
Change:
This is a tricky issue, so I'll do my best to explain: I've been using the to build my React app using AMD. I've been using a of React (with ), which is based off of master. Until recently, everything was working fine. But since , I've been unable to create optimized builds using the plugin. At first, I assumed it was an issue with the plugin, but it seems that the offending line is the changed function: Until this change, wasn't forced on, and things worked just fine. With this change, it's no longer possible to build in an AMD environment, as errors out with: My best guess is that the isn't being correctly loaded (although it is included ), but I don't know enough about Browserify to debug this. Hoping someone else can take a look and find out what's going on. (in the meantime, I suppose I'll update my branch to undo the change that set )
is this still happening for you?
just updated to v0.9.0, and yep: Unfortunately still having to maintain my own branch :(
I have the same issue.
thanks for tracking this issue down. I was trying to update React in and was puzzled by this. I will disable it manually in the modified provides.

Discussion:
*/ function transformReact(source, options) { // TODO: just use react-tools <ins> options = options || {}; </ins> var visitorList; <del> if (options && options.harmony) { </del> <ins> if (options.harmony) { </ins> visitorList = visitors.getAllVisitors(); } else { visitorList = visitors.transformVisitors.react; } return transform(visitorList, source, { <del> sourceMap: supportsAccessors </del> <ins> sourceMap: supportsAccessors && options.sourceMap </ins> }); }

} scripts.forEach(function(script, i) { <del> var options; </del> <ins> var options = { sourceMap: true }; </ins> if (/;harmony=true(;|$)/.test(script.type)) { <del> options = { harmony: true }; </del> <ins> options.harmony = true </ins> } // script.async is always true for non-javascript script tags
Change:
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 )

Discussion:
var ReactMount = require('ReactMount'); var ReactPerf = require('ReactPerf'); <del> var getTextContentAccessor = require('getTextContentAccessor'); </del> var invariant = require('invariant'); /**

style: '`style` must be set using `updateStylesByID()`.' }; <del> /** * The DOM property to use when setting text content. * * @type {string} * @private */ var textContentAccessor = getTextContentAccessor(); </del> var useWhitespaceWorkaround; /**

'updateTextContentByID', function(id, content) { var node = ReactMount.getNode(id); <del> node[textContentAccessor] = content; </del> <ins> DOMChildrenOperations.updateTextContent(node, content); </ins> } ),

} /** <ins> * Sets the text content of `node` to `text`. * * @param {DOMElement} node Node to change * @param {string} text New text content */ var updateTextContent; if (textContentAccessor === 'textContent') { updateTextContent = function(node, text) { node.textContent = text; }; } else { updateTextContent = function(node, text) { // In order to preserve newlines correctly, we can't use .innerText to set // the contents (see #1080), so we empty the element then append a text node while (node.firstChild) { node.removeChild(node.firstChild); } if (text) { var doc = node.ownerDocument || document; node.appendChild(doc.createTextNode(text)); } }; } /** </ins> * Operations for updating with DOM children. */ var DOMChildrenOperations = { dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup, <ins> updateTextContent: updateTextContent, </ins> /** * Updates a component's children by processing a series of updates. The * update configurations are each expected to have a `parentNode` property.

); 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.
Change:
React 0.8 React 0.9 I think this is because of switched to in 1.0.0. I submitted a to envify which uses instead of recast. This brings us back to 1.5s and delivers the same advantages as recast version (preserves code formatting): I think this is blocker for 0.9.0.
What command are you running, and in what directory? I'm having trouble reproducing the slow-down with just .

Discussion:
"node": ">=0.10.0" }, "peerDependencies": { <del> "envify": "~1.0.1" </del> <ins> "envify": "~1.2.0" </ins> }, "browserify": { "transform": ["envify"]

"benchmark": "~1.0.0", "browserify": "~3.20.0", "coverify": "~1.0.4", <del> "envify": "~1.0.1", </del> <ins> "envify": "~1.2.0", </ins> "es3ify": "~0.1.2", "es5-shim": "~2.3.0", "grunt": "~0.4.2",
Change:
Is transformed to: Note the trailing - this results in a syntax error. The problem seems to be with comma insertion in and related functions (e.g, ). See IRC discussion below for my findings. Relevant parts of an IRC discussion:
The root of the issue is that is a special-case in JSX, but it apparently does not take into account . Should be an easy fix. We should also look into adding I feel, just to be able to easily comment out code. EDIT: I was wrong, the special-case is handled correctly, I'll have a PR up shortly.

Discussion:
var childrenToRender = object.children.filter(function(child) { return !(child.type === Syntax.Literal && typeof child.value === 'string' <del> && child.value.match(/^[ t]*[rn][ trn]*$/)); </del> <ins> && child.value.match(/^[ t]*[rn][ trn]*$/) || child.type === Syntax.XJSExpressionContainer && child.expression.type === Syntax.XJSEmptyExpression); </ins> }); if (childrenToRender.length > 0) { utils.append(', ', state);
Change:
ReactCSSTransitionGroup doesn't work properly on (at least) Android 4.2. I've narrowed it down to the code in which is finding and properties on the test element's object and so only registering and handlers, despite the fact that Android fires events. So the end of the transition isn't properly detected. I will do some more investigation and see if there's a safer way to do this detection on Android (I seem to recall seeing something similar before).
See this patch for the Dojo toolkit: - basically on some Android versions is not . Could this be fixed by changing the order the properties are checked, so that is checked for before ?
This is still an issue on Android 4.3 (or at least on Samsung Galaxy S3 with Android 4.3). However changing the webkitTransition and transition order as suggested by it fixes the issue.
Is TransitionEvent defined or undefined on that browser? When the unprefixed version exists it's better to use that in general because it's more forwards-compatible.

Discussion:
var ExecutionEnvironment = require('ExecutionEnvironment'); <ins> /** * EVENT_NAME_MAP is used to determine which event fired when a * transition/animation ends, based on the style property used to * define that event. */ </ins> var EVENT_NAME_MAP = { transitionend: { 'transition': 'transitionend',

function detectEvents() { var testEl = document.createElement('div'); var style = testEl.style; <ins> // On some platforms, in particular some releases of Android 4.x, // the un-prefixed "animation" and "transition" properties are defined on the // style object but the events that fire will still be prefixed, so we need // to check if the un-prefixed events are useable, and if not remove them // from the map if (!('AnimationEvent' in window)) { delete EVENT_NAME_MAP.animationend.animation; } if (!('TransitionEvent' in window)) { delete EVENT_NAME_MAP.transitionend.transition; } </ins> for (var baseEventName in EVENT_NAME_MAP) { var baseEvents = EVENT_NAME_MAP[baseEventName]; for (var styleName in baseEvents) {
Change:
I am getting this error when I run jsx. Is this happening to anybody else? Am I doing something wrong?
version, how are you running it, any details to help repro? cc - this is in commoner.
Thanks for the quick reply. It happened on 0.8, 0.9 and 0.10.0-rc1. I just ran it like this. Also, if I run it on a file, like this. It works. But not when I run it against a whole directory.
Thanks a lot for the report. Looks like has updated commoner and I'm sure he'll update our dependency here as soon as he pushes that to npm.
Hey guys, thanks for the quick response, and thanks for all the good work :+1:
mysql I aslo encounter this problem today
Just in case you still have an old version of the dependency installed, you can do

Discussion:
"url": "https://github.com/facebook/react" }, "dependencies": { <del> "commoner": "~0.9.1", </del> <ins> "commoner": "^0.9.2", </ins> "esprima-fb": "~3001.1.0-dev-harmony-fb", "jstransform": "~3.0.0" },
Change:
H:githubreactgrunt Running "delete-build-modules" task Running "jsx:normal" (jsx) task Warning: This socket is closed. Use --force to continue. Aborted due to warnings. on windows. any hint?
The issue arises in the jsx task at line 42: File: [no files] Warning: This socket is closed. Use --force to continue. Error: This socket is closed. at () at doWrite () at writeOrBuffer () at () at () at (c:reactgrunttasks) at Object.<anonymous(c:reactnodemodulesgruntlibgrunt) at (c:reactnodemodulesgruntlibgrunt) at Object.<anonymous(c:reactnodemodulesgruntlibutil) at Task.runTaskFn (c:reactnode_modulesgruntlibutil) var child = spawn({ cmd: "bin/jsx-internal", args: args }, function(error, result, code) { if (error) { (error); done(false); } else { done(); } }); (JSON.stringify(config.getConfig())); So, looks like the spawn child's input stream is not available. Running node bin/jsx-internal" works however, get a message saying "Warning: still waiting for STDIN after 1000ms"
- can you take a look?
I was able to work around this by changing the following in grunttasks to Obviously this change is Windows-only but does provide a possible workaround.
What about changing it to
Yes, I can verify that worked on my machine. Sorry, I used some leftover code for executing batch files which requires going through cmd.
Cool, I can put up a PR for that (unless you have the time,
Sure, I can do that. Thanks for the help!

Discussion:
'use strict'; <ins> var path = require("path"); </ins> var grunt = require("grunt"); var expand = grunt.file.expand; var spawn = grunt.util.spawn;

args.push("--config" /* from stdin */); var child = spawn({ <del> cmd: "bin/jsx-internal", args: args </del> <ins> cmd: "node", args: [path.join("bin", "jsx-internal")].concat(args) </ins> }, function(error, result, code) { if (error) { grunt.log.error(error);
Change:
Sometimes it's helpful for to have a playground for grokking React's features, and I like to use the live editor on the docs site to sketch out ideas and see how my code is called by the library. It'd be a huge help if the site's React source was served unminified so it's more apparent what's going on under the covers.
I think this would be helpful:
I think I'd be okay with this. Want to send a PR?

Discussion:
<![endif]--> <script type="text/javascript" src="/react/js/codemirror.js"></script> <script type="text/javascript" src="/react/js/javascript.js"></script> <del> <script type="text/javascript" src="/react/js/react.min.js"></script> </del> <ins> <script type="text/javascript" src="/react/js/react.js"></script> </ins> <script type="text/javascript" src="/react/js/JSXTransformer.js"></script> <script type="text/javascript" src="/react/js/live_editor.js"></script> <script type="text/javascript" src="/react/js/showdown.js"></script>

react_docs: { files: [ { <del> src: ['react.min.js', 'JSXTransformer.js'], </del> <ins> src: ['react.js', 'JSXTransformer.js'], </ins> dest: 'docs/js/', cwd: 'build/', expand: true
Change:
Here's an example at jsbin: Clicking for the first time works (mounts a SVG +), but when clicking the same button again (which should unmount the rect+title), react throws an exception. I have no clue how to get around this. Help is very much appreciated. Thanks in advance!
Ah, this is because React doesn't let you unmount the HTML element. I don't believe there's a workaround right now, sorry. cc
Fixed by .

Discussion:
html: createFullPageComponent(ReactDOM.html), head: createFullPageComponent(ReactDOM.head), <del> title: createFullPageComponent(ReactDOM.title), </del> body: createFullPageComponent(ReactDOM.body) });
Change:
Logging and reveals: Which doesn't make sense (to me at least).
Can you log the too and something to distinguish the two renderComponent calls?
Updated, that makes more sense,

Discussion:
var DOMProperty = require('DOMProperty'); var DOMPropertyOperations = require('DOMPropertyOperations'); var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter'); <ins> var ReactComponentBrowserEnvironment = require('ReactComponentBrowserEnvironment'); </ins> var ReactMount = require('ReactMount'); var ReactMultiChild = require('ReactMultiChild'); var ReactPerf = require('ReactPerf');

unmountComponent: function() { this.unmountChildren(); ReactBrowserEventEmitter.deleteAllListeners(this._rootNodeID); <del> ReactMount.purgeID(this._rootNodeID); </del> <ins> ReactComponentBrowserEnvironment.unmountIDFromEnvironment(this._rootNodeID); </ins> this._rootNodeID = null; }

}, unmountComponent: function() { <del> // TODO: Is this necessary? </del> ReactComponentBrowserEnvironment.unmountIDFromEnvironment(this._rootNodeID); }

this._pendingCallbacks = null; this._pendingElement = null; <del> ReactComponentEnvironment.unmountIDFromEnvironment(this._rootNodeID); </del> // These fields do not really need to be reset since this object is no // longer accessible. this._context = null;

render: function() { return <div> <Inner /> <ins> Text </ins> </div>; } });

React.unmountComponentAtNode(container); expect(innerUnmounted).toBe(true); <del> // <Component />, <Inner />, and both <div /> elements and their wrappers // each call unmountIDFromEnvironment which calls purgeID, for a total of 6. </del> <ins> // The text and both <div /> elements and their wrappers each call // unmountIDFromEnvironment which calls purgeID, for a total of 3. </ins> // TODO: Test the effect of this. E.g. does the node cache get repopulated // after a getDOMNode call? <del> expect(ReactMount.purgeID.callCount).toBe(6); </del> <ins> expect(ReactMount.purgeID.callCount).toBe(3); </ins> }); it('should warn when shouldComponentUpdate() returns undefined', function() {
Change:
It's nice to have prebuilt binaries available through the current package managers. Right now there's a prebuilt package for , but it'd be nice to also have them on npm / component / What do you think is the best way to create and maintain these packages? cc/
See also .
cc -- Not a blocker for 0.11, but it would be nice if could be merged.
By "binaries" do you actually mean prebuilt versions of React that you can just include on a web page? React doesn't really have binary components.
Yep, that's what I mean.
I'm using in a project and I would love to be able to include react that way. The last conversation about this ended in
We don't have plans to do this right now.

Discussion:
var dest = 'build/npm-react/'; var modSrc = 'build/modules/'; var lib = dest + 'lib/'; <ins> var dist = dest + 'dist/'; var distFiles = [ 'react.js', 'react.min.js', 'JSXTransformer.js', 'react-with-addons.js', 'react-with-addons.min.js' ]; </ins> function buildRelease() { // delete build/react-core for fresh start

} }); <ins> // Make built source available inside npm package grunt.file.mkdir(dist); distFiles.forEach(function(file) { grunt.file.copy('build/' + file, dist + file); }); </ins> // modify build/react-core/package.json to set version ## var pkg = grunt.file.readJSON(dest + 'package.json'); pkg.version = grunt.config.data.pkg.version;

"README.md", "addons.js", "react.js", <ins> "dist/", </ins> "lib/" ], "main": "react.js",
Change:
From : cc
Fixed.
Reopening because new docs don't have that info, and it is confusing. We should re-add it.
I am looking to make my first contribution and would like to fix this issue.
I also opened a PR for this on last week, restoring the original note. I notes for discussion on a more thorough example on the PR, like the current example has, but have not done much beyond that. Do we think that such an example would be beneficial? I almost think not, since the difference is just treating as an array with , but I'm curious to hear everyone else's thoughts on that.
There hasn't been any further discussion in PR or on this issue in the last two months, so is that PR all we need to do for this? cc
Sorry. We’ve been busy with a rewrite for React 16, and haven’t been actively reviewing the PRs.
Fixed in
No sweat, I figured as much. React 16 was absolutely worth it, great work!

Discussion:
``` To make an uncontrolled component, `defaultValue` is used instead. <ins> > Note: > > You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag: `<select multiple={true} value={['B', 'C']}>`. </ins>
Change:
creates invalid html markup and appears to be unnecessary for proper functionality of the . Admittedly my test here was very minimal, but removing from the object using rendered valid html and the component still worked properly in the browser and passed all it's tests. Other than perhaps supporting server-side rendering, is there a purpose to rendering into the real dom?
Good catch :+1: The reason is set is because is , i.e, it's treated as a property rather than an attribute at run-time (which is correct). But like you say, it should not generate markup for the attribute (because it's wrong). I'm not 100% sure what the preferred fix is here, add another "directive" ex: ?
I don't think it's invalid markup. just isn't used (unless you use , which we don't do for ). I was surprised that just deleting value would work, but I guess we're applying updates to value of the actual node manually, not relying on render. This seems like a good enough approach to me. We already render the initial value as a text child so we don't use this for server rendering. another directive could make sense if we get scoped properties in there since this is only true for <textareabut not for other inputs. But until then... Want to submit a PR (cc
By invalid I meant the generated markup will not validate via the W3C html validator, throwing the error "Attribute value not allowed on element textarea at this point." Yes, I will submit a PR.

Discussion:
// `textContent` (unnecessary since we update value). // The initial value can be a boolean or object so that's why it's // forced to be a string. <del> initialValue: '' + (value != null ? value : defaultValue), value: defaultValue </del> <ins> initialValue: '' + (value != null ? value : defaultValue) </ins> }; },

render: function() { // Clone `this.props` so we don't mutate the input. var props = merge(this.props); <del> var value = LinkedValueUtils.getValue(this); </del> invariant( props.dangerouslySetInnerHTML == null,

); props.defaultValue = null; <del> props.value = value != null ? value : this.state.value; </del> <ins> props.value = null; </ins> props.onChange = this._handleChange; // Always set children to the same thing. In IE9, the selection range will

expect(node.value).toBe('foobar'); }); <ins> it('should not render value as an attribute', function() { var stub = <textarea value="giraffe" onChange={emptyFunction} />; stub = renderTextarea(stub); var node = stub.getDOMNode(); expect(node.getAttribute('value')).toBe(null); }); </ins> it('should display `value` of number 0', function() { var stub = <textarea value={0} />; stub = renderTextarea(stub);