feat: update to vue 3 (#499)

Co-authored-by: Víctor CG <[email protected]>
Co-authored-by: Jose A. Cabaneros <[email protected]>
Co-authored-by: Víctor CG <[email protected]>

.cypress-cucumber-preprocessorrc.json

@@ -1,4 +1,3 @@
 {
-    "nonGlobalStepDefinitions": false,
-    "stepDefinitions": "tests/e2e/cucumber"
+  "stepDefinitions": "tests/e2e/**/*.spec.ts"
 }

.eslintrc

@@ -1,6 +1,15 @@
 {
   "extends": ["plugin:@empathyco/x/all"],
   "rules": {
-    "vuejs-accessibility/no-autofocus": "off"
-  }
+    "vuejs-accessibility/no-autofocus": "off",
+    "vue/multi-word-component-names": "off"
+  },
+  "overrides": [
+    {
+      "files": ["*-icon*.vue", "logo.vue"],
+      "rules": {
+        "max-len": "off"
+      }
+    }
+  ]
 }

.gitignore

@@ -5,6 +5,7 @@ stats.html
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/
+/tests/e2e/downloads/
 
 # local env files
 .env.local

.npmrc

@@ -1 +1,2 @@
+@empathyco:registry=https://registry.npmjs.org/
 legacy-peer-deps=true

build/instrumentation.build.mjs

@@ -2,6 +2,7 @@ import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
+import * as fs from 'fs';
 import path from 'path';
 import copy from 'rollup-plugin-copy';
 import del from 'rollup-plugin-delete';
@@ -11,22 +12,23 @@ import styles from 'rollup-plugin-styles';
 import { terser } from 'rollup-plugin-terser';
 import typescript from 'rollup-plugin-typescript2';
 import { visualizer } from 'rollup-plugin-visualizer';
