Replace lodash/lodash-es with native JavaScript and lightweight alternatives

eslint-suppressions.json

@@ -24,11 +24,6 @@
       "count": 1
     }
   },
-  "packages/components/src/components/FileExplorer/components/FileExplorer.vue": {
-    "depend/ban-dependencies": {
-      "count": 1
-    }
-  },
   "packages/components/src/components/FileExplorer/components/FileExplorerItem.vue": {
     "@typescript-eslint/no-floating-promises": {
       "count": 3

package.json

@@ -42,7 +42,6 @@
     "@knime/licenses": "workspace:*",
     "@tsconfig/node22": "22.0.0",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash-es": "4.17.12",
     "@types/node": "22.12.0",
     "@vitest/coverage-v8": "catalog:",
     "@vue/tsconfig": "^0.5.1",
@@ -84,5 +83,9 @@
   "engines": {
     "node": "22.x"
   },
-  "packageManager": "pnpm@10.18.1"
+  "packageManager": "pnpm@10.18.1",
+  "dependencies": {
+    "fast-deep-equal": "^3.1.3",
+    "rfdc": "^1.4.1"
+  }
 }

packages/components/package.json

@@ -47,10 +47,11 @@
     "color-hash": "2.0.2",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
+    "fast-deep-equal": "^3.1.3",
     "filesize": "10.0.6",
     "focus-trap-vue": "4.0.2",
-    "lodash-es": "catalog:",
     "motion": "^12.23.12",
+    "rfdc": "^1.4.1",
     "typescript": "catalog:",
     "uuid": "11.1.0",
     "v-calendar": "catalog:patch"

packages/components/src/components/FileExplorer/components/FileExplorer.vue

@@ -4,9 +4,9 @@ import { computed, nextTick, ref, toRef, toRefs, watch } from "vue";
 import {
   type MaybeElementRef,
   onClickOutside,
+  useDebounceFn,
   useResizeObserver,
 } from "@vueuse/core";
-import { debounce } from "lodash-es";
 
 import OptionsIcon from "@knime/styles/img/icons/menu-options.svg";
 import { getMetaOrCtrlKey } from "@knime/utils";
@@ -202,13 +202,15 @@ const scrollIntoView = (
 
   // wait 50ms for DOM changes (e.g. changes in table ref) to take effect before scrolling
   const scrollDebounceMs = 50;
-  const debouncedScroll = debounce(() => {
+  const debouncedScroll = useDebounceFn(() => {
     containerProps.ref.value?.scrollTo({
       top: virtualSizeManager.toOffset(index),
       behavior,
     });
   }, scrollDebounceMs);
-  debouncedScroll();
+  debouncedScroll().catch(() => {
+    // Ignore debounce errors
+  });
 };
 
 /** MULTISELECTION */

packages/components/src/components/FileExplorer/components/__tests__/FileExplorer.test.ts

@@ -23,14 +23,6 @@ vi.mock("motion", () => ({
   },
 }));
 
-vi.mock("lodash-es", async (importOriginal) => {
-  const original = await importOriginal<typeof import("lodash-es")>();
-  return {
-    ...original,
-    debounce: (fn: (...args: never[]) => unknown) => fn, // bypass debounce
-  };
-});
-
 type Props = InstanceType<typeof FileExplorer>["$props"];
 
 describe("FileExplorer", () => {
@@ -265,6 +257,7 @@ describe("FileExplorer", () => {
       const { wrapper } = doMount({ props: { mode: "mini" } });
 
       await wrapper.setProps({ selectedItemIds: ["2", "3"] });
+      await sleep(60); // wait for debounce (50ms + buffer)
 
       expect(getRenderedItems(wrapper).at(2)?.classes()).toContain("selected");
       expect(getRenderedItems(wrapper).at(3)?.classes()).toContain("selected");
@@ -282,6 +275,7 @@ describe("FileExplorer", () => {
           { ...MOCK_DATA[0], id: "6", name: "Some new Folder" },
         ],
       });
+      await sleep(60); // wait for debounce (50ms + buffer)
 
       expect(getRenderedItems(wrapper).at(6)?.classes()).toContain("selected");
       expect(scrollTo).toHaveBeenCalled();

packages/components/src/components/ResizeHandle/ResizeHandle.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import { throttle } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
+import { useThrottleFn } from "@vueuse/core";
 
 const ON_POINTER_MOVE_THROTTLE = 10;
 const HANDLE_PADDING = "2px";
@@ -59,7 +59,7 @@ const onPointerDown = (event: PointerEvent) => {
   currentPointerY.value = event.clientY;
 };
 
-const onPointerMove = throttle((event: PointerEvent) => {
+const onPointerMove = useThrottleFn((event: PointerEvent) => {
   if (pointerId.value === event.pointerId) {
     const deltaY = event.clientY - currentPointerY.value;
     if (

packages/components/src/components/Tag/TagList.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, toRef, watch } from "vue";
-import { difference } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
 
 import Tag from "./Tag.vue";
 
@@ -62,9 +61,10 @@ const mappedTags = computed(() => {
   const { tags, sortByActive, activeTags } = props;
 
   if (sortByActive) {
+    const activeTagsSet = new Set(activeTags);
     return [
       ...activeTags.map((tag) => ({ name: tag, isActive: true })),
-      ...difference(tags, activeTags).map((tag) => ({
+      ...tags.filter((tag) => !activeTagsSet.has(tag)).map((tag) => ({
         name: tag,
         isActive: false,
       })),

packages/components/src/components/Toast/toastService.ts

@@ -1,6 +1,6 @@
 import type { App, Plugin, Ref } from "vue";
 import { computed, getCurrentInstance, inject, provide, ref } from "vue";
-import { cloneDeep, uniqueId } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
+import clone from "rfdc";
 
 import type {
   Toast,
@@ -10,6 +10,11 @@ import type {
   UseToastsOptions,
 } from "./types";
 
+const cloneDeep = clone();
+
+let uniqueIdCounter = 0;
+const uniqueId = () => `toast-${++uniqueIdCounter}`;
+
 export const defaultToastServiceSymbol = Symbol("toast");
 export const defaultGlobalPropertyName = "$toast";
 

packages/components/src/components/Toast/useAnimation.ts

@@ -1,6 +1,5 @@
 import { onMounted, ref } from "vue";
 import type { Ref } from "vue";
-import { merge } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
 
 export default function useAnimation(
   targetRef: Ref<HTMLElement | null>,
@@ -12,11 +11,10 @@ export default function useAnimation(
     fill: "forwards",
   };
 
-  const mergedAnimationOptions = merge(
-    {},
-    DEFAULT_ANIMATION_OPTIONS,
-    animationOptions,
-  );
+  const mergedAnimationOptions = {
+    ...DEFAULT_ANIMATION_OPTIONS,
+    ...animationOptions,
+  };
 
   const animation: Ref<null | Animation> = ref(null);
 

packages/components/src/components/base/MenuItem/BaseMenuItems.vue

@@ -8,11 +8,13 @@ import {
   watch,
 } from "vue";
 import { type Boundary, autoUpdate, flip, useFloating } from "@floating-ui/vue";
-import { uniqueId } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
 
 import BaseMenuItem from "./BaseMenuItem.vue";
 import type { MenuItem } from "./MenuItems.vue";
 
+let uniqueIdCounter = 0;
+const generateUniqueId = () => `menu-${++uniqueIdCounter}`;
+
 type ElementTemplateRef = HTMLElement | { $el: HTMLElement };
 
 function isNativeHTMLElement(
@@ -46,12 +48,14 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), {
   focusedItemIndex: null,
-  id: () => `__BaseMenuItems-${uniqueId()}__`,
+  id: undefined,
   clippingBoundary: () => document.body,
   maxMenuWidth: null,
   positionRelativeToElement: null,
 });
 
+const menuId = props.id ?? `__BaseMenuItems-${generateUniqueId()}__`;
+
 const emit = defineEmits<{
   "item-click": [MouseEvent, MenuItem, string];
   "item-focused": [id: string | null, MenuItem | null];
@@ -89,7 +93,7 @@ const enabledItemsIndices = computed(() => {
 });
 
 const menuItemId = (index: number) => {
-  return `menu-item-${props.id}-${index}`;
+  return `menu-item-${menuId}-${index}`;
 };
 
 const emitItemFocused = () => {
@@ -163,7 +167,7 @@ const onPointerEnter = (_event: Event, item: MenuItem, index: number) => {
   emit(
     "item-hovered",
     item.disabled || item.sectionHeadline ? null : item,
-    props.id,
+    menuId,
     index,
   );
 };
@@ -197,7 +201,7 @@ const onItemClick = (event: MouseEvent, item: MenuItem, id: string) => {
     :style="listContainerFloatingStyles"
     role="menu"
     tabindex="-1"
-    @pointerleave="$emit('item-hovered', null, id, null)"
+    @pointerleave="$emit('item-hovered', null, menuId, null)"
   >
     <li
       v-for="(item, index) in items"
@@ -207,15 +211,15 @@ const onItemClick = (event: MouseEvent, item: MenuItem, id: string) => {
       :class="[{ separator: item.separator }]"
       :style="useMaxMenuWidth ? { 'max-width': `${maxMenuWidth}px` } : {}"
       :title="item.title"
-      @click="onItemClick($event, item, id)"
+      @click="onItemClick($event, item, menuId)"
       @contextmenu.prevent
       @pointerenter="onPointerEnter($event, item, index)"
     >
       <slot
         name="item"
         :item="item"
         :index="index"
-        :menu-id="id"
+        :menu-id="menuId"
         :menu-item-id="menuItemId"
         :max-menu-width="maxMenuWidth"
         :focused-item-index="focusedItemIndex"

packages/components/src/components/forms/DateTimeInput/DateTimeInput.vue

@@ -8,7 +8,6 @@ import {
   setSeconds,
 } from "date-fns";
 import { format, utcToZonedTime, zonedTimeToUtc } from "date-fns-tz";
-import { map } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
 import { DatePicker } from "v-calendar";
 
 import CalendarIcon from "@knime/styles/img/icons/calendar.svg";
@@ -144,7 +143,7 @@ export default {
       // time in the given timezone (default: browser local) for correct display
       localValue: new Date(""),
       selectedTimezone: this.timezone,
-      timezones: map(Intl.supportedValuesOf("timeZone"), (timezone) => ({
+      timezones: Intl.supportedValuesOf("timeZone").map((timezone) => ({
         id: timezone,
         text: timezone,
       })),

packages/components/src/components/forms/Dropdown/Dropdown.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
 import { type PropType, computed, nextTick, ref, toRefs, watch } from "vue";
 import { OnClickOutside } from "@vueuse/components";
-import { isEmpty } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
 import { v4 as uuidv4 } from "uuid";
 
 import DropdownIcon from "@knime/styles/img/icons/arrow-dropdown.svg";
@@ -220,7 +219,7 @@ export default {
         return false;
       }
       return this.possibleValues.every(
-        (value) => value.slotData && !isEmpty(value.slotData),
+        (value) => value.slotData && Object.keys(value.slotData).length > 0,
       );
     },
     selectedOption() {

packages/components/src/components/forms/Dropdown/__tests__/Dropdown.test.js

@@ -1,13 +1,15 @@
 /* eslint-disable max-lines */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { flushPromises, mount } from "@vue/test-utils";
-import { cloneDeep, isUndefined } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
+import clone from "rfdc";
 
 import DropdownIcon from "@knime/styles/img/icons/arrow-dropdown.svg";
 
 import FunctionButton from "../../../Buttons/FunctionButton.vue";
 import Dropdown from "../Dropdown.vue";
 
+const cloneDeep = clone();
+
 vi.useFakeTimers();
 
 const POSSIBLE_VALUES_MOCK = [
@@ -134,7 +136,7 @@ const doMount = ({
     modelValue,
     placeholder,
     name,
-    isValid: isUndefined(isValid) ? true : isValid,
+    isValid: isValid === undefined ? true : isValid,
     useGroupLabels,
   };
   const wrapper = mount(Dropdown, {

packages/components/src/components/forms/SortList/SortList.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
-import { indexOf, keyBy, partition } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
 
 import ArrowDownIcon from "@knime/styles/img/icons/arrow-down.svg";
 import ArrowDownloadIcon from "@knime/styles/img/icons/arrow-download.svg";
@@ -25,7 +24,9 @@ const emit = defineEmits<{
   "update:modelValue": [string[]];
 }>();
 
-const possibleValuesMap = computed(() => keyBy(props.possibleValues, "id"));
+const possibleValuesMap = computed(() =>
+  Object.fromEntries(props.possibleValues.map((item) => [item.id, item])),
+);
 
 const possibleValues = computed(() =>
   props.modelValue.map(
@@ -62,19 +63,26 @@ const withIndex = <T, V>(fn: (item: T, index: number) => V) => {
 const partitionByIndices = <T,>(
   array: T[],
   indexPredicate: (index: number) => boolean,
-) =>
-  partition(
-    array,
-    withIndex((_item, i) => indexPredicate(i)),
-  );
+) => {
+  const truthy: T[] = [];
+  const falsy: T[] = [];
+  array.forEach(withIndex((item, i) => {
+    if (indexPredicate(i)) {
+      truthy.push(item);
+    } else {
+      falsy.push(item);
+    }
+  }));
+  return [truthy, falsy];
+};
 
 const listBox = ref<null | typeof MultiselectListBox>(null);
 
 const move =
   (upOrDown: "up" | "down") =>
   ({ to }: { to?: number } = {}) => {
     const positions = selected.value
-      .map((item) => indexOf(props.modelValue, item))
+      .map((item) => props.modelValue.indexOf(item))
       .sort((a, b) => a - b);
     const minPos =
       (upOrDown === "up" ? to : null) ?? Math.max(positions[0] - 1, 0); // one up

packages/hub-features/package.json

@@ -40,8 +40,9 @@
     "@vueuse/components": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/shared": "catalog:",
-    "lodash-es": "catalog:",
+    "fast-deep-equal": "^3.1.3",
     "ofetch": "^1.4.1",
+    "rfdc": "^1.4.1",
     "typescript": "catalog:"
   },
   "peerDependencies": {