babel-plugin-add-react-mobx-observer-displayname

Automatically add a displayName property to your mobx observer's React Components.

Transform

• Function observer

  const Comp123 = observer(() => <span>{Comp123.displayName}</span>);

  To

  const Comp123 = observer(() => <span>Comp123</span>);

• Const observer

  const 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 and memo)

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