Merge 50f378e575 into 835cc3134c

client/src/hmr.js

@@ -0,0 +1,34 @@
+
+const electron = require('electron');
+const request = require(require('path').join(electron.remote.app.getAppPath(), 'node_modules', 'request'));
+
+const http_path = electron.ipcRenderer.sendSync('--bd-webpack-server');
+
+function _eval() {
+    eval(arguments[0]);
+}
+
+function loadScript(url) {
+    console.log('[BetterDiscord] loading script', url);
+
+    request({
+        url,
+        strictSSL: false
+    }, function (error, response, data) {
+        if (error) console.error('[BetterDiscord] webpack chunk error', error);
+
+        _eval(data);
+    });
+}
+
+loadScript(`${http_path}/betterdiscord.client.js`);
+
+// Patch document.head.appendChild to load new chunks properly
+const appendChild = document.head.appendChild;
+document.head.appendChild = function (script, ...args) {
+    if (script.tagName.toLowerCase() !== 'script' || !script.src.startsWith(`${http_path}/`)) {
+        return appendChild.call(this, script, ...args);
+    }
+
+    loadScript(script.src);
+};

client/src/index.js

@@ -139,3 +139,7 @@ if (window.BetterDiscord) {
     Events.on('autopatcher', () => instance = new BetterDiscord());
     ReactAutoPatcher.autoPatch().then(() => Events.emit('autopatcher'));
 }
+
+if (module.hot) {
+    module.hot.accept('./styles/index.scss', () => DOM.injectStyle(BdCss, 'bdmain'));
+}

client/webpack.base.config.js

@@ -22,6 +22,7 @@ const scssLoader = {
 };
 
 module.exports = {
+    context: __dirname,
     entry: './src/index.js',
     module: {
         rules: [jsLoader, vueLoader, scssLoader]
@@ -40,16 +41,16 @@ module.exports = {
     },
     resolve: {
         alias: {
-            vue$: path.resolve('..', 'node_modules', 'vue', 'dist', 'vue.esm.js')
+            vue$: path.resolve(__dirname, '..', 'node_modules', 'vue', 'dist', 'vue.esm.js')
         },
         modules: [
-            path.resolve('..', 'node_modules'),
-            path.resolve('..', 'common', 'modules'),
-            path.resolve('src', 'modules'),
-            path.resolve('src', 'ui'),
-            path.resolve('src', 'plugins'),
-            path.resolve('src', 'structs'),
-            path.resolve('src', 'builtin')
+            path.resolve(__dirname, '..', 'node_modules'),
+            path.resolve(__dirname, '..', 'common', 'modules'),
+            path.resolve(__dirname, 'src', 'modules'),
+            path.resolve(__dirname, 'src', 'ui'),
+            path.resolve(__dirname, 'src', 'plugins'),
+            path.resolve(__dirname, 'src', 'structs'),
+            path.resolve(__dirname, 'src', 'builtin')
         ]
     },
     node: {

core/src/main.js

@@ -41,7 +41,9 @@ const TEST_ARGS = () => {
         }
     }
 }
+
 const TEST_EDITOR = TESTS && true;
+const TEST_HMR = TESTS && true;
 
 import process from 'process';
 import os from 'os';
@@ -221,7 +223,7 @@ export class BetterDiscord {
 
         this.bindings();
         this.extraPaths();
-        this.parseClientPackage();
+        if (!TEST_HMR) this.parseClientPackage();
         this.parseEditorPackage();
         this.parseCorePackage();
 
@@ -359,6 +361,11 @@ export class BetterDiscord {
      * @param {Boolean} reload Whether the main window was reloaded
      */
     async injectScripts(reload = false) {
+        if (TEST_HMR) {
+            console.log(`[BetterDiscord] injecting webpack ${path.resolve(__dirname, '..', '..', 'client', 'src', 'hmr.js')}. Reload: ${reload}`);
+            return this.windowUtils.injectScript(path.resolve(__dirname, '..', '..', 'client', 'src', 'hmr.js'));
+        }
+
         console.log(`[BetterDiscord] injecting ${this.config.getPath('client_script')}. Reload: ${reload}`);
         return this.windowUtils.injectScript(this.config.getPath('client_script'));
     }
@@ -401,5 +408,66 @@ export class BetterDiscord {
     }
 }
 
+if (TEST_HMR) {
+    const { app, ipcMain } = require('electron');
+    const webpack = require('webpack');
+    const WebpackDevServer = require('webpack-dev-server');
+    const webpackConfig = require('../../client/webpack.config');
+
+    const address = '127.0.0.1';
+    const port = 8091;
+    const http_path = `https://127.0.0.1:${port}`;
+    const ws_path = `wss://127.0.0.1:${port}`;
+
+    const compiler = webpack(Object.assign({}, webpackConfig, {
+        entry: [`webpack-dev-server/client?${http_path}`, 'webpack/hot/dev-server', './src/index.js'],
+        plugins: webpackConfig.plugins.concat([
+            new webpack.HotModuleReplacementPlugin()
+        ]),
+        output: Object.assign({}, webpackConfig.output, {
+            publicPath: `${http_path}/`
+        })
+    }));
+    const server = new WebpackDevServer(compiler, Object.assign({}, webpackConfig.devServer, {
+        stats: {
+            colors: true
+        },
+        public: http_path,
+        hot: true,
+
+        // The connection will be upgraded to HTTPS so this is required
+        https: true,
+
+        // By default webpack checks the Origin header, which will fail as the origin will be https://discordapp.com, not https://localhost:8091
+        disableHostCheck: true,
+        headers: {
+            'Access-Control-Allow-Origin': 'https://discordapp.com'
+        }
+    }));
+
+    server.listen(port, address, () => {
+        console.log(`[BetterDiscord] Running webpack dev server at ${http_path}`);
+    });
+
+    CSP['script-src'].push(http_path);
+    CSP['connect-src'].push(http_path);
+    CSP['connect-src'].push(ws_path);
+
+    app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
+        console.log('[BetterDiscord] certificate error', url, error);
+        if (url.startsWith(`${http_path}/`) || url.startsWith(`${ws_path}/`)) {
+            console.log('[BetterDiscord] continuing anyway');
+            event.preventDefault();
+            callback(true);
+        } else {
+            callback(false);
+        }
+    });
+
+    ipcMain.on('--bd-webpack-server', event => {
+        event.returnValue = http_path;
+    });
+}
+
 BetterDiscord.patchBrowserWindow();
 BetterDiscord.hookSessionRequest();

package.json

@@ -76,6 +76,7 @@
     "vue-template-compiler": "^2.6.8",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1",
     "webpack-merge": "^4.2.1"
   },
   "scripts": {