@thi.ng/hdom 9.3.30 → 9.4.0

package/dom.js

@@ -1,277 +1,238 @@
 import { implementsFunction } from "@thi.ng/checks/implements-function";
-import { isArray as isa } from "@thi.ng/checks/is-array";
-import { isNotStringAndIterable as isi } from "@thi.ng/checks/is-not-string-iterable";
-import { isString as iss } from "@thi.ng/checks/is-string";
-import { SVG_TAGS } from "@thi.ng/hiccup/api";
+import { isArray } from "@thi.ng/checks/is-array";
+import { isNotStringAndIterable } from "@thi.ng/checks/is-not-string-iterable";
+import { isString } from "@thi.ng/checks/is-string";
+import { ATTRIB_JOIN_DELIMS, SVG_TAGS } from "@thi.ng/hiccup/api";
 import { css } from "@thi.ng/hiccup/css";
 import { formatPrefixes } from "@thi.ng/hiccup/prefix";
 import { XML_SVG } from "@thi.ng/prefixes/xml";
-const isArray = isa;
-const isNotStringAndIterable = isi;
-const isString = iss;
 const maybeInitElement = (el, tree) => tree.__init && tree.__init.apply(tree.__this, [el, ...tree.__args]);
-/**
- * See {@link HDOMImplementation} interface for further details.
- *
- * @param opts - hdom config options
- * @param parent - DOM element
- * @param tree - component tree
- * @param insert - child index
- */
-export const createTree = (opts, impl, parent, tree, insert, init = true) => {
-    if (isArray(tree)) {
-        const tag = tree[0];
-        if (typeof tag === "function") {
-            return createTree(opts, impl, parent, tag.apply(null, [opts.ctx, ...tree.slice(1)]), insert);
-        }
-        const attribs = tree[1];
-        if (attribs.__impl) {
-            return attribs.__impl.createTree(opts, parent, tree, insert, init);
-        }
-        const el = impl.createElement(parent, tag, attribs, insert);
-        if (tree.length > 2) {
-            const n = tree.length;
-            for (let i = 2; i < n; i++) {
-                createTree(opts, impl, el, tree[i], undefined, init);
-            }
-        }
-        init && maybeInitElement(el, tree);
-        return el;
+const createTree = (opts, impl, parent, tree, insert, init = true) => {
+  if (isArray(tree)) {
+    const tag = tree[0];
+    if (typeof tag === "function") {
+      return createTree(
+        opts,
+        impl,
+        parent,
+        tag.apply(null, [opts.ctx, ...tree.slice(1)]),
+        insert
+      );
     }
-    if (isNotStringAndIterable(tree)) {
-        const res = [];
-        for (let t of tree) {
-            res.push(createTree(opts, impl, parent, t, insert, init));
-        }
-        return res;
+    const attribs = tree[1];
+    if (attribs.__impl) {
+      return attribs.__impl.createTree(
+        opts,
+        parent,
+        tree,
+        insert,
+        init
+      );
     }
-    if (tree == null) {
-        return parent;
+    const el = impl.createElement(parent, tag, attribs, insert);
+    if (tree.length > 2) {
+      const n = tree.length;
+      for (let i = 2; i < n; i++) {
+        createTree(opts, impl, el, tree[i], void 0, init);
+      }
     }
-    return impl.createTextElement(parent, tree);
+    init && maybeInitElement(el, tree);
+    return el;
+  }
+  if (isNotStringAndIterable(tree)) {
+    const res = [];
+    for (let t of tree) {
+      res.push(createTree(opts, impl, parent, t, insert, init));
+    }
+    return res;
+  }
+  if (tree == null) {
+    return parent;
+  }
+  return impl.createTextElement(parent, tree);
 };
-/**
- * See {@link HDOMImplementation} interface for further details.
- *
- * @param opts - hdom config options
- * @param parent - DOM element
- * @param tree - component tree
- * @param index - child index
- */
-export const hydrateTree = (opts, impl, parent, tree, index = 0) => {
-    if (isArray(tree)) {
-        const el = impl.getChild(parent, index);
-        if (typeof tree[0] === "function") {
-            hydrateTree(opts, impl, parent, tree[0].apply(null, [opts.ctx, ...tree.slice(1)]), index);
-        }
-        const attribs = tree[1];
-        if (attribs.__impl) {
-            return attribs.__impl.hydrateTree(opts, parent, tree, index);
-        }
-        maybeInitElement(el, tree);
-        for (let a in attribs) {
-            a[0] === "o" && a[1] === "n" && impl.setAttrib(el, a, attribs[a]);
-        }
-        for (let n = tree.length, i = 2; i < n; i++) {
-            hydrateTree(opts, impl, el, tree[i], i - 2);
-        }
+const hydrateTree = (opts, impl, parent, tree, index = 0) => {
+  if (isArray(tree)) {
+    const el = impl.getChild(parent, index);
+    if (typeof tree[0] === "function") {
+      hydrateTree(
+        opts,
+        impl,
+        parent,
+        tree[0].apply(null, [opts.ctx, ...tree.slice(1)]),
+        index
+      );
+    }
+    const attribs = tree[1];
+    if (attribs.__impl) {
+      return attribs.__impl.hydrateTree(
+        opts,
+        parent,
+        tree,
+        index
+      );
     }
-    else if (isNotStringAndIterable(tree)) {
-        for (let t of tree) {
-            hydrateTree(opts, impl, parent, t, index);
-            index++;
-        }
+    maybeInitElement(el, tree);
+    for (let a in attribs) {
+      a[0] === "o" && a[1] === "n" && impl.setAttrib(el, a, attribs[a]);
     }
+    for (let n = tree.length, i = 2; i < n; i++) {
+      hydrateTree(opts, impl, el, tree[i], i - 2);
+    }
+  } else if (isNotStringAndIterable(tree)) {
+    for (let t of tree) {
+      hydrateTree(opts, impl, parent, t, index);
+      index++;
+    }
+  }
 };
-/**
- * Creates a new DOM element of type `tag` with optional `attribs`. If
- * `parent` is not `null`, the new element will be inserted as child at
- * given `insert` index. If `insert` is missing, the element will be
- * appended to the `parent`'s list of children. Returns new DOM node.
- *
- * If `tag` is a known SVG element name, the new element will be created
- * with the proper SVG XML namespace.
- *
- * @param parent - DOM element
- * @param tag - component tree
- * @param attribs - attributes
- * @param insert - child index
- */
-export const createElement = (parent, tag, attribs, insert) => {
-    const el = SVG_TAGS[tag]
-        ? document.createElementNS(XML_SVG, tag)
-        : document.createElement(tag);
-    attribs && setAttribs(el, attribs);
-    return addChild(parent, el, insert);
+const createElement = (parent, tag, attribs, insert) => {
+  const el = SVG_TAGS[tag] ? document.createElementNS(XML_SVG, tag) : document.createElement(tag);
+  attribs && setAttribs(el, attribs);
+  return addChild(parent, el, insert);
 };
-export const createTextElement = (parent, content, insert) => addChild(parent, document.createTextNode(content), insert);
-export const addChild = (parent, child, insert) => parent
-    ? insert === undefined
-        ? parent.appendChild(child)
-        : parent.insertBefore(child, parent.children[insert])
-    : child;
-export const getChild = (parent, child) => parent.children[child];
-export const replaceChild = (opts, impl, parent, child, tree, init = true) => (impl.removeChild(parent, child),
-    impl.createTree(opts, parent, tree, child, init));
-export const cloneWithNewAttribs = (el, attribs) => {
-    const res = el.cloneNode(true);
-    setAttribs(res, attribs);
-    el.parentNode.replaceChild(res, el);
-    return res;
+const createTextElement = (parent, content, insert) => addChild(parent, document.createTextNode(content), insert);
+const addChild = (parent, child, insert) => parent ? insert === void 0 ? parent.appendChild(child) : parent.insertBefore(child, parent.children[insert]) : child;
+const getChild = (parent, child) => parent.children[child];
+const replaceChild = (opts, impl, parent, child, tree, init = true) => (impl.removeChild(parent, child), impl.createTree(opts, parent, tree, child, init));
+const cloneWithNewAttribs = (el, attribs) => {
+  const res = el.cloneNode(true);
+  setAttribs(res, attribs);
+  el.parentNode.replaceChild(res, el);
+  return res;
 };
-export const setContent = (el, body) => (el.textContent = body);
-export const setAttribs = (el, attribs) => {
-    for (let k in attribs) {
-        setAttrib(el, k, attribs[k], attribs);
-    }
-    return el;
+const setContent = (el, body) => el.textContent = body;
+const setAttribs = (el, attribs) => {
+  for (let k in attribs) {
+    setAttrib(el, k, attribs[k], attribs);
+  }
+  return el;
 };
-/**
- * Sets a single attribute on given element. If attrib name is NOT an
- * event name (prefix: "on") and its value is a function, it is called
- * with given `attribs` object (usually the full attrib object passed to
- * {@link setAttribs}) and the function's return value is used as the actual
- * attrib value.
- *
- * Special rules apply for certain attributes:
- *
- * - "style": delegated to {@link setStyle}
- * - "value": delegated to {@link updateValueAttrib}
- * - attrib IDs starting with "on" are treated as event listeners
- *
- * If the given (or computed) attrib value is `false` or `undefined` the
- * attrib is removed from the element.
- *
- * @param el - DOM element
- * @param id - attribute name
- * @param val - attribute value
- * @param attribs - object of all attribs
- */
-export const setAttrib = (el, id, val, attribs) => {
-    implementsFunction(val, "deref") && (val = val.deref());
-    if (id.startsWith("__"))
-        return;
-    const isListener = id[0] === "o" && id[1] === "n";
-    if (!isListener && typeof val === "function") {
-        val = val(attribs);
-    }
-    if (val !== undefined && val !== false) {
-        switch (id) {
-            case "style":
-                setStyle(el, val);
-                break;
-            case "value":
-                updateValueAttrib(el, val);
-                break;
-            case "prefix":
-                el.setAttribute(id, isString(val) ? val : formatPrefixes(val));
-                break;
-            case "accesskey":
-                el.accessKey = val;
-                break;
-            case "contenteditable":
-                el.contentEditable = val;
-                break;
-            case "tabindex":
-                el.tabIndex = val;
-                break;
-            case "align":
-            case "autocapitalize":
-            case "checked":
-            case "dir":
-            case "draggable":
-            case "hidden":
-            case "id":
-            case "lang":
-            case "namespaceURI":
-            case "scrollTop":
-            case "scrollLeft":
-            case "title":
-                // TODO add more properties / enumerated attribs?
-                el[id] = val;
-                break;
-            default:
-                isListener
-                    ? setListener(el, id.substring(2), val)
-                    : el.setAttribute(id, val === true ? "" : val);
-        }
-    }
-    else {
-        el.hasAttribute(id)
-            ? el.removeAttribute("title")
-            : el[id] && (el[id] = null);
+const setAttrib = (el, id, val, attribs) => {
+  implementsFunction(val, "deref") && (val = val.deref());
+  if (id.startsWith("__"))
+    return;
+  const isListener = id[0] === "o" && id[1] === "n";
+  if (isListener) {
+    if (isString(val)) {
+      el.setAttribute(id, val);
+    } else {
+      id = id.substring(2);
+      isArray(val) ? el.addEventListener(id, val[0], val[1]) : el.addEventListener(id, val);
     }
     return el;
+  }
+  if (typeof val === "function")
+    val = val(attribs);
+  if (isArray(val))
+    val = val.join(ATTRIB_JOIN_DELIMS[id] || " ");
+  switch (id) {
+    case "style":
+      setStyle(el, val);
+      break;
+    case "value":
+      updateValueAttrib(el, val);
+      break;
+    case "prefix":
+      el.setAttribute(id, isString(val) ? val : formatPrefixes(val));
+      break;
+    case "accesskey":
+    case "accessKey":
+      el.accessKey = val;
+      break;
+    case "contenteditable":
+    case "contentEditable":
+      el.contentEditable = val;
+      break;
+    case "tabindex":
+    case "tabIndex":
+      el.tabIndex = val;
+      break;
+    case "align":
+    case "autocapitalize":
+    case "checked":
+    case "dir":
+    case "draggable":
+    case "hidden":
+    case "id":
+    case "indeterminate":
+    case "lang":
+    case "namespaceURI":
+    case "scrollLeft":
+    case "scrollTop":
+    case "selectionEnd":
+    case "selectionStart":
+    case "slot":
+    case "spellcheck":
+    case "title":
+      el[id] = val;
+      break;
+    default:
+      val === false || val == null ? el.removeAttribute(id) : el.setAttribute(id, val === true ? id : val);
+  }
+  return el;
 };
-/**
- * Updates an element's `value` property. For form elements it too
- * ensures the edit cursor retains its position.
- *
- * @param el - DOM element
- * @param value - value
- */
-export const updateValueAttrib = (el, value) => {
-    let ev;
-    switch (el.type) {
-        case "text":
-        case "textarea":
-        case "password":
-        case "search":
-        case "number":
-        case "email":
-        case "url":
-        case "tel":
-        case "date":
-        case "datetime-local":
-        case "time":
-        case "week":
-        case "month":
-            if ((ev = el.value) !== undefined && typeof value === "string") {
-                const off = value.length - (ev.length - (el.selectionStart || 0));
-                el.value = value;
-                el.selectionStart = el.selectionEnd = off;
-                break;
-            }
-        default:
-            el.value = value;
-    }
+const updateValueAttrib = (el, value) => {
+  let ev;
+  switch (el.type) {
+    case "text":
+    case "textarea":
+    case "password":
+    case "search":
+    case "number":
+    case "email":
+    case "url":
+    case "tel":
+    case "date":
+    case "datetime-local":
+    case "time":
+    case "week":
+    case "month":
+      if ((ev = el.value) !== void 0 && typeof value === "string") {
+        const off = value.length - (ev.length - (el.selectionStart || 0));
+        el.value = value;
+        el.selectionStart = el.selectionEnd = off;
+        break;
+      }
+    default:
+      el.value = value;
+  }
 };
-export const removeAttribs = (el, attribs, prev) => {
-    for (let i = attribs.length; i-- > 0;) {
-        const a = attribs[i];
-        if (a[0] === "o" && a[1] === "n") {
-            removeListener(el, a.substring(2), prev[a]);
-        }
-        else {
-            el.hasAttribute(a) ? el.removeAttribute(a) : (el[a] = null);
-        }
+const removeAttribs = (el, attribs, prev) => {
+  for (let i = attribs.length; i-- > 0; ) {
+    const a = attribs[i];
+    if (a[0] === "o" && a[1] === "n") {
+      removeListener(el, a.substring(2), prev[a]);
+    } else {
+      el.hasAttribute(a) ? el.removeAttribute(a) : el[a] = null;
     }
+  }
+};
+const setStyle = (el, styles) => (el.setAttribute("style", css(styles)), el);
+const setListener = (el, id, listener) => isString(listener) ? el.setAttribute("on" + id, listener) : isArray(listener) ? el.addEventListener(id, ...listener) : el.addEventListener(id, listener);
+const removeListener = (el, id, listener) => isArray(listener) ? el.removeEventListener(id, ...listener) : el.removeEventListener(id, listener);
+const clearDOM = (el) => el.innerHTML = "";
+const removeChild = (parent, childIdx) => {
+  const n = parent.children[childIdx];
+  n !== void 0 && parent.removeChild(n);
 };
-export const setStyle = (el, styles) => (el.setAttribute("style", css(styles)), el);
-/**
- * Adds event listener (possibly with options).
- *
- * @param el - DOM element
- * @param id - event name (w/o `on` prefix)
- * @param listener -
- */
-export const setListener = (el, id, listener) => isString(listener)
-    ? el.setAttribute("on" + id, listener)
-    : isArray(listener)
-        ? el.addEventListener(id, ...listener)
-        : el.addEventListener(id, listener);
-/**
- * Removes event listener (possibly with options).
- *
- * @param el - DOM element
- * @param id - event name (w/o `on` prefix)
- * @param listener -
- */
-export const removeListener = (el, id, listener) => isArray(listener)
-    ? el.removeEventListener(id, ...listener)
-    : el.removeEventListener(id, listener);
-export const clearDOM = (el) => (el.innerHTML = "");
-export const removeChild = (parent, childIdx) => {
-    const n = parent.children[childIdx];
-    n !== undefined && parent.removeChild(n);
+export {
+  addChild,
+  clearDOM,
+  cloneWithNewAttribs,
+  createElement,
+  createTextElement,
+  createTree,
+  getChild,
+  hydrateTree,
+  removeAttribs,
+  removeChild,
+  removeListener,
+  replaceChild,
+  setAttrib,
+  setAttribs,
+  setContent,
+  setListener,
+  setStyle,
+  updateValueAttrib
 };

package/logger.js

@@ -1,3 +1,7 @@
 import { NULL_LOGGER } from "@thi.ng/logger/null";
-export let LOGGER = NULL_LOGGER;
-export const setLogger = (logger) => (LOGGER = logger);
+let LOGGER = NULL_LOGGER;
+const setLogger = (logger) => LOGGER = logger;
+export {
+  LOGGER,
+  setLogger
+};