Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/solidzoro/babel-plugin-add-react-mobx-observer-displayname
Automatically add a displayName property to your mobx observer's React Components.
https://github.com/solidzoro/babel-plugin-add-react-mobx-observer-displayname
babel babel-plugin display-name displayname mobx observer react
Last synced: 21 days ago
JSON representation
Automatically add a displayName property to your mobx observer's React Components.
- Host: GitHub
- URL: https://github.com/solidzoro/babel-plugin-add-react-mobx-observer-displayname
- Owner: SolidZORO
- License: mit
- Created: 2022-01-07T04:22:04.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-01-07T10:35:05.000Z (almost 3 years ago)
- Last Synced: 2024-10-05T13:55:04.996Z (about 1 month ago)
- Topics: babel, babel-plugin, display-name, displayname, mobx, observer, react
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-add-react-mobx-observer-displayname
[![version][npm-img]][npm-url]
[![license][mit-img]][mit-url]
[![size][size-img]][size-url]
[![download][download-img]][download-url]
Automatically add a `displayName` property to your `mobx observer`'s React Components.
## Transform
- ### `Function` observer
```jsx
const Comp123 = observer(() => {Comp123.displayName});
```
To
```jsx
const Comp123 = observer(() => Comp123);
```
- ### `Const` observer
```jsx
const Comp123 = () => {Comp123.displayName};
Comp123 = observer(Comp123);
export { Comp123 };
```
To
```tsx
const Comp123 = () => Comp123;
Comp123 = observer(Comp123);
export { Comp123 };
```
## Installation
```sh
yarn add -D babel-plugin-add-react-mobx-observer-displayname
```
## Usage
```js
// .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",
## FAQ
- Q: why is an `_` underscore in front of displayname? like `_Comp123`?
A: add `not android 4.4.3-4.4.4` to your `browserslist`
## Related
- [babel-plugin-add-react-displayname](https://github.com/opbeat/babel-plugin-add-react-displayname) (for `normal` React Comp)
- [babel-plugin-react-display-name](https://github.com/prisma-capacity/babel-plugin-react-display-name) (for `forwardRef` and `memo`)
## Thanks
Thank you very much [@meyer](https://github.com/meyer), for a babel rookie, without his [babel-plugin-react-observer-displayname](https://github.com/meyer/babel-plugin-react-observer-displayname), I can't write this plugin.
## License
MIT © [Jason Feng][author-url]
[author-url]: https://github.com/SolidZORO
[mit-img]: https://img.shields.io/npm/l/babel-plugin-add-react-mobx-observer-displayname.svg?style=flat&colorA=000000&colorB=000000
[mit-url]: ./LICENSE
[npm-img]: https://img.shields.io/npm/v/babel-plugin-add-react-mobx-observer-displayname?style=flat&colorA=000000&colorB=000000
[npm-url]: https://www.npmjs.com/package/babel-plugin-add-react-mobx-observer-displayname
[size-img]: https://img.shields.io/bundlephobia/minzip/babel-plugin-add-react-mobx-observer-displayname?label=bundle&style=flat&colorA=000000&colorB=000000
[size-url]: https://www.npmjs.com/package/babel-plugin-add-react-mobx-observer-displayname
[download-img]: https://img.shields.io/npm/dt/babel-plugin-add-react-mobx-observer-displayname.svg?style=flat&colorA=000000&colorB=000000
[download-url]: https://www.npmjs.com/package/babel-plugin-add-react-mobx-observer-displayname
[build-img]: https://github.com/SolidZORO/babel-plugin-add-react-mobx-observer-displayname/workflows/badge.svg
[build-url]: https://github.com/SolidZORO/babel-plugin-add-react-mobx-observer-displayname/actions