From c2ccfd02dad6b23db7804604c7ee8732148bd179 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuel@fancy.org.uk>
Date: Wed, 22 Aug 2018 20:56:05 +0100
Subject: [PATCH] Move ReactComponent to Vue injector

---
 client/src/ui/commoncomponents.js |  2 +-
 client/src/ui/vue.js              | 20 ++------------------
 client/src/ui/vueinjector.js      | 22 +++++++++++++++++++++-
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/client/src/ui/commoncomponents.js b/client/src/ui/commoncomponents.js
index 0bb9ee28..b5c7b809 100644
--- a/client/src/ui/commoncomponents.js
+++ b/client/src/ui/commoncomponents.js
@@ -1,4 +1,4 @@
-export { ReactComponent } from './vue';
+export { ReactComponent } from './vueinjector';
 
 export * from './components/common';
 
diff --git a/client/src/ui/vue.js b/client/src/ui/vue.js
index 6aa34ab6..13d7d7e5 100644
--- a/client/src/ui/vue.js
+++ b/client/src/ui/vue.js
@@ -8,10 +8,10 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { WebpackModules } from 'modules';
 import Vue from 'vue';
 import VTooltip from 'v-tooltip';
 import DOM from './dom';
+import VueInjector from './vueinjector';
 
 Vue.use(VTooltip, {
     defaultContainer: 'bd-tooltips',
@@ -45,22 +45,6 @@ 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);
+Vue.use(VueInjector);
 
 export default Vue;
diff --git a/client/src/ui/vueinjector.js b/client/src/ui/vueinjector.js
index 0523d434..243e565b 100644
--- a/client/src/ui/vueinjector.js
+++ b/client/src/ui/vueinjector.js
@@ -9,7 +9,7 @@
 */
 
 import { WebpackModules } from 'modules';
-import Vue from './vue';
+import Vue from 'vue';
 
 export default class {
 
@@ -93,4 +93,24 @@ export default class {
         }
     }
 
+    static install(Vue) {
+        Vue.component('ReactComponent', ReactComponent);
+    }
+
 }
+
+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);
+    }
+};