µhtml attributes handlers
npm install uhandlers 
All µhtml attributes handlers.
``js`
import {aria, attribute, data, event, foreign, ref, setter, text} from 'uhandlers';
aria(node)
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;
//
attribute(node, name)
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;
//
If the passed value is either null or undefined, the node is being removed.
`js`
attributeHandler(null);
node.outerHTML;
//
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.
data(node)
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;
//
event(node, type)
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();
foreign(handler, value)
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
foreign
;
`
ref(node)
Add current
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
`
setter(node, property)
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;
//
`
text(node)
Set the node
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"
``