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.

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

[core] Guard against bad Symbol polyfills #17336

Merged
merged 2 commits into from Sep 6, 2019
Merged

[core] Guard against bad Symbol polyfills #17336

merged 2 commits into from Sep 6, 2019

Conversation

briandelancey
Copy link
Contributor

@briandelancey briandelancey commented Sep 5, 2019

The typeof check for Symbol is great but, apparently, some Symbol polyfills do not include for(); a further check would be preferable.

The `typeof` check is great but, apparently, some `Symbol` polyfills do not include `for()`; a further check would be preferable.
@mui-pr-bot
Copy link

mui-pr-bot commented Sep 5, 2019

Details of bundle changes.

Comparing: f8076d6...ecc4179

bundle parsed diff gzip diff prev parsed current parsed prev gzip current gzip
@material-ui/core 0.00% 0.00% 331,748 331,760 90,589 90,589
@material-ui/core/Paper +0.02% 🔺 -0.01% 68,799 68,811 20,495 20,493
@material-ui/core/Paper.esm +0.02% 🔺 -0.01% 62,173 62,185 19,223 19,222
@material-ui/core/Popper 0.00% 0.00% 28,466 28,466 10,177 10,177
@material-ui/core/Textarea 0.00% 0.00% 5,094 5,094 2,135 2,135
@material-ui/core/TrapFocus 0.00% 0.00% 3,834 3,834 1,617 1,617
@material-ui/core/styles/createMuiTheme 0.00% 0.00% 16,410 16,410 5,838 5,838
@material-ui/core/useMediaQuery 0.00% 0.00% 2,558 2,558 1,066 1,066
@material-ui/lab +0.01% 🔺 0.00% 153,678 153,690 46,768 46,768
@material-ui/styles +0.02% 🔺 +0.01% 🔺 51,494 51,506 15,307 15,308
@material-ui/system 0.00% 0.00% 15,668 15,668 4,361 4,361
Button +0.02% 🔺 0.00% 78,688 78,700 24,045 24,045
Modal 0.00% 0.00% 14,601 14,601 5,121 5,121
Portal 0.00% 0.00% 2,907 2,907 1,322 1,322
Rating +0.02% 🔺 0.00% 70,041 70,053 21,881 21,881
Slider +0.02% 🔺 0.00% 75,162 75,174 23,206 23,206
colorManipulator 0.00% 0.00% 3,904 3,904 1,543 1,543
docs.landing 0.00% 0.00% 52,253 52,253 13,780 13,780
docs.main 0.00% 0.00% 597,453 597,458 190,764 190,770
packages/material-ui/build/umd/material-ui.production.min.js 0.00% -0.00% 302,557 302,569 86,938 86,937

Generated by 🚫 dangerJS against ecc4179

@oliviertassinari
Copy link
Member

@briandelancey Thanks for the pull request, I have updated it to replicate React codebase strategy:

https://github.com/facebook/react/blob/bd79be9b687156067416ffe5219e49a11bd0f1e7/packages/shared/ReactSymbols.js#L12

@oliviertassinari oliviertassinari changed the title ThemeProvider - Perform further check on Symbol for for() method [core] Perform further check on Symbol for for() method Sep 6, 2019
@oliviertassinari oliviertassinari added core Infrastructure work going on behind the scenes PR: ready to ship labels Sep 6, 2019
@@ -1,3 +1,3 @@
const hasSymbol = typeof Symbol === 'function';
const hasSymbol = typeof Symbol === 'function' && Symbol.for;

export default (hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__');
Copy link
Member

Choose a reason for hiding this comment

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

I'm just hijacking this to fill in my own gaps: What's the point of a global Symbol.for registry? If we fallback to strings in bad polyfills anyway why not just use them? Is this some micro optimization I'm missing?

Copy link
Member

Choose a reason for hiding this comment

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

@eps1lon I have "almost" blindly copied the react approach. I think that the point is to make it internal, it's not something we want developers to hack around. Symbol.for should be supported in 99% of the developers' environment even if this number is lower in end users.

Copy link
Member

Choose a reason for hiding this comment

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

Yeah no this is more about what Symbol.for is useful since it's anything but internal. The mdn docs even recommend prefixing it to avoid name collisions. What does Symbol.for('mui.nested') do that 'mui.nested' can't?

Copy link
Member

Choose a reason for hiding this comment

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

What does Symbol.for('mui.nested') do that 'mui.nested' can't?

I would say, let's compare

var theme1 = {
  [Symbol.for('mui.nested')]: true,
}

var theme2 = {
  '__THEME_NESTED__': true,
}

console.log(theme1, theme2)

Which variant makes you less interested in hacking with the value?

Copy link
Member

Choose a reason for hiding this comment

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

The second.

Copy link
Member

Choose a reason for hiding this comment

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

@briandelancey what's your perspective on the issue?

Copy link
Member

Choose a reason for hiding this comment

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

I was not proposing to deviate. When in doubt assume the author added it with intent. Just thought anybody know what technical benefits Symbol.for has.

Copy link
Member

Choose a reason for hiding this comment

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

@eps1lon ok, sounds good to me. Is it ready to ship?

Copy link
Member

Choose a reason for hiding this comment

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

Thanks for raising this point.

Copy link
Member

Choose a reason for hiding this comment

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

@oliviertassinari I'm ok with https://stackoverflow.com/questions/51488519/what-advantage-of-using-symbol-forstring-instead-the-plain-string

Not being enumerate by the common Object.keys seams reasonable. And since the theme is often passed around (potentially stringified for hydrated UIs) having it not appear for JSON.stringify serialization is also nice. So it's better at emulating internal properties.

@eps1lon eps1lon changed the title [core] Perform further check on Symbol for for() method [core] Guard against bad Symbol polyfills Sep 6, 2019
@eps1lon eps1lon merged commit 310409e into mui:master Sep 6, 2019
@eps1lon
Copy link
Member

eps1lon commented Sep 6, 2019

@briandelancey Thanks 👍

@briandelancey briandelancey deleted the patch-1 branch September 6, 2019 14:13
@briandelancey
Copy link
Contributor Author

@eps1lon @oliviertassinari - First off, thanks for getting this in. Secondly, any idea when the next release might be? We're going to production with a project very soon that really needs this fix...

@oliviertassinari
Copy link
Member

@briandelancey v4.4.1 should be released this weekend.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core Infrastructure work going on behind the scenes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants