This commit changes the web application's build, transpilation and
minification process from Vue CLI to Vite. This shift paves the way for
a full migration to Vite as the primary build tool (#230).
Configuration changes:
- `.vscode/extensions.json`: Update recommended plugins, replacing
unmaintained ones with official recommendations.
- Legacy browser support:
- Use `@vitejs/plugin-legacy` to transpile for older browsers.
- Remove `core-js` dependency and `babel.config.cjs` configuration as
they're now handled by the legacy plugin.
- Delete `@babel/preset-typescript` and `@babel/preset-typescript`
dependencies as legacy plugin handles babel dependencies by default.
- Add `terser` dependency that's used by the legacy plugin for
minification, as per Vite's official documentation.
- `tsconfig.json`:
- Remove obsolete `webpack-env` types.
- Add `"resolveJsonModule": true` to be able to read JSON files in
right way.
- Use correct casing as configuration values.
- Simplify `lib` to align with Vite and Vue starter configuration.
- Add `"skipLibCheck": true` as `npm run build` now runs `tsc` which
fails on inconsistent typings inside `node_modules` due to npm's
weak dependency resoultion.
- PostCSS:
- Add `autoprefixer` as dependency, no longer installed by Vue CLI.
- Epxlicitly added `postcss` as dependency to anticipate potential
peer dependency changes.
- Remove related `@vue/cli` dependencies.
- Remove `sass-loader` as Vite has native CSS preprocessing support.
- Run integration tests with `jsdom` environment so `window` object can
be used.
Client-side changes:
- Abstract build tool specific environment variable population.
Environment variables were previously populated by Vue CLI and now by
Vite but not having an abstraction caused issues. This abstraction
solves build errors and allows easier future migrations and testing.
- Change Vue CLI-specific `~@` aliases to `@` to be able to compile with
Vite.
- Update types in LiquorTree to satisfy `tsc`.
- Remove Vue CLI-specific workaround from `src/presentation/main.ts`.
Restructuring:
- Move `public/` to `presentation/` to align with the layered structure,
which was not possible with Vue CLI.
- Move `index.html` to web root instead of having it inside `public/` to
align with official recommended structure.
- Move logic shared by both integration and unit tests to
`tests/shared`.
- Move logo creation script to `scripts/` and its npm command to include
`build` to align with rest of the structure.
As part of transition to Vue 3.0 and Vite (#230), this commit
facilitates the shift towards building rest of the application using
Vite. By doing so, it eliminates reliance on outdated Electron building
system that offered limited control, blocking desktop builds (#233).
Changes include:
- Introduce Vite with Vue 2.0 plugin for test execution.
- Remove `mocha`, `chai` and other related dependencies.
- Adjust test to Vitest syntax.
- Revise and update `tests.md` to document the changes.
- Add `@modyfi/vite-plugin-yaml` plugin to be able to use yaml file
depended logic on test files, replacing previous webpack behavior.
- Fix failing tests that are revealed by Vitest due to unhandled errors
and lack of assertments.
- Remove the test that depends on Vue CLI populating `process.env`.
- Use `jsdom` for unit test environment, adding it to dependency to
`package.json` as project now depends on it and it was not specified
even though `package-lock.json` included it.
Key features of Linux support:
- It supports python 3 scripts execution.
- It supports Flatpak and Snap installation for software
clean-up/configurations.
- Extensive documentation.
Remove using Webpack import syntax such as: `js-yaml-loader!@/..`. It's
a non-standard syntax that couples the code to Webpack.
Configure instead by specifying Webpack loader in Vue configuration
file.
Enable related ESLint rules.
Remove unused dependency `raw-loader` and refactor
`NoUnintendedInlining` test to load files using file system (dropping
webpack dependency).
Refactor to use `import type` for type imports to show the indent
clearly and satisfy failing ESLint rules.
- Unify test data for nonexistence of an object/string and collection.
- Introduce more test through adding missing test data to existing tests.
- Improve logic for checking absence of values to match tests.
- Add missing tests for absent value validation.
- Update documentation to include shared test functionality.
Major refactoring using ESLint with rules from AirBnb and Vue.
Enable most of the ESLint rules and do necessary linting in the code.
Also add more information for rules that are disabled to describe what
they are and why they are disabled.
Allow logging (`console.log`) in test files, and in development mode
(e.g. when working with `npm run serve`), but disable it when
environment is production (as pre-configured by Vue). Also add flag
(`--mode production`) in `lint:eslint` command so production linting is
executed earlier in lifecycle.
Disable rules that requires a separate work. Such as ESLint rules that
are broken in TypeScript: no-useless-constructor (eslint/eslint#14118)
and no-shadow (eslint/eslint#13014).
Integration tests are executed using vue-cli-service with double quotes as following: `vue-cli-service test:unit "tests/integration/**/*.spec.ts"`. Using single quotes (mochajs/mocha#1828) works on macOS and Ubuntu but does not on Windows (tests are not found). Double quotes is the only portable way that works on all three platforms (mochajs/mocha#3136).
Alias would remove unnecessary repetitions and less relative paths make changes easier when moving around files. This commit cleans also up some relative paths ('../../../') by using the alias and orders imports. It updates both path alias in tsconfig and module alias in Vue CLI's bundler (vuejs/vue-cli#2398).
