From 4e053d98a011fddc3e976ff4fb86b0ea3b80500c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Micha=C5=82owski?= Date: Thu, 11 Jul 2024 21:32:45 +0200 Subject: [PATCH] frontend - moved to vue 2.7 and vite --- frontend/.eslintrc.js | 6 +- frontend/.postcssrc.js | 8 - frontend/Dockerfile | 6 +- frontend/babel.config.js | 2 +- frontend/index.html | 69 + frontend/package.json | 22 +- frontend/run/server.js | 2 +- .../src/assets/scss/custom/_variables.scss | 2 +- frontend/src/assets/scss/gradido.scss | 68 +- .../GddSend/TransactionConfirmationSend.vue | 4 +- .../components/GddSend/TransactionForm.vue | 4 +- frontend/src/config/index.js | 57 +- frontend/src/i18n.js | 24 +- frontend/src/main.js | 1 + frontend/test/testSetup.js | 2 +- frontend/vite.config.js | 20 + frontend/vue.config.js | 10 +- frontend/yarn.lock | 7023 ++--------------- 18 files changed, 742 insertions(+), 6588 deletions(-) delete mode 100644 frontend/.postcssrc.js create mode 100644 frontend/index.html create mode 100644 frontend/vite.config.js diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 80a0d2d22..c110c856c 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -4,9 +4,7 @@ module.exports = { browser: true, node: true, jest: true, - }, - parserOptions: { - parser: 'babel-eslint', + es2022: true, }, extends: [ 'standard', @@ -29,7 +27,7 @@ module.exports = { // add your custom rules here rules: { 'no-console': ['error'], - 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', + 'no-debugger': import.meta.env.NODE_ENV === 'production' ? 'error' : 'off', 'vue/component-name-in-template-casing': ['error', 'kebab-case'], 'vue/no-static-inline-styles': [ 'error', diff --git a/frontend/.postcssrc.js b/frontend/.postcssrc.js deleted file mode 100644 index 373f665cb..000000000 --- a/frontend/.postcssrc.js +++ /dev/null @@ -1,8 +0,0 @@ -// https://github.com/michael-ciniawsky/postcss-load-config - -module.exports = { - plugins: { - // to edit target browsers: use "browserslist" field in package.json - autoprefixer: {} - } -}; diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 4b21fd2ea..37bd1af74 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -98,13 +98,13 @@ COPY --from=build ${DOCKER_WORKDIR}/run ./run CMD /bin/sh -c "yarn run start" - + ## add `/usr/src/app/node_modules/.bin` to $PATH #ENV PATH /usr/src/app/node_modules/.bin:$PATH -# +# ## install and cache app dependencies #COPY package.json /usr/src/app/package.json #RUN npm install #RUN npm install -g @vue/cli ## start app -#CMD ["npm", "run", "serve"] \ No newline at end of file +#CMD ["npm", "run", "serve"] diff --git a/frontend/babel.config.js b/frontend/babel.config.js index fab7b82b8..28cb0d959 100644 --- a/frontend/babel.config.js +++ b/frontend/babel.config.js @@ -11,7 +11,7 @@ module.exports = function (api) { ], ] - if (process.env.NODE_ENV === 'test') { + if (import.meta.env.NODE_ENV === 'test') { plugins.push('transform-require-context') } diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 000000000..d69392f83 --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/frontend/package.json b/frontend/package.json index 879171697..516d37fef 100755 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,10 +4,10 @@ "private": true, "scripts": { "start": "node run/server.js", - "serve": "vue-cli-service serve --open", - "build": "vue-cli-service build", + "dev": "vite", + "build": "vite build", + "serve": "vite preview", "postbuild": "find build -type f -regex '.*\\.\\(html\\|js\\|css\\|svg\\|json\\)' -exec gzip -9 -k {} +", - "dev": "yarn run serve", "analyse-bundle": "yarn build && webpack-bundle-analyzer build/webpack.stats.json", "lint": "eslint --max-warnings=0 --ext .js,.vue,.json .", "stylelint": "stylelint --max-warnings=0 '**/*.{scss,vue}'", @@ -18,9 +18,11 @@ "@babel/core": "^7.13.13", "@babel/node": "^7.13.13", "@babel/preset-env": "^7.13.12", - "@vue/cli-plugin-unit-jest": "^4.5.12", + "@vitejs/plugin-vue": "^4.6.2", + "@vitejs/plugin-vue2": "^2.3.1", "@vue/test-utils": "^1.1.3", "apollo-boost": "^0.4.9", + "autoprefixer": "^10.4.19", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^27.3.1", "babel-preset-vue": "^2.0.2", @@ -38,7 +40,7 @@ "eslint-plugin-node": "^11.1.0", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-promise": "^4.3.1", - "eslint-plugin-vue": "^7.8.0", + "eslint-plugin-vue": "8.7.1", "express": "^4.17.1", "flatpickr": "^4.5.7", "flush-promises": "^1.0.2", @@ -53,7 +55,9 @@ "regenerator-runtime": "^0.13.7", "uuid": "^9.0.0", "vee-validate": "^3.4.5", - "vue": "2.6.12", + "vite": "3.2.10", + "vite-plugin-commonjs": "^0.10.1", + "vue": "2.7.16", "vue-apollo": "^3.0.7", "vue-avatar": "^2.3.3", "vue-flatpickr-component": "^8.1.2", @@ -70,11 +74,7 @@ "devDependencies": { "@apollo/client": "^3.7.4", "@intlify/eslint-plugin-vue-i18n": "^1.4.0", - "@vue/cli-plugin-babel": "^3.7.0", - "@vue/cli-plugin-eslint": "^3.7.0", - "@vue/cli-service": "^3.7.0", "@vue/eslint-config-prettier": "^4.0.1", - "babel-eslint": "^10.1.0", "babel-plugin-component": "^1.1.0", "babel-plugin-transform-require-context": "^0.1.1", "cross-env": "^7.0.3", @@ -84,12 +84,10 @@ "postcss-html": "^1.3.0", "postcss-scss": "^4.0.3", "sass": "1.32.13", - "sass-loader": "^10", "stats-webpack-plugin": "^0.7.0", "stylelint": "^14.5.3", "stylelint-config-recommended-vue": "^1.3.0", "stylelint-config-standard-scss": "^3.0.0", - "vue-cli-plugin-i18n": "^1.0.1", "vue-html-webpack-plugin": "^3.2.2", "vue-template-compiler": "^2.6.11", "webpack-bundle-analyzer": "^4.5.0" diff --git a/frontend/run/server.js b/frontend/run/server.js index 4a49dcd75..98d11ee7e 100644 --- a/frontend/run/server.js +++ b/frontend/run/server.js @@ -4,7 +4,7 @@ const path = require('path') // Host & Port const hostname = '127.0.0.1' -const port = process.env.PORT || 3000 +const port = import.meta.env.PORT || 3000 // Express Server const app = express() diff --git a/frontend/src/assets/scss/custom/_variables.scss b/frontend/src/assets/scss/custom/_variables.scss index a17320d1d..6182a22f2 100644 --- a/frontend/src/assets/scss/custom/_variables.scss +++ b/frontend/src/assets/scss/custom/_variables.scss @@ -978,4 +978,4 @@ $btn-border-radius-sm: $input-border-radius !default; // Import Bootstrap variable defaults -@import "~bootstrap/scss/variables"; +@import "bootstrap/scss/variables"; diff --git a/frontend/src/assets/scss/gradido.scss b/frontend/src/assets/scss/gradido.scss index 2277cfbc6..d5263ac4b 100644 --- a/frontend/src/assets/scss/gradido.scss +++ b/frontend/src/assets/scss/gradido.scss @@ -1,55 +1,55 @@ // Bootstrap (4.5.3) functions -@import "~bootstrap/scss/functions"; +@import "bootstrap/scss/functions"; @import "custom/variables"; // @import "~bootstrap/scss/variables"; wird am // ende der custom/variables angehangen // Bootstrap (4.5.3) mixins -@import "~bootstrap/scss/mixins"; +@import "bootstrap/scss/mixins"; // Bootstrap (4.5.3) components -@import "~bootstrap/scss/alert"; -@import "~bootstrap/scss/badge"; -@import "~bootstrap/scss/dropdown"; -@import "~bootstrap/scss/button-group"; -@import "~bootstrap/scss/buttons"; -@import "~bootstrap/scss/card"; -@import "~bootstrap/scss/carousel"; -@import "~bootstrap/scss/close"; -@import "~bootstrap/scss/code"; -@import "~bootstrap/scss/custom-forms"; +@import "bootstrap/scss/alert"; +@import "bootstrap/scss/badge"; +@import "bootstrap/scss/dropdown"; +@import "bootstrap/scss/button-group"; +@import "bootstrap/scss/buttons"; +@import "bootstrap/scss/card"; +@import "bootstrap/scss/carousel"; +@import "bootstrap/scss/close"; +@import "bootstrap/scss/code"; +@import "bootstrap/scss/custom-forms"; // @import "~bootstrap/scss/dropdown"; -@import "~bootstrap/scss/forms"; +@import "bootstrap/scss/forms"; // @import "~bootstrap/scss/functions"; -@import "~bootstrap/scss/grid"; -@import "~bootstrap/scss/input-group"; -@import "~bootstrap/scss/list-group"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/input-group"; +@import "bootstrap/scss/list-group"; // @import "~bootstrap/scss/mixins"; -@import "~bootstrap/scss/modal"; -@import "~bootstrap/scss/nav"; -@import "~bootstrap/scss/navbar"; -@import "~bootstrap/scss/pagination"; -@import "~bootstrap/scss/print"; -@import "~bootstrap/scss/progress"; -@import "~bootstrap/scss/reboot"; -@import "~bootstrap/scss/tables"; -@import "~bootstrap/scss/toasts"; -@import "~bootstrap/scss/tooltip"; -@import "~bootstrap/scss/transitions"; -@import "~bootstrap/scss/type"; -@import "~bootstrap/scss/utilities"; -@import "~bootstrap/scss/variables"; -@import "~bootstrap/scss/bootstrap-grid"; -@import "~bootstrap/scss/bootstrap-reboot"; -@import "~bootstrap/scss/bootstrap"; +@import "bootstrap/scss/modal"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/navbar"; +@import "bootstrap/scss/pagination"; +@import "bootstrap/scss/print"; +@import "bootstrap/scss/progress"; +@import "bootstrap/scss/reboot"; +@import "bootstrap/scss/tables"; +@import "bootstrap/scss/toasts"; +@import "bootstrap/scss/tooltip"; +@import "bootstrap/scss/transitions"; +@import "bootstrap/scss/type"; +@import "bootstrap/scss/utilities"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/bootstrap-grid"; +@import "bootstrap/scss/bootstrap-reboot"; +@import "bootstrap/scss/bootstrap"; // Bootstrap-vue (2.21.1) scss -@import "~bootstrap-vue/src/index"; +@import "bootstrap-vue/src/index"; @import "gradido-template"; @import "gradido-template-dark"; diff --git a/frontend/src/components/GddSend/TransactionConfirmationSend.vue b/frontend/src/components/GddSend/TransactionConfirmationSend.vue index caa40d128..6b5105761 100644 --- a/frontend/src/components/GddSend/TransactionConfirmationSend.vue +++ b/frontend/src/components/GddSend/TransactionConfirmationSend.vue @@ -66,7 +66,7 @@