babel-plugin-class-bound-components 👄 🔌    

Plugin transforming calls to class-bound-components

1. Display Name Inlining: Infers implicit displayName values, e.g., looking at which variables classBound components get assigned to and inlines these into the signatures.
2. Element Type Inlining: Replaces usage of the Proxy methods for intrinsic HTML elements (like classBound.div, classBound.li or classBound.button) to the primary signature to remove the runtime requirement of Proxy

Display Name Inlining

> TL;DR: If you don't want to type out the displayName for each call of classBound but want a similar behavior to regular React functional component display names, use this transformation.

Usually, displayNames in React benefit from the automatic assignment to Function.name when defining a functional component, which will make the component appear as the name of the function in React DevTools and Error traces.

Unfortunately, this doesn't work for components created with classBound, since these are defined in a closure. For this, all signatures of classBound can be provided with an explicit string for the displayName property of the component.

This babel transformation tries to infer the displayName in the fashion like Function.name would normally do and inlines these into the calls of classBound.

$3

Can be enabled (default) or disabled with the displayName option, e.g.,

``js
// .babelrc
{
"plugins": [
// ...
["babel-plugin-class-bound-components": {
"displayNames": true
}]
]
}
`

$3

In

`js
// input code
import classBound, { extend } from 'class-bound-components';

// These would appear as _Anonymous_ in React dev tools and error messages, since no explicit displayName argument is passed
const MyList = classBound.ul('myList', {
isWide: 'myList--wide',
});

const MyListItem = classBound.li('myListItem', {
isActive: 'myListItem--active',
});

const CustomList = extend(MyList, 'customList', {
isFlashy: 'customList--flashy',
});

const CompFropmOptions = classBound({
className: ['foo', 'bar'],
});

let foo = 'bar',
SomeComp = classBound('someComp');
`

Out

`js
'use strict';

// output code
import classBound from 'class-bound-components';

// Babel plugin infers the displayName and explicitly inserts it into the signatures
const MyList = classBound('myList', 'MyList', {
isWide: 'myList--wide',
});

const MyListItem = classBound('myListItem', 'MyListItem', {
isWide: 'myListItem--wide',
});

const CustomList = extend(MyList, 'CustomList', 'customList', {
isFlashy: 'customList--flashy',
});

const CompFromOptions = classBound({
className: ['foo', 'bar'],
displayName: 'CompFromOptions',
});

let foo = 'bar',
SomeComp = classBound('someComp', 'SomeComp');
`

Element Type Inlining

> TL;DR: If you make use of the shorthand classBound[JSX.IntrinsicElement]() signature, e.g., classBound.button, and can't be sure ES6 Proxy is available in browsers (and don't want to polyfill it), use this transformation.

Beyond