chore: update project to vue3 and other latest dependencies

Fixes #266, #463
Closes #509, #464, #461, #451, #332, #322, #317, #297, #287, #276, #199

.editorconfig

@@ -9,6 +9,7 @@ end_of_line = lf
 insert_final_newline = true
 indent_style = space
 indent_size = 2
+charset = utf-8
 
 # Matches multiple files with brace expansion notation
 # Set default charset

.eslintrc-auto-import.json

@@ -0,0 +1,76 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "DirectiveBinding": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "onWatcherCleanup": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useId": true,
+    "useModel": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "useTemplateRef": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

.github/workflows/build.yml

@@ -12,10 +12,10 @@ jobs:
         uses: actions/[email protected]
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
       - name: Build and Run End2End tests with Cypress
         uses: cypress-io/github-action@v4
         with:
           build: npm run build
-          start: npm run serve
+          start: npm run dev
           wait-on: "http://localhost:8080"

.github/workflows/publish.yml

@@ -12,7 +12,7 @@ jobs:
         uses: actions/[email protected]
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
       - name: Install and Build
         run: |
           npm ci --production=false # We also need to install dev dependencies for the build
@@ -24,7 +24,7 @@ jobs:
         run: zip -r release.zip dist/**
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
       - name: Release to GitHub
         run: npx semantic-release
         env:

.gitignore

@@ -2,6 +2,9 @@
 node_modules
 /dist
 
+# local env, test and user specific files
+*.local
+
 # Log files
 npm-debug.log*
 yarn-debug.log*
@@ -16,5 +19,3 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-
-*.local

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-node_modules/.bin/pretty-quick --staged
+npx pretty-quick --staged

CODEOWNERS

@@ -1,3 +1,4 @@
 # Global Repository owners
 # see https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/about-code-owners for details of syntax
 *       [email protected]
+*       [email protected]

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.20.2-alpine
+FROM node:22.12.0-alpine3.21
 # install simple http server for serving static content
 RUN npm install -g http-server
 

README.adoc

@@ -45,7 +45,7 @@ npm install
 
 .Compiles and hot-reloads for development
 ----
-npm run serve
+npm run dev
 ----
 
 .Run via Docker

cypress/e2e/smoke.cy.ts

@@ -7,7 +7,7 @@ it("should display the title", () => {
 })
 
 it("should contain a file input", () => {
-  cy.get(".file-input").should("have.attr", "type", "file")
+  cy.get(".v-file-upload input").should("have.attr", "type", "file")
 })
 
 it("should display an alert that no report was loaded", () => {

env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />
+/// <reference types="vite-plugin-vue-layouts/client" />

eslint.config.js

@@ -0,0 +1,38 @@
+/**
+ * .eslint.js
+ *
+ * ESLint configuration file.
+ */
+
+import pluginVue from "eslint-plugin-vue"
+import vueTsEslintConfig from "@vue/eslint-config-typescript"
+import eslintConfigPrettier from "eslint-config-prettier"
+
+export default [
+  {
+    name: "app/files-to-lint",
+    files: ["**/*.{ts,mts,tsx,vue}"],
+  },
+
+  {
+    name: "app/files-to-ignore",
+    ignores: ["**/dist/**", "**/dist-ssr/**", "**/coverage/**"],
+  },
+
+  ...pluginVue.configs["flat/recommended"],
+  ...vueTsEslintConfig(),
+  eslintConfigPrettier,
+
+  {
+    rules: {
+      "@typescript-eslint/no-unused-expressions": [
+        "error",
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+        },
+      ],
+      "vue/multi-word-component-names": "off",
+    },
+  },
+]

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Trivy Vulnerability Explorer</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>