first commit

.gitignore

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

.npmignore

@@ -0,0 +1,6 @@
+.nyc_output/
+node_modules/
+rollup/
+test/
+package-lock.json
+.travis.yml

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+node_js:
+  - stable
+git:
+  depth: 1
+branches:
+  only:
+    - master
+after_success:
+  - "npm run coveralls"

LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2020, Andrea Giammarchi, @WebReflection
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -0,0 +1,5 @@
+# <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)
+
+All [µhtml](https://github.com/WebReflection/uhtml#readme) attributes handlers.

cjs/index.js

@@ -0,0 +1,67 @@
+'use strict';
+const {isArray} = require('uarray');
+
+const aria = node => value => {
+  for (const key in value)
+    node.setAttribute(key === 'role' ? key : `aria-${key}`, value[key]);
+};
+exports.aria = aria;
+
+const attribute = (node, name) => {
+  let oldValue, noOwner = true;
+  const attribute = document.createAttribute(name);
+  return newValue => {
+    if (oldValue !== newValue) {
+      oldValue = newValue;
+      if (oldValue == null) {
+        if (!noOwner) {
+          node.removeAttributeNode(attribute);
+          noOwner = true;
+        }
+      }
+      else {
+        attribute.value = newValue;
+        if (noOwner) {
+          node.setAttributeNode(attribute);
+          noOwner = false;
+        }
+      }
+    }
+  };
+};
+exports.attribute = attribute;
+
+const data = ({dataset}) => value => {
+  for (const key in value)
+    dataset[key] = value[key];
+};
+exports.data = data;
+
+const event = (node, name) => {
+  let oldValue, type = name.slice(2);
+  if (!(name in node) && name.toLowerCase() in node)
+    type = type.toLowerCase();
+  return newValue => {
+    const info = isArray(newValue) ? newValue : [newValue, false];
+    if (oldValue !== info[0]) {
+      if (oldValue)
+        node.removeEventListener(type, oldValue, info[1]);
+      if (oldValue = info[0])
+        node.addEventListener(type, oldValue, info[1]);
+    }
+  };
+};
+exports.event = event;
+
+const ref = node => value => {
+  if (typeof value === 'function')
+    value(node);
+  else
+    value.current = node;
+};
+exports.ref = ref;
+
+const setter = (node, key) => value => {
+  node[key] = value;
+};
+exports.setter = setter;

cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

esm/index.js

@@ -0,0 +1,60 @@
+import {isArray} from 'uarray';
+
+export const aria = node => value => {
+  for (const key in value)
+    node.setAttribute(key === 'role' ? key : `aria-${key}`, value[key]);
+};
+
+export const attribute = (node, name) => {
+  let oldValue, noOwner = true;
+  const attribute = document.createAttribute(name);
+  return newValue => {
+    if (oldValue !== newValue) {
+      oldValue = newValue;
+      if (oldValue == null) {
+        if (!noOwner) {
+          node.removeAttributeNode(attribute);
+          noOwner = true;
+        }
+      }
+      else {
+        attribute.value = newValue;
+        if (noOwner) {
+          node.setAttributeNode(attribute);
+          noOwner = false;
+        }
+      }
+    }
+  };
+};
+
+export const data = ({dataset}) => value => {
+  for (const key in value)
+    dataset[key] = value[key];
+};
+
+export const event = (node, name) => {
+  let oldValue, type = name.slice(2);
+  if (!(name in node) && name.toLowerCase() in node)
+    type = type.toLowerCase();
+  return newValue => {
+    const info = isArray(newValue) ? newValue : [newValue, false];
+    if (oldValue !== info[0]) {
+      if (oldValue)
+        node.removeEventListener(type, oldValue, info[1]);
+      if (oldValue = info[0])
+        node.addEventListener(type, oldValue, info[1]);
+    }
+  };
+};
+
+export const ref = node => value => {
+  if (typeof value === 'function')
+    value(node);
+  else
+    value.current = node;
+};
+
+export const setter = (node, key) => value => {
+  node[key] = value;
+};

index.js

@@ -0,0 +1,78 @@
+var uhtmlHandlers = (function (exports) {
+  'use strict';
+
+  var isArray = Array.isArray;
+
+  var aria = function aria(node) {
+    return function (value) {
+      for (var key in value) {
+        node.setAttribute(key === 'role' ? key : "aria-".concat(key), value[key]);
+      }
+    };
+  };
+  var attribute = function attribute(node, name) {
+    var oldValue,
+        noOwner = true;
+    var attribute = document.createAttribute(name);
+    return function (newValue) {
+      if (oldValue !== newValue) {
+        oldValue = newValue;
+
+        if (oldValue == null) {
+          if (!noOwner) {
+            node.removeAttributeNode(attribute);
+            noOwner = true;
+          }
+        } else {
+          attribute.value = newValue;
+
+          if (noOwner) {
+            node.setAttributeNode(attribute);
+            noOwner = false;
+          }
+        }
+      }
+    };
+  };
+  var data = function data(_ref) {
+    var dataset = _ref.dataset;
+    return function (value) {
+      for (var key in value) {
+        dataset[key] = value[key];
+      }
+    };
+  };
+  var event = function event(node, name) {
+    var oldValue,
+        type = name.slice(2);
+    if (!(name in node) && name.toLowerCase() in node) type = type.toLowerCase();
+    return function (newValue) {
+      var info = isArray(newValue) ? newValue : [newValue, false];
+
+      if (oldValue !== info[0]) {
+        if (oldValue) node.removeEventListener(type, oldValue, info[1]);
+        if (oldValue = info[0]) node.addEventListener(type, oldValue, info[1]);
+      }
+    };
+  };
+  var ref = function ref(node) {
+    return function (value) {
+      if (typeof value === 'function') value(node);else value.current = node;
+    };
+  };
+  var setter = function setter(node, key) {
+    return function (value) {
+      node[key] = value;
+    };
+  };
+
+  exports.aria = aria;
+  exports.attribute = attribute;
+  exports.data = data;
+  exports.event = event;
+  exports.ref = ref;
+  exports.setter = setter;
+
+  return exports;
+
+}({}));

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "uhandler",
+  "version": "0.0.0",
+  "description": "",
+  "main": "./cjs/index.js",
+  "scripts": {
+    "build": "npm run cjs && npm run rollup:es && npm run rollup:babel && npm run min && npm run test",
+    "cjs": "ascjs esm cjs",
+    "rollup:es": "rollup --config rollup/es.config.js",
+    "rollup:babel": "rollup --config rollup/babel.config.js",
+    "min": "uglifyjs index.js --support-ie8 --comments=/^!/ -c -m -o min.js",
+    "coveralls": "nyc report --reporter=text-lcov | coveralls",
+    "test": "nyc node test/index.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "ascjs": "^3.1.2",
+    "basichtml": "^2.2.1",
+    "coveralls": "^3.0.11",
+    "nyc": "^15.0.0",
+    "rollup": "^2.2.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^5.3.0",
+    "uglify-js": "^3.8.0"
+  },
+  "module": "./esm/index.js",
+  "type": "module",
+  "exports": {
+    "import": "./esm/index.js",
+    "default": "./cjs/index.js"
+  },
+  "unpkg": "min.js",
+  "dependencies": {
+    "uarray": "^1.0.0"
+  }
+}

