https://github.com/fernandopasik/hello-web-components

A simple starter <hello-world /> web component written in typescript, using lit. Unit tested with jest and e2e tested with playwright.
https://github.com/fernandopasik/hello-web-components

hello-world lit lit-component lit-element lit-html node-test-runner starter web-component web-component-starter web-components

Last synced: 4 months ago
JSON representation

A simple starter <hello-world /> web component written in typescript, using lit. Unit tested with jest and e2e tested with playwright.

• Host: GitHub
• URL: https://github.com/fernandopasik/hello-web-components
• Owner: fernandopasik
• License: mit
• Created: 2020-03-04T22:06:51.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-10-29T17:18:43.000Z (4 months ago)
• Last Synced: 2024-10-29T18:39:09.285Z (4 months ago)
• Topics: hello-world, lit, lit-component, lit-element, lit-html, node-test-runner, starter, web-component, web-component-starter, web-components
• Language: TypeScript
• Homepage: https://fernandopasik.com/hello-web-components/
• Size: 8.89 MB
• Stars: 26
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-lit - hello-web-components - Simple starter web component written in TypeScript using Lit. (Starter Templates)
• awesome-web-components - hello-web-components - Simple starter hello world web component written in TypeScript. (Meta Frameworks / Starter Kits)

README

        
# hello-web-components

A simple starter **** web component written in typescript, using [lit](https://github.com/lit/lit). Unit tested with [node test runner](https://nodejs.org/api/test.html) and e2e tested with [playwright](https://playwright.dev/).

[![Gzip Bundle Size](https://img.badgesize.io/https://unpkg.com/hello-web-components/hello-web-components.min.js?compression=gzip)](https://unpkg.com/hello-web-components/hello-web-components.min.js 'Gzip Bundle Size')

[![Build Status](https://github.com/fernandopasik/hello-web-components/actions/workflows/main.yml/badge.svg)](https://github.com/fernandopasik/hello-web-components/actions/workflows/main.yml 'Build Status')

[![Coverage Status](https://codecov.io/gh/fernandopasik/hello-web-components/branch/main/graph/badge.svg)](https://codecov.io/gh/fernandopasik/hello-web-components 'Coverage Status')

[![Known Vulnerabilities](https://snyk.io/test/github/fernandopasik/hello-web-components/badge.svg?targetFile=package.json)](https://snyk.io/test/github/fernandopasik/hello-web-components?targetFile=package.json 'Known Vulnerabilities')

[![npm version](https://img.shields.io/npm/v/hello-web-components.svg?logo=npm)](https://www.npmjs.com/package/hello-web-components 'npm version')

[![npm downloads](https://img.shields.io/npm/dm/hello-web-components.svg)](https://www.npmjs.com/package/hello-web-components 'npm downloads')

## Usage

Clone the repository and modify it to your needs

```sh

git clone --depth 1 https://github.com/fernandopasik/hello-web-components.git

```

Install the package in your project and import the component

```sh

npm i hello-web-components lit

```

```js

import { html, render } from 'lit';

import 'hello-web-components';

const test = () => html``;

render(test(), document.body);

```

## License

MIT (c) 2020 [Fernando Pasik](https://fernandopasik.com)