feat: directive $observe to wrap component in a Memo

[misaeldossantos]

Hi, I created a babel plugin to automatically wrap components in a just by adding the $observe directive to any jsx tag where you want to observe (I originally created it for mobx, then I adapted it for legend state, it worked the same way).

Example:

<div $observe>Count: {state$.count.get()}</div>

Babel transforms it to

<Memo>{() => <div>Count: {state$.count.get()}</div>}</Memo>

It is identical to the plugin that already exists (https://legendapp.com/open-source/state/v3/react/fine-grained-reactivity/#optionally-add-the-babel-plugin), but without needing to wrap the components in a Memo, just adding a new prop to the component ($observe)

[jmeistrich]

I experimented with something like this in the beginning but it felt too different from regular React. It makes it harder to document best practices when a feature depends on a build pipeline that not everyone uses, and it adds more surface area for bugs and support.

So I don't think we want to build this into the core, at least for now.

But I do think it's very cool! Would you like to create it as a separate package and we could link to it in the docs? I'd feel more comfortable linking to it and talking about it as a cool thing you made, outside of the core.