fix: form does not load after DomCententLoaded event has been fired

Author: kevinchappell

src/lib/js/common/utils/index.mjs

@@ -339,3 +339,6 @@ export function parseData(data = Object.create(null)) {
 
   return data
 }
+
+
+export const cleanFormData = formData => (formData ? clone(parseData(formData)) : {})

src/lib/js/editor.js

@@ -8,7 +8,7 @@ import Controls from './components/controls/index.js'
 import Components from './components/index.js'
 import { loadPolyfills, fetchIcons, fetchFormeoStyle } from './common/loaders.js'
 import { SESSION_LOCALE_KEY } from './constants.js'
-import { merge } from './common/utils/index.mjs'
+import { cleanFormData, merge } from './common/utils/index.mjs'
 import { defaults } from './config.js'
 
 /**
@@ -32,7 +32,7 @@ export class FormeoEditor {
     dom.setOptions = opts
     Components.config = config
 
-    this.userFormData = userFormData || formData
+    this.userFormData = cleanFormData(userFormData || formData)
 
     this.Components = Components
     this.dom = dom
@@ -41,7 +41,11 @@ export class FormeoEditor {
     this.tooltip = new SmartTooltip()
 
     // Load remote resources such as css and svg sprite
-    document.addEventListener('DOMContentLoaded', this.loadResources.bind(this))
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', this.loadResources.bind(this))
+    } else {
+      this.loadResources()
+    }
   }
 
   get formData() {

src/lib/js/renderer.js

@@ -1,12 +1,11 @@
 import isEqual from 'lodash/isEqual'
 import dom from './common/dom'
-import { uuid, isAddress, isExternalAddress, merge, parseData, clone } from './common/utils/index.mjs'
+import { uuid, isAddress, isExternalAddress, merge, cleanFormData } from './common/utils/index.mjs'
 import { STAGE_CLASSNAME, UUID_REGEXP } from './constants'
 import { fetchDependencies } from './common/loaders'
 
 const RENDER_PREFIX = 'f-'
 
-const cleanFormData = formData => (formData ? clone(parseData(formData)) : {})
 const containerLookup = container => (typeof container === 'string' ? document.querySelector(container) : container)
 const processOptions = ({ editorContainer, renderContainer, formData, ...opts }) => {
   const processedOptions = {