µhandlers

All µhtml attributes handlers.

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

API

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

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

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

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.

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.

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

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

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

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

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

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>`;

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

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

Directly assign any value to a node property.

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

Set the node textContent when different from the previous one.

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