-
Notifications
You must be signed in to change notification settings - Fork 46.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Warn when a style object has NaN for a value #5811
Conversation
for (var key in style1) { | ||
var value = style1[key]; | ||
|
||
if (isNaN(value) && ('' + value) === 'NaN') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think the isNaN(value) && ('' + value) === 'NaN'
is correct. For instance, the string "NaN" would pass that check, I believe.
You probably want to use Number.isNaN()
or one of the polyfills listed in the docs:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for that. That's basically what I was trying to emulate but somehow missed the more specific Number.isNaN in my search. Updated with this change.
@jontewks updated the pull request. |
1 similar comment
@jontewks updated the pull request. |
'mutated. Mutating `style` is deprecated. Consider cloning it ' + | ||
'beforehand. Check the `render` using <span>. Previous style: ' + | ||
'{fontSize: NaN}. Mutated style: {fontSize: NaN}.' | ||
'Warning: You passed NaN as a value for fontSize. Are you sure this is intentional?' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It might not be immediately obvious to a user that we're talking about css styles here, it might be good to mention that it's a css style. Also, I'm not sure any of our other warnings end in a question mark. Maybe something like:
NaN
is an invalid value for thefontSize
css style property
@jontewks updated the pull request. |
1 similar comment
@jontewks updated the pull request. |
// so they don't give a false positive | ||
for (var key1 in style1) { | ||
if (numberIsNaN(style1[key1])) { | ||
delete style1[key1]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I still feel like we probably shouldn't be modifying the argument.
This is a dev-only code path, so maybe we copy the object and mutate the copy. Or maybe we fork shallowEqual to have the logic we want with regards to NaN in this case. Or maybe there is another option/thought.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jimfb The shallow-equal check should really use Object.is
, then this problem should go away naturally.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jimfb Opened a pull request to fix shallowEqual().
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jontewks updated the pull request. |
@zpao just updated shallowEqual internally to use an Object.is polyfill which we should sync out soon. Also why not use just |
Thanks, I'll look for that to update. The |
Yes. @zpao wrote a change for shallowEqual last week, just needs to be applied to fbjs. |
@@ -106,6 +120,10 @@ if (__DEV__) { | |||
} else if (badStyleValueWithSemicolonPattern.test(value)) { | |||
warnStyleValueWithSemicolon(name, value); | |||
} | |||
|
|||
if (numberIsNaN(value)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's just inline the check here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The advantage to not inlining is readability, since otherwise if(value !== value)
has an incredibly obscure behavior. Easy to have a 3am WTF when your eyes are tired and brain is in low-power mode. I don't feel strongly, so if you want it inlined, that's fine with me.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don't inline the short one then. if (typeof value === 'number' && isNaN(value))
@jontewks updated the pull request. |
Hey all, I just noticed the change to fbjs that will fix the test for this PR has arrived, but there wasn't a new release version made for it yet, so npm install doesn't grab the newest code. This PR will be good to go once fbjs version is bumped and I find out the final decision on moving that unit test out or not. |
cc @zpao for release planning/scheduling. |
Thanks @zpao, all updated. |
@jontewks updated the pull request. |
7481db4
to
8ca7e93
Compare
Just squashed everything into one commit as well. Thanks again! |
8ca7e93
to
3e33cea
Compare
@zpao Updated per your recent comment that was wiped away in the squash and force update regarding the tests in ReactDOMComponent-test.js |
@jontewks updated the pull request. |
3e33cea
to
7a6000c
Compare
@jontewks updated the pull request. |
Looks great, thanks @jontewks! |
Warn when a style object has NaN for a value
Warn when a style object has NaN for a value instead of showing mutated style warning.
Fix for issue #5773