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

[guillaumebrunerie]

Given that named recursive functions do not work properly (#3836), I’d rather avoid this pattern. Also, I wanted an easy way to turn it on/off, as I was experimenting with replacing Redux in an existing app with MobX.

[guillaumebrunerie]

I ended up writing such a plugin myself, turns out it wasn’t very difficult! It also removes existing memo or React.memo (as there is no point having it in addition to observer).
If anyone is interested, you can find it here: https://gist.github.com/guillaumebrunerie/b7b5c69f0137945528174cfcc043e92e
It can be included in a babel.config.js as follows:

/* ... */
plugins: [
  ["./tools/babel-plugin-auto-observe.js"],
],
/* ... */