To wrap components we have written an eslint plugin

[lishine]

pnpm add @byondxr/eslint-plugin-automate
rule: @byondxr/automate/react-wrap
an example of configuration here:
https://github.com/byondrnd/byondxr-dev/blob/main/example-app/.eslintrc.json

It wraps, adds an import and adds a displayname

There we have much more eslint automation - dependencies, snippets generation, useMemo and handler wrappers.
The example is not complete, more documentation planned.

[jmeistrich]

Edit: I didn't understand what this was.

[lishine]

It is about wrapping components with observer().
I am starting to use legend-state. I think it is awesome!

Your documentation says, that wrapping components with observer() will make it work faster.
So I have suggested our eslint plugin rule which was intended to wrap with memo. In our codebase all components, which do not accept children are wrapped with memo.
It will wrap components automatically, isn't it awesome?

[jmeistrich]

Ah I see! Sorry for misunderstanding!

[jmeistrich]

So could we tweak this plugin to suggest wrapping components in observer? How would that work?

[lishine]

Of course

pnpm add @byondxr/eslint-plugin-automate

eslint config:

{
    "plugins": ["@byondxr/automate"],
    "overrides": [
        {
            "files": ["*.tsx"],
            "@byondxr/automate/react-wrap": [
                "error",
                {
                    "wrapMemo": {
                        "wrapName": "observer",
                        "importSource": "@legendapp/state"
                    }
                }
            ]
        }
    ]
}

That will do 3 things:

1. Wrap with observer
2. Add import
3. Add displayname

Notice:
As of now, because it was intended for memo, it will not wrap components that their props have children prop. If somebody, me or anybody else will start using it for other use cases, i will generalize it.

You can see the config in the example app to wrap with memo:
https://github.com/byondrnd/byondxr-dev/blob/main/example-app/.eslintrc.json
You can clone the whole repo, run pnpm i and adjust the example-app config to see it is working.

I suggest to use eslint autofix on save.

Give the repo a star if you like it.