Frontend: Migrate to Vite from vue-cli

AgustinSRG · Sep 11, 2023 · 05f257f · 05f257f
1 parent f6a33b2
commit 05f257f
Show file tree

Hide file tree

Showing 40 changed files with 7,386 additions and 18,812 deletions.
diff --git a/frontend/.env b/frontend/.env
@@ -1,7 +1,7 @@
-VUE_APP_I18N_LOCALE=en
-VUE_APP_I18N_FALLBACK_LOCALE=en
-VUE_APP_VERSION=1.11.0
-VUE_APP_VERSION_DATE=2023-09-09
-VUE_APP_HOME_URL=https://github.com/AgustinSRG/PersonalMediaVault
-VUE_APP_GIT_URL=https://github.com/AgustinSRG/PersonalMediaVault
-VUE_APP_LICENSE_URL=https://github.com/AgustinSRG/PersonalMediaVault/blob/master/LICENSE
+VITE__I18N_LOCALE=en
+VITE__I18N_FALLBACK_LOCALE=en
+VITE__VERSION=1.11.0
+VITE__VERSION_DATE=2023-09-09
+VITE__HOME_URL=https://github.com/AgustinSRG/PersonalMediaVault
+VITE__GIT_URL=https://github.com/AgustinSRG/PersonalMediaVault
+VITE__LICENSE_URL=https://github.com/AgustinSRG/PersonalMediaVault/blob/master/LICENSE
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -2,14 +2,15 @@ module.exports = {
     root: true,
     env: {
         node: true,
+        es2022: true,
     },
     extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended"],
     parserOptions: {
         ecmaVersion: 2020,
     },
     rules: {
         "no-console": "off",
-        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+        "no-debugger": "warn",
         "no-useless-escape": "off",
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-empty-function": "off",

diff --git a/frontend/babel.config.js b/frontend/babel.config.js
diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -8,7 +8,18 @@
             content="Web application to store and visualize media files (video, audio and pictures), meant to be run on a personal server or computer."
         />
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+        <link rel="icon" href="/favicon.ico" />
+
+        <meta name="theme-color" content="#FF0000">
+
+        <meta name="apple-mobile-web-app-capable" content="no">
+        <meta name="apple-mobile-web-app-status-bar-style" content="default">
+        <meta name="apple-mobile-web-app-title" content="Personal Media Vault">
+        <link rel="apple-touch-icon" href="img/icons/apple-touch-icon-152x152.png">
+        <link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#FF0000">
+        <meta name="msapplication-TileImage" content="img/icons/msapplication-icon-144x144.png">
+        <meta name="msapplication-TileColor" content="#000000">
+
         <title>Personal Media Vault</title>
     </head>
     <body>
@@ -19,6 +30,6 @@
             >
         </noscript>
         <div id="app"></div>
-        <!-- built files will be auto injected -->
+        <script type="module" src="/src/main.ts"></script>
     </body>
 </html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,34 +3,28 @@
     "version": "1.11.0",
     "private": true,
     "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build --modern",
-        "test": "vue-cli-service lint",
-        "lint": "vue-cli-service lint",
+        "serve": "vite",
+        "build": "vite build",
+        "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src",
         "prettier": "prettier --write .",
-        "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
+        "update-locales": "node translate-file-maker.js"
     },
     "dependencies": {
-        "core-js": "3.32.1",
-        "prettier": "3.0.0",
-        "register-service-worker": "1.7.2",
         "sanitize-html": "2.7.0",
         "sortablejs": "1.15.0",
         "vue": "3.3.4"
     },
     "devDependencies": {
         "@types/sanitize-html": "2.6.2",
-        "@typescript-eslint/eslint-plugin": "^5.4.0",
-        "@typescript-eslint/parser": "^5.4.0",
-        "@vue/cli-plugin-babel": "~5.0.0",
-        "@vue/cli-plugin-eslint": "~5.0.0",
-        "@vue/cli-plugin-pwa": "~5.0.0",
-        "@vue/cli-plugin-typescript": "~5.0.0",
-        "@vue/cli-service": "~5.0.0",
-        "@vue/eslint-config-typescript": "^9.1.0",
-        "@vue/test-utils": "^2.0.0-0",
-        "eslint": "^7.32.0",
-        "eslint-plugin-vue": "^8.0.3",
-        "typescript": "~4.5.5"
+        "@typescript-eslint/eslint-plugin": "6.6.0",
+        "@typescript-eslint/parser": "6.6.0",
+        "@vitejs/plugin-vue": "4.3.4",
+        "@vue/eslint-config-typescript": "11.0.3",
+        "eslint": "8.49.0",
+        "eslint-plugin-vue": "9.17.0",
+        "prettier": "3.0.0",
+        "typescript": "5.2.2",
+        "vite": "4.4.9",
+        "vite-plugin-pwa": "0.16.5"
     }
 }
