Upgrade to Vue CLI 5 (and webpack 5)

Upgrade to v5.x using `vue upgrade --next`.

Update `vue.config.js` to import and use `defineConfig`, because it
provides type safety and created by Vue CLI 5 as default.

Vue CLI 5.x upgrades from webpack 4 to 5. It causes some issues that this
commit attemps to fix:

1. Fail due to webpack resolving of Ace.
   Third-party dependency (code editor) Ace uses legacy `file-loader`
   for webpack resolving. It's not supported in webpack 5. So change it
   with manual imports.
   Refs: ajaxorg/ace-builds#211, ajaxorg/ace-builds#221.

2. Wehpack drops polyfilling node core modules (`path`, `fs`, etc.).
   Webpack does not polyfill those modules by default anymore. This is
   good because they did not need browser polyfilling as they are
   used in desktop version only and resolved already by Electron.
   To resolve errors (using webpack recommendations):
    - Add typeof check around `process` variable.
    - Tell webpack explicitly to ignore used node modules.

3. Fail due to legacy dependency of vue-cli-plugin-electron-builder.
   This plugin is used for electron builds and development. It still
   uses webpack 4 that leads to failed builds.
   Downgrading `ts-loader` to latest version which has support for
   `loader-utils` solves the problem (typestrong/ts-loader#1288).
   Related issue: nklayman/vue-cli-plugin-electron-builder#1625

4. Compilation fails due to webpack loading of `fsevents` on macOS.
   This happens only when running `vue-cli-service test:unit` command
   (used in integration tests and unit tests). Other builds work fine.
   Refs: yan-foto/electron-reload#71,
     nklayman/vue-cli-plugin-electron-builder#712,
     nklayman/vue-cli-plugin-electron-builder#1333

package.json

@@ -50,16 +50,17 @@
     "@types/mocha": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-babel": "^4.5.14",
-    "@vue/cli-plugin-e2e-cypress": "~4.5.14",
+    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
     "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
-    "@vue/cli-plugin-typescript": "^4.5.14",
-    "@vue/cli-plugin-unit-mocha": "^4.5.14",
-    "@vue/cli-service": "^4.5.14",
+    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
+    "@vue/cli-plugin-unit-mocha": "~5.0.0-rc.1",
+    "@vue/cli-service": "~5.0.0-rc.1",
     "@vue/eslint-config-airbnb": "^6.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
     "@vue/test-utils": "1.2.2",
     "chai": "^4.3.4",
+    "cypress": "^8.3.0",
     "electron": "^15.3.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-log": "^4.4.1",
@@ -77,12 +78,16 @@
     "remark-validate-links": "^11.0.1",
     "sass": "^1.43.3",
     "sass-loader": "10.2.0",
+    "ts-loader": "9.0.1",
     "tslib": "^2.3.1",
     "typescript": "^4.4.4",
     "vue-cli-plugin-electron-builder": "^2.1.1",
     "vue-template-compiler": "^2.6.14",
     "yaml-lint": "^1.2.4"
   },
+  "//devDependencies": {
+    "ts-loader": "Here as workaround for vue-cli-plugin-electron-builder using older webpack 4"
+  },
   "homepage": "https://privacy.sexy",
   "repository": {
     "type": "git",

src/application/Environment/Environment.ts

@@ -12,7 +12,7 @@ interface IEnvironmentVariables {
 export class Environment implements IEnvironment {
     public static readonly CurrentEnvironment: IEnvironment = new Environment({
         window,
-        process,
+        process: typeof process !== 'undefined' ? process /* electron only */ : undefined,
         navigator,
     });
     public readonly isDesktop: boolean;

src/presentation/components/Code/TheCodeArea.vue

@@ -12,8 +12,6 @@
 <script lang="ts">
 import { Component, Prop } from 'vue-property-decorator';
 import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
-import ace from 'ace-builds';
-import 'ace-builds/webpack-resolver';
 import { ICodeChangedEvent } from '@/application/Context/State/Code/Event/ICodeChangedEvent';
 import { IScript } from '@/domain/IScript';
 import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
@@ -21,6 +19,7 @@ import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/IC
 import { CodeBuilderFactory } from '@/application/Context/State/Code/Generation/CodeBuilderFactory';
 import Responsive from '@/presentation/components/Shared/Responsive.vue';
 import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
+import ace from './ace-importer';
 
 @Component({
   components: {

src/presentation/components/Code/ace-importer.ts

@@ -0,0 +1,17 @@
+import ace from 'ace-builds';
+
+/*
+  Following is here because `import 'ace-builds/webpack-resolver';` does not work with webpack 5.
+  Related issue: https://github.com/ajaxorg/ace-builds/issues/211, PR: https://github.com/ajaxorg/ace-builds/pull/221
+*/
+
+import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/theme-xcode';
+import 'ace-builds/src-noconflict/mode-batchfile';
+import 'ace-builds/src-noconflict/mode-sh';
+
+ace.config.setModuleUrl('ace/mode/html_worker', new URL('ace-builds/src-noconflict/worker-html.js', import.meta.url).toString())
+ace.config.setModuleUrl('ace/mode/javascript_worker', new URL('ace-builds/src-noconflict/worker-javascript.js', import.meta.url).toString())
+ace.config.setModuleUrl('ace/mode/json_worker', new URL('ace-builds/src-noconflict/worker-json.js', import.meta.url).toString())
+
+export default ace;

vue.config.js

@@ -1,6 +1,8 @@
+const { defineConfig } = require('@vue/cli-service');
+
 loadVueAppRuntimeVariables();
 
-module.exports = {
+module.exports = defineConfig({
     chainWebpack: (config) => {
         changeAppEntryPoint('./src/presentation/main.ts', config);
     },
@@ -9,7 +11,14 @@ module.exports = {
             alias: {  // also requires path alias in tsconfig.json
               "@tests": require('path').resolve(__dirname, 'tests/'),
             },
+            fallback: {
+                /* Tell webpack to ignore polyfilling them because Node core modules are never used
+                    for browser code but only for desktop where Electron supports them. */
+                ...ignorePolyfills('os', 'child_process', 'fs', 'path'),
+            }
         },
+        // Fix compilation failing on macOS when running unit/integration tests
+        externals: ['fsevents'],
     },
     pluginOptions: {
         // https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#native-modules
@@ -34,10 +43,10 @@ module.exports = {
                 linux: { // https://www.electron.build/configuration/linux
                     target: 'AppImage',
                 }
-            }
-        }
             },
-}
+        },
+    },
+});
 
 function changeAppEntryPoint(entryPath, config) {
     config.entry('app').clear().add(entryPath).end();
@@ -50,3 +59,8 @@ function loadVueAppRuntimeVariables() {
     process.env.VUE_APP_REPOSITORY_URL  = packageJson.repository.url;
     process.env.VUE_APP_HOMEPAGE_URL    = packageJson.homepage;
 };
+
+function ignorePolyfills(...moduleNames) {
+    return moduleNames
+        .reduce((obj, module) => { obj[module] = false; return obj; }, {});
+}