Optimize React-in-Vue of immediate react children.

[phillbaker]

This is a proof of concept for handling a special case of React components as children of React components in Vue. It works by creating a registry of React components and then checking to see if components are parent/children.

Vue's built-in resolution with name checking isn't available as a utility, so included similar code.

• [ ] should add a test or two covering this behavior

Ref: https://github.com/akxcv/vuera/issues/19.

[phillbaker]

@akxcv any thoughts here?

[akxcv]

Hi! I skimmed through your code a few times, and, frankly, it's quite hard to understand what is going on. Could you please lay out the general strategy in plain English?

I think it should be possible to detect whether the component is from Vue or from React in the wrappers themselves (right now they are just blindly wrapping whatever we pass). Correct me if I'm wrong, but it is much simpler than using a registry of some sort.

[phillbaker]

@akxcv thanks for taking a look.

I think it should be possible to detect whether the component is from Vue or from React in the wrappers themselves (right now they are just blindly wrapping whatever we pass). Correct me if I'm wrong, but it is much simpler than using a registry of some sort.

I initially thought so and https://github.com/akxcv/vuera/pull/44 may help here, but I wasn't able to do this in the wrapper objects themselves because all components look the same - it seems only possible to determine the true type of a component in the plugins. E.g. in Vue, all react components are converted to vue components in VuePlugin.

I skimmed through your code a few times, and, frankly, it's quite hard to understand what is going on. Could you please lay out the general strategy in plain English?

• in VuePlugin, maintain a registry of which components are actually react components (under the hood)
• in React.js look up the component in the registry by any of the various names it could be referenced
  • if the component is a react component and all of its direct children are react components use react directly to render the children
• update Vue.js to use unique component names to avoid Vue reusing instances (frankly I don't understand the Vue internals enough to understand why this is necessary)

This was definitely a proof of concept and happy to refactor / take a different direction!

[akxcv]

Ah, the problem is that the Vue plugin is detecting a React component and instantly wrapping it into a React wrapper, right? Again, sorry for taking a long time...

[phillbaker]

That's correct!

I briefly tried to set additional properties on the created Vue component to be able to detect it later, but that didn't end up working, I forget exactly why.

On Tue, Jun 26, 2018 at 7:16 AM Alexander Komarov [email protected] wrote:

Ah, the problem is that the Vue plugin is detecting a React component and instantly wrapping it into a React wrapper, right? Again, sorry for taking a long time...

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/akxcv/vuera/pull/41#issuecomment-400271316, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFxKSCT0tbv8wEzt_S5ZZqsbNRbUztIks5uAhgZgaJpZM4UN1r2 .

[akxcv]

Then, I think, we need to rethink the whole flow of Vuera to be more robust, because the current algorithm is kind of hacky. I'll try to think about it soon.