-import vue from 'rollup-plugin-vue';
-import * as fs from 'fs';
+import vue3 from '@vitejs/plugin-vue';
 
 /**
- * Creates a rollup configuration for projects that use X-Components. This configuration can be customized with the options object.
+ * Creates a rollup configuration for projects that use X-Components. This configuration can be
+ * customized with the options object.
  *
  * @param {boolean} extractCss - If true, the build will generate a `.css` and a `.js` file.
- * @param {string} outputCss - If `extractCss` is true, the build will generate a `.css` in this path.
- * @param {import('rollup').InputOptions} input - Overrides the entry file. Check http://rollupjs.org/guide/en/#input
- * @param {import('rollup').OutputOptions} output - Overrides the output settings. Check http://rollupjs.org/guide/en/#outputdir
- * @param {Record<string, Record<string, unknown>>} plugins - A dictionary that allows overriding specific plugin configurations.
+ * @param {import('rollup').InputOptions} input - Overrides the entry file. Check
+ *   http://rollupjs.org/guide/en/#input
+ * @param {import('rollup').OutputOptions} output - Overrides the output settings. Check
+ *   http://rollupjs.org/guide/en/#outputdir
+ * @param {Record<string, Record<string, unknown>>} plugins - A dictionary that allows overriding
+ *   specific plugin configurations.
  *
  * @returns {import('rollup').RollupOptions}
  */
 export function createConfig({
-  outputCss = './styles.css',
   input = path.join(process.cwd(), 'src/main.ts'),
   output,
   plugins = {},
@@ -74,9 +76,9 @@ export function createConfig({
       replace(
         mergeConfig('replace', {
           'process.env.NODE_ENV': JSON.stringify('production'),
-          'process.env.VUE_APP_DEVELOPMENT_DOCKER': process.env.VUE_APP_DEVELOPMENT_DOCKER
-            ? JSON.stringify(true)
-            : JSON.stringify(false),
+          'process.env.VUE_APP_DEVELOPMENT_DOCKER': JSON.stringify(
+            !!process.env.VUE_APP_DEVELOPMENT_DOCKER
+          ),
           STRIP_SSR_INJECTOR: true,
           preventAssignment: true
         })
@@ -88,17 +90,16 @@ export function createConfig({
         })
       ),
       // Code transpiling plugins
-      vue(
-        mergeConfig('vue', {
-          css: false,
-          needMap: false,
+      vue3(
+        mergeConfig('vue3', {
           template: {
             compilerOptions: {
               whitespace: 'condense'
             }
           }
         })
       ),
+      styles(mergeConfig('styles')),
       typescript(
         mergeConfig('typescript', {
           tsconfigOverride: {
@@ -107,28 +108,16 @@ export function createConfig({
         })
       ),
       json(),
-      styles(
-        mergeConfig('styles', {
-          mode: [
-            'inject',
-            (varname, id) =>
-              // For this to work on windows systems, the `id` which is a file path has to replace the backslashes with
-              // another symbol like forward slashes.
-              // eslint-disable-next-line max-len
-              `import {createInjector} from 'vue-runtime-helpers';const injector=createInjector({});injector('${id.replace(
-                /\\/g,
-                ''
-              )}',{source:${varname}})`
-          ]
-        })
-      ),
       htmlTemplate(
         mergeConfig('htmlTemplate', {
-          template: path.resolve(process.cwd(), 'public/index.html'),
+          template: path.resolve(process.cwd(), 'index.html'),
+          // Replace vars to make compatible the same `index.html` for dev Vite & build Rollup.
           replaceVars: {
-            '<%= htmlWebpackPlugin.options.__injectedHome__ %>': fs.readFileSync(
-              'node_modules/@empathyco/x-archetype-utils/dist/home/home-template.html'
-            )
+            '<script type="module" src="./src/main.ts"></script>': '',
+            '<load src="node_modules/@empathyco/x-archetype-utils/dist/home/home-template.html" />':
+              fs.readFileSync(
+                'node_modules/@empathyco/x-archetype-utils/dist/home/home-template.html'
+              )
           },
           attrs: ["type='module'"]
         })

cypress.config.ts

@@ -1,21 +1,33 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from 'cypress';
+import createBundler from '@bahmutov/cypress-esbuild-preprocessor';
+import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
+import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild';
 
 export default defineConfig({
-  defaultCommandTimeout: 7000,
-  fixturesFolder: 'tests/e2e/fixtures',
-  screenshotsFolder: 'tests/e2e/screenshots',
-  screenshotOnRunFailure: false,
-  video: false,
-  retries: 1,
-  includeShadowDom: true,
   e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
-    setupNodeEvents(on, config) {
-      return require('./tests/e2e/plugins/index.js')(on, config)
-    },
     baseUrl: 'http://localhost:8080',
+    defaultCommandTimeout: 7000,
+    requestTimeout: 7000,
+    viewportHeight: 1080,
+    viewportWidth: 1920,
     specPattern: 'tests/e2e/cucumber/**/*.feature',
     supportFile: 'tests/e2e/support/index.ts',
-  },
-})
+    fixturesFolder: 'tests/e2e/fixtures',
+    screenshotsFolder: 'tests/e2e/screenshots',
+    downloadsFolder: 'tests/e2e/downloads',
+    experimentalRunAllSpecs: true,
+    screenshotOnRunFailure: false,
+    video: false,
+    retries: 1,
+    // https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/quick-start.md
+    async setupNodeEvents(on, config) {
+      // This is required for the preprocessor to be able to generate JSON reports after each run, and more.
+      await addCucumberPreprocessorPlugin(on, config);
+
+      on('file:preprocessor', createBundler({ plugins: [createEsbuildPlugin(config)] }));
+
+      // Make sure to return the config object as it might have been modified by the plugin.
+      return config;
+    }
+  }
+});

public/index.html → index.html

@@ -23,9 +23,10 @@
     </style>
   </head>
   <body>
-    <%= htmlWebpackPlugin.options.__injectedHome__ %>
     <script src="./snippet-script.js"></script>
     <script type="module" src="https://assets.motive.co/wysiwyg/wysiwyg.js"></script>
     <!-- built files will be auto injected -->
+    <script type="module" src="./src/main.ts"></script>
+    <load src="node_modules/@empathyco/x-archetype-utils/dist/home/home-template.html" />
   </body>
 </html>