feat(deps) replace lodash with lodash-es

The latter supports tree-shaking and we don't need to embed the whole
500KB of lodash.

package.json

@@ -68,7 +68,7 @@
     "js-sha512": "0.8.0",
     "jwt-decode": "2.2.0",
     "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1847.0.0+03eef6de/lib-jitsi-meet.tgz",
-    "lodash": "4.17.21",
+    "lodash-es": "4.17.21",
     "moment": "2.29.4",
     "moment-duration-format": "2.2.2",
     "null-loader": "4.0.1",
@@ -138,7 +138,7 @@
     "@types/audioworklet": "0.0.29",
     "@types/dom-screen-wake-lock": "1.0.1",
     "@types/js-md5": "0.4.3",
-    "@types/lodash": "4.14.182",
+    "@types/lodash-es": "4.17.12",
     "@types/moment-duration-format": "2.2.6",
     "@types/offscreencanvas": "2019.7.2",
     "@types/pixelmatch": "5.2.5",

react/features/base/app/components/BaseApp.tsx

@@ -1,6 +1,6 @@
 // @ts-expect-error
 import { jitsiLocalStorage } from '@jitsi/js-utils';
-import _ from 'lodash';
+import { isEqual } from 'lodash-es';
 import React, { Component, ComponentType, Fragment } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
