From 4a9cc603d28410eb33af2c5dd132e5d2c0b8f3cf Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sun, 26 Aug 2018 00:59:07 +0300
Subject: [PATCH] add vue component

---
 .../plugins/Custom Elements Example/index.js  | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/tests/ext/plugins/Custom Elements Example/index.js b/tests/ext/plugins/Custom Elements Example/index.js
index 6365e980..7fca8a75 100644
--- a/tests/ext/plugins/Custom Elements Example/index.js	
+++ b/tests/ext/plugins/Custom Elements Example/index.js	
@@ -5,7 +5,8 @@
 module.exports = (Plugin, Api, Vendor) => {
 
     // Destructure some apis
-    const { Logger, ReactComponents, Patcher, monkeyPatch, Reflection, Utils, CssUtils } = Api;
+    const { Logger, ReactComponents, Patcher, monkeyPatch, Reflection, Utils, CssUtils, VueInjector } = Api;
+    const { Vue } = Vendor;
     const { React } = Reflection.modules; // This should be in vendor
 
     return class extends Plugin {
@@ -70,18 +71,34 @@ module.exports = (Plugin, Api, Vendor) => {
             // If children is not an array make it into one
             if (!child.children instanceof Array) child.children = [child.children];
 
-            // add our custom component to children
-            child.children.push(React.createElement(
+            // Create custom components
+            const reactComponent = React.createElement(
                 'button',
-                { className: 'exampleCustomElement', onClick: e => this.handleReactClick(e, child.channel) },
-                'i'
-            ));
+                { className: 'exampleCustomElement', onClick: e => this.handleClick(e, child.channel) },
+                'r'
+            );
+
+            // Using Vue might be preferred to some
+            const vueComponent = Vue.component('somecomponent', {
+                render: createElement => {
+                    return createElement('button', {
+                        class: 'exampleCustomElement',
+                        on: {
+                            click: e => this.handleClick(e, child.channel)
+                        }
+                    }, 'v')
+                }
+            });
+
+            // 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
         }
 
         /**
          * Will log the channel object
          */
-        handleReactClick(e, channel) {
+        handleClick(e, channel) {
             Logger.log('Clicked!', channel);
         }
     }