Introducing foreign export to independently handle attributes

.github/workflows/node.js.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: build
+
+on: [push, pull_request]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test
+    - run: npm run coverage --if-present
+    - name: Coveralls
+      uses: coverallsapp/github-action@master
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,3 +1,3 @@
 .nyc_output/
 node_modules/
-package-lock.json
+

.npmrc

@@ -0,0 +1 @@
+package-lock=true

README.md

@@ -1,6 +1,6 @@
 # <em>µ</em>handlers
 
-[![Build Status](https://travis-ci.com/WebReflection/uhandlers.svg?branch=master)](https://travis-ci.com/WebReflection/uhandlers) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/uhandlers/badge.svg?branch=master)](https://coveralls.io/github/WebReflection/uhandlers?branch=master)
+[![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.
 

cjs/index.js

@@ -1,6 +1,22 @@
 'use strict';
 const {isArray} = require('uarray');
 
+class Foreign {
+  constructor(handler, value) {
+    this._ = (...args) => handler(...args, value);
+  }
+}
+exports.Foreign = Foreign
+
+// flag for foreign checks (slower path, fast by default)
+let useForeign = false;
+
+const foreign = (handler, value) => {
+  useForeign = true;
+  return new Foreign(handler, value);
+};
+exports.foreign = foreign;
+
 const aria = node => values => {
   for (const key in values) {
     const name = key === 'role' ? key : `aria-${key}`;
@@ -26,10 +42,19 @@ const attribute = (node, name) => {
         }
       }
       else {
-        attributeNode.value = newValue;
-        if (orphan) {
-          node.setAttributeNodeNS(attributeNode);
-          orphan = false;
+        const value = useForeign && (newValue instanceof Foreign) ?
+                        newValue._(node, name) : newValue;
+        if (value == null) {
+          if (!orphan)
+            node.removeAttributeNode(attributeNode);
+            orphan = true;
+        }
+        else {
+          attributeNode.value = value;
+          if (orphan) {
+            node.setAttributeNodeNS(attributeNode);
+            orphan = false;
+          }
         }
       }
     }
@@ -61,9 +86,9 @@ const data = ({dataset}) => values => {
 exports.data = data;
 
 const event = (node, name) => {
-  let oldValue, type = name.slice(2);
-  if (!(name in node) && name.toLowerCase() in node)
-    type = type.toLowerCase();
+  let oldValue, lower, type = name.slice(2);
+  if (!(name in node) && (lower = name.toLowerCase()) in node)
+    type = lower.slice(2);
   return newValue => {
     const info = isArray(newValue) ? newValue : [newValue, false];
     if (oldValue !== info[0]) {

esm/index.js

@@ -1,5 +1,19 @@
 import {isArray} from 'uarray';
 
+export class Foreign {
+  constructor(handler, value) {
+    this._ = (...args) => handler(...args, value);
+  }
+}
+
+// flag for foreign checks (slower path, fast by default)
+let useForeign = false;
+
+export const foreign = (handler, value) => {
+  useForeign = true;
+  return new Foreign(handler, value);
+};
+
 export const aria = node => values => {
   for (const key in values) {
     const name = key === 'role' ? key : `aria-${key}`;
@@ -24,10 +38,19 @@ export const attribute = (node, name) => {
         }
       }
       else {
-        attributeNode.value = newValue;
-        if (orphan) {
-          node.setAttributeNodeNS(attributeNode);
-          orphan = false;
+        const value = useForeign && (newValue instanceof Foreign) ?
+                        newValue._(node, name) : newValue;
+        if (value == null) {
+          if (!orphan)
+            node.removeAttributeNode(attributeNode);
+            orphan = true;
+        }
+        else {
+          attributeNode.value = value;
+          if (orphan) {
+            node.setAttributeNodeNS(attributeNode);
+            orphan = false;
+          }
         }
       }
     }
@@ -56,9 +79,9 @@ export const data = ({dataset}) => values => {
 };
 
 export const event = (node, name) => {
-  let oldValue, type = name.slice(2);
-  if (!(name in node) && name.toLowerCase() in node)
-    type = type.toLowerCase();
+  let oldValue, lower, type = name.slice(2);
+  if (!(name in node) && (lower = name.toLowerCase()) in node)
+    type = lower.slice(2);
   return newValue => {
     const info = isArray(newValue) ? newValue : [newValue, false];
     if (oldValue !== info[0]) {

index.js

@@ -1,8 +1,31 @@
 var uhtmlHandlers = (function (exports) {
   'use strict';
 
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
   var isArray = Array.isArray;
 
+  var Foreign = function Foreign(handler, value) {
+    _classCallCheck(this, Foreign);
+
+    this._ = function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return handler.apply(void 0, args.concat([value]));
+    };
+  }; // flag for foreign checks (slower path, fast by default)
+
+  var useForeign = false;
+  var foreign = function foreign(handler, value) {
+    useForeign = true;
+    return new Foreign(handler, value);
+  };
   var aria = function aria(node) {
     return function (values) {
       for (var key in values) {
@@ -26,11 +49,18 @@ var uhtmlHandlers = (function (exports) {
             orphan = true;
           }
         } else {
-          attributeNode.value = newValue;
+          var value = useForeign && newValue instanceof Foreign ? newValue._(node, name) : newValue;
+
+          if (value == null) {
+            if (!orphan) node.removeAttributeNode(attributeNode);
+            orphan = true;
+          } else {
+            attributeNode.value = value;
 
-          if (orphan) {
-            node.setAttributeNodeNS(attributeNode);
-            orphan = false;
+            if (orphan) {
+              node.setAttributeNodeNS(attributeNode);
+              orphan = false;
+            }
           }
         }
       }
@@ -57,8 +87,9 @@ var uhtmlHandlers = (function (exports) {
   };
   var event = function event(node, name) {
     var oldValue,
+        lower,
         type = name.slice(2);
-    if (!(name in node) && name.toLowerCase() in node) type = type.toLowerCase();
+    if (!(name in node) && (lower = name.toLowerCase()) in node) type = lower.slice(2);
     return function (newValue) {
       var info = isArray(newValue) ? newValue : [newValue, false];
 
@@ -92,15 +123,17 @@ var uhtmlHandlers = (function (exports) {
     };
   };
 
+  exports.Foreign = Foreign;
   exports.aria = aria;
   exports.attribute = attribute;
   exports.boolean = _boolean;
   exports.data = data;
   exports.event = event;
+  exports.foreign = foreign;
   exports.ref = ref;
   exports.setter = setter;
   exports.text = text;
 
   return exports;
 
-}({}));
+})({});