Babel Builtin Classes Fix
Inspired by Logan Smyth transformer, but actually very different.
This transformer aim is to fix once forever problems with native extends and Custom Elements.
// finally fixed {}console; // finally fixed too { thistextContent = 'hello'; } customElements; const node = ;console;console;console; documentbody;
Usage
In your Babel 6 configuration, for example in a .babelrc
you might have the following,
which would enable the plugin and configure it to look for any class extending HTMLElement
, Error
or Array
globals.
"plugins": // either the preset es2015 or at least the following "babel-plugin-transform-es2015-classes" "babel-plugin-transform-builtin-classes" "globals": "Array" "Error" "HTMLElement"
However, you can find all known Chrome browser classes already listed in the file lib/.babelrc
too.
Rollup
In this case you might need to invert the plugins order:
plugins: 'transform-builtin-classes' globals: 'HTMLElement' 'transform-es2015-classes' // ... others ...
Compatibility
This transformer works on IE11 and every other browser with Object.setPrototypeOf
or __proto__
as fallback.
There is NO IE <= 10 support. If you need IE <= 10 don't use this plugin and/or don't extend natives (recommended).
logIfPatched
option
About If you'd like to have a visual feedback when patched classes are encountered,
use the logIfPatched: true
option.
"plugins": 'transform-builtin-classes' globals: 'Array' logIfPatched: true
This will output (as console.warn
) ✔ builtin extends patched
whenever a class is found.