https://github.com/webreflection/babel-plugin-transform-builtin-classes
A fix for the infamous Babel #4480 bug.
https://github.com/webreflection/babel-plugin-transform-builtin-classes
Last synced: 12 months ago
JSON representation
A fix for the infamous Babel #4480 bug.
- Host: GitHub
- URL: https://github.com/webreflection/babel-plugin-transform-builtin-classes
- Owner: WebReflection
- License: isc
- Created: 2017-06-27T12:26:07.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-09-03T15:04:22.000Z (almost 8 years ago)
- Last Synced: 2025-07-19T09:22:14.575Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://github.com/babel/babel/issues/4480
- Size: 38.1 KB
- Stars: 43
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Babel Builtin Classes Fix
[](https://travis-ci.org/WebReflection/babel-plugin-transform-builtin-classes) [](https://github.com/WebReflection/donate)
### About Babel 7
Babel 7 included this plugin in core so you don't need this plugin anymore.
- - -
Inspired by [Logan Smyth transformer](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend),
but actually very different.
This transformer aim is to fix once forever problems with native extends and Custom Elements.
```js
// finally fixed
class List extends Array {}
console.assert(new List instanceof List);
// finally fixed too
class MyElement extends HTMLElement {
connectedCallback() {
this.textContent = 'hello';
}
}
customElements.define('my-element', MyElement);
const node = new MyElement;
console.assert(node.constructor === MyElement);
console.assert(node instanceof MyElement);
console.assert(node instanceof HTMLElement);
document.body.appendChild(node);
```
## 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.
```js
{
"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:
```js
{
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).
### About `logIfPatched` option
If you'd like to have a visual feedback when patched classes are encountered,
use the `logIfPatched: true` option.
```js
{
"plugins": [
['transform-builtin-classes', {
globals: ['Array'],
logIfPatched: true
}]
]
}
```
This will output (as `console.warn`) `✔ builtin extends patched` whenever a class is found.