From 77a8b398c1ad478b5a62f525fa6310d0cdffabc3 Mon Sep 17 00:00:00 2001 From: BacLuc Date: Sun, 12 May 2024 18:20:57 +0200 Subject: [PATCH] frontend: replace vite-plugin-vue2-svg with vite-plugin-svg4vue Because vite-plugin-vue2-svg does not support vue3. Only worked when converting vite.config.js to an esm file by renaming it to .mjs. vite-plugin-svg4vue is not the most popular package for this, this would be https://www.npmjs.com/package/vite-svg-loader, but that does not support vue2. Issue: #5121 We can also wait to merge this short before we want to upgrade to vue3. Also fixes https://github.com/ecamp/ecamp3/security/dependabot/178 --- frontend/package-lock.json | 165 ++---------------- frontend/package.json | 2 +- frontend/src/plugins/icons/BigScreen.vue | 7 + frontend/src/plugins/icons/CeviLogo.vue | 7 + frontend/src/plugins/icons/ColumnLayout.vue | 7 + frontend/src/plugins/icons/GoogleLogo.vue | 7 + frontend/src/plugins/icons/JublaLogo.vue | 7 + frontend/src/plugins/icons/PaperSize.vue | 7 + frontend/src/plugins/icons/PbsLogo.vue | 7 + .../src/plugins/icons/ResponsiveLayout.vue | 7 + frontend/src/plugins/icons/TentDay.vue | 7 + frontend/src/plugins/icons/eCampLogo.vue | 7 + frontend/src/plugins/vuetify.js | 20 +-- frontend/{vite.config.js => vite.config.mjs} | 4 +- 14 files changed, 102 insertions(+), 159 deletions(-) create mode 100644 frontend/src/plugins/icons/BigScreen.vue create mode 100644 frontend/src/plugins/icons/CeviLogo.vue create mode 100644 frontend/src/plugins/icons/ColumnLayout.vue create mode 100644 frontend/src/plugins/icons/GoogleLogo.vue create mode 100644 frontend/src/plugins/icons/JublaLogo.vue create mode 100644 frontend/src/plugins/icons/PaperSize.vue create mode 100644 frontend/src/plugins/icons/PbsLogo.vue create mode 100644 frontend/src/plugins/icons/ResponsiveLayout.vue create mode 100644 frontend/src/plugins/icons/TentDay.vue create mode 100644 frontend/src/plugins/icons/eCampLogo.vue rename frontend/{vite.config.js => vite.config.mjs} (98%) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 1e27d420760..56181eed1d0 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -100,7 +100,7 @@ "unplugin-vue-components": "0.27.0", "vite": "5.2.10", "vite-plugin-comlink": "4.0.3", - "vite-plugin-vue2-svg": "0.4.0", + "vite-plugin-svg4vue": "3.1.2", "vitest": "1.6.0", "vitest-canvas-mock": "0.3.3", "vue-template-compiler": "2.7.15" @@ -4588,89 +4588,6 @@ "@vue/shared": "3.4.27" } }, - "node_modules/@vue/component-compiler-utils": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz", - "integrity": "sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==", - "dev": true, - "dependencies": { - "consolidate": "^0.15.1", - "hash-sum": "^1.0.2", - "lru-cache": "^4.1.2", - "merge-source-map": "^1.1.0", - "postcss": "^7.0.36", - "postcss-selector-parser": "^6.0.2", - "source-map": "~0.6.1", - "vue-template-es2015-compiler": "^1.9.0" - }, - "optionalDependencies": { - "prettier": "^1.18.2 || ^2.0.0" - } - }, - "node_modules/@vue/component-compiler-utils/node_modules/lru-cache": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", - "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", - "dev": true, - "dependencies": { - "pseudomap": "^1.0.2", - "yallist": "^2.1.2" - } - }, - "node_modules/@vue/component-compiler-utils/node_modules/picocolors": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", - "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", - "dev": true - }, - "node_modules/@vue/component-compiler-utils/node_modules/postcss": { - "version": "7.0.39", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", - "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", - "dev": true, - "dependencies": { - "picocolors": "^0.2.1", - "source-map": "^0.6.1" - }, - "engines": { - "node": ">=6.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - } - }, - "node_modules/@vue/component-compiler-utils/node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", - "dev": true, - "optional": true, - "bin": { - "prettier": "bin-prettier.js" - }, - "engines": { - "node": ">=10.13.0" - }, - "funding": { - "url": "https://github.com/prettier/prettier?sponsor=1" - } - }, - "node_modules/@vue/component-compiler-utils/node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/@vue/component-compiler-utils/node_modules/yallist": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", - "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==", - "dev": true - }, "node_modules/@vue/eslint-config-prettier": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz", @@ -5171,12 +5088,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/bluebird": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", - "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", - "dev": true - }, "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -5592,19 +5503,6 @@ "proto-list": "~1.2.1" } }, - "node_modules/consolidate": { - "version": "0.15.1", - "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz", - "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==", - "deprecated": "Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog", - "dev": true, - "dependencies": { - "bluebird": "^3.1.1" - }, - "engines": { - "node": ">= 0.10.0" - } - }, "node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", @@ -7631,12 +7529,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/hash-sum": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz", - "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==", - "dev": true - }, "node_modules/hasown": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", @@ -9058,24 +8950,6 @@ "resolved": "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz", "integrity": "sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==" }, - "node_modules/merge-source-map": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz", - "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==", - "dev": true, - "dependencies": { - "source-map": "^0.6.1" - } - }, - "node_modules/merge-source-map/node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -10039,12 +9913,6 @@ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" }, - "node_modules/pseudomap": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", - "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==", - "dev": true - }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -11021,6 +10889,15 @@ "url": "https://opencollective.com/svgo" } }, + "node_modules/svgo-extra": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/svgo-extra/-/svgo-extra-2.3.0.tgz", + "integrity": "sha512-eU1YDc2mGUvTrOakanwzggDDjfmycbkUhb4/+WVuPt5eIOGmcK5g+zsdj3TktthuHcOWZFXnkPTUPTVHWksuBA==", + "dev": true, + "peerDependencies": { + "svgo": "^3.0.2" + } + }, "node_modules/svgo/node_modules/commander": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", @@ -11776,17 +11653,19 @@ "node": ">=12" } }, - "node_modules/vite-plugin-vue2-svg": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/vite-plugin-vue2-svg/-/vite-plugin-vue2-svg-0.4.0.tgz", - "integrity": "sha512-Z9NT9PTGwEKMSfxruPeBeAgMWAgMz5DiE6u8ZNtkYXODGWceUi6Dhp/f0NFO02sEoDiDxkokzr8u4qK4+9rXJQ==", + "node_modules/vite-plugin-svg4vue": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/vite-plugin-svg4vue/-/vite-plugin-svg4vue-3.1.2.tgz", + "integrity": "sha512-UuR5gyo02iG6usaq90hxjePqspFFeYGNdCIIpKHuTJRR8leQt9ZcOtxH6U9KqoYTvTZW0D3GLcc6FXV3fg/Erw==", "dev": true, "dependencies": { - "@vue/component-compiler-utils": "^3.2.0", - "svgo": "^3.0.0" + "svgo": "^3.0.3", + "svgo-extra": "^2.1.0", + "ufo": "^1.3.2" }, "peerDependencies": { - "vue-template-compiler": "^2.2.0" + "vite": "^4.0.2 || ^5.0.0", + "vue": "^2.7.14 || ^3.2.45" } }, "node_modules/vitest": { @@ -11989,12 +11868,6 @@ "he": "^1.2.0" } }, - "node_modules/vue-template-es2015-compiler": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", - "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", - "dev": true - }, "node_modules/vue-toastification": { "version": "1.7.14", "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.14.tgz", diff --git a/frontend/package.json b/frontend/package.json index a3d9ed6b09e..2f4086bca16 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -112,7 +112,7 @@ "unplugin-vue-components": "0.27.0", "vite": "5.2.10", "vite-plugin-comlink": "4.0.3", - "vite-plugin-vue2-svg": "0.4.0", + "vite-plugin-svg4vue": "3.1.2", "vitest": "1.6.0", "vitest-canvas-mock": "0.3.3", "vue-template-compiler": "2.7.15" diff --git a/frontend/src/plugins/icons/BigScreen.vue b/frontend/src/plugins/icons/BigScreen.vue new file mode 100644 index 00000000000..224df3a13b6 --- /dev/null +++ b/frontend/src/plugins/icons/BigScreen.vue @@ -0,0 +1,7 @@ + + + diff --git a/frontend/src/plugins/icons/CeviLogo.vue b/frontend/src/plugins/icons/CeviLogo.vue new file mode 100644 index 00000000000..3d7e3efbfc6 --- /dev/null +++ b/frontend/src/plugins/icons/CeviLogo.vue @@ -0,0 +1,7 @@ + + + diff --git a/frontend/src/plugins/icons/ColumnLayout.vue b/frontend/src/plugins/icons/ColumnLayout.vue new file mode 100644 index 00000000000..c9686182f3b --- /dev/null +++ b/frontend/src/plugins/icons/ColumnLayout.vue @@ -0,0 +1,7 @@ + + + diff --git a/frontend/src/plugins/icons/GoogleLogo.vue b/frontend/src/plugins/icons/GoogleLogo.vue new file mode 100644 index 00000000000..a8d422174d5 --- /dev/null +++ b/frontend/src/plugins/icons/GoogleLogo.vue @@ -0,0 +1,7 @@ + + + diff --git a/frontend/src/plugins/icons/JublaLogo.vue b/frontend/src/plugins/icons/JublaLogo.vue new file mode 100644 index 00000000000..84565baee29 --- /dev/null +++ b/frontend/src/plugins/icons/JublaLogo.vue @@ -0,0 +1,7 @@ + + + diff --git a/frontend/src/plugins/icons/PaperSize.vue b/frontend/src/plugins/icons/PaperSize.vue new file mode 100644 index 00000000000..24e81d97fc4 --- /dev/null +++ b/frontend/src/plugins/icons/PaperSize.vue @@ -0,0 +1,7 @@ + + + diff --git a/frontend/src/plugins/icons/PbsLogo.vue b/frontend/src/plugins/icons/PbsLogo.vue new file mode 100644 index 00000000000..4e2e28ede98 --- /dev/null +++ b/frontend/src/plugins/icons/PbsLogo.vue @@ -0,0 +1,7 @@ + + + diff --git a/frontend/src/plugins/icons/ResponsiveLayout.vue b/frontend/src/plugins/icons/ResponsiveLayout.vue new file mode 100644 index 00000000000..a11cfc79948 --- /dev/null +++ b/frontend/src/plugins/icons/ResponsiveLayout.vue @@ -0,0 +1,7 @@ + + + diff --git a/frontend/src/plugins/icons/TentDay.vue b/frontend/src/plugins/icons/TentDay.vue new file mode 100644 index 00000000000..488c74094c4 --- /dev/null +++ b/frontend/src/plugins/icons/TentDay.vue @@ -0,0 +1,7 @@ + + + diff --git a/frontend/src/plugins/icons/eCampLogo.vue b/frontend/src/plugins/icons/eCampLogo.vue new file mode 100644 index 00000000000..10a69224c3a --- /dev/null +++ b/frontend/src/plugins/icons/eCampLogo.vue @@ -0,0 +1,7 @@ + + + diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js index dd478928da7..e2137c34db1 100644 --- a/frontend/src/plugins/vuetify.js +++ b/frontend/src/plugins/vuetify.js @@ -2,16 +2,16 @@ // src/plugins/vuetify.js import Vuetify from 'vuetify/lib' -import PbsLogo from '@/assets/PbsLogo.svg' -import GoogleLogo from '@/assets/GoogleLogo.svg' -import eCampLogo from '@/assets/eCampLogo.svg' -import CeviLogo from '@/assets/CeviLogo.svg' -import JublaLogo from '@/assets/JublaLogo.svg' -import TentDay from '@/assets/tents/TentDay.svg' -import PaperSize from '@/assets/icons/PaperSize.svg' -import BigScreen from '@/assets/icons/BigScreen.svg' -import ResponsiveLayout from '@/assets/icons/ResponsiveLayout.svg' -import ColumnLayout from '@/assets/icons/ColumnLayout.svg' +import PbsLogo from './icons/PbsLogo.vue' +import GoogleLogo from './icons/GoogleLogo.vue' +import eCampLogo from './icons/eCampLogo.vue' +import CeviLogo from './icons/CeviLogo.vue' +import JublaLogo from './icons/JublaLogo.vue' +import TentDay from './icons/TentDay.vue' +import PaperSize from './icons/PaperSize.vue' +import BigScreen from './icons/BigScreen.vue' +import ResponsiveLayout from './icons/ResponsiveLayout.vue' +import ColumnLayout from './icons/ColumnLayout.vue' import i18n from '@/plugins/i18n' import colors from 'vuetify/lib/util/colors' diff --git a/frontend/vite.config.js b/frontend/vite.config.mjs similarity index 98% rename from frontend/vite.config.js rename to frontend/vite.config.mjs index d7896b261e3..fb6847bfbc7 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.mjs @@ -1,12 +1,12 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue2' -import { createSvgPlugin } from 'vite-plugin-vue2-svg' import { comlink } from 'vite-plugin-comlink' import * as path from 'path' import { VuetifyResolver } from 'unplugin-vue-components/resolvers' import Components from 'unplugin-vue-components/vite' import { sentryVitePlugin } from '@sentry/vite-plugin' import { configDefaults } from 'vitest/config' +import { svg4VuePlugin } from "vite-plugin-svg4vue"; const plugins = [ comlink(), // must be first @@ -17,7 +17,7 @@ const plugins = [ VuetifyResolver(), ], }), - createSvgPlugin(), + svg4VuePlugin({skipSvgo: true}), ] const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN if (sentryAuthToken) {