embedded-widget-test v0.0.4

Embedded-widget

*Those are 'dev notes'. Should be replaced with actual documentation before publishing

Prerequisites

Ensure you have the following installed locally:

• Node.js: Download
  • We are currently using the LTS version 18.18+.
  • We use yarn as a package manager.
• Preffered IDE is VSCode

Main dev packages

• Lit
• Typescript
• Linting with ESLint
• Formatting with Prettier
• Linting, typechecking and formatting on by default using husky for commit hooks

Useful IDE Plugins

• vscode-lit-html - Syntax highlighting and IntelliSense for lit-html template strings.
• vscode-lit-plugin - Syntax highlighting, type checking and code completion for lit-html.
• es6-string-html - VSCode extension which provides syntax highlighting for HTML in ES6 multiline strings.

Other tools

• Web Component DevTools(available for Mozilla too)

Build

This sample uses the TypeScript compiler to produce JavaScript that runs in modern browsers.

To build the JavaScript version of your component:

yarn build

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

yarn build:watch

Dev Server

This sample uses modern-web.dev's @web/dev-server for previewing the project without additional build steps. Web 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. See modern-web.dev's Web Dev Server documentation for more information.

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

yarn serve

There is a development HTML file located at /dev/index.html that you can view at http://localhost:8000/dev/index.html. Note that this command will serve your code using Lit's development mode (with more verbose errors). To serve your code against Lit's production mode, use yarn serve:prod.