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 puppeteer and jest-puppeteer.
https://github.com/fernandopasik/hello-web-components

hello-world jest lit lit-element lit-html puppeteer rollup starter typescript web-components

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/fernandopasik/hello-web-components
• Owner: fernandopasik
• License: mit
• Created: 2020-03-04T22:06:51.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-04-11T17:28:05.000Z (3 months ago)
• Last Synced: 2024-04-14T18:46:35.709Z (3 months ago)
• Topics: hello-world, jest, lit, lit-element, lit-html, puppeteer, rollup, starter, typescript, web-components
• Language: TypeScript
• Homepage: https://fernandopasik.com/hello-web-components/
• Size: 7.7 MB
• Stars: 25
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Lists

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

README

        
# hello-web-components

A simple starter **** web component written in typescript, using [lit](https://github.com/lit/lit). Unit tested with [jest](https://github.com/facebook/jest) and e2e tested with [puppeteer](https://github.com/puppeteer/puppeteer) and [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer).

[![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)