feat: migrate from vue-cli to vite (#1350)

Co-authored-by: Diego Pascual <[email protected]>
empathyco · Nov 13, 2023 · 52a3b6e · 52a3b6e
1 parent 1096966
commit 52a3b6e
Show file tree

Hide file tree

Showing 11 changed files with 3,645 additions and 11,464 deletions.
diff --git a/.github/actions/run-e2e-tests/action.yml b/.github/actions/run-e2e-tests/action.yml
@@ -10,7 +10,7 @@ runs:
       with:
         install: false
         browser: chrome
-        start: npm run serve
+        start: npm run preview
         working-directory: packages/x-components
 
     - name: Cypress run X Components component

diff --git a/packages/react-wrapper/package.json b/packages/react-wrapper/package.json
@@ -57,7 +57,7 @@
     "start-server-and-test": "~2.0.0",
     "ts-jest": "~27.1.0",
     "typescript": "~4.9.4",
-    "vite": "~4.3.0",
+    "vite": "~4.5.0",
     "vue": "~2.7.14"
   },
   "publishConfig": {

diff --git a/packages/x-components/cypress.config.ts b/packages/x-components/cypress.config.ts
@@ -44,8 +44,8 @@ export default defineConfig({
       runMode: 1
     },
     devServer: {
-      bundler: 'webpack',
-      framework: 'vue-cli'
+      framework: 'vue',
+      bundler: 'vite'
     }
   }
 });
diff --git a/packages/x-components/public/index.html → packages/x-components/index.html b/packages/x-components/public/index.html → packages/x-components/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <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" />
     <title>x-components-demo</title>
     <!-- If different fonts are needed, please remove this and add the new ones -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -17,5 +17,6 @@
   <body dir="ltr">
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script type="module" src="./src/main.ts"></script>
   </body>
 </html>
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
@@ -43,9 +43,10 @@
     "node": ">=18"
   },
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vite",
+    "preview": "vite build && vite preview",
     "build": "ts-node --project ./build/tsconfig.json ./build/build.ts",
-    "build:website": "vue-cli-service build",
+    "build:website": "vite build",
     "postbuild": "pnpm pack --pack-destination ..",
     "gen:docs": "rimraf ./docs && pnpm run gen:typescript-docs && pnpm run gen:component-docs",
     "gen:typescript-docs": "api-documenter markdown --input-folder dist/report --output-folder docs/API-reference/api",
@@ -56,10 +57,11 @@
     "test:unit-cypress": "cypress run --component --browser chrome",
     "test:unit-coverage": "jest --coverage",
     "test:unit-watch": "jest --watch",
-    "test:e2e": "vue-cli-service test:e2e --e2e --browser chrome",
-    "test:e2e:firefox": "vue-cli-service test:e2e --e2e --browser firefox",
-    "test:e2e:ci": "vue-cli-service test:e2e --headless --browser chrome",
+    "test:e2e": "start-server-and-test preview http://localhost:8080 cypress:open",
+    "test:e2e:firefox": "start-server-and-test serve http://localhost:8080 cypress:open:firefox",
+    "test:e2e:ci": "start-server-and-test serve http://localhost:8080 cypress:open:ci",
     "test": "pnpm run test:unit && pnpm run test:e2e:ci",
+    "cypress:open:ci": "cypress open --e2e --headless --browser chrome",
     "cypress:open": "cypress open --e2e --browser chrome",
     "cypress:open:firefox": "cypress open --e2e --browser firefox",
     "cypress:open:component": "cypress open --component --browser chrome",
@@ -102,10 +104,7 @@
     "@types/jest": "~27.5.0",
     "@types/node": "~18.16.0",
     "@types/testing-library__jest-dom": "~5.14.5",
-    "@vue/cli-plugin-e2e-cypress": "~5.0.8",
-    "@vue/cli-plugin-typescript": "~5.0.8",
-    "@vue/cli-plugin-vuex": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
+    "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/test-utils": "~1.0.3",
     "@vue/vue2-jest": "~27.0.0-alpha.3",
     "autoprefixer": "~10.4.4",
@@ -128,11 +127,13 @@
     "rollup-plugin-typescript2": "~0.34.1",
     "rollup-plugin-vue": "~5.1.9",
     "sass": "~1.62.0",
-    "sass-loader": "~13.3.0",
+    "start-server-and-test": "~2.0.0",
     "tailwindcss": "~3.3.0",
     "ts-jest": "~27.1.0",
     "ts-node": "~10.9.1",
     "typescript": "~4.9.4",
+    "vite": "^4.5.0",
+    "vite-plugin-vue-inspector": "^4.0.0",
     "vue": "~2.7.14",
     "vue-docgen-cli": "~4.67.0",
     "vue-router": "~3.6.5",

diff --git a/packages/x-components/tests/e2e/preselected-filters/preselected-filters.spec.ts b/packages/x-components/tests/e2e/preselected-filters/preselected-filters.spec.ts
@@ -15,7 +15,7 @@ Given('an application with {string} filter preselected', (preselectedFilter: str
   });
   // TODO: Check why we need to wait a few ms so the preselected are actually pushed into the url
   // eslint-disable-next-line cypress/no-unnecessary-waiting
-  cy.wait(30);
+  cy.wait(200);
 });
 
 Then('filter {string} is selected', function (filterLabel: string) {

diff --git a/packages/x-components/tsconfig.eslint.json b/packages/x-components/tsconfig.eslint.json
@@ -3,6 +3,12 @@
   "compilerOptions": {
     "noEmit": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tailwind.config.ts"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tailwind.config.ts",
+    "vite.config.ts"
+  ],
   "exclude": ["node_modules"]
 }
diff --git a/packages/x-components/vite.config.ts b/packages/x-components/vite.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue2';
+import Inspector from 'vite-plugin-vue-inspector';
+
+const vueDocsPlugin = {
+  name: 'vue-docs',
+  transform(code: string, id: string) {
+    return !/vue&type=docs/.test(id) ? undefined : `export default ''`;
+  }
+};
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDocsPlugin,
+    Inspector({
+      vue: 2
+    })
+  ],
+  resolve: {
+    alias: {
+      'vue-runtime-helpers': 'node_modules/vue-runtime-helpers'
+    }
+  },
+  server: {
+    port: 8080
+  },
+  preview: {
+    port: 8080
+  },
+  optimizeDeps: {
+    exclude: ['@empathyco/x-components']
+  }
+});
diff --git a/packages/x-components/vue.config.js b/packages/x-components/vue.config.js
diff --git a/packages/x-tailwindcss/package.json b/packages/x-tailwindcss/package.json
@@ -67,7 +67,7 @@
     "rollup-plugin-vue": "~5.1.9",
     "tailwindcss": "~3.3.0",
     "typescript": "~4.9.4",
-    "vite": "~4.3.0",
+    "vite": "~4.5.0",
     "vite-plugin-vue2": "~2.0.2",
     "vue": "~2.7.14",
     "vue-class-component": "~7.2.6",