Merge pull request #17 from JsSucks/ui

Merge

client/package.json

@@ -22,10 +22,14 @@
     "babel-preset-react": "^6.24.1",
     "babel-loader": "^7.1.2",
     "moment": "^2.20.1",
-    "jquery": "^3.2.1"
+    "jquery": "^3.2.1",
+    "vue": "^2.5.13",
+    "vue-loader": "^13.7.0",
+    "vue-template-compiler": "^2.5.13",
+    "css-loader": "^0.28.9"
   },
   "scripts": {
     "build": "webpack --progress --colors",
     "watch": "webpack --progress --colors --watch"
-  } 
+  }
-}
+}

client/src/index.js

@@ -10,13 +10,19 @@
 
 'use strict';
 
-const { Global, Logger, Utils, PluginManager, BDIpc, WebpackModules, SocketProxy } = require('./modules');
+const { Global, Logger, Utils, PluginManager, BDIpc, WebpackModules, SocketProxy, Events } = require('./modules');
+//const { UI } = require('./modules/ui/index.jsx');
 
 class BetterDiscord {
 
     constructor() {
         window.bdUtils = Utils;
         window.wpm = WebpackModules;
+        Events.on('global-ready', e => {
+            const { UI } = require('./modules/ui/vueui.js');
+            this.ui = new UI();
+        });
+        // this.UI = new UI();
     }
 
 }

client/src/modules/global.js

@@ -11,12 +11,14 @@
 const { Module } = require('./modulebase');
 const { Events } = require('./events');
 const { BDIpc } = require('./bdipc');
