Higher Order Component for polyfills
Closed this issue · 5 comments
Description
It would be really useful for sui-components having a Higher Order Component that loads specific polyfiils if they are not availiable in the browser
Expected behavior:
withPolyfill([
'IntersectionObserver',
'Array.prototype.includes'
])
(AtomTooltip)
We have this package https://github.com/SUI-Components/sui/tree/master/packages/sui-polyfills and they are the allow polyfills. And we must be sure that all our code to be compliant with them
@carlosvillu, I see that this package sui-pollyfills loads the set polyfills from core-js
require('core-js/fn/array/fill')
require('core-js/fn/array/find')
require('core-js/fn/array/find-index')
require('core-js/fn/array/from')
require('core-js/fn/array/includes')
require('core-js/fn/array/is-array')
require('core-js/fn/array/of')
...
Does this core-js library check if the feature is available natively before loading the code? (I'm checking the code of core-js but i cannot find this clearly)
It look like they check first the prototype
https://github.com/zloirock/core-js/blob/d42976f7af29832cddc04051cb7032057d17ab74/packages/core-js/internals/export.js#L29
Oks, so the strategy is: the polyfill code will always be included in the final bundle but the polyfill implementation will only be loaded if the feature is not native (this is checked by the core-js library)
But, there are a few components (two that we have detected) that need the IntersectionObserver polyfill. This polyfill doesn't seem to be available by the core-js library.
What do we do in this case? Maybe we could add this pollyfill in the sui-pollyfills library so it can be imported on demand adding also the logic of loading the polyfill implementation only if needed. What do you think?
It doesn't seems that will be added in next core.js iterations in the near future:
core-js has support for Observable and it's ECMAScript proposal. IntersectionObserver is browser-only feature. At this moment, only ECMAScript and closely related ECMAScript features in the scope of core-js. In the future, this position can be changed, but not soon.
More info: zloirock/core-js#386
IMHO what @juanmaguitar says in the last comment seems to be the best approach. The thing is that if we do that we should re-define readme.md and sui-polyfills in order to not be attached ONLY to core-js features.