Share lifecycle hooks between Muban and Vue

[ThaNarie]

Muban uses the the reactivity api from Vue 3, and the component lifecycle hooks (currently only onMounted and onUnmounted) share the same API interface.

Any hooks would be reusable between Muban and Vue if only reactivity and other common principles are used, but when introducing these lifecycle hooks, that isn't possible anymore.

What should be possible

1. In a project that uses both Muban and Vue, reuse the same hooks between them.
2. In a library package that exposes hooks, have those usable in Muban and Vue components.

By default, these imports happen to:

import { onMounted, onUnmounted } from '@muban/muban';
import { onMounted, onUnmounted} from '@vue/runtime-core'

Challenges

Which library to target

When writing and publishing hook, we would have to decide which library to target (i.e., which onMounted version to import, from Vue or React).

If we write these hook from a Muban point of view, this means that Muban would need to be installed inside Vue projects. Which is a bad thing for multiple reasons.

So we might need to always target the Vue lifecycle hooks. Which might be okay since Muban already includes most of this for the composition api.

Unsupported Vue lifecycle hooks

Muban only supports onMounted and onUnmounted, while Vue has way more methods. This means that we can only support hooks that target those two lifecycle hooks.

Possible solutions

Alias imports

A likely candidate to make this possible is some kind of webpack config that would alias imports to those lifecycle hook.

Imports to the onMounted from Vue could be aliassed to the Muban version. And the other way around.
The downside is that aliassing only works on package level, not on export level. Both Muban and Vue have additional exports from their packages, so that will probably not work.

Babel plugin

That can modify the AST of these imports to split up and change them.

Runtime checks

Another direction would be to add "checks" in the muban lifecycle hooks to let them detect if they are in muban or Vue, and optionally call the Vue hooks instead.

Both Vue and Muban have a method of getting or detecting the "current component instance". This mechanism could be used to determine during runtime which library the component that uses the hook is from, by trying to get the "current instance" from both Muban and Vue, and use the Lifecycle method from that library.

The big downside is that these hooks would depend on both Muban and Vue as runtime dependencies, which is not something we want (for usage in Vue projects).

A proxy

We could provide this detection as a separate proxy function, that can be used instead of the direct Muban Lifecycle hooks to add this compatibility.

Built in muban hooks

If the proxy method is not possible, we could also build this behaviour into the Muban lifecycle hooks directly. While this only allows the usage of Muban hooks in Vue, this would require the whole Muban library in Vue projects, so doesn't really seem like al viable option.