Update Node, ESLint and various dependencies

.drone.yml

@@ -4,7 +4,7 @@ type: docker
 
 steps:
   - name: build
-    image: node:20-alpine
+    image: node:22-alpine
     commands:
       - yarn install
       - yarn build

.eslintrc.cjs

@@ -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'
-  },
-};

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',
+    }
+  }
+);

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"
   }
 }

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');

tsconfig.json

@@ -10,6 +10,7 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
+    "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,