bmserras-owc-simple-timer

v0.1.1

Published

4 years ago

Webcomponent bmserras-owc-simple-timer following open-wc recommendations

Downloads

0High
0Medium
0Low

bmserras

<bmserras-owc-simple-timer>

This webcomponent follows the Open Web Components recommendation.

The project was created by running the web component project scaffolding npm init @open-wc with the feature of linting added.

The following tools were used:

Node version 14.17.6
NPM version 6.14.5

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

bmserras-owc-simple-timer/
├── .vscode/
│   └── extensions.json
├── demo/
│   └── index.html
├── src/
│   ├── index.ts
│   ├── bmserras-owc-simple-timer.ts
│   └── BmserrasOwcSimpleTimer.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.

After npm install and compiling (npm run build) 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.

Usage

Installation

npm install --save bmserras-owc-simple-timer

In an HTML file

<html>
  <head>
    <script type="module">
      import 'bmserras-owc-simple-timer/bmserras-owc-simple-timer.js';
    </script>
  </head>
  <body>
    <bmserras-owc-simple-timer duration="30"></bmserras-owc-simple-timer>
  </body>
</html>

In a Lit element

import { LitElement, html, css } from 'lit';
import { property } from 'lit/decorators.js';

import 'bmserras-owc-simple-timer/bmserras-owc-simple-timer.js';

@customElement("owc-app")
export class OwcApp extends LitElement {

  @property({ type: String }) title = 'My app';

  render() {
    return html`
      <main>
        <h1>${this.title}</h1>

        <bmserras-owc-simple-timer duration="30"></bmserras-owc-simple-timer>
      </main>
    `;
  }

}

Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme