From 5def136d9a6c17ba98586d075ee06fcb68e90fb0 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 26 Sep 2023 17:25:35 +0200 Subject: [PATCH 01/82] build: move from Vue CLI to Vite --- .prettierrc.js | 1 - babel.config.js | 3 -- cypress.json | 3 -- public/index.html => index.html | 3 +- jest.config.js | 3 -- jsconfig.json | 19 ------------- package.json | 33 ++++------------------ src/App.vue | 2 +- tests/e2e/.eslintrc.js | 10 ------- tests/e2e/plugins/index.js | 25 ----------------- tests/e2e/specs/test.js | 8 ------ tests/e2e/support/commands.js | 25 ----------------- tests/e2e/support/index.js | 20 ------------- tests/unit/example.spec.js | 12 -------- vite.config.js | 50 +++++++++++++++++++++++++++++++++ vue.config.js | 4 --- 16 files changed, 59 insertions(+), 162 deletions(-) delete mode 100644 babel.config.js delete mode 100644 cypress.json rename public/index.html => index.html (96%) delete mode 100644 jest.config.js delete mode 100644 jsconfig.json delete mode 100644 tests/e2e/.eslintrc.js delete mode 100644 tests/e2e/plugins/index.js delete mode 100644 tests/e2e/specs/test.js delete mode 100644 tests/e2e/support/commands.js delete mode 100644 tests/e2e/support/index.js delete mode 100644 tests/unit/example.spec.js create mode 100644 vite.config.js delete mode 100644 vue.config.js diff --git a/.prettierrc.js b/.prettierrc.js index 6ac17b64..4012c3be 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,5 +1,4 @@ module.exports = { - // jsxBracketSameLine: true, semi: false, trailingComma: "all", singleQuote: true, diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index c1b783ea..00000000 --- a/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: ['@vue/cli-plugin-babel/preset'], -} diff --git a/cypress.json b/cypress.json deleted file mode 100644 index 470c7201..00000000 --- a/cypress.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "pluginsFile": "tests/e2e/plugins/index.js" -} diff --git a/public/index.html b/index.html similarity index 96% rename from public/index.html rename to index.html index 73a19d5b..2cf5a46c 100644 --- a/public/index.html +++ b/index.html @@ -44,7 +44,8 @@ -
+
+ diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index 2dac575d..00000000 --- a/jest.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - preset: '@vue/cli-plugin-unit-jest', -} diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index 4aafc5f6..00000000 --- a/jsconfig.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "module": "esnext", - "baseUrl": "./", - "moduleResolution": "node", - "paths": { - "@/*": [ - "src/*" - ] - }, - "lib": [ - "esnext", - "dom", - "dom.iterable", - "scripthost" - ] - } -} diff --git a/package.json b/package.json index 0fcfa430..4b1b5503 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,9 @@ "license": "MIT", "author": "The CoreUI Team (https://github.com/orgs/coreui/people)", "scripts": { - "build": "vue-cli-service build", - "lint": "vue-cli-service lint", - "serve": "vue-cli-service serve", - "test:e2e": "vue-cli-service test:e2e", - "test:unit": "vue-cli-service test:unit" + "dev": "vite", + "build": "vite build", + "preview": "vite preview" }, "dependencies": { "@coreui/chartjs": "^3.1.2", @@ -26,32 +24,13 @@ "@coreui/utils": "^2.0.2", "@coreui/vue": "^4.9.0-beta.1", "@coreui/vue-chartjs": "2.1.0", - "core-js": "^3.31.0", "vue": "^3.3.4", "vue-router": "^4.2.2", "vuex": "^4.1.0" }, "devDependencies": { - "@babel/core": "^7.22.5", - "@babel/eslint-parser": "^7.22.5", - "@vue/cli-plugin-babel": "~5.0.8", - "@vue/cli-plugin-e2e-cypress": "~5.0.8", - "@vue/cli-plugin-eslint": "~5.0.8", - "@vue/cli-plugin-router": "~5.0.8", - "@vue/cli-plugin-unit-jest": "~5.0.8", - "@vue/cli-plugin-vuex": "~5.0.8", - "@vue/cli-service": "~5.0.8", - "@vue/test-utils": "^2.3.2", - "@vue/vue3-jest": "^29.2.4", - "babel-jest": "^29.5.0", - "cypress": "^12.14.0", - "eslint": "^8.42.0", - "eslint-config-prettier": "^8.8.0", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-vue": "^9.14.1", - "jest": "^29.5.0", - "prettier": "^2.8.8", - "sass": "^1.63.3", - "sass-loader": "^13.3.2" + "@vitejs/plugin-vue": "^4.2.3", + "sass": "^1.68.0", + "vite": "^4.4.5" } } diff --git a/src/App.vue b/src/App.vue index facb9cf4..3bf695b5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,7 +15,7 @@ export default { onBeforeMount(() => { const urlParams = new URLSearchParams(window.location.href.split('?')[1]) - const theme = urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0] + const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0] if (theme) { setColorMode(theme) return diff --git a/tests/e2e/.eslintrc.js b/tests/e2e/.eslintrc.js deleted file mode 100644 index a3e436bc..00000000 --- a/tests/e2e/.eslintrc.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - plugins: ['cypress'], - env: { - mocha: true, - 'cypress/globals': true, - }, - rules: { - strict: 'off', - }, -} diff --git a/tests/e2e/plugins/index.js b/tests/e2e/plugins/index.js deleted file mode 100644 index 3cd3f22c..00000000 --- a/tests/e2e/plugins/index.js +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-disable arrow-body-style */ -// https://docs.cypress.io/guides/guides/plugins-guide.html - -// if you need a custom webpack configuration you can uncomment the following import -// and then use the `file:preprocessor` event -// as explained in the cypress docs -// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples - -// /* eslint-disable import/no-extraneous-dependencies, global-require */ -// const webpack = require('@cypress/webpack-preprocessor') - -module.exports = (on, config) => { - // on('file:preprocessor', webpack({ - // webpackOptions: require('@vue/cli-service/webpack.config'), - // watchOptions: {} - // })) - - return Object.assign({}, config, { - fixturesFolder: 'tests/e2e/fixtures', - integrationFolder: 'tests/e2e/specs', - screenshotsFolder: 'tests/e2e/screenshots', - videosFolder: 'tests/e2e/videos', - supportFile: 'tests/e2e/support/index.js', - }) -} diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js deleted file mode 100644 index 41ad94a0..00000000 --- a/tests/e2e/specs/test.js +++ /dev/null @@ -1,8 +0,0 @@ -// https://docs.cypress.io/api/introduction/api.html - -describe('My First Test', () => { - it('Visits the app root url', () => { - cy.visit('/') - cy.contains('h1', 'Welcome to Your Vue.js App') - }) -}) diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js deleted file mode 100644 index c1f5a772..00000000 --- a/tests/e2e/support/commands.js +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add("login", (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This is will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/tests/e2e/support/index.js b/tests/e2e/support/index.js deleted file mode 100644 index d68db96d..00000000 --- a/tests/e2e/support/index.js +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands' - -// Alternatively you can use CommonJS syntax: -// require('./commands') diff --git a/tests/unit/example.spec.js b/tests/unit/example.spec.js deleted file mode 100644 index 6eac19b1..00000000 --- a/tests/unit/example.spec.js +++ /dev/null @@ -1,12 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import HelloWorld from '@/components/HelloWorld.vue' - -describe('HelloWorld.vue', () => { - it('renders props.msg when passed', () => { - const msg = 'new message' - const wrapper = shallowMount(HelloWorld, { - props: { msg }, - }) - expect(wrapper.text()).toMatch(msg) - }) -}) diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 00000000..9bfa1e73 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,50 @@ +import { defineConfig, loadEnv } from 'vite' +import vue from '@vitejs/plugin-vue' +import path from 'node:path' + +export default defineConfig(({ mode }) => { + // Load .env + const env = loadEnv(mode, process.cwd(), '') + process.env = { ...process.env, ...env } + + return { + plugins: [vue()], + resolve: { + alias: [ + // webpack path resolve to vitejs + { + find: /^~(.*)$/, + replacement: '$1', + }, + { + find: '@/', + replacement: `${path.resolve(__dirname, 'src')}/`, + }, + { + find: '@', + replacement: path.resolve(__dirname, '/src'), + }, + ], + extensions: [ + '.mjs', + '.js', + '.ts', + '.jsx', + '.tsx', + '.json', + '.vue', + '.scss', + ], + }, + server: { + port: 3000, + proxy: { + // https://vitejs.dev/config/server-options.html + }, + }, + define: { + // vitejs does not support process.env so we have to redefine it + 'process.env': process.env, + }, + } +}) diff --git a/vue.config.js b/vue.config.js deleted file mode 100644 index 523a634b..00000000 --- a/vue.config.js +++ /dev/null @@ -1,4 +0,0 @@ -const { defineConfig } = require('@vue/cli-service') -module.exports = defineConfig({ - transpileDependencies: true, -}) From d9ec6a488f9a88adeb8268c82bc9b33b68f96321 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 26 Sep 2023 17:57:51 +0200 Subject: [PATCH 02/82] build: update eslint and prettier config --- .eslintrc.js | 31 ++++--------------------------- .prettierrc.js | 3 ++- package.json | 3 +++ 3 files changed, 9 insertions(+), 28 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index f19d1539..30cc92be 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,30 +1,7 @@ module.exports = { - root: true, - env: { - node: true, - }, - extends: [ - 'plugin:vue/vue3-essential', - 'eslint:recommended', - 'plugin:prettier/recommended', - ], - parserOptions: { - parser: '@babel/eslint-parser', - }, + extends: ["plugin:vue/vue3-recommended", "eslint:recommended"], rules: { - 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', - 'vue/multi-word-component-names': 'off', + "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", + "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", }, - overrides: [ - { - files: [ - '**/__tests__/*.{j,t}s?(x)', - '**/tests/unit/**/*.spec.{j,t}s?(x)', - ], - env: { - jest: true, - }, - }, - ], -} +}; diff --git a/.prettierrc.js b/.prettierrc.js index 4012c3be..61281d24 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -2,5 +2,6 @@ module.exports = { semi: false, trailingComma: "all", singleQuote: true, - tabWidth: 2 + printWidth: 100, + tabWidth: 2, }; diff --git a/package.json b/package.json index 4b1b5503..c77bc748 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "scripts": { "dev": "vite", "build": "vite build", + "lint": "eslint \"src/**/*.{js,vue}\"", "preview": "vite preview" }, "dependencies": { @@ -30,6 +31,8 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^4.2.3", + "eslint": "^8.50.0", + "eslint-plugin-vue": "^9.17.0", "sass": "^1.68.0", "vite": "^4.4.5" } From 3a6356e5b4f130096089ef61ea2382968e13d19f Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 26 Sep 2023 17:58:17 +0200 Subject: [PATCH 03/82] chore: improve syntax --- src/App.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/App.vue b/src/App.vue index 3bf695b5..ce9a7185 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,7 +15,9 @@ export default { onBeforeMount(() => { const urlParams = new URLSearchParams(window.location.href.split('?')[1]) - const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0] + const theme = + urlParams.get('theme') && + urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0] if (theme) { setColorMode(theme) return From d7b5c37874742e0109666517623b021c35589572 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 26 Sep 2023 18:00:14 +0200 Subject: [PATCH 04/82] chore: exclude vite.config.js --- .eslintignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintignore b/.eslintignore index baca311b..fc6857ad 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,4 @@ node_modules/* /dist/** .eslintrc.js +vite.config.js From c60551ed2eeaac7d2ee1eacb200c56b0bf5b9053 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 26 Sep 2023 20:11:34 +0200 Subject: [PATCH 05/82] build: add autoprefixer --- package.json | 2 ++ vite.config.js | 8 ++++++++ 2 files changed, 10 insertions(+) diff --git a/package.json b/package.json index c77bc748..ea90671f 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,10 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^4.2.3", + "autoprefixer": "^10.4.16", "eslint": "^8.50.0", "eslint-plugin-vue": "^9.17.0", + "postcss": "^8.4.30", "sass": "^1.68.0", "vite": "^4.4.5" } diff --git a/vite.config.js b/vite.config.js index 9bfa1e73..1eb7400e 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,6 +1,7 @@ import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'node:path' +import autoprefixer from 'autoprefixer' export default defineConfig(({ mode }) => { // Load .env @@ -9,6 +10,13 @@ export default defineConfig(({ mode }) => { return { plugins: [vue()], + css: { + postcss: { + plugins: [ + autoprefixer({}) // add options if needed + ], + } + }, resolve: { alias: [ // webpack path resolve to vitejs From 50645fce23bdf250e3c8d4d8ba652d1a71ffe2dc Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 26 Sep 2023 20:12:34 +0200 Subject: [PATCH 06/82] chore: update `@coreui/coreui` and `@coreui/vue` to the latest versions --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ea90671f..bd3952e0 100644 --- a/package.json +++ b/package.json @@ -19,11 +19,11 @@ }, "dependencies": { "@coreui/chartjs": "^3.1.2", - "@coreui/coreui": "^4.3.0-beta.0", + "@coreui/coreui": "^5.0.0-alpha.2", "@coreui/icons": "^3.0.1", "@coreui/icons-vue": "2.0.0", "@coreui/utils": "^2.0.2", - "@coreui/vue": "^4.9.0-beta.1", + "@coreui/vue": "^5.0.0-alpha.0", "@coreui/vue-chartjs": "2.1.0", "vue": "^3.3.4", "vue-router": "^4.2.2", From 9fcca654fb1f705c92180168234d1ed35a75d525 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 26 Sep 2023 23:35:16 +0200 Subject: [PATCH 07/82] refactor: update layout --- src/components/AppHeader.vue | 17 ++++++++-------- src/components/AppSidebar.vue | 37 ++++++++++++++++++++--------------- src/layouts/DefaultLayout.vue | 2 +- src/styles/_custom.scss | 34 +++++++++++++++++++++++++++++++- src/styles/_layout.scss | 16 +++++++++++++++ 5 files changed, 79 insertions(+), 27 deletions(-) diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 7b3d9fb8..d32a9ed3 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -1,6 +1,6 @@