@zywave/activities-widget

Notes Widget

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

Setup

Install dependencies:

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:

npm run build

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

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:

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:

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:

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.