feat(console): remove lodash.* in favor of leaner implementations (#…

…6978)

The following packages are removed:

- `lodash.debounce` and `@types/lodash.debounce`
- `lodash.escape` and `@types/lodash.escape`
- `lodash.throttle` and `@types/lodash.throttle`
- `lodash.uniq` and `@types/lodash.uniq`

apps/wing-console/console/design-system/package.json

@@ -35,8 +35,6 @@
     "@tailwindcss/typography": "^0.5.13",
     "classnames": "^2.5.1",
     "framer-motion": "^10.18.0",
-    "lodash.escape": "^4.0.1",
-    "lodash.uniq": "^4.5.0",
     "nanoid": "^4.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -47,14 +45,13 @@
     "@babel/core": "^7.24.7",
     "@storybook/react": "^7.6.19",
     "@testing-library/react": "^14.3.1",
-    "@types/lodash.escape": "^4.0.9",
-    "@types/lodash.uniq": "^4.5.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^1.6.0",
     "@wingconsole/eslint-plugin": "workspace:^",
     "@wingconsole/tsconfig": "workspace:^",
+    "@wingconsole/utilities": "workspace:^",
     "bump-pack": "workspace:^",
     "eslint": "^8.57.0",
     "happy-dom": "^9.20.3",

apps/wing-console/console/design-system/src/text-highlight.tsx

@@ -1,4 +1,4 @@
-import escape from "lodash.escape";
+import { escapeHtml } from "@wingconsole/utilities";
 import { memo, useEffect, useState } from "react";
 
 import type { Theme } from "./theme-provider.js";
@@ -38,7 +38,7 @@ const highlightJson = (value: string, theme: Theme) => {
             } else if (/null/.test(match)) {
               className = palette.null;
             }
