From de4f9c21eb0dafef609da5d569748a1253301611 Mon Sep 17 00:00:00 2001
From: 6543 <6543@obermui.de>
Date: Sat, 4 Apr 2026 14:20:16 +0200
Subject: [PATCH] WebUI: remove "lodash" dep (#6369)

make our webui smaler by 0.1Mb ... and remove dep that is haunted by security issues and almost replaced by modern browser APIs.

https://developer.mozilla.org/de/docs/Web/API/Window/structuredClone#browser-kompatibilit%C3%A4t
---
 web/package.json                                 |  2 --
 web/pnpm-lock.yaml                               | 11 -----------
 web/src/components/agent/AgentManager.vue        |  3 +--
 web/src/components/repo/pipeline/PipelineLog.vue |  2 +-
 web/src/lib/utils/index.ts                       |  7 +++++++
 web/src/views/admin/AdminRegistries.vue          |  5 ++---
 web/src/views/admin/AdminSecrets.vue             |  5 ++---
 web/src/views/admin/AdminUsers.vue               |  5 ++---
 web/src/views/org/settings/OrgRegistries.vue     |  5 ++---
 web/src/views/org/settings/OrgSecrets.vue        |  5 ++---
 web/src/views/repo/settings/Registries.vue       |  5 ++---
 web/src/views/repo/settings/Secrets.vue          |  5 ++---
 web/src/views/user/UserRegistries.vue            |  5 ++---
 web/src/views/user/UserSecrets.vue               |  5 ++---
 14 files changed, 27 insertions(+), 43 deletions(-)
 create mode 100644 web/src/lib/utils/index.ts

diff --git a/web/package.json b/web/package.json
index 5560b7a61..5bbca45c1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -25,7 +25,6 @@
     "dompurify": "^3.3.2",
     "fuse.js": "^7.1.0",
     "js-base64": "^3.7.7",
-    "lodash": "^4.17.21",
     "marked": "^17.0.0",
     "node-emoji": "^2.2.0",
     "pinia": "^3.0.3",
@@ -45,7 +44,6 @@
     "@intlify/unplugin-vue-i18n": "^11.0.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "4.2.2",
-    "@types/lodash": "^4.17.20",
     "@types/node": "^24.0.0",
     "@types/prismjs": "^1.26.5",
     "@types/semver": "^7.7.0",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index af7bea7fb..aa69a0b2d 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -32,9 +32,6 @@ importers:
       js-base64:
         specifier: ^3.7.7
         version: 3.7.8
-      lodash:
-        specifier: ^4.17.21
-        version: 4.18.1
       marked:
         specifier: ^17.0.0
         version: 17.0.5
@@ -87,9 +84,6 @@ importers:
       '@tailwindcss/vite':
         specifier: 4.2.2
         version: 4.2.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))
-      '@types/lodash':
-        specifier: ^4.17.20
-        version: 4.17.24
       '@types/node':
         specifier: ^24.0.0
         version: 24.12.2
@@ -1048,9 +1042,6 @@ packages:
   '@types/katex@0.16.8':
     resolution: {integrity: sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==}
 
-  '@types/lodash@4.17.24':
-    resolution: {integrity: sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==}
-
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -4035,8 +4026,6 @@ snapshots:
 
   '@types/katex@0.16.8': {}
 
