Notes Widget

https://zywave.gitlab.io/ams-pc/productivity-workflow/notes/notes-widget/

Setup

Install dependencies:

``bash
npm i
`

Build

The build uses the TypeScript compiler (tsc) to produce JavaScript that runs in modern browsers.

To build the JavaScript version of your component:

`bash
npm run build
`

To watch files and rebuild when the files are modified, run the following command in a separate shell:

`bash
npm run build:watch
`

Test

Tests are run using wtr (web test runner) and is configured to run tests against chromium, webkit, and firefox.

To run the tests:

`bash
npm run test
`

Dev Server

This project uses open-wc's es-dev-server for previewing the project without additional build steps. ES dev server handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles JavaScript and adds polyfills to support older browsers.

To run the dev server and open the project in a new browser tab:

`bash
npm run serve
`

There is a development HTML file located at /dev/index.html that can be viewed at http://localhost:8000/dev/ when running the development server.

However, the appropriate method of running the widget is to run the C# Widget project from Visual Studio. This provides many items the widget is likely dependent upon, such as the ZAPI Client to make authenticated API requests.

Linting

Linting of TypeScript files is provided by ESLint and TypeScript ESLint. In addition, lit-analyzer is used to type-check and lint lit-html templates with the same engine and rules as lit-plugin.

The rules are mostly the recommended rules from each project, but some have been turned off to make LitElement usage easier.

To lint the project run:

`bash
npm run lint
`

Formatting

Prettier is used for code formatting and has been pre-configured according to the Polymer Project's style. Prettier config can be found in .prettierrc.json`.