From f00096e0094ca02f7d7614cff8e08368e933d1f5 Mon Sep 17 00:00:00 2001 From: absidue <48293849+absidue@users.noreply.github.com> Date: Tue, 23 Aug 2022 23:31:42 +0200 Subject: [PATCH 1/4] Allow webpack to bundle *most* dependencies --- _scripts/webpack.main.config.js | 13 +++++-------- _scripts/webpack.renderer.config.js | 13 +++++-------- 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/_scripts/webpack.main.config.js b/_scripts/webpack.main.config.js index d7316fd74293d..305a17924b067 100644 --- a/_scripts/webpack.main.config.js +++ b/_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: [ { diff --git a/_scripts/webpack.renderer.config.js b/_scripts/webpack.renderer.config.js index 4f73ce0681586..22b7d800c0202 100644 --- a/_scripts/webpack.renderer.config.js +++ b/_scripts/webpack.renderer.config.js @@ -5,15 +5,9 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin') const CopyWebpackPlugin = require('copy-webpack-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', @@ -33,7 +27,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: [ { From faf8b5cce7579d6d2e12b05d145a4519d05f220b Mon Sep 17 00:00:00 2001 From: absidue <48293849+absidue@users.noreply.github.com> Date: Tue, 23 Aug 2022 23:33:16 +0200 Subject: [PATCH 2/4] Exclude *most* node_modules from getting packaged by electron-builder --- _scripts/build.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/_scripts/build.js b/_scripts/build.js index 6b762cc767726..634a11020af98 100644 --- a/_scripts/build.js +++ b/_scripts/build.js @@ -60,20 +60,18 @@ const config = { '!dist/web/*', '!**/node_modules/**/.*', '!**/node_modules/**/index.html', + '!node_modules/**/*', + + // renderer + 'node_modules/{miniget,ytpl,ytsr}/**/*', + '!**/{.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', - - // 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' ], dmg: { contents: [ From 3aaaf92d84967abbecabc60406679f4edd8770ad Mon Sep 17 00:00:00 2001 From: absidue <48293849+absidue@users.noreply.github.com> Date: Thu, 25 Aug 2022 19:31:20 +0200 Subject: [PATCH 3/4] Import only the required icons instead of bundling the whole icon pack --- .../ft-channel-bubble/ft-channel-bubble.vue | 2 +- .../ft-icon-button/ft-icon-button.js | 4 +- src/renderer/components/ft-input/ft-input.js | 10 +- src/renderer/components/ft-input/ft-input.vue | 2 +- .../ft-list-dropdown/ft-list-dropdown.vue | 2 +- .../ft-list-playlist/ft-list-playlist.vue | 4 +- .../ft-list-video/ft-list-video.vue | 6 +- .../ft-notification-banner.vue | 2 +- .../ft-profile-selector.vue | 2 +- .../components/ft-select/ft-select.vue | 2 +- .../ft-share-button/ft-share-button.vue | 18 +-- .../components/ft-tooltip/ft-tooltip.vue | 2 +- .../side-nav-more-options.vue | 16 +-- src/renderer/components/side-nav/side-nav.vue | 16 +-- src/renderer/components/top-nav/top-nav.vue | 12 +- .../watch-video-comments.vue | 10 +- .../watch-video-info/watch-video-info.vue | 14 +-- .../watch-video-live-chat.vue | 4 +- .../watch-video-playlist.vue | 12 +- src/renderer/main.js | 107 +++++++++++++++++- src/renderer/views/About/About.js | 20 ++-- src/renderer/views/Channel/Channel.vue | 2 +- src/renderer/views/Popular/Popular.vue | 2 +- src/renderer/views/Search/Search.vue | 2 +- .../views/Subscriptions/Subscriptions.vue | 2 +- src/renderer/views/Trending/Trending.vue | 2 +- src/renderer/views/Watch/Watch.vue | 2 +- 27 files changed, 191 insertions(+), 88 deletions(-) diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue index 795a00c76db09..7e9cd68d8bc09 100644 --- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue +++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue @@ -12,7 +12,7 @@ class="bubble selected" > diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js index c324021bc5349..2cf1ffa6c5d13 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.js +++ b/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, diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js index e1a6ae695af17..ae2b3bfcc233d 100644 --- a/src/renderer/components/ft-input/ft-input.js +++ b/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 } diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue index 91f9eb7f953ea..727ffeeb68b1b 100644 --- a/src/renderer/components/ft-input/ft-input.vue +++ b/src/renderer/components/ft-input/ft-input.vue @@ -24,7 +24,7 @@