@slickgrid-universal/utils 4.1.0 → 4.3.0

package/src/domUtils.ts

@@ -1,4 +1,4 @@
-import type { HtmlElementPosition, InferDOMType } from './types/index';
+import type { HtmlElementPosition, InferDOMType } from './models/index';
 
 /** calculate available space for each side of the DOM element */
 export function calculateAvailableSpace(element: HTMLElement): { top: number; bottom: number; left: number; right: number; } {
@@ -63,21 +63,32 @@ export function createDomElement<T extends keyof HTMLElementTagNameMap, K extend
   return elm;
 }
 
+/**
+ * Accepts string containing the class or space-separated list of classes, and
+ * returns list of individual classes.
+ * Method properly takes into account extra whitespaces in the `className`
+ * e.g.: " class1    class2   " => will result in `['class1', 'class2']`.
+ * @param {String} className - space separated list of class names
+ */
+export function classNameToList(className = ''): string[] {
+  return className.split(' ').filter(cls => cls); // filter will remove whitespace entries
+}
+
 /**
  * Loop through all properties of an object and nullify any properties that are instanceof HTMLElement,
  * if we detect an array then use recursion to go inside it and apply same logic
  * @param obj - object containing 1 or more properties with DOM Elements
  */
 export function destroyAllElementProps(obj: any) {
-  if (obj) {
-    for (const key of Object.keys(obj)) {
+  if (typeof obj === 'object') {
+    Object.keys(obj).forEach(key => {
       if (Array.isArray(obj[key])) {
         destroyAllElementProps(obj[key]);
       }
       if (obj[key] instanceof HTMLElement) {
         obj[key] = null;
       }
-    }
+    });
   }
 }
 
@@ -93,14 +104,29 @@ export function emptyElement<T extends Element = Element>(element?: T | null): T
 }
 
 /**
- * From a DocumentFragment, get the innerHTML or outerHTML of all child elements.
+ * @deprecated @see `getHtmlStringOutput()`
+ * This function is now deprecated and is an alias to the new `getHtmlStringOutput()`, so please use this new function instead which works with various type of inputs.
+ */
+export function getHTMLFromFragment(input: DocumentFragment | HTMLElement | string | number, type: 'innerHTML' | 'outerHTML' = 'innerHTML'): string {
+  return getHtmlStringOutput(input, type);
+}
+
+/**
+ * From any input provided, return the HTML string (when a string is provided, it will be returned "as is" but when it's a number it will be converted to string)
+ * When detecting HTMLElement/DocumentFragment, we can also specify which HTML type to retrieve innerHTML or outerHTML.
  * We can get the HTML by looping through all fragment `childNodes`
+ * @param {DocumentFragment | HTMLElement | string | number} input
+ * @param {'innerHTML' | 'outerHTML'} [type] - when the input is a DocumentFragment or HTMLElement, which type of HTML do you want to return? 'innerHTML' or 'outerHTML'
+ * @returns {String}
  */
