Registry / devops / babel-plugin-transform-builtin-classes

babel-plugin-transform-builtin-classes

library0.6.1jsnpmunverified

Babel plugin (v0.6.1) that fixes extending built-in classes like Array, Error, HTMLElement, etc., which are notoriously broken in transpiled ES2015 classes. It patches the prototype chain so that instances created via `new MySubclass()` properly inherit from the subclass and its constructor. Requires `babel-plugin-transform-es2015-classes` as a prerequisite. Key differentiator: handles multiple globals, has a `logIfPatched` option, and works with Rollup (inverted plugin order). No known active development; last release was in 2017. Compatible with IE11+ and uses `Object.setPrototypeOf` or `__proto__` as fallback.

devops

npm install babel-plugin-transform-builtin-classes

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TRANS

babel-plugin-transform-builtin-classes

devopsjavascriptv0.6.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (plugin)

✓ module.exports = { plugins: [["babel-plugin-transform-builtin-classes", { globals: ["Array"] }]] }

✗ import transformBuiltinClasses from 'babel-plugin-transform-builtin-classes'

This is a Babel plugin, not a runtime import. It's used in .babelrc or programmatically as a plugin entry.

globals option

✓ ["transform-builtin-classes", { "globals": ["Array", "Error", "HTMLElement"] }]

✗ ["transform-builtin-classes", { "builtins": ["Array"] }]

Option key is 'globals', not 'builtins' or 'classes'. Must be an array of global constructor names.

rollup usage

✓ plugins: [['transform-builtin-classes', { globals: ['HTMLElement'] }], 'transform-es2015-classes']

✗ plugins: ['transform-es2015-classes', ['transform-builtin-classes', { globals: ['HTMLElement'] }]]

In Rollup, the order must be inverted: builtin-classes before es2015-classes, contrary to Babel standalone.

Enables the plugin in Babel 6 configuration, targeting Array, Error, and HTMLElement globals. Shows a simple subclass of Array and verifies instance relationships.

// .babelrc { "plugins": [ "babel-plugin-transform-es2015-classes", ["babel-plugin-transform-builtin-classes", { "globals": ["Array", "Error", "HTMLElement"], "logIfPatched": true }] ] } // source.js class MyArray extends Array { first() { return this[0]; } } const arr = new MyArray(1, 2, 3); console.log(arr instanceof MyArray); // true console.log(arr.first()); // 1

Debug

Known issues

gotchaPlugin requires babel-plugin-transform-es2015-classes (or preset es2015) to be present; otherwise no transformation occurs.

fix

Add 'babel-plugin-transform-es2015-classes' to plugins (or use babel-preset-es2015).

affects: >=0.0.0

gotchaPlugin must be applied _after_ transform-es2015-classes in Babel, but _before_ it in Rollup. Incorrect order breaks subclassing.

fix

For Babel: order as ["transform-es2015-classes", ["transform-builtin-classes",...]]. For Rollup: invert order.

affects: >=0.0.0

deprecatedNo updates since 2017; may be incompatible with Babel 7+ and modern JavaScript engines that natively support subclassing built-ins.

fix

Consider using @babel/plugin-proposal-class-properties and modern Babel presets, or switch to native ES2015+ environments.

affects: =0.6.1

gotchaDoes not support Internet Explorer 10 or below. Requires Object.setPrototypeOf or __proto__.

fix

Ensure target browsers include IE11+ or polyfill Object.setPrototypeOf.

affects: >=0.0.0

gotchaThe 'globals' option default is an empty array; without specifying globals, no classes are transformed.

fix

Always provide a globals array: e.g., ["Array", "Error"].

affects: >=0.0.0

Errors

Common errors & fixes

TypeError: Cannot set prototype of #<MyArray> which only has a getter for 'prototype'

Attempting to extend a built-in that is not in the globals list, so the plugin did not patch the prototype chain.

fix

Add the built-in to the globals option: e.g., { "globals": ["Array"] }.

MyArray is not a constructor

The plugin is applied before transform-es2015-classes, leaving the class declaration untranspiled in older Babel.

fix

Reorder plugins: ensure transform-es2015-classes comes before transform-builtin-classes (or after for Rollup).

ReferenceError: HTMLElement is not defined

HTMLElement global is missing in Node.js environment; plugin only works in browser contexts.

fix

Remove 'HTMLElement' from globals when running in Node, or conditionally configure.

console.warn: ✔ builtin extends patched (too many times)

The logIfPatched option is enabled and logs for every class that extends a built-in, causing console noise.

fix

Set logIfPatched: false or remove the option.

Upgrade

Version history

0.6.1latest on npm

Audit

Dependencies

babel-plugin-transform-es2015-classesoptionalThis plugin transforms class syntax and must be applied before or after this builtin-classes plugin depending on the bundler (Babel order: builtin-classes before es2015-classes for Rollup).

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/WebReflection/babel-plugin-transform-builtin-classes ↗

packagehttps://www.npmjs.com/package/babel-plugin-transform-builtin-classes ↗