From c42c9315f47c24a28f6fff552b57b6f12e473308 Mon Sep 17 00:00:00 2001 From: Christian Byrne Date: Tue, 12 Aug 2025 12:22:09 -0700 Subject: [PATCH] [refactor] Replace lodash with es-toolkit (#4935) --- .cursorrules | 2 +- .github/copilot-instructions.md | 2 +- browser_tests/fixtures/utils/taskHistory.ts | 6 ++++-- package-lock.json | 21 +++++++++++-------- package.json | 3 +-- src/CLAUDE.md | 2 +- src/components/actionbar/ComfyActionbar.vue | 2 +- src/components/common/SearchBox.vue | 2 +- src/components/common/VirtualGrid.vue | 2 +- .../dialog/content/error/ReportIssuePanel.vue | 4 ++-- .../content/manager/ManagerDialogContent.vue | 2 +- .../manager/button/PackEnableToggle.test.ts | 2 +- .../manager/button/PackEnableToggle.vue | 2 +- .../registrySearchBar/RegistrySearchBar.vue | 2 +- src/components/node/NodePreview.vue | 2 +- .../bottomPanelTabs/useTerminal.ts | 2 +- .../element/useOverflowObserver.ts | 2 +- src/composables/node/useNodeBadge.ts | 2 +- src/composables/nodePack/useMissingNodes.ts | 2 +- src/composables/useRegistrySearch.ts | 2 +- src/composables/widgets/useFloatWidget.ts | 2 +- src/extensions/core/maskeditor.ts | 4 ++-- src/lib/litegraph/src/CurveEditor.ts | 2 +- src/lib/litegraph/src/LGraph.ts | 2 +- src/lib/litegraph/src/LGraphCanvas.ts | 2 +- .../src/infrastructure/ConstrainedSize.ts | 2 +- .../litegraph/src/subgraph/SubgraphOutput.ts | 2 +- src/lib/litegraph/src/widgets/ComboWidget.ts | 2 +- src/lib/litegraph/src/widgets/KnobWidget.ts | 2 +- src/lib/litegraph/src/widgets/SliderWidget.ts | 2 +- src/lib/litegraph/test/litegraph.test.ts | 2 +- src/scripts/app.ts | 2 +- src/scripts/changeTracker.ts | 2 +- src/scripts/domWidget.ts | 2 +- src/scripts/fluxKontextEditNode.ts | 2 +- src/services/litegraphService.ts | 2 +- .../providers/algoliaSearchProvider.ts | 2 +- src/stores/comfyRegistryStore.ts | 2 +- src/stores/dialogStore.ts | 2 +- src/stores/keybindingStore.ts | 2 +- src/stores/nodeBookmarkStore.ts | 2 +- src/stores/nodeDefStore.ts | 2 +- src/stores/queueStore.ts | 2 +- src/stores/settingStore.ts | 2 +- src/stores/workflowStore.ts | 2 +- src/stores/workflowTemplatesStore.ts | 2 +- src/utils/colorUtil.ts | 2 +- src/utils/litegraphUtil.ts | 2 +- src/utils/migration/migrateReroute.ts | 2 +- src/utils/nodeDefUtil.ts | 2 +- tests-ui/tests/colorUtil.test.ts | 2 +- tests-ui/unit-testing.md | 10 ++++----- 52 files changed, 72 insertions(+), 68 deletions(-) diff --git a/.cursorrules b/.cursorrules index 2dd4862b8..6f43623a3 100644 --- a/.cursorrules +++ b/.cursorrules @@ -49,7 +49,7 @@ DO NOT use deprecated PrimeVue components. Use these replacements instead: ## Development Guidelines 1. Leverage VueUse functions for performance-enhancing styles -2. Use lodash for utility functions +2. Use es-toolkit for utility functions 3. Use TypeScript for type safety 4. Implement proper props and emits definitions 5. Utilize Vue 3's Teleport component when needed diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 9598b1300..551b03721 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -18,7 +18,7 @@ Use Tailwind CSS for styling Leverage VueUse functions for performance-enhancing styles -Use lodash for utility functions +Use es-toolkit for utility functions Use TypeScript for type safety diff --git a/browser_tests/fixtures/utils/taskHistory.ts b/browser_tests/fixtures/utils/taskHistory.ts index 93d5b9b07..2c42c8492 100644 --- a/browser_tests/fixtures/utils/taskHistory.ts +++ b/browser_tests/fixtures/utils/taskHistory.ts @@ -1,5 +1,5 @@ +import _ from 'es-toolkit/compat' import fs from 'fs' -import _ from 'lodash' import path from 'path' import type { Request, Route } from 'playwright' import { v4 as uuidv4 } from 'uuid' @@ -75,7 +75,9 @@ export default class TaskHistory { private async handleGetView(route: Route) { const fileName = getFilenameParam(route.request()) - if (!this.outputContentTypes.has(fileName)) route.continue() + if (!this.outputContentTypes.has(fileName)) { + return route.continue() + } const asset = this.loadAsset(fileName) return route.fulfill({ diff --git a/package-lock.json b/package-lock.json index 323dd926d..0ba6681f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,12 +30,12 @@ "axios": "^1.8.2", "dompurify": "^3.2.5", "dotenv": "^16.4.5", + "es-toolkit": "^1.39.9", "extendable-media-recorder": "^9.2.27", "extendable-media-recorder-wav-encoder": "^7.0.129", "firebase": "^11.6.0", "fuse.js": "^7.0.0", "jsondiffpatch": "^0.6.0", - "lodash": "^4.17.21", "loglevel": "^1.9.2", "marked": "^15.0.11", "pinia": "^2.1.7", @@ -62,7 +62,6 @@ "@trivago/prettier-plugin-sort-imports": "^5.2.0", "@types/dompurify": "^3.0.5", "@types/fs-extra": "^11.0.4", - "@types/lodash": "^4.17.6", "@types/node": "^20.14.8", "@types/semver": "^7.7.0", "@types/three": "^0.169.0", @@ -4887,12 +4886,6 @@ "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", "license": "MIT" }, - "node_modules/@types/lodash": { - "version": "4.17.6", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.6.tgz", - "integrity": "sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA==", - "dev": true - }, "node_modules/@types/markdown-it": { "version": "14.1.2", "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", @@ -7998,6 +7991,15 @@ "node": ">= 0.4" } }, + "node_modules/es-toolkit": { + "version": "1.39.9", + "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.39.9.tgz", + "integrity": "sha512-9OtbkZmTA2Qc9groyA1PUNeb6knVTkvB2RSdr/LcJXDL8IdEakaxwXLHXa7VX/Wj0GmdMJPR3WhnPGhiP3E+qg==", + "workspaces": [ + "docs", + "benchmarks" + ] + }, "node_modules/esbuild": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", @@ -11450,7 +11452,8 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true }, "node_modules/lodash-es": { "version": "4.17.21", diff --git a/package.json b/package.json index 968daf2d0..794af832d 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "@trivago/prettier-plugin-sort-imports": "^5.2.0", "@types/dompurify": "^3.0.5", "@types/fs-extra": "^11.0.4", - "@types/lodash": "^4.17.6", "@types/node": "^20.14.8", "@types/semver": "^7.7.0", "@types/three": "^0.169.0", @@ -99,12 +98,12 @@ "axios": "^1.8.2", "dompurify": "^3.2.5", "dotenv": "^16.4.5", + "es-toolkit": "^1.39.9", "extendable-media-recorder": "^9.2.27", "extendable-media-recorder-wav-encoder": "^7.0.129", "firebase": "^11.6.0", "fuse.js": "^7.0.0", "jsondiffpatch": "^0.6.0", - "lodash": "^4.17.21", "loglevel": "^1.9.2", "marked": "^15.0.11", "pinia": "^2.1.7", diff --git a/src/CLAUDE.md b/src/CLAUDE.md index a4b273c7b..8a651b3c1 100644 --- a/src/CLAUDE.md +++ b/src/CLAUDE.md @@ -51,7 +51,7 @@ const template = await fetch('/templates/default.json') ## General Guidelines -- Use lodash for utility functions +- Use es-toolkit for utility functions - Implement proper TypeScript types - Follow Vue 3 composition API style guide - Use vue-i18n for ALL user-facing strings in `src/locales/en/main.json` diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue index be113867a..4389fcf59 100644 --- a/src/components/actionbar/ComfyActionbar.vue +++ b/src/components/actionbar/ComfyActionbar.vue @@ -20,7 +20,7 @@ import { useLocalStorage, watchDebounced } from '@vueuse/core' -import { clamp } from 'lodash' +import { clamp } from 'es-toolkit/compat' import Panel from 'primevue/panel' import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue' diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue index c2a7e7482..de9b64d19 100644 --- a/src/components/common/SearchBox.vue +++ b/src/components/common/SearchBox.vue @@ -42,7 +42,7 @@