@@ -254,7 +254,7 @@ export default class BaseApp<P> extends Component<P, IState> {
         href?: string;
         props?: Object;
     }): Promise<any> {
-        if (_.isEqual(route, this.state.route)) {
+        if (isEqual(route, this.state.route)) {
             return Promise.resolve();
         }
 

react/features/base/avatar/functions.ts

@@ -1,5 +1,5 @@
 import GraphemeSplitter from 'grapheme-splitter';
-import _ from 'lodash';
+import { split } from 'lodash-es';
 
 const AVATAR_COLORS = [
     '#6A50D3',
@@ -63,7 +63,7 @@ function getFirstGraphemeUpper(word: string) {
  */
 export function getInitials(s?: string) {
     // We don't want to use the domain part of an email address, if it is one
-    const initialsBasis = _.split(s, '@')[0];
+    const initialsBasis = split(s, '@')[0];
     const [ firstWord, secondWord ] = initialsBasis.split(wordSplitRegex).filter(Boolean);
 
     return getFirstGraphemeUpper(firstWord) + getFirstGraphemeUpper(secondWord);

react/features/base/conference/functions.ts

@@ -1,5 +1,5 @@
 import { sha512_256 as sha512 } from 'js-sha512';
-import _ from 'lodash';
+import { upperFirst, words } from 'lodash-es';
 
 import { getName } from '../../app/functions';
 import { IReduxState, IStore } from '../../app/types';
@@ -571,7 +571,7 @@ export function sendLocalParticipant(
  * @returns {string}
  */
 function safeStartCase(s = '') {
-    return _.words(`${s}`.replace(/['\u2019]/g, '')).reduce(
-        (result, word, index) => result + (index ? ' ' : '') + _.upperFirst(word)
+    return words(`${s}`.replace(/['\u2019]/g, '')).reduce(
+        (result, word, index) => result + (index ? ' ' : '') + upperFirst(word)
         , '');
 }

react/features/base/config/functions.any.ts

@@ -3,7 +3,7 @@ import { jitsiLocalStorage } from '@jitsi/js-utils';
 // eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { safeJsonParse } from '@jitsi/js-utils/json';
-import _ from 'lodash';
+import { isEmpty, mergeWith, pick } from 'lodash-es';
 
 import { IReduxState } from '../../app/types';
 import { getLocalParticipant } from '../participants/functions';
@@ -166,13 +166,11 @@ export function overrideConfigJSON(config: IConfig, interfaceConfig: any, json:
             const configJSON
                 = getWhitelistedJSON(configName as 'interfaceConfig' | 'config', json[configName]);
 
-            if (!_.isEmpty(configJSON)) {
-                logger.info(
-                    `Extending ${configName} with: ${
-                        JSON.stringify(configJSON)}`);
+            if (!isEmpty(configJSON)) {
+                logger.info(`Extending ${configName} with: ${JSON.stringify(configJSON)}`);
 
                 // eslint-disable-next-line arrow-body-style
-                _.mergeWith(configObj, configJSON, (oldValue, newValue) => {
+                mergeWith(configObj, configJSON, (oldValue, newValue) => {
 
                     // XXX We don't want to merge the arrays, we want to
                     // overwrite them.
@@ -196,9 +194,9 @@ export function overrideConfigJSON(config: IConfig, interfaceConfig: any, json:
  */
 export function getWhitelistedJSON(configName: 'interfaceConfig' | 'config', configJSON: any): Object {
     if (configName === 'interfaceConfig') {
-        return _.pick(configJSON, INTERFACE_CONFIG_WHITELIST);
+        return pick(configJSON, INTERFACE_CONFIG_WHITELIST);
     } else if (configName === 'config') {
-        return _.pick(configJSON, CONFIG_WHITELIST);
+        return pick(configJSON, CONFIG_WHITELIST);
     }
 
     return configJSON;

react/features/base/config/reducer.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { merge, union } from 'lodash-es';
 
 import { CONFERENCE_INFO } from '../../conference/components/constants';
 import { TOOLBAR_BUTTONS } from '../../toolbox/constants';
@@ -194,7 +194,7 @@ function _setConfig(state: IConfig, { config }: { config: IConfig; }) {
         });
     }
 
-    const newState = _.merge(
+    const newState = merge(
         {},
         config,
         hdAudioOptions,
@@ -397,7 +397,7 @@ function _translateLegacyConfig(oldValue: IConfig) {
                     = (newValue.conferenceInfo?.alwaysVisible ?? [])
                     .filter(c => !CONFERENCE_HEADER_MAPPING[key].includes(c));
                 newValue.conferenceInfo.autoHide
-                    = _.union(newValue.conferenceInfo.autoHide, CONFERENCE_HEADER_MAPPING[key]);
+                    = union(newValue.conferenceInfo.autoHide, CONFERENCE_HEADER_MAPPING[key]);
             } else {
                 newValue.conferenceInfo.alwaysVisible
                     = (newValue.conferenceInfo.alwaysVisible ?? [])
@@ -599,7 +599,7 @@ function _translateLegacyConfig(oldValue: IConfig) {
  * @returns {Object} The new state after the reduction of the specified action.
  */
 function _updateConfig(state: IConfig, { config }: { config: IConfig; }) {
-    const newState = _.merge({}, state, config);
+    const newState = merge({}, state, config);
 
     _cleanupConfig(newState);
 

react/features/base/connection/actions.any.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { cloneDeep } from 'lodash-es';
 
 import { IReduxState, IStore } from '../../app/types';
 import { conferenceLeft, conferenceWillLeave, redirect } from '../conference/actions';
@@ -113,7 +113,7 @@ export function connectionFailed(
 export function constructOptions(state: IReduxState) {
     // Deep clone the options to make sure we don't modify the object in the
     // redux store.
-    const options: IOptions = _.cloneDeep(state['features/base/config']);
+    const options: IOptions = cloneDeep(state['features/base/config']);
 
     const { locationURL, preferVisitor } = state['features/base/connection'];
     const params = parseURLParams(locationURL || '');

react/features/base/flags/reducer.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { isEqual, merge } from 'lodash-es';
 
 import ReducerRegistry from '../redux/ReducerRegistry';
 
@@ -25,9 +25,9 @@ export interface IFlagsState {
 ReducerRegistry.register<IFlagsState>('features/base/flags', (state = DEFAULT_STATE, action): IFlagsState => {
     switch (action.type) {
     case UPDATE_FLAGS: {
-        const newState = _.merge({}, state, action.flags);
+        const newState = merge({}, state, action.flags);
 
-        return _.isEqual(state, newState) ? state : newState;
+        return isEqual(state, newState) ? state : newState;
     }
     }
 

react/features/base/i18n/i18next.ts

@@ -1,7 +1,7 @@
 import COUNTRIES_RESOURCES from 'i18n-iso-countries/langs/en.json';
 import i18next from 'i18next';
 import I18nextXHRBackend, { HttpBackendOptions } from 'i18next-http-backend';
-import _ from 'lodash';
+import { merge } from 'lodash-es';
 
 import LANGUAGES_RESOURCES from '../../../../lang/languages.json';
 import MAIN_RESOURCES from '../../../../lang/main.json';
@@ -22,7 +22,7 @@ const COUNTRIES_RESOURCES_OVERRIDES = {
 /**
  * Merged country names.
  */
-const COUNTRIES = _.merge({}, COUNTRIES_RESOURCES, COUNTRIES_RESOURCES_OVERRIDES);
+const COUNTRIES = merge({}, COUNTRIES_RESOURCES, COUNTRIES_RESOURCES_OVERRIDES);
 
 /**
  * The available/supported languages.

react/features/base/logging/functions.ts

@@ -1,6 +1,6 @@
 // @ts-expect-error
 import Logger, { getLogger as _getLogger } from '@jitsi/logger';
-import _ from 'lodash';
+import { once } from 'lodash-es';
 
 import LogTransport from './LogTransport';
 
@@ -26,7 +26,7 @@ export function getLogger(id: string) {
 /**
  * Initializes native logging. This operations must be done as early as possible.
  */
-export const _initLogging = _.once(() => {
+export const _initLogging = once(() => {
     if (navigator.product !== 'ReactNative') {
         return;
     }

react/features/base/logging/reducer.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { merge } from 'lodash-es';
 import { AnyAction } from 'redux';
 
 import ReducerRegistry from '../redux/ReducerRegistry';
@@ -95,7 +95,7 @@ ReducerRegistry.register<ILoggingState>(
  * reduction of the specified action.
  */
 function _setLoggingConfig(state: ILoggingState, action: AnyAction) {
-    const newConfig = _.merge({}, DEFAULT_STATE.config, action.config);
+    const newConfig = merge({}, DEFAULT_STATE.config, action.config);
 
     if (equals(state.config, newConfig)) {
         return state;

react/features/base/participants/subscriber.ts

@@ -1,5 +1,5 @@
 
-import _ from 'lodash';
+import { difference } from 'lodash-es';
 import { batch } from 'react-redux';
 
 import { IStore } from '../../app/types';
@@ -64,8 +64,8 @@ function _createOrRemoveVirtualParticipants(
         store: IStore): void {
     const { dispatch, getState } = store;
     const conference = getCurrentConference(getState());
-    const removedScreenshareSourceNames = _.difference(oldScreenshareSourceNames, newScreenshareSourceNames);
-    const addedScreenshareSourceNames = _.difference(newScreenshareSourceNames, oldScreenshareSourceNames);
+    const removedScreenshareSourceNames = difference(oldScreenshareSourceNames, newScreenshareSourceNames);
+    const addedScreenshareSourceNames = difference(newScreenshareSourceNames, oldScreenshareSourceNames);
 
     if (removedScreenshareSourceNames.length) {
         removedScreenshareSourceNames.forEach(id => dispatch(participantLeft(id, conference, {

react/features/base/redux/functions.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { IReduxState, IStore } from '../../app/types';
 import { IStateful } from '../app/types';
@@ -36,7 +36,7 @@ export function assign<T extends Object>(target: T, source: Partial<T>): T {
  * comparison); false, otherwise.
  */
 export function equals(a: any, b: any) {
-    return _.isEqual(a, b);
+    return isEqual(a, b);
 }
 
 /**

react/features/base/redux/middleware.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { throttle } from 'lodash-es';
 
 import MiddlewareRegistry from './MiddlewareRegistry';
 import PersistenceRegistry from './PersistenceRegistry';
@@ -13,10 +13,7 @@ const PERSIST_STATE_DELAY = 2000;
 /**
  * A throttled function to avoid repetitive state persisting.
  */
-const throttledPersistState
-    = _.throttle(
-        state => PersistenceRegistry.persistState(state),
-        PERSIST_STATE_DELAY);
+const throttledPersistState = throttle(state => PersistenceRegistry.persistState(state), PERSIST_STATE_DELAY);
 
 // Web only code.
 // We need the <tt>if</tt> because it appears that on mobile the polyfill is not

react/features/base/settings/middleware.any.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { escape } from 'lodash-es';
 import { AnyAction } from 'redux';
 
 import { IStore } from '../../app/types';
@@ -100,8 +100,8 @@ function _updateLocalParticipantFromUrl({ dispatch, getState }: IStore) {
     const localParticipant = getLocalParticipant(getState());
 
     if (localParticipant) {
-        const displayName = _.escape(urlDisplayName);
-        const email = _.escape(urlEmail);
+        const displayName = escape(urlDisplayName);
+        const email = escape(urlEmail);
 
         dispatch(participantUpdated({
             ...localParticipant,

react/features/base/settings/reducer.ts

@@ -1,6 +1,6 @@
 // @ts-expect-error
 import { jitsiLocalStorage } from '@jitsi/js-utils';
-import _ from 'lodash';
+import { escape } from 'lodash-es';
 
 import { APP_WILL_MOUNT } from '../app/actionTypes';
 import PersistenceRegistry from '../redux/PersistenceRegistry';
@@ -154,8 +154,8 @@ function _initSettings(featureState: ISettingsState) {
     // is a defined value, it will override any value found in local storage.
     // The workaround is sidestepping _.escape when the value is not set in
     // local storage.
-    const displayName = savedDisplayName === null ? undefined : _.escape(savedDisplayName);
-    const email = savedEmail === null ? undefined : _.escape(savedEmail);
+    const displayName = savedDisplayName === null ? undefined : escape(savedDisplayName);
+    const email = savedEmail === null ? undefined : escape(savedEmail);
 
     settings = assignIfDefined({
         displayName,