Merge 6bddd72 into 8dd94e6

README.md

@@ -79,6 +79,8 @@ These are the rules to follow for attributes:
   * if the attribute name starts with `on`, as example, `onclick=${...}`, it will be set as listener. If the listener changes, the previous one will be automatically removed. If the listener is an `Array` like `[listener, {once:true}]`, the second entry of the array would be used as listener's options.
   * if the attribute starts with a `.` dot, as in `.setter=${value}`, the value will be passed directly to the element per each update. If such value is a known setter, either native elements or defined via Custom Elements, the setter will be invoked per each update, even if the value is the same
   * if the attribute name is `ref`, as in `ref=${object}`, the `object.current` property will be assigned to the node, once this is rendered, and per each update. If a callback is passed instead, the callback will receive the node right away, same way [React ref](https://reactjs.org/docs/refs-and-the-dom.html) does.
+  * if the attribute name is `aria`, as in `aria=${object}`, aria attributes are applied to the node, including the `role` one.
+  * if the attribute name is `data`, as in `data=${object}`, the `node.dataset` gets populated with all values.
 
   </div>
 </details>

cjs/handlers.js

@@ -94,6 +94,8 @@ const handleAnything = (comment, nodes) => {
 
 // attributes can be:
 //  * ref=${...}      for hooks and other purposes
+//  * aria=${...}     for aria attributes
+//  * data=${...}     for dataset related attributes
 //  * .setter=${...}  for Custom Elements setters or nodes with setters
 //                    such as buttons, details, options, select, etc
 //  * onevent=${...}  to automatically handle event listeners
@@ -108,6 +110,21 @@ const handleAttribute = (node, name) => {
         ref.current = node;
     };
 
+  // aria attributes
+  if (name === 'aria')
+    return aria => {
+      for (const key in aria)
+        node.setAttribute(key === 'role' ? key : `aria-${key}`, aria[key]);
+    };
+
+  // dataset shortcut
+  if (name === 'data')
+    return data => {
+      const {dataset} = node;
+      for (const key in data)
+        dataset[key] = data[key];
+    };
+
   // direct setters
   if (name.slice(0, 1) === '.') {
     const setter = name.slice(1);

esm/handlers.js

@@ -93,6 +93,8 @@ const handleAnything = (comment, nodes) => {
 
 // attributes can be:
 //  * ref=${...}      for hooks and other purposes
+//  * aria=${...}     for aria attributes
+//  * data=${...}     for dataset related attributes
 //  * .setter=${...}  for Custom Elements setters or nodes with setters
 //                    such as buttons, details, options, select, etc
 //  * onevent=${...}  to automatically handle event listeners
@@ -107,6 +109,21 @@ const handleAttribute = (node, name) => {
         ref.current = node;
     };
 
+  // aria attributes
+  if (name === 'aria')
+    return aria => {
+      for (const key in aria)
+        node.setAttribute(key === 'role' ? key : `aria-${key}`, aria[key]);
+    };
+
+  // dataset shortcut
+  if (name === 'data')
+    return data => {
+      const {dataset} = node;
+      for (const key in data)
+        dataset[key] = data[key];
+    };
+
   // direct setters
   if (name.slice(0, 1) === '.') {
     const setter = name.slice(1);

index.js

@@ -432,6 +432,8 @@ var uhtml = (function (exports) {
     return anyContent;
   }; // attributes can be:
   //  * ref=${...}      for hooks and other purposes
+  //  * aria=${...}     for aria attributes
+  //  * data=${...}     for dataset related attributes
   //  * .setter=${...}  for Custom Elements setters or nodes with setters
   //                    such as buttons, details, options, select, etc
   //  * onevent=${...}  to automatically handle event listeners
@@ -442,6 +444,20 @@ var uhtml = (function (exports) {
     // hooks and ref
     if (name === 'ref') return function (ref) {
       if (typeof ref === 'function') ref(node);else ref.current = node;
+    }; // aria attributes
+
+    if (name === 'aria') return function (aria) {
+      for (var key in aria) {
+        node.setAttribute(key === 'role' ? key : "aria-".concat(key), aria[key]);
+      }
+    }; // dataset shortcut
+
+    if (name === 'data') return function (data) {
+      var dataset = node.dataset;
+
+      for (var key in data) {
+        dataset[key] = data[key];
+      }
     }; // direct setters
 
     if (name.slice(0, 1) === '.') {