lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

add and use the relative api

This commit is contained in:
Jiiks 2018-08-26 03:48:23 +03:00
parent e12dc28052
commit 23b8e2dd76
4 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/modules/pluginapi.js
View File

@ -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);
}
}

7
tests/ext/plugins/Custom Elements Example/components/reactcomponent.js Normal file
View File

@ -0,0 +1,7 @@
module.exports = (React, props) => {
return React.createElement(
'button',
{ className: 'exampleCustomElement', onClick: props.onClick },
'r'
);
}

13
tests/ext/plugins/Custom Elements Example/components/vuecomponent.js Normal file
View File

@ -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);
}

42
tests/ext/plugins/Custom Elements Example/index.js
View File

@ -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) }));
}
/**