feat: lighter build by rewriting lodash imports (#1772)

Incorrect lodash imports are causing MFEs to import the entire lodash
library. This change shaves off a few kB of the compressed build.

Author: regisb

src/course-libraries/CourseLibraries.tsx

@@ -20,7 +20,7 @@ import {
   Cached, CheckCircle, Launch, Loop,
 } from '@openedx/paragon/icons';
 
-import _ from 'lodash';
+import sumBy from 'lodash/sumBy';
 import { useSearchParams } from 'react-router-dom';
 import getPageHeadTitle from '../generic/utils';
 import { useModel } from '../generic/model-store';
@@ -109,7 +109,7 @@ export const CourseLibraries: React.FC<Props> = ({ courseId }) => {
   );
   const [showReviewAlert, setShowReviewAlert] = useState(false);
   const { data: libraries, isLoading } = useEntityLinksSummaryByDownstreamContext(courseId);
-  const outOfSyncCount = useMemo(() => _.sumBy(libraries, (lib) => lib.readyToSyncCount), [libraries]);
+  const outOfSyncCount = useMemo(() => sumBy(libraries, (lib) => lib.readyToSyncCount), [libraries]);
   const {
     isLoadingPage: isLoadingStudioHome,
     isFailedLoadingPage: isFailedLoadingStudioHome,

src/course-libraries/ReviewTabContent.tsx

@@ -14,7 +14,9 @@ import {
   useToggle,
 } from '@openedx/paragon';
 
-import _ from 'lodash';
+import {
+  tail, keyBy, orderBy, merge, omitBy,
+} from 'lodash';
 import { useQueryClient } from '@tanstack/react-query';
 import { Loop, Warning } from '@openedx/paragon/icons';
 import messages from './messages';
@@ -49,7 +51,7 @@ interface BlockCardProps {
 const BlockCard: React.FC<BlockCardProps> = ({ info, actions }) => {
   const intl = useIntl();
   const componentIcon = getItemIcon(info.blockType);
-  const breadcrumbs = _.tail(info.breadcrumbs) as Array<{ displayName: string, usageKey: string }>;
+  const breadcrumbs = tail(info.breadcrumbs) as Array<{ displayName: string, usageKey: string }>;
 
   const getBlockLink = useCallback(() => {
     let key = info.usageKey;
@@ -138,11 +140,11 @@ const ComponentReviewList = ({
   );
 
   const outOfSyncComponentsByKey = useMemo(
-    () => _.keyBy(outOfSyncComponents, 'downstreamUsageKey'),
+    () => keyBy(outOfSyncComponents, 'downstreamUsageKey'),
     [outOfSyncComponents],
   );
   const downstreamInfoByKey = useMemo(
-    () => _.keyBy(downstreamInfo, 'usageKey'),
+    () => keyBy(downstreamInfo, 'usageKey'),
     [downstreamInfo],
   );
   const queryClient = useQueryClient();
@@ -241,9 +243,9 @@ const ComponentReviewList = ({
     if (isIndexDataLoading) {
       return [];
     }
-    let merged = _.merge(downstreamInfoByKey, outOfSyncComponentsByKey);
-    merged = _.omitBy(merged, (o) => !o.displayName);
-    const ordered = _.orderBy(Object.values(merged), 'updated', 'desc');
+    let merged = merge(downstreamInfoByKey, outOfSyncComponentsByKey);
+    merged = omitBy(merged, (o) => !o.displayName);
+    const ordered = orderBy(Object.values(merged), 'updated', 'desc');
     return ordered;
   }, [downstreamInfoByKey, outOfSyncComponentsByKey]);
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.js

@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react';
 
-import _ from 'lodash';
+import {
+  includes, isEmpty, isFinite, isNaN, isNil,
+} from 'lodash';
 // This 'module' self-import hack enables mocking during tests.
 // See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
 // should be re-thought and cleaned up to avoid this pattern.
@@ -65,7 +67,7 @@ export const hintsCardHooks = (hints, updateSettings) => {
 
   const handleAdd = () => {
     let newId = 0;
-    if (!_.isEmpty(hints)) {
+    if (!isEmpty(hints)) {
       newId = Math.max(...hints.map(hint => hint.id)) + 1;
     }
     const hint = { id: newId, value: '' };
@@ -114,9 +116,9 @@ export const resetCardHooks = (updateSettings) => {
 
 export const scoringCardHooks = (scoring, updateSettings, defaultValue) => {
   let loadedAttemptsNumber = scoring.attempts.number;
-  if ((loadedAttemptsNumber === defaultValue || !_.isFinite(loadedAttemptsNumber)) && _.isFinite(defaultValue)) {
+  if ((loadedAttemptsNumber === defaultValue || !isFinite(loadedAttemptsNumber)) && isFinite(defaultValue)) {
     loadedAttemptsNumber = `${defaultValue} (Default)`;
-  } else if (loadedAttemptsNumber === defaultValue && _.isNil(defaultValue)) {
+  } else if (loadedAttemptsNumber === defaultValue && isNil(defaultValue)) {
     loadedAttemptsNumber = '';
   }
   const [attemptDisplayValue, setAttemptDisplayValue] = module.state.attemptDisplayValue(loadedAttemptsNumber);
@@ -135,9 +137,9 @@ export const scoringCardHooks = (scoring, updateSettings, defaultValue) => {
     let unlimitedAttempts = false;
     let attemptNumber = parseInt(event.target.value, 10);
 
-    if (!_.isFinite(attemptNumber) || attemptNumber === defaultValue) {
+    if (!isFinite(attemptNumber) || attemptNumber === defaultValue) {
       attemptNumber = null;
-      if (_.isFinite(defaultValue)) {
+      if (isFinite(defaultValue)) {
         setAttemptDisplayValue(`${defaultValue} (Default)`);
       } else {
         setAttemptDisplayValue('');
@@ -154,7 +156,7 @@ export const scoringCardHooks = (scoring, updateSettings, defaultValue) => {
     let newMaxAttempt = parseInt(event.target.value, 10);
     if (newMaxAttempt === defaultValue) {
       newMaxAttempt = `${defaultValue} (Default)`;
-    } else if (_.isNaN(newMaxAttempt)) {
+    } else if (isNaN(newMaxAttempt)) {
       newMaxAttempt = '';
     } else if (newMaxAttempt < 0) {
       newMaxAttempt = 0;
@@ -164,7 +166,7 @@ export const scoringCardHooks = (scoring, updateSettings, defaultValue) => {
 
   const handleWeightChange = (event) => {
     let weight = parseFloat(event.target.value);
-    if (_.isNaN(weight) || weight < 0) {
+    if (isNaN(weight) || weight < 0) {
       weight = 0;
     }
     updateSettings({ scoring: { ...scoring, weight } });
@@ -187,18 +189,18 @@ export const useAnswerSettings = (showAnswer, updateSettings) => {
   ];
 
   useEffect(() => {
-    setShowAttempts(_.includes(numberOfAttemptsChoice, showAnswer.on));
+    setShowAttempts(includes(numberOfAttemptsChoice, showAnswer.on));
   }, [showAttempts]);
 
   const handleShowAnswerChange = (event) => {
     const { value } = event.target;
-    setShowAttempts(_.includes(numberOfAttemptsChoice, value));
+    setShowAttempts(includes(numberOfAttemptsChoice, value));
     updateSettings({ showAnswer: { ...showAnswer, on: value } });
   };
 
   const handleAttemptsChange = (event) => {
     let attempts = parseInt(event.target.value, 10);
-    if (_.isNaN(attempts) || attempts < 0) {
+    if (isNaN(attempts) || attempts < 0) {
       attempts = 0;
     }
     updateSettings({ showAnswer: { ...showAnswer, afterAttempts: attempts } });
@@ -214,7 +216,7 @@ export const useAnswerSettings = (showAnswer, updateSettings) => {
 export const timerCardHooks = (updateSettings) => ({
   handleChange: (event) => {
     let time = parseInt(event.target.value, 10);
-    if (_.isNaN(time) || time < 0) {
+    if (isNaN(time) || time < 0) {
       time = 0;
     }
     updateSettings({ timeBetween: time });

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/hooks.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import messages from './messages';
 // This 'module' self-import hack enables mocking during tests.
 // See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
@@ -19,7 +19,7 @@ export const generalFeedbackHooks = (generalFeedback, updateSettings) => {
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
-    if (_.isEmpty(generalFeedback)) {
+    if (isEmpty(generalFeedback)) {
       setSummary({ message: messages.noGeneralFeedbackSummary, values: {}, intl: true });
     } else {
       setSummary({

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import _ from 'lodash';
+import isNil from 'lodash/isNil';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -76,7 +76,7 @@ const ScoringCard = ({
           className="mt-3 decoration-control-label"
           checked={scoring.attempts.unlimited}
           onChange={handleUnlimitedChange}
-          disabled={!_.isNil(defaultValue)}
+          disabled={!isNil(defaultValue)}
         >
           <div className="x-small">
             <FormattedMessage {...messages.unlimitedAttemptsCheckboxLabel} />