fix(i18n): embed english in editor config (#158)

fix: improve mutli editor use

README.md

@@ -1,4 +1,4 @@
-Formeo v0.7.17
+Formeo
 ===========
 
 A zero dependency JavaScript module for drag and drop form creation.
@@ -50,7 +50,7 @@ evt => {
     evt.addAction(attr, val);
   }
 }
-``` 
+```
 By replacing the default callback you could use your own modal or prompt dialog and do some additional validation before calling `evt.addAction()`.
 
 | Option  | Type | Value(s) | Default | Description |

demo/assets/js/demo.js

@@ -8,7 +8,7 @@ const external = {
   },
 }
 const formeoOpts = {
-  editorContainer: container,
+  editorContainer: '.build-form',
   i18n: {
     location: '../assets/lang',
   },
@@ -29,11 +29,11 @@ const formeoOpts = {
         config: {
           label: 'Email',
           disabledAttrs: ['type'],
-          lockedAttrs: ['required', 'className']
+          lockedAttrs: ['required', 'className'],
         },
         meta: {
           group: 'common',
-          id:'email',
+          id: 'email',
           icon: '@',
         },
         attrs: {

package.json

@@ -40,10 +40,7 @@
         "test/**/*.spec.js"
       ],
       "formeo-editor": {
-        "js": "src/js/editor.js",
-        "icons": "src/icons/**/*.svg",
-        "fonts": "src/fonts/fontello",
-        "lang": "src/lang"
+        "js": "src/js/editor.js"
       },
       "formeo-renderer": {
         "js": "src/js/renderer.js"
@@ -144,7 +141,6 @@
     "css-loader": "0.28.11",
     "enzyme": "3.4.1",
     "enzyme-to-json": "3.3.4",
-    "es6-promise": "4.2.4",
     "eslint": "4.19.1",
     "eslint-config-prettier": "2.9.0",
     "eslint-config-standard": "11.0.0",
@@ -158,6 +154,7 @@
     "eslint-plugin-react": "7.7.0",
     "eslint-plugin-standard": "3.1.0",
     "file-loader": "1.1.11",
+    "formeo-i18n": "^1.0.0",
     "husky": "0.14.3",
     "immutable": "3.8.2",
     "jest": "23.4.2",

src/js/common/dom.js

@@ -3,7 +3,7 @@ import i18n from 'mi18n'
 import events from './events'
 import animate from './animation'
 import Components, { Stages, Columns } from '../components'
-import { uuid, clone, numToPercent, mapToObj, componentType, merge } from './utils'
+import { uuid, clone, numToPercent, componentType, merge } from './utils'
 import {
   ROW_CLASSNAME,
   STAGE_CLASSNAME,
@@ -85,9 +85,7 @@ class DOM {
     if (!elem) {
       return
     }
-    if (elem instanceof Map) {
-      elem = mapToObj(elem)
-    }
+
     elem = this.processTagName(elem)
     const _this = this
     let childType

src/js/common/helpers.js

@@ -16,7 +16,7 @@ export const isInt = n => Number.isInteger(Number(n))
 /**
  * Finds the index of an element in its parent
  * @param {NodeElement} node
- * @param {NodeLement} parent
+ * @param {NodeElement} parent
  */
 export const indexOfNode = (node, parent) => {
   const parentElement = parent || node.parentElement

src/js/common/utils.js

@@ -80,24 +80,6 @@ export const componentType = node => {
  */
 export const unique = array => Array.from(new Set(array))
 
-// Convert and Object to a Map
-export const objToMap = obj => {
-  if (obj instanceof Map) {
-    return obj
-  }
-  return Object.entries(obj).reduce((acc, [key, val]) => {
-    acc.set(key, val)
-    return acc
-  }, new Map())
-}
-
-// Convert a Map to an Object
-export const mapToObj = map =>
-  Array.from(map.entries()).reduce((acc, [key, val]) => {
-    acc[key] = val instanceof Map ? mapToObj(val) : val
-    return acc
-  }, Object.create(null))
-
 // Get or generate a uuid
 export const uuid = elem => {
   let id
@@ -124,7 +106,7 @@ export const merge = (obj1, obj2, opts = Object.create(null)) => {
       return unique(opts.mergeArray ? objValue.concat(srcValue) : srcValue)
     }
   }
-  return mergeWith(obj1, obj2, customizer)
+  return mergeWith({}, obj1, obj2, customizer)
 }
 
 export const clone = obj => {

src/js/components/component.js

@@ -20,7 +20,6 @@ export default class Component extends Data {
     super(name, Object.assign({}, data, { id: data.id || uuid() }))
     this.id = this.data.id
     this.name = name
-
     this.config = Components[`${this.name}s`].config
     this.dataPath = `${this.name}s.${this.id}.`
     this.observer = new MutationObserver(this.mutationHandler)

src/js/config.js

@@ -0,0 +1,33 @@
+import mi18n from 'mi18n'
+import { isIE } from './common/helpers'
+import pkg from '../../package.json'
+import { FALLBACK_SVG_SPRITE } from './constants'
+import { enUS } from 'formeo-i18n'
+
+export const defaults = {
+  get editor() {
+    return {
+      allowEdit: true,
+      dataType: 'json',
+      debug: false,
+      sessionStorage: false,
+      editorContainer: `.${pkg.name}-wrap`,
+      external: {}, // assign external data to be used in conditions autolinker
+      svgSprite: FALLBACK_SVG_SPRITE, // change to null
+      iconFont: null, // 'glyphicons' || 'font-awesome' || 'fontello'
+      config: {}, // stages, rows, columns, fields
+      events: {},
+      actions: {},
+      controls: {},
+      polyfills: isIE(), // loads csspreloadrel
+      i18n: {
+        location: 'https://draggable.github.io/formeo/assets/lang/',
+        locale: 'en-US',
+        langs: ['en-US'],
+        override: {
+          'en-US': mi18n.processFile(enUS),
+        },
+      },
+    }
+  },
+}

src/js/constants.js

@@ -5,6 +5,8 @@ export const POLYFILLS = [
   { name: 'mutationObserver', src: '//cdn.jsdelivr.net/npm/mutationobserver-shim/dist/mutationobserver.min.js' },
 ]
 
+export const FALLBACK_SVG_SPRITE = 'https://draggable.github.io/formeo/assets/img/formeo-sprite.svg'
+
 export const CONTROL_GROUP_CLASSNAME = 'control-group'
 export const STAGE_CLASSNAME = 'stage'
 export const ROW_CLASSNAME = `${STAGE_CLASSNAME}-rows`

src/js/editor.js

@@ -1,53 +1,15 @@
 'use strict'
-import 'es6-promise/auto'
 import '../sass/formeo.scss'
 import i18n from 'mi18n'
-import { isIE } from './common/helpers'
 import dom from './common/dom'
 import Events from './common/events'
 import Actions from './common/actions'
 import Controls from './components/controls'
 import Components from './components'
 import { loadPolyfills, insertStyle, insertIcons, ajax } from './common/loaders'
-import { SESSION_LOCALE_KEY } from './constants'
+import { SESSION_LOCALE_KEY, FALLBACK_SVG_SPRITE } from './constants'
 import { sessionStorage, merge } from './common/utils'
-import pkg from '../../package.json'
-
-const fallbacks = {
-  svgSprite: 'https://draggable.github.io/formeo/assets/img/formeo-sprite.svg',
-}
-
-const DEFAULT_OPTIONS = () => ({
-  allowEdit: true,
-  dataType: 'json',
-  debug: false,
-  sessionStorage: false,
-  editorContainer: `.${pkg.name}-wrap`,
-  external: {}, // assign external data to be used in conditions autolinker
-  svgSprite: null, // change to null
-  iconFont: null, // 'glyphicons' || 'font-awesome' || 'fontello'
-  config: {}, // stages, rows, columns, fields
-  events: {},
-  actions: {},
-  controls: {},
-  polyfills: isIE(), // loads csspreloadrel
-  i18n: {
-    location: 'https://draggable.github.io/formeo/assets/lang/',
-    locale: 'en-US',
-    langs: ['en-US'],
-  },
-})
-
-// Simple object config for the main part of formeo
-const formeo = {
-  get formData() {
-    return Components.formData
-  },
-  get json() {
-    return Components.json
-  },
-  Components,
-}
+import { defaults } from './config'
 
 /**
  * Main class
@@ -60,30 +22,35 @@ class FormeoEditor {
    */
   constructor(options, userFormData) {
     const _this = this
-
-    const mergedOptions = merge(DEFAULT_OPTIONS(), options)
+    const mergedOptions = merge(defaults.editor, options)
 
     const { actions, events, debug, config, editorContainer, ...opts } = mergedOptions
     this.editorContainer =
-      typeof _this.editorContainer === 'string' ? document.querySelector(_this.editorContainer) : editorContainer
+      typeof editorContainer === 'string' ? document.querySelector(editorContainer) : editorContainer
     this.opts = opts
     dom.setOptions = opts
     Components.config = config
 
-    this.formData = userFormData
+    this.userFormData = userFormData
 
+    this.Components = Components
     Events.init({ debug, ...events })
     Actions.init({ debug, sessionStorage: opts.sessionStorage, ...actions })
 
     // Load remote resources such as css and svg sprite
     _this.loadResources().then(() => {
       if (opts.allowEdit) {
-        formeo.edit = _this.init.bind(_this)
+        _this.edit = _this.init.bind(_this)
         _this.init()
       }
     })
+  }
 
-    return formeo
+  get formData() {
+    return this.Components.formData
+  }
+  get json() {
+    return this.Components.json
   }
 
   /**
@@ -94,7 +61,7 @@ class FormeoEditor {
     const promises = []
 
     if (this.opts.polyfills) {
-      loadPolyfills(this.opts.polysfills)
+      loadPolyfills(this.opts.polyfills)
     }
 
     if (this.opts.style) {
@@ -103,7 +70,7 @@ class FormeoEditor {
 
     // Ajax load svgSprite and inject into markup.
     if (this.opts.svgSprite) {
-      promises.push(ajax(this.opts.svgSprite, insertIcons, () => ajax(fallbacks.svgSprite, insertIcons)))
+      promises.push(ajax(this.opts.svgSprite, insertIcons, () => ajax(FALLBACK_SVG_SPRITE, insertIcons)))
     }
 
     promises.push(i18n.init(Object.assign({}, this.opts.i18n, { locale: sessionStorage.get(SESSION_LOCALE_KEY) })))
@@ -118,15 +85,15 @@ class FormeoEditor {
    */
   init() {
     const _this = this
-    this.load(this.formData, _this.opts)
-    formeo.controls = Controls.init(_this.opts.controls)
+    this.load(this.userFormData, _this.opts)
+    this.controls = Controls.init(_this.opts.controls)
     _this.formId = Components.get('id')
-    formeo.i18n = {
+    this.i18n = {
       setLang: formeoLocale => {
         sessionStorage.set(SESSION_LOCALE_KEY, formeoLocale)
         const loadLang = i18n.setCurrent(formeoLocale)
-        loadLang.then(lang => {
-          formeo.controls = Controls.init(_this.opts.controls)
+        loadLang.then(() => {
+          this.controls = Controls.init(_this.opts.controls)
           _this.render()
         }, console.error)
       },
@@ -136,7 +103,7 @@ class FormeoEditor {
   }
 
   load(formData, opts = this.opts) {
-    return Components.load(formData, opts)
+    return this.Components.load(formData, opts)
   }
 
   /**
@@ -145,7 +112,7 @@ class FormeoEditor {
    */
   render() {
     const _this = this
-    const controls = formeo.controls.dom
+    const controls = this.controls.dom
     const elemConfig = {
       attrs: {
         className: 'formeo formeo-editor',
@@ -160,12 +127,13 @@ class FormeoEditor {
     }
 
     const formeoEditor = dom.create(elemConfig)
+
     dom.empty(_this.editorContainer)
     _this.editorContainer.appendChild(formeoEditor)
 
     Events.formeoLoaded = new window.CustomEvent('formeoLoaded', {
       detail: {
-        formeo: formeo,
+        formeo: _this,
       },
     })
 

tools/webpack.config.js

@@ -53,10 +53,6 @@ const webpackConfig = {
         exclude: /node_modules/,
         loader: 'babel-loader',
       },
-      {
-        test: /\.lang$/,
-        loader: 'file-loader?name=[path][name].[ext]&context=./src',
-      },
       {
         test: /\.scss$/,
         use: [