From 24c2eff85d480765092a38a9b6ae7e9f8d64126b Mon Sep 17 00:00:00 2001 From: LarrMarburger Date: Thu, 17 Aug 2023 18:50:14 +0200 Subject: [PATCH] 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). --- .eslintrc.js => .eslintrc.cjs | 0 babel.config.js => babel.config.cjs | 0 cypress.config.ts | 5 +++-- docs/presentation.md | 6 +++--- package.json | 1 + postcss.config.js => postcss.config.cjs | 0 tests/e2e/{.eslintrc.js => .eslintrc.cjs} | 0 tests/e2e/plugins/index.js | 2 +- vue.config.js => vue.config.cjs | 13 +++++++++++++ 9 files changed, 21 insertions(+), 6 deletions(-) rename .eslintrc.js => .eslintrc.cjs (100%) rename babel.config.js => babel.config.cjs (100%) rename postcss.config.js => postcss.config.cjs (100%) rename tests/e2e/{.eslintrc.js => .eslintrc.cjs} (100%) rename vue.config.js => vue.config.cjs (87%) diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 100% rename from .eslintrc.js rename to .eslintrc.cjs diff --git a/babel.config.js b/babel.config.cjs similarity index 100% rename from babel.config.js rename to babel.config.cjs diff --git a/cypress.config.ts b/cypress.config.ts index 6f5440d..028df27 100644 --- a/cypress.config.ts +++ b/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', diff --git a/docs/presentation.md b/docs/presentation.md index 194712f..8a92191 100644 --- a/docs/presentation.md +++ b/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 diff --git a/package.json b/package.json index c86c2e0..f1f6581 100644 --- a/package.json +++ b/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", diff --git a/postcss.config.js b/postcss.config.cjs similarity index 100% rename from postcss.config.js rename to postcss.config.cjs diff --git a/tests/e2e/.eslintrc.js b/tests/e2e/.eslintrc.cjs similarity index 100% rename from tests/e2e/.eslintrc.js rename to tests/e2e/.eslintrc.cjs diff --git a/tests/e2e/plugins/index.js b/tests/e2e/plugins/index.js index 2b816f1..bf36e73 100644 --- a/tests/e2e/plugins/index.js +++ b/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: {} diff --git a/vue.config.js b/vue.config.cjs similarity index 87% rename from vue.config.js rename to vue.config.cjs index d3caecd..cb54872 100644 --- a/vue.config.js +++ b/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; + } +}