-            return `<span class="${className}">${escape(match)}</span>`;
+            return `<span class="${className}">${escapeHtml(match)}</span>`;
           },
         )}</span>`;
       },

apps/wing-console/console/design-system/src/tree.tsx

@@ -1,5 +1,4 @@
 import classNames from "classnames";
-import uniq from "lodash.uniq";
 import type { KeyboardEvent, Ref } from "react";
 import { useState, useEffect, useCallback, forwardRef } from "react";
 
@@ -66,14 +65,14 @@ const useSelectionRange = ({
           .slice(slice.start, slice.end + 1)
           .map((newEntry) => newEntry.id);
 
-        onSelectionChange(
-          uniq([
+        onSelectionChange([
+          ...new Set([
             ...newShiftEntries,
             ...selectedEntries.filter(
               (newEntry) => !previousRangeSelection.includes(newEntry),
             ),
           ]),
-        );
+        ]);
         setPreviousRangeSelection(newShiftEntries);
       } else {
         setRangeOrigin(index);

apps/wing-console/console/server/package.json

@@ -29,13 +29,12 @@
     "@trpc/server": "^10.45.2",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
-    "@types/lodash.throttle": "^4.1.9",
     "@types/ws": "^8.5.10",
     "@vitest/coverage-v8": "^1.6.0",
     "@wingconsole/error-message": "workspace:^",
     "@wingconsole/eslint-plugin": "workspace:^",
     "@wingconsole/tsconfig": "workspace:^",
-    "@wingconsole/uniq-by": "workspace:^",
+    "@wingconsole/utilities": "workspace:^",
     "bump-pack": "workspace:^",
     "chokidar": "^3.6.0",
     "constructs": "^10.3.0",
@@ -46,7 +45,6 @@
     "eslint": "^8.57.0",
     "express": "^4.19.2",
     "get-port": "^6.1.2",
-    "lodash.throttle": "^4.1.1",
     "nanoid": "^4.0.2",
     "node-fetch": "^3.3.2",
     "tsup": "^8.1.0",

apps/wing-console/console/server/src/index.ts

@@ -1,7 +1,7 @@
 import type { inferRouterInputs } from "@trpc/server";
+import { throttle } from "@wingconsole/utilities";
 import Emittery from "emittery";
 import type { Express } from "express";
-import throttle from "lodash.throttle";
 
 import type { Config } from "./config.js";
 import type { LogSource } from "./consoleLogger.js";

apps/wing-console/console/server/src/router/app.ts

@@ -1,6 +1,6 @@
 import { TRPCError } from "@trpc/server";
 import { observable } from "@trpc/server/observable";
-import { uniqBy } from "@wingconsole/uniq-by";
+import { uniqBy } from "@wingconsole/utilities";
 import type { UIComponent } from "@winglang/sdk/lib/core/tree.js";
 import type { ResourceRunningState } from "@winglang/sdk/lib/simulator/simulator.js";
 import { z } from "zod";

apps/wing-console/console/ui/package.json

@@ -37,16 +37,13 @@
     "@trpc/client": "^10.45.2",
     "@trpc/react-query": "^10.45.2",
     "@trpc/server": "^10.45.2",
-    "@types/lodash.escape": "^4.0.9",
     "@wingconsole/design-system": "workspace:^",
     "classnames": "^2.5.1",
     "elkjs": "^0.8.2",
     "framer-motion": "^10.18.0",
     "jszip": "^3.10.1",
     "linkify-react": "^4.1.3",
     "linkifyjs": "^4.1.3",
-    "lodash.debounce": "^4.0.8",
-    "lodash.escape": "^4.0.1",
     "nanoid": "^4.0.2",
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
@@ -66,17 +63,16 @@
     "@types/cors": "^2.8.17",
     "@types/d3-selection": "^3.0.10",
     "@types/d3-zoom": "^3.0.8",
-    "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "@wingconsole/design-system": "workspace:^",
     "@wingconsole/eslint-plugin": "workspace:^",
     "@wingconsole/server": "workspace:^",
     "@wingconsole/tsconfig": "workspace:^",
-    "@wingconsole/uniq-by": "workspace:^",
     "@wingconsole/use-loading": "workspace:^",
     "@wingconsole/use-persistent-state": "workspace:^",
+    "@wingconsole/utilities": "workspace:^",
     "@winglang/sdk": "workspace:^",
     "autoprefixer": "^10.4.19",
     "bump-pack": "workspace:^",

apps/wing-console/console/ui/src/features/blue-screen-of-death/turn-ascii-colors-into-html.ts

@@ -1,4 +1,4 @@
-import escape from "lodash.escape";
+import { escapeHtml } from "@wingconsole/utilities";
 
 export type AsciiColor =
   | "black"
@@ -58,6 +58,6 @@ export const turnAsciiColorsIntoHtml = (
     } else if (color) {
       return `<span ${colorsTransform(color)}>`;
     }
-    return options?.escapeHtml === false ? match : escape(match);
+    return options?.escapeHtml === false ? match : escapeHtml(match);
   });
 };

apps/wing-console/console/ui/src/features/explorer-pane/use-map.bridge-connections.ts

@@ -1,4 +1,4 @@
-import { uniqBy } from "@wingconsole/uniq-by";
+import { uniqBy } from "@wingconsole/utilities";
 
 export type Connection<T> = {
   source: T;

apps/wing-console/console/ui/src/features/explorer-pane/use-map.ts

@@ -1,5 +1,5 @@
 import type { MapItem } from "@wingconsole/server";
-import { uniqBy } from "@wingconsole/uniq-by";
+import { uniqBy } from "@wingconsole/utilities";
 import type { ElkExtendedEdge } from "elkjs";
 import { useCallback, useMemo } from "react";
 

apps/wing-console/console/ui/src/features/hierarchy-pane/use-hierarchy.tsx

@@ -1,6 +1,6 @@
 import { ResourceIcon } from "@wingconsole/design-system";
 import type { ExplorerItem } from "@wingconsole/server";
-import { uniqBy } from "@wingconsole/uniq-by";
+import { uniqBy } from "@wingconsole/utilities";
 import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 

apps/wing-console/console/ui/src/features/logs-pane/console-logs-filters.tsx

@@ -11,9 +11,9 @@ import {
   useTheme,
 } from "@wingconsole/design-system";
 import type { LogLevel } from "@wingconsole/server";
-import { uniqBy } from "@wingconsole/uniq-by";
+import { uniqBy } from "@wingconsole/utilities";
+import { debounce } from "@wingconsole/utilities";
 import classNames from "classnames";
-import debounce from "lodash.debounce";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 
 export const LOG_LEVELS: LogLevel[] = ["verbose", "info", "warn", "error"];

apps/wing-console/packages/uniq-by/package.json → apps/wing-console/packages/utilities/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@wingconsole/uniq-by",
+  "name": "@wingconsole/utilities",
   "version": "0.0.0",
   "private": true,
   "exports": "./src/index.ts",

apps/wing-console/packages/utilities/src/debounce.ts

@@ -0,0 +1,25 @@
+export function debounce<T extends (...arguments_: any[]) => void>(
+  function_: T,
+  wait: number,
+  immediate: boolean = false,
+): (...arguments_: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | undefined;
+
+  return (...arguments_: Parameters<T>): void => {
+    const later = () => {
+      timeout = undefined;
+      if (!immediate) {
+        function_(...arguments_);
+      }
+    };
+
+    const callNow = immediate && !timeout;
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+
+    if (callNow) {
+      function_(...arguments_);
+    }
+  };
+}

apps/wing-console/packages/utilities/src/escape-html.test.ts

@@ -0,0 +1,9 @@
+import { expect, test } from "vitest";
+
+import { escapeHtml } from "./escape-html.js";
+
+test("escapes html characters", () => {
+  expect(escapeHtml(`<div class="class" id='1'>Wing & Console</div>`)).toEqual(
+    `&lt;div class=&quot;class&quot; id=&#39;1&#39;&gt;Wing &amp; Console&lt;/div&gt;`,
+  );
+});

apps/wing-console/packages/utilities/src/escape-html.ts

@@ -0,0 +1,22 @@
+const htmlEscapes = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;",
+};
+
+const regExp = /["&'<>]/g;
+
+const escaper = (match: string) => {
+  return htmlEscapes[match as CHARACTERS_TO_ESCAPE];
+};
+
+type CHARACTERS_TO_ESCAPE = keyof typeof htmlEscapes;
+
+/**
+ * Converts the characters "&", "<", ">", '"', "'" to their corresponding HTML entities.
+ */
+export function escapeHtml(html: string) {
+  return html.replaceAll(regExp, escaper);
+}

apps/wing-console/packages/utilities/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./debounce.js";
+export * from "./escape-html.js";
+export * from "./throttle.js";
+export * from "./uniq-by.js";

apps/wing-console/packages/utilities/src/throttle.ts

@@ -0,0 +1,13 @@
+export function throttle<T extends (...arguments_: any[]) => void>(
+  function_: T,
+  timeFrame: number,
+): (...arguments_: Parameters<T>) => void {
+  let lastTime = 0;
+  return (...arguments_) => {
+    const now = Date.now();
+    if (now - lastTime >= timeFrame) {
+      function_(...arguments_);
+      lastTime = now;
+    }
+  };
+}

apps/wing-console/packages/uniq-by/src/index.test.ts → apps/wing-console/packages/utilities/src/uniq-by.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "vitest";
 
-import { uniqBy } from "./index.js";
+import { uniqBy } from "./uniq-by.js";
 
 test("deduplicates items using identity as iteratee", () => {
   expect(uniqBy([1, 2], (number) => number)).toEqual([1, 2]);