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