jqx-es 1.2.0 → 1.2.2

package/index.js

@@ -17,9 +17,9 @@ import {
   addJQxStaticMethods,
   createElementFromHtmlString,
   insertPositions,
-  systemLog,
   IS,
 } from "./src/JQxExtensionHelpers.js";
+import { systemLog, } from "./src/Utilities.js";
 
 export default addJQxStaticMethods(JQxFactory());
 
@@ -34,7 +34,7 @@ function JQxFactory() {
     const isRawHtml = isHtmlString(input);
     const isRawHtmlArray = !isRawHtml && isArrayOfHtmlStrings(input);
     const shouldCreateElements = isRawHtmlArray || isRawHtml;
-    
+
     let instance = {
       collection: input2Collection(input) ?? [],
       isVirtual,
@@ -42,7 +42,7 @@ function JQxFactory() {
     };
 
     const isRawElemCollection = isArrayOfHtmlElements(instance.collection);
-    
+
     const logStr = `input => ${
       isRawHtmlArray
         ? `"${truncateHtmlStr(input.join(`, `), logLineLength)}"`
@@ -53,7 +53,7 @@ function JQxFactory() {
           : `"${truncateHtmlStr(input, logLineLength)}"`}`;
 
     if (instance.collection.length && isRawElemCollection) {
-      systemLog(logStr);
+      systemLog.log(logStr);
 
       if (!isVirtual) {
         instance.collection.forEach(el => {
@@ -74,13 +74,13 @@ function JQxFactory() {
         const errors = instance.collection.filter( el => el?.dataset?.jqxcreationerror );
         instance.collection = instance.collection.filter(el => !el?.dataset?.jqxcreationerror);
 
-        systemLog(`${logStr}`);
-        systemLog(`*Created ${instance.isVirtual ? `VIRTUAL ` : ``}[${
+        systemLog.log(`${logStr}`);
+        systemLog.log(`*Created ${instance.isVirtual ? `VIRTUAL ` : ``}[${
           truncateHtmlStr(ElemArray2HtmlString(instance.collection) ||
             "sanitized: no elements remaining", logLineLength)}]`);
 
         if (errors.length) {
-          console.error(`JQx: illegal html, not rendered: "${
+          systemLog.error(`JQx: illegal html, not rendered: "${
             errors.reduce( (acc, el) => acc.concat(`${el.textContent}\n`), ``).trim()}"` );
         }
 
@@ -93,7 +93,7 @@ function JQxFactory() {
     }
 
     const forLog = setCollectionFromCssSelector(input, root, instance);
-    systemLog(`input => ${forLog}`);
+    systemLog.log(`input => ${forLog}`);
     return proxify(instance);
   }
 }

package/package.json

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

package/src/DOMCleanup.js

@@ -1,21 +1,21 @@
-import { truncate2SingleStr, IS, debugLog } from "./JQxExtensionHelpers.js";
+import { truncate2SingleStr, IS/*, debugLog*/ } from "./JQxExtensionHelpers.js";
 import cleanupTagInfo from "./HTMLTags.js";
 import {ATTRS} from "./EmbedResources.js";
-import {escHtml} from "./Utilities.js";
+import {escHtml, systemLog} from "./Utilities.js";
 
 let logElementCreationErrors2Console = true;
 const attrRegExpStore = {
   data: /data-[\-\w.\p{L}]/ui, // data-* minimal 1 character after dash
   validURL: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
   whiteSpace: /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g,
-  notAllowedValues: /javascript|injected|noreferrer|alert|DataURL/gi
+  notAllowedValues: /^javascript|injected|noreferrer|alert|DataURL/gi
 };
 const 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`);
-    debugLog.log(`JQx HTML creation errors: ${debugLog.isConsole ? msgs : escHtml(msgs)}`);
+    systemLog.error(`JQx HTML creation errors: ${msgs}`);
   }
 };
 const elementCheck = function(child) {
@@ -51,7 +51,7 @@ const cleanupHtml = el2Clean => {
             if (evilValue || evilAttrib) {
               let val = truncate2SingleStr(attr.value || `none`, 60);
               val += val.length === 60 ? `...` : ``;
-              elCreationInfo.removed[`${attr.name}`] = `attribute/property (-value) not allowed, removed. Value: ${
+              elCreationInfo.removed[`${attr.name}`] = `attribute/property/value not allowed, removed. Value: ${
                 val}`;
               child.removeAttribute(attr.name);
             }

package/src/EmbedResources.js

@@ -1,9 +1,8 @@
 const svgImg = `url('data:image/svg+xml\\3butf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20128%20128%22%20style%3D%22enable-background%3Anew%200%200%20128%20128%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Crect%20x%3D%22-368%22%20y%3D%226%22%20style%3D%22display%3Anone%3Bfill%3A%23E0E0E0%3B%22%20width%3D%22866%22%20height%3D%221018%22%2F%3E%3Ccircle%20style%3D%22fill%3A%23FFFFFF%3B%22%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2248%22%2F%3E%3Ccircle%20style%3D%22fill%3A%238CCFB9%3B%22%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2239%22%2F%3E%3Ccircle%20style%3D%22fill%3Anone%3Bstroke%3A%23444B54%3Bstroke-width%3A6%3Bstroke-miterlimit%3A10%3B%22%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2248%22%2F%3E%3Cpolyline%20style%3D%22fill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A6%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3B%22%20points%3D%2242%2C69%2055.55%2C81%20%20%2086%2C46%20%22%2F%3E%3C%2Fsvg%3E')`;
-let logStyling = getLogStyling();
 let popupStyling = getPopupStyling();
 const ATTRS = getAttrs();
 const allTags = getPermissions();
-export {logStyling, popupStyling, ATTRS, allTags};
+export {popupStyling, ATTRS, allTags};
 
 function getAttrs() {
   return {
@@ -18,20 +17,6 @@ function getPermissions() {
   return {a:true,area:true,audio:false,br:true,base:true,body:true,button:true,canvas:true,comment:true,dl:true,data:true,datalist:true,div:true,em:true, embed:false,fieldset:true,font:true,footer:true,form:false,hr:true,head:true,header:true,output:true,iframe:false,frameset:false,img:true,input:true,li:true,label:true,legend:true,link:true,map:true,mark:true,menu:true,media:true,meta:true,nav:true,meter:true,ol:true,object:false,optgroup:true,option:true,p:true,param:true,picture:true,pre:true,progress:false,quote:true,script:false,select:true,source:true,span:true,style:true,caption:true,td:true,col:true,table:true,tr:true,template:false,textarea:true,time:true,title:true,track:true,details:true,ul:true,video:true,del:true,ins:true,slot:true,blockquote:true,svg:true,dialog:true,summary:true,main:true,address:true,colgroup:true,tbody:true,tfoot:true,thead:true,th:true,dd:true,dt:true,figcaption:true,figure:true,i:true,b:true,code:true,h1:true,h2:true,h3:true,h4:true,abbr:true,bdo:true,dfn:true,kbd:true,q:true,rb:true,rp:true,rt:true,ruby:true,s:true,strike:true,samp:true,small:true,strong:true,sup:true,sub:true,u:true,var:true,wbr:true,nobr:true,tt:true,noscript:true};
 }
 
-function getLogStyling() {
-  return [
-    "#logBox{min-width:0px;max-width:0px;min-height:0px;max-height:0px;width:0;height:0;z-index:-1;border:none;padding:0px;overflow:hidden;transition:all 0.3s ease;margin-top:-100px;}",
-    "#logBox.visible{background-color:rgb(255, 255, 224);z-index:1;position:static;border:1px dotted rgb(153, 153, 153);max-width:50vw;min-width:30vw;min-height:10vh;max-height:90vh;overflow:auto;width:50vw;height:20vh;margin:1rem 0px;padding:0px 8px 19px;resize:both;}",
-    "#logBox.visible .legend{position:absolute;}",
-    "#logBox .legend{text-align:center;margin-top:-1em;width:inherit;max-width:inherit;}",
-    "#logBox .legend div{text-align:center;display:inline-block;max-width:inherit;height:1.2rem;background-color:rgb(119, 119, 119);padding:2px 10px;color:rgb(255, 255, 255);box-shadow:rgb(119 119 119) 2px 1px 10px;border-radius:4px;}",
-    "#logBox .legend div:before{content:'JQx Logging (chronological)';}",
-    "#logBox .legend.reversed div:before{content:'JQx Logging (reversed)';}",
-    "#logBox #jqx_logger{marginTop:0.7rem;lineHeight:1.4em;font-family:consolas,monospace;whiteSpace:pre-wrap;maxWidth:inherit;padding-left:100px;}",
-    "#logBox #jqx_logger div.entry{text-indent:-100px;whiteSpace:normal;}",
-  ]
-}
-
 function getPopupStyling() {
   return [
     "::backdrop{background-color:grey;opacity:0.2;}",

package/src/HandlerFactory.js

@@ -17,16 +17,16 @@ function HandleFactory(jqx) {
         name = name || (!/handlers$/.test(callback.name) && callback.name) || undefined;
         capture = jqx.IS(capture, Boolean) ? capture : false;
         once = jqx.IS(once, Boolean) ? once : false;
-        canRemove = isNonEmptyString(name, 4) && jqx.IS(canRemove, Boolean) ? canRemove : false;
-        const { handler, signal, remove } = wrapHandlerFunction({selector, callback, canRemove, name, eventType});
+        canRemove = isNonEmptyString(name, 4) && jqx.IS(canRemove, Boolean) ? canRemove : once;
+        const { handler, signal, remove } = wrapHandlerFunction({selector, callback, canRemove, once, name, eventType});
         return addAndStoreListener({eventType, handler, capture, once, signal, remove, name});
     }
   };
 
   function wrapHandlerFunction(spec) {
-    const {selector, callback, canRemove, name, eventType} = spec;
-    const abortcontroller = canRemove && new AbortController();
-    const remove = removeHandlerFactory({abortcontroller, name, eventType});
+    const {selector, callback, canRemove, name, eventType, once} = spec;
+    const abortcontroller = (canRemove || once) && new AbortController();
+    const remove = removeHandlerFactory({once, abortcontroller, name, eventType});
     const listener = !selector
       ? { handler: evt => callback(evt, evt.target, remove), remove}
       : { handler: evt => {
@@ -34,17 +34,29 @@ function HandleFactory(jqx) {
             return target && callback(evt, jqx(target), remove);
           }, remove
         };
-    if (abortcontroller) { listener.signal = abortcontroller.signal; }
+
+    if (abortcontroller) {
+      listener.signal = abortcontroller.signal;
+      if (once) {
+          return {
+            handler: (evt, me) => {
+              listener.handler(evt, me);
+              remove();
+          }
+        }
+      }
+    }
+
     return listener;
   }
 
   function removeHandlerFactory(spec) {
-    const {abortcontroller, name, eventType} = spec;
+    const {once, abortcontroller, name, eventType} = spec;
     return !name
-      ? function() { console.error(`An anonymous listener can not be removed`); }
+      ? function() { jqx.logger.error(`An anonymous listener can not be removed`); }
       : !abortcontroller
         ? function(evt) {
-            console.error(`Listener for event type [${eventType}] with name [${
+            jqx.logger.error(`Listener for event type [${eventType}] with name [${
               name}] is not marked as removable`);
           }
         : function removeHandler() {
@@ -52,14 +64,13 @@ function HandleFactory(jqx) {
           const toRemove = [...handlerStore[eventType].entries()].find(([k, v]) => v.name === name);
           handlerStore[eventType].delete(toRemove[0]);
           setTimeout( () =>
-            console.warn(`Listener for event type [${eventType}] with name [${
-              name}] was removed`), 100 );
+            jqx.logger.log(`Listener for event type [${eventType}] with name [${
+              name}] was removed${once ? ` (once active, so handled once).` : ``}`), 100 );
           }
   }
 
   function addAndStoreListener(spec) {
     const {eventType, handler, capture, once, signal, remove, name} = spec;
-    if (once) { return addEventListener(eventType, handler, {once}); }
     if (!handlerStore[eventType]) { handlerStore[eventType] = new Map(); }
     const delegateExists = handlerStore[eventType].has(handler) ||
       [...handlerStore[eventType].values()].find(h => (h.name || ``) === name);

package/src/JQxExtensionHelpers.js

@@ -1,68 +1,33 @@
 import { createElementFromHtmlString, insertPositions, inject2DOMTree, cleanupHtml } from "./DOM.js";
-import logFactory from "./JQxLog.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, logTime, hex2RGBA, styleFactory, toCamelcase,
-  isNonEmptyString, resolveEventTypeParameter,
+  truncate2SingleStr, styleFactory, toCamelcase, systemLog, escHtml,
+  isNonEmptyString, resolveEventTypeParameter, extensionHelpers,
 } from "./Utilities.js";
-let static4Docs = {};
-let instanceGetters, instanceMethods, $, systemLogger, debugLogger;
 
+let instanceGetters, instanceMethods;
 const {
-  isCommentOrTextNode, isNode,
-  isHtmlString, isArrayOfHtmlElements, isArrayOfHtmlStrings, ElemArray2HtmlString,
-  input2Collection, setCollectionFromCssSelector, addHandlerId, cssRuleEdit,
-  addFn, elems4Docs } = smallHelpersFactory();
+  isCommentOrTextNode, isNode, isComment, isText, isHtmlString, isArrayOfHtmlElements,
+  isArrayOfHtmlStrings, ElemArray2HtmlString, input2Collection, setCollectionFromCssSelector,
+  addHandlerId, cssRuleEdit, addFn
+} = localHelpersFactory();
+
+// todo: clean this up
+export {
+  addHandlerId, isHtmlString, isNode, isArrayOfHtmlStrings, isArrayOfHtmlElements, isCommentOrTextNode,
+  inject2DOMTree, ElemArray2HtmlString, input2Collection, setCollectionFromCssSelector,
+  truncateHtmlStr, truncate2SingleStr, proxify, addJQxStaticMethods, createElementFromHtmlString,
+  insertPositions, IS, };
 
 /* region functions */
-function smallHelpersFactory() {
-  const cssRuleEdit = styleFactory( { createWithId: `JQxStylesheet` } );
+function localHelpersFactory() {
+  const cssRuleEdit = styleFactory({createWithId: `JQxStylesheet`});
   const addFn = (name, fn) => instanceMethods[name] = (self, ...params) => fn(self, ...params);
-  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) =>
-    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}"]`;
-  };
-  const elems4Docs = Object.entries(tagLib.tagsRaw)
-    .filter( ([,cando]) => cando)
-    .map( ([key,]) => key)
-    .sort( (a, b) => a.localeCompare(b));
-
-  return {
-    isCommentOrTextNode, isNode, isComment, isText, isHtmlString, isArrayOfHtmlElements,
-    isArrayOfHtmlStrings, ElemArray2HtmlString, input2Collection, setCollectionFromCssSelector,
-    addHandlerId, cssRuleEdit, addFn, elems4Docs };
+  return {...extensionHelpers(), ...{cssRuleEdit, addFn, }};
 }
 
 function proxify(instance) {
@@ -81,17 +46,19 @@ 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 wrapGetter(instanceGetters[key], instance)();
+    case (key in instanceMethods): return wrapExtension(instanceMethods[key], instance);
     default: return self[key];
   }
 }
 
 function addJQxStaticMethods(jqx) {
   const staticMethods = defaultStaticMethodsFactory(jqx);
+
   for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(staticMethods))) {
     Object.defineProperty(jqx, key, descriptor);
-    Object.defineProperty(static4Docs, key, descriptor); }
+  }
+
   return jqx;
 }
 
@@ -197,14 +164,14 @@ function staticTagsLambda(jqx) {
 }
 
 function delegateFactory(listen) {
-  return function(type, origin, ...eventHandlers) {
+  return function(type, selector, ...listeners) {
 
-    if (IS(origin, Function)) {
-      eventHandlers.push(origin);
-      origin = undefined;
+    if (IS(selector, Function)) {
+      listeners.push(selector);
+      selector = undefined;
     }
 
-    listen({type, selector: origin, handlers: eventHandlers});
+    listen({type, selector: selector, handlers: listeners});
   }
 }
 
@@ -254,30 +221,37 @@ function popupGetter(jqx) {
   return jqx.activePopup;
 }
 
-function staticMethodsFactory(jqx) {
-  const { debugLog, Log, systemLog } = logFactory(jqx);
-  const { factoryExtensions, instanceExtensions } = allMethodsFactory(jqx);
-  systemLogger = systemLog;
-  debugLogger = debugLog;
-  instanceGetters = factoryExtensions;
-  instanceMethods = instanceExtensions;
-  $ = jqx;
+function getSelectedStaticMethods(jqx) {
   const editCssRule = (ruleOrSelector, ruleObject) => cssRuleEdit(ruleOrSelector, ruleObject);
+  const createStyle = id => styleFactory({createWithId: id || `jqx${randomString()}`});
+  const editCssRules = (...rules) => { for (const rule of rules) { cssRuleEdit(rule); } };
   const allowProhibit = allowances(jqx);
   const handle = HandleFactory(jqx);
   const capturedHandling = delegateCaptureFactory(handle);
+  const log = (...line) => systemLog.on.log(...line).off;
+  return {editCssRule, createStyle, editCssRules, allowProhibit, handle, capturedHandling,log};
+}
+
+function staticMethodsFactory(jqx) {
+  const { factoryExtensions, instanceExtensions } = allMethodsFactory(jqx);
+  instanceGetters = factoryExtensions;
+  instanceMethods = instanceExtensions;
+  const { editCssRule, createStyle, editCssRules, allowProhibit, handle, capturedHandling, log } =
+    getSelectedStaticMethods(jqx);
 
   return {
-    log(...args) { Log(`fromStatic`, ...args); },
-    editCssRules(...rules) { for (const rule of rules) { cssRuleEdit(rule); } },
-    createStyle(id) { return styleFactory({createWithId: id || `jqx${randomString()}`}); },
-    editStylesheet(id) { return styleFactory({createWithId: id || `jqx${randomString()}`}); },
-    text(str, isComment = false) { return isComment ? jqx.comment(str) : document.createTextNode(str); },
-    node(selector, root = document) { return root.querySelector(selector, root); },
-    nodes(selector, root = document) {return [...root.querySelectorAll(selector, root)]; },
-    get editCssRule() { return editCssRule; },
+    log,
+    editCssRules,
+    createStyle,
+    editStylesheet: createStyle,
+    editCssRule,
+    escHtml,
+    logger: systemLog,
+    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 debugLog() { return debugLog },
     get virtual() { return virtualFactory(jqx); },
     get allowTag() { return allowProhibit.allow; },
     get prohibitTag() { return allowProhibit.prohibit; },
@@ -295,31 +269,3 @@ function staticMethodsFactory(jqx) {
   };
 }
 /* endregion functions */
-export {
-  hex2RGBA,
-  addHandlerId,
-  isHtmlString,
-  isNode,
-  logTime,
-  toDashedNotation,
-  randomString,
-  isArrayOfHtmlStrings,
-  isArrayOfHtmlElements,
-  isCommentOrTextNode,
-  inject2DOMTree,
-  ElemArray2HtmlString,
-  input2Collection,
-  setCollectionFromCssSelector,
-  truncateHtmlStr,
-  truncate2SingleStr,
-  proxify,
-  addJQxStaticMethods,
-  createElementFromHtmlString,
-  insertPositions,
-  systemLogger as systemLog,
-  debugLogger as debugLog,
-  IS,
-  static4Docs,
-  elems4Docs,
-  $ as jqx,
-};

package/src/JQxMethods.js

@@ -3,12 +3,9 @@ import {
   IS,
   addHandlerId,
   isNode,
-  randomString,
   inject2DOMTree,
   isCommentOrTextNode,
   truncateHtmlStr,
-  systemLog,
-  debugLog,
 } from "./JQxExtensionHelpers.js";
 import {ATTRS} from "./EmbedResources.js";
 import {
@@ -16,7 +13,10 @@ import {
   isNonEmptyString,
   toDashedNotation,
   toCamelcase,
-  escHtml, } from "./Utilities.js";
+  randomString,
+  escHtml,
+  systemLog,
+} from "./Utilities.js";
 const loop = (instance, callback) => {
   const cleanCollection = instance.collection.filter(el => !isCommentOrTextNode(el));
   for (let i = 0; i < cleanCollection.length; i += 1) {
@@ -486,7 +486,7 @@ function instanceExtensionsFactory(jqx) {
       return instance;
     },
     remove: (instance, selector) => {
-      systemLog(`remove ${truncateHtmlStr(instance.HTML.get(1), 40)}${selector ? ` /w selector ${selector}` : ``}`);
+      systemLog.log(`remove ${truncateHtmlStr(instance.HTML.get(1), 40)}${selector ? ` /w selector ${selector}` : ``}`);
       const remover = el => el.remove();
       const removeFromCollection = () =>
         instance.collection = instance.collection.filter(el => document.documentElement.contains(el));