using mutative

app/client/package.json

@@ -161,6 +161,7 @@
     "mixpanel-browser": "^2.55.1",
     "moment": "2.29.4",
     "moment-timezone": "^0.5.35",
+    "mutative": "^1.1.0",
     "nanoid": "^2.0.4",
     "node-forge": "^1.3.0",
     "object-hash": "^3.0.0",

app/client/src/WidgetProvider/factory/index.tsx

@@ -35,7 +35,7 @@ import {
 import type { RegisteredWidgetFeatures } from "../../utils/WidgetFeatures";
 import type { SetterConfig } from "entities/AppTheming";
 import { freeze, memoize } from "./decorators";
-import produce from "immer";
+import { create } from "mutative";
 import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 import type {
   CopiedWidgetData,
@@ -418,7 +418,7 @@ class WidgetFactory {
 
             if (dynamicProperties && dynamicProperties.length) {
               addPropertyConfigIds(dynamicProperties, false);
-              section = produce(section, (draft) => {
+              section = create(section, (draft) => {
                 draft.children = [...dynamicProperties, ...section.children];
               });
             }

app/client/src/ce/pages/Editor/Explorer/hooks.tsx

@@ -6,7 +6,7 @@ import type { Datasource } from "entities/Datasource";
 import { isStoredDatasource } from "entities/Action";
 import type { WidgetProps } from "widgets/BaseWidget";
 import log from "loglevel";
-import produce from "immer";
+import { create } from "mutative";
 import type { CanvasStructure } from "reducers/uiReducers/pageCanvasStructureReducer";
 import { getActions, getDatasources } from "ee/selectors/entitiesSelector";
 import type { ActionData } from "ee/reducers/entityReducers/actionsReducer";
@@ -184,7 +184,7 @@ export const useActions = (searchKeyword?: string) => {
   return useMemo(() => {
     if (searchKeyword) {
       const start = performance.now();
-      const filteredActions = produce(actions, (draft) => {
+      const filteredActions = create(actions, (draft) => {
         for (const [key, value] of Object.entries(draft)) {
           if (pageIds.includes(key)) {
             draft[key] = value;
@@ -225,7 +225,7 @@ export const useWidgets = (searchKeyword?: string) => {
   return useMemo(() => {
     if (searchKeyword && pageCanvasStructures) {
       const start = performance.now();
-      const filteredDSLs = produce(pageCanvasStructures, (draft) => {
+      const filteredDSLs = create(pageCanvasStructures, (draft) => {
         for (const [key, value] of Object.entries(draft)) {
           if (pageIds.includes(key)) {
             draft[key] = value;
@@ -256,7 +256,7 @@ export const usePageIds = (searchKeyword?: string) => {
 
   return useMemo(() => {
     if (searchKeyword) {
-      const filteredPages = produce(pages, (draft) => {
+      const filteredPages = create(pages, (draft) => {
         draft.forEach((page, index) => {
           const searchMatches =
             page.pageName.toLowerCase().indexOf(searchKeyword.toLowerCase()) >

app/client/src/ce/reducers/entityReducers/jsActionsReducer.tsx

@@ -6,7 +6,7 @@ import {
   ReduxActionErrorTypes,
 } from "ee/constants/ReduxActionConstants";
 import { set, keyBy, findIndex, unset } from "lodash";
-import produce from "immer";
+import { create } from "mutative";
 import { klona } from "klona";
 
 export const initialState: JSCollectionDataState = [];
@@ -400,7 +400,7 @@ export const handlers = {
       }>
     >,
   ) => {
-    return produce(state, (draft) => {
+    return create(state, (draft) => {
       const CollectionUpdateSearch = keyBy(action.payload, "collectionId");
       const actionUpdateSearch = keyBy(action.payload, "id");
 

app/client/src/ce/reducers/uiReducers/applicationsReducer.tsx

@@ -22,7 +22,7 @@ import {
   defaultNavigationSetting,
   defaultThemeSetting,
 } from "constants/AppConstants";
-import produce from "immer";
+import { create } from "mutative";
 import { isEmpty } from "lodash";
 import type { ApplicationPayload } from "entities/Application";
 import { gitConnectSuccess, type GitConnectSuccessPayload } from "git";
@@ -530,7 +530,7 @@ export const handlers = {
     state: ApplicationsReduxState,
     action: ReduxAction<NavigationSetting["logoAssetId"]>,
   ) => {
-    return produce(state, (draftState: ApplicationsReduxState) => {
+    return create(state, (draftState: ApplicationsReduxState) => {
       draftState.isUploadingNavigationLogo = false;
 
       if (

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import produce from "immer";
+import { create } from "mutative";
 import { noop, set } from "lodash";
 
 import { CommonControls } from "./CommonControls";
@@ -179,7 +179,7 @@ function WidgetQueryGeneratorForm(props: Props) {
     setPristine(false);
 
     setConfig(
-      produce(config, (draftConfig) => {
+      create(config, (draftConfig) => {
         if (
           property === "datasource" ||
           (typeof property === "object" &&

app/client/src/components/propertyControls/ButtonTabControl.tsx

@@ -3,7 +3,7 @@ import type { ControlData, ControlProps } from "./BaseControl";
 import BaseControl from "./BaseControl";
 import type { ToggleGroupOption } from "@appsmith/ads";
 import { ToggleButtonGroup } from "@appsmith/ads";
-import produce from "immer";
+import { create } from "mutative";
 import type { DSEventDetail } from "utils/AppsmithUtils";
 import {
   DSEventTypes,
@@ -62,7 +62,7 @@ class ButtonTabControl extends BaseControl<ButtonTabControlProps> {
         isUpdatedViaKeyboard,
       );
     } else {
-      const updatedValues: string[] = produce(values, (draft: string[]) => {
+      const updatedValues: string[] = create(values, (draft: string[]) => {
         draft.push(value);
       });
 

app/client/src/index.tsx

@@ -23,15 +23,12 @@ import "./assets/styles/index.css";
 import "./polyfills";
 import GlobalStyles from "globalStyles";
 // enable autofreeze only in development
-import { setAutoFreeze } from "immer";
+
 import AppErrorBoundary from "./AppErrorBoundry";
 import log from "loglevel";
 import { FaroErrorBoundary } from "@grafana/faro-react";
 import { isTracingEnabled } from "instrumentation/utils";
 
-const shouldAutoFreeze = process.env.NODE_ENV === "development";
-
-setAutoFreeze(shouldAutoFreeze);
 runSagaMiddleware();
 
 appInitializer();

app/client/src/reducers/entityReducers/datasourceReducer.ts

@@ -13,7 +13,7 @@ import type {
 import { ToastMessageType } from "entities/Datasource";
 import { TEMP_DATASOURCE_ID } from "constants/Datasource";
 import type { DropdownOption } from "@appsmith/ads-old";
-import produce from "immer";
+import { create } from "mutative";
 import { assign } from "lodash";
 
 export interface DatasourceDataState {
@@ -466,7 +466,7 @@ const datasourceReducer = createReducer(initialState, {
     state: DatasourceDataState,
     action: ReduxAction<Datasource>,
   ): DatasourceDataState => {
-    return produce(state, (draftState) => {
+    return create(state, (draftState) => {
       draftState.loading = false;
       draftState.list.forEach((datasource) => {
         if (datasource.id === action.payload.id) {
@@ -656,15 +656,15 @@ const datasourceReducer = createReducer(initialState, {
   [ReduxActionTypes.FETCH_GSHEET_SPREADSHEETS]: (
     state: DatasourceDataState,
   ) => {
-    return produce(state, (draftState) => {
+    return create(state, (draftState) => {
       draftState.gsheetStructure.isFetchingSpreadsheets = true;
     });
   },
   [ReduxActionTypes.FETCH_GSHEET_SPREADSHEETS_SUCCESS]: (
     state: DatasourceDataState,
     action: ReduxAction<{ id: string; data: DropdownOption[] }>,
   ) => {
-    return produce(state, (draftState) => {
+    return create(state, (draftState) => {
       draftState.gsheetStructure.spreadsheets[action.payload.id] = {
         value: action.payload.data,
       };
@@ -676,7 +676,7 @@ const datasourceReducer = createReducer(initialState, {
     state: DatasourceDataState,
     action: ReduxAction<{ id: string; error: string }>,
   ) => {
-    return produce(state, (draftState) => {
+    return create(state, (draftState) => {
       draftState.gsheetStructure.spreadsheets[action.payload.id] = {
         error: action.payload.error,
       };
@@ -685,15 +685,15 @@ const datasourceReducer = createReducer(initialState, {
     });
   },
   [ReduxActionTypes.FETCH_GSHEET_SHEETS]: (state: DatasourceDataState) => {
-    return produce(state, (draftState) => {
+    return create(state, (draftState) => {
       draftState.gsheetStructure.isFetchingSheets = true;
     });
   },
   [ReduxActionTypes.FETCH_GSHEET_SHEETS_SUCCESS]: (
     state: DatasourceDataState,
     action: ReduxAction<{ id: string; data: DropdownOption[] }>,
   ) => {
-    return produce(state, (draftState) => {
+    return create(state, (draftState) => {
       draftState.gsheetStructure.sheets[action.payload.id] = {
         value: action.payload.data,
       };
@@ -704,23 +704,23 @@ const datasourceReducer = createReducer(initialState, {
     state: DatasourceDataState,
     action: ReduxAction<{ id: string; error: string }>,
   ) => {
-    return produce(state, (draftState) => {
+    return create(state, (draftState) => {
       draftState.gsheetStructure.sheets[action.payload.id] = {
         error: action.payload.error,
       };
       draftState.gsheetStructure.isFetchingSheets = false;
     });
   },
   [ReduxActionTypes.FETCH_GSHEET_COLUMNS]: (state: DatasourceDataState) => {
-    return produce(state, (draftState) => {
+    return create(state, (draftState) => {
       draftState.gsheetStructure.isFetchingColumns = true;
     });
   },
   [ReduxActionTypes.FETCH_GSHEET_COLUMNS_SUCCESS]: (
     state: DatasourceDataState,
     action: ReduxAction<{ id: string; data: DropdownOption[] }>,
   ) => {
-    return produce(state, (draftState) => {
+    return create(state, (draftState) => {
       draftState.gsheetStructure.columns[action.payload.id] = {
         value: action.payload.data,
       };
@@ -731,7 +731,7 @@ const datasourceReducer = createReducer(initialState, {
     state: DatasourceDataState,
     action: ReduxAction<{ id: string; error: string }>,
   ) => {
-    return produce(state, (draftState) => {
+    return create(state, (draftState) => {
       draftState.gsheetStructure.columns[action.payload.id] = {
         error: action.payload.error,
       };

app/client/src/reducers/entityReducers/metaReducer/index.ts

@@ -11,7 +11,7 @@ import {
   ReduxActionTypes,
   WidgetReduxActionTypes,
 } from "ee/constants/ReduxActionConstants";
-import produce from "immer";
+import { create } from "mutative";
 import type { EvalMetaUpdates } from "ee/workers/common/DataTreeEvaluator/types";
 import {
   getMetaWidgetResetObj,
@@ -38,7 +38,7 @@ export const metaReducer = createReducer(initialState, {
     state: MetaState,
     action: ReduxAction<UpdateWidgetMetaPropertyPayload>,
   ) => {
-    const nextState = produce(state, (draftMetaState) => {
+    const nextState = create(state, (draftMetaState) => {
       set(
         draftMetaState,
         `${action.payload.widgetId}.${action.payload.propertyName}`,
@@ -54,7 +54,7 @@ export const metaReducer = createReducer(initialState, {
     state: MetaState,
     action: ReduxAction<BatchUpdateWidgetMetaPropertyPayload>,
   ) => {
-    const nextState = produce(state, (draftMetaState) => {
+    const nextState = create(state, (draftMetaState) => {
       const { batchMetaUpdates } = action.payload;
 
       batchMetaUpdates.forEach(({ propertyName, propertyValue, widgetId }) => {
@@ -70,7 +70,7 @@ export const metaReducer = createReducer(initialState, {
     state: MetaState,
     action: ReduxAction<UpdateWidgetMetaPropertyPayload>,
   ) => {
-    const nextState = produce(state, (draftMetaState) => {
+    const nextState = create(state, (draftMetaState) => {
       set(
         draftMetaState,
         `${action.payload.widgetId}.${action.payload.propertyName}`,

app/client/src/reducers/entityReducers/metaReducer/metaReducerUtils.ts

@@ -6,7 +6,7 @@ import type {
 import type { MetaState, WidgetMetaState } from ".";
 import type { ReduxAction } from "actions/ReduxActionTypes";
 import type { EvalMetaUpdates } from "ee/workers/common/DataTreeEvaluator/types";
-import produce from "immer";
+import { create } from "mutative";
 import { set, unset } from "lodash";
 import { klonaRegularWithTelemetry } from "utils/helpers";
 
@@ -82,7 +82,7 @@ export function getNextMetaStateWithUpdates(
   if (!evalMetaUpdates.length) return state;
 
   // if metaObject is updated in dataTree we also update meta values, to keep meta state in sync.
-  const newMetaState = produce(state, (draftMetaState) => {
+  const newMetaState = create(state, (draftMetaState) => {
     evalMetaUpdates.forEach(({ metaPropertyPath, value, widgetId }) => {
       set(draftMetaState, [widgetId, ...metaPropertyPath], value);
     });

app/client/src/sagas/WidgetAdditionSagas.ts

@@ -20,7 +20,7 @@ import {
 } from "constants/WidgetConstants";
 import { toast } from "@appsmith/ads";
 import type { DataTree } from "entities/DataTree/dataTreeTypes";
-import produce from "immer";
+import { create } from "mutative";
 import { klona as clone } from "klona/full";
 import { getWidgetMinMaxDimensionsInPixel } from "layoutSystems/autolayout/utils/flexWidgetUtils";
 import { ResponsiveBehavior } from "layoutSystems/common/utils/constants";
@@ -112,7 +112,7 @@ function* getChildWidgetProps(
     // if (props) props.children = [];
 
     if (props) {
-      props = produce(props, (draft: WidgetProps) => {
+      props = create(props, (draft) => {
         if (!draft.children || !Array.isArray(draft.children)) {
           draft.children = [];
         }

app/client/src/utils/ReducerUtils.ts

@@ -1,5 +1,5 @@
 import type { ReduxAction } from "actions/ReduxActionTypes";
-import produce from "immer";
+import { create } from "mutative";
 
 export const createReducer = (
   // TODO: Fix this the next time the file is edited
@@ -32,7 +32,9 @@ export const createImmerReducer = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return function reducer(state = initialState, action: ReduxAction<any>) {
     if (handlers.hasOwnProperty(action.type)) {
-      return produce(handlers[action.type])(state, action);
+      const fn = handlers[action.type];
+
+      return create(state, (draft) => fn(draft, action));
     } else {
       return state;
     }