babel-plugin-add-react-mobx-observer-displayname
v1.1.0
Published
[![version][npm-img]][npm-url] [![license][mit-img]][mit-url] [![size][size-img]][size-url] [![download][download-img]][download-url]
Downloads
13,454
Maintainers
Readme
babel-plugin-add-react-mobx-observer-displayname
Automatically add a displayName
property to your mobx observer
's React Components.
Transform
Function
observerconst Comp123 = observer(() => <span>{Comp123.displayName}</span>);
To
const Comp123 = observer(() => <span>Comp123</span>);
Const
observerconst Comp123 = () => <span>{Comp123.displayName}</span>; Comp123 = observer(Comp123); export { Comp123 };
To
const Comp123 = () => <span>Comp123</span>; Comp123 = observer(Comp123); export { Comp123 };
Installation
yarn add -D babel-plugin-add-react-mobx-observer-displayname
Usage
// .babel.config.js
module.exports = {
plugins: [
['add-react-mobx-observer-displayname'],
//
// maybe you also need these like me.
// ['add-react-displayname'], // for `normal` React Comp
// ['@prisma-capacity/babel-plugin-react-display-name'], // for `forwardRef` and `memo`
]
}
Compatible
- "@babel/core": "^7.16.0",
- "mobx": "^6.3.12",
- "mobx-react": "^7.2.1",
- "webpack": "^5.64.4",
Related
- babel-plugin-add-react-displayname (for
normal
React Comp) - babel-plugin-react-display-name (for
forwardRef
andmemo
)
Thanks
Thank you very much @meyer, for a babel rookie, without his babel-plugin-react-observer-displayname, I can't write this plugin.
License
MIT © Jason Feng