feat: moving from react-create-app to vite

- loads of type fixes
- configuration changes

frontend/src/utils/serializationUtils.ts

@@ -1,101 +1,100 @@
+import { SerializedObject } from "../types/SerializedObject";
+
 const serializePrimitive = (
   obj: number | boolean | string | null,
-  accessPath: string
-) => {
-  let type: string;
-
-  if (typeof obj === 'number') {
-    type = Number.isInteger(obj) ? 'int' : 'float';
+  accessPath: string,
+): SerializedObject => {
+  if (typeof obj === "number") {
     return {
       full_access_path: accessPath,
       doc: null,
       readonly: false,
-      type,
-      value: obj
+      type: Number.isInteger(obj) ? "int" : "float",
+      value: obj,
     };
-  } else if (typeof obj === 'boolean') {
-    type = 'bool';
+  } else if (typeof obj === "boolean") {
     return {
       full_access_path: accessPath,
       doc: null,
       readonly: false,
-      type,
-      value: obj
+      type: "bool",
+      value: obj,
     };
-  } else if (typeof obj === 'string') {
-    type = 'str';
+  } else if (typeof obj === "string") {
     return {
       full_access_path: accessPath,
       doc: null,
       readonly: false,
-      type,
-      value: obj
+      type: "str",
+      value: obj,
     };
   } else if (obj === null) {
-    type = 'NoneType';
     return {
       full_access_path: accessPath,
       doc: null,
       readonly: false,
-      type,
-      value: null
+      type: "None",
+      value: null,
     };
   } else {
-    throw new Error('Unsupported type for serialization');
+    throw new Error("Unsupported type for serialization");
   }
 };
 
-export const serializeList = (obj: unknown[], accessPath: string = '') => {
+export const serializeList = (obj: unknown[], accessPath: string = "") => {
   const doc = null;
   const value = obj.map((item, index) => {
     if (
-      typeof item === 'number' ||
-      typeof item === 'boolean' ||
-      typeof item === 'string' ||
+      typeof item === "number" ||
+      typeof item === "boolean" ||
+      typeof item === "string" ||
       item === null
     ) {
       serializePrimitive(
         item as number | boolean | string | null,
-        `${accessPath}[${index}]`
+        `${accessPath}[${index}]`,
       );
     }
   });
 
   return {
     full_access_path: accessPath,
-    type: 'list',
+    type: "list",
     value,
     readonly: false,
-    doc
+    doc,
   };
 };
 export const serializeDict = (
   obj: Record<string, unknown>,
-  accessPath: string = ''
+  accessPath: string = "",
 ) => {
   const doc = null;
-  const value = Object.entries(obj).reduce((acc, [key, val]) => {
-    // Construct the new access path for nested properties
-    const newPath = `${accessPath}["${key}"]`;
+  const value = Object.entries(obj).reduce(
+    (acc, [key, val]) => {
+      // Construct the new access path for nested properties
+      const newPath = `${accessPath}["${key}"]`;
 
-    // Serialize each value in the dictionary and assign to the accumulator
-    if (
-      typeof val === 'number' ||
-      typeof val === 'boolean' ||
-      typeof val === 'string' ||
-      val === null
-    ) {
-      acc[key] = serializePrimitive(val as number | boolean | string | null, newPath);
-    }
+      // Serialize each value in the dictionary and assign to the accumulator
+      if (
+        typeof val === "number" ||
+        typeof val === "boolean" ||
+        typeof val === "string" ||
+        val === null
+      ) {
+        acc[key] = serializePrimitive(val as number | boolean | string | null, newPath);
+      }
 
-    return acc;
-  }, {});
+      return acc;
+    },
+    <Record<string, SerializedObject>>{},
+  );
 
   return {
     full_access_path: accessPath,
-    type: 'dict',
+    type: "dict",
     value,
     readonly: false,
-    doc
+    doc,
   };
 };

frontend/src/utils/stateUtils.ts

@@ -1,9 +1,9 @@
-import { SerializedValue } from '../components/GenericComponent';
+import { SerializedObject } from "../types/SerializedObject";
 
 export type State = {
   type: string;
   name: string;
-  value: Record<string, SerializedValue> | null;
+  value: Record<string, SerializedObject> | null;
   readonly: boolean;
   doc: string | null;
 };
@@ -45,7 +45,7 @@ export function parseFullAccessPath(path: string): string[] {
  */
 function parseSerializedKey(serializedKey: string): string | number {
   // Strip outer brackets if present
-  if (serializedKey.startsWith('[') && serializedKey.endsWith(']')) {
+  if (serializedKey.startsWith("[") && serializedKey.endsWith("]")) {
     serializedKey = serializedKey.slice(1, -1);
   }
 
@@ -68,12 +68,13 @@ function parseSerializedKey(serializedKey: string): string | number {
 }
 
 function getOrCreateItemInContainer(
-  container: Record<string | number, SerializedValue> | SerializedValue[],
+  container: Record<string | number, SerializedObject> | SerializedObject[],
   key: string | number,
-  allowAddKey: boolean
-): SerializedValue {
+  allowAddKey: boolean,
+): SerializedObject {
   // Check if the key exists and return the item if it does
   if (key in container) {
+    /* @ts-expect-error Key is in the correct form but converted to type any for some reason */
     return container[key];
   }
 
@@ -107,10 +108,10 @@ function getOrCreateItemInContainer(
  * @throws SerializationValueError If the expected structure is incorrect.
  */
 function getContainerItemByKey(
-  container: Record<string, SerializedValue> | SerializedValue[],
+  container: Record<string, SerializedObject> | SerializedObject[],
   key: string,
-  allowAppend: boolean = false
-): SerializedValue {
+  allowAppend: boolean = false,
+): SerializedObject {
   const processedKey = parseSerializedKey(key);
 
   try {
@@ -126,13 +127,13 @@ function getContainerItemByKey(
 }
 
 export function setNestedValueByPath(
-  serializationDict: Record<string, SerializedValue>,
+  serializationDict: Record<string, SerializedObject>,
   path: string,
-  serializedValue: SerializedValue
-): Record<string, SerializedValue> {
+  serializedValue: SerializedObject,
+): Record<string, SerializedObject> {
   const pathParts = parseFullAccessPath(path);
-  const newSerializationDict: Record<string, SerializedValue> = JSON.parse(
-    JSON.stringify(serializationDict)
+  const newSerializationDict: Record<string, SerializedObject> = JSON.parse(
+    JSON.stringify(serializationDict),
   );
 
   let currentDict = newSerializationDict;
@@ -143,11 +144,11 @@ export function setNestedValueByPath(
       const nextLevelSerializedObject = getContainerItemByKey(
         currentDict,
         pathPart,
-        false
+        false,
       );
-      currentDict = nextLevelSerializedObject['value'] as Record<
+      currentDict = nextLevelSerializedObject["value"] as Record<
         string,
-        SerializedValue
+        SerializedObject
       >;
     }
 
@@ -160,14 +161,15 @@ export function setNestedValueByPath(
   } catch (error) {
     console.error(`Error occurred trying to change ${path}: ${error}`);
   }
+  return {};
 }
 
-function createEmptySerializedObject(): SerializedValue {
+function createEmptySerializedObject(): SerializedObject {
   return {
-    full_access_path: '',
-    value: undefined,
-    type: 'None',
+    full_access_path: "",
+    value: null,
+    type: "None",
     doc: null,
-    readonly: false
+    readonly: false,
   };
 }

frontend/src/utils/stringUtils.ts

@@ -1,16 +1,16 @@
 export function getIdFromFullAccessPath(fullAccessPath: string) {
   if (fullAccessPath) {
     // Replace '].' with a single dash
-    let id = fullAccessPath.replace(/\]\./g, '-');
+    let id = fullAccessPath.replace(/\]\./g, "-");
 
     // Replace any character that is not a word character or underscore with a dash
-    id = id.replace(/[^\w_]+/g, '-');
+    id = id.replace(/[^\w_]+/g, "-");
 
     // Remove any trailing dashes
-    id = id.replace(/-+$/, '');
+    id = id.replace(/-+$/, "");
 
     return id;
   } else {
-    return 'main';
+    return "main";
   }
 }