add vue component

This commit is contained in:
Jiiks 2018-08-26 00:59:07 +03:00
parent d4aa8fb377
commit 4a9cc603d2
1 changed files with 24 additions and 7 deletions

View File

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