From e12dc280529e08c1ee949609b97fdc01aa00f3d8 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sun, 26 Aug 2018 01:37:37 +0300
Subject: [PATCH] Vuewrap

---
 client/src/modules/pluginapi.js                   |  5 +++++
 .../ext/plugins/Custom Elements Example/index.js  | 15 ++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/src/modules/pluginapi.js b/client/src/modules/pluginapi.js
index bf987018..8a5c1768 100644
--- a/client/src/modules/pluginapi.js
+++ b/client/src/modules/pluginapi.js
@@ -24,6 +24,7 @@ import DiscordApi from './discordapi';
 import { ReactComponents, ReactHelpers } from './reactcomponents';
 import { Patcher, MonkeyPatch } from './patcher';
 import GlobalAc from '../ui/autocomplete';
+import Vue from 'vue';
 
 export default class PluginApi {
 
@@ -607,6 +608,10 @@ export default class PluginApi {
         });
     }
 
+    Vuewrap(id, args) {
+        return VueInjector.createReactElement(Vue.component(id, args));
+    }
+
 }
 
 // Stop plugins from modifying the plugin API for all plugins
diff --git a/tests/ext/plugins/Custom Elements Example/index.js b/tests/ext/plugins/Custom Elements Example/index.js
index 5643357b..9c00fbe5 100644
--- a/tests/ext/plugins/Custom Elements Example/index.js	
+++ b/tests/ext/plugins/Custom Elements Example/index.js	
@@ -5,7 +5,7 @@
 module.exports = (Plugin, Api, Vendor) => {
 
     // Destructure some apis
-    const { Logger, ReactComponents, Patcher, monkeyPatch, Reflection, Utils, CssUtils, VueInjector } = Api;
+    const { Logger, ReactComponents, Patcher, monkeyPatch, Reflection, Utils, CssUtils, VueInjector, Vuewrap } = Api;
     const { Vue } = Vendor;
     const { React } = Reflection.modules; // This should be in vendor
 
@@ -87,9 +87,22 @@ module.exports = (Plugin, Api, Vendor) => {
                 }
             });
 
+            // You can also use Vuewrap which does the wrapping for us
+            const vueWrapComponent = Vuewrap('somecomponent', {
+                render: createElement => {
+                    return createElement('button', {
+                        class: 'exampleCustomElement',
+                        on: {
+                            click: e => this.handleClick(e, child.channel)
+                        }
+                    }, 'vw')
+                }
+            });
+
             // Add our custom components to children
             child.children.push(reactComponent);
             child.children.push(VueInjector.createReactElement(vueComponent)); // We need to wrap our vue component inside react
+            child.children.push(vueWrapComponent);
         }
 
         /**