-
Notifications
You must be signed in to change notification settings - Fork 241
Context API support #50
Comments
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 Maybe @gaearon or @acdlite could help point us in the right direction? |
I get here from yout post @kball: https://zendev.com/2018/07/31/wordpress-gutenberg-blocks-vue.html 😃 What a nice coincident, I was working on refactoring one of the components mentioned in the article to use new Context API. To do it, I had to apply some updates to the custom serializer we built to make output compatible with WordPress specific rules. Related PR is here: WordPress/gutenberg#8189. It might be helpful for your explorations. I think that the code that needs to be included in I might be wrong, not sure if the issue is with rendering, or with |
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 |
related facebook/react#13336 |
Any new updates on this? This is a significant limitation of |
@haldunanil no, unfortunately, there haven't been any updates so far. What you could do in your case, though, is create a set of wrapper components instead of using Vuera as is. It would work something like this:
I didn't try this at home, but it should be possible to create a sort of a bridge this way. Furthermore, such a bridge can be extended to do more advanced things in the future. It's also not cumbersome at all: if you do things right, all the bridging logic would be hidden behind a couple of components (one for React->Vue bridge, one for Vue->React bridge). |
@akxcv is there a gist or working codesandbox you can point me to? I think I follow your explanation but am confused how it would work in practice. I'm also not super familiar with Vue so I may be missing some stuff here. |
Sadly, I'm not aware of any gists or sandboxes. I'll try to experiment with this when I have a moment. |
Appreciate it!
|
React contexts is basically vue's inject/provide so this should be used instead of the suggestion to add props I can have a look, it should actually be very straightforward to implement this The wrapped component should invisibly pass the context to the child component by providing it and the Vue to react by injecting it, but the vue component could also use the context by using what's provided React's api provide no way to retrieve all contexts though, so some React under the hood hack might be needed (which might break if they update the inner workings) If there is no way to achieve this, the Portal api can be Used but then the Vue component will be completely unaware of context and a separate api will be needed to pass context to it |
That would be awesome @Tofandel! |
So as it seems migrating this lib to a portal would be a huge undertaking, it is possible to access the full context using a react internal in v16: Untested yet but the dev is on my master fork |
vuera itself is a pretty small library, it should not be very hard to rewrite whatever logic there currently is.
… On 6 Jan 2020, at 14:14, Adrien Foulon ***@***.***> wrote:
So as it seems migrating this lib to a portal would be a huge undertaking, it is possible to access the full context using a react internal: this.__reactInternalMemoizedUnmaskedChildContext
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub <#50?email_source=notifications&email_token=AEDFNYUDVJUFAP3TUHLUY63Q4MOCNA5CNFSM4FM4W3WKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIFI6JI#issuecomment-571117349>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEDFNYWJIETCCK26HOKGWKDQ4MOCNANCNFSM4FM4W3WA>.
|
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.
The text was updated successfully, but these errors were encountered: