# uhandlers

> µhtml attributes handlers

Latest version **0.7.0** (published 2022-09-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install uhandlers
pnpm add uhandlers
yarn add uhandlers
bun add uhandlers
```

## 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.7.0 |
| Published | 2022-09-23 |
| First published | 2020-03-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Andrea Giammarchi |
| Maintainers | webreflection |
| Keywords | uhtml, handlers, lighterhtml |

## Links

- npm: https://www.npmjs.com/package/uhandlers
- Repository: https://github.com/WebReflection/uhandlers
- Homepage: https://github.com/WebReflection/uhandlers#readme
- Issues: https://github.com/WebReflection/uhandlers/issues
- npm.io page: https://npm.io/package/uhandlers

## Dependencies (1)

- [uarray](https://npm.io/package/uarray.md) ^1.0.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.7.0 (latest) — 2022-09-23
- 0.6.1 — 2021-12-21
- 0.6.0 — 2021-12-09
- 0.5.0 — 2021-03-05
- 0.4.2 — 2021-02-12
- 0.4.1 — 2021-02-11
- 0.4.0 — 2021-02-11
- 0.3.6 — 2020-08-26
- 0.3.5 — 2020-05-11
- 0.3.4 — 2020-04-27
- 0.3.3 — 2020-04-27
- 0.3.2 — 2020-04-27
- 0.3.1 — 2020-04-27
- 0.3.0 — 2020-04-27
- 0.2.0 — 2020-03-27
- … 5 more at https://npm.io/package/uhandlers/versions

## README

# <em>µ</em>handlers

[![build status](https://github.com/WebReflection/uhandlers/actions/workflows/node.js.yml/badge.svg)](https://github.com/WebReflection/uhandlers/actions) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/uhandlers/badge.svg?branch=master)](https://coveralls.io/github/WebReflection/uhandlers?branch=master)

All [µhtml](https://github.com/WebReflection/uhtml#readme) attributes handlers.

```js
import {aria, attribute, data, event, foreign, ref, setter, text} from 'uhandlers';
```

# API

<details>
  <summary><strong>aria(node)</strong></summary>

Given an object, assign all `aria-` attributes and `role` to the node.

```js
const node = document.createElement('div');
const ariaHandler = aria(node);
ariaHandler({role: 'button', labelledBy: 'id'});
node.outerHTML;
// <div role="button" aria-labelledby="id"></div>
```

</details>

<details>
  <summary><strong>attribute(node, name)</strong></summary>

Handle a generic attribute `name`, updating it only when its value changes.

```js
const node = document.createElement('div');
const attributeHandler = attribute(node, 'test');
attributeHandler('value');
node.outerHTML;
// <div test="value"></div>
```

If the passed value is either `null` or `undefined`, the node is being removed.

```js
attributeHandler(null);
node.outerHTML;
// <div></div>
```

Please note that both `aria-attribute=${value}` and `data-attribute=${value}` are also perfectly valid, and better performing if the passed values never, or rarely, change.

</details>

<details>
  <summary><strong>data(node)</strong></summary>

Given an object, assign all keys to the node `dataset`.

```js
const node = document.createElement('div');
const dataHandler = data(node);
dataHandler({anyKey: 'value'});
node.outerHTML;
// <div data-any-key="value"></div>
```

</details>

<details>
  <summary><strong>event(node, type)</strong></summary>

Given a `listener` or a `[listener, options]` array, add or remove events listeners whenever different from the previous time.

```js
const node = document.createElement('div');
const eventHandler = event(node, 'click');
eventHandler([e => console.log(e.type), {once: true}]);
node.click();
// "click"
node.click();
```

</details>

<details>
  <summary><strong>foreign(handler, value)</strong></summary>

Define any regular attribute name through arbitrary handlers, passing any value with it, as well as the node, and the attribute name.

```js
import {html, foreign} from 'uhtml';

const handler = (node, name, value) => {
  console.log(node, name, value);
  return value.data; // or null/undefiend
};

html`<p any=${foreign(handler, {data: 123})}>foreign</p>`;
```

</details>


<details>
  <summary><strong>ref(node)</strong></summary>

Add current `node` to `ref.current` or pass `node` to the `callback`.

```js
const node = document.createElement('div');
const refHandler = ref(node);
const reference = {current: null};
refHandler(reference);
reference.current === node; // true
```

</details>

<details>
  <summary><strong>setter(node, property)</strong></summary>

Directly assign any value to a node property.

```js
const node = document.createElement('div');
const setterHandler = setter(node, 'className');
setterHandler('a b c');
node.outerHTML;
// <div class="a b c"></div>
```

</details>

<details>
  <summary><strong>text(node)</strong></summary>

Set the node `textContent` when different from the previous one.

```js
const node = document.createElement('div');
const textHandler = text(node);
textHandler('a b c');
node.textContent;
// "a b c"
```

</details>

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