@thi.ng/rdom 0.13.2 → 0.13.4

package/dom.js

@@ -7,401 +7,222 @@ import { isNumber } from "@thi.ng/checks/is-number";
 import { isString } from "@thi.ng/checks/is-string";
 import { assert } from "@thi.ng/errors/assert";
 import { unsupported } from "@thi.ng/errors/unsupported";
-import { ATTRIB_JOIN_DELIMS, NO_SPANS, RE_TAG, SVG_TAGS, } from "@thi.ng/hiccup/api";
+import {
+  ATTRIB_JOIN_DELIMS,
+  NO_SPANS,
+  RE_TAG,
+  SVG_TAGS
+} from "@thi.ng/hiccup/api";
 import { mergeClasses, mergeEmmetAttribs } from "@thi.ng/hiccup/attribs";
 import { formatPrefixes } from "@thi.ng/hiccup/prefix";
 import { XML_SVG, XML_XLINK, XML_XMLNS } from "@thi.ng/prefixes/xml";
 import { isComment, isComponent } from "./checks.js";
-/**
- * hdom-style DOM tree creation from hiccup format. Returns DOM element of
- * `tree` root. See {@link $el} for further details.
- *
- * @remarks
- * Supports elements given in these forms:
- *
- * - {@link IComponent} instance
- * - {@link IDeref} instance (must resolve to another supported type in this
- *   list)
- * - `["div#id.class", {...attribs}, ...children]`
- * - `[COMMENT, "foo", "bar"...]` (DOM comment node)
- * - `[IComponent, ...mountargs]`
- * - `[function, ...args]`
- * - ES6 iterable of the above (for child values only!)
- *
- * Any other values will be cast to strings and added as spans to current
- * `parent`.
- *
- * Note: `COMMENT` is defined as constant in thi.ng/hiccup package. Also see
- * {@link $comment} function to create comments directly.
- *
- * @param tree -
- * @param parent -
- * @param idx -
- */
-export const $tree = async (tree, parent, idx = -1) => isArray(tree)
-    ? isComment(tree)
-        ? $comment(tree.slice(1), parent, idx)
-        : $treeElem(tree, parent, idx)
-    : isComponent(tree)
-        ? tree.mount(parent, idx)
-        : isDeref(tree)
-            ? $tree(tree.deref(), parent)
-            : isNotStringAndIterable(tree)
-                ? $treeIter(tree, parent)
-                : tree != null
-                    ? $el("span", null, tree, parent, idx)
-                    : null;
+const $tree = async (tree, parent, idx = -1) => isArray(tree) ? isComment(tree) ? $comment(tree.slice(1), parent, idx) : $treeElem(tree, parent, idx) : isComponent(tree) ? tree.mount(parent, idx) : isDeref(tree) ? $tree(tree.deref(), parent) : isNotStringAndIterable(tree) ? $treeIter(tree, parent) : tree != null ? $el("span", null, tree, parent, idx) : null;
 const $treeElem = (tree, parent, idx) => {
-    const tag = tree[0];
-    // [tag, attribs, ...body]
-    return isString(tag)
-        ? $treeTag(tree, parent, idx)
-        : // [icomponent, ...args]
-            isComponent(tag)
-                ? tag.mount(parent, idx, ...tree.slice(1))
-                : // [fn, ...args]
-                    isFunction(tag)
-                        ? $tree(tag.apply(null, tree.slice(1)), parent)
-                        : // unsupported
-                            unsupported(`tag: ${tag}`);
+  const tag = tree[0];
+  return isString(tag) ? $treeTag(tree, parent, idx) : (
+    // [icomponent, ...args]
+    isComponent(tag) ? tag.mount(parent, idx, ...tree.slice(1)) : (
+      // [fn, ...args]
+      isFunction(tag) ? $tree(tag.apply(null, tree.slice(1)), parent) : (
+        // unsupported
+        unsupported(`tag: ${tag}`)
+      )
+    )
+  );
 };
 const $treeTag = (tree, parent, idx) => {
-    const n = tree.length;
-    const { 0: tag, 1: attribs, 2: body } = tree;
-    if (n === 3 && (isString(body) || isNumber(body))) {
-        // emmet-free base tag
-        const tmp = /^\w+/.exec(tag);
-        if (tmp && NO_SPANS[tmp[0]]) {
-            // don't wrap single body in <span> here
-            parent = $el(tag, attribs, body, parent, idx);
-            return parent;
-        }
+  const n = tree.length;
+  const { 0: tag, 1: attribs, 2: body } = tree;
+  if (n === 3 && (isString(body) || isNumber(body))) {
+    const tmp = /^\w+/.exec(tag);
+    if (tmp && NO_SPANS[tmp[0]]) {
+      parent = $el(tag, attribs, body, parent, idx);
+      return parent;
     }
-    parent = $el(tag, attribs, null, parent, idx);
-    for (let i = 2; i < n; i++) {
-        $tree(tree[i], parent);
-    }
-    return parent;
+  }
+  parent = $el(tag, attribs, null, parent, idx);
+  for (let i = 2; i < n; i++) {
+    $tree(tree[i], parent);
+  }
+  return parent;
 };
 const $treeIter = (tree, parent) => {
-    for (let t of tree) {
-        $tree(t, parent);
-    }
-    return null;
-};
-/**
- * Create a single DOM element and optionally attaches it to `parent`.
- *
- * @remarks
- * If `tag` is a namespaced tagname (e.g. `prefix:tag`), the element will be
- * created via `document.createElementNS()` and the prefix will be resolved via
- * known aliases registered by {@link registerPrefix}. SVG element names do not
- * need to be prefixed and are recognized automatically.
- *
- * Supports Emmet-style tag names in this form: `tag#id.class1.class2`.
- * `attribs` is a plain object of element attributes. See {@link $attribs} for
- * further details.
- *
- * If `parent` is given, but no `idx` arg, the new element will be appended as
- * child.
- *
- * @param tag -
- * @param attribs -
- * @param body -
- * @param parent -
- * @param idx -
- */
-export const $el = (tag, attribs, body, parent, idx = -1) => {
-    const match = RE_TAG.exec(tag);
-    if (match) {
-        attribs = mergeEmmetAttribs({ ...attribs }, match[2], match[3]);
-        tag = match[1];
-    }
-    let el;
-    const qidx = tag.indexOf(":");
-    if (qidx < 0) {
-        el = SVG_TAGS[tag]
-            ? document.createElementNS(XML_SVG, tag)
-            : document.createElement(tag);
-    }
-    else {
-        el = document.createElementNS(PREFIXES[tag.substring(0, qidx)], tag);
-    }
-    attribs && $attribs(el, attribs);
-    body != null && $text(el, body);
-    parent && $addChild(parent, el, idx);
-    return el;
-};
-/**
- * Similar to {@link $el}, but creates a new comment DOM node using provided
- * body. If `parent` is given, the comment will be attached or inserted as child
- * at `idx`. Returns comment node.
- *
- * @remarks
- * See thi.ng/hiccup docs for reference:
- * - https://docs.thi.ng/umbrella/hiccup/functions/serialize.html
- *
- * @param body
- * @param parent
- * @param idx
- */
-export const $comment = (body, parent, idx = -1) => {
-    const comment = document.createComment(isString(body)
-        ? body
-        : body.length < 2
-            ? body[0] || ""
-            : ["", ...body, ""].join("\n"));
-    parent && $addChild(parent, comment, idx);
-    return comment;
-};
-/**
- * Appends or inserts `child` as child element of `parent`. The default `idx` of
- * -1 means the child will be appended, else uses `parent.insertBefore()` to
- * insert at given index.
- *
- * @param parent
- * @param child
- * @param idx
- */
-export const $addChild = (parent, child, idx = -1) => {
-    isNumber(idx)
-        ? idx < 0 || idx >= parent.children.length
-            ? parent.appendChild(child)
-            : parent.insertBefore(child, parent.children[idx])
-        : parent.insertBefore(child, idx);
-};
-/**
- * Removes given element or comment from the DOM.
- *
- * @param el
- */
-export const $remove = (el) => el && el.remove();
-/**
- * Migrates given element to `newParent`, following the same append or insertion
- * logic as {@link $addChild}.
- *
- * @param newParent
- * @param el
- * @param idx
- */
-export const $moveTo = (newParent, el, idx = -1) => {
-    $remove(el);
-    $addChild(newParent, el, idx);
-};
-/**
- * Removes all content from given element.
- *
- * @param el
- */
-export const $clear = (el) => ((el.innerHTML = ""), el);
-/**
- * Same as `el.textContent = body`, however if `body` is an
- * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) it'll be
- * first automatically deref'd and coerced to a string. If `body === undefined`
- * an empty string will be used.
- *
- * @param el -
- * @param body -
- */
-export const $text = (el, body) => {
-    body = deref(body);
-    el.textContent = body !== undefined ? String(body) : "";
-};
-/**
- * Same as `el.innerHtml = body`, use with caution! If `body` is an
- * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) it'll be
- * automatically deref'd.
- *
- * @param el -
- * @param body -
- */
-export const $html = (el, body) => {
-    el.innerHTML = String(deref(body));
-};
-/**
- * Takes an object of attributes and applies them to given DOM element.
- *
- * @remarks
- * The following rules & transformations are applied (in the stated order):
- *
- * - [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) values
- *   are `deref`d
- * - attributes prefixed with `on` are considered event listeners and can either
- *   have a function value or tuple of `[listener, opts]`, where `opts` are the
- *   standard `.addEventListener()` options
- * - function values for any other attribs are first called with the entire
- *   `attribs` object and return value used
- * - array values are converted into space-delimited string
- *
- * CSS classs are to given as `class` attribute, with its value either a string
- * or an object of booleans. If the latter, the given class names are either
- * added to or removed from the current list of classes.
- *
- * CSS style rules can be defined via the `style` attrib. Please {@link $style}
- * for further details.
- *
- * Data attributes are to be given as object under the `data` attribute name,
- * with its values being merged with the element's current `dataset` property.
- *
- * Depending on element type the `value` attribute will be updated keeping the
- * current cursor position / selection intact.
- *
- * @param el -
- * @param attribs -
- */
-export const $attribs = (el, attribs) => {
-    for (let id in attribs) {
-        setAttrib(el, id, attribs[id], attribs);
-    }
-    return el;
+  for (let t of tree) {
+    $tree(t, parent);
+  }
+  return null;
+};
+const $el = (tag, attribs, body, parent, idx = -1) => {
+  const match = RE_TAG.exec(tag);
+  if (match) {
+    attribs = mergeEmmetAttribs({ ...attribs }, match[2], match[3]);
+    tag = match[1];
+  }
+  let el;
+  const qidx = tag.indexOf(":");
+  if (qidx < 0) {
+    el = SVG_TAGS[tag] ? document.createElementNS(XML_SVG, tag) : document.createElement(tag);
+  } else {
+    el = document.createElementNS(PREFIXES[tag.substring(0, qidx)], tag);
+  }
+  attribs && $attribs(el, attribs);
+  body != null && $text(el, body);
+  parent && $addChild(parent, el, idx);
+  return el;
+};
+const $comment = (body, parent, idx = -1) => {
+  const comment = document.createComment(
+    isString(body) ? body : body.length < 2 ? body[0] || "" : ["", ...body, ""].join("\n")
+  );
+  parent && $addChild(parent, comment, idx);
+  return comment;
+};
+const $addChild = (parent, child, idx = -1) => {
+  isNumber(idx) ? idx < 0 || idx >= parent.children.length ? parent.appendChild(child) : parent.insertBefore(child, parent.children[idx]) : parent.insertBefore(child, idx);
+};
+const $remove = (el) => el && el.remove();
+const $moveTo = (newParent, el, idx = -1) => {
+  $remove(el);
+  $addChild(newParent, el, idx);
+};
+const $clear = (el) => (el.innerHTML = "", el);
+const $text = (el, body) => {
+  body = deref(body);
+  el.textContent = body !== void 0 ? String(body) : "";
+};
+const $html = (el, body) => {
+  el.innerHTML = String(deref(body));
+};
+const $attribs = (el, attribs) => {
+  for (let id in attribs) {
+    setAttrib(el, id, attribs[id], attribs);
+  }
+  return el;
 };
 const setAttrib = (el, id, val, attribs) => {
-    implementsFunction(val, "deref") && (val = val.deref());
-    const isListener = id.startsWith("on");
-    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;
+  implementsFunction(val, "deref") && (val = val.deref());
+  const isListener = id.startsWith("on");
+  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);
     }