diff --git a/frontend/src/components/layout/AlbumContextMenu.vue b/frontend/src/components/layout/AlbumContextMenu.vue
@@ -113,12 +113,12 @@ export default defineComponent({
             const y = this.y;
 
             if (y > pageHeight / 2) {
-                let bottom = pageHeight - y;
-                let right = pageWidth - x;
+                const bottom = pageHeight - y;
+                const right = pageWidth - x;
 
-                let maxWidth = pageWidth - right;
+                const maxWidth = pageWidth - right;
 
-                let maxHeight = pageHeight - bottom;
+                const maxHeight = pageHeight - bottom;
 
                 this.top = "auto";
                 this.left = "auto";
@@ -128,12 +128,12 @@ export default defineComponent({
                 this.maxWidth = maxWidth + "px";
                 this.maxHeight = maxHeight + "px";
             } else {
-                let top = y;
-                let right = pageWidth - x;
+                const top = y;
+                const right = pageWidth - x;
 
-                let maxWidth = pageWidth - right;
+                const maxWidth = pageWidth - right;
 
-                let maxHeight = pageHeight - top;
+                const maxHeight = pageHeight - top;
 
                 this.top = top + "px";
                 this.left = "auto";

diff --git a/frontend/src/components/modals/AboutModal.vue b/frontend/src/components/modals/AboutModal.vue
@@ -64,11 +64,11 @@ export default defineComponent({
     },
     data: function () {
         return {
-            version: process.env.VUE_APP_VERSION || "-",
-            versionDate: process.env.VUE_APP_VERSION_DATE || "-",
-            homePage: process.env.VUE_APP_HOME_URL || "#",
-            gitRepo: process.env.VUE_APP_GIT_URL || "#",
-            license: process.env.VUE_APP_LICENSE_URL || "#",
+            version: import.meta.env.VITE__VERSION || "-",
+            versionDate: import.meta.env.VITE__VERSION_DATE || "-",
+            homePage: import.meta.env.VITE__HOME_URL || "#",
+            gitRepo: import.meta.env.VITE__GIT_URL || "#",
+            license: import.meta.env.VITE__LICENSE_URL || "#",
         };
     },
     methods: {

diff --git a/frontend/src/components/modals/AdvancedSettingsModal.vue b/frontend/src/components/modals/AdvancedSettingsModal.vue
@@ -332,7 +332,7 @@ export default defineComponent({
         updateResolutions: function (resolutions, imageResolutions) {
             this.resolutions = this.standardResolutions.map((r) => {
                 let enabled = false;
-                for (let res of resolutions) {
+                for (const res of resolutions) {
                     if (res.width === r.width && res.height === r.height && res.fps === r.fps) {
                         enabled = true;
                         break;
@@ -353,7 +353,7 @@ export default defineComponent({
                 })
                 .map((r) => {
                     let enabled = false;
-                    for (let res of imageResolutions) {
+                    for (const res of imageResolutions) {
                         if (res.width === r.width && res.height === r.height) {
                             enabled = true;
                             break;

diff --git a/frontend/src/components/modals/BatchOperationModal.vue b/frontend/src/components/modals/BatchOperationModal.vue
@@ -647,7 +647,7 @@ export default defineComponent({
             const filterTags = this.tagsSearch.slice();
             const filterTagMode = this.tagModeSearch;
 
-            for (let e of results) {
+            for (const e of results) {
                 if (filterText) {
                     if (
                         matchSearchFilter(e.title, filterText, filterTextWords) < 0 &&
@@ -666,7 +666,7 @@ export default defineComponent({
                 if (filterTagMode === "all") {
                     if (filterTags.length > 0) {
                         let passesTags = true;
-                        for (let tag of filterTags) {
+                        for (const tag of filterTags) {
                             if (!e.tags || !e.tags.includes(tag)) {
                                 passesTags = false;
                                 break;
@@ -680,7 +680,7 @@ export default defineComponent({
                 } else if (filterTagMode === "none") {
                     if (filterTags.length > 0) {
                         let passesTags = true;
-                        for (let tag of filterTags) {
+                        for (const tag of filterTags) {
                             if (e.tags && e.tags.includes(tag)) {
                                 passesTags = false;
                                 break;
@@ -694,7 +694,7 @@ export default defineComponent({
                 } else if (filterTagMode === "any") {
                     if (filterTags.length > 0) {
                         let passesTags = false;
-                        for (let tag of filterTags) {
+                        for (const tag of filterTags) {
                             if (!e.tags || e.tags.includes(tag)) {
                                 passesTags = true;
                                 break;

diff --git a/frontend/src/components/modals/SizeStatsModal.vue b/frontend/src/components/modals/SizeStatsModal.vue
@@ -94,7 +94,7 @@ export default defineComponent({
 
                     total += result.meta_size;
 
-                    for (let asset of result.assets) {
+                    for (const asset of result.assets) {
                         total += asset.size;
                     }
 

diff --git a/frontend/src/components/modals/UploadModal.vue b/frontend/src/components/modals/UploadModal.vue
@@ -141,7 +141,7 @@ export default defineComponent({
         computeTotalSize: function (files) {
             let size = 0;
 
-            for (let file of files) {
+            for (const file of files) {
                 size += file.size || 0;
             }
 

diff --git a/frontend/src/components/pages/PageAdvancedSearch.vue b/frontend/src/components/pages/PageAdvancedSearch.vue
@@ -339,7 +339,7 @@ export default defineComponent({
                 );
             }
 
-            for (let e of results) {
+            for (const e of results) {
                 if (backlistAlbum.has(e.id)) {
                     continue;
                 }
@@ -366,7 +366,7 @@ export default defineComponent({
                 if (filterTagMode === "all") {
                     if (filterTags.length > 0) {
                         let passesTags = true;
-                        for (let tag of filterTags) {
+                        for (const tag of filterTags) {
                             if (!e.tags || !e.tags.includes(tag)) {
                                 passesTags = false;
                                 break;
@@ -380,7 +380,7 @@ export default defineComponent({
                 } else if (filterTagMode === "none") {
                     if (filterTags.length > 0) {
                         let passesTags = true;
-                        for (let tag of filterTags) {
+                        for (const tag of filterTags) {
                             if (e.tags && e.tags.includes(tag)) {
                                 passesTags = false;
                                 break;
@@ -394,7 +394,7 @@ export default defineComponent({
                 } else if (filterTagMode === "any") {
                     if (filterTags.length > 0) {
                         let passesTags = false;
-                        for (let tag of filterTags) {
+                        for (const tag of filterTags) {
                             if (!e.tags || e.tags.includes(tag)) {
                                 passesTags = true;
                                 break;
@@ -762,12 +762,12 @@ export default defineComponent({
         },
 
         renderHintTitle(item: MediaListItem, tags: { [id: string]: TagEntry }): string {
-            let parts = [item.title || this.$t("Untitled")];
+            const parts = [item.title || this.$t("Untitled")];
 
             if (item.tags.length > 0) {
-                let tagNames = [];
+                const tagNames = [];
 
-                for (let tag of item.tags) {
+                for (const tag of item.tags) {
                     if (tags[tag + ""]) {
                         tagNames.push(tags[tag + ""].name);
                     } else {

diff --git a/frontend/src/components/pages/PageAlbums.vue b/frontend/src/components/pages/PageAlbums.vue
@@ -256,7 +256,7 @@ export default defineComponent({
                 return;
             }
 
-            let filter = normalizeString(this.filter + "")
+            const filter = normalizeString(this.filter + "")
                 .trim()
                 .toLowerCase();
 

diff --git a/frontend/src/components/pages/PageHome.vue b/frontend/src/components/pages/PageHome.vue
@@ -393,12 +393,12 @@ export default defineComponent({
         },
 
         renderHintTitle(item: MediaListItem, tags: { [id: string]: TagEntry }): string {
-            let parts = [item.title || this.$t("Untitled")];
+            const parts = [item.title || this.$t("Untitled")];
 
             if (item.tags.length > 0) {
-                let tagNames = [];
+                const tagNames = [];
 
-                for (let tag of item.tags) {
+                for (const tag of item.tags) {
                     if (tags[tag + ""]) {
                         tagNames.push(tags[tag + ""].name);
                     } else {

diff --git a/frontend/src/components/pages/PageRandom.vue b/frontend/src/components/pages/PageRandom.vue
@@ -389,12 +389,12 @@ export default defineComponent({
         },
 
         renderHintTitle(item: MediaListItem, tags: { [id: string]: TagEntry }): string {
-            let parts = [item.title || this.$t("Untitled")];
+            const parts = [item.title || this.$t("Untitled")];
 
             if (item.tags.length > 0) {
-                let tagNames = [];
+                const tagNames = [];
 
-                for (let tag of item.tags) {
+                for (const tag of item.tags) {
                     if (tags[tag + ""]) {
                         tagNames.push(tags[tag + ""].name);
                     } else {

diff --git a/frontend/src/components/pages/PageSearch.vue b/frontend/src/components/pages/PageSearch.vue
@@ -417,12 +417,12 @@ export default defineComponent({
         },
 
         renderHintTitle(item: MediaListItem, tags: { [id: string]: TagEntry }): string {
-            let parts = [item.title || this.$t("Untitled")];
+            const parts = [item.title || this.$t("Untitled")];
 
             if (item.tags.length > 0) {
-                let tagNames = [];
+                const tagNames = [];
 
-                for (let tag of item.tags) {
+                for (const tag of item.tags) {
                     if (tags[tag + ""]) {
                         tagNames.push(tags[tag + ""].name);
                     } else {

diff --git a/frontend/src/components/pages/PageUpload.vue b/frontend/src/components/pages/PageUpload.vue
@@ -243,8 +243,8 @@ export default defineComponent({
         inputFileChanged: function (e) {
             const data = e.target.files;
             if (data && data.length > 0) {
-                let files = [];
-                for (let file of data) {
+                const files = [];
+                for (const file of data) {
                     files.push(file);
                 }
                 this.addFiles(files);
@@ -256,8 +256,8 @@ export default defineComponent({
             this.dragging = false;
             const data = e.dataTransfer.files;
             if (data && data.length > 0) {
-                let files = [];
-                for (let file of data) {
+                const files = [];
+                for (const file of data) {
                     files.push(file);
                 }
                 this.addFiles(files);
@@ -301,7 +301,7 @@ export default defineComponent({
         },
 
         onUploadConfirmed: function (album: number, tags: string[]) {
-            for (let file of this.files) {
+            for (const file of this.files) {
                 UploadController.AddFile(file, album, tags.slice());
             }
             this.files = [];
@@ -434,7 +434,7 @@ export default defineComponent({
         },
 
         onPendingUpdate: function (i: number, m: UploadEntryMin) {
-            let mustUpdate = this.pendingToUpload[i].status !== m.status;
+            const mustUpdate = this.pendingToUpload[i].status !== m.status;
             this.pendingToUpload[i].status = m.status;
             this.pendingToUpload[i].error = m.error;
             this.pendingToUpload[i].progress = m.progress;
@@ -473,7 +473,7 @@ export default defineComponent({
             let countPending = 0;
             let countReady = 0;
             let countError = 0;
-            for (let l of list) {
+            for (const l of list) {
                 if (l.status !== "ready" && l.status !== "error") {
                     count++;
                 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -256,7 +256,7 @@ export default defineComponent({ @@
                     return;
                 }
-                let filter = normalizeString(this.filter + "")
+                const filter = normalizeString(this.filter + "")
                     .trim()
                     .toLowerCase();
@@ Expand Down @@