+const { WebpackModules } = require('./webpackmodules');
 
 class Global extends Module {
 
     constructor(args) {
         super(args);
         this.first();
+        window.gl = this;
     }
 
     bindings() {
@@ -29,6 +31,13 @@ class Global extends Module {
         (async () => {
             const config = await BDIpc.send('getConfig');
             this.setState(config);
+           /* const getReact = await WebpackModules.getModuleByProps(('createElement', 'cloneElement'));
+            this.React = getReact[0].exports;
+            window.React = this.React;
+            const getReactDom = await WebpackModules.getModuleByProps(('render', 'findDOMNode'));
+            this.reactDOM = getReactDom[0].exports;*/
+           // this.setState(Object.assign(config, { React, reactDOM }));
+            Events.emit('global-ready');
         })();
 
         if (window.__bd) {
@@ -51,6 +60,10 @@ class Global extends Module {
         return this.state[name];
     }
 
+    getLoadedModule(name) {
+        return this[name];
+    }
+
 }
 
 const _instance = new Global();

client/src/modules/ui/components/bdbutton.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="bd-settings-button">
+        <div class="bd-settings-button-btn"></div>
+    </div>
+</template>
+
+<script>
+    export default {
+        
+    }
+</script>
+
+<style>
+    .guilds-wrapper {
+        padding-top: 50px !important;
+    }
+    .bd-settings-button {
+        position: absolute;
+        z-index: 90001;
+        top: 22px;
+        width: 75px;
+        height: 48px;
+        left: 0;
+        background: #2f3136;
+        box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 2px 0 rgba(0,0,0,.06);
+    }
+    .bd-settings-button .bd-settings-button-btn {
+        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
+        background-size: 50% 50%;
+        background-repeat: no-repeat;
+        background-position: center;
+        width: 100%;
+        height: 100%;
+        z-index: 90002;
+        cursor: pointer;
+        filter: grayscale(100%);
+        opacity: .5;
+        transition: all .4s ease-in-out;
+    }
+    .bd-settings-button .bd-settings-button-btn:hover {
+        filter: none;
+        opacity: 1;
+    }
+</style>

client/src/modules/ui/renderer.jsx

@@ -0,0 +1,35 @@
+/**
+ * BetterDiscord Client Renderer
+ * Copyright (c) 2015-present JsSucks - https://github.com/JsSucks
+ * All rights reserved.
+ * https://github.com/JsSucks - 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. 
+*/
+
+const { WebpackModules } = require('../');
+
+class Renderer {
+
+    static async render(component, root) {
+        if (!this.React) this.React = await this.getReact();
+        if (!this.reactDom) this.reactDom = await this.getReactDom();
+        const React = this.React;
+        window.React = React;
+        this.reactDom.render(component, root);
+    }
+
+    static async getReact() {
+        const getReact = await WebpackModules.getModuleByProps(('createElement', 'cloneElement'));
+        return getReact[0].exports;
+    }
+
+    static async getReactDom() {
+        const getReactDom = await WebpackModules.getModuleByProps(('render', 'findDOMNode'));
+        return getReactDom[0].exports;
+    }
+
+}
+
+module.exports = { Renderer };

client/src/modules/ui/vueui.js

@@ -0,0 +1,33 @@
+/**
+ * BetterDiscord Client UI Module
+ * Copyright (c) 2015-present JsSucks - https://github.com/JsSucks
+ * All rights reserved.
+ * https://github.com/JsSucks - 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. 
+*/
+
+const $ = require('jquery');
+const Vue = require('vue');
+
+const BdButton = (require('./components/bdbutton.vue')).default;
+class UI {
+
+    constructor() {
+        $('body').append($('<div/>', {
+            class: 'bd-settingsbutton',
+            id: 'bd-settingsbutton'
+        }));
+
+         this.vueInstance = new Vue.default({
+             el: '#bd-settingsbutton',
+             template: '<BdButton/>',
+             components: { BdButton }
+         });
+    }
+
+}
+
+
+module.exports = { UI }

client/src/modules/webpackmodules.js

@@ -8,30 +8,63 @@
  * LICENSE file in the root directory of this source tree. 
 */
 
+const KnownModules = {
+    'React': ('createElement', 'cloneElement'),
+    'react-dom': ('render', 'findDOMNode')
+};
+
+const Cache = {};
+
 class WebpackModules {
 
-    static async getModuleByProps(props) {
+    static getModuleByNameSync(name, first, fallback) {
-        const modules = await this.getAllModules();
+        //TODO return not first from cache?
-        return new Promise((resolve, reject) => {
+        if (Cache.hasOwnProperty(name)) return Cache[name];
-            const rm = [];
+        if (KnownModules.hasOwnProperty(name)) fallback = KnownModules[name];
-            for (let index in modules) {
+        if (!fallback) return null;
-                if (!modules.hasOwnProperty(index)) continue;
+        return Cache[name] = this.getModuleByPropsSync(fallback, first);
-                const module = modules[index];
+    }
-                const { exports } = module;
 
-                if (!exports || typeof exports !== 'object') continue;
+    static getModuleByPropsSync(props, first) {
-                if (!(props in exports)) continue;
+        const modules = this.getAllModulesSync();
-                rm.push(module);
+        const rm = [];
-               // resolve(module);
+        for (let index in modules) {
-               // break;
+            if (!modules.hasOwnProperty(index)) continue;
-            }
+            const module = modules[index];
-            resolve(rm);
+            const { exports } = module;
-            reject(null);
+
-        });
+            if (!exports || typeof exports !== 'object') continue;
+            if (!(props in exports)) continue;
+            rm.push(module);
+        }
+        return first ? rm[0].exports : rm;
+    }
+
+    static async getModuleByName(name, first, fallback) {
+        if (Cache.hasOwnProperty(name)) return Cache[name];
+        if (KnownModules.hasOwnProperty(name)) fallback = KnownModules[name];
+        if (!fallback) return null;
+        return Cache[name] = await this.getModuleByProps(fallback, first);
+    }
+
+    static async getModuleByProps(props, first) {
+        const modules = await this.getAllModules();
+
+        const rm = [];
+        for (let index in modules) {
+            if (!modules.hasOwnProperty(index)) continue;
+            const module = modules[index];
+            const { exports } = module;
+
+            if (!exports || typeof exports !== 'object') continue;
+            if (!(props in exports)) continue;
+            rm.push(module);
+        }
+        return first ? rm[0].exports : rm;
     }
 
     /*This will most likely not work for most modules*/
-    static async getModuleByName(name) {
+   /* static async getModuleByName(name) {
         const modules = await this.getAllModules();
         return new Promise((resolve, reject) => {
             for (let index in modules) {
@@ -51,6 +84,19 @@ class WebpackModules {
 
             reject(null);
         });
+    }*/
+
+    static getAllModulesSync() {
+        const id = 'bd-webpackmodulessync';
+        const __webpack_require__ = window['webpackJsonp'](
+            [],
+            {
+                [id]: (module, exports, __webpack_require__) => exports.default = __webpack_require__
+            },
+            [id]).default;
+        delete __webpack_require__.m[id];
+        delete __webpack_require__.c[id];
+        return __webpack_require__.c;
     }
 
     static async getAllModules() {

client/webpack.config.js

@@ -7,10 +7,16 @@ const jsLoader = {
     exclude: /node_modules/,
     loader: 'babel-loader',
     query: {
-       // presets: ['es2015', 'react']
+        presets: ['react']
     }
 }
 
+const vueLoader = {
+    test: /\.(vue)$/,
+    exclude: /node_modules/,
+    loader: 'vue-loader'
+}
+
 module.exports = {
     entry: './src/index.js',
     output: {
@@ -18,10 +24,15 @@ module.exports = {
         filename: 'betterdiscord.client.js'
     },
     module: {
-        loaders: [jsLoader]
+        loaders: [jsLoader, vueLoader]
     },
     externals: {
         'electron': 'window.require("electron")'
+    },
+    resolve: {
+        alias: {
+            vue$: path.resolve('node_modules', 'vue', 'dist', 'vue.esm.js')
+        }
     }
    /* resolve: {
         alias: {