perf: use factory functions instead of structuredClone

The usage of structuredClone in some key places was an unnecessary overhead, using factory functions is much more performant

Benchmark: https://jsbenchmark.com/#eyJjYXNlcyI6W3siaWQiOiJTYWtCNjk1VnZJdVMtR3dEc1JtYUUiLCJjb2RlIjoic3RydWN0dXJlZENsb25lKERBVEEudGVzdCk7IiwibmFtZSI6InN0cnVjdHVyZWRDbG9uZSIsImFzeW5jIjpudWxsLCJkZXBlbmRlbmNpZXMiOltdfSx7ImlkIjoidm5nODNBM0hLZTlUMlZFQkY4UEVIIiwiY29kZSI6IkRBVEEuZmFjdG9yeSgpOyIsIm5hbWUiOiJGYWN0b3J5IGZ1bmN0aW9uIiwiYXN5bmMiOm51bGwsImRlcGVuZGVuY2llcyI6W119XSwiY29uZmlnIjp7Im5hbWUiOiJGYWN0b3J5IGZ1bmN0aW9ucyB2cyBzdHJ1Y3R1cmVkQ2xvbmUiLCJwYXJhbGxlbCI6ZmFsc2UsImdsb2JhbFRlc3RDb25maWciOnsiZGVwZW5kZW5jaWVzIjpbXX0sImRhdGFDb2RlIjoiY29uc3QgdGVzdCA9IHtcbiAgbGF5b3V0OiB7XG4gICAgdHJhbnNpdGlvbjoge31cbiAgfVxufTtcblxuY29uc3QgZmFjdG9yeSA9ICgpID0-ICh7XG4gIGxheW91dDoge1xuICAgIHRyYW5zaXRpb246IHt9XG4gIH1cbn0pO1xuXG5yZXR1cm4geyB0ZXN0LCBmYWN0b3J5IH07In19

frontend/src/components/Item/Identify/IdentifyDialog.vue

@@ -188,6 +188,9 @@ const searchFields = computed<IdentifyField[]>(() => {
 
   return result;
 });
+/**
+ * TODO: Refactor to remove this use of structuredClone
+ */
 const fieldsInputs = ref<IdentifyField[]>(
   structuredClone(toRaw(searchFields.value))
 );

frontend/src/plugins/router/middlewares/meta.ts

@@ -6,13 +6,13 @@ import type {
   RouteMeta
 } from 'vue-router';
 
-const defaultMeta: RouteMeta = {
+const defaultMeta = (): RouteMeta => ({
   layout: {
     transition: {}
   }
-};
+});
 
-const reactiveMeta = ref(structuredClone(defaultMeta));
+const reactiveMeta = ref(defaultMeta());
 
 /**
  * This middleware handles the meta property between routes
@@ -41,11 +41,11 @@ export function metaGuard(
   to: RouteLocationNormalized,
   from: RouteLocationNormalized
 ): NavigationGuardReturn {
-  reactiveMeta.value = defu(to.meta, structuredClone(defaultMeta));
+  reactiveMeta.value = defu(to.meta, defaultMeta());
   /**
    * This is needed to ensure all the meta matches the expected data
    */
-  from.meta = defu(toRaw(from.meta), structuredClone(defaultMeta));
+  from.meta = defu(toRaw(from.meta), defaultMeta());
   to.meta = reactiveMeta.value;
 
   if (from.meta.layout.transition.leave) {

frontend/src/store/api.ts

@@ -39,10 +39,6 @@ class ApiStore {
   /**
    * == STATE SECTION ==
    */
-  /**
-   * Maps can be cleared (see this._clear), so no need to perform an structuredClone
-   * of the defaultState here
-   */
   private readonly _items = reactive(new Map<BaseItemDto['Id'], BaseItemDto>());
   private readonly _requests = reactive(new Map<string, Map<string, CachedResponse>>());
   public readonly apiEnums = Object.freeze({

frontend/src/store/super/common-store.ts

@@ -7,7 +7,7 @@ export type Persistence = 'localStorage' | 'sessionStorage';
 
 export abstract class CommonStore<T extends object> {
   protected readonly _storeKey: string;
-  private readonly _defaultState: T;
+  private readonly _defaultState: () => T;
   private readonly _internalState: T | RemovableRef<T>;
 
   protected get _state(): T {
@@ -20,7 +20,7 @@ export abstract class CommonStore<T extends object> {
 
   protected constructor(storeKey: string, defaultState: T, persistence?: Persistence) {
     this._storeKey = storeKey;
-    this._defaultState = defaultState;
+    this._defaultState = () => defaultState;
 
     let storage;
 
@@ -31,8 +31,8 @@ export abstract class CommonStore<T extends object> {
     }
 
     this._internalState = isNil(storage)
-      ? reactive(structuredClone(defaultState)) as T
-      : useStorage(storeKey, structuredClone(defaultState), storage, {
+      ? reactive(this._defaultState()) as T
+      : useStorage(storeKey, this._defaultState(), storage, {
         mergeDefaults: (storageValue, defaults) =>
           mergeExcludingUnknown(storageValue, defaults)
       });