rollup/babel.config.js

@@ -0,0 +1,18 @@
+import resolve from 'rollup-plugin-node-resolve';
+import babel from 'rollup-plugin-babel';
+
+export default {
+  input: './esm/index.js',
+  plugins: [
+
+    resolve({module: true}),
+    babel({presets: ['@babel/preset-env']})
+  ],
+
+  output: {
+    exports: 'named',
+    file: './index.js',
+    format: 'iife',
+    name: 'uhtmlHandlers'
+  }
+};

rollup/es.config.js

@@ -0,0 +1,18 @@
+import resolve from 'rollup-plugin-node-resolve';
+import {terser} from 'rollup-plugin-terser';
+
+export default {
+  input: './esm/index.js',
+  plugins: [
+
+    resolve({module: true}),
+    terser()
+  ],
+
+  output: {
+    exports: 'named',
+    file: './es.js',
+    format: 'iife',
+    name: 'uhtmlHandlers'
+  }
+};

test/index.js

@@ -0,0 +1,45 @@
+const {document} = require('basichtml').init();
+
+const {aria, attribute, data, event, ref, setter} = require('../cjs');
+
+const div = document.createElement('div');
+
+const ariafy = aria(div);
+ariafy({role: 'button', labelledBy: 'id'});
+console.assert(div.getAttribute('role') === 'button', 'role');
+console.assert(div.getAttribute('aria-labelledBy') === 'id', 'aria-labelled');
+
+const attributefy = attribute(div, 'test');
+attributefy(null);
+attributefy('value');
+attributefy('value');
+console.assert(div.getAttribute('test') === 'value', 'attribute');
+attributefy(null);
+console.assert(!div.hasAttribute('test'), 'attribute null');
+attributefy('value');
+console.assert(div.hasAttribute('test'), 'attribute exists');
+attributefy('test');
+console.assert(div.getAttribute('test') === 'test', 'attribute test');
+
+
+const datafy = data(div);
+datafy({labelledBy: 'id'});
+console.assert(div.dataset.labelledBy === 'id', 'data');
+
+const eventfy = event(div, 'onClick');
+eventfy(Object);
+eventfy([String, false]);
+eventfy([String, false]);
+eventfy(null);
+event(div, 'dataset');
+
+const reffy = ref(div);
+const object = {};
+reffy(object);
+console.assert(object.current === div, 'ref=${object}');
+reffy(node => { object.node = node; });
+console.assert(object.node === div, 'ref=${callback}');
+
+const setterfy = setter(div, 'setter');
+setterfy('value');
+console.assert(div.setter === 'value', 'setter');

test/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}