@nativerent/js-utils 1.1.0 → 1.2.0

package/jest.config.mjs

@@ -1,5 +1,9 @@
 export default {
   preset: "ts-jest",
   testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    url: "https://example.com/current%20path",
+  },
   testMatch: ["**/tests/**"],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
 };

package/jest.setup.ts

@@ -0,0 +1,4 @@
+import { TextEncoder, TextDecoder } from "util";
+
+(global as any).TextEncoder = TextEncoder;
+(global as any).TextDecoder = TextDecoder;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativerent/js-utils",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/index.ts

@@ -1,4 +1,4 @@
-import type { FlattenableObject, Primitive, SimpleObject } from "./types";
+import type { Primitive, SimpleObject } from "./types";
 
 export function debounce(fn: Function, delay: number): () => void {
   let timeout: ReturnType<typeof setTimeout>;
@@ -42,7 +42,7 @@ export function isString(value: any): value is string {
  * Check if the given argument is a string which is not empty
  */
 export function isNotEmptyString(value: any) {
-  return isString(value) && value.length;
+  return isString(value) && value.length > 0;
 }
 
 export function isHTMLElement(value: any): value is HTMLElement {
@@ -88,16 +88,18 @@ export function arrayIntersect(
   array1: Array<Primitive | null | undefined>,
   array2: Array<Primitive | null | undefined>,
 ) {
-  return array1.filter((value) => array2.includes(value));
+  const set = new Set(array2);
+  return array1.filter((value) => set.has(value));
 }
 
 export function deepCloneObject<Type>(object: Type): Type {
   return JSON.parse(JSON.stringify(object));
 }
 
+// todo: non-px values
 export function getNumericStyleProp(prop: string, el: Element) {
   const styles: { [key: string]: any } = window.getComputedStyle(el);
-  return !isNullOrUndef(styles[prop]) ? parseInt(styles[prop].slice(0, -2)) : 0;
+  return !isNullOrUndef(styles[prop]) ? parseFloat(styles[prop] || 0) : 0;
 }
 
 export function objectHasProp(
@@ -150,58 +152,39 @@ export function objectToQueryString(object: {
     .join("&");
 }
 
-export function countObjectInnerLength(object: {
-  [key: string | number]: any[];
-}) {
-  const obj = Object.values(object);
-  const len = obj.length;
-
-  if (len === 0) {
-    return 0;
-  } else if (len === 1) {
-    return obj[0].length;
-  } else {
-    return obj.reduce((acc: any, cur) => {
-      if (Array.isArray(acc)) {
-        acc = acc.length;
-      }
-      if (cur) {
-        acc += cur.length;
-      }
-      return acc;
-    });
-  }
+export function countObjectInnerLength(
+  object: Record<string | number, any[] | null | undefined>,
+) {
+  return Object.values(object).reduce(
+    (sum, arr) => sum + (arr?.length ?? 0),
+    0,
+  );
 }
 
 /**
  * Check if the element is in viewport
  */
-export function isElementVisible(element: HTMLElement, minVisiblePercent = 50) {
-  const elementCoords = element.getBoundingClientRect();
-  const elementHeight = elementCoords.height;
-
-  if (!elementHeight) {
-    return false;
-  }
+export function isElementVisible(
+  element: HTMLElement,
+  minVisiblePercent = 50,
+): boolean {
+  const { top, bottom, height } = element.getBoundingClientRect();
+  if (!height) return false;
 
-  const elementTop = elementCoords.top;
-  const elementBottom = elementCoords.bottom;
-  const viewPortHeight = window.innerHeight;
+  const viewportTop = 0;
+  const viewportBottom = window.innerHeight;
 
-  const elementVisibleHeight =
-    elementTop > 0
-      ? // the element is in or below viewport
-        viewPortHeight - elementTop
-      : // the element is still in or above viewport
-        elementBottom;
+  const visibleTop = Math.max(top, viewportTop);
+  const visibleBottom = Math.min(bottom, viewportBottom);
+  const visibleHeight = Math.max(0, visibleBottom - visibleTop);
 
-  return (elementVisibleHeight / elementHeight) * 100 >= minVisiblePercent;
+  return (visibleHeight / height) * 100 >= minVisiblePercent;
 }
 
 export function decodeSafeURL(url: string): string {
   try {
     return decodeURI(url);
-  } catch (e) {
+  } catch {
     return url;
   }
 }
@@ -240,12 +223,14 @@ export function injectStyleLink(filename: string): void {
   document.head.appendChild(link);
 }
 
-export function toBinaryStr(str: string) {
-  const encoder = new TextEncoder();
-  // 1: split the UTF-16 string into an array of bytes
-  const charCodes = encoder.encode(str);
-  // 2: concatenate byte data to create a binary string
-  return String.fromCharCode(...charCodes);
+export function toBinaryStr(str: string): string {
+  const CHUNK = 0x8000; // String.fromCharCode(...charCodes) can overflow the call stack with large strings
+  const bytes = new TextEncoder().encode(str);
+  let result = "";
+  for (let i = 0; i < bytes.length; i += CHUNK) {
+    result += String.fromCharCode(...bytes.subarray(i, i + CHUNK));
+  }
+  return result;
 }
 
 /**
@@ -269,18 +254,11 @@ export function stringToHtmlElements(html: string): NodeListOf<ChildNode> {
  */
 export function createHtmlElement(
   type: string,
-  attributes: { [key: string]: string } = {},
+  attributes: Record<string, string> = {},
 ): HTMLElement {
-  const attrs = getObjectKeys(attributes);
-  const element = document.createElement(type);
-
-  if (attrs.length) {
-    attrs.forEach((name) => {
-      element.setAttribute(name, attributes[name]);
-    });
-  }
-
-  return element;
+  const el = document.createElement(type);
+  for (const [k, v] of Object.entries(attributes)) el.setAttribute(k, v);
+  return el as HTMLElement;
 }
 
 /**
@@ -288,67 +266,69 @@ export function createHtmlElement(
  */
 export function insertHtmlElements(
   nodes: NodeListOf<Node>,
-  appendTo?: Element | ShadowRoot,
+  appendTo: Element | ShadowRoot = document.body,
 ) {
-  appendTo = appendTo || document.body;
-
-  const fragment = new DocumentFragment();
+  const fragment = document.createDocumentFragment();
 
   for (let i = 0; i < nodes.length; i++) {
-    // skip non tags and non text, 3 for text nodes
-    if (!isHTMLElement(nodes[i]) && nodes[i].nodeType !== 3) {
+    const node = nodes[i];
+
+    // Allow elements + text nodes only
+    if (!isHTMLElement(node) && node.nodeType !== Node.TEXT_NODE) {
       continue;
     }
 
-    const node = nodes[i] as HTMLElement;
-    let newNode;
+    let newNode: Node;
 
-    switch (node.nodeName.toLowerCase()) {
-      case "script":
-        const src = node.getAttribute("src");
+    // Text node
+    if (node.nodeType === Node.TEXT_NODE) {
+      newNode = document.createTextNode(node.textContent ?? "");
+      fragment.appendChild(newNode);
+      continue;
+    }
 
-        if (!isNullOrUndef(src) && src.length > 0) {
-          newNode = createScriptElement(
-            src,
-            false,
-            flatHtmlAttributes(node.attributes),
-          );
-        } else {
-          newNode = createScriptElement(
-            node.innerHTML,
-            true,
-            flatHtmlAttributes(node.attributes),
-          );
-        }
+    // Element node from here on
+    const el = node as Element;
+    const tag = el.tagName.toLowerCase();
+
+    switch (tag) {
+      case "script": {
+        const src = el.getAttribute("src");
+        newNode =
+          !isNullOrUndef(src) && src.length > 0
+            ? createScriptElement(src, false, flatHtmlAttributes(el.attributes))
+            : createScriptElement(
+                el.textContent ?? "",
+                true,
+                flatHtmlAttributes(el.attributes),
+              );
         break;
+      }
 
       case "style":
-        newNode = createStyleElement(node.textContent);
+        newNode = createStyleElement(el.textContent);
         break;
 
       case "svg":
         newNode = createSvgElement(
-          node.innerHTML,
-          flatHtmlAttributes(node.attributes),
+          el.innerHTML,
+          flatHtmlAttributes(el.attributes),
         );
         break;
 
-      case "#text":
-        newNode = document.createTextNode(node.textContent ?? "");
-        break;
-
-      default:
-        newNode = createHtmlElement(
-          node.tagName,
-          flatHtmlAttributes(node.attributes),
+      default: {
+        const created = createHtmlElement(
+          el.tagName,
+          flatHtmlAttributes(el.attributes),
         );
-
-        // recursive
-        if (node.childNodes.length) {
-          insertHtmlElements(node.childNodes, newNode);
+        // Recurse for children (handles mixed element/text)
+        if (el.childNodes.length) {
+          insertHtmlElements(el.childNodes, created);
         } else {
-          newNode.innerHTML = node.innerHTML;
+          created.textContent = el.textContent ?? "";
         }
+        newNode = created;
+      }
     }
 
     fragment.appendChild(newNode);
@@ -360,20 +340,21 @@ export function insertHtmlElements(
 /**
  * Make a simple object which contains only attribute name and value
  */
-export function flatHtmlAttributes(attributes?: NamedNodeMap) {
-  let flatAttributes: { [key: string]: string } = {};
+export function flatHtmlAttributes(
+  attributes?: NamedNodeMap | null,
+): Record<string, string> {
+  if (!attributes) return {};
 
-  if (!isNullOrUndef(attributes)) {
-    for (let i = 0; i < attributes.length; i++) {
-      let attr = attributes[i];
+  const result: Record<string, string> = {};
 
-      if (!isUndef(attr)) {
-        flatAttributes[attr.name] = attr.value;
-      }
+  for (let i = 0; i < attributes.length; i++) {
+    const attr = attributes[i];
+    if (attr) {
+      result[attr.name] = attr.value;
     }
   }
 
-  return flatAttributes;
+  return result;
 }
 
 /**
@@ -381,33 +362,30 @@ export function flatHtmlAttributes(attributes?: NamedNodeMap) {
  */
 export function createScriptElement(
   js: string,
-  inline: boolean = false,
-  attributes: { [key: string]: string } = {},
-) {
-  const attrs = isObject(attributes) ? getObjectKeys(attributes) : [];
-  const element = createHtmlElement("script") as HTMLScriptElement;
+  inline = false,
+  attributes: Record<string, string> = {},
+): HTMLScriptElement {
+  const el = document.createElement("script");
 
-  if (attrs.length) {
-    attrs.forEach((name) => {
-      element.setAttribute(name, attributes[name]);
-    });
+  for (const [k, v] of Object.entries(attributes)) {
+    el.setAttribute(k, v);
   }
 
   if (inline) {
-    element.appendChild(document.createTextNode(js));
+    el.text = js;
   } else {
-    element.async = true;
-    element.src = js;
+    el.async = true;
+    el.src = js;
   }
 
-  return element;
+  return el;
 }
 
 /**
  * Create a <style> element
  */
-export function createStyleElement(css: string | null) {
-  const element = createHtmlElement("style");
+export function createStyleElement(css: string | null): HTMLStyleElement {
+  const element = createHtmlElement("style") as HTMLStyleElement;
 
   if (css) {
     element.appendChild(document.createTextNode(css));
@@ -419,7 +397,7 @@ export function createStyleElement(css: string | null) {
 /**
  * Create a <link> element
  */
-export function createLinkElement(href: string) {
+export function createLinkElement(href: string): HTMLLinkElement {
   const element = createHtmlElement("link") as HTMLLinkElement;
 
   element.rel = "stylesheet";
@@ -433,18 +411,18 @@ export function createLinkElement(href: string) {
  */
 export function createSvgElement(
   content: string,
-  attributes: { [key: string]: string },
-) {
-  const attrs = getObjectKeys(attributes);
-  const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-
-  if (attrs.length) {
-    attrs.forEach((name) => {
-      element.setAttribute(name, attributes[name]);
-    });
+  attributes: Record<string, string> = {},
+): SVGSVGElement {
+  const element = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "svg",
+  ) as SVGSVGElement;
+
+  for (const [name, value] of Object.entries(attributes)) {
+    element.setAttribute(name, value);
   }
 
-  element.innerHTML = content;
+  element.innerHTML = content.trim();
 
   return element;
 }
@@ -455,9 +433,12 @@ export function createSvgElement(
 export function createPixelElement(src: string) {
   const image = document.createElement("img");
 
+  image.alt = "";
   image.src = src;
   image.width = 1;
   image.height = 1;
+  image.loading = "eager";
+  image.setAttribute("aria-hidden", "true");
   image.style.position = "absolute";
   image.style.left = "-99999px";
 
@@ -490,29 +471,23 @@ export function insertCss(css: string, className?: string, external = false) {
  * Get screen sizes
  */
 export function getScreenSize(): { width: number; height: number } {
-  let width, height;
-
-  if (window.screen) {
-    width = screen.width;
-    height = screen.height;
-  } else {
-    width = window.innerWidth;
-    height = window.innerHeight;
-  }
+  const width = window.screen?.width ?? window.innerWidth;
+  const height = window.screen?.height ?? window.innerHeight;
 
-  return {
-    width: width,
-    height: height,
-  };
+  return { width, height };
 }
 
 /**
  * Get a random integer between min and max
  */
-export function getRandomInt(min = 0, max = 4294967295) {
+export function getRandomInt(min = 0, max = 4294967295): number {
   min = Math.ceil(min);
   max = Math.floor(max);
 
+  if (max <= min) {
+    return min;
+  }
+
   return Math.floor(Math.random() * (max - min)) + min;
 }
 
@@ -535,7 +510,10 @@ export function hashCode(str: string) {
 /**
  * Executes a callback as soon as DOM is interactive
  */
-export function onDOMReady(callback: Function, ...args: any[]) {
+export function onDOMReady<T extends unknown[]>(
+  callback: (...args: T) => void,
+  ...args: T
+): void {
   if (
     document.readyState === "interactive" ||
     document.readyState === "complete"
@@ -693,54 +671,55 @@ export function fireInputEvent(
 export function fireEvent(
   eventName: string,
   element: string | Element | null,
-  delay: number = 0,
+  delay = 0,
 ): void {
   setTimeout(() => {
-    if (isString(element)) {
-      element = document.querySelector(element);
-    }
-
-    if (!isNullOrUndef(element)) {
-      element.dispatchEvent(
-        new Event(eventName, {
-          bubbles: true,
-        }),
-      );
+    const target = isString(element)
+      ? document.querySelector(element)
+      : element;
+    if (target) {
+      target.dispatchEvent(new Event(eventName, { bubbles: true }));
     }
   }, delay);
 }
 
 export function hasObjectChanged(
-  object: { [key: string]: any },
-  values: any[],
+  oldObj: Record<string, any>,
+  values: [string, any][],
+  checkNewKeys = false,
 ): boolean {
-  let hasChanged = false;
+  const newMap = new Map(values);
 
-  for (const key in object) {
-    let oldVal = object[key];
-    let [, newVal] = values.find(([newKey]) => key === newKey);
+  // check keys from old
+  for (const key of Object.keys(oldObj)) {
+    let oldVal = oldObj[key];
+    let newVal = newMap.get(key);
 
     if (isObject(oldVal)) {
-      if (!isObject(newVal)) {
-        hasChanged = true;
-      } else {
-        hasChanged = hasObjectChanged(oldVal, Object.entries(newVal));
-      }
-    } else if (Array.isArray(newVal) || Array.isArray(oldVal)) {
-      newVal = Array.isArray(newVal) ? newVal : [];
-      oldVal = Array.isArray(oldVal) ? oldVal : [];
+      if (!isObject(newVal)) return true;
+      if (hasObjectChanged(oldVal, Object.entries(newVal), checkNewKeys))
+        return true;
+      continue;
+    }
 
-      hasChanged = arrayDiff(newVal, oldVal).length > 0;
-    } else {
-      hasChanged = areDiff(newVal, oldVal);
+    if (Array.isArray(oldVal) || Array.isArray(newVal)) {
+      const oldArr = Array.isArray(oldVal) ? oldVal : [];
+      const newArr = Array.isArray(newVal) ? newVal : [];
+      if (arrayDiff(newArr, oldArr).length > 0) return true;
+      continue;
     }
 
-    if (hasChanged) {
-      break;
+    if (areDiff(newVal, oldVal)) return true;
+  }
+
+  // optional: check keys that exist only in new
+  if (checkNewKeys) {
+    for (const key of newMap.keys()) {
+      if (!(key in oldObj)) return true;
     }
   }
 
-  return hasChanged;
+  return false;
 }
 
 export function roundBigNum(number: number): number {
@@ -759,15 +738,15 @@ export function roundBigNum(number: number): number {
   return roundTo ? Math.round(number / roundTo) * roundTo : number;
 }
 
-export function extractNumbers(value: any): string {
-  if (!isStr(value) && !isNum(value)) {
+export function extractNumbers(value: unknown): string {
+  if (!isString(value) && !isNum(value)) {
     return "";
   }
   return value.toString().replace(/[^0-9]/g, "");
 }
 
-export function removeSpaces(value: any): string {
-  if (!isStr(value) && !isNum(value)) {
+export function removeSpaces(value: unknown): string {
+  if (!isString(value) && !isNum(value)) {
     return "";
   }
   return value.toString().replace(/\s/g, "");
@@ -802,28 +781,38 @@ export function areDiff(
   return false;
 }
 
-export function flattenObject(obj: FlattenableObject, prefix = "") {
-  return Object.keys(obj).reduce((acc, k) => {
-    const pre = prefix.length ? prefix + "." : "";
+export function flattenObject(
+  obj: Record<string, any>,
+  prefix = "",
+): Record<string, any> {
+  const pre = prefix ? `${prefix}.` : "";
+
+  return Object.keys(obj).reduce<Record<string, any>>((acc, k) => {
+    const val = obj[k];
+    const key = `${pre}${k}`;
+
     if (
-      (isObject(obj[k]) || Array.isArray(obj[k])) &&
+      (isObject(val) || Array.isArray(val)) &&
       getObjectKeys(obj[k]).length > 0
     ) {
-      Object.assign(acc, flattenObject(obj[k], pre + k));
+      Object.assign(acc, flattenObject(val, key));
     } else {
-      acc[pre + k] = obj[k];
+      acc[key] = val;
     }
     return acc;
-  }, {} as FlattenableObject);
+  }, {});
 }
 
-export function flattenObjectAsArray(obj: FlattenableObject) {
-  const result: FlattenableObject = {};
+export function flattenObjectAsArray(
+  obj: Record<string, any>,
+): Record<string, any> {
   const flat = flattenObject(obj);
-  Object.keys(flat).forEach((key) => {
-    const newKey = key.replaceAll(/\.([^.]+)/g, "[$1]");
-    result[newKey] = flat[key];
-  });
+  const result: Record<string, any> = {};
+
+  for (const key of Object.keys(flat)) {
+    const newKey = key.replace(/\.([^.]+)/g, "[$1]");
+    result[newKey] = (flat as any)[key];
+  }
 
   return result;
 }

package/src/types.d.ts

@@ -1,5 +1,3 @@
-export type FlattenableObject = { [key: string]: any };
-
 export type Primitive = boolean | number | string;
 
 export type SimpleObject = {