From cec4935ceeeab46a183ce642ad36ac8992d463c6 Mon Sep 17 00:00:00 2001
From: Kevin Chappell <kevin@chappell.dev>
Date: Tue, 26 Nov 2024 10:58:29 -0800
Subject: [PATCH] fix: formData not correctly parsed

formData not parsed when provided by render method
---
 src/demo/js/options/index.js            |  2 +-
 src/lib/js/common/utils/index.mjs       | 21 +++++++++++++++++++++
 src/lib/js/components/component-data.js |  4 ++--
 src/lib/js/components/data.js           | 21 ---------------------
 src/lib/js/components/fields/index.js   |  3 ++-
 src/lib/js/renderer.js                  |  9 +++++----
 6 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/demo/js/options/index.js b/src/demo/js/options/index.js
index 4bf86d85..a0ef56fe 100644
--- a/src/demo/js/options/index.js
+++ b/src/demo/js/options/index.js
@@ -2,7 +2,7 @@ import external from './external'
 import controls from './controls'
 import config from './config'
 
-const editorContainer = document.querySelector('.build-form')
+const editorContainer = '.build-form'
 const renderContainer = '.render-form'
 
 export const editorOptions = {
diff --git a/src/lib/js/common/utils/index.mjs b/src/lib/js/common/utils/index.mjs
index 3261147d..fa03b4d7 100644
--- a/src/lib/js/common/utils/index.mjs
+++ b/src/lib/js/common/utils/index.mjs
@@ -318,3 +318,24 @@ export function identity(value) {
 export function noop() {
   // Do nothing
 }
+
+/**
+ * Parses the provided data argument. If the argument is a string, it attempts to parse it as JSON.
+ * If the parsing fails, it logs an error and returns an empty object.
+ * If the argument is not a string, it returns the argument as is.
+ *
+ * @param {string|Object} dataArg - The data to be parsed. Can be a JSON string or an object.
+ * @returns {Object} - The parsed object or the original object if the input was not a string.
+ */
+export function parseData(data = Object.create(null)) {
+  if (typeof data === 'string') {
+    try {
+      return JSON.parse(data)
+    } catch (e) {
+      console.error('Invalid JSON string provided:', e)
+      return Object.create(null)
+    }
+  }
+
+  return data
+}
diff --git a/src/lib/js/components/component-data.js b/src/lib/js/components/component-data.js
index 1e7f0978..6b76fcb8 100644
--- a/src/lib/js/components/component-data.js
+++ b/src/lib/js/components/component-data.js
@@ -1,10 +1,10 @@
 import Data from './data.js'
-import { uuid, clone, merge } from '../common/utils/index.mjs'
+import { uuid, clone, merge, parseData } from '../common/utils/index.mjs'
 import { get } from '../common/utils/object.mjs'
 
 export default class ComponentData extends Data {
   load = dataArg => {
-    const data = this.parseformData(dataArg)
+    const data = parseData(dataArg)
     this.empty()
     for (const [key, val] of Object.entries(data)) {
       this.add(key, val)
diff --git a/src/lib/js/components/data.js b/src/lib/js/components/data.js
index eb0e7ed9..4abda6ab 100644
--- a/src/lib/js/components/data.js
+++ b/src/lib/js/components/data.js
@@ -100,25 +100,4 @@ export default class Data {
   }
   setCallbacks = {}
   configVal = Object.create(null)
-
-  /**
-   * Parses the provided data argument. If the argument is a string, it attempts to parse it as JSON.
-   * If the parsing fails, it logs an error and returns an empty object.
-   * If the argument is not a string, it returns the argument as is.
-   *
-   * @param {string|Object} dataArg - The data to be parsed. Can be a JSON string or an object.
-   * @returns {Object} - The parsed object or the original object if the input was not a string.
-   */
-  parseformData = (dataArg = Object.create(null)) => {
-    if (typeof dataArg === 'string') {
-      try {
-        return JSON.parse(dataArg)
-      } catch (e) {
-        console.error('Invalid JSON string provided:', e)
-        return Object.create(null)
-      }
-    }
-
-    return dataArg
-  }
 }
diff --git a/src/lib/js/components/fields/index.js b/src/lib/js/components/fields/index.js
index 3976c30c..ac16c82a 100644
--- a/src/lib/js/components/fields/index.js
+++ b/src/lib/js/components/fields/index.js
@@ -2,6 +2,7 @@ import ComponentData from '../component-data.js'
 import Field from './field.js'
 import Controls from '../controls/index.js'
 import { get, set } from '../../common/utils/object.mjs'
+import { parseData } from '../../common/utils/index.mjs'
 
 const DEFAULT_CONFIG = {
   actionButtons: {
@@ -62,7 +63,7 @@ export class Fields extends ComponentData {
   }
 
   load = (dataArg = Object.create(null)) => {
-    const allFieldData = this.parseformData(dataArg)
+    const allFieldData = parseData(dataArg)
     this.empty()
 
     for (const [key, val] of Object.entries(allFieldData)) {
diff --git a/src/lib/js/renderer.js b/src/lib/js/renderer.js
index 522c89a8..0a5bdfbd 100644
--- a/src/lib/js/renderer.js
+++ b/src/lib/js/renderer.js
@@ -3,6 +3,7 @@ import dom from './common/dom'
 import { uuid, isAddress, isExternalAddress, merge } from './common/utils'
 import { STAGE_CLASSNAME, UUID_REGEXP } from './constants'
 import { fetchDependencies } from './common/loaders'
+import { parseData } from './common/utils/index.mjs'
 
 const RENDER_PREFIX = 'f-'
 
@@ -37,10 +38,10 @@ const createRemoveButton = () =>
   )
 
 export default class FormeoRenderer {
-  constructor(opts, formData = {}) {
-    const { renderContainer, external, elements } = processOptions(opts)
+  constructor(opts, formDataArg) {
+    const { renderContainer, external, elements, formData = {} } = processOptions(opts)
     this.container = renderContainer
-    this.form = formData
+    this.form = parseData(formDataArg || formData)
     this.external = external
     this.dom = dom
     this.components = Object.create(null)
@@ -52,7 +53,7 @@ export default class FormeoRenderer {
    * @param {Object} formData
    */
   render = (formData = this.form) => {
-    this.form = formData
+    this.form = parseData(formData)
 
     const renderCount = document.getElementsByClassName('formeo-render').length
     const config = {