From e6c75eac69a2cbad0dde7114f0fff81a23593aeb Mon Sep 17 00:00:00 2001
From: clfreville2 <clement.freville2@etu.uca.fr>
Date: Wed, 1 May 2024 17:48:07 +0200
Subject: [PATCH] Update Node, ESLint and various dependencies

---
 .drone.yml                         |  2 +-
 .eslintrc.cjs                      | 23 -----------------------
 eslint.config.js                   | 20 ++++++++++++++++++++
 package.json                       | 23 ++++++++++++-----------
 src/components/ImageCollection.vue |  6 ++----
 tsconfig.json                      |  1 +
 6 files changed, 36 insertions(+), 39 deletions(-)
 delete mode 100644 .eslintrc.cjs
 create mode 100644 eslint.config.js

diff --git a/.drone.yml b/.drone.yml
index fc3f00e..dd96316 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -4,7 +4,7 @@ type: docker
 
 steps:
   - name: build
-    image: node:20-alpine
+    image: node:22-alpine
     commands:
       - yarn install
       - yarn build
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index b5e28f6..0000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,23 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-  },
-  root: true,
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    'plugin:@typescript-eslint/recommended',
-    '@vue/typescript/recommended',
-  ],
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: '@typescript-eslint/parser',
-    sourceType: 'module'
-  },
-  plugins: ['vue', '@typescript-eslint'],
-  rules: {
-    '@typescript-eslint/no-explicit-any': 'warn',
-    'vue/html-self-closing': 'off',
-    'vue/max-attributes-per-line': 'off'
-  },
-};
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..d591736
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,20 @@
+import tseslint from 'typescript-eslint';
+import pluginVue from 'eslint-plugin-vue';
+import vueParser from 'vue-eslint-parser';
+
+export default tseslint.config(
+  ...tseslint.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  {
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      }
+    },
+    rules: {
+      'vue/html-self-closing': 'off',
+      'vue/max-attributes-per-line': 'off',
+    }
+  }
+);
diff --git a/package.json b/package.json
index 282e6cd..052507d 100644
--- a/package.json
+++ b/package.json
@@ -11,19 +11,20 @@
   },
   "dependencies": {
     "gif.js": "^0.2.0",
-    "unplugin-icons": "^0.18.5",
-    "vue": "^3.3.11"
+    "unplugin-icons": "^0.19.0",
+    "vue": "^3.4.26"
   },
   "devDependencies": {
-    "@iconify-json/octicon": "^1.1.52",
+    "@iconify-json/octicon": "^1.1.54",
     "@types/gif.js": "^0.2.5",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.21.1",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.8",
-    "vue-tsc": "^1.8.25"
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.25.0",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.8.0",
+    "vite": "^5.2.10",
+    "vue-eslint-parser": "^9.4.2",
+    "vue-tsc": "^2.0.16"
   }
 }
diff --git a/src/components/ImageCollection.vue b/src/components/ImageCollection.vue
index ff6b6c6..2c81dab 100644
--- a/src/components/ImageCollection.vue
+++ b/src/components/ImageCollection.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import * as GIF from 'gif.js';
+import GIF from 'gif.js';
 import { downloadBlob } from '../download.ts';
 import IconPlus from '~icons/octicon/feed-plus-16';
 import IconPlay from '~icons/octicon/play-16';
@@ -32,9 +32,7 @@ function onDragStart(event: DragEvent, idx: number): void {
 }
 
 function onAnimateClick(): void {
-  // @ts-expect-error wrong type definition
-  const FixedGIF = GIF.default as typeof GIF;
-  const gif = new FixedGIF({
+  const gif = new GIF({
     workerScript: new URL('gif.js/dist/gif.worker.js', import.meta.url).toString(),
   });
   const delay = prompt('Delay between frames in milliseconds', '500');
diff --git a/tsconfig.json b/tsconfig.json
index b022a7b..6f44d68 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,7 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
+    "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,