Reactive state interoperability

[krulod]

I am the maintainer of Reatom, a library for state management We are currently creating a compatibility layer for Vue. Unfortunately, Vue reactivity engine does not expose enough APIs for such integration to be implemented properly.

The problem is the lack of a way to hook into a ref's lifecycle - we need it to figure out whether the integration should start listening to Reatom state changes and when to stop. Our current implementation subscribes on the first ref read and unsubscribes when the current effect scope is disposed (onScopeDispose hook). A simplified version of it can be found in the playground. You can see that a Reatom computed atom keeps restarting even when it's not actually used, which is incorrect behaviour.

In Reatom, we have onConnect and onDisconnect APIs that make it possible to invoke a function when the first subscription to an atom is created and when the last one is disposed. Having their Vue counterparts would be enough for our needs, but we believe that a more high-level solution is possible. This solution is an abstract helper for creating Vue refs from any object that implements the well-known Observable contract.

In Solid.js, there is a from API, which does exactly that, creates a Solid Signal from a custom subscribable data source:

function from<T>(
  producer:
    | ((setter: (v: T) => T) => () => void)
    | {
        subscribe: (
          fn: (v: T) => void
        ) => (() => void) | { unsubscribe: () => void };
      }
): () => T;