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

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.

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.

Static Site

This project includes a simple website generated with the eleventy static site generator and the templates/pages in /docs-src. The site is generated to /public since that is Gitlabs default artifact folder for hosting static web pages, see Gitlab Pages for more info.

To build the site, run:

npm run docs

To serve the site locally, run:

npm run docs:serve

To watch the site files, and re-build automatically, run:

npm run docs:gen:watch

The site is served at http://localhost:8000.