# plugin

This template should help get you started developing plugins with Vue 3 in Vite.

## Getting started

Have `NodeJS` and `NPM` installed on your machine and clone this repository.

run `npm i` in the base directory to install all dependencies.

## Todos

-[ ] `src/constants/index.ts`

- use this file for global constants

-[ ] `src/constants/tables.ts`

- use this file to define the table configuration
- remove sample configurations

-[ ] `src/locales/en-US.json` and `src/locales/de-DE.json`

- use this file to define translations
- remove `SampleView` section

-[ ] `src/constants/privileges.ts`

- use this file to define privilege constants
- remove sample privilege key

-[ ] `src/router/mainAppRoutes.ts`

- use this file to define main routes (main app left side navigations)

-[ ] `src/router/topBarRoutes.ts`

- use this file to define sub routes (in-app top bar navigations)

-[ ] `src/services/api`

- use this folder to locate all APIs
- remove `src/services/api/Sample` folder

-[ ] `src/stores`

- use this folder to locate all stores
- remove `src/stores/sample.ts` file

-[ ] `src/styles`

- use this folder to locate all global styles
- remove `src/styles/sample.scss` file

-[ ] `src/tests`

- use this folder to locate all tests

-[ ] `src/types`

- use this folder to locate all global interfaces
- remove `src/stores/sample.ts` file

-[ ] `src/use`

- use this folder to locate all common composables
- remove `src/use/sample.ts` file

-[ ] `src/views`

- use this folder to locate all routeable view components
- remove `src/views/Sample` folder

## dev server

This will create a local webserver with hot module reload support

```bash
npm run dev
```

In case you need a secure browser context for certain tasks, check the `readme.me` in the `containers/` folder.

## build

This will build the entire project into the `dist` folder.

```bash
npm run build
```

## preview the build

Even though the build outputs plain html/js/css, you can't simply open the index.html in the browser from the file
system to preview the project since it uses absolute paths to reference all assets.

This command will start a local webserver serving the built project (unlike the dev server which is NOT bundled for production)

```bash
npm run preview
```

## testing

You can either run all tests once by running

```bash
npm run test
```

or you can run all tests and the continue to perform all tests on further file changes:

```bash
npm run test:watch
```

To generate a coverage report, issue this command

```bash
npm run test:coverage
```

## Externally defined components

1. To make the components available for download and external use, it is necessary:

- in the `external-lib.vite.config.ts` file
  - in the `build`.`lib`.`entry` section, add the path to the components
  - the path to the build results is determined by the `LIB_FOLDER` constant (`dist-components` by default )
- build them `vite build -c external-lib.vite.config.ts`
- deploy build artifacts

2. To use externally defined component

```ts
import { getExternalComponent } from "@actindo/core-ui";

const AComponent = getExternalComponent({
  name: "component-name",
  url: "https://.../component.mjs",
});
```

## IDE setup

The recommended IDE for this project is [Visual Studio Code](https://code.visualstudio.com/).

### Plugins

The following VSCode plugins are recommended for a better developer experience - they are also in the list of recommended plugins
of this project, so your VSCode should offer you to install them automatically.

#### Prettier - Code formatter

The [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension
teaches the ide the prettier code style and lets you automatically format the code to our configured standards.

```
ext install esbenp.prettier-vscode
```

#### Vue Language Features (Volar)

The [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=vue.volar) extension
brings full vue support to VSCode.

```
ext install vue.volar
```

For improved performance it is also recommended to use the "Take Over Mode" for TypeScript+Vue support:
[Details on how and why to enable it](https://github.com/johnsoncodehk/volar/discussions/471).

#### Vitest

The [Vitest](https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer) extension
allows you to run your tests suites inline and even in watch mode in order to get live feedback for your code.

```
ext install ZixuanChen.vitest-explorer
```

#### ESLint

The [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) highlights all eslint problems
right in the editor and also allows you to fix them straight away.

```
ext install dbaeumer.vscode-eslint
```
