Migrate from lodash to es-toolkit (#596)

* Migrate from lodash to es-toolkit

* Revert noBarrelImports tests + mock memoize function

* Fix weird dependency aliasing

* Lint files

* Fix lockfile post-merge

* Fix missing packages

* Fix omit change to es-toolkit + Add react to base module

* Update .yarnrc.yml

Co-authored-by: Richard Dominick <[email protected]>

* Update docs/src/lib/lintplugin/2-rules.md

Co-authored-by: Richard Dominick <[email protected]>

* Revert tests and no-barrel-imports and fix mergeConfig bug

* Update components that were causing type errors

* Update packages to fix type errors

* Temporary fixes for blueprint icons

* Ran linting

---------

Co-authored-by: Richard Dominick <[email protected]>
Co-authored-by: DESKTOP-G08HS3B\Lee Yi <[email protected]>

Author: 3 people

.github/actions/package.json

@@ -5,7 +5,6 @@
   "type": "module",
   "devDependencies": {
     "@sourceacademy/modules-repotools": "workspace:^",
-    "@types/lodash": "^4.14.198",
     "@types/node": "^22.15.30",
     "typescript": "^5.8.2",
     "vitest": "^4.0.18"
@@ -14,7 +13,7 @@
     "@actions/artifact": "^6.0.0",
     "@actions/core": "^1.11.1",
     "@actions/exec": "^3.0.0",
-    "lodash": "^4.17.23",
+    "es-toolkit": "^1.44.0",
     "snyk-nodejs-lockfile-parser": "^2.4.2"
   },
   "scripts": {

.github/actions/src/__tests__/commons.test.ts

@@ -2,9 +2,13 @@ import * as exec from '@actions/exec';
 import { describe, expect, it, test, vi } from 'vitest';
 import * as commons from '../commons.js';
 
-vi.mock(import('lodash/memoize.js'), () => ({
-  default: (x: any) => x
-}) as any);
+vi.mock(import('es-toolkit'), async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    memoize: (x: any) => x
+  };
+});
 
 const mockedExecOutput = vi.spyOn(exec, 'getExecOutput');
 

.github/actions/src/__tests__/sample_why.txt

@@ -1,5 +1,5 @@
 import { getExecOutput } from '@actions/exec';
-import memoize from 'lodash/memoize.js';
+import { memoize } from 'es-toolkit';
 
 export interface RawPackageRecord {
   directory: string;

.github/actions/src/commons.ts

@@ -55,7 +55,7 @@ const mockDirectory: Record<string, string | Record<string, unknown>> = {
         'package.json': JSON.stringify({
           name: '@sourceacademy/tab-Tab0',
           dependencies: {
-            lodash: '^4.1.1',
+            'lodash': '^4.17.20',
             '@sourceacademy/bundle-bundle0': 'workspace:^',
           },
           devDependencies: {

.github/actions/src/info/__tests__/index.test.ts

@@ -2,7 +2,7 @@ import fs from 'fs/promises';
 import pathlib from 'path';
 import * as core from '@actions/core';
 import { getExecOutput } from '@actions/exec';
-import memoize from 'lodash/memoize.js';
+import { memoize } from 'es-toolkit';
 import { extractPkgsFromYarnLockV2 } from 'snyk-nodejs-lockfile-parser';
 import { gitRoot } from './gitRoot.js';
 

.github/actions/src/lockfiles.ts

@@ -1,4 +1,4 @@
-import { AnchorButton, Button, Icon, Intent, type IconName } from '@blueprintjs/core';
+import { AnchorButton, Button, Icon, Intent, type IconProps } from '@blueprintjs/core';
 import React from 'react';
 
 type ButtonOptions = {
@@ -13,7 +13,7 @@ type ButtonOptions = {
 
 type ControlButtonProps = {
   label?: string;
-  icon?: IconName;
+  icon?: IconProps['icon'];
   onClick?: () => void;
   options?: Partial<ButtonOptions>;
   isDisabled?: boolean;

devserver/src/components/ControlButton.tsx

@@ -1,9 +1,10 @@
 import { Button, Classes, Intent, OverlayToaster, Popover, Tooltip, type ToastProps } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
+import { Settings } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { SourceDocumentation, getNames, runInContext, type Context } from 'js-slang';
 // Importing this straight from js-slang doesn't work for whatever reason
 import createContext from 'js-slang/dist/createContext';
+import { ModuleInternalError } from 'js-slang/dist/modules/errors';
 import { setModulesStaticURL } from 'js-slang/dist/modules/loader';
 import { Chapter, Variant } from 'js-slang/dist/types';
 import { stringify } from 'js-slang/dist/utils/stringify';
@@ -159,6 +160,12 @@ const Playground: React.FC = () => {
             value: stringify(result.value)
           });
         } else if (result.status === 'error') {
+          codeContext.errors.forEach(error => {
+            if (error instanceof ModuleInternalError) {
+              console.error(error.error);
+            }
+          });
+
           setReplOutput({
             type: 'errors',
             errors: codeContext.errors,
@@ -210,7 +217,7 @@ const Playground: React.FC = () => {
               <Tooltip content="Settings">
                 <Button
                   {...targetProps}
-                  icon={IconNames.SETTINGS}
+                  icon={<Settings />}
                 />
               </Tooltip>
             );

devserver/src/components/Playground.tsx

@@ -1,5 +1,5 @@
 import { Tooltip } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
+import { Trash } from '@blueprintjs/icons';
 import ControlButton from '../ControlButton';
 
 type Props = {
@@ -9,7 +9,7 @@ type Props = {
 export const ControlBarClearButton = (props: Props) => <Tooltip content="Clear the editor and context">
   <ControlButton
     label="Clear"
-    icon={IconNames.Trash}
+    icon={<Trash />}
     onClick={props.onClick}
   />
 </Tooltip>;

devserver/src/components/controlBar/ControlBarClearButton.tsx

@@ -1,5 +1,5 @@
 import { Tooltip } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
+import { Refresh } from '@blueprintjs/icons';
 import ControlButton from '../ControlButton';
 
 type Props = {
@@ -9,7 +9,7 @@ type Props = {
 export const ControlBarRefreshButton = (props: Props) => <Tooltip content="Manually refresh the side content">
   <ControlButton
     onClick={props.onClick}
-    icon={IconNames.Refresh}
+    icon={<Refresh />}
     label="Refresh"
   />
 </Tooltip>;