# as-web-component

> Web Components from functions

Latest version **0.6.2** (published 2023-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install as-web-component
pnpm add as-web-component
yarn add as-web-component
bun add as-web-component
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.2 |
| Published | 2023-08-01 |
| First published | 2020-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 24.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | David Beale |
| Maintainers | bealearts |
| Keywords | web, component, pure, function |

## Links

- npm: https://www.npmjs.com/package/as-web-component
- Repository: https://github.com/bealearts/as-web-component
- Homepage: https://github.com/bealearts/as-web-component#readme
- Issues: https://github.com/bealearts/as-web-component/issues
- npm.io page: https://npm.io/package/as-web-component

## Dependencies (4)

- [uid](https://npm.io/package/uid.md) ^2.0.1
- [fn-args](https://npm.io/package/fn-args.md) ^6.0.0
- [param-case](https://npm.io/package/param-case.md) ^3.0.3
- [mutation-iterator](https://npm.io/package/mutation-iterator.md) ^0.2.0

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.6.2 (latest) — 2023-08-01
- 0.6.1 — 2023-08-01
- 0.6.0 — 2023-08-01
- 0.5.1 — 2023-07-29
- 0.5.0 — 2023-07-26
- 0.4.2 — 2023-07-24
- 0.4.0 — 2023-07-24
- 0.3.0 — 2020-07-16
- 0.2.0 — 2020-07-07
- 0.1.3 — 2020-05-16
- 0.1.2 — 2020-05-14
- 0.1.1 — 2020-05-14

## README

# as-web-component [![Build Status](https://travis-ci.org/bealearts/as-web-component.png?branch=master)](https://travis-ci.org/bealearts/as-web-component) [![npm version](https://badge.fury.io/js/as-web-component.svg)](http://badge.fury.io/js/as-web-component) [![Dependency Status](https://david-dm.org/bealearts/as-web-component.png)](https://david-dm.org/bealearts/as-web-component)

Web Components from functions

> UI as a function of state pattern for Web Components.
>
> Supports;
>
> - Components from pure functions
> - Components from Async functions
> - Stateful/Lifecycle components from Async Generator functions
> - Render DOM using any library; [Preact](https://preactjs.com/), [lit-html](https://lit-html.polymer-project.org/) etc, with or without [JSX](https://reactjs.org/docs/introducing-jsx.html)
> - Global name clash resolution
> - ESM first
> - Zero build tools required (for modern browsers)
> - Easy DOM testing using data-component attribute

[Live Demo](https://raw.githack.com/bealearts/as-web-component/main/example/demo.html)

## Basic Usage

### Pure Function (lit-html)

```js
import { html, render } from 'https://unpkg.com/lit-html';
import asWebComponent from 'https://unpkg.com/as-web-component/standalone.js';

function Header(name) {
  return html`
    <style>
      h1 {
        color: darkred;
      }
    </style>

    <header>
      <h1>${name}</h1>
    </header>
  `;
}

export default asWebComponent(Header, render);
```

### Async Function (Preact)

```jsx
import { render } from 'preact';
import asWebComponent from 'as-web-component';

async function GeolocationState() {
  const result = await navigator.permissions.query({
    name: 'geolocation'
  });

  return (
    <span>
      Geolocation Permission: <strong>${result.state}</strong>
    </span>
  );
}

export default asWebComponent(GeolocationState, render);
```

### Async Generator function (Preact)

```jsx
import { render } from 'preact';
import asWebComponent from 'as-web-component';

async function* Counter() {
  this.count = 0;

  const inc = () => {
    this.count++;
  };

  const dec = () => {
    this.count--;
  };

  for await (const { count } of this) {
    yield (
      <>
        <style>
          {`
            :host {
              display: inline-flex;
            }

            span {
              margin: 0 1rem;
            }
          `}
        </style>

        <button type="button" onClick={dec}>
          -
        </button>
        <span>{count}</span>
        <button type="button" onClick={inc}>
          +
        </button>
      </>
    );
  }
}

export default asWebComponent(Counter, render);
```

### Using a Component

#### Reference from static HTML

```js
import SomeComponent from '../SomeComponent.js';

// Reference as <some-component></some-component> in HTML
// Note: If the name does not contain a "-" or is already taken, then a "-{UID}" will be added to the name

// or, optionally define a name to reference in HTML, must contain a "_" and be unique in the page
SomeComponent.define('another-name');
```

#### Use auto unique name in a renderer

```jsx
import SomeComponent from '../SomeComponent.js';
import { render } from 'preact';

render(<SomeComponent />, document.body); // Will render in the DOM as <some-component></some-component>
```

## Install

```shell
npm install as-web-component --save
```

Or, import directly in the browser

```js
import asWebComponent from 'https://unpkg.com/as-web-component/standalone.js';
```

---
_Source: https://npm.io/package/as-web-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._