-  '@types/lodash@4.17.24': {}
-
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
diff --git a/web/src/components/agent/AgentManager.vue b/web/src/components/agent/AgentManager.vue
index 08c90c1c7..a6b77f138 100644
--- a/web/src/components/agent/AgentManager.vue
+++ b/web/src/components/agent/AgentManager.vue
@@ -31,7 +31,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -92,7 +91,7 @@ const { doSubmit: deleteAgent, isLoading: isDeleting } = useAsyncAction(async (_
 });
 
 function editAgent(agent: Agent) {
-  selectedAgent.value = cloneDeep(agent);
+  selectedAgent.value = structuredClone(agent);
 }
 
 function showAddAgent() {
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 8a23b137a..c371e800e 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -126,7 +126,6 @@ import '~/style/console.css';
 import { useStorage } from '@vueuse/core';
 import { AnsiUp } from 'ansi_up';
 import { decode } from 'js-base64';
-import { debounce } from 'lodash';
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -138,6 +137,7 @@ import useConfig from '~/compositions/useConfig';
 import { requiredInject } from '~/compositions/useInjectProvide';
 import useNotifications from '~/compositions/useNotifications';
 import type { Pipeline, PipelineStep, PipelineWorkflow } from '~/lib/api/types';
+import { debounce } from '~/lib/utils';
 
 interface LogLine {
   index: number;
diff --git a/web/src/lib/utils/index.ts b/web/src/lib/utils/index.ts
new file mode 100644
index 000000000..cc4c4f4ad
--- /dev/null
+++ b/web/src/lib/utils/index.ts
@@ -0,0 +1,7 @@
+export function debounce<T extends unknown[]>(fn: (...args: T) => void, delay: number): (...args: T) => void {
+  let timer: ReturnType<typeof setTimeout>;
+  return (...args: T) => {
+    clearTimeout(timer);
+    timer = setTimeout(fn, delay, ...args);
+  };
+}
diff --git a/web/src/views/admin/AdminRegistries.vue b/web/src/views/admin/AdminRegistries.vue
index dbc732236..5a682c967 100644
--- a/web/src/views/admin/AdminRegistries.vue
+++ b/web/src/views/admin/AdminRegistries.vue
@@ -38,7 +38,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -98,11 +97,11 @@ const { doSubmit: deleteRegistry, isLoading: isDeleting } = useAsyncAction(async
 });
 
 function editRegistry(registry: Registry) {
-  selectedRegistry.value = cloneDeep(registry);
+  selectedRegistry.value = structuredClone(registry);
 }
 
 function showAddRegistry() {
-  selectedRegistry.value = cloneDeep(emptyRegistry);
+  selectedRegistry.value = structuredClone(emptyRegistry);
 }
 
 useWPTitle(computed(() => [i18n.t('registries.registries'), i18n.t('admin.settings.settings')]));
diff --git a/web/src/views/admin/AdminSecrets.vue b/web/src/views/admin/AdminSecrets.vue
index 8d41e2834..dc933e63e 100644
--- a/web/src/views/admin/AdminSecrets.vue
+++ b/web/src/views/admin/AdminSecrets.vue
@@ -33,7 +33,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -95,11 +94,11 @@ const { doSubmit: deleteSecret, isLoading: isDeleting } = useAsyncAction(async (
 });
 
 function editSecret(secret: Secret) {
-  selectedSecret.value = cloneDeep(secret);
+  selectedSecret.value = structuredClone(secret);
 }
 
 function showAddSecret() {
-  selectedSecret.value = cloneDeep(emptySecret);
+  selectedSecret.value = structuredClone(emptySecret);
 }
 
 useWPTitle(computed(() => [i18n.t('secrets.secrets'), i18n.t('admin.settings.settings')]));
diff --git a/web/src/views/admin/AdminUsers.vue b/web/src/views/admin/AdminUsers.vue
index 0607c4e39..57cb1308f 100644
--- a/web/src/views/admin/AdminUsers.vue
+++ b/web/src/views/admin/AdminUsers.vue
@@ -86,7 +86,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -153,11 +152,11 @@ const { doSubmit: deleteUser, isLoading: isDeleting } = useAsyncAction(async (_u
 });
 
 function editUser(user: User) {
-  selectedUser.value = cloneDeep(user);
+  selectedUser.value = structuredClone(user);
 }
 
 function showAddUser() {
-  selectedUser.value = cloneDeep({ login: '' });
+  selectedUser.value = { login: '' };
 }
 
 useWPTitle(computed(() => [t('admin.settings.users.users'), t('admin.settings.settings')]));
diff --git a/web/src/views/org/settings/OrgRegistries.vue b/web/src/views/org/settings/OrgRegistries.vue
index 424b0ff0a..17ce92bc7 100644
--- a/web/src/views/org/settings/OrgRegistries.vue
+++ b/web/src/views/org/settings/OrgRegistries.vue
@@ -34,7 +34,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -131,11 +130,11 @@ const { doSubmit: deleteRegistry, isLoading: isDeleting } = useAsyncAction(async
 });
 
 function editRegistry(registry: Registry) {
-  selectedRegistry.value = cloneDeep(registry);
+  selectedRegistry.value = structuredClone(registry);
 }
 
 function showAddRegistry() {
-  selectedRegistry.value = cloneDeep(emptyRegistry);
+  selectedRegistry.value = structuredClone(emptyRegistry);
 }
 
 useWPTitle(computed(() => [i18n.t('registries.registries'), org.value.name]));
