akxcv/vuera

Context API support

Open

#50 opened on Jul 30, 2018

View on GitHub
 (13 comments) (9 reactions) (0 assignees)JavaScript (4,260 stars) (264 forks)batch import
enhancementgood first issuehelp wanted

Description

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.

Contributor guide

Tech stack
javascriptreactvue
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
5
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
over 1 week
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
React Context APIVue provide/injectvuera internals
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
15
Research direction
Examine vuera's source code files such as 'src/VueInReact.js' and 'src/ReactInVue.js' to understand how component wrapping is done. Investigate React's Context API (React.createContext) and how to pass context through a Vue intermediary. Look for any existing discussions in the issue comments or related PRs. Consider implementing a utility to forward React context to nested Vue components and vice versa.