This commit progresses the migration from Vue CLI to Vite (#230).
TypeScript migration:
- Convert JavaScript Cypress tests and configurations to TypeScript.
- Introduce `tsconfig.json` for Cypress, following official
recommendation.
Test execution:
- Use Cypress CLI to run the tests.
- Rename Cypress commands to reflect official naming conventions.
- Start Vue server prior to Cypress execution, using
`start-server-and-test` package based on official documentation.
- Remove dependency on Vue CLI plugin ((`@vue/cli-plugin-e2e-cypress`).
Configuration standardization (based on Cypress docs):
- Delete unused `plugins/` directory.
- Move test (spec) files to to the root directory.
- Add official ESLint plugin (`eslint-plugin-cypress`).
Changes for importing `vite.config.ts` into `cypress.config.ts`:
- Add TypeScript import assertations to files importing JSON files.
- Use ESM friendly way instead of `__dirname` to solve `ReferenceError:
__dirname is not defined in ES module scrope`.
Other changes:
- Simplify comments in placeholder files.
- Create Cypress specific `.gitignore` for enhanced maintainability,
clarity and scalability.
- Remove redundant `vue.config.cjs`.
The Vue ESLint plugin is not compatible with Vite and isn't provided in
Vite's default template. By removing it, the codebase progresses toward
the migration to Vue 3.0 and Vite (#230).
Changes:
- Directly execute `eslint` in the `npm run lint:eslint` command.
- Fix previously undetected linting issues that weren't covered by Vue
CLI's default configuration.
- Updated various configuration files, reflecting the removal and lint
fixes.
- Remove unused `eslint-plugin-import` dependency that is already
imported by `@vue/eslint-config-airbnb-with-typescript`.
In `.eslintrc.cjs`:
- Add `es2022` as environment in to simplify setting parser options and
align with Vite starter configuration.
- Remove useless tests override.
- Move tests override in root `.eslintrc.cjs` to `tests/` for clarity,
better organization, scalability and separation of concerns.
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).
- Introduce `fresh-npm-install.sh` to automate clean npm environment
setup.
- Revert workaround 924b326244, resolved
by updating Font Awesome.
- Remove `vue-template-compiler` and `@vue/test-utils` from
dependencies, they're obsolete in 2.7.
- Update anchor references to start with lower case in line with
MD051/link-fragments, introduced by updated `markdownlint`.
- Upgrade cypress to > 10, which includes:
- Change spec extensions from `*.spec.js` to `*.cy.js`.
- Change configuration file from `cypress.json` to
`cypress.config.ts`.
- Remove most configurations from `cypress/plugins/index.js`. These
configurations were initially generated by Vue CLI but obsoleted in
newer cypress versions.
- Lock Typescript version to 4.6.x due to lack of support in
unmaintained Vue CLI TypeScript plugin (see vuejs/vue-cli#7401).
- Use `setWindowOpenHandler` on Electron, replacing deprecated
`new-event` event.
- Document inability to upgrade `typescript-eslint` dependencies because
`@vue/eslint-config-typescript` does not support them. See
vuejs/eslint-config-typescript#60, vuejs/eslint-config-typescript#59,
vuejs/eslint-config-typescript#57.
- Fix `typescript` version to 4.6.X and `tslib` version to 2.4.x,
unit tests exit with a maximum call stack size exceeded error:
```
...
MOCHA Testing...
RUNTIME EXCEPTION Exception occurred while loading your tests
[=========================] 100% (completed)
RangeError: Maximum call stack size exceeded
at RegExp.exec (<anonymous>)
at retrieveSourceMapURL (/project/node_modules/source-map-support/source-map-support.js:174:21)
at Array.<anonymous> (/project/node_modules/source-map-support/source-map-support.js:186:26)
at /project/node_modules/source-map-support/source-map-support.js:85:24
at mapSourcePosition (/project/node_modules/source-map-support/source-map-support.js:216:21)
...
```
Issue has been reported but not fixed, suggested solutions did not
work, see evanw/node-source-map-support#252.
- Update `vue-cli-plugin-electron-builder` to latest alpha version. This
allows upgrading `ts-loader` to latest and using latest
`electron-builder`. Change `main` property value in `package.json` to
`index.js` for successful electron builds (see
nklayman/vue-cli-plugin-electron-builder#188).
