Context API support

I’m attempting to utilize Vuera to create Gutenberg components for Wordpress using Vue. Overall I’m pretty happy with it, but I’m running into a limitation that severely restricts the set of things I can do:

Gutenberg utilizes the Context API that was introduced in React 16 extensively throughout its built-in editor components, particularly to manage when a block is “selected” vs not. This context does not appear to bridge across the vuera embed.

The high level structure I’m using returns a VueInReact wrapped component to Gutenberg, with my core Vue component handling my custom logic, and then as necessary embedding ReactInVue wrapped Gutenberg builtins.

So we have React (gutenberg, sets context) -> Vue (my code) ----> React (gutenberg, looks for context and doesn’t find it)

I’m happy to try to figure out/implement a fix for this, but would appreciate a pointer in the right direction if you have any ideas.

[akxcv]

Hi, yes, I’ve been thinking about how to bridge React context across vuera. I think that the best solution is to render inner React components via portals instead of ReactDOM.render (only in React > 16). This should preserve context if I’m not mistaken.

[kball]

Digging into this a more, I haven’t been able to track down how to programatically pull out a list of the Contexts that a component is embedded in.

Ideally I’d like to have the VueInReact wrapper grab that list (it’s a normal React component that has access to existing contexts), stash them on the Vue instance, and then teach ReactInVue to look up its parent tree within Vue for contexts and plug them into place again.

Maybe @gaearon or @acdlite could help point us in the right direction?