bmserras-simple-timer v0.0.0

\

This webcomponent follows the open-wc recommendation.

The project was created by running the web component project scaffolding npm init @open-wc with no features (linting, testing, demoing, etc.) added.

After scaffolding the project and before npm install it creates this minimal project.

simple-timer/
├── .vscode/
│   └── extensions.json
├── demo/
│   └── index.html
├── src/
│   ├── index.ts
│   ├── simple-timer.ts
│   └── SimpleTimer.ts
├── .editorconfig
├── LICENSE
├── README.md
├── web-dev-server.config.mjs
├── .gitignore
├── package.json
└── tsconfig.json

The web component of this example is based on a web component from the Lit docs that can be accessed in playground. Some files were modified in order to define this component.

After npm install and compiling (tsc) the following folders are created: node_modules and dist, as well as the following files: custom-elements.json and package-lock.json.

The file custom-elements.json is a generated file that is used for IDEs to be able to better support custom elements. The Custom Elements Manifest is a file format that describes the custom elements in a project, allowing IDEs to give rich information about the custom elements, as well as for generating documentation. The dependency @custom-elements-manifest/analyzer is used to generate this file, with npx @custom-elements-manifest/analyzer analyze or simply npm run analyze. For more information refer here.

Installation

To install this web component in order to use in other projects.

npm i simple-timer

Usage

After installation, use this web component in other projects.

<script type="module">
  import 'simple-timer/simple-timer.js';
</script>

<simple-timer></simple-timer>

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

To run a local development server that serves the basic demo located in demo/index.html.

npm start