Reduce size of client js bundles (#15264)

* add packages

* Only include the needed parts of BootstrapVue

* remove yargs from client

* treeshake validator library

* formatting

* fix import

website/client/src/components/auth/authForm.vue

@@ -224,7 +224,7 @@
 <script>
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/lib/isEmail';
+import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { setUpAxios, buildAppleAuthUrl } from '@/libs/auth';
 import googleIcon from '@/assets/svg/google.svg';

website/client/src/components/auth/registerLoginReset.vue

@@ -607,7 +607,7 @@
 import axios from 'axios';
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/lib/isEmail';
+import isEmail from 'validator/es/lib/isEmail';
 import DOMPurify from 'dompurify';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { buildAppleAuthUrl } from '../../libs/auth';

website/client/src/components/bugReportModal.vue

@@ -167,7 +167,7 @@ label {
 
 <script>
 import axios from 'axios';
-import isEmail from 'validator/lib/isEmail';
+import isEmail from 'validator/es/lib/isEmail';
 import closeX from '@/components/ui/closeX';
 import { mapState } from '@/libs/store';
 import { MODALS } from '@/libs/consts';

website/client/src/components/groups/inviteModal.vue

@@ -122,8 +122,8 @@
 <script>
 import clone from 'lodash/clone';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/lib/isEmail';
-import isUUID from 'validator/lib/isUUID';
+import isEmail from 'validator/es/lib/isEmail';
+import isUUID from 'validator/es/lib/isUUID';
 import { mapState } from '@/libs/store';
 import notifications from '@/mixins/notifications';
 import positiveIcon from '@/assets/svg/positive.svg';

website/client/src/components/payments/selectUserModal.vue

@@ -295,7 +295,7 @@ h2 {
 // import { nextTick } from 'vue'; // may not need this? I don't know!
 import debounce from 'lodash/debounce';
 import find from 'lodash/find';
-import isUUID from 'validator/lib/isUUID';
+import isUUID from 'validator/es/lib/isUUID';
 import moment from 'moment';
 import { mapState } from '@/libs/store';
 import closeIcon from '@/assets/svg/close.svg';

website/client/src/components/static/home.vue

@@ -781,7 +781,7 @@
 <script>
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/lib/isEmail';
+import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { buildAppleAuthUrl } from '../../libs/auth';
 import googlePlay from '@/assets/images/home/google-play-badge.svg';

website/client/src/main.js

@@ -1,6 +1,15 @@
 import Vue from 'vue';
 import axios from 'axios';
-import BootstrapVue from 'bootstrap-vue';
+import {
+  ModalPlugin,
+  DropdownPlugin,
+  PopoverPlugin,
+  FormPlugin,
+  FormInputPlugin,
+  TooltipPlugin,
+  NavbarPlugin,
+  CollapsePlugin,
+} from 'bootstrap-vue';
 import Fragment from 'vue-fragment';
 import AppComponent from './app';
 import {
@@ -29,7 +38,14 @@ Vue.config.productionTip = IS_PRODUCTION;
 // window['habitica-i18n] is injected by the server
 Vue.use(i18n, { i18nData: window && window['habitica-i18n'] });
 Vue.use(StoreModule);
-Vue.use(BootstrapVue);
+Vue.use(ModalPlugin);
+Vue.use(DropdownPlugin);
+Vue.use(PopoverPlugin);
+Vue.use(FormPlugin);
+Vue.use(FormInputPlugin);
+Vue.use(TooltipPlugin);
+Vue.use(NavbarPlugin);
+Vue.use(CollapsePlugin);
 Vue.use(Fragment.Plugin);
 
 setUpLogging();

website/client/src/pages/settings/settingRows/displayNameSetting.vue

@@ -131,7 +131,7 @@ input {
 
 <script>
 import axios from 'axios';
-import * as validator from 'validator';
+import isEmail from 'validator/es/lib/isEmail';
 import debounce from 'lodash/debounce';
 import { mapState } from '@/libs/store';
 
@@ -162,7 +162,7 @@ export default {
       user: 'user.data',
     }),
     validEmail () {
-      return validator.isEmail(this.updates.newEmail);
+      return isEmail(this.updates.newEmail);
     },
     allowedToSave () {
       return !this.validEmail || this.updates.password.length === 0;

website/client/src/pages/settings/settingRows/userEmailSetting.vue

@@ -68,7 +68,7 @@
 
 <script>
 import axios from 'axios';
-import * as validator from 'validator';
+import isEmail from 'validator/es/lib/isEmail';
 import { mapState } from '@/libs/store';
 
 import SaveCancelButtons from '../components/saveCancelButtons.vue';
@@ -99,7 +99,7 @@ export default {
       return this.previousEmail !== this.updates.newEmail;
     },
     validEmail () {
-      return validator.isEmail(this.updates.newEmail);
+      return isEmail(this.updates.newEmail);
     },
     disallowedToSave () {
       return !this.emailChanged

website/client/src/pages/settings/siteDataRows/webhooksRow.vue

@@ -208,7 +208,7 @@ table {
 </style>
 
 <script>
-import * as validator from 'validator';
+import isURL from 'validator/es/lib/isURL';
 import uuid from '@/../../common/script/libs/uuid';
 import { mapState } from '@/libs/store';
 
@@ -247,7 +247,7 @@ export default {
   },
   methods: {
     isValidUrl (url) {
-      return validator.isURL(url, {
+      return isURL(url, {
         require_tld: true,
         require_protocol: true,
         protocols: ['http', 'https'],

website/client/vue.config.js

@@ -76,6 +76,9 @@ const webpackPlugins = [
       if ((context.includes('sinon') || resource.includes('sinon') || context.includes('nise')) && nconf.get('TIME_TRAVEL_ENABLED') !== 'true') {
         return true;
       }
+      if (context.includes('yargs')) {
+        return true;
+      }
       return false;
     },
   }),
@@ -91,6 +94,28 @@ module.exports = {
           dependency: { not: ['url'] },
           type: 'asset/source',
         },
+        {
+          test: /\.js$/,
+          // Exclude transpiling `node_modules`, except `bootstrap-vue/src`
+          exclude: /node_modules\/(?!bootstrap-vue\/src\/)/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env'],
+            },
+          },
+        },
+        {
+          test: /\.js$/,
+          // Exclude transpiling `node_modules`, except `bootstrap-vue/src`
+          exclude: /node_modules\/(?!validator)/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env'],
+            },
+          },
+        },
       ],
     },
     resolve: {
@@ -102,6 +127,10 @@ module.exports = {
         stream: false,
         timers: require.resolve('timers-browserify'),
       },
+      alias: {
+        // Alias for using source of BootstrapVue
+        'bootstrap-vue$': 'bootstrap-vue/src/index.js',
+      },
     },
     plugins: webpackPlugins,
   },