fix: #377 render error

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 = {

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
+}

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)

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
-  }
 }

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)) {

src/lib/js/renderer.js

@@ -3,17 +3,19 @@ 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-'
 
-const processOptions = ({ editorContainer, renderContainer, ...opts }) => {
-  const containerLookup = container => (typeof container === 'string' ? document.querySelector(container) : container)
+const containerLookup = container => (typeof container === 'string' ? document.querySelector(container) : container)
+const processOptions = ({ editorContainer, renderContainer, formData, ...opts }) => {
   const processedOptions = {
     renderContainer: containerLookup(renderContainer),
     editorContainer: containerLookup(editorContainer),
+    formData: parseData(formData) || {},
   }
 
-  return { ...opts, ...processedOptions }
+  return { elements: {}, ...opts, ...processedOptions }
 }
 
 const baseId = id => {
@@ -37,10 +39,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 +54,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 = {