-export function getHTMLFromFragment(input: DocumentFragment, type: 'innerHTML' | 'outerHTML' = 'innerHTML'): string {
+export function getHtmlStringOutput(input: DocumentFragment | HTMLElement | string | number, type: 'innerHTML' | 'outerHTML' = 'innerHTML'): string {
   if (input instanceof DocumentFragment) {
+    // a DocumentFragment doesn't have innerHTML/outerHTML, but we can loop through all children and concatenate them all to an HTML string
     return [].map.call(input.childNodes, (x: HTMLElement) => x[type]).join('') || input.textContent || '';
+  } else if (input instanceof HTMLElement) {
+    return input[type];
   }
-  return input;
+  return String(input ?? ''); // reaching this line means it's already a string (or number) so just return it as string
 }
 
 /** Get offset of HTML element relative to a parent element */

package/src/index.ts

@@ -1,5 +1,5 @@
 export * from './domUtils';
 export * from './nodeExtend';
 export * from './stripTagsUtil';
-export * from './types';
+export * from './models';
 export * from './utils';

package/src/models/index.ts

@@ -0,0 +1,2 @@
+export * from './interfaces';
+export * from './types';

package/src/{types/infer.type.ts → models/types.ts}

@@ -4,3 +4,5 @@ export type InferDOMType<T> =
   T extends CSSStyleDeclaration ? Partial<CSSStyleDeclaration> :
   T extends infer R ? R : any;
 /* eslint-enable @typescript-eslint/indent */
+
+export type AnyFunction = (...args: any[]) => any;

package/src/nodeExtend.ts

@@ -58,7 +58,7 @@ const setProperty = function setProperty(target: any, options: any) {
 };
 
 // Return undefined instead of __proto__ if '__proto__' is not an own property
-const getProperty = function getProperty(obj: any, name: any) {
+const getProperty = function getProperty(obj: any, name: string) {
   if (name === '__proto__') {
     if (!hasOwn.call(obj, name)) {
       return void 0;

package/src/stripTagsUtil.ts

@@ -1,12 +1,13 @@
 /**
- * This stripTags function is a lib that already existed
- * but was not TypeScript and ESM friendly.
- * So I ported the code into the project and removed any old code like IE11 that we don't need for our project.
- * I also accept more input types without throwing, the code below accepts `string | number | boolean | HTMLElement` while original code only accepted string.
+ * This stripTags function is a lib that already existed on NPM
+ * but was not written as TypeScript and was not ESM friendly.
+ * So I ported the code into the project and removed any legacy browser code that we don't need for our project since we dropped IE browsers support.
+ * The function also accept more input types without throwing like the original one does,
+ * the code below accepts `string | number | boolean | HTMLElement` while original code only accepted string.
  *
  * The previous lib can be found here at this Github link:
  *     https://github.com/ericnorris/striptags/
- * With an MIT licence that and can be found at
+ * With an MIT licence that and can be found at this link:
  *     https://github.com/ericnorris/striptags/blob/main/LICENSE
  */
 

package/src/utils.ts

@@ -1,3 +1,5 @@
+import { AnyFunction } from './models/types';
+
 /**
  * Add an item to an array only when the item does not exists, when the item is an object we will be using their "id" to compare
  * @param inputArray
@@ -57,11 +59,11 @@ export function deepCopy(objectOrArray: any | any[]): any | any[] {
 
     // Loop through each item in the original
     // Recursively copy it's value and add to the clone
-    for (const key in objectOrArray) {
+    Object.keys(objectOrArray).forEach(key => {
       if (Object.prototype.hasOwnProperty.call(objectOrArray, key)) {
         (clone as any)[key] = deepCopy(objectOrArray[key]);
       }
-    }
+    });
     return clone;
   };
 
@@ -104,7 +106,7 @@ export function deepMerge(target: any, ...sources: any[]): any {
   target = (!isObject(target) && isObject(source)) ? {} : target;
 
   if (isObject(target) && isObject(source)) {
-    for (const prop in source) {
+    Object.keys(source).forEach(prop => {
       if (source.hasOwnProperty(prop)) {
         if (prop in target) {
           // handling merging of two properties with equal names
@@ -128,53 +130,22 @@ export function deepMerge(target: any, ...sources: any[]): any {
           target[prop] = source[prop];
         }
       }
-    }
+    });
   }
   return deepMerge(target, ...sources);
 }
 
-/**
- * This method is similar to `Object.assign` with the exception that it will also extend the object properties when filled.
- * There's also a distinction with extend vs merge, we are only extending when the property is not filled (if it is filled then it remains untouched and will not be merged)
- * It also applies the change directly on the target object which mutates the original object.
- * For example using these 2 objects: obj1 = { a: 1, b: { c: 2, d: 3 }} and obj2 = { b: { d: 2, e: 3}}:
- *   - Object.assign(obj1, obj2) => { a: 1, b: { e: 4 }}
- *   - objectAssignAndExtend(obj1, obj2) => { a: 1, b: { c: 2, d: 3, e: 4 }
- * @param {Object} target - the target object — what to apply the sources properties and mutate into
- * @param {Object} sources - the source object(s) — objects containing the properties you want to apply.
- * @returns {Object} The target object.
- */
-export function objectAssignAndExtend(target: any, ...sources: any): any {
-  if (!sources.length || sources[0] === undefined) {
-    return target;
-  }
-  const source = sources.shift();
-
-  // when target is not an object but source is an object, then we'll assign as object
-  target = (!isObject(target) && isObject(source)) ? {} : target;
-
-  if (isObject(target) && isObject(source)) {
-    for (const key of Object.keys(source)) {
-      if (typeof source[key] === 'object' && source[key] !== null) {
-        objectAssignAndExtend(target[key], source[key]);
-      }
-      if ((target[key] === null || target[key] === undefined) && source[key] !== null && source[key] !== undefined) {
-        target[key] = source[key];
-      }
-    }
-  }
-  return objectAssignAndExtend(target, ...sources);
-}
-
 /**
  * Empty an object properties by looping through them all and deleting them
  * @param obj - input object
  */
 export function emptyObject(obj: any) {
-  for (const key in obj) {
-    if (obj.hasOwnProperty(key)) {
-      delete obj[key];
-    }
+  if (isObject(obj)) {
+    Object.keys(obj).forEach(key => {
+      if (obj.hasOwnProperty(key)) {
+        delete obj[key];
+      }
+    });
   }
   obj = null;
   obj = {};
@@ -182,6 +153,50 @@ export function emptyObject(obj: any) {
   return obj;
 }
 
+/**
+ * Get the function details (param & body) of a function.
+ * It supports regular function and also ES6 arrow functions
+ * @param {Function} fn - function to analyze
+ * @param {Boolean} [addReturn] - when using ES6 function as single liner, we could add the missing `return ...`
+ * @returns
+ */
+export function getFunctionDetails(fn: AnyFunction, addReturn = true) {
+  let isAsyncFn = false;
+
+  const getFunctionBody = (func: AnyFunction) => {
+    const fnStr = func.toString();
+    isAsyncFn = fnStr.includes('async ');
+
+    // when fn is one liner arrow fn returning an object in brackets e.g. `() => ({ hello: 'world' })`
+    if ((fnStr.replaceAll(' ', '').includes('=>({'))) {
+      const matches = fnStr.match(/(({.*}))/g) || [];
+      return matches.length >= 1 ? `return ${matches[0]!.trimStart()}` : fnStr;
+    }
+    const isOneLinerArrowFn = (!fnStr.includes('{') && fnStr.includes('=>'));
+    const body = fnStr.substring(
+      (fnStr.indexOf('{') + 1) || (fnStr.indexOf('=>') + 2),
+      fnStr.includes('}') ? fnStr.lastIndexOf('}') : fnStr.length
+    );
+    if (addReturn && isOneLinerArrowFn && !body.startsWith('return')) {
+      return 'return ' + body.trimStart(); // add the `return ...` to the body for ES6 arrow fn
+    }
+    return body;
+  };
+
+  const getFunctionParams = (func: AnyFunction): string[] => {
+    const STRIP_COMMENTS = /(\/\/.*$)|(\/\*[\s\S]*?\*\/)|(\s*=[^,\)]*(('(?:\\'|[^'\r\n])*')|("(?:\\"|[^"\r\n])*"))|(\s*=[^,\)]*))/mg;
+    const ARG_NAMES = /([^\s,]+)/g;
+    const fnStr = func.toString().replace(STRIP_COMMENTS, '');
+    return fnStr.slice(fnStr.indexOf('(') + 1, fnStr.indexOf(')')).match(ARG_NAMES) ?? [];
+  };
+
+  return {
+    params: getFunctionParams(fn),
+    body: getFunctionBody(fn),
+    isAsync: isAsyncFn,
+  };
+}
+
 /**
  * Check if an object is empty
  * @param obj - input object
@@ -198,6 +213,10 @@ export function isDefined<T>(value: T | undefined | null): value is T {
   return <T>value !== undefined && <T>value !== null && <T>value !== '';
 }
 
+export function isDefinedNumber<T>(value: T | undefined | null): value is T {
+  return <T>value !== null && !isNaN(value as any) && <T>value !== '';
+}
+
 /**
  * Simple object check.
  * @param item

package/dist/cjs/types/htmlElementPosition.interface.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"htmlElementPosition.interface.js","sourceRoot":"","sources":["../../../src/types/htmlElementPosition.interface.ts"],"names":[],"mappings":""}

package/dist/cjs/types/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kEAAgD;AAChD,+CAA6B"}

package/dist/cjs/types/infer.type.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-enable @typescript-eslint/indent */
-//# sourceMappingURL=infer.type.js.map

package/dist/cjs/types/infer.type.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"infer.type.js","sourceRoot":"","sources":["../../../src/types/infer.type.ts"],"names":[],"mappings":";;AAKA,6CAA6C"}

package/dist/esm/types/htmlElementPosition.interface.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=htmlElementPosition.interface.js.map

package/dist/esm/types/htmlElementPosition.interface.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"htmlElementPosition.interface.js","sourceRoot":"","sources":["../../../src/types/htmlElementPosition.interface.ts"],"names":[],"mappings":""}

package/dist/esm/types/index.js

@@ -1,3 +0,0 @@
-export * from './htmlElementPosition.interface';
-export * from './infer.type';
-//# sourceMappingURL=index.js.map

package/dist/esm/types/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,cAAc,CAAC"}

package/dist/esm/types/infer.type.js

@@ -1,3 +0,0 @@
-export {};
-/* eslint-enable @typescript-eslint/indent */
-//# sourceMappingURL=infer.type.js.map

package/dist/esm/types/infer.type.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"infer.type.js","sourceRoot":"","sources":["../../../src/types/infer.type.ts"],"names":[],"mappings":";AAKA,6CAA6C"}

package/dist/types/types/htmlElementPosition.interface.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"htmlElementPosition.interface.d.ts","sourceRoot":"","sources":["../../../src/types/htmlElementPosition.interface.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/types/types/index.d.ts

@@ -1,3 +0,0 @@
-export * from './htmlElementPosition.interface';
-export * from './infer.type';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,cAAc,CAAC"}

package/dist/types/types/infer.type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"infer.type.d.ts","sourceRoot":"","sources":["../../../src/types/infer.type.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,CAAC,CAAC,IACxB,CAAC,SAAS,mBAAmB,GAAG,OAAO,CAAC,mBAAmB,CAAC,GAC5D,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC"}

package/src/types/index.ts

@@ -1,2 +0,0 @@
-export * from './htmlElementPosition.interface';
-export * from './infer.type';