Migrate to modern ESM dependencies

package.json

@@ -52,10 +52,11 @@
     "ag-grid-react": "^32.3.1",
     "array-move": "^4.0.0",
     "browserfs": "^1.4.3",
-    "classnames": "^2.3.2",
+    "clsx": "^2.1.1",
     "conductor": "https://github.com/source-academy/conductor.git#0.2.1",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.4",
+    "es-toolkit": "^1.39.9",
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
     "hastscript": "^9.0.0",
@@ -68,7 +69,6 @@
     "js-yaml": "^4.1.0",
     "konva": "^9.2.0",
     "language-directory": "https://github.com/source-academy/language-directory.git",
-    "lodash": "^4.17.21",
     "lz-string": "^1.4.4",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-to-hast": "^13.0.0",

src/commons/Markdown.tsx

@@ -1,5 +1,5 @@
 import { Classes } from '@blueprintjs/core';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import DOMPurify from 'dompurify';
 import React from 'react';
 import { Converter } from 'showdown';
@@ -24,7 +24,7 @@ const Markdown: React.FC<Props> = props => {
 
   return (
     <div
-      className={classNames(props.className ? props.className : 'md', Classes.RUNNING_TEXT)}
+      className={clsx(props.className ? props.className : 'md', Classes.RUNNING_TEXT)}
       dangerouslySetInnerHTML={{
         __html: DOMPurify.sanitize(converter.makeHtml(props.content), {
           USE_PROFILES: { html: true },

src/commons/achievement/control/achievementEditor/EditableCard.tsx

@@ -1,6 +1,6 @@
 import { EditableText, NumericInput, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { cloneDeep } from 'lodash';
+import { cloneDeep } from 'es-toolkit';
 import React, { useContext, useMemo, useReducer, useState } from 'react';
 
 import { AchievementContext } from '../../../../features/achievement/AchievementConstants';

src/commons/achievement/control/achievementEditor/achievementSettings/EditableGoalUuids.tsx

@@ -1,6 +1,6 @@
 import { MenuItem } from '@blueprintjs/core';
 import { ItemPredicate, ItemRenderer, MultiSelect } from '@blueprintjs/select';
-import { without } from 'lodash';
+import { without } from 'es-toolkit';
 import React, { useContext } from 'react';
 import { AchievementContext } from 'src/features/achievement/AchievementConstants';
 import { AchievementGoal } from 'src/features/achievement/AchievementTypes';

src/commons/achievement/control/achievementEditor/achievementSettings/EditablePrerequisiteUuids.tsx

@@ -1,6 +1,6 @@
 import { MenuItem } from '@blueprintjs/core';
 import { ItemPredicate, ItemRenderer, MultiSelect } from '@blueprintjs/select';
-import { without } from 'lodash';
+import { without } from 'es-toolkit';
 import React, { useContext } from 'react';
 import { AchievementContext } from 'src/features/achievement/AchievementConstants';
 import { AchievementItem } from 'src/features/achievement/AchievementTypes';

src/commons/achievement/control/goalEditor/EditableGoal.tsx

@@ -1,5 +1,5 @@
 import { EditableText } from '@blueprintjs/core';
-import { cloneDeep } from 'lodash';
+import { cloneDeep } from 'es-toolkit';
 import React, { useContext, useMemo, useReducer, useState } from 'react';
 import { AchievementContext } from 'src/features/achievement/AchievementConstants';
 import { GoalDefinition, GoalMeta } from 'src/features/achievement/AchievementTypes';

src/commons/achievement/utils/AchievementInferencer.ts

@@ -1,4 +1,4 @@
-import { cloneDeep, uniq } from 'lodash';
+import { cloneDeep, uniq } from 'es-toolkit';
 import { v4 } from 'uuid';
 
 import {

src/commons/application/ApplicationWrapper.tsx

@@ -1,6 +1,6 @@
 import { Classes, NonIdealState } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { createBrowserRouter, RouterProvider } from 'react-router';
@@ -45,7 +45,7 @@ const ApplicationWrapper: React.FC = () => {
 
   if (!isApiHealthy) {
     return (
-      <div className={classNames('NoPage', Classes.DARK)}>
+      <div className={clsx('NoPage', Classes.DARK)}>
         <NonIdealState
           icon={IconNames.WRENCH}
           title="Under maintenance"

src/commons/assessment/Assessment.tsx

@@ -12,7 +12,7 @@ import {
   Tooltip
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { sortBy } from 'lodash';
+import { sortBy } from 'es-toolkit';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Navigate, useLoaderData, useParams } from 'react-router';

src/commons/assessment/AssessmentNotFound.tsx

@@ -1,9 +1,9 @@
 import { Classes, NonIdealState } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 const AssessmentNotFound: React.FC = () => (
-  <div className={classNames('NoPage', Classes.DARK)}>
+  <div className={clsx('NoPage', Classes.DARK)}>
     <NonIdealState
       icon={IconNames.ERROR}
       title="Assessment Not Found"

src/commons/assessment/AssessmentOverviewCard.tsx

@@ -1,6 +1,6 @@
 import { Card, Elevation, H4, H6, Icon, Intent, Position, Text, Tooltip } from '@blueprintjs/core';
 import { IconName, IconNames } from '@blueprintjs/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import classes from 'src/styles/Academy.module.scss';
 
 import defaultCoverImage from '../../assets/default_cover_image.jpg';
@@ -32,7 +32,7 @@ const AssessmentOverviewCard: React.FC<AssessmentOverviewCardProps> = ({
   return (
     <div>
       <Card className="row listing" elevation={Elevation.ONE}>
-        <div className={classNames('listing-picture', !isMobileBreakpoint && 'col-xs-3')}>
+        <div className={clsx('listing-picture', !isMobileBreakpoint && 'col-xs-3')}>
           <NotificationBadge
             className="badge"
             notificationFilter={filterNotificationsByAssessment(overview.id)}
@@ -44,7 +44,7 @@ const AssessmentOverviewCard: React.FC<AssessmentOverviewCardProps> = ({
             src={overview.coverImage ? overview.coverImage : defaultCoverImage}
           />
         </div>
-        <div className={classNames('listing-text', !isMobileBreakpoint && 'col-xs-9')}>
+        <div className={clsx('listing-text', !isMobileBreakpoint && 'col-xs-9')}>
           <AssessmentOverviewCardTitle
             overview={overview}
             renderProgressStatus={renderGradingTooltip}

src/commons/assessmentWorkspace/AssessmentWorkspace.tsx

@@ -11,9 +11,9 @@ import {
   SpinnerSize
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
+import { isEqual } from 'es-toolkit';
 import { Chapter, Variant } from 'js-slang/dist/types';
-import { isEqual } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router';
@@ -895,7 +895,7 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
   if (!assessment?.questions.length) {
     return (
       <NonIdealState
-        className={classNames('WorkspaceParent', Classes.DARK)}
+        className={clsx('WorkspaceParent', Classes.DARK)}
         description="Getting mission ready..."
         icon={<Spinner size={SpinnerSize.LARGE} />}
       />
@@ -1042,7 +1042,7 @@ It is safe to close this window.`}
     mobileSideContentProps: mobileSideContentProps(questionId)
   };
   return (
-    <div className={classNames('WorkspaceParent', Classes.DARK)}>
+    <div className={clsx('WorkspaceParent', Classes.DARK)}>
       {submissionOverlay}
       {overlay}
       {resetTemplateOverlay}

src/commons/controlBar/ControlBar.tsx

@@ -1,5 +1,5 @@
 import { Classes } from '@blueprintjs/core';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 
 export type ControlBarProps = {
@@ -10,17 +10,15 @@ export type ControlBarProps = {
 
 const ControlBar: React.FC<ControlBarProps> = props => {
   const editorControl = (
-    <div className={classNames('ControlBar_editor', Classes.BUTTON_GROUP)}>
-      {props.editorButtons}
-    </div>
+    <div className={clsx('ControlBar_editor', Classes.BUTTON_GROUP)}>{props.editorButtons}</div>
   );
 
   const flowControl = props.flowButtons && (
-    <div className={classNames('ControlBar_flow', Classes.BUTTON_GROUP)}>{props.flowButtons}</div>
+    <div className={clsx('ControlBar_flow', Classes.BUTTON_GROUP)}>{props.flowButtons}</div>
   );
 
   const editingWorkspaceControl = (
-    <div className={classNames('ControlBar_editingWorkspace', Classes.BUTTON_GROUP)}>
+    <div className={clsx('ControlBar_editingWorkspace', Classes.BUTTON_GROUP)}>
       {props.editingWorkspaceButtons}
     </div>
   );

src/commons/dialogs/ConfirmDialog.tsx

@@ -9,7 +9,7 @@ import {
   IconName,
   Intent
 } from '@blueprintjs/core';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import classes from 'src/styles/ConfirmDialog.module.scss';
 
@@ -34,7 +34,7 @@ export function ConfirmDialog<T>(
       onClick={() => props.onResponse && props.onResponse(choice.key)}
       intent={choice.intent}
       fill={props.largeButtons}
-      className={classNames(props.largeButtons && classes['large-button'])}
+      className={clsx(props.largeButtons && classes['large-button'])}
       {...choice.props}
     >
       {choice.label}
@@ -47,7 +47,7 @@ export function ConfirmDialog<T>(
       : () => props.onResponse && props.onResponse(escapeResponse);
   return (
     <Dialog
-      className={classNames(Classes.DARK, classes['ConfirmDialog'])}
+      className={clsx(Classes.DARK, classes['ConfirmDialog'])}
       title={props.title}
       isCloseButtonShown={typeof props.title === 'undefined' ? undefined : false}
       canEscapeKeyClose={!!escapeHandler}

src/commons/editingWorkspace/EditingWorkspace.tsx

@@ -9,7 +9,7 @@ import {
   SpinnerSize
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Chapter, Variant } from 'js-slang/dist/types';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -186,7 +186,7 @@ const EditingWorkspace: React.FC<EditingWorkspaceProps> = props => {
   if (assessment === null || assessment!.questions.length === 0) {
     return (
       <NonIdealState
-        className={classNames('WorkspaceParent', Classes.DARK)}
+        className={clsx('WorkspaceParent', Classes.DARK)}
         description="Getting mission ready..."
         icon={<Spinner size={SpinnerSize.LARGE} />}
       />
@@ -707,7 +707,7 @@ const EditingWorkspace: React.FC<EditingWorkspaceProps> = props => {
     }
   };
   return (
-    <div className={classNames('WorkspaceParent', Classes.DARK)}>
+    <div className={clsx('WorkspaceParent', Classes.DARK)}>
       {resetTemplateOverlay()}
       <Workspace {...workspaceProps} />
     </div>

src/commons/editor/EditorContainer.tsx

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { pick } from 'es-toolkit';
 import React from 'react';
 
 import SourcecastEditor, {
@@ -40,7 +40,7 @@ export const convertEditorTabStateToProps = (
   return {
     editorTabIndex,
     editorValue: editorTab.value,
-    ..._.pick(editorTab, 'filePath', 'highlightedLines', 'breakpoints', 'newCursorPosition')
+    ...pick(editorTab, ['filePath', 'highlightedLines', 'breakpoints', 'newCursorPosition'])
   };
 };
 

src/commons/editor/tabs/EditorTab.tsx

@@ -1,6 +1,6 @@
 import { Card, Icon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 
 type Props = {
@@ -19,7 +19,7 @@ const EditorTab: React.FC<Props> = ({ filePath, isActive, setActive, remove }) =
 
   return (
     <Card
-      className={classNames('editor-tab', {
+      className={clsx('editor-tab', {
         selected: isActive
       })}
       onClick={setActive}

src/commons/fileSystemView/FileSystemViewContextMenu.tsx

@@ -1,6 +1,6 @@
 import { Classes } from '@blueprintjs/core';
 import { ControlledMenu, MenuItem, useMenuState } from '@szhsin/react-menu';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import classes from 'src/styles/ContextMenu.module.scss';
 
@@ -36,7 +36,7 @@ const FileSystemViewContextMenu: React.FC<Props> = ({
     <div className={className} onContextMenu={onContextMenu}>
       {children}
       <ControlledMenu
-        menuClassName={classNames(Classes.CARD, Classes.DARK, classes['context-menu'])}
+        menuClassName={clsx(Classes.CARD, Classes.DARK, classes['context-menu'])}
         {...menuProps}
         anchorPoint={anchorPoint}
         onClose={() => toggleMenu(false)}

src/commons/gitHubOverlay/FileExplorerDialog.tsx

@@ -12,7 +12,7 @@ import {
 } from '@blueprintjs/core';
 import { Octokit } from '@octokit/rest';
 import { GetResponseTypeFromEndpointMethod } from '@octokit/types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 
 import {
@@ -46,7 +46,7 @@ const FileExplorerDialog: React.FC<FileExplorerDialogProps> = props => {
 
   return (
     <Dialog className="githubDialog" isOpen={true} onClose={handleClose}>
-      <div className={classNames('githubDialogHeader', Classes.DIALOG_HEADER)}>
+      <div className={clsx('githubDialogHeader', Classes.DIALOG_HEADER)}>
         <h3>Select a File</h3>
       </div>
       <DialogBody>
@@ -55,7 +55,7 @@ const FileExplorerDialog: React.FC<FileExplorerDialogProps> = props => {
           onNodeClick={handleNodeClick}
           onNodeCollapse={handleNodeCollapse}
           onNodeExpand={handleNodeExpand}
-          className={classNames('FileTree', Classes.ELEVATION_0)}
+          className={clsx('FileTree', Classes.ELEVATION_0)}
         />
         {props.pickerType === 'Save' && (
           <div>

src/commons/gitHubOverlay/RepositoryDialog.tsx

@@ -9,7 +9,7 @@ import {
   Radio,
   RadioGroup
 } from '@blueprintjs/core';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 
 import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
@@ -24,7 +24,7 @@ const RepositoryDialog: React.FC<RepositoryDialogProps> = props => {
 
   return (
     <Dialog className="githubDialog" isOpen={true} onClose={handleClose}>
-      <div className={classNames('githubDialogHeader', Classes.DIALOG_HEADER)}>
+      <div className={clsx('githubDialogHeader', Classes.DIALOG_HEADER)}>
         <h3>Select a Repository</h3>
       </div>
       <DialogBody>

src/commons/grading/GradingText.tsx

@@ -1,5 +1,5 @@
 import { Classes, Text } from '@blueprintjs/core';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 
 const defaultStyles: React.CSSProperties = {
@@ -17,7 +17,7 @@ type Props = {
 const GradingText: React.FC<Props> = ({ children, style, isSecondaryText, className }) => {
   return (
     <Text
-      className={classNames(Classes.UI_TEXT, className, isSecondaryText && Classes.TEXT_MUTED)}
+      className={clsx(Classes.UI_TEXT, className, isSecondaryText && Classes.TEXT_MUTED)}
       style={{ ...defaultStyles, ...style }}
     >
       {children}

src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx

@@ -1,5 +1,5 @@
 import { Classes, Icon, Tab, Tabs, Tooltip } from '@blueprintjs/core';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import { SideContentProps } from 'src/commons/sideContent/SideContent';
 import { generateIconId } from 'src/commons/sideContent/SideContentHelper';
@@ -106,7 +106,7 @@ const MobileSideContent: React.FC<MobileSideContentProps> = ({
               onChange={onChange}
               renderActiveTabPanelOnly={renderActiveTabPanelOnly}
               selectedTabId={selectedTab}
-              className={classNames(Classes.DARK, 'mobile-side-content')}
+              className={clsx(Classes.DARK, 'mobile-side-content')}
             >
               {allTabs.map(tab => renderTab(tab, isIOS))}
 

src/commons/mocks/StoreMocks.ts

@@ -1,5 +1,5 @@
 import { Store } from '@reduxjs/toolkit';
-import _ from 'lodash';
+import { isObject, mergeWith } from 'es-toolkit/compat';
 import mockStore from 'redux-mock-store';
 
 import {
@@ -40,13 +40,13 @@ export function mockInitialStore(
   };
 
   const lodashMergeCustomizer = (objValue: any, srcValue: any) => {
-    if (_.isObject(objValue)) {
+    if (isObject(objValue)) {
       return {
         ...objValue, // destination object
         ...srcValue // overrides
       };
     }
   };
 
-  return createStore(_.mergeWith(state, overrides, lodashMergeCustomizer));
+  return createStore(mergeWith(state, overrides, lodashMergeCustomizer));
 }