update frontend lib : eslint + typescript - #1815

eslint.config.js

@@ -0,0 +1,24 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import pluginVue from "eslint-plugin-vue";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"],
+    plugins: { js },
+    extends: ["js/recommended"],
+    languageOptions: { globals: globals.browser },
+  },
+  {
+    files: ["**/*.js"],
+    languageOptions: { sourceType: "commonjs" },
+  },
+  tseslint.configs.recommended,
+  pluginVue.configs["flat/essential"],
+  {
+    files: ["**/*.vue"],
+    languageOptions: { parserOptions: { parser: tseslint.parser } },
+  },
+]);

package.json

@@ -6,7 +6,7 @@
     "dev": "vite",
     "preview": "vite preview",
     "build": "npm run build:assets && npm run build:pictures",
-    "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src",
+    "lint": "eslint --fix src --rule '@typescript-eslint/no-explicit-any: off' --rule '@typescript-eslint/no-unused-vars: off'",
     "format": "prettier . --write",
     "build:assets": "vite build",
     "build:pictures": "bash ./scripts/build/pictures.sh",
@@ -21,7 +21,7 @@
   },
   "lint-staged": {
     "**/*.{js,ts,vue}": [
-      "eslint --fix",
+      "eslint --fix --rule '@typescript-eslint/no-explicit-any: off' --rule '@typescript-eslint/no-unused-vars: off'",
       "prettier --write"
     ],
     "**/*.{ex,exs,eex,heex}": [
@@ -34,12 +34,12 @@
     "@apollo/client": "^3.13.8",
     "@framasoft/socket": "^1.0.0",
     "@framasoft/socket-apollo-link": "^1.0.0",
-    "@oruga-ui/oruga-next": "0.8.12",
-    "@oruga-ui/theme-oruga": "^0.2.0",
     "@fullcalendar/core": "^6.1.10",
     "@fullcalendar/daygrid": "^6.1.10",
     "@fullcalendar/interaction": "^6.1.10",
     "@fullcalendar/vue3": "^6.1.10",
+    "@oruga-ui/oruga-next": "0.8.12",
+    "@oruga-ui/theme-oruga": "^0.2.0",
     "@sentry/tracing": "^7.1",
     "@sentry/vue": "^7.1",
     "@tiptap/core": "^2.0.0-beta.41",
@@ -111,6 +111,7 @@
     "zhyswan-vuedraggable": "^4.1.3"
   },
   "devDependencies": {
+    "@eslint/js": "^9.38.0",
     "@histoire/plugin-vue": "^0.17.1",
     "@playwright/test": "^1.25.1",
     "@rushstack/eslint-patch": "^1.1.4",
@@ -127,15 +128,16 @@
     "@vitejs/plugin-vue": "^5.0.0",
     "@vitest/coverage-v8": "^1.2.2",
     "@vitest/ui": "^1.2.2",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.0.2",
-    "eslint": "^8.21.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^9.38.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-vue": "^9.3.0",
+    "eslint-plugin-vue": "^10.5.1",
     "flush-promises": "^1.0.2",
+    "globals": "^16.4.0",
     "histoire": "^0.17.0",
     "husky": "^9.0.10",
     "jsdom": "^24.0.0",
@@ -145,7 +147,8 @@
     "prettier-eslint": "^16.1.2",
     "rollup-plugin-visualizer": "^5.7.1",
     "sass": "^1.34.1",
-    "typescript": "~5.3.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.2",
     "vite": "^5.0.12",
     "vite-plugin-pwa": "^0.19.0",
     "vitest": "^1.2.2",

src/apollo/utils.ts

@@ -22,7 +22,6 @@ type schemaType = {
   possibleTypes: possibleTypes[];
 };
 
-// eslint-disable-next-line no-underscore-dangle
 const types = introspectionQueryResultData.__schema.types as schemaType[];
 export const possibleTypes = types.reduce(
   (acc, type) => {
@@ -205,7 +204,7 @@ function doMerge<T = any>(
     // exception here, instead of recovering by appending incoming
     // onto the existing array.
     res = [...merged, ...previous];
-    // eslint-disable-next-line no-underscore-dangle
+
     res = uniqBy(res, (elem: any) => elem.__ref);
   }
   return res;

src/components/Activity/ResourceActivityItem.vue

@@ -189,6 +189,7 @@ const parentDirectory = computed((): string | undefined | null => {
     const parentPathResult = parentPath(subjectParams.value.resource_path);
     const directory = parentPathResult?.split("/");
     const res = directory?.pop();
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     res === "" ? null : res;
   }
   return null;

src/components/Editor/Image.ts

@@ -5,8 +5,6 @@ import { EditorView } from "prosemirror-view";
 import Image from "@tiptap/extension-image";
 import { provideApolloClient, useMutation } from "@vue/apollo-composable";
 
-/* eslint-disable class-methods-use-this */
-
 const CustomImage = Image.extend({
   name: "image",
   addAttributes() {

src/components/Event/EventActionSection.vue

@@ -908,6 +908,7 @@ const openDeleteEventModal = () => {
     onConfirm: (result: string) => {
       console.debug("calling delete event", result);
       if (result.trim() === event.value?.title) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         event.value?.id ? deleteEvent({ eventId: event.value?.id }) : null;
       }
     },

src/components/Event/FullAddressAutoComplete.vue

@@ -313,7 +313,6 @@ const actualLabel = computed((): string => {
   return props.label ?? t("Find an address");
 });
 
-// eslint-disable-next-line class-methods-use-this
 const canShowLocateMeButton = computed((): boolean => {
   return window.isSecureContext;
 });
@@ -446,7 +445,6 @@ const reverseGeoCode = async (e: LatLng, zoom: number) => {
   }
 };
 
-// eslint-disable-next-line no-undef
 const getLocation = async (): Promise<GeolocationPosition> => {
   let errorMessage = t("Failed to get location.");
   return new Promise((resolve, reject) => {

src/components/Map/VueBottomSheet.vue

@@ -130,6 +130,7 @@ const move = (event: any, type: any) => {
       moving.value = false;
       if (cardP.value < -30) {
         opened.value = false;
+        // eslint-disable-next-line no-constant-binary-expression
         cardP.value = (-cardH.value ?? 0) - stripe.value;
         document.body.style.overflow = "";
         emit("closed");

src/components/Search/EventMarkerMap.vue

@@ -150,7 +150,7 @@ onMounted(async () => {
   setLatLng(...initialView.value);
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  // eslint-disable-next-line no-underscore-dangle
+
   mapElement.value._onResize();
   mapElement.value.on("click", () => {
     activeElement.value = null;

src/components/Utils/RedirectWithAccount.vue

@@ -100,6 +100,7 @@ const webFingerFetch = async (
   hostname: string,
   identity: string
 ): Promise<string> => {
+  // eslint-disable-next-line no-undef
   const scheme = process.env.NODE_ENV === "production" ? "https" : "http";
   const data = await (
     await fetch(

src/filters/index.ts

@@ -5,7 +5,6 @@ import {
 } from "./datetime";
 
 export default {
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   install(vue: any): void {
     vue.filter("formatDateString", formatDateString);
     vue.filter("formatTimeString", formatTimeString);

src/service-worker.ts

@@ -21,7 +21,7 @@ declare const self: ServiceWorkerGlobalScope;
 // Use with precache injection
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-// eslint-disable-next-line no-underscore-dangle
+
 precacheAndRoute(self.__WB_MANIFEST);
 
 registerRoute(

src/services/AnonymousParticipationStorage.ts

@@ -44,7 +44,6 @@ function getLocalAnonymousParticipations(): Map<
 function purgeOldParticipations(
   participations: Map<string, IAnonymousParticipation>
 ): Map<string, IAnonymousParticipation> {
-  // eslint-disable-next-line no-restricted-syntax
   for (const [hashedUUID, { expiration }] of participations) {
     if (expiration < new Date()) {
       participations.delete(hashedUUID);

src/shims-tsx.d.ts

@@ -2,7 +2,9 @@ import Vue, { VNode } from "vue";
 
 declare global {
   namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     interface Element extends VNode {}
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     interface ElementClass extends Vue {}
     interface IntrinsicElements {
       [elem: string]: any;

src/shims-vue.d.ts

@@ -1,7 +1,7 @@
 declare module "*.vue" {
   import type { DefineComponent } from "vue";
 
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   const component: DefineComponent<{}, {}, {}>;
   export default component;
 }

src/types/enums.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 export enum InstanceTermsType {
   DEFAULT = "DEFAULT",
   URL = "URL",

src/types/event.model.ts

@@ -242,7 +242,6 @@ export class EventModel implements IEvent {
 
 export function removeTypeName(entity: any): any {
   if (entity?.__typename) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { __typename, ...purgedEntity } = entity;
     return purgedEntity;
   }

src/views/Account/children/EditIdentity.vue

@@ -528,7 +528,6 @@ const handleErrors = (absintheErrors: AbsintheGraphQLErrors): void => {
   }
 };
 
-// eslint-disable-next-line class-methods-use-this
 const getInstanceHost = computed((): string => {
   return MOBILIZON_INSTANCE_HOST;
 });

src/views/Event/EditView.vue

@@ -811,7 +811,6 @@ const eventOptions = computed({
 onMounted(async () => {
   observer.value = new IntersectionObserver(
     (entries) => {
-      // eslint-disable-next-line no-restricted-syntax
       for (const entry of entries) {
         if (entry) {
           showFixedNavbar.value = !entry.isIntersecting;
@@ -1344,7 +1343,6 @@ const timezones = computed((): Record<string, string[]> => {
         prefix2: string,
         suffix2: string
       ) => {
-        // eslint-disable-next-line no-param-reassign
         (acc2[prefix2] = acc2[prefix2] || []).push(suffix2);
         return acc2;
       };
@@ -1357,7 +1355,6 @@ const timezones = computed((): Record<string, string[]> => {
   );
 });
 
-// eslint-disable-next-line class-methods-use-this
 const sanitizeTimezone = (timezone: string): string => {
   return timezone
     .split("_")

src/views/Event/EventView.vue

@@ -463,7 +463,6 @@ onMounted(async () => {
 
   observer.value = new IntersectionObserver(
     (entries) => {
-      // eslint-disable-next-line no-restricted-syntax
       for (const entry of entries) {
         if (entry) {
           loadComments.value = entry.isIntersecting || loadComments.value;

src/views/HomeView.vue

@@ -578,8 +578,7 @@ onReverseGeocodeResult((result) => {
 
 const fetchAndSaveCurrentLocationName = async ({
   coords: { latitude, longitude, accuracy },
-}: // eslint-disable-next-line no-undef
-GeolocationPosition) => {
+}: GeolocationPosition) => {
   reverseGeoCodeInformation.latitude = latitude;
   reverseGeoCodeInformation.longitude = longitude;
   reverseGeoCodeInformation.accuracy = accuracy;

src/views/Resources/ResourceFolder.vue

@@ -484,7 +484,6 @@ const createResourceButtonLabel = computed((): string => {
   return createSentenceForType(newResource.type);
 });
 
-// eslint-disable-next-line class-methods-use-this
 const postRefreshQueries = (): InternalRefetchQueriesInclude => {
   return [
     {

src/views/Settings/PreferencesView.vue

@@ -254,7 +254,6 @@ const timezones = computed((): Record<string, string[]> => {
         prefix2: string,
         suffix2: string
       ) => {
-        // eslint-disable-next-line no-param-reassign
         (acc2[prefix2] = acc2[prefix2] || []).push(suffix2);
         return acc2;
       };