Optimize React-in-Vue of immediate react children.

src/VuePlugin.js

@@ -4,6 +4,9 @@ import VueResolver from './resolvers/Vue'
 /**
  * This mixin automatically wraps all React components into Vue.
  */
+
+const reactRegistry = {}
+
 export default {
  install (Vue, options) {
  /**
@@ -13,15 +16,20 @@ export default {
  const originalComponentsMergeStrategy = Vue.config.optionMergeStrategies.components
  Vue.config.optionMergeStrategies.components = function (parent, ...args) {
  const mergedValue = originalComponentsMergeStrategy(parent, ...args)
+
  const wrappedComponents = mergedValue
- ? Object.entries(mergedValue).reduce(
- (acc, [k, v]) => ({
+ ? Object.entries(mergedValue).reduce((acc, [k, v]) => {
+ const components = {
  ...acc,
- [k]: isReactComponent(v) ? VueResolver(v) : v,
- }),
- {}
- )
+ [k]: isReactComponent(v) ? VueResolver(v, reactRegistry) : v
+ }
+ if (isReactComponent(v)) {
+ reactRegistry[k] = v
+ }
+ return components
+ }, {})
  : mergedValue
+
  return Object.assign(parent, wrappedComponents)
  }
  },

src/resolvers/Vue.js

@@ -1,6 +1,6 @@
 import { ReactWrapper } from '../'
 
-export default function VueResolver (component) {
+export default function VueResolver (component, reactRegistry) {
  return {
  components: { ReactWrapper },
  props: ['passedProps'],
@@ -11,6 +11,7 @@ export default function VueResolver (component) {
  {
  props: {
  component,
+ reactRegistry,
  passedProps: this.$props.passedProps,
  },
  attrs: this.$attrs,

src/wrappers/React.js

@@ -1,7 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import Vue from 'vue'
 import VueWrapper from './Vue'
 
+const makeVueContainer = () => {
+ return class ReactInReact extends VueWrapper {};
+}
+
 const makeReactContainer = Component => {
  return class ReactInVue extends React.Component {
  static displayName = `ReactInVue${Component.displayName || Component.name || 'Component'}`
@@ -23,32 +28,80 @@ const makeReactContainer = Component => {
  }
  }
 
- render () {
+ wrapReactChildren(children, reactChildren) {
+ return children.map((child, index) => {
+ const wrappedChildren = this.wrapVueChildren(child.componentOptions.children)
+ const childrenComponent = child.componentOptions.children
+ ? React.createElement(makeVueContainer(), { component: wrappedChildren })
+ : null
+ return React.createElement(
+ reactChildren[index],
+ {
+ key: `${this.constructor.displayName}Child${index}`,
+ ...child.componentOptions.propsData
+ },
+ childrenComponent
+ )
+ })
+ }
+
+ render() {
  const {
  children,
  // Vue attaches an event handler, but it is missing an event name, so
  // it ends up using an empty string. Prevent passing an empty string
  // named prop to React.
  '': _invoker,
+ __vueraReactChildren,
  ...rest
  } = this.state
  const wrappedChildren = this.wrapVueChildren(children)
 
  return (
  <Component {...rest}>
- {children && <VueWrapper component={wrappedChildren} />}
+ {(children && __vueraReactChildren.length === children.length)
+ ? this.wrapReactChildren(children, __vueraReactChildren)
+ : (children && <VueWrapper component={wrappedChildren} />)}
  </Component>
  )
  }
  }
 }
 
+const camelizeRE = /-(\w)/g
+const camelize = function(str) {
+ return str.replace(camelizeRE, function(_, c) {
+ return c ? c.toUpperCase() : ''
+ })
+}
+const capitalize = function(str) {
+ return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
 export default {
- props: ['component', 'passedProps'],
+ props: ['component', 'passedProps', 'reactRegistry'],
  render (createElement) {
  return createElement('div', { ref: 'react' })
  },
  methods: {
+ computeReactChildren () {
+ const reactChildren = []
+ if (this.$slots.default && this.$slots.default.length) {
+ this.$slots.default.forEach(child => {
+ if (child.componentOptions && child.componentOptions.tag) {
+ const id = child.componentOptions.tag
+ const camelizedId = camelize(id)
+ const pascalCaseId = capitalize(camelizedId)
+ reactChildren.push(
+ this.reactRegistry[id] ||
+ this.reactRegistry[camelizedId] ||
+ this.reactRegistry[pascalCaseId]
+ )
+ }
+ })
+ }
+ return reactChildren
+ },
  mountReactComponent (component) {
  const Component = makeReactContainer(component)
  const children = this.$slots.default !== undefined ? { children: this.$slots.default } : {}
@@ -59,6 +112,7 @@ export default {
  {...this.$listeners}
  {...children}
  ref={ref => (this.reactComponentRef = ref)}
+ __vueraReactChildren={this.computeReactChildren()}
  />,
  this.$refs.react
  )
@@ -76,7 +130,10 @@ export default {
  * `$slots` or `$children`.
  */
  if (this.$slots.default !== undefined) {
- this.reactComponentRef.setState({ children: this.$slots.default })
+ this.reactComponentRef.setState({
+ children: this.$slots.default,
+ __vueraReactChildren: this.computeReactChildren()
+ })
  } else {
  this.reactComponentRef.setState({ children: null })
  }

src/wrappers/Vue.js

@@ -50,6 +50,10 @@ export default class VueContainer extends React.Component {
  this.vueInstance.$destroy()
  }
 
+ componentName() {
+ return `vuera-internal-component-name-${this.vueraComponentName}`
+ }
+
  /**
  * Creates and mounts the Vue instance.
  * NOTE: since we need to access the current instance of VueContainer, as well as the Vue instance
@@ -67,16 +71,16 @@ export default class VueContainer extends React.Component {
  data: props,
  render (createElement) {
  return createElement(
- VUE_COMPONENT_NAME,
+ reactThisBinding.componentName(),
  {
- props: this.$data,
+ props: this.$data
  },
  [wrapReactChildren(createElement, this.children)]
  )
  },
  components: {
- [VUE_COMPONENT_NAME]: component,
- 'vuera-internal-react-wrapper': ReactWrapper,
+ [reactThisBinding.componentName()]: component,
+ 'vuera-internal-react-wrapper': ReactWrapper
  },
  })
  }
@@ -87,7 +91,7 @@ export default class VueContainer extends React.Component {
  /**
  * Replace the component in the Vue instance and update it.
  */
- this.vueInstance.$options.components[VUE_COMPONENT_NAME] = nextComponent
+ this.vueInstance.$options.components[this.componentName()] = nextComponent
  this.vueInstance.$forceUpdate()
  }