diff --git a/web/src/views/org/settings/OrgSecrets.vue b/web/src/views/org/settings/OrgSecrets.vue
index 59fff130a..e4c21e9b0 100644
--- a/web/src/views/org/settings/OrgSecrets.vue
+++ b/web/src/views/org/settings/OrgSecrets.vue
@@ -25,7 +25,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -88,11 +87,11 @@ const { doSubmit: deleteSecret, isLoading: isDeleting } = useAsyncAction(async (
 });
 
 function editSecret(secret: Secret) {
-  selectedSecret.value = cloneDeep(secret);
+  selectedSecret.value = structuredClone(secret);
 }
 
 function showAddSecret() {
-  selectedSecret.value = cloneDeep(emptySecret);
+  selectedSecret.value = structuredClone(emptySecret);
 }
 
 useWPTitle(computed(() => [i18n.t('secrets.secrets'), org.value.name]));
diff --git a/web/src/views/repo/settings/Registries.vue b/web/src/views/repo/settings/Registries.vue
index 270137447..51618b2fd 100644
--- a/web/src/views/repo/settings/Registries.vue
+++ b/web/src/views/repo/settings/Registries.vue
@@ -30,7 +30,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -133,11 +132,11 @@ const { doSubmit: deleteRegistry, isLoading: isDeleting } = useAsyncAction(async
 });
 
 function editRegistry(registry: Registry) {
-  selectedRegistry.value = cloneDeep(registry);
+  selectedRegistry.value = structuredClone(registry);
 }
 
 function showAddRegistry() {
-  selectedRegistry.value = cloneDeep(emptyRegistry);
+  selectedRegistry.value = structuredClone(emptyRegistry);
 }
 
 useWPTitle(computed(() => [i18n.t('registries.registries'), repo.value.full_name]));
diff --git a/web/src/views/repo/settings/Secrets.vue b/web/src/views/repo/settings/Secrets.vue
index 104daca52..a73936bb8 100644
--- a/web/src/views/repo/settings/Secrets.vue
+++ b/web/src/views/repo/settings/Secrets.vue
@@ -25,7 +25,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -129,11 +128,11 @@ const { doSubmit: deleteSecret, isLoading: isDeleting } = useAsyncAction(async (
 });
 
 function editSecret(secret: Secret) {
-  selectedSecret.value = cloneDeep(secret);
+  selectedSecret.value = structuredClone(secret);
 }
 
 function showAddSecret() {
-  selectedSecret.value = cloneDeep(emptySecret);
+  selectedSecret.value = structuredClone(emptySecret);
 }
 
 useWPTitle(computed(() => [i18n.t('secrets.secrets'), repo.value.full_name]));
diff --git a/web/src/views/user/UserRegistries.vue b/web/src/views/user/UserRegistries.vue
index e565fa29d..df91b4ee6 100644
--- a/web/src/views/user/UserRegistries.vue
+++ b/web/src/views/user/UserRegistries.vue
@@ -34,7 +34,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -102,11 +101,11 @@ const { doSubmit: deleteRegistry, isLoading: isDeleting } = useAsyncAction(async
 });
 
 function editRegistry(registry: Registry) {
-  selectedRegistry.value = cloneDeep(registry);
+  selectedRegistry.value = structuredClone(registry);
 }
 
 function showAddRegistry() {
-  selectedRegistry.value = cloneDeep(emptyRegistry);
+  selectedRegistry.value = structuredClone(emptyRegistry);
 }
 
 useWPTitle(computed(() => [i18n.t('registries.registries'), i18n.t('user.settings.settings')]));
diff --git a/web/src/views/user/UserSecrets.vue b/web/src/views/user/UserSecrets.vue
index ee44b2dfc..5b2c36ac2 100644
--- a/web/src/views/user/UserSecrets.vue
+++ b/web/src/views/user/UserSecrets.vue
@@ -29,7 +29,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -99,11 +98,11 @@ const { doSubmit: deleteSecret, isLoading: isDeleting } = useAsyncAction(async (
 });
 
 function editSecret(secret: Secret) {
-  selectedSecret.value = cloneDeep(secret);
+  selectedSecret.value = structuredClone(secret);
 }
 
 function showAddSecret() {
-  selectedSecret.value = cloneDeep(emptySecret);
+  selectedSecret.value = structuredClone(emptySecret);
 }
 
 useWPTitle(computed(() => [i18n.t('secrets.secrets'), i18n.t('user.settings.settings')]));