Backport JS dependency updates (#4189)

docs/package.json

@@ -14,19 +14,19 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.1.0",
+    "@docusaurus/core": "^3.5.2",
-    "@docusaurus/plugin-content-blog": "^3.1.0",
+    "@docusaurus/plugin-content-blog": "^3.5.2",
-    "@docusaurus/preset-classic": "^3.1.0",
+    "@docusaurus/preset-classic": "^3.5.2",
-    "@easyops-cn/docusaurus-search-local": "^0.44.0",
+    "@easyops-cn/docusaurus-search-local": "^0.44.5",
-    "@mdx-js/react": "^3.0.0",
+    "@mdx-js/react": "^3.0.1",
     "@svgr/webpack": "^8.1.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
-    "esbuild-loader": "^4.1.0",
+    "esbuild-loader": "^4.2.2",
     "file-loader": "^6.2.0",
-    "prism-react-renderer": "^2.3.1",
+    "prism-react-renderer": "^2.4.0",
     "react": "^18.3.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
-    "redocusaurus": "^2.0.2",
+    "redocusaurus": "^2.1.2",
     "url-loader": "^4.1.1"
   },
   "browserslist": {
@@ -42,18 +42,20 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.1.0",
+    "@docusaurus/module-type-aliases": "^3.5.2",
-    "@docusaurus/tsconfig": "3.4.0",
+    "@docusaurus/tsconfig": "3.5.2",
-    "@docusaurus/types": "^3.1.0",
+    "@docusaurus/types": "^3.5.2",
-    "@types/node": "^20.11.30",
+    "@types/node": "^20.16.10",
-    "@types/react": "^18.2.67",
+    "@types/react": "^18.3.11",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
-    "typescript": "^5.4.3"
+    "typescript": "^5.6.2"
   },
   "pnpm": {
     "overrides": {
-      "got": "^14.0.0"
+      "got": "^14.0.0",
+      "path-to-regexp": "^3.3.0",
+      "cookie": "^0.7.0"
     }
   }
 }

web/eslint.config.js

@@ -4,6 +4,7 @@
 import antfu from '@antfu/eslint-config';
 import js from '@eslint/js';
 import vueI18n from '@intlify/eslint-plugin-vue-i18n';
