Vue update to v3 (#60)

* Vue and related packages update, app and router init

* Migrate Buckets components to vue 3

* Replace vue-popperjs with floating-vue

* Migrate Notifications components to vue 3

* Migrate Reports components to vue 3

* Migrate ReportStatsGraph component to vue 3

* Replace vue-spinner with a spinner component

* Update tests to support vue 3

* Update eslint and some cleanup

* Remove unused js and css, fix warnings

Author: ksy36

server/frontend/.babelrc

@@ -0,0 +1,28 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": ["> 1%", "last 2 versions"],
+          "node": "current"
+        }
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": {
+              "node": "current"
+            },
+            "modules": "commonjs"
+          }
+        ]
+      ]
+    }
+  }
+}

server/frontend/README.md

@@ -8,6 +8,7 @@
 ## Common operations
 
 > Run following commands in `WebCompatManager/server/frontend` folder
-* `npm run build`: Build for development
-* `npm run start`: Continuously build for development (watching for changes)
-* `npm run production`: Build for production
+
+- `npm run build`: Build for development
+- `npm run start`: Continuously build for development (watching for changes)
+- `npm run production`: Build for production

server/frontend/eslint.config.mjs

@@ -16,7 +16,7 @@ export default [
     },
   },
   pluginJs.configs.recommended,
-  ...pluginVue.configs["flat/vue2-strongly-recommended"],
+  ...pluginVue.configs["flat/strongly-recommended"],
   pluginPrettier,
   {
     rules: {
@@ -32,7 +32,7 @@ export default [
       "vue/max-attributes-per-line": 0,
       "vue/multi-word-component-names": 0,
       "vue/singleline-html-element-content-newline": 0,
-      "vue/v-on-style": [2, "longform"],
+      "vue/require-explicit-emits": 0,
     },
   },
 ];

server/frontend/jest.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  moduleFileExtensions: ["vue", "js", "json", "node"],
+  collectCoverageFrom: [
+    "**/*.{js,jsx}",
+    "**/*.vue",
+    "!**/tests/**",
+    "!**/coverage/**",
+    "!**/dist/**",
+    "!**/webpack.*.js",
+  ],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+    d3: "<rootDir>/node_modules/d3/dist/d3.min.js",
+    "\\.(css|less|scss|sass)$": "jest-transform-stub",
+  },
+  transformIgnorePatterns: ["/node_modules/(?!floating-vue)"],
+  transform: {
+    "^.+\\.vue$": "@vue/vue3-jest",
+    "^.+\\.(js)$": "babel-jest",
+    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
+      "jest-transform-stub",
+  },
+  testMatch: ["**/tests/**/*.[jt]s", "**/?(*.)+(spec|test).[jt]s"],
+  testPathIgnorePatterns: [
+    "<rootDir>/tests/setup.js",
+    "<rootDir>/tests/fixtures.js",
+  ],
+  setupFiles: ["<rootDir>/tests/setup.js"],
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
+  },
+};