jqx-es 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jqx-es",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "private": false,
   "type": "module",
   "description": "The good parts of JQuery",

package/src/DOM.js

@@ -2,53 +2,57 @@ import {
   cleanupHtml,
   getRestricted,
   ATTRS, } from "./DOMCleanup.js";
-import {truncateHtmlStr, IS, isNode} from "./JQxExtensionHelpers.js";
-const insertPositions = new Proxy({
-  start: "afterbegin", afterbegin: "afterbegin",
-  end: "beforeend", beforeend: "beforeend",
-  before: "beforebegin", beforebegin: "beforebegin",
-  after: "afterend", afterend: "afterend" }, {
-    get(obj, key) { return obj[String(key).toLowerCase()] ?? obj[key]; }
-  });
-const htmlToVirtualElement = htmlString => {
+import {IS, insertPositions, isNode, truncateHtmlStr} from "./Utilities.js";
+
+export {
+  getRestricted, createElementFromHtmlString, element2DOM,
+  cleanupHtml, inject2DOMTree, ATTRS
+};
+
+function htmlToVirtualElement(htmlString) {
   const placeholderNode = document.createElement("div");
   placeholderNode.insertAdjacentHTML(insertPositions.end, htmlString);
   return placeholderNode.childNodes.length
     ? cleanupHtml(placeholderNode)
     : undefined;
-};
-const characterDataElement2DOM = (elem, root, position) => {
+}
+
+function characterDataElement2DOM(elem, root, position) {
   if (IS(elem, Comment)) {
     return root.insertAdjacentHTML(position, `<!--${elem.data}-->`);
   }
   return root.insertAdjacentText(position, elem.data);
-};
-const inject2DOMTree = (
-  collection = [],
-  root = document.body,
-  position = insertPositions.BeforeEnd ) =>
-  collection.reduce( (acc, elem) => {
+}
+
+function inject2DOMTree( collection = [], root = document.body, position = insertPositions.BeforeEnd ) {
+  position = position || insertPositions.BeforeEnd;
+  return collection.reduce( (acc, elem) => {
     const created = isNode(elem) && element2DOM(elem, root, position);
     return created ? [...acc, created] : acc;
   }, []);
-const element2DOM = (elem, root = document.body, position = insertPositions.BeforeEnd) => {
+}
+
+function element2DOM(elem, root = document.body, position = insertPositions.BeforeEnd) {
+  position = position || insertPositions.BeforeEnd;
   root = root?.isJQx ? root?.[0] : root;
 
-  return IS(elem, Comment, Text) ?
-    characterDataElement2DOM(elem, root, position) : root.insertAdjacentElement(position, elem);
-};
-const createElementFromHtmlString = htmlStr => {
+  return IS(elem, Comment, Text)
+    ? characterDataElement2DOM(elem, root, position)
+    : IS(elem, HTMLElement) ? root.insertAdjacentElement(position, elem) : undefined;
+}
+
+function createElementFromHtmlString(htmlStr) {
   if (IS(htmlStr, Text, Comment)) {
     return htmlStr;
   }
-  
+
   const testStr = htmlStr?.trim();
   let text = testStr?.split(/<text>|<\/text>/i) ?? [];
-  
+
   if (text?.length) {
     text = text.length > 1 ? text.filter(v => v.length).shift() : undefined;
   }
-  
+
   if (testStr.startsWith(`<!--`) && testStr.endsWith(`-->`)) {
     return document.createComment(htmlStr.replace(/<!--|-->$/g, ''));
   }
@@ -64,14 +68,4 @@ const createElementFromHtmlString = htmlStr => {
   }
 
   return nwElem.children[0];
-};
-
-export {
-  getRestricted,
-  createElementFromHtmlString,
-  element2DOM,
-  cleanupHtml,
-  inject2DOMTree,
-  insertPositions,
-  ATTRS,
-};
+}

package/src/DOMCleanup.js

@@ -1,7 +1,6 @@
-import { truncate2SingleStr, IS/*, debugLog*/ } from "./JQxExtensionHelpers.js";
 import cleanupTagInfo from "./HTMLTags.js";
 import {ATTRS} from "./EmbedResources.js";
-import {escHtml, systemLog} from "./Utilities.js";
+import {IS, truncate2SingleStr, escHtml, systemLog} from "./Utilities.js";
 
 let logElementCreationErrors2Console = true;
 const attrRegExpStore = {
@@ -10,22 +9,25 @@ const attrRegExpStore = {
   whiteSpace: /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g,
   notAllowedValues: /^javascript|injected|noreferrer|alert|DataURL/gi
 };
-const logContingentErrors = elCreationInfo => {
+
+function logContingentErrors(elCreationInfo) {
   if (logElementCreationErrors2Console && Object.keys(elCreationInfo.removed).length) {
     const msgs = Object.entries(elCreationInfo.removed)
       .reduce( (acc, [k, v]) => [...acc, `${escHtml(k)} => ${v}`], [])
       .join(`\\000A`);
-    systemLog.error(`JQx HTML creation errors: ${msgs}`);
+    systemLog.error(`JQx: HTML creation error(s): ${msgs}`);
   }
-};
-const elementCheck = function(child) {
+}
+
+function elementCheck(child) {
   const name = child.nodeName.toLowerCase();
   const notAllowedCustomElementNames = [
     `annotation-xml`, `color-profile`, `font-face`, `font-face-src`,
     `font-face-uri`, `font-face-format`, `font-face-name`, `missing-glyph` ];
   return /-/.test(name) && !notAllowedCustomElementNames.find(v => v === name) || cleanupTagInfo.isAllowed(name);
-};
-const cleanupHtml = el2Clean => {
+}
+
+function cleanupHtml(el2Clean) {
   const elCreationInfo = {
     rawHTML: el2Clean?.parentElement?.getHTML() ?? `no html`,
     removed: { },
@@ -75,7 +77,7 @@ const cleanupHtml = el2Clean => {
   logContingentErrors(elCreationInfo);
 
   return el2Clean;
-};
+}
 const emphasize = str => `***${str}***`;
 const getRestricted = emphasizeTag =>
   Object.entries(cleanupTagInfo)
@@ -83,6 +85,5 @@ const getRestricted = emphasizeTag =>
       !value.allowed &&
       [...acc, (emphasizeTag && key === emphasizeTag ? emphasize(key) : key)] ||
       acc, []);
-const logElementCreationErrors = onOff => logElementCreationErrors2Console = onOff;
 
-export { cleanupHtml, getRestricted, logElementCreationErrors, ATTRS};
+export { cleanupHtml, getRestricted, ATTRS};

package/src/HTMLTags.js

@@ -1,5 +1,5 @@
 import { allTags } from "./EmbedResources.js";
-import { IS } from "./JQxExtensionHelpers.js";
+import { IS } from "./Utilities.js";
 let lenient = false;
 const allowUnknownHtmlTags = {
   on: () => lenient = true,

package/src/HandlerFactory.js

@@ -32,7 +32,8 @@ function HandleFactory(jqx) {
       : { handler: evt => {
             const target = evt.target?.closest?.(selector);
             return target && callback(evt, jqx(target), remove);
-          }, remove
+          },
+          remove
         };
 
     if (abortcontroller) {

package/src/{JQxExtensionHelpers.js → JQxFactory.js}

@@ -1,44 +1,33 @@
-import { createElementFromHtmlString, insertPositions, inject2DOMTree, cleanupHtml } from "./DOM.js";
+import { cleanupHtml } from "./DOM.js";
 import allMethodsFactory from "./JQxMethods.js";
 import PopupFactory from "./Popup.js";
 import { listeners, default as HandleFactory } from "./HandlerFactory.js";
 import tagLib from "./HTMLTags.js";
 import {
-  randomString, toDashedNotation, IS, truncateHtmlStr, tagFNFactory as $T,
-  truncate2SingleStr, styleFactory, toCamelcase, systemLog, escHtml,
-  isNonEmptyString, resolveEventTypeParameter, extensionHelpers,
+  randomString, toDashedNotation, IS, tagFNFactory as $T, styleFactory, toCamelcase, systemLog, escHtml,
+  isNonEmptyString, resolveEventTypeParameter, selectedExtensionHelpers, insertPositions,
 } from "./Utilities.js";
 
 let instanceGetters, instanceMethods;
 const {
-  isCommentOrTextNode, isNode, isComment, isText, isHtmlString, isArrayOfHtmlElements,
-  isArrayOfHtmlStrings, ElemArray2HtmlString, input2Collection, setCollectionFromCssSelector,
-  addHandlerId, cssRuleEdit, addFn
-} = localHelpersFactory();
+  isComment, isText, isHtmlString, isArrayOfHtmlElements, isArrayOfHtmlStrings,
+  ElemArray2HtmlString, addHandlerId, cssRuleEdit, addFn
+} = selectedUtilitiesFactory();
 
-// todo: clean this up
-export {
-  addHandlerId, isHtmlString, isNode, isArrayOfHtmlStrings, isArrayOfHtmlElements, isCommentOrTextNode,
-  inject2DOMTree, ElemArray2HtmlString, input2Collection, setCollectionFromCssSelector,
-  truncateHtmlStr, truncate2SingleStr, proxify, addJQxStaticMethods, createElementFromHtmlString,
-  insertPositions, IS, };
+export { proxify, addJQxStaticMethods };
 
 /* region functions */
-function localHelpersFactory() {
+function selectedUtilitiesFactory() {
   const cssRuleEdit = styleFactory({createWithId: `JQxStylesheet`});
   const addFn = (name, fn) => instanceMethods[name] = (self, ...params) => fn(self, ...params);
-  return {...extensionHelpers(), ...{cssRuleEdit, addFn, }};
+  return { ...selectedExtensionHelpers(), ...{ cssRuleEdit, addFn } };
 }
 
 function proxify(instance) {
   return new Proxy( instance, { get: (obj, key) => proxyKeyFactory(obj, key, instance) } );
 }
 
-function wrapExtension(method, instance) {
-  return  (...args) => IS(method, Function) && method(proxify(instance), ...args);
-}
-
-function wrapGetter(method, instance) {
+function wrap(method, instance) {
   return (...args) => IS(method, Function) && method(proxify(instance), ...args);
 }
 
@@ -46,8 +35,8 @@ function proxyKeyFactory(self, key, instance) {
   switch(true) {
     case IS(key, Symbol): return self;
     case IS(+key, Number): return self.collection?.[key] || undefined;
-    case (key in instanceGetters): return wrapGetter(instanceGetters[key], instance)();
-    case (key in instanceMethods): return wrapExtension(instanceMethods[key], instance);
+    case (key in instanceGetters): return wrap(instanceGetters[key], instance)();
+    case (key in instanceMethods): return wrap(instanceMethods[key], instance);
     default: return self[key];
   }
 }
@@ -101,7 +90,7 @@ function cssRemove(...rules) {
 function virtualFactory(jqx) {
   return function(html, root, position) {
     root = root?.isJQx ? root?.[0] : root;
-    position = position && Object.values(insertPositions).find(pos => position === pos) ? position : undefined;
+    position = position && Object.values(insertPositions).find(pos => position === pos);
     const virtualElem = jqx(html, document.createElement(`br`));
     if (root && !IS(root, HTMLBRElement)) {
       for (const elem of virtualElem.collection) {
@@ -123,18 +112,12 @@ function combineObjectSources(...sources) {
   return result;
 }
 
-function tagNotAllowed(tagName) {
-  console.error(`JQx: "${tagName}" not allowed, not rendered`);
-  return undefined;
-}
-
 function tagGetterFactory(tagName, cando, jqx, webComponentTagName) {
   tagName = toDashedNotation(webComponentTagName || tagName.toLowerCase());
   return {
     get() {
-      return  (...args) => {
-        if (!cando) { return tagNotAllowed(tagName) }
-        return jqx.virtual(cleanupHtml($T[tagName](...args)));
+      return (...args) => {
+        return cando && jqx.virtual(cleanupHtml($T[tagName](...args)));
       }
     },
     enumerable: false,
@@ -165,7 +148,6 @@ function staticTagsLambda(jqx) {
 
 function delegateFactory(listen) {
   return function(type, selector, ...listeners) {
-
     if (IS(selector, Function)) {
       listeners.push(selector);
       selector = undefined;
@@ -184,7 +166,7 @@ function delegateCaptureFactory(listen) {
     handlers = IS(handlers, Function) ? [handlers] : handlers;
     canRemove = IS(canRemove, Boolean) ? canRemove : false;
     const params = { eventType: typesResolved, selector: selector || origin, capture,
-      name: specifiedName, once, canRemove};
+      name: specifiedName, once, canRemove };
     switch(true) {
       case IS(typesResolved, Array) && typesResolved.length > 0:
         for (const type of typesResolved) {
@@ -203,11 +185,9 @@ function delegateCaptureFactory(listen) {
 }
 
 function getNamedListener(type, name) {
-  name = isNonEmptyString(name) ? name : undefined;
-  type = isNonEmptyString(type) ? type : undefined;
-  if (name && type) {
-    return [...listeners[type].values()].find(h => (h.name || ``) === name);
-  }
+  name = isNonEmptyString(name) && name;
+  type = isNonEmptyString(type) && type;
+  return name && type && [...listeners[type].values()].find(h => (h.name || ``) === name);
 }
 
 function popupGetter(jqx) {
@@ -250,7 +230,6 @@ function staticMethodsFactory(jqx) {
     text: (str, isComment = false) => isComment ? jqx.comment(str) : document.createTextNode(str),
     node: (selector, root = document) => root.querySelector(selector, root),
     nodes: (selector, root = document) =>  [...root.querySelectorAll(selector, root)],
-    //get logger() { return loggerFactory() },
     get getNamedListener() { return getNamedListener; },
     get virtual() { return virtualFactory(jqx); },
     get allowTag() { return allowProhibit.allow; },

package/src/JQxMethods.js

@@ -1,42 +1,26 @@
-import {createElementFromHtmlString, insertPositions} from "./DOM.js";
-import {
-  IS,
-  addHandlerId,
-  isNode,
-  inject2DOMTree,
-  isCommentOrTextNode,
-  truncateHtmlStr,
-} from "./JQxExtensionHelpers.js";
+import {createElementFromHtmlString, inject2DOMTree} from "./DOM.js";
 import {ATTRS} from "./EmbedResources.js";
 import {
-  ExamineElementFeatureFactory,
-  isNonEmptyString,
-  toDashedNotation,
-  toCamelcase,
-  randomString,
-  escHtml,
-  systemLog,
+  IS, isNode, truncateHtmlStr, addHandlerId, ExamineElementFeatureFactory,
+  isNonEmptyString, toDashedNotation, randomString, escHtml, systemLog,
+  insertPositions, isCommentOrTextNode, datasetKeyProxy
 } from "./Utilities.js";
-const loop = (instance, callback) => {
-  const cleanCollection = instance.collection.filter(el => !isCommentOrTextNode(el));
-  for (let i = 0; i < cleanCollection.length; i += 1) {
-    callback(cleanCollection[i], i);
-  }
 
-  return instance;
-};
 const isIt = ExamineElementFeatureFactory();
-const datasetKeyProxy = { get(obj, key) {
-  return obj[toCamelcase(key)] || obj[key]; },
-  enumerable: false,
-  configurable: false
-};
 
 /* region functions */
 function emptyElement(el) {
   return el && (el.textContent = "");
 }
 
+function loop(instance, callback) {
+  const cleanCollection = instance.collection.filter(el => !isCommentOrTextNode(el));
+  for (let i = 0; i < cleanCollection.length; i += 1) {
+    callback(cleanCollection[i], i);
+  }
+
+  return instance;
+}
 
 function compareCI(key, compareTo) {
   return key.toLowerCase().trim() === compareTo.trim().toLowerCase();
@@ -341,9 +325,15 @@ function instanceExtensionsFactory(jqx) {
     computedStyle: (instance, property) => instance.first() && getComputedStyle(instance.first())[property],
     css: (instance, keyOrKvPairs, value) => loop(instance, el => css(el, keyOrKvPairs, value, jqx)),
     duplicate: (instance, toDOM = false, root = document.body) => {
-      const nodes = instance.toNodeList().map(el => el.removeAttribute && el.removeAttribute(`id`) || el);
-      const nwJQx = jqx.virtual(nodes);
-      return toDOM ? nwJQx.toDOM(root) : nwJQx;
+      if (instance.collection.length > 0) {
+        const clone = instance.collection[0].cloneNode(true);
+        clone.childNodes.forEach((node) => {
+          node.removeAttribute && node?.removeAttribute(`id`)
+        });
+        return toDOM ? jqx(clone).toDOM(root) : jqx.virtual(clone);
+      }
+      systemLog.error(`Duplicating an empty JQx instance is not possible`);
+      return instance;
     },
     each: (instance, cb) => loop(instance, cb),
     empty: instance => loop(instance, emptyElement),
@@ -510,7 +500,7 @@ function instanceExtensionsFactory(jqx) {
     removeClass: (instance, ...classNames) =>
       loop(instance, el => { if (el) { for (const cn of classNames) { el.classList.remove(cn); } } }),
     renderTo: (instance, root = document.body, at = jqx.at.end) => {
-      instance.toDOM(root, at);
+      instance.first$().toDOM(root, at);
       return instance;
     },
     replace: (instance, oldChild, newChild) => {
@@ -594,8 +584,7 @@ function instanceExtensionsFactory(jqx) {
     },
     toDOM: (instance, root = document.body, position = insertPositions.BeforeEnd) => {
       if (instance.isVirtual) { instance.isVirtual = false; }
-      instance.collection = inject2DOMTree(instance.collection, root, position);
-
+      inject2DOMTree(instance.collection, root, position);
       return instance;
     },
     toggleClass: (instance, className) => loop(instance, el => el.classList.toggle(className)),

package/src/Popup.js

@@ -1,14 +1,13 @@
 import { popupStyling as styleRules } from "./EmbedResources.js";
 
 export default function($) {
-  if (!$(`#jqxPopup`).isEmpty()) { return; }
-
+  if ($.node(`#jqxPopup`)) { return; }
+  $.logger.log(`JQx: [JQx].Popup first call. Dialog element created.`);
   $.dialog({id: `jqxPopup`}, $.div({ id: "jqxPopupContent" })).render;
   $.editCssRules(...styleRules);
   const [popupContent, popupNode] = [$(`#jqxPopupContent`), $.node(`#jqxPopup`)];
   let currentProps = {};
   $.handle( { type: `click, keydown`, handlers: genericPopupCloseHandler, capture: true } );
-
   return Object.freeze({show: initPopup, removeModal});
 
   function initPopup(props) {

package/src/Utilities.js

@@ -7,6 +7,18 @@ const characters4RandomString = [...Array(26)]
   .concat([...Array(26)].map((x, i) => String.fromCharCode(i + 97)))
   .concat([...Array(10)].map((x, i) => `${i}`));
 const systemLog = systemLogFactory();
+const datasetKeyProxy = {
+  get(obj, key) { return obj[toCamelcase(key)] || obj[key]; },
+  enumerable: false,
+  configurable: false
+};
+const insertPositions = new Proxy({
+  start: "afterbegin", afterbegin: "afterbegin",
+  end: "beforeend", beforeend: "beforeend",
+  before: "beforebegin", beforebegin: "beforebegin",
+  after: "afterend", afterend: "afterend" }, {
+  get(obj, key) { return obj[String(key).toLowerCase()] ?? obj[key]; }
+});
 
 function pad0(nr, n=2) {
   return `${nr}`.padStart(n, `0`);
@@ -97,68 +109,100 @@ function escHtml(html) {
   return html.replace(/</g, `&lt;`).replace(/>/g, `&gt;`);
 }
 
-function extensionHelpers() {
-  const isCommentOrTextNode = elem => IS(elem, Comment, Text);
-  const isNode = input => IS(input, Text, HTMLElement, Comment);
-  const isComment = input => IS(input, Comment);
-  const isText = input => IS(input, Text);
-  const isHtmlString = input => IS(input, String) && /^<|>$/.test(`${input}`.trim());
-  const isArrayOfHtmlStrings = input => IS(input, Array) && !input?.find(s => !isHtmlString(s));
-  const isArrayOfHtmlElements = input => IS(input, Array) && !input?.find(el => !isNode(el));
-  const ElemArray2HtmlString = elems => elems?.filter(el => el).reduce((acc, el) =>
+function isCommentOrTextNode(node) {
+  return IS(node, Comment, Text);
+}
+
+function isNode(input) {
+  return IS(input, Text, HTMLElement, Comment)
+}
+
+function isComment(input) {
+  IS(input, Comment);
+}
+
+function isText(input) {
+  return IS(input, Text);
+}
+
+function isHtmlString(input) {
+  return IS(input, String) && /^<|>$/.test(`${input}`.trim());
+}
+
+function isArrayOfHtmlElements(input) {
+  return IS(input, Array) && !input?.find(el => !isNode(el));
+}
+
+function isArrayOfHtmlStrings(input) {
+  return IS(input, Array) && !input?.find(s => !isHtmlString(s));
+}
+
+function ElemArray2HtmlString(elems) {
+  return elems?.filter(el => el).reduce((acc, el) =>
     acc.concat(isComment(el) ? `<!--${el.data}-->`
       : isCommentOrTextNode(el) ?  el.textContent
         : el.outerHTML), ``);
-  const input2Collection = input =>
-    !input ? []
-      : IS(input, Proxy) ? [input.EL]
-        : IS(input, NodeList) ? [...input]
-          : isNode(input) ? [input]
-            : isArrayOfHtmlElements(input) ? input
-              : input.isJQx ? input.collection : undefined;
-  const setCollectionFromCssSelector = (input, root, self) => {
-    const selectorRoot = root !== document.body && (IS(input, String) && input.toLowerCase() !== "body") ? root : document;
-    let errorStr = undefined;
-
-    try { self.collection = [...selectorRoot.querySelectorAll(input)]; }
-    catch (err) { errorStr = `Invalid CSS querySelector. [${!IS(input, String) ? `Nothing valid given!` : input}]`; }
-
-    return errorStr ?? `CSS querySelector "${input}", output ${self.collection.length} element(s)`;
-  };
-  const addHandlerId = instance => {
-    const handleId = instance.data.get(`hid`) || `HID${randomString()}`;
-    instance.data.add({hid: handleId});
-    return `[data-hid="${handleId}"]`;
-  };
+}
 
+function input2Collection(input) {
+  return !input ? []
+    : IS(input, Proxy) ? [input.EL]
+      : IS(input, NodeList) ? [...input]
+        : isNode(input) ? [input]
+          : isArrayOfHtmlElements(input) ? input
+            : input.isJQx ? input.collection : undefined;
+}
+
+function setCollectionFromCssSelector(input, root, self) {
+  const selectorRoot = root !== document.body && (IS(input, String) && input.toLowerCase() !== "body") ? root : document;
+  let errorStr = undefined;
+
+  try { self.collection = [...selectorRoot.querySelectorAll(input)]; }
+  catch (err) { errorStr = `Invalid CSS querySelector. [${!IS(input, String) ? `Nothing valid given!` : input}]`; }
+  const collectionLen = self.collection.length;
+  return collectionLen < 1
+    ? `CSS querySelector "${input}", output: nothing`
+    : errorStr ?? `CSS querySelector "${input}", output ${collectionLen} element${collectionLen > 1 ? `s` : ``}`;
+}
+
+function  addHandlerId(instance) {
+  const handleId = instance.data.get(`hid`) || `HID${randomString()}`;
+  instance.data.add({hid: handleId});
+  return `[data-hid="${handleId}"]`;
+}
+
+function selectedExtensionHelpers() {
   return {
     isCommentOrTextNode, isNode, isComment, isText, isHtmlString, isArrayOfHtmlElements,
     isArrayOfHtmlStrings, ElemArray2HtmlString, input2Collection, setCollectionFromCssSelector,
     addHandlerId };
 }
 
-function ExamineElementFeatureFactory() {
-  const isVisible = function(el) {
-    if (!el) { return undefined; }
-    const elStyle = el.style;
-    const computedStyle = getComputedStyle(el);
-    const invisible = [elStyle.visibility, computedStyle.visibility].includes("hidden");
-    const noDisplay = [elStyle.display, computedStyle.display].includes("none");
-    const offscreen = el.offsetTop < 0 || (el.offsetLeft + el.offsetWidth) < 0
-      || el.offsetLeft > document.body.offsetWidth;
-    const noOpacity = +computedStyle.opacity === 0 || +(elStyle.opacity || 1) === 0;
-    return !(offscreen || noOpacity || noDisplay || invisible);
-  };
-  const notApplicable = `n/a`;
-  const isWritable = function(elem) {
-    return [...elem.parentNode.querySelectorAll(`:is(:read-write)`)]?.find(el => el === elem) ?? false;
-  };
+function isVisible(el) {
+  if (!el) { return undefined; }
+  const elStyle = el.style;
+  const computedStyle = getComputedStyle(el);
+  const invisible = [elStyle.visibility, computedStyle.visibility].includes("hidden");
+  const noDisplay = [elStyle.display, computedStyle.display].includes("none");
+  const offscreen = el.offsetTop < 0 || (el.offsetLeft + el.offsetWidth) < 0
+    || el.offsetLeft > document.body.offsetWidth;
+  const noOpacity = +computedStyle.opacity === 0 || +(elStyle.opacity || 1) === 0;
+  return !(offscreen || noOpacity || noDisplay || invisible);
+}
 
-  const isModal = function(elem) {
-    return [...elem.parentNode.querySelectorAll(`:is(:modal)`)]?.find(el => el === elem) ?? false;
-  };
+function isWritable(elem) {
+  return [...elem.parentNode.querySelectorAll(`:is(:read-write)`)]?.find(el => el === elem) ?? false;
+}
 
-  const noElements = { notInDOM: true, writable: notApplicable, modal: notApplicable, empty: true, open: notApplicable, visible: notApplicable, };
+function isModal(elem) {
+  return [...elem.parentNode.querySelectorAll(`:is(:modal)`)]?.find(el => el === elem) ?? false;
+}
+
+function ExamineElementFeatureFactory() {
+  const notApplicable = `n/a`;
+  const noElements = {
+    notInDOM: true, writable: notApplicable, modal: notApplicable, empty: true,
+    open: notApplicable, visible: notApplicable, };
 
   return self => {
     const firstElem = self.node;
@@ -228,10 +272,20 @@ function systemLogFactory() {
 }
 
 export {
+  addHandlerId,
   IS,
   maybe,
+  isCommentOrTextNode,
+  isHtmlString,
+  isArrayOfHtmlStrings,
+  isArrayOfHtmlElements,
+  ElemArray2HtmlString,
+  input2Collection,
+  setCollectionFromCssSelector,
+  isNode,
   randomString,
   isNonEmptyString,
+  insertPositions,
   toDashedNotation,
   toCamelcase,
   truncateHtmlStr,
@@ -244,6 +298,7 @@ export {
   styleFactory,
   tagFNFactory,
   resolveEventTypeParameter,
-  extensionHelpers,
+  selectedExtensionHelpers,
   systemLog,
+  datasetKeyProxy,
 };