Backport JS dependency updates (#4189)

2024-12-24 10:07:21 +02:00 · 2024-10-05 18:01:46 +02:00 · 2024-10-05 18:01:46 +02:00 · b1e5103ee5
commit b1e5103ee5
parent 1b1bf27951
20 changed files with 3355 additions and 3484 deletions
--- a/docs/package.json
+++ b/docs/package.json
@ -14,19 +14,19 @@
    "write-heading-ids": "docusaurus write-heading-ids"
  },
  "dependencies": {
-    "@docusaurus/core": "^3.1.0",
-    "@docusaurus/plugin-content-blog": "^3.1.0",
-    "@docusaurus/preset-classic": "^3.1.0",
-    "@easyops-cn/docusaurus-search-local": "^0.44.0",
-    "@mdx-js/react": "^3.0.0",
+    "@docusaurus/core": "^3.5.2",
+    "@docusaurus/plugin-content-blog": "^3.5.2",
+    "@docusaurus/preset-classic": "^3.5.2",
+    "@easyops-cn/docusaurus-search-local": "^0.44.5",
+    "@mdx-js/react": "^3.0.1",
    "@svgr/webpack": "^8.1.0",
-    "clsx": "^2.1.0",
-    "esbuild-loader": "^4.1.0",
+    "clsx": "^2.1.1",
+    "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",
-    "redocusaurus": "^2.0.2",
+    "react-dom": "^18.3.1",
+    "redocusaurus": "^2.1.2",
    "url-loader": "^4.1.1"
  },
  "browserslist": {
@ -42,18 +42,20 @@
    ]
  },
  "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.1.0",
-    "@docusaurus/tsconfig": "3.4.0",
-    "@docusaurus/types": "^3.1.0",
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.67",
+    "@docusaurus/module-type-aliases": "^3.5.2",
+    "@docusaurus/tsconfig": "3.5.2",
+    "@docusaurus/types": "^3.5.2",
+    "@types/node": "^20.16.10",
+    "@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"
    }
  }
 }
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
--- a/web/eslint.config.js
+++ b/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,
-
-  // TypeScript
-  //...tseslint.configs.recommended,
-  //...tseslint.configs.recommendedTypeChecked,
-  //...tseslint.configs.strictTypeChecked,
-  //...tseslint.configs.stylisticTypeChecked,
+  eslintPromise.configs['flat/recommended'],
+  ...eslintPluginVueScopedCSS.configs['flat/recommended'],
+  ...vueI18n.configs['flat/recommended'],

  {
    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: [
--- a/web/package.json
+++ b/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",
-    "simple-icons": "^12.3.0",
-    "vue": "^3.4.27",
+    "semver": "^7.6.3",
+    "simple-icons": "^13.5.0",
+    "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",
-    "@eslint/js": "^9.4.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+    "@antfu/eslint-config": "^3.3.2",
+    "@eslint/js": "^9.9.0",
+    "@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/node": "^20.14.2",
+    "@types/lodash": "^4.17.7",
+    "@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",
-    "@vue/compiler-sfc": "^3.4.27",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vue/compiler-sfc": "^3.4.38",
    "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.4.0",
-    "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-vue-scoped-css": "^2.8.0",
-    "jsdom": "^24.1.0",
-    "prettier": "^3.3.0",
-    "replace-in-file": "^8.0.0",
+    "eslint": "^9.9.0",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-vue-scoped-css": "^2.8.1",
+    "jsdom": "^25.0.0",
+    "prettier": "^3.3.3",
+    "replace-in-file": "^8.1.0",
    "tinycolor2": "^1.6.0",
-    "typescript": "5.5.3",
-    "typescript-eslint": "^7.12.0",
-    "vite": "^5.2.12",
+    "typescript": "5.5.4",
+    "vite": "^5.4.1",
    "vite-plugin-prismjs": "^0.0.11",
    "vite-plugin-windicss": "^1.9.3",
    "vite-svg-loader": "^5.1.0",
-    "vitest": "^2.0.0",
-    "vue-tsc": "^2.0.19",
+    "vitest": "^2.0.5",
+    "vue-tsc": "^2.0.29",
    "windicss": "^3.5.6"
  },
  "pnpm": {
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
--- a/web/src/App.vue
+++ b/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' });
--- a/web/src/components/atomic/SyntaxHighlight.ts
+++ b/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({
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/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;
--- a/web/src/compositions/useDate.ts
+++ b/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,
--- a/web/src/compositions/useInjectProvide.ts
+++ b/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';

--- a/web/src/compositions/usePaginate.test.ts
+++ b/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);
--- a/web/src/compositions/usePipelineFeed.ts
+++ b/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');

--- a/web/src/lib/api/client.ts
+++ b/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);
    };

--- a/web/src/lib/api/index.ts
+++ b/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, {
--- a/web/src/main.ts
+++ b/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);

--- a/web/src/router.ts
+++ b/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,
  },

--- a/web/src/views/org/OrgWrapper.vue
+++ b/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>();
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@ -1,7 +1,7 @@
 <template>
  <Scaffold
-    v-if="repo && repoPermissions && $route.meta.repoHeader"
-    v-model:activeTab="activeTab"
+    v-if="repo && repoPermissions && route.meta.repoHeader"
+    v-model:active-tab="activeTab"
    enable-tabs
    disable-tab-url-hash-mode
  >
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/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"
--- a/web/vite.config.ts
+++ b/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;