babel-plugin-create-object-id v0.0.19
babel-plugin-create-object-id
Creates a sequential id inside objects (only the ones with a render method -aka components-) for later use in (for example) scoping CSS classes by prepending this id to classnames, for example (this is up to you) wrapper => 1000--wrapper
.
usage
In .babelrc
file include
plugins: [
[
"create-object-id"
]
]
if you want to use a custom method name that the object must have (instead of render), use the methodName
config option:
plugins: [
[
"create-object-id", { "methodName": "my custom name" }
]
]
input
Any object containing a render method, like:
export default () => {
return {
render() {
return 'Someting';
}
}
}
output
Will be transpiled to:
export default () => {
return {
render() {
return 'Someting';
},
id: 1000
}
}
Where the 1000 is a unique id for this component (the definition not the instances that may exists) and starts at 1000 and increments by 1 for each file: 1001, 1002, ....
Why?
This way to can have a unique id for each component that you can use, for example, to scope classes, like:
render() {
return (
<div className={`${this.id}--wrapper`}>
Content
</div>
);
}
Or (a better option) to generate this automatically with a Higher Order Function for each component.
This is not an official plugin, just experimental, use it at your own risk.