Vue3 (#1594)

* WIP vue3

* WIP vue3

* WIP vue3

* Migrates to vitejs

* Fixes js tests and removes not needed modules

* Fixes unmount

* Updates to use css instead for space

* Fixes tests and rebases one more time

* Uses orgua

* Fixes migrations bugs with oruga and fixes scroll

* Fixes v-deep

* Fixes icons to prod

* Fixes icons to prod

* Adds favicon back

* Transitions some to composition api

* Updates another component to comp api

* Cleans defineProps

* Updates log messages

* Moves more to compose api

* Cleans up styles and rewrites event source

* Tries to fix DOMPurify

* Removes postcss

* WIP typescript

* Improves importing

* Converts all to ts

* Converts main to ts

* Makes changes for tsconfig

* Moves more to ts

* Adds typing to store

* More typing

* Updates to ts

* Updates the rest to ts

* Fixes computes

* Fixes unmount

* Adds cypress with custom base fixed

* Fixes jest tests

* Fixes golang tests

* Adds gitignore for cypress

* Removes int in favor of e2e with cypress

* Tries to fix int tests again

* Adds title

* Updates e2e tests

* Uses vue for isMobile

* Removes app spec

* Cleans up docker

* Adds drop down for settings

* Fixes bug with restart

* Fixes scroll up bug

* Adds tests for light mode

package.json

@@ -11,64 +11,56 @@
     "url": "git+https://github.com/amir20/dozzle.git"
   },
   "license": "ISC",
-  "author": "",
+  "author": "Amir Raminfar <findamir@gmail.com>",
   "scripts": {
-    "watch": "npm-run-all -p watch:*",
-    "watch:assets": "webpack --mode=development --watch",
+    "watch:assets": "vite --open",
     "watch:server": "LIVE_FS=true reflex -c .reflex",
-    "dev": "make fake_static && npm-run-all -p dev-server watch:server",
-    "dev-server": "webpack serve --mode=development",
-    "build": "rm -rf static && webpack --mode=production --progress",
-    "clean": "rm -rf static",
+    "dev": "make fake_assets && npm-run-all -p watch:assets watch:server",
+    "build": "vite build",
     "release": "release-it",
     "test": "TZ=UTC jest",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/plugin-transform-runtime": "^7.15.8",
-    "@vue/component-compiler-utils": "^3.3.0",
-    "@vue/test-utils": "^1.2.2",
-    "ansi-to-html": "^0.7.2",
-    "autoprefixer": "^10.4.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^27.3.1",
-    "babel-preset-env": "^1.7.0",
-    "buefy": "^0.9.10",
-    "bulma": "^0.9.3",
-    "caniuse-lite": "^1.0.30001272",
-    "css-loader": "^6.5.0",
-    "date-fns": "^2.25.0",
-    "dompurify": "^2.3.3",
-    "eventsourcemock": "^2.0.0",
-    "fuzzysort": "^1.1.4",
-    "hotkeys-js": "^3.8.7",
-    "html-webpack-plugin": "^5.5.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.throttle": "^4.1.1",
-    "mini-css-extract-plugin": "^2.4.3",
-    "postcss": "^8.3.11",
-    "postcss-loader": "^6.2.0",
-    "sass": "^1.43.4",
-    "sass-loader": "^12.3.0",
-    "semver": "^7.3.5",
-    "splitpanes": "^2.3.8",
-    "store": "^2.0.12",
-    "unplugin-icons": "^0.12.18",
-    "vue": "^2.6.14",
-    "vue-loader": "^15.9.8",
-    "vue-meta": "^2.4.0",
-    "vue-router": "^3.5.3",
-    "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.6.14",
-    "vuex": "^3.6.2",
-    "webpack": "^5.61.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-pwa-manifest": "^4.3.0"
-  },
-  "devDependencies": {
+    "@iconify-json/carbon": "^1.0.9",
+    "@iconify-json/cil": "^1.0.1",
     "@iconify-json/mdi-light": "^1.0.1",
     "@iconify-json/octicon": "^1.0.5",
+    "@oruga-ui/oruga-next": "^0.4.7",
+    "@oruga-ui/theme-bulma": "^0.1.3",
+    "@vitejs/plugin-vue": "^1.9.4",
+    "@vueuse/core": "^6.9.0",
+    "ansi-to-html": "^0.7.2",
+    "autoprefixer": "^10.4.0",
+    "bulma": "^0.9.3",
+    "date-fns": "^2.25.0",
+    "fuzzysort": "^1.1.4",
+    "hotkeys-js": "^3.8.7",
+    "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
+    "sass": "^1.43.4",
+    "semver": "^7.3.5",
+    "splitpanes": "^3.0.6",
+    "store": "^2.0.12",
+    "typescript": "^4.4.4",
+    "unplugin-auto-import": "^0.4.14",
+    "unplugin-icons": "^0.12.18",
+    "unplugin-vue-components": "^0.17.2",
+    "vite": "^2.6.13",
+    "vue": "^3.2.21",
+    "vue-router": "^4.0.12",
+    "vuex": "^4.0.2"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "@types/jest": "^27.0.2",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.throttle": "^4.1.6",
+    "@vue/compiler-sfc": "^3.2.21",
+    "@vue/test-utils": "^2.0.0-rc.16",
+    "@vue/vue3-jest": "^27.0.0-alpha.3",
+    "eventsourcemock": "^2.0.0",
     "husky": "^7.0.4",
     "jest": "^27.3.1",
     "jest-serializer-vue": "^2.0.2",
@@ -76,9 +68,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.4.1",
     "release-it": "^14.11.6",
-    "vue-hot-reload-api": "^2.3.4",
-    "vue-jest": "^3.0.7",
-    "webpack-dev-server": "^4.4.0"
+    "ts-jest": "^27.0.7"
   },
   "lint-staged": {
     "*.{js,vue,css}": [