Add Vue wrapper for React

client/src/ui/commoncomponents.js

@@ -1,3 +1,5 @@
+export { ReactComponent } from './vue';
+
 export * from './components/common';
 
 export { default as SettingsPanel } from './components/bd/SettingsPanel.vue';

client/src/ui/vue.js

@@ -8,9 +8,10 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import DOM from 'dom';
+import { WebpackModules } from 'modules';
 import Vue from 'vue';
 import VTooltip from 'v-tooltip';
+import DOM from './dom';
 
 Vue.use(VTooltip, {
     defaultContainer: 'bd-tooltips',
@@ -44,4 +45,22 @@ Vue.use(VTooltip, {
     }
 });
 
+export const ReactComponent = {
+    props: ['component', 'component-props', 'component-children', 'react-element'],
+    render(createElement) {
+        return createElement('div');
+    },
+    mounted() {
+        const { React, ReactDOM } = WebpackModules;
+
+        ReactDOM.unmountComponentAtNode(this.$el);
+        ReactDOM.render(this.reactElement || React.createElement(this.component, this.componentProps, ...(this.componentChildren || [])), this.$el);
+    },
+    beforeDestroy() {
+        WebpackModules.ReactDOM.unmountComponentAtNode(this.$el);
+    }
+};
+
+Vue.component('ReactComponent', ReactComponent);
+
 export default Vue;