refactor: replace deepClone with structuredClone (@fehmer) (monkeytypegame#6882)

fehmer · web-flow · commit 91f64d211ed1 · 2025-08-15T14:05:47.000+02:00
diff --git a/frontend/__tests__/controllers/preset-controller.spec.ts b/frontend/__tests__/controllers/preset-controller.spec.ts
@@ -6,7 +6,6 @@ import * as UpdateConfig from "../../src/ts/config";
 import * as Notifications from "../../src/ts/elements/notifications";
 import * as TestLogic from "../../src/ts/test/test-logic";
 import * as TagController from "../../src/ts/controllers/tag-controller";
-import { deepClone } from "../../src/ts/utils/misc";
 
 describe("PresetController", () => {
   describe("apply", () => {
@@ -107,7 +106,7 @@ describe("PresetController", () => {
       });
 
       UpdateConfig.setNumbers(true);
-      const oldConfig = deepClone(UpdateConfig.default);
+      const oldConfig = structuredClone(UpdateConfig.default);
 
       //WHEN
       await PresetController.apply(preset._id);
diff --git a/frontend/__tests__/utils/misc.spec.ts b/frontend/__tests__/utils/misc.spec.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { deepClone, getErrorMessage, isObject } from "../../src/ts/utils/misc";
+import { getErrorMessage, isObject } from "../../src/ts/utils/misc";
 import {
   getLanguageDisplayString,
   removeLanguageSize,
@@ -122,57 +122,7 @@ describe("misc.ts", () => {
       });
     });
   });
-  describe("deepClone", () => {
-    it("should correctly clone objects", () => {
-      const tests = [
-        {
-          input: {},
-          expected: {},
-        },
-        {
-          input: { a: 1 },
-          expected: { a: 1 },
-        },
-        {
-          input: { a: { b: 2 } },
-          expected: { a: { b: 2 } },
-        },
-        {
-          input: { a: { b: 2 }, c: [1, 2, 3] },
-          expected: { a: { b: 2 }, c: [1, 2, 3] },
-        },
-        {
-          input: [],
-          expected: [],
-        },
-        {
-          input: [1, 2, 3],
-          expected: [1, 2, 3],
-        },
-        {
-          input: "string",
-          expected: "string",
-        },
-        {
-          input: 1,
-          expected: 1,
-        },
-        {
-          input: null,
-          expected: null,
-        },
-        {
-          input: undefined,
-          expected: undefined,
-        },
-      ];
 
-      tests.forEach((test) => {
-        const result = deepClone(test.input);
-        expect(result).toStrictEqual(test.expected);
-      });
-    });
-  });
   describe("getErrorMesssage", () => {
     it("should correctly get the error message", () => {
       const tests = [
diff --git a/frontend/src/ts/constants/default-config.ts b/frontend/src/ts/constants/default-config.ts
@@ -1,5 +1,4 @@
 import { Config, CustomThemeColors } from "@monkeytype/schemas/configs";
-import { deepClone } from "../utils/misc";
 
 const obj = {
   theme: "serika_dark",
@@ -105,5 +104,5 @@ const obj = {
 } as Config;
 
 export function getDefaultConfig(): Config {
-  return deepClone(obj);
+  return structuredClone(obj);
 }
diff --git a/frontend/src/ts/constants/default-result-filters.ts b/frontend/src/ts/constants/default-result-filters.ts
@@ -1,5 +1,4 @@
 import { ResultFilters } from "@monkeytype/schemas/users";
-import { deepClone } from "../utils/misc";
 import { LanguageList } from "./languages";
 import { getFunboxNames } from "@monkeytype/funbox";
 
@@ -67,4 +66,4 @@ const object: ResultFilters = {
   },
 };
 
-export default deepClone(object);
+export default structuredClone(object);
diff --git a/frontend/src/ts/constants/default-snapshot.ts b/frontend/src/ts/constants/default-snapshot.ts
@@ -4,7 +4,6 @@ import {
   UserProfileDetails,
   UserTag,
 } from "@monkeytype/schemas/users";
-import { deepClone } from "../utils/misc";
 import { getDefaultConfig } from "./default-config";
 import { Mode } from "@monkeytype/schemas/shared";
 import { Result } from "@monkeytype/schemas/results";
@@ -135,5 +134,5 @@ const defaultSnap = {
 } as Snapshot;
 
 export function getDefaultSnapshot(): Snapshot {
-  return deepClone(defaultSnap);
+  return structuredClone(defaultSnap);
 }
diff --git a/frontend/src/ts/controllers/preset-controller.ts b/frontend/src/ts/controllers/preset-controller.ts
@@ -5,7 +5,6 @@ import * as Notifications from "../elements/notifications";
 import * as TestLogic from "../test/test-logic";
 import * as TagController from "./tag-controller";
 import { SnapshotPreset } from "../constants/default-snapshot";
-import { deepClone } from "../utils/misc";
 
 export async function apply(_id: string): Promise<void> {
   const snapshot = DB.getSnapshot();
@@ -18,7 +17,7 @@ export async function apply(_id: string): Promise<void> {
 
   if (isPartialPreset(presetToApply)) {
     await UpdateConfig.apply({
-      ...deepClone(Config),
+      ...structuredClone(Config),
       ...presetToApply.config,
     });
   } else {
diff --git a/frontend/src/ts/elements/account/result-filters.ts b/frontend/src/ts/elements/account/result-filters.ts
@@ -173,7 +173,7 @@ function addFilterPresetToSnapshot(filter: ResultFilters): void {
   if (!snapshot) return;
   DB.setSnapshot({
     ...snapshot,
-    filterPresets: [...snapshot.filterPresets, Misc.deepClone(filter)],
+    filterPresets: [...snapshot.filterPresets, structuredClone(filter)],
   });
 }
 
@@ -928,7 +928,7 @@ $(".group.presetFilterButtons .filterBtns").on(
 
 function verifyResultFiltersStructure(filterIn: ResultFilters): ResultFilters {
   const filter = mergeWithDefaultFilters(
-    sanitize(ResultFiltersSchema.partial().strip(), Misc.deepClone(filterIn))
+    sanitize(ResultFiltersSchema.partial().strip(), structuredClone(filterIn))
   );
 
   return filter;
diff --git a/frontend/src/ts/test/custom-text.ts b/frontend/src/ts/test/custom-text.ts
@@ -2,7 +2,6 @@ import { CustomTextLimitMode, CustomTextMode } from "@monkeytype/schemas/util";
 import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
 import { z } from "zod";
 import { CompletedEventCustomTextSchema } from "@monkeytype/schemas/results";
-import { deepClone } from "../utils/misc";
 
 const CustomTextObjectSchema = z.record(z.string(), z.string());
 type CustomTextObject = z.infer<typeof CustomTextObjectSchema>;
@@ -47,7 +46,7 @@ const customTextSettings = new LocalStorageWithSchema({
   schema: CustomTextSettingsSchema,
   fallback: defaultCustomTextSettings,
   migrate: (oldData, _zodIssues) => {
-    const fallback = deepClone(defaultCustomTextSettings);
+    const fallback = structuredClone(defaultCustomTextSettings);
 
     if (typeof oldData !== "object" || oldData === null) {
       return fallback;
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
@@ -850,7 +850,7 @@ export async function update(
   dontSave: boolean
 ): Promise<void> {
   resultAnnotation = [];
-  result = Misc.deepClone(res);
+  result = structuredClone(res);
   hideCrown();
   $("#resultWordsHistory .words").empty();
   $("#result #resultWordsHistory").addClass("hidden");
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
@@ -971,7 +971,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
     dontSave = true;
   }
 
-  const completedEvent = Misc.deepClone(ce) as CompletedEvent;
+  const completedEvent = structuredClone(ce) as CompletedEvent;
 
   ///////// completed event ready
 
@@ -1127,7 +1127,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
 
   $("#result .stats .dailyLeaderboard").addClass("hidden");
 
-  TestStats.setLastResult(Misc.deepClone(completedEvent));
+  TestStats.setLastResult(structuredClone(completedEvent));
 
   if (!ConnectionState.get()) {
     ConnectionState.showOfflineBanner();
@@ -1297,7 +1297,7 @@ async function saveResult(
     //TODO - this type cast was not needed before because we were using JSON cloning
     // but now with the stronger types it shows that we are forcing completed event
     // into a snapshot result - might not cuase issues but worth investigating
-    const result = Misc.deepClone(
+    const result = structuredClone(
       completedEvent
     ) as unknown as SnapshotResult<Mode>;
     result._id = data.insertedId;
diff --git a/frontend/src/ts/utils/misc.ts b/frontend/src/ts/utils/misc.ts
@@ -586,32 +586,6 @@ export function isObject(obj: unknown): obj is Record<string, unknown> {
   return typeof obj === "object" && !Array.isArray(obj) && obj !== null;
 }
 
-export function deepClone<T>(obj: T[]): T[];
-export function deepClone<T extends object>(obj: T): T;
-export function deepClone<T>(obj: T): T;
-export function deepClone<T>(obj: T | T[]): T | T[] {
-  // Check if the value is a primitive (not an object or array)
-  if (obj === null || typeof obj !== "object") {
-    return obj;
-  }
-
-  // Handle arrays
-  if (Array.isArray(obj)) {
-    return obj.map((item) => deepClone(item));
-  }
-
-  // Handle objects
-  const clonedObj = {} as { [K in keyof T]: T[K] };
-
-  for (const key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      clonedObj[key] = deepClone((obj as { [K in keyof T]: T[K] })[key]);
-    }
-  }
-
-  return clonedObj;
-}
-
 export function prefersReducedMotion(): boolean {
   return matchMedia?.("(prefers-reduced-motion)")?.matches;
 }
diff --git a/frontend/src/ts/utils/results.ts b/frontend/src/ts/utils/results.ts
@@ -2,7 +2,6 @@ import Ape from "../ape";
 import * as Notifications from "../elements/notifications";
 import * as DB from "../db";
 import * as TestLogic from "../test/test-logic";
-import { deepClone } from "./misc";
 import { Mode } from "@monkeytype/schemas/shared";
 import { SnapshotResult } from "../constants/default-snapshot";
 
@@ -25,7 +24,7 @@ export async function syncNotSignedInLastResult(uid: string): Promise<void> {
   //TODO - this type cast was not needed before because we were using JSON cloning
   // but now with the stronger types it shows that we are forcing completed event
   // into a snapshot result - might not cuase issues but worth investigating
-  const result = deepClone(
+  const result = structuredClone(
     notSignedInLastResult
   ) as unknown as SnapshotResult<Mode>;
   result._id = response.body.data.insertedId;
diff --git a/frontend/src/ts/utils/sanitize.ts b/frontend/src/ts/utils/sanitize.ts
@@ -1,5 +1,4 @@
 import { z } from "zod";
-import { deepClone } from "./misc";
 
 function removeProblems<T extends object | unknown[]>(
   obj: T,
@@ -37,7 +36,7 @@ export function sanitize<T extends z.ZodTypeAny>(
 ): z.infer<T> {
   const maxAttempts = 2;
   let result;
-  let current = deepClone(obj);
+  let current = structuredClone(obj);
 
   for (let attempt = 0; attempt <= maxAttempts; attempt++) {
     result = schema.safeParse(current);
