Split prod and dev webpack bundles (stream-labs#1618)

* Split prod and dev webpack bundles

* Refactor webpack config into a merged model

* Add CI webpack config

* Only remove guest-api for yarn watch-app

* Label configs more clearly

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["@babel/preset-env"],
+  "presets": [["@babel/preset-env", { "modules": false }]],
   "plugins": [
     ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": false }],
     "transform-class-properties",

webpack.config.js → base.config.js

@@ -1,39 +1,31 @@
-const CircularDependencyPlugin = require('circular-dependency-plugin');
 const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
-
 const plugins = [];
 
-// uncomment to watch circular dependencies
+// uncomment and install to watch circular dependencies
+// const CircularDependencyPlugin = require('circular-dependency-plugin');
 // plugins.push(new CircularDependencyPlugin({
-  //   // exclude detection of files based on a RegExp
-  //   exclude: /a\.js|node_modules/,
-  //   // add errors to webpack instead of warnings
-  //   //failOnError: true
-  // }));
+//   // exclude detection of files based on a RegExp
+//   exclude: /a\.js|node_modules/,
+//   // add errors to webpack instead of warnings
+//   //failOnError: true
+// }));
 
 // uncomment and install to analyze bundle size
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 // plugins.push(new BundleAnalyzerPlugin());
 
 module.exports = {
-  entry: {
-    renderer: './app/app.ts',
-    updater: './updater/ui.js',
-    'guest-api': './guest-api'
-  },
   output: {
     path: __dirname + '/bundles',
     filename: '[name].js'
   },
 
-  devtool: 'source-map',
-
   target: 'electron-renderer',
 
   resolve: {
     extensions: ['.js', '.ts', '.json', '.tsx'],
-    modules: [path.resolve(__dirname, 'app'), 'node_modules']
+    modules: [path.resolve(__dirname, 'app'), 'node_modules'],
+    symlinks: false,
   },
 
   // We want to dynamically require native addons
@@ -59,37 +51,38 @@ module.exports = {
       {
         test: /\.vue$/,
         loader: 'vue-loader',
+        include: [path.resolve(__dirname, 'app/components'), path.resolve(__dirname, 'updater')],
         options: {
           esModule: true,
           transformToRequire: {
             video: 'src',
             source: 'src'
           },
-          loaders: { tsx: ['babel-loader', { loader: 'ts-loader', options: { appendTsxSuffixTo: [/\.vue$/] } }]  }
         }
       },
       {
         test: /\.ts$/,
         loader: 'ts-loader',
+        options: { experimentalWatchApi: true },
         exclude: /node_modules|vue\/src/
       },
       {
         test: /\.tsx$/,
-        use: [{ loader: 'babel-loader' }, { loader: 'ts-loader', options: { appendTsxSuffixTo: [/\.vue$/] } }],
+        include: path.resolve(__dirname, 'app/components'),
+        use: [
+          { loader: 'babel-loader' },
+          { loader: 'ts-loader', options: { appendTsxSuffixTo: [/\.vue$/], experimentalWatchApi: true } }
+        ],
         exclude: /node_modules/,
       },
-      {
-        test: /\.ts$/,
-        enforce: 'pre',
-        loader: 'tslint-loader'
-      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
       },
       {
         test: /\.m\.less$/, // Local style modules
+        include: path.resolve(__dirname, 'app/components'),
         use: [
           { loader: 'style-loader' },
           {
@@ -101,6 +94,10 @@ module.exports = {
       },
       {
         test: /\.g\.less$/, // Global styles
+        include: [
+          path.resolve(__dirname, 'app/app.g.less'),
+          path.resolve(__dirname, 'app/themes.g.less')
+        ],
         use: [
           'style-loader',
           {
@@ -139,12 +136,5 @@ module.exports = {
     ]
   },
 
-  optimization: {
-    minimizer: [new TerserPlugin({
-      sourceMap: true,
-      terserOptions: { mangle: false }
-    })]
-  },
-
   plugins
 };

dev-app.config.js

@@ -0,0 +1,6 @@
+const merge = require('webpack-merge');
+const devConfig = require('./dev.config.js');
+
+module.exports = merge.strategy({ entry: 'replace' })(devConfig, {
+  entry: { renderer: './app/app.ts' },
+});

dev.config.js

@@ -0,0 +1,53 @@
+const merge = require('webpack-merge');
+const baseConfig = require('./base.config.js');
+const path = require('path');
+
+const plugins = [];
+
+// only makes sense with transpileOnly mode which is currently broken
+// const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+// plugins.push(new ForkTsCheckerWebpackPlugin({ vue: true }))
+
+module.exports = merge.smart(baseConfig, {
+  entry: {
+    renderer: './app/app.ts',
+    updater: './updater/ui.js',
+    'guest-api': './guest-api',
+  },
+
+  mode: 'development',
+  devtool: 'cheap-module-source-map',
+  watchOptions: { ignored: /node_modules/ },
+
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        options: {
+          experimentalWatchApi: true,
+          // transpileOnly: true,
+        },
+        exclude: /node_modules|vue\/src/
+      },
+      {
+        test: /\.tsx$/,
+        include: path.resolve(__dirname, 'app/components'),
+        use: [
+          { loader: 'babel-loader' },
+          {
+            loader: 'ts-loader',
+            options: {
+              appendTsxSuffixTo: [/\.vue$/],
+              experimentalWatchApi: true,
+              // transpileOnly: true,
+            }
+          }
+        ],
+        exclude: /node_modules/,
+      },
+    ]
+  },
+
+  plugins,
+});

guest-api/index.ts

@@ -4,18 +4,37 @@
  */
 
 import electron from 'electron';
-import {
-  IGuestApiRequest,
-  IGuestApiResponse,
-  IGuestApiCallback,
-  EResponseResultProcessing,
-} from '../app/services/guest-api';
 import uuid from 'uuid/v4';
 import fs from 'fs';
 import util from 'util';
 import mime from 'mime';
 import path from 'path';
 
+interface IGuestApiRequest {
+  id: string;
+  webContentsId: number;
+  methodPath: string[];
+  args: any[];
+}
+
+interface IGuestApiResponse {
+  id: string;
+  error: boolean;
+  result: any;
+  resultProcessing: EResponseResultProcessing;
+}
+
+interface IGuestApiCallback {
+  requestId: string;
+  callbackId: string;
+  args: any[];
+}
+
+enum EResponseResultProcessing {
+  None = 'none',
+  File = 'file',
+}
+
 (() => {
   const readFile = util.promisify(fs.readFile);
 

package.json

@@ -10,11 +10,12 @@
     "yarn": ">= 1.5.2"
   },
   "scripts": {
-    "compile": "yarn clear && yarn webpack-cli --progress --mode development",
-    "compile:ci": "yarn clear && yarn webpack-cli --mode development",
-    "compile:production": "yarn clear && yarn webpack-cli --progress --mode production",
+    "compile": "yarn clear && yarn webpack-cli --progress --config dev.config.js",
+    "compile:ci": "yarn clear && yarn webpack-cli --config dev.config.js",
+    "compile:production": "yarn clear && yarn webpack-cli --progress --config prod.config.js",
     "webpack-cli": "node --max-old-space-size=4096 node_modules/webpack-cli/bin/cli.js",
-    "watch": "yarn clear && yarn webpack-cli --watch --progress --mode development",
+    "watch": "yarn clear && yarn webpack-cli --watch --progress --config dev.config.js",
+    "watch-app": "yarn clear && yarn webpack-cli --watch --progress --config dev-app.config.js",
     "start": "electron .",
     "clear-plugins": "rimraf plugins",
     "package": "rimraf dist && build -w --x64 --config.extraMetadata.env=production --config.electronDownload.mirror=https://github.com/stream-labs/electron/releases/download/  ",
@@ -144,7 +145,6 @@
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-decorators-legacy": "1.3.5",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "circular-dependency-plugin": "3.0.0",
     "classnames": "^2.2.6",
     "commitizen": "3.0.7",
     "cross-spawn": "6.0.5",
@@ -181,7 +181,7 @@
     "sockjs": "0.3.19",
     "sockjs-client": "1.1.5",
     "spectron": "^5.0.0",
-    "streamlabs-beaker": "^0.3.56",
+    "streamlabs-beaker": "^0.4.6",
     "style-loader": "0.21.0",
     "stylelint": "^9.10.1",
     "stylelint-config-css-modules": "^1.3.0",
@@ -221,6 +221,7 @@
     "webdriverio": "4.14.1",
     "webpack": "4.26.1",
     "webpack-cli": "3.1.2",
+    "webpack-merge": "^4.2.1",
     "which": "1.3.1"
   },
   "resolutions": {

prod.config.js

@@ -0,0 +1,23 @@
+const merge = require('webpack-merge');
+const baseConfig = require('./base.config.js');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = merge.smart(baseConfig, {
+  entry: {
+    renderer: './app/app.ts',
+    updater: './updater/ui.js',
+    'guest-api': './guest-api'
+  },
+
+  mode: 'production',
+  devtool: 'source-map',
+
+  optimization: {
+    minimizer: [new TerserPlugin({
+      parallel: true,
+      sourceMap: true,
+      terserOptions: { mangle: false }
+    })],
+    usedExports: true,
+  }
+});

yarn.lock

@@ -2708,11 +2708,6 @@ cipher-base@^1.0.0, cipher-base@^1.0.1:
   dependencies:
     inherits "^2.0.1"
 
-[email protected]:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/circular-dependency-plugin/-/circular-dependency-plugin-3.0.0.tgz#9b68692e35b0e3510998d0164b6ae5011bea5760"
-  integrity sha1-m2hpLjWw41EJmNAWS2rlARvqV2A=
-
 clamp@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
@@ -9018,14 +9013,13 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
   integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
 
-streamlabs-beaker@^0.3.56:
-  version "0.3.82"
-  resolved "https://registry.yarnpkg.com/streamlabs-beaker/-/streamlabs-beaker-0.3.82.tgz#ad511ee434be5b9377cc9de5402a0254bab0e9bf"
-  integrity sha512-jddvSJvxjkyvvnET87HDfIQJ9emT3ZWHsMsJiigk43o1PUyvQ9kAQzV8F9OOlXn4SuwZ3/tyT89lzTZXr+lZPw==
+streamlabs-beaker@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/streamlabs-beaker/-/streamlabs-beaker-0.4.4.tgz#b18bac848c89e8b9a1a6d2d5f586cfb54658afc5"
+  integrity sha512-d6mlYW6bTwVEDIHc0tSEtsyczJtMv+5/x3Oqp79vgL1DAqVyYvRDoszhN9z7MaWrE9X6Jby1JTh/mnlKixIROQ==
   dependencies:
     google-fonts-webpack-plugin "^0.4.4"
     v-tooltip "^2.0.0-rc.33"
-    vee-validate "^2.1.7"
     vue "^2.6.6"
     vue-class-component "^6.0.0"
     vue-color "^2.7.0"
@@ -10135,7 +10129,7 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "~1.0.0"
     spdx-expression-parse "~1.0.0"
 
-[email protected], vee-validate@^2.1.7:
+[email protected]:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-2.2.0.tgz#0dcb6251a50cde9a3a1e924c917cc3d0a543b661"
   integrity sha512-s72VQcl1DWTNQKQyHtUDcU536dIx/GYDnCObDj4AXDZtWnqM3rXbgp7FCT3D2q9HFKw7IykW9bVrClhPBeQnrw==
@@ -10436,6 +10430,13 @@ [email protected]:
     v8-compile-cache "^2.0.2"
     yargs "^12.0.2"
 
+webpack-merge@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.1.tgz#5e923cf802ea2ace4fd5af1d3247368a633489b4"
+  integrity sha512-4p8WQyS98bUJcCvFMbdGZyZmsKuWjWVnVHnAS3FFg0HDaRVrPbkivx2RYCre8UiemD67RsiFFLfn4JhLAin8Vw==
+  dependencies:
+    lodash "^4.17.5"
+
 webpack-sources@^0.2.0:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb"