refactor: make code null safe

Author: sfxcode

src/composables/useInputEditor.ts

@@ -10,25 +10,33 @@ export function useInputEditor() {
       return {}
 
     const formkitInput = data?._dollar_formkit
-    let tempData = { }
-    if (data.prime && data.prime.length > 0) {
-      const mapped = data.prime.map((entry: { prime_key: string, prime_value: any }) => {
-        const key: string = entry.prime_key
-        let value: any = entry.prime_value
-        // some inputs require numbers
-        if (formkitInput === 'primeInputOtp' && key === 'length') {
-          value = +value
-        }
-        return [key, value] as [string, any]
-      })
+    let tempData: Record<string, any> = {}
+
+    if (data.prime && Array.isArray(data.prime) && data.prime.length > 0) {
+      const mapped = data.prime
+        .filter((entry: any) => entry && typeof entry === 'object' && 'prime_key' in entry && 'prime_value' in entry)
+        .map((entry: { prime_key: string, prime_value: any }) => {
+          const key: string = entry.prime_key || ''
+          let value: any = entry.prime_value
+          // some inputs require numbers
+          if (formkitInput === 'primeInputOtp' && key === 'length' && value !== undefined) {
+            value = Number(value)
+          }
+          return [key, value] as [string, any]
+        })
+
       tempData = Object.assign({}, ...mapped.map(([key, val]: [string, any]) => ({ [key]: val })))
     }
 
-    const readonlyValue = data.readonly ? true : undefined
-    const disabledValue = data.disabled ? true : undefined
-    const preserveValue = data.preserve ? true : undefined
+    const readonlyValue = data.readonly === true ? true : undefined
+    const disabledValue = data.disabled === true ? true : undefined
+    const preserveValue = data.preserve === true ? true : undefined
 
-    const defaultObject = { readonly: readonlyValue, disabled: disabledValue, preserve: preserveValue }
+    const defaultObject = {
+      readonly: readonlyValue,
+      disabled: disabledValue,
+      preserve: preserveValue,
+    }
 
     // outer class
     let outerClass: string | undefined = ''
@@ -45,20 +53,55 @@ export function useInputEditor() {
     if (data.innerClass)
       innerClass = `${innerClass} ${data.innerClass}`.trim()
 
-    const undefinedObject = { prime: undefined, schemaResultFormKey: undefined, _dollar_formkit: undefined, slots: undefined, selectButton: undefined }
-
-    const useOptions = primeInputWithOptionNames.map(s => `prime${s}`).includes(formkitInput)
+    const undefinedObject = {
+      prime: undefined,
+      schemaResultFormKey: undefined,
+      _dollar_formkit: undefined,
+      slots: undefined,
+      selectButton: undefined,
+    }
 
-    let result: { [key: string]: any } = {}
-    if (useOptions)
-      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, wrapperClass, innerClass, optionLabel: 'label', optionValue: 'value' }
-    else
-      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, wrapperClass, innerClass, options: undefined }
+    const useOptions = formkitInput
+      ? primeInputWithOptionNames
+          .map(s => `prime${s}`)
+          .includes(formkitInput)
+      : false
+
+    let result: Record<string, any> = {}
+
+    if (useOptions) {
+      result = {
+        ...data,
+        $formkit: formkitInput,
+        ...tempData,
+        ...undefinedObject,
+        ...defaultObject,
+        outerClass,
+        wrapperClass,
+        innerClass,
+        optionLabel: 'label',
+        optionValue: 'value',
+      }
+    }
+    else {
+      result = {
+        ...data,
+        $formkit: formkitInput,
+        ...tempData,
+        ...undefinedObject,
+        ...defaultObject,
+        outerClass,
+        wrapperClass,
+        innerClass,
+        options: undefined,
+      }
+    }
 
     // cleanup empty values
     for (const key in result) {
       const value = result[key]
-      if ((typeof value === 'string' || typeof value === 'string')) {
+      if (value !== null && value !== undefined
+        && (typeof value === 'string')) {
         if (value.trim().length === 0)
           result[key] = undefined
       }
@@ -68,9 +111,14 @@ export function useInputEditor() {
   }
 
   function dataToSchema(data: any): any {
+    if (!data)
+      return {}
+
     const schema = editorDataToSchema(data)
-    if (schema.options) {
-      const options = schema.options.map((o: object) => JSON.parse(JSON.stringify(o)))
+
+    if (schema?.options && Array.isArray(schema.options)) {
+      const options = schema.options.map((o: object) =>
+        o ? JSON.parse(JSON.stringify(o)) : {})
       return { ...schema, options }
     }
     else {
@@ -79,14 +127,23 @@ export function useInputEditor() {
   }
 
   function editorDataToJson(data: any): string {
+    if (!data)
+      return '{}'
     return JSON.stringify(dataToSchema(data))
   }
 
   function objectToString(data: Record<string, any>): string {
+    if (!data)
+      return '{}'
+
     return `{${Object.entries(data).map(([key, value]: [string, any]) => {
       if (key === 'options' && Array.isArray(value) && value.length > 0) {
         let result = '['
-        value.forEach((o: any) => result = `${result + objectToString(o)}, `)
+        value.forEach((o: any) => {
+          if (o && typeof o === 'object') {
+            result = `${result + objectToString(o)}, `
+          }
+        })
         return `${key}: ${result.substring(0, result.length - 2)}]`
       }
       else if (key === 'primeInputOtp') {
@@ -99,13 +156,33 @@ export function useInputEditor() {
   }
 
   function editorDataToObject(data: any): string {
-    return objectToString(JSON.parse(editorDataToJson(data)))
+    if (!data)
+      return '{}'
+
+    try {
+      const jsonData = editorDataToJson(data)
+      return objectToString(JSON.parse(jsonData))
+    }
+    catch (error) {
+      console.error('Error in editorDataToObject:', error)
+      return '{}'
+    }
   }
 
   function schemaToEditorData(schema: any): any {
+    if (!schema)
+      return {}
+
     const formkitInput = schema?.$formkit
     return { ...schema, _dollar_formkit: formkitInput }
   }
 
-  return { primeInputNames, primeOutputNames, editorDataToSchema, editorDataToJson, editorDataToCode: editorDataToObject, schemaToEditorData }
+  return {
+    primeInputNames,
+    primeOutputNames,
+    editorDataToSchema,
+    editorDataToJson,
+    editorDataToCode: editorDataToObject,
+    schemaToEditorData,
+  }
 }