Files

undergroundwires 736590558b Migrate web builds from Vue CLI to Vite

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.

2023-08-23 23:12:56 +02:00

3.7 KiB

Raw Blame History

Application

Application layer is mainly responsible for:

creating an event-based and mutable application state,
parsing and compiling the application data.

📖 Refer to architecture.md | Layered Application to read more about the layered architecture.

Structure

Application layer code exists in /src/application and includes following structure:

collections/: Holds collection files.
Common/: Contains common functionality in application layer.
...: rest of the application layer source code organized using folders-by-feature structure.

Application state

It uses state pattern with context and state objects. ApplicationContext.ts the "Context" of state pattern provides an instance of CategoryCollectionState.ts (the "State" of the state pattern) for every supported collection.

Presentation layer uses a singleton (same instance of) ApplicationContext.ts throughout the application to ensure consistent state.

📖 Refer to architecture.md | Application State to get an overview of event handling and presentation.md | Application State for deeper look into how the presentation layer manages state.

Application data

Application data is collection files using YAML. You can refer to collection-files.md to read more about the scheme and structure of application data files. You can also check the source code collection yaml files to directly see the application data using that scheme.

Application layer parses and compiles application data into Application). Once parsed, application layer provides the necessary functionality to presentation layer based on the application data. You can read more about how presentation layer consumes the application data in presentation.md | Application Data.

Application layer enables data-driven programming by leveraging the data to the rest of the source code. It makes it easy for community to contribute on the project by using a declarative language used in collection files.

Parsing and compiling

Application layer parses the application data to compile the domain object Application.ts.

The build tool loads (or injects) application data (collection yaml files) into the application layer in compile time. Application layer (ApplicationFactory.ts) parses and compiles this data in runtime.

Application layer compiles templating syntax during parsing to create the end scripts. You can read more about templating syntax in templating.md and how application data uses them through functions in collection-files.md | Function.

The steps to extend the templating syntax:

Add a new parser under SyntaxParsers where you can look at other parsers to understand more.
Register your in CompositeExpressionParser.

3.7 KiB Raw Blame History