mirror of
https://github.com/gotson/komga.git
synced 2025-12-10 02:23:27 +01:00
63 lines
2.7 KiB
Markdown
63 lines
2.7 KiB
Markdown
## OpenAPI
|
|
|
|
[OpenAPI-fetch](https://openapi-ts.dev/openapi-fetch/) is used to generate a fully typed client from the Komga OpenAPI documentation.
|
|
|
|
The `openapi-generate` tasks will generate bindings, and should be run when the OpenAPI definition has changed.
|
|
|
|
## Pinia Colada
|
|
|
|
[Pinia Colada](https://pinia-colada.esm.dev/) is used for all the API queries and mutations.
|
|
|
|
## Tests
|
|
|
|
Vitest projects are used to specify different kind of tests:
|
|
|
|
- `unit`: unit tests
|
|
- `storybook`: component tests, defined in Storybook stories. Those can be run from Storybook directly or through Vitest.
|
|
|
|
[Mock Service Worker](https://mswjs.io/) is used to mock the Komga API.
|
|
|
|
## Code formatting
|
|
|
|
Both **ESLint** and b are used in combination.
|
|
|
|
Tasks:
|
|
|
|
- ESLint: `lint` and `lint:fix`
|
|
- Prettier: `prettier` and `prettier:fix`
|
|
|
|
## Type checking
|
|
|
|
Vite does not perform type-checking and leaves the job to the IDE. The `type-check` task can be used to perform type checking.
|
|
|
|
## Storybook
|
|
|
|
[Storybook](https://storybook.js.org/) is used for component development and testing. Run `storybook:dev` to start the Storybook server.
|
|
|
|
## i18n
|
|
|
|
[FormatJS](https://formatjs.github.io/) is used for i18n.
|
|
|
|
Message IDs are generated automatically using the ESLint plugin, and hard-coded message IDs should be avoided.
|
|
|
|
Tasks:
|
|
|
|
- `i18n:extract`: extracts the messages from the source into the `i18n` folder. This folder is what Weblate uses.
|
|
- `i18n:compile`: compiles the translated files in `i18n` into `./src/i18n`. This folder is what the application uses at runtime.
|
|
|
|
The Vite plugin [dir2json](https://github.com/buddywang/vite-plugin-dir2json) is used to load the available translation files, see `./src/utils/locale-helper.ts` for more details.
|
|
|
|
## Components
|
|
|
|
Vue template files are segregated in different categories depending on usage:
|
|
|
|
- `./src/components`: Pure UI components, driven by model/props. Those are reusable components.
|
|
- `./src/fragments`: Fragments interact with other layers of the application, like API or Pinia stores. They are split into separate files for easier organization, but are not necessarily reused.
|
|
- `./src/pages`: Pages make use of components/fragments as well as API / Pinia stores. Each Component in that folder is converted to a navigable route using [unplugin-vue-router](https://github.com/posva/unplugin-vue-router). Pages contain a special `<route>` to define the layout to use as well as other router meta attributes.
|
|
- `./src/layouts`: Wrapper component around Pages.
|
|
|
|
Components and Fragments are automatically imported using [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components).
|
|
|
|
## Icons
|
|
|
|
[UnoCSS Icons preset](https://unocss.dev/presets/icons) is used for icons, with the MDI set from Iconify.
|