From 23b8e2dd76bc1ba89398094696ff2d00386d03e5 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sun, 26 Aug 2018 03:48:23 +0300
Subject: [PATCH] add and use the relative api

---
 client/src/modules/pluginapi.js               | 15 ++++++-
 .../components/reactcomponent.js              |  7 ++++
 .../components/vuecomponent.js                | 13 ++++++
 .../plugins/Custom Elements Example/index.js  | 42 ++++---------------
 4 files changed, 40 insertions(+), 37 deletions(-)
 create mode 100644 tests/ext/plugins/Custom Elements Example/components/reactcomponent.js
 create mode 100644 tests/ext/plugins/Custom Elements Example/components/vuecomponent.js

diff --git a/client/src/modules/pluginapi.js b/client/src/modules/pluginapi.js
index 8a5c1768..9f933102 100644
--- a/client/src/modules/pluginapi.js
+++ b/client/src/modules/pluginapi.js
@@ -25,6 +25,8 @@ import { ReactComponents, ReactHelpers } from './reactcomponents';
 import { Patcher, MonkeyPatch } from './patcher';
 import GlobalAc from '../ui/autocomplete';
 import Vue from 'vue';
+import path from 'path';
+import Globals from './globals';
 
 export default class PluginApi {
 
@@ -56,6 +58,15 @@ export default class PluginApi {
         return null;
     }
 
+    relativeRequire(file) {
+        const absolutePath = path.join(this.pluginPath, file);
+        delete Globals.require.cache[Globals.require.resolve(absolutePath)];
+        return Globals.require(absolutePath);
+    }
+    get relative() {
+        return this.relativeRequire.bind(this);
+    }
+
     get Api() { return this }
 
     get AsyncEventEmitter() { return AsyncEventEmitter }
@@ -608,8 +619,8 @@ export default class PluginApi {
         });
     }
 
-    Vuewrap(id, args) {
-        return VueInjector.createReactElement(Vue.component(id, args));
+    Vuewrap(id, component, props) {
+        return VueInjector.createReactElement(Vue.component(id, component), props);
     }
 
 }
diff --git a/tests/ext/plugins/Custom Elements Example/components/reactcomponent.js b/tests/ext/plugins/Custom Elements Example/components/reactcomponent.js
new file mode 100644
index 00000000..36222d14
--- /dev/null
+++ b/tests/ext/plugins/Custom Elements Example/components/reactcomponent.js	
@@ -0,0 +1,7 @@
+module.exports = (React, props) => {
+    return React.createElement(
+        'button',
+        { className: 'exampleCustomElement', onClick: props.onClick },
+        'r'
+    );
+}
diff --git a/tests/ext/plugins/Custom Elements Example/components/vuecomponent.js b/tests/ext/plugins/Custom Elements Example/components/vuecomponent.js
new file mode 100644
index 00000000..197f72cc
--- /dev/null
+++ b/tests/ext/plugins/Custom Elements Example/components/vuecomponent.js	
@@ -0,0 +1,13 @@
+module.exports = (VueWrap, props) => {
+    return VueWrap('somecomponent', {
+        render: function (createElement) {
+            return createElement('button', {
+                class: 'exampleCustomElement',
+                on: {
+                    click: this.onClick
+                }
+            }, 'v');
+        },
+        props: ['onClick']
+    }, props);
+}
diff --git a/tests/ext/plugins/Custom Elements Example/index.js b/tests/ext/plugins/Custom Elements Example/index.js
index 9c00fbe5..904d8982 100644
--- a/tests/ext/plugins/Custom Elements Example/index.js	
+++ b/tests/ext/plugins/Custom Elements Example/index.js	
@@ -5,10 +5,14 @@
 module.exports = (Plugin, Api, Vendor) => {
 
     // Destructure some apis
-    const { Logger, ReactComponents, Patcher, monkeyPatch, Reflection, Utils, CssUtils, VueInjector, Vuewrap } = Api;
+    const { Logger, ReactComponents, Patcher, monkeyPatch, Reflection, Utils, CssUtils, VueInjector, Vuewrap, relative } = Api;
     const { Vue } = Vendor;
     const { React } = Reflection.modules; // This should be in vendor
 
+    // Import custom components from relative paths
+    const customVueComponent = relative('./components/vuecomponent');
+    const customReactComponent = relative('./components/reactcomponent');
+
     return class extends Plugin {
 
         async onStart() {
@@ -68,41 +72,9 @@ module.exports = (Plugin, Api, Vendor) => {
             // If children is not an array make it into one
             if (!child.children instanceof Array) child.children = [child.children];
 
-            // Create custom components
-            const reactComponent = React.createElement(
-                'button',
-                { 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')
-                }
-            });
-
-            // 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);
+            child.children.push(customReactComponent(React, { onClick: e => this.handleClick(e, child.channel) }));
+            child.children.push(customVueComponent(Vuewrap, { onClick: e => this.handleClick(e, child.channel) }));
         }
 
         /**