2018-01-31 16:45:25 +01:00
|
|
|
/**
|
2018-03-20 22:11:11 +01:00
|
|
|
* BetterDiscord Vue Injector Module
|
2018-01-31 16:45:25 +01:00
|
|
|
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
|
|
|
* All rights reserved.
|
|
|
|
* https://betterdiscord.net
|
|
|
|
*
|
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
|
|
|
*/
|
|
|
|
|
2018-05-14 17:55:18 +02:00
|
|
|
import { WebpackModules } from 'modules';
|
2018-01-31 16:45:25 +01:00
|
|
|
import Vue from './vue';
|
|
|
|
|
|
|
|
export default class {
|
2018-03-20 22:11:11 +01:00
|
|
|
|
2018-03-21 00:24:31 +01:00
|
|
|
/**
|
|
|
|
* Creates a new Vue object and mounts it in the passed element.
|
|
|
|
* @param {HTMLElement} root The element to mount the new Vue object at
|
|
|
|
* @param {Object} options Options to pass to Vue
|
2018-03-24 17:06:34 +01:00
|
|
|
* @param {BdNode} bdnode The element to append
|
2018-03-21 00:24:31 +01:00
|
|
|
* @return {Vue}
|
|
|
|
*/
|
|
|
|
static inject(root, options, bdnode) {
|
2018-03-20 22:11:11 +01:00
|
|
|
if(bdnode) bdnode.appendTo(root);
|
|
|
|
|
|
|
|
const vue = new Vue(options);
|
|
|
|
|
2018-03-24 17:06:34 +01:00
|
|
|
vue.$mount(bdnode ? bdnode.element : root);
|
2018-03-20 22:11:11 +01:00
|
|
|
return vue;
|
|
|
|
}
|
|
|
|
|
2018-05-14 17:55:18 +02:00
|
|
|
/**
|
|
|
|
* Returns a React element that will render a Vue component.
|
|
|
|
* @param {Object} options Options to pass to Vue
|
|
|
|
* @return {React.Element}
|
|
|
|
*/
|
|
|
|
static createReactElement(options) {
|
|
|
|
const React = WebpackModules.getModuleByName('React');
|
|
|
|
return React.createElement(this.ReactCompatibility, {options});
|
|
|
|
}
|
|
|
|
|
|
|
|
static get ReactCompatibility() {
|
|
|
|
if (this._ReactCompatibility) return this._ReactCompatibility;
|
|
|
|
|
|
|
|
const React = WebpackModules.getModuleByName('React');
|
|
|
|
const ReactDOM = WebpackModules.getModuleByName('ReactDOM');
|
|
|
|
|
|
|
|
return this._ReactCompatibility = class VueComponent extends React.Component {
|
|
|
|
render() {
|
|
|
|
return React.createElement('span');
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2018-05-15 17:54:22 +02:00
|
|
|
this.vueInstance.$mount(this.vueMount);
|
2018-05-14 17:55:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
2018-05-15 17:54:22 +02:00
|
|
|
this.vueInstance.$mount(this.vueMount);
|
|
|
|
}
|
|
|
|
|
|
|
|
get vueMount() {
|
2018-05-14 17:55:18 +02:00
|
|
|
const element = ReactDOM.findDOMNode(this);
|
|
|
|
if (!element) return;
|
2018-05-15 17:54:22 +02:00
|
|
|
if (element.firstChild) return element.firstChild;
|
|
|
|
const newElement = document.createElement('span');
|
|
|
|
element.appendChild(newElement);
|
|
|
|
return newElement;
|
2018-05-14 17:55:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
get vueInstance() {
|
|
|
|
return this._vueInstance || (this._vueInstance = new Vue(this.props.options));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-01-31 16:45:25 +01:00
|
|
|
}
|