+import eslintPromise from 'eslint-plugin-promise';
 import eslintPluginVueScopedCSS from 'eslint-plugin-vue-scoped-css';
 
 export default antfu(
@@ -20,23 +21,54 @@ export default antfu(
   },
 
   js.configs.recommended,
-  // eslintPromise.configs.recommended,
+  eslintPromise.configs['flat/recommended'],
-
+  ...eslintPluginVueScopedCSS.configs['flat/recommended'],
-  // TypeScript
+  ...vueI18n.configs['flat/recommended'],
-  //...tseslint.configs.recommended,
-  //...tseslint.configs.recommendedTypeChecked,
-  //...tseslint.configs.strictTypeChecked,
-  //...tseslint.configs.stylisticTypeChecked,
 
   {
     rules: {
       'import/order': 'off',
       'sort-imports': 'off',
+      'perfectionist/sort-imports': 'off',
+      'perfectionist/sort-named-imports': 'off',
+      'promise/prefer-await-to-callbacks': 'error',
+
+      // Vue I18n
+      '@intlify/vue-i18n/no-raw-text': [
+        'error',
+        {
+          attributes: {
+            '/.+/': ['label'],
+          },
+        },
+      ],
+      '@intlify/vue-i18n/key-format-style': ['error', 'snake_case'],
+      '@intlify/vue-i18n/no-duplicate-keys-in-locale': 'error',
+      '@intlify/vue-i18n/no-dynamic-keys': 'error',
+      '@intlify/vue-i18n/no-deprecated-i18n-component': 'error',
+      '@intlify/vue-i18n/no-deprecated-tc': 'error',
+      '@intlify/vue-i18n/no-i18n-t-path-prop': 'error',
+      '@intlify/vue-i18n/no-missing-keys-in-other-locales': 'off',
+      '@intlify/vue-i18n/valid-message-syntax': 'error',
+      '@intlify/vue-i18n/no-missing-keys': 'error',
+      '@intlify/vue-i18n/no-unknown-locale': 'error',
+      '@intlify/vue-i18n/no-unused-keys': ['error', { extensions: ['.ts', '.vue'] }],
+      '@intlify/vue-i18n/prefer-sfc-lang-attr': 'error',
+      '@intlify/vue-i18n/no-html-messages': 'error',
+      '@intlify/vue-i18n/prefer-linked-key-with-paren': 'error',
+      '@intlify/vue-i18n/sfc-locale-attr': 'error',
+    },
+    settings: {
+      // Vue I18n
+      'vue-i18n': {
+        localeDir: './src/assets/locales/en.json',
+        // Specify the version of `vue-i18n` you are using.
+        // If not specified, the message will be parsed twice.
+        messageSyntaxVersion: '^9.0.0',
+      },
     },
   },
 
-  ...eslintPluginVueScopedCSS.configs['flat/recommended'],
-
   // Vue
   {
     files: ['**/*.vue'],
@@ -64,44 +96,6 @@ export default antfu(
     },
   },
 
-  // Vue I18n
-  ...vueI18n.configs['flat/recommended'],
-  {
-    rules: {
-      '@intlify/vue-i18n/no-raw-text': [
-        'error',
-        {
-          attributes: {
-            '/.+/': ['label'],
-          },
-        },
-      ],
-      '@intlify/vue-i18n/key-format-style': ['error', 'snake_case'],
-      '@intlify/vue-i18n/no-duplicate-keys-in-locale': 'error',
-      '@intlify/vue-i18n/no-dynamic-keys': 'error',
-      '@intlify/vue-i18n/no-deprecated-i18n-component': 'error',
-      '@intlify/vue-i18n/no-deprecated-tc': 'error',
-      '@intlify/vue-i18n/no-i18n-t-path-prop': 'error',
-      '@intlify/vue-i18n/no-missing-keys-in-other-locales': 'off',
-      '@intlify/vue-i18n/valid-message-syntax': 'error',
-      '@intlify/vue-i18n/no-missing-keys': 'error',
-      '@intlify/vue-i18n/no-unknown-locale': 'error',
-      '@intlify/vue-i18n/no-unused-keys': ['error', { extensions: ['.ts', '.vue'] }],
-      '@intlify/vue-i18n/prefer-sfc-lang-attr': 'error',
-      '@intlify/vue-i18n/no-html-messages': 'error',
-      '@intlify/vue-i18n/prefer-linked-key-with-paren': 'error',
-      '@intlify/vue-i18n/sfc-locale-attr': 'error',
-    },
-    settings: {
-      'vue-i18n': {
-        localeDir: './src/assets/locales/en.json',
-        // Specify the version of `vue-i18n` you are using.
-        // If not specified, the message will be parsed twice.
-        messageSyntaxVersion: '^9.0.0',
-      },
-    },
-  },
-
   // Ignore list
   {
     ignores: [

web/package.json

@@ -18,53 +18,52 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@intlify/unplugin-vue-i18n": "^5.0.0",
     "@kyvg/vue3-notification": "^3.2.1",
     "@mdi/js": "^7.4.47",
-    "@vueuse/core": "^10.10.0",
+    "@vueuse/core": "^11.0.0",
     "ansi_up": "^6.0.2",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "fuse.js": "^7.0.0",
     "js-base64": "^3.7.7",
     "lodash": "^4.17.21",
     "node-emoji": "^2.1.3",
-    "pinia": "^2.1.7",
+    "pinia": "^2.2.1",
     "prismjs": "^1.29.0",
-    "semver": "^7.6.2",
+    "semver": "^7.6.3",
-    "simple-icons": "^12.3.0",
+    "simple-icons": "^13.5.0",
-    "vue": "^3.4.27",
+    "vue": "^3.4.38",
     "vue-i18n": "^9.13.1",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.20.0",
+    "@antfu/eslint-config": "^3.3.2",
-    "@eslint/js": "^9.4.0",
+    "@eslint/js": "^9.9.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@intlify/eslint-plugin-vue-i18n": "3.0.0",
     "@types/eslint__js": "^8.42.3",
-    "@types/lodash": "^4.17.4",
+    "@types/lodash": "^4.17.7",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.15",
     "@types/prismjs": "^1.26.4",
     "@types/semver": "^7.5.8",
     "@types/tinycolor2": "^1.4.6",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.2",
-    "@vue/compiler-sfc": "^3.4.27",
+    "@vue/compiler-sfc": "^3.4.38",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.4.0",
+    "eslint": "^9.9.0",
-    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-promise": "^7.1.0",
-    "eslint-plugin-vue-scoped-css": "^2.8.0",
+    "eslint-plugin-vue-scoped-css": "^2.8.1",
-    "jsdom": "^24.1.0",
+    "jsdom": "^25.0.0",
-    "prettier": "^3.3.0",
+    "prettier": "^3.3.3",
-    "replace-in-file": "^8.0.0",
+    "replace-in-file": "^8.1.0",
     "tinycolor2": "^1.6.0",
-    "typescript": "5.5.3",
+    "typescript": "5.5.4",
-    "typescript-eslint": "^7.12.0",
+    "vite": "^5.4.1",
-    "vite": "^5.2.12",
     "vite-plugin-prismjs": "^0.0.11",
     "vite-plugin-windicss": "^1.9.3",
     "vite-svg-loader": "^5.1.0",
-    "vitest": "^2.0.0",
+    "vitest": "^2.0.5",
-    "vue-tsc": "^2.0.19",
+    "vue-tsc": "^2.0.29",
     "windicss": "^3.5.6"
   },
   "pnpm": {

web/src/App.vue

@@ -31,7 +31,7 @@ const apiClient = useApiClient();
 const { notify } = useNotifications();
 const i18n = useI18n();
 
-// TODO reenable with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+// eslint-disable-next-line promise/prefer-await-to-callbacks
 apiClient.setErrorHandler((err) => {
   if (err.status === 404) {
     notify({ title: i18n.t('errors.not_found'), type: 'error' });

web/src/components/atomic/SyntaxHighlight.ts

@@ -1,8 +1,8 @@
-import '~/style/prism.css';
-
 import Prism from 'prismjs';
 import { computed, defineComponent, h, toRef, type VNode } from 'vue';
 
+import '~/style/prism.css';
+
 declare type Data = Record<string, unknown>;
 
 export default defineComponent({

web/src/components/repo/pipeline/PipelineLog.vue

@@ -106,8 +106,6 @@
 </template>
 
 <script lang="ts" setup>
-import '~/style/console.css';
-
 import { useStorage } from '@vueuse/core';
 import { AnsiUp } from 'ansi_up';
 import { decode } from 'js-base64';
@@ -123,6 +121,8 @@ import useNotifications from '~/compositions/useNotifications';
 import type { Pipeline, Repo, RepoPermissions } from '~/lib/api/types';
 import { findStep, isStepFinished, isStepRunning } from '~/utils/helpers';
 
+import '~/style/console.css';
+
 interface LogLine {
   index: number;
   number: number;

web/src/compositions/useDate.ts

@@ -12,19 +12,24 @@ dayjs.extend(advancedFormat);
 dayjs.extend(relativeTime);
 dayjs.extend(duration);
 
+function toLocaleString(date: Date) {
+  return dayjs(date).format(useI18n().t('time.template'));
+}
+
+function timeAgo(date: Date | string | number) {
+  return dayjs().to(dayjs(date));
+}
+
+function prettyDuration(durationMs: number) {
+  return dayjs.duration(durationMs).humanize();
+}
+
+function durationAsNumber(durationMs: number): string {
+  const dur = dayjs.duration(durationMs);
+  return dur.format(dur.hours() > 1 ? 'HH:mm:ss' : 'mm:ss');
+}
+
 export function useDate() {
-  function toLocaleString(date: Date) {
-    return dayjs(date).format(useI18n().t('time.template'));
-  }
-
-  function timeAgo(date: Date | string | number) {
-    return dayjs().to(dayjs(date));
-  }
-
-  function prettyDuration(durationMs: number) {
-    return dayjs.duration(durationMs).humanize();
-  }
-
   const addedLocales = ['en'];
 
   async function setDayjsLocale(locale: string) {
@@ -36,11 +41,6 @@ export function useDate() {
     }
   }
 
-  function durationAsNumber(durationMs: number): string {
-    const dur = dayjs.duration(durationMs);
-    return dur.format(dur.hours() > 1 ? 'HH:mm:ss' : 'mm:ss');
-  }
-
   return {
     toLocaleString,
     timeAgo,

web/src/compositions/useInjectProvide.ts

@@ -1,5 +1,5 @@
-import type { InjectionKey, Ref } from 'vue';
 import { inject as vueInject, provide as vueProvide } from 'vue';
+import type { InjectionKey, Ref } from 'vue';
 
 import type { Org, OrgPermissions, Repo } from '~/lib/api/types';
 

web/src/compositions/usePaginate.test.ts

@@ -18,11 +18,11 @@ async function waitForState<T>(ref: Ref<T>, expected: T): Promise<void> {
   });
 }
 
-// TODO enable again with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+// eslint-disable-next-line promise/prefer-await-to-callbacks
 export const mountComposition = (cb: () => void) => {
   const wrapper = shallowMount({
     setup() {
-      // TODO enable again with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+      // eslint-disable-next-line promise/prefer-await-to-callbacks
       cb();
       return {};
     },
@@ -48,6 +48,7 @@ describe('usePaginate', () => {
       usePaginationComposition = usePagination<{ name: string }>(
         async (page) => repoSecrets[page - 1],
         () => true,
+        { pageSize: 3 },
       );
     });
     await waitForState(usePaginationComposition.loading, true);
@@ -63,6 +64,7 @@ describe('usePaginate', () => {
       usePaginationComposition = usePagination<{ name: string }>(
         async (page) => repoSecrets[page - 1],
         () => true,
+        { pageSize: 3 },
       );
     });
     await waitForState(usePaginationComposition.loading, true);
@@ -86,7 +88,7 @@ describe('usePaginate', () => {
           return orgSecrets[page - 1];
         },
         () => true,
-        { each: ['repo', 'org'] },
+        { each: ['repo', 'org'], pageSize: 3 },
       );
     });
     await waitForState(usePaginationComposition.loading, true);
@@ -111,6 +113,7 @@ describe('usePaginate', () => {
       usePaginationComposition = usePagination<{ name: string }>(
         async (page) => repoSecrets[page - 1],
         () => true,
+        { pageSize: 3 },
       );
     });
     await waitForState(usePaginationComposition.loading, true);
@@ -132,6 +135,7 @@ describe('usePaginate', () => {
       usePaginationComposition = usePagination<{ name: string }>(
         async (page) => repoSecrets[page - 1],
         () => true,
+        { pageSize: 3 },
       );
     });
     await waitForState(usePaginationComposition.loading, true);

web/src/compositions/usePipelineFeed.ts

@@ -7,20 +7,20 @@ import useAuthentication from './useAuthentication';
 
 const userConfig = useUserConfig();
 
+function toggle() {
+  userConfig.setUserConfig('isPipelineFeedOpen', !userConfig.userConfig.value.isPipelineFeedOpen);
+}
+
+function close() {
+  userConfig.setUserConfig('isPipelineFeedOpen', false);
+}
+
 export default () => {
   const pipelineStore = usePipelineStore();
   const { isAuthenticated } = useAuthentication();
 
   const isOpen = computed(() => userConfig.userConfig.value.isPipelineFeedOpen && !!isAuthenticated);
 
-  function toggle() {
-    userConfig.setUserConfig('isPipelineFeedOpen', !userConfig.userConfig.value.isPipelineFeedOpen);
-  }
-
-  function close() {
-    userConfig.setUserConfig('isPipelineFeedOpen', false);
-  }
-
   const sortedPipelines = toRef(pipelineStore, 'pipelineFeed');
   const activePipelines = toRef(pipelineStore, 'activePipelines');
 

web/src/lib/api/client.ts

@@ -52,14 +52,19 @@ export default class ApiClient {
     });
 
     if (!res.ok) {
+      let message = res.statusText;
+      const resText = await res.text();
+      if (resText) {
+        message = `${res.statusText}: ${resText}`;
+      }
       const error: ApiError = {
         status: res.status,
-        message: res.statusText,
+        message,
       };
       if (this.onerror) {
         this.onerror(error);
       }
-      throw new Error(res.statusText);
+      throw new Error(message);
     }
 
     const contentType = res.headers.get('Content-Type');
@@ -96,7 +101,7 @@ export default class ApiClient {
     const events = new EventSource(_path);
     events.onmessage = (event) => {
       const data = JSON.parse(event.data as string) as T;
-      // TODO enable again with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+      // eslint-disable-next-line promise/prefer-await-to-callbacks
       callback(data);
     };
 

web/src/lib/api/index.ts

@@ -398,7 +398,7 @@ export default class WoodpeckerClient extends ApiClient {
     return this._post(`/api/repos/repair`);
   }
 
-  // TODO enable again with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+  // eslint-disable-next-line promise/prefer-await-to-callbacks
   on(callback: (data: { pipeline?: Pipeline; repo?: Repo }) => void): EventSource {
     return this._subscribe('/api/stream/events', callback, {
       reconnect: true,
@@ -409,7 +409,7 @@ export default class WoodpeckerClient extends ApiClient {
     repoId: number,
     pipeline: number,
     step: number,
-    // TODO enable again with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+    // eslint-disable-next-line promise/prefer-await-to-callbacks
     callback: (data: PipelineLog) => void,
   ): EventSource {
     return this._subscribe(`/api/stream/logs/${repoId}/${pipeline}/${step}`, callback, {

web/src/main.ts

@@ -1,7 +1,3 @@
-import 'windi.css';
-import '~/compositions/useFavicon';
-import '~/style.css';
-
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 
@@ -11,6 +7,10 @@ import { i18n } from '~/compositions/useI18n';
 import { notifications } from '~/compositions/useNotifications';
 import router from '~/router';
 
+import '~/compositions/useFavicon';
+import '~/style.css';
+import 'windi.css';
+
 // eslint-disable-next-line ts/no-unsafe-argument
 const app = createApp(App);
 

web/src/router.ts

@@ -107,7 +107,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         path: ':repoOwner/:repoName/:pathMatch(.*)*',
-        component: async () => import('~/views/repo/RepoDeprecatedRedirect.vue'),
+        component: (): Component => import('~/views/repo/RepoDeprecatedRedirect.vue'),
         props: true,
       },
     ],
@@ -161,7 +161,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: `${rootPath}/cli/auth`,
-    component: async () => import('~/views/cli/Auth.vue'),
+    component: (): Component => import('~/views/cli/Auth.vue'),
     meta: { authentication: 'required' },
   },
 
@@ -172,7 +172,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: `${rootPath}/:repoOwner/:repoName/:pathMatch(.*)*`,
-    component: async () => import('~/views/repo/RepoDeprecatedRedirect.vue'),
+    component: (): Component => import('~/views/repo/RepoDeprecatedRedirect.vue'),
     props: true,
   },
 

web/src/views/org/OrgWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <Scaffold v-if="org && orgPermissions && $route.meta.orgHeader">
+  <Scaffold v-if="org && orgPermissions && route.meta.orgHeader">
     <template #title>
       {{ org.name }}
     </template>
@@ -20,6 +20,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
 import IconButton from '~/components/atomic/IconButton.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
@@ -33,6 +34,7 @@ const props = defineProps<{
 
 const orgId = computed(() => Number.parseInt(props.orgId, 10));
 const apiClient = useApiClient();
+const route = useRoute();
 
 const org = ref<Org>();
 const orgPermissions = ref<OrgPermissions>();

web/src/views/repo/RepoWrapper.vue

@@ -1,7 +1,7 @@
 <template>
   <Scaffold
-    v-if="repo && repoPermissions && $route.meta.repoHeader"
+    v-if="repo && repoPermissions && route.meta.repoHeader"
-    v-model:activeTab="activeTab"
+    v-model:active-tab="activeTab"
     enable-tabs
     disable-tab-url-hash-mode
   >

web/src/views/repo/pipeline/PipelineWrapper.vue

@@ -1,7 +1,7 @@
 <template>
   <Scaffold
     v-if="pipeline && repo"
-    v-model:activeTab="activeTab"
+    v-model:active-tab="activeTab"
     enable-tabs
     disable-tab-url-hash-mode
     :go-back="goBack"

web/vite.config.ts

@@ -78,7 +78,7 @@ export default defineConfig({
         copyFile(
           `node_modules/dayjs/esm/locale/${langName}.js`,
           `src/assets/dayjsLocales/${name}.js`,
-          // TODO enable with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+          // eslint-disable-next-line promise/prefer-await-to-callbacks
           (err) => {
             if (err) {
               throw err;