From 17597e2c3052fbb3fbd64d43f1248629e4f7a802 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuel@fancy.org.uk>
Date: Sun, 10 Jun 2018 21:22:01 +0100
Subject: [PATCH] Add Vue wrapper for React

---
 client/src/ui/commoncomponents.js |  2 ++
 client/src/ui/vue.js              | 21 ++++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/client/src/ui/commoncomponents.js b/client/src/ui/commoncomponents.js
index 74bc8ce8..8a7388c9 100644
--- a/client/src/ui/commoncomponents.js
+++ b/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';
diff --git a/client/src/ui/vue.js b/client/src/ui/vue.js
index 9a36d708..b0425a9a 100644
--- a/client/src/ui/vue.js
+++ b/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;