add and use the relative api
This commit is contained in:
parent
e12dc28052
commit
23b8e2dd76
|
@ -25,6 +25,8 @@ import { ReactComponents, ReactHelpers } from './reactcomponents';
|
||||||
import { Patcher, MonkeyPatch } from './patcher';
|
import { Patcher, MonkeyPatch } from './patcher';
|
||||||
import GlobalAc from '../ui/autocomplete';
|
import GlobalAc from '../ui/autocomplete';
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
import path from 'path';
|
||||||
|
import Globals from './globals';
|
||||||
|
|
||||||
export default class PluginApi {
|
export default class PluginApi {
|
||||||
|
|
||||||
|
@ -56,6 +58,15 @@ export default class PluginApi {
|
||||||
return null;
|
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 Api() { return this }
|
||||||
|
|
||||||
get AsyncEventEmitter() { return AsyncEventEmitter }
|
get AsyncEventEmitter() { return AsyncEventEmitter }
|
||||||
|
@ -608,8 +619,8 @@ export default class PluginApi {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
Vuewrap(id, args) {
|
Vuewrap(id, component, props) {
|
||||||
return VueInjector.createReactElement(Vue.component(id, args));
|
return VueInjector.createReactElement(Vue.component(id, component), props);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
module.exports = (React, props) => {
|
||||||
|
return React.createElement(
|
||||||
|
'button',
|
||||||
|
{ className: 'exampleCustomElement', onClick: props.onClick },
|
||||||
|
'r'
|
||||||
|
);
|
||||||
|
}
|
|
@ -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);
|
||||||
|
}
|
|
@ -5,10 +5,14 @@
|
||||||
module.exports = (Plugin, Api, Vendor) => {
|
module.exports = (Plugin, Api, Vendor) => {
|
||||||
|
|
||||||
// Destructure some apis
|
// 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 { Vue } = Vendor;
|
||||||
const { React } = Reflection.modules; // This should be in 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 {
|
return class extends Plugin {
|
||||||
|
|
||||||
async onStart() {
|
async onStart() {
|
||||||
|
@ -68,41 +72,9 @@ module.exports = (Plugin, Api, Vendor) => {
|
||||||
// If children is not an array make it into one
|
// If children is not an array make it into one
|
||||||
if (!child.children instanceof Array) child.children = [child.children];
|
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
|
// Add our custom components to children
|
||||||
child.children.push(reactComponent);
|
child.children.push(customReactComponent(React, { onClick: e => this.handleClick(e, child.channel) }));
|
||||||
child.children.push(VueInjector.createReactElement(vueComponent)); // We need to wrap our vue component inside react
|
child.children.push(customVueComponent(Vuewrap, { onClick: e => this.handleClick(e, child.channel) }));
|
||||||
child.children.push(vueWrapComponent);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue