fix: partial revert of PR #1516 custom deepCopy() for array in SF/LWC (#2056)

Author: ghiscoding

frameworks/slickgrid-react/src/components/slickgrid-react.tsx

@@ -50,7 +50,7 @@ import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
-import { extend } from '@slickgrid-universal/utils';
+import { deepCopy, extend } from '@slickgrid-universal/utils';
 import { dequal } from 'dequal/lite';
 import React from 'react';
 import type { Subscription } from 'rxjs';
@@ -189,7 +189,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     const prevDatasetLn = this._currentDatasetLength;
     const isDatasetEqual = dequal(newDataset, this.dataset || []);
     const isDeepCopyDataOnPageLoadEnabled = !!this._options?.enableDeepCopyDatasetOnPageLoad;
-    let data = isDeepCopyDataOnPageLoadEnabled ? extend(true, [], newDataset) : newDataset;
+    let data = isDeepCopyDataOnPageLoadEnabled ? deepCopy(newDataset) : newDataset;
 
     // when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array
     if (

frameworks/slickgrid-vue/src/components/SlickgridVue.vue

@@ -47,7 +47,7 @@ import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-compone
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
-import { extend } from '@slickgrid-universal/utils';
+import { deepCopy, extend } from '@slickgrid-universal/utils';
 import { dequal } from 'dequal/lite';
 import {
   type ComponentPublicInstance,
@@ -214,7 +214,7 @@ watch(
     const prevDatasetLn = currentDatasetLength;
     const isDatasetEqual = dequal(newDataset, dataModel.value || []);
     const isDeepCopyDataOnPageLoadEnabled = !!_gridOptions.value?.enableDeepCopyDatasetOnPageLoad;
-    let data = isDeepCopyDataOnPageLoadEnabled ? extend(true, [], newDataset) : newDataset;
+    let data = isDeepCopyDataOnPageLoadEnabled ? deepCopy(newDataset) : newDataset;
 
     // when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array
     if (

packages/common/src/services/filter.service.ts

@@ -1,5 +1,5 @@
 import { type BasePubSubService } from '@slickgrid-universal/event-pub-sub';
-import { extend, queueMicrotaskOrSetTimeout, stripTags } from '@slickgrid-universal/utils';
+import { deepCopy, extend, queueMicrotaskOrSetTimeout, stripTags } from '@slickgrid-universal/utils';
 import { dequal } from 'dequal/lite';
 
 import { Constants } from '../constants.js';
@@ -423,7 +423,7 @@ export class FilterService {
     inputSearchTerms: SearchTerm[] | undefined,
     columnFilter: Omit<SearchColumnFilter, 'searchTerms'>
   ): Omit<FilterConditionOption, 'cellValue'> {
-    const searchValues: SearchTerm[] = extend(true, [], inputSearchTerms) || [];
+    const searchValues: SearchTerm[] = deepCopy(inputSearchTerms) || [];
     let fieldSearchValue = Array.isArray(searchValues) && searchValues.length === 1 ? searchValues[0] : '';
     const columnDef = columnFilter.columnDef;
     const fieldType = columnDef.filter?.type ?? columnDef.type ?? FieldType.string;
@@ -611,7 +611,7 @@ export class FilterService {
       if (typeof columnFilters === 'object') {
         Object.keys(columnFilters).forEach((columnId) => {
           const columnFilter = columnFilters[columnId] as SearchColumnFilter;
-          const searchValues: SearchTerm[] = columnFilter?.searchTerms ? extend(true, [], columnFilter.searchTerms) : [];
+          const searchValues: SearchTerm[] = columnFilter?.searchTerms ? deepCopy(columnFilter.searchTerms) : [];
           const inputSearchConditions = this.parseFormInputFilterConditions(searchValues, columnFilter);
 
           const columnDef = columnFilter.columnDef;

packages/composite-editor-component/src/slick-composite-editor.component.ts

@@ -1,5 +1,5 @@
 import { BindingEventService } from '@slickgrid-universal/binding';
-import { deepMerge, emptyObject, setDeepValue, classNameToList, getHtmlStringOutput, extend } from '@slickgrid-universal/utils';
+import { classNameToList, deepCopy, deepMerge, emptyObject, getHtmlStringOutput, setDeepValue } from '@slickgrid-universal/utils';
 import type {
   Column,
   CompositeEditorLabel,
@@ -347,7 +347,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
       } else {
         const isWithMassChange = modalType === 'mass-update' || modalType === 'mass-selection';
         const dataContext = !isWithMassChange ? this.grid.getDataItem(activeRow) : {};
-        this._originalDataContext = extend(true, {}, dataContext);
+        this._originalDataContext = deepCopy(dataContext);
         this._columns = this.grid.getColumns();
         const selectedRowsIndexes = this.hasRowSelectionEnabled() ? this.grid.getSelectedRows() : [];
         const fullDatasetLength = this.dataView?.getItemCount() ?? 0;
@@ -645,7 +645,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
   /** Apply Mass Update Changes (form values) to the entire dataset */
   protected applySaveMassUpdateChanges(formValues: any, _selection: DataSelection, applyToDataview = true): any[] {
     // not applying to dataView means that we're doing a preview of dataset and we should use a deep copy of it instead of applying changes directly to it
-    const data = applyToDataview ? this.dataView.getItems() : extend(true, [], this.dataView.getItems());
+    const data = applyToDataview ? this.dataView.getItems() : deepCopy(this.dataView.getItems());
 
     // from the "lastCompositeEditor" object that we kept as reference, it contains all the changes inside the "formValues" property
     // we can loop through these changes and apply them on the selected row indexes
@@ -674,7 +674,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
     const selectedTmpItems = selectedItemIds.map((itemId) => this.dataView.getItemById(itemId));
 
     // not applying to dataView means that we're doing a preview of dataset and we should use a deep copy of it instead of applying changes directly to it
-    const selectedItems = applyToDataview ? selectedTmpItems : extend(true, [], selectedTmpItems);
+    const selectedItems = applyToDataview ? selectedTmpItems : deepCopy(selectedTmpItems);
 
     // from the "lastCompositeEditor" object that we kept as reference, it contains all the changes inside the "formValues" property
     // we can loop through these changes and apply them on the selected row indexes

packages/utils/src/utils.ts

@@ -1,5 +1,4 @@
 import type { AnyFunction } from './models/types.js';
-import { extend } from './nodeExtend.js';
 
 /**
  * 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
@@ -44,20 +43,50 @@ export function arrayRemoveItemByIndex<T>(array: T[], index: number): T[] {
 }
 
 /**
- * @use `extend()` when possible.
- * Create an immutable clone of an array or object (native type will be returned "as is").
- * This function will deep copy whatever is provided as the first argument, but nonetheless it is now an alias to `extend()` (node-extend) function.
- * We'll keep the method to avoid breaking users of `deepCopy()`, however we suggest to directly use `extend(true, {}, obj)` whenever possible
+ * Create an immutable clone of an array or object
+ * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
+ * @param  {Array|Object} objectOrArray - the array or object to copy
+ * @return {Array|Object} - the clone of the array or object
  */
 export function deepCopy(objectOrArray: any | any[]): any | any[] {
-  // we previously had a full implementation but we can now use node-extend to do the job
-  // except that we need couple of small priors checks (native will be returned as is)
-  if (!Array.isArray(objectOrArray) && !isObject(objectOrArray)) {
-    return objectOrArray;
+  /**
+   * Create an immutable copy of an object
+   * @return {Object}
+   */
+  const cloneObj = () => {
+    // Create new object
+    const clone = {};
+
+    // Loop through each item in the original
+    // Recursively copy it's value and add to the clone
+    Object.keys(objectOrArray).forEach((key) => {
+      if (Object.prototype.hasOwnProperty.call(objectOrArray, key)) {
+        (clone as any)[key] = deepCopy(objectOrArray[key]);
+      }
+    });
+    return clone;
+  };
+
+  /**
+   * Create an immutable copy of an array
+   * @return {Array}
+   */
+  const cloneArr = () => objectOrArray.map((item: any) => deepCopy(item));
+
+  // -- init --//
+  // Get object type
+  const type = Object.prototype.toString.call(objectOrArray).slice(8, -1).toLowerCase();
+
+  // If an object
+  if (type === 'object') {
+    return cloneObj();
+  }
+  // If an array
+  if (type === 'array') {
+    return cloneArr();
   }
-  // Array or Object need 2nd arg to be either [] or {} for a deep copy to assign to when using node-extend (same as jQuery.extend())
-  const assignment = Array.isArray(objectOrArray) ? [] : {};
-  return extend(true, assignment, objectOrArray);
+  // Otherwise, return it as-is
+  return objectOrArray;
 }
 
 /**

packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts

@@ -53,7 +53,7 @@ import {
   SlickGrid,
   unsubscribeAll,
 } from '@slickgrid-universal/common';
-import { extend, queueMicrotaskOrSetTimeout } from '@slickgrid-universal/utils';
+import { deepCopy, extend, queueMicrotaskOrSetTimeout } from '@slickgrid-universal/utils';
 import { EventNamingStyle, EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
@@ -152,7 +152,7 @@ export class SlickVanillaGridBundle<TData = any> {
     const prevDatasetLn = this._currentDatasetLength;
     const isDatasetEqual = dequal(newDataset, this.dataset || []);
     const isDeepCopyDataOnPageLoadEnabled = !!this._gridOptions?.enableDeepCopyDatasetOnPageLoad;
-    let data = isDeepCopyDataOnPageLoadEnabled ? extend(true, [], newDataset) : newDataset;
+    let data = isDeepCopyDataOnPageLoadEnabled ? deepCopy(newDataset) : newDataset;
 
     // when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array
     if (
@@ -398,7 +398,7 @@ export class SlickVanillaGridBundle<TData = any> {
 
     if (hierarchicalDataset) {
       this.sharedService.hierarchicalDataset =
-        (isDeepCopyDataOnPageLoadEnabled ? extend(true, [], hierarchicalDataset) : hierarchicalDataset) || [];
+        (isDeepCopyDataOnPageLoadEnabled ? deepCopy(hierarchicalDataset) : hierarchicalDataset) || [];
     }
     const eventHandler = new SlickEventHandler();