-    isFunction(val) && (val = val(attribs));
-    isArray(val) && (val = val.join(ATTRIB_JOIN_DELIMS[id] || " "));
-    switch (id) {
-        case "class":
-            el.className = isString(val)
-                ? val
-                : mergeClasses(el.className, val);
-            break;
-        case "style":
-            $style(el, val);
-            break;
-        case "value":
-            updateValueAttrib(el, val);
-            break;
-        case "data":
-            updateDataAttribs(el, val);
-            break;
-        case "prefix":
-            el.setAttribute(id, isString(val) ? val : formatPrefixes(val));
-            break;
-        case "accessKey":
-        case "autocapitalize":
-        case "checked":
-        case "contentEditable":
-        case "dir":
-        case "draggable":
-        case "hidden":
-        case "id":
-        case "indeterminate":
-        case "lang":
-        case "scrollLeft":
-        case "scrollTop":
-        case "selectionEnd":
-        case "selectionStart":
-        case "slot":
-        case "spellcheck":
-        case "tabIndex":
-        case "title":
-            el[id] = val;
-            break;
-        default: {
-            const idx = id.indexOf(":");
-            if (idx < 0) {
-                val === false || val == null
-                    ? el.removeAttribute(id)
-                    : el.setAttribute(id, val);
-            }
-            else {
-                const ns = PREFIXES[id.substring(0, idx)];
-                val === false || val == null
-                    ? el.removeAttributeNS(ns, id)
-                    : el.setAttributeNS(ns, id, val);
-            }
-        }
+    return;
+  }
+  isFunction(val) && (val = val(attribs));
+  isArray(val) && (val = val.join(ATTRIB_JOIN_DELIMS[id] || " "));
+  switch (id) {
+    case "class":
+      el.className = isString(val) ? val : mergeClasses(el.className, val);
+      break;
+    case "style":
+      $style(el, val);
+      break;
+    case "value":
+      updateValueAttrib(el, val);
+      break;
+    case "data":
+      updateDataAttribs(el, val);
+      break;
+    case "prefix":
+      el.setAttribute(id, isString(val) ? val : formatPrefixes(val));
+      break;
+    case "accessKey":
+    case "autocapitalize":
+    case "checked":
+    case "contentEditable":
+    case "dir":
+    case "draggable":
+    case "hidden":
+    case "id":
+    case "indeterminate":
+    case "lang":
+    case "scrollLeft":
+    case "scrollTop":
+    case "selectionEnd":
+    case "selectionStart":
+    case "slot":
+    case "spellcheck":
+    case "tabIndex":
+    case "title":
+      el[id] = val;
+      break;
+    default: {
+      const idx = id.indexOf(":");
+      if (idx < 0) {
+        val === false || val == null ? el.removeAttribute(id) : el.setAttribute(id, val === true ? id : val);
+      } else {
+        const ns = PREFIXES[id.substring(0, idx)];
+        val === false || val == null ? el.removeAttributeNS(ns, id) : el.setAttributeNS(ns, id, val);
+      }
     }
+  }
 };
 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 && isString(value)) {
-                const off = value.length - (ev.length - (el.selectionStart || 0));
-                el.value = value;
-                el.selectionStart = el.selectionEnd = off;
-                break;
-            }
-        default:
-            el.value = value;
-    }
+  let ev;
+  switch (el.type) {
+    case "text":
+    case "textarea":
+    case "password":
+    case "search":
+    case "number":
+    case "url":
+    case "tel":
+      if ((ev = el.value) !== void 0 && isString(value)) {
+        const off = value.length - (ev.length - (el.selectionStart || 0));
+        el.value = value;
+        el.selectionStart = el.selectionEnd = off;
+        break;
+      }
+    default:
+      el.value = value;
+  }
 };
 const updateDataAttribs = (el, attribs) => {
-    const data = el.dataset;
-    for (let id in attribs) {
-        const v = deref(attribs[id]);
-        data[id] = isFunction(v) ? v(attribs) : v;
+  const data = el.dataset;
+  for (let id in attribs) {
+    const v = deref(attribs[id]);
+    data[id] = isFunction(v) ? v(attribs) : v;
+  }
+};
+const $style = (el, rules) => {
+  if (isString(rules)) {
+    el.setAttribute("style", rules);
+  } else {
+    const style = el.style;
+    for (let id in rules) {
+      let v = deref(rules[id]);
+      isFunction(v) && (v = v(rules));
+      style[id] = v != null ? v : "";
     }
+  }
 };
-/**
- * Takes an object (or string) of CSS properties, compiles them into a single
- * CSS string and sets it as `style` attribute on the given element.
- *
- * @remarks
- * All property values can be
- * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) values,
- * in which case they're are first `deref`d before use. If the value is a
- * function, it will be called with the entire `rules` object as arg and the
- * return value used.
- *
- * @param el -
- * @param rules -
- */
-export const $style = (el, rules) => {
-    if (isString(rules)) {
-        el.setAttribute("style", rules);
-    }
-    else {
-        const style = el.style;
-        for (let id in rules) {
-            let v = deref(rules[id]);
-            isFunction(v) && (v = v(rules));
-            style[id] = v != null ? v : "";
-        }
-    }
-};
-/**
- * @internal
- */
 const PREFIXES = {
-    svg: XML_SVG,
-    xlink: XML_XLINK,
-    xmlns: XML_XMLNS,
-};
-/**
- * Registers an XML namespace prefix and its URL for later use, e.g. to define
- * namespaced elements/attributes via {@link $el}, {@link $tree}.
- *
- * @param prefix -
- * @param url -
- */
-export const registerPrefix = (prefix, url) => {
-    assert(!PREFIXES[prefix], `${prefix} already registered: ${PREFIXES[prefix]}`);
-    PREFIXES[prefix] = url;
+  svg: XML_SVG,
+  xlink: XML_XLINK,
+  xmlns: XML_XMLNS
+};
+const registerPrefix = (prefix, url) => {
+  assert(
+    !PREFIXES[prefix],
+    `${prefix} already registered: ${PREFIXES[prefix]}`
+  );
+  PREFIXES[prefix] = url;
+};
+export {
+  $addChild,
+  $attribs,
+  $clear,
+  $comment,
+  $el,
+  $html,
+  $moveTo,
+  $remove,
+  $style,
+  $text,
+  $tree,
+  registerPrefix
 };

package/event.js

@@ -1,52 +1,15 @@
 import { maybeParseFloat } from "@thi.ng/strings/parse";
-/**
- * HOF DOM event listener to emit element's value on given stream.
- *
- * @example
- * ```ts
- * const name = reactive("");
- *
- * $compile(
- *   ["input", { oninput: $input(name), value: name }]
- * ).mount(document.body);
- * ```
- *
- * @param stream -
- */
-export const $input = (stream) => (e) => stream.next(e.target.value);
-/**
- * Similar to {@link $input}, but attempts to first coerce value using
- * `parseFloat()`. Uses given `fallback` value (default: 0) if coercion failed
- * (i.e. if the event target's `.value` isn't numeric).
- *
- * @param stream -
- * @param fallback -
- */
-export const $inputNum = (stream, fallback = 0) => (e) => stream.next(maybeParseFloat(e.target.value, fallback));
-/**
- * HOF DOM event listener to emit a checkbox input's value on given stream.
- *
- * @param stream -
- */
-export const $inputCheckbox = (stream) => (e) => stream.next(e.target.checked);
-/**
- * HOF DOM event listener to emit `true` on given stream when event is
- * triggered.
- *
- * @param stream -
- */
-export const $inputTrigger = (stream) => () => stream.next(true);
-/**
- * HOF DOM event listener to emit a file input's first selected file on given
- * stream.
- *
- * @param stream -
- */
-export const $inputFile = (stream) => (e) => stream.next(e.target.files[0]);
-/**
- * HOF DOM event listener to emit a file input's entire selected list of files
- * on given stream.
- *
- * @param stream -
- */
-export const $inputFiles = (stream) => (e) => stream.next(e.target.files);
+const $input = (stream) => (e) => stream.next(e.target.value);
+const $inputNum = (stream, fallback = 0) => (e) => stream.next(maybeParseFloat(e.target.value, fallback));
+const $inputCheckbox = (stream) => (e) => stream.next(e.target.checked);
+const $inputTrigger = (stream) => () => stream.next(true);
+const $inputFile = (stream) => (e) => stream.next(e.target.files[0]);
+const $inputFiles = (stream) => (e) => stream.next(e.target.files);
+export {
+  $input,
+  $inputCheckbox,
+  $inputFile,
+  $inputFiles,
+  $inputNum,
+  $inputTrigger
+};

package/idgen.js

@@ -1,3 +1,5 @@
 let NEXT_ID = 0;
-/** @internal */
-export const __nextID = (name, src) => src ? `rdom$${name}-${src.id}-${NEXT_ID++}` : `rdom$${name}-${NEXT_ID++}`;
+const __nextID = (name, src) => src ? `rdom$${name}-${src.id}-${NEXT_ID++}` : `rdom$${name}-${NEXT_ID++}`;
+export {
+  __nextID
+};