Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Warn when a style object has NaN for a value #5811

Merged
merged 1 commit into from
Jan 19, 2016
Merged

Warn when a style object has NaN for a value #5811

merged 1 commit into from
Jan 19, 2016

Conversation

jontewks
Copy link
Contributor

@jontewks jontewks commented Jan 8, 2016

Warn when a style object has NaN for a value instead of showing mutated style warning.

Fix for issue #5773

@jontewks jontewks mentioned this pull request Jan 8, 2016
Closed
jimfb
jimfb reviewed Jan 9, 2016
View reviewed changes
src/renderers/dom/shared/ReactDOMComponent.js
for (var key in style1) {
var value = style1[key];

if (isNaN(value) && ('' + value) === 'NaN') {
Copy link
Contributor

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

Copy link
Contributor Author

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.

@facebook-github-bot
Copy link

@jontewks updated the pull request.

1 similar comment
@facebook-github-bot
Copy link

@jontewks updated the pull request.

jimfb
jimfb reviewed Jan 9, 2016
View reviewed changes
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
'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?'
Copy link
Contributor

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 the fontSize css style property

@facebook-github-bot
Copy link

@jontewks updated the pull request.

1 similar comment
@facebook-github-bot
Copy link

@jontewks updated the pull request.

jimfb
jimfb reviewed Jan 9, 2016
View reviewed changes
src/renderers/dom/shared/ReactDOMComponent.js
// so they don't give a false positive
for (var key1 in style1) {
if (numberIsNaN(style1[key1])) {
delete style1[key1];
Copy link
Contributor

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.

cc @sebmarkbage @spicyj

Copy link
Contributor

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.

Copy link
Contributor

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().

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @syranide , I agree, that's better.

@jontewks Let's get rid of the changes to this file. We can fix shallowEqual separately, since that's in a different repository.

@facebook-github-bot
Copy link

@jontewks updated the pull request.

@sophiebits
Copy link
Collaborator

@zpao just updated shallowEqual internally to use an Object.is polyfill which we should sync out soon.

Also why not use just x !== x to check if x is NaN?

@jontewks
Copy link
Contributor Author

Thanks, I'll look for that to update. The x !== x is the second polyfill on MDN of Number.isNaN, which I thought was pretty clever, but it does seem like updating shallowEqual was the best option so it could propagate elsewhere as well and then defer to that no?

@sophiebits
Copy link
Collaborator

Yes. @zpao wrote a change for shallowEqual last week, just needs to be applied to fbjs.

zpao
zpao reviewed Jan 11, 2016
View reviewed changes
src/renderers/dom/shared/CSSPropertyOperations.js
@@ -106,6 +120,10 @@ if (__DEV__) {
} else if (badStyleValueWithSemicolonPattern.test(value)) {
warnStyleValueWithSemicolon(name, value);
}

if (numberIsNaN(value)) {
Copy link
Member

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.

Copy link
Contributor

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.

Copy link
Member

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))

@zpao zpao mentioned this pull request Jan 11, 2016
Closed
@facebook-github-bot
Copy link

@jontewks updated the pull request.

@jontewks jontewks mentioned this pull request Jan 12, 2016
Closed
@jontewks
Copy link
Contributor Author

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.

@jimfb
Copy link
Contributor

jimfb commented Jan 15, 2016

cc @zpao for release planning/scheduling.

@jontewks
Copy link
Contributor Author

Thanks @zpao, all updated.

@facebook-github-bot
Copy link

@jontewks updated the pull request.

@jontewks
Copy link
Contributor Author

Just squashed everything into one commit as well. Thanks again!

@jontewks
Copy link
Contributor Author

@zpao Updated per your recent comment that was wiped away in the squash and force update regarding the tests in ReactDOMComponent-test.js

@facebook-github-bot
Copy link

@jontewks updated the pull request.

@facebook-github-bot
Copy link

@jontewks updated the pull request.

@zpao
Copy link
Member

zpao commented Jan 19, 2016

Looks great, thanks @jontewks!

zpao added a commit that referenced this pull request Jan 19, 2016
@zpao
Merge pull request #5811 from jontewks/warn-nan-style
31d3bfa 
Warn when a style object has NaN for a value
@zpao zpao merged commit 31d3bfa into facebook:master Jan 19, 2016
@renovate renovate bot mentioned this pull request Feb 2, 2018
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
7 participants
@jontewks @facebook-github-bot @sophiebits @jimfb @zpao @rickbeerendonk @syranide