Automatically wrap all components with observer via a Babel plugin?

[guillaumebrunerie]

I'm new to MobX and so far it seems very interesting, except that it feels a bit annoying having to wrap every single component with observer, especially given that it breaks the name shown in the React Dev Tools when using arrow functions (I have seen the various workarounds at https://mobx.js.org/react-integration.html#displayname but neither of them seem particularly nice to me).

But I was wondering, would it be possible to write a Babel plugin that automatically wraps every component defined in the code base with observer, and also sets displayName appropriately? It feels like it shouldn’t be too difficult to do. Or would that be a bad idea?

I also saw #3798 which doesn’t require a Babel plugin, but I don’t think it solves the displayName problem, and it also probably also deeply wraps components from external libraries, which is probably not a good idea.

Example:

// Source code
export const MyComponent = (props) => {
    return someJSX;
};

// Transformed code
import { observer } from "mobx-react-lite";

export const MyComponent = observer((props) => {
    return someJSX;
});
MyComponent.displayName = "MyComponent";

[urugator]

It's possible with a caveat that you need a convention for indentifying a component function (eg first letter is uppercased, body contains JSX, ...).

Personally I don't think it's worth it.

It's recommended to use a named function instead of displayName.

Our eslint plugin implements an autofix feature you may find useful:
https://github.com/mobxjs/mobx/tree/main/packages/eslint-plugin-mobx#mobxmissing-observer

Also check:
https://github.com/mobxjs/mobx/tree/main/packages/eslint-plugin-mobx#mobxno-anonymous-observer-deprecated