Migrate to ES6 modules

Configure project to use ES6 modules to enable top-level await
capabilities. This change helps project to align well with modern JS
standards.

- Set `type` to `module` in `package.json`.
- Use import/export syntax in Cypress configuration files.
- Rename configurations files that do not support modules to use
  the `.cjs` extension:
  - `vue.config.js` to `vue.config.cjs` (vuejs/vue-cli#4477).
  - `babel.config.js` to `babel.config.cjs (babel/babel-loader#894)
  - `.eslintrc.js` to `.eslintrc.cjs` (eslint/eslint#13440,
    eslint/eslint#14137)
  - `postcss.config.js` to `postcss.config.cjs` (postcss/postcss#1771)
- Provide a workaround for Vue CLI & Mocha ES6 modules conflict in
  Vue configuration file (vuejs/vue-cli#7417).

cypress.config.ts

@@ -1,4 +1,5 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from 'cypress';
+import setupPlugins from './tests/e2e/plugins/index.js';
 
 export default defineConfig({
   fixturesFolder: 'tests/e2e/fixtures',
@@ -6,7 +7,7 @@ export default defineConfig({
   videosFolder: 'tests/e2e/videos',
   e2e: {
     setupNodeEvents(on, config) {
-      return require('./tests/e2e/plugins/index.js')(on, config)
+      return setupPlugins(on, config);
     },
     specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
     supportFile: 'tests/e2e/support/index.js',

docs/presentation.md

@@ -25,9 +25,9 @@ The presentation layer uses an event-driven architecture for bidirectional react
   - [**`electron/`**](./../src/presentation/electron/): Electron configuration for the desktop application.
     - [**`main.ts`**](./../src/presentation/main.ts): Main process of Electron, started as first thing when app starts.
 - [**`/public/`**](./../public/): Contains static assets that are directly copied and do not go through webpack.
-- [**`/vue.config.js`**](./../vue.config.js): Global Vue CLI configurations loaded by `@vue/cli-service`.
-- [**`/postcss.config.js`**](./../postcss.config.js): PostCSS configurations used by Vue CLI internally.
-- [**`/babel.config.js`**](./../babel.config.js): Babel configurations for polyfills used by `@vue/cli-plugin-babel`.
+- [**`/vue.config.cjs`**](./../vue.config.cjs): Global Vue CLI configurations loaded by `@vue/cli-service`.
+- [**`/postcss.config.cjs`**](./../postcss.config.cjs): PostCSS configurations used by Vue CLI internally.
+- [**`/babel.config.cjs`**](./../babel.config.cjs): Babel configurations for polyfills used by `@vue/cli-plugin-babel`.
 
 ## Visual design best-practices
 

package.json

@@ -5,6 +5,7 @@
   "slogan": "Now you have the choice",
   "description": "Enforce privacy & security best-practices on Windows, macOS and Linux, because privacy is sexy 🍑🍆",
   "author": "undergroundwires",
+  "type": "module",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

tests/e2e/plugins/index.js

@@ -9,7 +9,7 @@
 // /* eslint-disable import/no-extraneous-dependencies, global-require */
 // const webpack = require('@cypress/webpack-preprocessor')
 
-module.exports = (on, config) => {
+export default (on, config) => {
   // on('file:preprocessor', webpack({
   //  webpackOptions: require('@vue/cli-service/webpack.config'),
   //  watchOptions: {}

vue.config.cjs

@@ -4,6 +4,7 @@ const packageJson = require('./package.json');
 const tsconfigJson = require('./tsconfig.json');
 
 loadVueAppRuntimeVariables();
+fixMochaBuildWithModules();
 
 module.exports = defineConfig({
   transpileDependencies: true,
@@ -95,3 +96,15 @@ function getAliasesFromTsConfig() {
     return aliases;
   }, {});
 }
+
+function fixMochaBuildWithModules() {
+  /*
+    Workaround for Vue CLI issue during tests breaks projects that rely on ES6 modules and mocha.
+    Setting VUE_CLI_TEST to true prevents the Vue CLI from altering the module transpilation.
+    This fix ensures `npm run build -- --mode test` works successfully.
+    See: https://github.com/vuejs/vue-cli/issues/7417
+  */
+  if (process.env.NODE_ENV === 'test') {
+    process.env.VUE_CLI_TEST = true;
+  }
+}