Merge pull request #15871 from IgniteUI/19.2.x

perf(utils): Improved internal utils performance (#15816)

Author: ChronosSF

projects/igniteui-angular/src/lib/core/utils.ts

@@ -4,7 +4,7 @@ import { mergeWith } from 'lodash-es';
 import { NEVER, Observable } from 'rxjs';
 import { setImmediate } from './setImmediate';
 import { isDevMode } from '@angular/core';
-import { IgxTheme } from '../services/theme/theme.token';
+import type { IgxTheme } from '../services/theme/theme.token';
 
 /** @hidden @internal */
 export const ELEMENTS_TOKEN = /*@__PURE__*/new InjectionToken<boolean>('elements environment');
@@ -31,17 +31,9 @@ export const getResizeObserver = () => globalThis.window?.ResizeObserver;
 /**
  * @hidden
  */
-export const cloneArray = (array: any[], deep?: boolean) => {
-    const arr = [];
-    if (!array) {
-        return arr;
-    }
-    let i = array.length;
-    while (i--) {
-        arr[i] = deep ? cloneValue(array[i]) : array[i];
-    }
-    return arr;
-};
+export function cloneArray<T>(array: T[], deep = false): T[] {
+    return deep ? (array ?? []).map(cloneValue) : (array ?? []).slice();
+}
 
 /**
  * Doesn't clone leaf items
@@ -108,7 +100,7 @@ export const cloneValue = (value: any): any => {
         return new Date(value.getTime());
     }
     if (Array.isArray(value)) {
-        return [...value];
+        return value.slice();
     }
 
     if (value instanceof Map || value instanceof Set) {
@@ -298,7 +290,7 @@ export class PlatformUtil {
      */
     public getNodeSizeViaRange(range: Range, node: HTMLElement, sizeHoldingNode?: HTMLElement) {
         let overflow = null;
-        let nodeStyles;
+        let nodeStyles: string[];
 
         if (!this.isFirefox) {
             overflow = node.style.overflow;
@@ -455,17 +447,17 @@ export const resizeObservable = (target: HTMLElement): Observable<ResizeObserver
     // check whether we are on server env or client env
     if (resizeObserver) {
         return new Observable((observer) => {
-                const instance = new resizeObserver((entries: ResizeObserverEntry[]) => {
-                    observer.next(entries);
-                });
-                instance.observe(target);
-                const unsubscribe = () => instance.disconnect();
-                return unsubscribe;
+            const instance = new resizeObserver((entries: ResizeObserverEntry[]) => {
+                observer.next(entries);
+            });
+            instance.observe(target);
+            const unsubscribe = () => instance.disconnect();
+            return unsubscribe;
         });
-    } else {
-        // if on a server env return a empty observable that does not complete immediately
-        return NEVER;
     }
+    // if on a server env return a empty observable that does not complete immediately
+    return NEVER;
+
 }
 
 /**
@@ -476,7 +468,7 @@ export const resizeObservable = (target: HTMLElement): Observable<ResizeObserver
  */
 export const compareMaps = (map1: Map<any, any>, map2: Map<any, any>): boolean => {
     if (!map2) {
-        return !map1 ? true : false;
+        return !map1;
     }
     if (map1.size !== map2.size) {
         return false;
@@ -496,26 +488,38 @@ export const compareMaps = (map1: Map<any, any>, map2: Map<any, any>): boolean =
     return match;
 };
 
+function _isObject(entity: unknown): entity is object {
+    return entity != null && typeof entity === 'object';
+}
+
+export function columnFieldPath(path?: string): string[] {
+    return path?.split('.') ?? [];
+}
+
 /**
- *
  * Given a property access path in the format `x.y.z` resolves and returns
  * the value of the `z` property in the passed object.
  *
  * @hidden
  * @internal
  */
-export const resolveNestedPath = (obj: any, path: string) => {
-    const parts = path?.split('.') ?? [];
-    let current = obj[parts.shift()];
+export function resolveNestedPath<T extends object, U>(obj: unknown, pathParts: string[], defaultValue?: U): T | U | undefined {
+    if (!_isObject(obj) || pathParts.length < 1) {
+        return defaultValue;
+    }
 
-    parts.forEach(prop => {
-        if (current) {
-            current = current[prop];
+    let current = obj;
+
+    for (const key of pathParts) {
+        if (_isObject(current) && key in (current as T)) {
+            current = current[key];
+        } else {
+            return defaultValue;
         }
-    });
+    }
 
-    return current;
-};
+    return current as T;
+}
 
 /**
  *
@@ -628,12 +632,12 @@ export function modulo(n: number, d: number) {
  * ```
  */
 export function* intoChunks<T>(arr: T[], size: number) {
-  if (size < 1) {
-    throw new Error('size must be an integer >= 1');
-  }
-  for (let i = 0; i < arr.length; i += size) {
-    yield arr.slice(i, i + size);
-  }
+    if (size < 1) {
+        throw new Error('size must be an integer >= 1');
+    }
+    for (let i = 0; i < arr.length; i += size) {
+        yield arr.slice(i, i + size);
+    }
 }
 
 /**
@@ -646,7 +650,6 @@ export function getComponentCssSizeVar(size: string) {
             return 'var(--ig-size, var(--ig-size-small))';
         case "2":
             return 'var(--ig-size, var(--ig-size-medium))';
-        case "3":
         default:
             return 'var(--ig-size, var(--ig-size-large))';
     }
@@ -662,9 +665,9 @@ export function normalizeURI(path: string) {
 
 export function getComponentTheme(el: Element) {
     return globalThis.window
-    ?.getComputedStyle(el)
-    .getPropertyValue('--theme')
-    .trim() as IgxTheme;
+        ?.getComputedStyle(el)
+        .getPropertyValue('--theme')
+        .trim() as IgxTheme;
 }
 
 /**

projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts

@@ -1,13 +1,13 @@
-import { FilteringLogic, IFilteringExpression } from './filtering-expression.interface';
-import { FilteringExpressionsTree, IFilteringExpressionsTree } from './filtering-expressions-tree';
-import { resolveNestedPath, parseDate, formatDate, formatCurrency } from '../core/utils';
-import { ColumnType, EntityType, GridType } from '../grids/common/grid.interface';
+import { FilteringLogic, type IFilteringExpression } from './filtering-expression.interface';
+import { FilteringExpressionsTree, type IFilteringExpressionsTree } from './filtering-expressions-tree';
+import { resolveNestedPath, parseDate, formatDate, formatCurrency, columnFieldPath } from '../core/utils';
+import type { ColumnType, EntityType, GridType } from '../grids/common/grid.interface';
 import { GridColumnDataType } from './data-util';
 import { SortingDirection } from './sorting-strategy';
 import { formatNumber, formatPercent, getLocaleCurrencyCode } from '@angular/common';
-import { IFilteringState } from './filtering-state.interface';
+import type { IFilteringState } from './filtering-state.interface';
 import { isTree } from './expressions-tree-util';
-import { IgxHierarchicalGridComponent } from '../grids/hierarchical-grid/hierarchical-grid.component';
+import type { IgxHierarchicalGridComponent } from '../grids/hierarchical-grid/hierarchical-grid.component';
 
 const DateType = 'date';
 const DateTimeType = 'dateTime';
@@ -26,7 +26,7 @@ export interface IFilteringStrategy {
     filter(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree,
         grid?: GridType): any[];
     /* csSuppress */
-    getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree) : Promise<IgxFilterItem[]>;
+    getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]>;
 }
 
 /* csSuppress */
@@ -37,16 +37,14 @@ export interface IgxFilterItem {
 }
 
 /* csSuppress */
-export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
+export abstract class BaseFilteringStrategy implements IFilteringStrategy {
     // protected
     public findMatchByExpression(rec: any, expr: IFilteringExpression, isDate?: boolean, isTime?: boolean, grid?: GridType): boolean {
         if (expr.searchTree) {
             const records = rec[expr.searchTree.entity];
             const shouldMatchRecords = expr.conditionName === 'inQuery';
             if (!records) { // child grid is not yet created
                 return true;
-            } else if (records.length === 0) { // child grid is empty
-                return false;
             }
 
             for (let index = 0; index < records.length; index++) {
@@ -74,7 +72,7 @@ export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
                 const operator = expressionsTree.operator as FilteringLogic;
                 let matchOperand;
 
-                if (expressionsTree.filteringOperands && expressionsTree.filteringOperands.length) {
+                if (expressionsTree.filteringOperands?.length) {
                     for (const operand of expressionsTree.filteringOperands) {
                         matchOperand = this.matchRecord(rec, operand, grid, entity);
 
@@ -132,19 +130,18 @@ export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
     }
 
     public getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]> {
+        const applyFormatter = column.formatter && this.shouldFormatFilterValues(column);
 
         let data = column.grid.gridAPI.filterDataByExpressions(tree);
         data = column.grid.gridAPI.sortDataByExpressions(data,
             [{ fieldName: column.field, dir: SortingDirection.Asc, ignoreCase: column.sortingIgnoreCase }]);
 
-        const columnField = column.field;
-        let filterItems: IgxFilterItem[] = data.map(record => {
-            let value = resolveNestedPath(record, columnField);
-            const applyFormatter = column.formatter && this.shouldFormatFilterValues(column);
 
-            value = applyFormatter ?
-                column.formatter(value, record) :
-                value;
+        const pathParts = columnFieldPath(column.field)
+        let filterItems: IgxFilterItem[] = data.map(record => {
+            const value = applyFormatter ?
+                column.formatter(resolveNestedPath(record, pathParts), record) :
+                resolveNestedPath(record, pathParts);
 
             return {
                 value,
@@ -239,36 +236,25 @@ export class NoopFilteringStrategy extends BaseFilteringStrategy {
 export class FilteringStrategy extends BaseFilteringStrategy {
     private static _instance: FilteringStrategy = null;
 
-    constructor() {
-        super();
-    }
 
     public static instance() {
         return this._instance || (this._instance = new this());
     }
 
     public filter<T>(data: T[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree: IFilteringExpressionsTree,
         grid: GridType): T[] {
-        let i;
-        let rec;
-        const len = data.length;
-        const res: T[] = [];
 
-        if ((FilteringExpressionsTree.empty(expressionsTree) && FilteringExpressionsTree.empty(advancedExpressionsTree)) || !len) {
+
+        if ((FilteringExpressionsTree.empty(expressionsTree) && FilteringExpressionsTree.empty(advancedExpressionsTree))) {
             return data;
         }
-        for (i = 0; i < len; i++) {
-            rec = data[i];
-            if (this.matchRecord(rec, expressionsTree, grid) && this.matchRecord(rec, advancedExpressionsTree, grid)) {
-                res.push(rec);
-            }
-        }
-        return res;
+
+        return data.filter(record => this.matchRecord(record, expressionsTree, grid) && this.matchRecord(record, advancedExpressionsTree, grid));
     }
 
     protected getFieldValue(rec: any, fieldName: string, isDate = false, isTime = false, grid?: GridType): any {
         const column = grid?.getColumnByName(fieldName);
-        let value = resolveNestedPath(rec, fieldName);
+        let value = resolveNestedPath(rec, columnFieldPath(fieldName));
 
         value = column?.formatter && this.shouldFormatFilterValues(column) ?
             column.formatter(value, rec) :

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform, Inject } from '@angular/core';
 import { DataUtil } from '../../data-operations/data-util';
-import { cloneArray, resolveNestedPath } from '../../core/utils';
+import { cloneArray, columnFieldPath, resolveNestedPath } from '../../core/utils';
 import { GridType, IGX_GRID_BASE, RowType } from './grid.interface';
 import { IgxAddRow } from './crud.service';
 import { IgxSummaryOperand, IgxSummaryResult } from '../summaries/grid-summary';
@@ -26,11 +26,12 @@ export class IgxGridCellStyleClassesPipe implements PipeTransform {
         }
 
         const result = [];
+        const pathParts = columnFieldPath(field);
 
         for (const cssClass of Object.keys(cssClasses)) {
             const callbackOrValue = cssClasses[cssClass];
             const apply = typeof callbackOrValue === 'function' ?
-                callbackOrValue(data, field, resolveNestedPath(data, field), index) : callbackOrValue;
+                callbackOrValue(data, field, resolveNestedPath(data, pathParts), index) : callbackOrValue;
             if (apply) {
                 result.push(cssClass);
             }
@@ -57,9 +58,11 @@ export class IgxGridCellStylesPipe implements PipeTransform {
             return css;
         }
 
+        const pathParts = columnFieldPath(field);
+
         for (const prop of Object.keys(styles)) {
             const res = styles[prop];
-            css[prop] = typeof res === 'function' ? res(data, field, resolveNestedPath(data, field), index) : res;
+            css[prop] = typeof res === 'function' ? res(data, field, resolveNestedPath(data, pathParts), index) : res;
         }
 
         return css;
@@ -70,7 +73,7 @@ export class IgxGridCellStylesPipe implements PipeTransform {
  * @hidden
  * @internal
  */
- @Pipe({
+@Pipe({
     name: 'igxCellImageAlt',
     standalone: true
 })
@@ -116,7 +119,7 @@ export class IgxGridRowClassesPipe implements PipeTransform {
         _rowData: any,
         _: number
     ) {
-        const result = new Set(['igx-grid__tr', index % 2 ? 'igx-grid__tr--even': 'igx-grid__tr--odd']);
+        const result = new Set(['igx-grid__tr', index % 2 ? 'igx-grid__tr--even' : 'igx-grid__tr--odd']);
         const mapping = [
             [selected, 'igx-grid__tr--selected'],
             [editMode, 'igx-grid__tr--edit'],
@@ -329,7 +332,7 @@ export class IgxGridRowPinningPipe implements PipeTransform {
 export class IgxGridDataMapperPipe implements PipeTransform {
 
     public transform(data: any[], field: string, _: number, val: any, isNestedPath: boolean) {
-        return isNestedPath ? resolveNestedPath(data, field) : val;
+        return isNestedPath ? resolveNestedPath(data, columnFieldPath(field)) : val;
     }
 }
 
@@ -354,13 +357,13 @@ export class IgxGridTransactionStatePipe implements PipeTransform {
         if (rowEditable) {
             const rowCurrentState = transactions.getAggregatedValue(row_id, false);
             if (rowCurrentState) {
-                const value = resolveNestedPath(rowCurrentState, field);
+                const value = resolveNestedPath(rowCurrentState, columnFieldPath(field));
                 return value !== undefined && value !== null;
             }
         } else {
             const transaction = transactions.getState(row_id);
-            const value = resolveNestedPath(transaction?.value ?? {}, field);
-            return transaction && transaction.value && (value || value === 0 || value === false);
+            const value = resolveNestedPath(transaction?.value ?? {}, columnFieldPath(field));
+            return transaction?.value && (value || value === 0 || value === false);
         }
     }
 }
@@ -371,7 +374,7 @@ export class IgxGridTransactionStatePipe implements PipeTransform {
 })
 export class IgxColumnFormatterPipe implements PipeTransform {
 
-    public transform(value: any, formatter: (v: any, data: any, columnData? :any) => any, rowData: any, columnData? : any) {
+    public transform(value: any, formatter: (v: any, data: any, columnData?: any) => any, rowData: any, columnData?: any) {
         return formatter(value, rowData, columnData);
     }
 }