Webpack bundle dependencies (#2511)

* Allow webpack to bundle *most* dependencies

* Exclude *most* node_modules from getting packaged by electron-builder

* Import only the required icons instead of bundling the whole icon pack

* Reduce packaging blacklist to only include the few things that still need blacklisting

_scripts/build.js

@@ -58,22 +58,14 @@ const config = {
     'icon.svg',
     './dist/**/*',
     '!dist/web/*',
-    '!**/node_modules/**/.*',
-    '!**/node_modules/**/index.html',
-    '!**/{.github,Jenkinsfile}',
-    '!**/{CHANGES.md,CODE_OF_CONDUCT.md,CONTRIBUTING.md,CONTRIBUTION.md,DEVELOPMENT.md,docs,docs.md,docs.mli,examples,History.md,HISTORY.md,README.md,TODO.md,UPGRADE_GUIDE.md,UPGRADING.md}',
-    '!**/{commitlint.config.js,.editorconfig,.eslintignore,.eslintrc.{js,yml},.gitmodules,.huskyrc,.lintstagedrc,.nvmrc,.nycrc{,.json},.prettierrc{,.yaml},tslint.json}',
-    '!**/{.babelrc,bower.json,Gruntfile.js,Makefile,.npmrc.proregistry,rollup.config.js,.tm_properties,.tool-versions,tsconfig.json,webpack.config.js}',
-    '!**/*.{{,c,m}js,min,ts}.map',
-    '!**/*.d.ts',
+    '!node_modules/**/*',
+
+    // renderer
+    'node_modules/{miniget,ytpl,ytsr}/**/*',
 
-    // only exclude the src directory for specific packages
-    // as some of them have their dist code in there and we don't want to exclude those
-    '!**/node_modules/{@fortawesome/vue-fontawesome,agent-base,jquery,localforage,m3u8-parser,marked,mpd-parser,performance-now,video.js,vue,vue-i18n,vue-router}/src/*',
-    '!**/node_modules/**/{bin,man,scripts}/*',
-    '!**/node_modules/jquery/dist/jquery.slim*.js',
-    '!**/node_modules/video.js/dist/{alt/*,video.js}',
-    '!**/node_modules/@videojs/*/src'
+    '!**/README.md',
+    '!**/*.js.map',
+    '!**/*.d.ts',
   ],
   dmg: {
     contents: [

_scripts/webpack.main.config.js

@@ -2,15 +2,9 @@ const path = require('path')
 const webpack = require('webpack')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 
-const {
-  dependencies,
-  devDependencies,
-  productName,
-} = require('../package.json')
+const { productName } = require('../package.json')
 
-const externals = Object.keys(dependencies).concat(Object.keys(devDependencies))
 const isDevMode = process.env.NODE_ENV === 'development'
-const whiteListedModules = []
 
 const config = {
   name: 'main',
@@ -19,7 +13,10 @@ const config = {
   entry: {
     main: path.join(__dirname, '../src/main/index.js'),
   },
-  externals: externals.filter(d => !whiteListedModules.includes(d)),
+  // webpack spits out errors while inlining electron-debug as
+  // it tries to dynamically load dependencies
+  // the error: "Critical dependency: the request of a dependency is an expression"
+  externals: ['electron-debug'],
   module: {
     rules: [
       {

_scripts/webpack.renderer.config.js

@@ -4,15 +4,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
-const {
-  dependencies,
-  devDependencies,
-  productName,
-} = require('../package.json')
+const { productName } = require('../package.json')
 
-const externals = Object.keys(dependencies).concat(Object.keys(devDependencies))
 const isDevMode = process.env.NODE_ENV === 'development'
-const whiteListedModules = ['vue']
 
 const config = {
   name: 'renderer',
@@ -32,7 +26,10 @@ const config = {
     path: path.join(__dirname, '../dist'),
     filename: '[name].js',
   },
-  externals: externals.filter(d => !whiteListedModules.includes(d)),
+  // webpack spits out errors while inlining ytpl and ytsr as
+  // they dynamically import their package.json file to extract the bug report URL
+  // the error: "Critical dependency: the request of a dependency is an expression"
+  externals: ['ytpl', 'ytsr'],
   module: {
     rules: [
       {

src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue

@@ -12,7 +12,7 @@
       class="bubble selected"
     >
       <font-awesome-icon
-        icon="check"
+        :icon="['fas', 'check']"
         class="icon"
       />
     </div>

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -9,8 +9,8 @@ export default Vue.extend({
       default: ''
     },
     icon: {
-      type: String,
-      default: 'ellipsis-v'
+      type: Array,
+      default: () => ['fas', 'ellipsis-v']
     },
     theme: {
       type: String,

src/renderer/components/ft-input/ft-input.js

@@ -67,7 +67,7 @@ export default Vue.extend({
       // As the text input box should be empty
       clearTextButtonExisting: false,
       clearTextButtonVisible: false,
-      actionButtonIconName: 'search'
+      actionButtonIconName: ['fas', 'search']
     }
   },
   computed: {
@@ -136,7 +136,7 @@ export default Vue.extend({
 
       if (!this.inputDataPresent) {
         // Change back to default icon if text is blank
-        this.actionButtonIconName = 'search'
+        this.actionButtonIconName = ['fas', 'search']
         return
       }
 
@@ -165,15 +165,15 @@ export default Vue.extend({
 
           if (isYoutubeLink) {
             // Go to URL (i.e. Video/Playlist/Channel
-            this.actionButtonIconName = 'arrow-right'
+            this.actionButtonIconName = ['fas', 'arrow-right']
           } else {
             // Search with text
-            this.actionButtonIconName = 'search'
+            this.actionButtonIconName = ['fas', 'search']
           }
         })
       } catch (ex) {
         // On exception, consider text as invalid URL
-        this.actionButtonIconName = 'search'
+        this.actionButtonIconName = ['fas', 'search']
         // Rethrow exception
         throw ex
       }

src/renderer/components/ft-input/ft-input.vue

@@ -24,7 +24,7 @@
     </label>
     <font-awesome-icon
       v-if="showClearTextButton"
-      icon="times-circle"
+      :icon="['fas', 'times-circle']"
       class="clearInputTextButton"
       :class="{
         visible: inputDataPresent

src/renderer/components/ft-list-dropdown/ft-list-dropdown.vue

@@ -4,7 +4,7 @@
       {{ title }}
       <font-awesome-icon
         class="angleDownIcon"
-        icon="angle-down"
+        :icon="['fas', 'angle-down']"
       />
     </div>
     <ul>

src/renderer/components/ft-list-playlist/ft-list-playlist.vue

@@ -18,15 +18,15 @@
         <div class="background" />
         <div class="inner">
           <div>{{ videoCount }}</div>
-          <div><font-awesome-icon icon="list" /></div>
+          <div><font-awesome-icon :icon="['fas','list']" /></div>
         </div>
       </div>
     </router-link>
     <div class="info">
       <ft-icon-button
         v-if="externalPlayer !== ''"
         :title="$t('Video.External Player.OpenInTemplate').replace('$', externalPlayer)"
-        icon="external-link-alt"
+        :icon="['fas', 'external-link-alt']"
         class="externalPlayerButton"
         theme="base-no-default"
         :size="16"

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -34,7 +34,7 @@
       <ft-icon-button
         v-if="externalPlayer !== ''"
         :title="$t('Video.External Player.OpenInTemplate').replace('$', externalPlayer)"
-        icon="external-link-alt"
+        :icon="['fas', 'external-link-alt']"
         class="externalPlayerIcon"
         theme="base"
         :padding="appearance === `watchPlaylistItem` ? 6 : 7"
@@ -44,7 +44,7 @@
       <ft-icon-button
         v-if="!isLive"
         :title="$t('Video.Save Video')"
-        icon="star"
+        :icon="['fas', 'star']"
         class="favoritesIcon"
         :theme="favoriteIconTheme"
         :padding="appearance === `watchPlaylistItem` ? 5 : 6"
@@ -66,7 +66,7 @@
     <div class="info">
       <ft-icon-button
         class="optionsButton"
-        icon="ellipsis-v"
+        :icon="['fas', 'ellipsis-v']"
         title="More Options"
         theme="base-no-default"
         :size="16"

src/renderer/components/ft-notification-banner/ft-notification-banner.vue

@@ -14,7 +14,7 @@
     </div>
     <font-awesome-icon
       class="bannerIcon"
-      icon="times"
+      :icon="['fas', 'times']"
       @click="handleClose"
     />
   </div>

src/renderer/components/ft-profile-selector/ft-profile-selector.vue

@@ -22,7 +22,7 @@
       </h3>
       <ft-icon-button
         class="profileSettings"
-        icon="sliders-h"
+        :icon="['fas', 'sliders-h']"
         @click="openProfileSettings"
       />
       <div

src/renderer/components/ft-select/ft-select.vue

@@ -16,7 +16,7 @@
       </option>
     </select>
     <font-awesome-icon
-      icon="sort-down"
+      :icon="['fas', 'sort-down']"
       class="iconSelect"
     />
     <span class="select-highlight" />

src/renderer/components/ft-share-button/ft-share-button.vue

@@ -3,7 +3,7 @@
     ref="iconButton"
     :title="$t('Share.Share Video')"
     theme="secondary"
-    icon="share-alt"
+    :icon="['fas', 'share-alt']"
     dropdown-position-x="left"
     :force-dropdown="true"
   >
@@ -31,30 +31,30 @@
           class="action"
           @click="copyYoutube()"
         >
-          <font-awesome-icon icon="copy" />
+          <font-awesome-icon :icon="['fas', 'copy']" />
           {{ $t("Share.Copy Link") }}
         </ft-button>
         <ft-button
           class="action"
           @click="openYoutube()"
         >
-          <font-awesome-icon icon="globe" />
+          <font-awesome-icon :icon="['fas', 'globe']" />
           {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
           class="action"
           background-color="var(--accent-color-active)"
           @click="copyYoutubeEmbed()"
         >
-          <font-awesome-icon icon="copy" />
+          <font-awesome-icon :icon="['fas', 'copy']" />
           {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
           class="action"
           background-color="var(--accent-color-active)"
           @click="openYoutubeEmbed()"
         >
-          <font-awesome-icon icon="globe" />
+          <font-awesome-icon :icon="['fas', 'globe']" />
           {{ $t("Share.Open Embed") }}
         </ft-button>
       </div>
@@ -70,30 +70,30 @@
           class="action"
           @click="copyInvidious()"
         >
-          <font-awesome-icon icon="copy" />
+          <font-awesome-icon :icon="['fas', 'copy']" />
           {{ $t("Share.Copy Link") }}
         </ft-button>
         <ft-button
           class="action"
           @click="openInvidious()"
         >
-          <font-awesome-icon icon="globe" />
+          <font-awesome-icon :icon="['fas', 'globe']" />
           {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
           class="action"
           background-color="var(--accent-color-active)"
           @click="copyInvidiousEmbed()"
         >
-          <font-awesome-icon icon="copy" />
+          <font-awesome-icon :icon="['fas', 'copy']" />
           {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
           class="action"
           background-color="var(--accent-color-active)"
           @click="openInvidiousEmbed()"
         >
-          <font-awesome-icon icon="globe" />
+          <font-awesome-icon :icon="['fas', 'globe']" />
           {{ $t("Share.Open Embed") }}
         </ft-button>
       </div>

src/renderer/components/ft-tooltip/ft-tooltip.vue

@@ -5,7 +5,7 @@
       class="button"
       type="button"
     >
-      <font-awesome-icon icon="question-circle" />
+      <font-awesome-icon :icon="['fas', 'question-circle']" />
     </button>
     <p
       :id="id"

src/renderer/components/side-nav-more-options/side-nav-more-options.vue

@@ -6,7 +6,7 @@
       @click="openMoreOptions = !openMoreOptions"
     >
       <font-awesome-icon
-        icon="ellipsis-h"
+        :icon="['fas', 'ellipsis-h']"
         class="navIcon"
         :class="applyNavIconExpand"
       />
@@ -32,7 +32,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            icon="list"
+            :icon="['fas', 'list']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width
@@ -52,7 +52,7 @@
         @click="navigate('trending')"
       >
         <font-awesome-icon
-          icon="fire"
+          :icon="['fas', 'fire']"
           class="navIcon"
           :class="applyNavIconExpand"
         />
@@ -70,7 +70,7 @@
         @click="navigate('popular')"
       >
         <font-awesome-icon
-          icon="users"
+          :icon="['fas', 'users']"
           class="navIcon"
           :class="applyNavIconExpand"
         />
@@ -87,7 +87,7 @@
         @click="navigate('about')"
       >
         <font-awesome-icon
-          icon="info-circle"
+          :icon="['fas', 'info-circle']"
           class="navIcon"
           :class="applyNavIconExpand"
         />
@@ -104,7 +104,7 @@
       @click="navigate('history')"
     >
       <font-awesome-icon
-        icon="history"
+        :icon="['fas', 'history']"
         class="navIcon"
         :class="applyNavIconExpand"
       />
@@ -118,7 +118,7 @@
       @click="navigate('settings')"
     >
       <font-awesome-icon
-        icon="sliders-h"
+        :icon="['fas', 'sliders-h']"
         class="navIcon"
         :class="applyNavIconExpand"
       />
@@ -131,7 +131,7 @@
       @click="navigate('about')"
     >
       <font-awesome-icon
-        icon="info-circle"
+        :icon="['fas', 'info-circle']"
         class="navIcon"
         :class="applyNavIconExpand"
       />