Transparent observation using plugin

[christianalfoni]

So I work on other relatable state management solutions, but as part of that I built a project that enables Babel and SWC to transform components to be observers.

As the author of Mobx ones famously said: "Just put observers on all components" 😂

This package mobx-react-observer has a babel and SWC plugin which allows you to just consume Mobx in React, making observation transparent.

The project is running in production on a big project, removing 250 observers from the codebase.

What do we think about this? 😅

[codeBelt]

Looks cool! My only concern is that I’m using Next.js and server-side components, which might affect how these transforms work on the server side.

I totally get the idea behind making Mobx observation transparent – the Babel/SWC plugin sounds like a neat way to streamline it. But I’m curious about how it handles SSR or if there are any potential gotchas in that context. Have you tested this setup with server-side rendering in Next.js, or do you think there could be issues? 😅

[christianalfoni]

Good question @codeBelt!

So typically the observer that is used in reactive libraries does absolutely nothing on the server. So where it typically returns a new component as observer, it just returns the component passed to it.

So for example for Mobx you can see: https://github.com/mobxjs/mobx-react-lite/blob/master/src/observer.ts#L45

If you call enableStaticRendering(true) on the server entry file, which you should really do in any Mobx app with server rendered components regardless, you will not have any issues 😄

I updated the repo with this information now, thanks a bunch for this 🙏

[codeBelt]

I started this discussion to clarify the correct way to use enableStaticRendering in a Next.js app directory. #4539

[kubk]

@christianalfoni Hey, it looks awesome, thank you for the library! 👍 I have tried it on a pet project and it helped to eliminate all the observer while keeping reactivity. Apart from the obvious improvement that the devs stop forgetting observer, there are other improvements that I noticed:

• Component name is visible in React DevTools since I can use export function Comp() {} instead of export const Comp = observer(). There was a way to work around it by setting Comp.componentName = "Comp" but this duplication never felt right.
• The pattern export const Comp = observer() leads to two definitions showing in VSCode when you expect only one, which is a similar issue: https://stackoverflow.com/questions/55134398/vs-code-showing-peek-multiple-definitions-when-i-wan-to-jump-to-definition. I guess memo has the same issue.

I have a few questions:

• Does the plugin wrap all the react components in the project (including vendor libraries) or only those that are being built by the bundler?
• Is there a way to avoid wrapping components for a specific folder? Use case - a very popular library shadcn/ui can't be installed, so it copies components to your project, so you own all the code and it's easy to modify. I'd prefer to keep it intact.

[christianalfoni]

Hi @kubk!

Thanks for testing it and thanks for the input! I will add these improvements to the README as well 😄 👍

• The plugin only wraps the actual components in your project. So nothing in node_modules is touched by this. Or at least should not 😄
• Yeah, it is possible to add an option to exclude paths

I'll put a note to update the docs and implement the exclusion of paths ASAP 👍

[mweststrate]

This is pretty cool @christianalfoni! Feel free to add a link to the plugin in the MobX setup/installation docs and the observer docs as a community / non-official feature! (A lot of people have been asking for this over the years, but all earlier attempts tried to monkey patch React internals, which is too risky)

[christianalfoni]

Awesome!

I updated mobx-react-observer with exclude paths (@kubk) and added a couple of PRs for docs:

#4541
#4542

[kubk]

@christianalfoni Thank you for adding the exclusion paths! I can confirm there was an issue with shadcn components. Components using forwardRef like Button / Input led to an exception. Once I excluded the shadcn folder completely, it started to work 👍

[christianalfoni]

Ah, excellent, thanks for the confirmation 👍

Though I guess that means observer from mobx-react-lite does not support forwardRef? 🤔

Is it a bug?

[codeBelt]

What happens if observer is mistakenly added to a component? Will the library ignore it, or will it wrap the component again with observer?

[christianalfoni]

@codeBelt It will leave it alone 😄

So you should be able to safely activate the plugin and then iteratively remove your observers.

[codeBelt]

Hi @christianalfoni, is the source code for swc-plugin-observing-components available publicly? We'd like to review it before integrating it into our enterprise applications. Thanks!

[christianalfoni]

@codeBelt Jup! Here it is 😄 :

https://github.com/christianalfoni/observing-components

Let me know if you have any concerns!

[BasOnline]

@christianalfoni I love your plugin and everything worked fine using Vite and SWC until I received my new laptop with a Snapdragon CPU (ARM64). I didn't get any errors yet my components were no longer wrapped with "observer()".

Switching to babel and everything worked again as expected.

Could it be that your plugin and especially swc-plugin-observing-components is only compiled for win X86/64 and not ARM64 yet?