Migrate all files to import/export in ES6

package-lock.json

@@ -3698,15 +3698,6 @@
         "babel-runtime": "^6.22.0"
       }
     },
-    "babel-plugin-add-module-exports": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-1.0.2.tgz",
-      "integrity": "sha512-4paN7RivvU3Rzju1vGSHWPjO8Y0rI6droWvSFKI6dvEQ4mvoV0zGojnlzVRfI6N8zISo6VERXt3coIuVmzuvNg==",
-      "dev": true,
-      "requires": {
-        "chokidar": "^2.0.4"
-      }
-    },
     "babel-plugin-check-es2015-constants": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz",

package.json

@@ -29,7 +29,6 @@
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "babel-loader": "^8.0.6",
-    "babel-plugin-add-module-exports": "^1.0.2",
     "documentation": "^8.1.2",
     "eslint": "^5.9.0",
     "html-webpack-plugin": "^3.2.0",
@@ -73,8 +72,7 @@
       ]
     ],
     "plugins": [
-      "@babel/plugin-transform-runtime",
-      "add-module-exports"
+      "@babel/plugin-transform-runtime"
     ]
   },
   "lint-staged": {

src/asset_manager/index.js

@@ -30,12 +30,13 @@
  * @module AssetManager
  */
 
+import defaults from './config/config';
+import Assets from './model/Assets';
+import AssetsView from './view/AssetsView';
+import FileUpload from './view/FileUploader';
+
 export default () => {
   let c = {};
-  const defaults = require('./config/config');
-  const Assets = require('./model/Assets');
-  const AssetsView = require('./view/AssetsView');
-  const FileUpload = require('./view/FileUploader');
   let assets, am, fu;
 
   return {

src/asset_manager/model/Asset.js

@@ -1,4 +1,6 @@
-export default require('backbone').Model.extend({
+import Backbone from 'backbone';
+
+export default Backbone.Model.extend({
   idAttribute: 'src',
 
   defaults: {

src/asset_manager/model/AssetImage.js

@@ -1,4 +1,4 @@
-const Asset = require('./Asset');
+import Asset from './Asset';
 
 export default Asset.extend({
   defaults: {

src/asset_manager/model/Assets.js

@@ -1,22 +1,23 @@
+import Backbone from 'backbone';
+import AssetImage from './AssetImage';
+import AssetImageView from './../view/AssetImageView';
 import TypeableCollection from 'domain_abstract/model/TypeableCollection';
 
-export default require('backbone')
-  .Collection.extend(TypeableCollection)
-  .extend({
-    types: [
-      {
-        id: 'image',
-        model: require('./AssetImage'),
-        view: require('./../view/AssetImageView'),
-        isType(value) {
-          if (typeof value == 'string') {
-            return {
-              type: 'image',
-              src: value
-            };
-          }
-          return value;
+export default Backbone.Collection.extend(TypeableCollection).extend({
+  types: [
+    {
+      id: 'image',
+      model: AssetImage,
+      view: AssetImageView,
+      isType(value) {
+        if (typeof value == 'string') {
+          return {
+            type: 'image',
+            src: value
+          };
         }
+        return value;
       }
-    ]
-  });
+    }
+  ]
+});

src/asset_manager/view/AssetImageView.js

@@ -1,6 +1,7 @@
 import { isFunction } from 'underscore';
+import AssetView from './AssetView';
 
-export default require('./AssetView').extend({
+export default AssetView.extend({
   events: {
     'click [data-toggle=asset-remove]': 'onRemove',
     click: 'onClick',

src/asset_manager/view/AssetView.js

@@ -1,4 +1,5 @@
 import Backbone from 'backbone';
+import { clone } from 'underscore';
 
 export default Backbone.View.extend({
   initialize(o = {}) {
@@ -38,7 +39,7 @@ export default Backbone.View.extend({
    * */
   updateTarget(target) {
     if (target && target.set) {
-      target.set('attributes', _.clone(target.get('attributes')));
+      target.set('attributes', clone(target.get('attributes')));
       target.set('src', this.model.get('src'));
     }
   },

src/asset_manager/view/AssetsView.js

@@ -1,7 +1,4 @@
 import Backbone from 'backbone';
-var AssetView = require('./AssetView');
-var AssetImageView = require('./AssetImageView');
-var FileUploader = require('./FileUploader');
 
 export default Backbone.View.extend({
   events: {

src/asset_manager/view/FileUploader.js

@@ -1,10 +1,10 @@
-import _ from 'underscore';
+import { template } from 'underscore';
 import Backbone from 'backbone';
 import fetch from 'utils/fetch';
 
 export default Backbone.View.extend(
   {
-    template: _.template(`
+    template: template(`
   <form>
     <div id="<%= pfx %>title"><%= title %></div>
     <input type="file" id="<%= uploadId %>" name="file" accept="*/*" <%= disabled ? 'disabled' : '' %> <%= multiUpload ? 'multiple' : '' %>/>

src/block_manager/index.js

@@ -26,13 +26,13 @@
  * @module BlockManager
  */
 import { isElement } from 'underscore';
+import defaults from './config/config';
+import Blocks from './model/Blocks';
+import BlockCategories from './model/Categories';
+import BlocksView from './view/BlocksView';
 
 export default () => {
-  var c = {},
-    defaults = require('./config/config'),
-    Blocks = require('./model/Blocks'),
-    BlockCategories = require('./model/Categories'),
-    BlocksView = require('./view/BlocksView');
+  var c = {};
   var blocks, blocksVisible, blocksView;
   var categories = [];
 

src/block_manager/model/Block.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-var Category = require('./Category');
+import Category from './Category';
 
 export default Backbone.Model.extend({
   defaults: {

src/block_manager/model/Blocks.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-var Block = require('./Block');
+import Block from './Block';
 
 export default Backbone.Collection.extend({
   model: Block

src/block_manager/model/Categories.js

@@ -1,5 +1,6 @@
 import Backbone from 'backbone';
+import Category from './Category';
 
 export default Backbone.Collection.extend({
-  model: require('./Category')
+  model: Category
 });

src/block_manager/view/BlocksView.js

@@ -1,9 +1,9 @@
+import Backbone from 'backbone';
 import { isString, isObject, bindAll } from 'underscore';
+import BlockView from './BlockView';
+import CategoryView from './CategoryView';
 
-const BlockView = require('./BlockView');
-const CategoryView = require('./CategoryView');
-
-export default require('backbone').View.extend({
+export default Backbone.View.extend({
   initialize(opts, config) {
     bindAll(this, 'getSorter', 'onDrag', 'onDrop');
     this.config = config || {};

src/block_manager/view/CategoryView.js

@@ -1,8 +1,8 @@
-import _ from 'underscore';
+import { template } from 'underscore';
 import Backbone from 'backbone';
 
 export default Backbone.View.extend({
-  template: _.template(`
+  template: template(`
   <div class="<%= pfx %>title">
     <i class="<%= pfx %>caret-icon"></i>
     <%= label %>

src/canvas/index.js

@@ -32,16 +32,17 @@
 
 import { on, off, hasDnd, getElement, getPointerEvent } from 'utils/mixins';
 import Droppable from 'utils/Droppable';
+import defaults from './config/config';
+import Canvas from './model/Canvas';
+import canvasView from './view/CanvasView';
 
 const { requestAnimationFrame } = window;
 
 export default () => {
-  var c = {},
-    defaults = require('./config/config'),
-    Canvas = require('./model/Canvas'),
-    CanvasView = require('./view/CanvasView');
-  var canvas;
-  var frameRect;
+  let c = {};
+  let canvas;
+  let frameRect;
+  let CanvasView;
 
   return {
     /**
@@ -75,7 +76,7 @@ export default () => {
       if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;
 
       canvas = new Canvas(config);
-      CanvasView = new CanvasView({
+      CanvasView = new canvasView({
         model: canvas,
         config: c
       });

src/canvas/model/Canvas.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-var Frame = require('./Frame');
+import Frame from './Frame';
 
 export default Backbone.Model.extend({
   defaults: {

src/canvas/view/CanvasView.js

@@ -1,4 +1,5 @@
 import Backbone from 'backbone';
+import { bindAll } from 'underscore';
 import {
   on,
   off,
@@ -7,7 +8,8 @@ import {
   isTextNode,
   getElRect
 } from 'utils/mixins';
-const FrameView = require('./FrameView');
+import FrameView from './FrameView';
+
 const $ = Backbone.$;
 let timerZoom;
 
@@ -25,7 +27,7 @@ export default Backbone.View.extend({
   },
 
   initialize(o) {
-    _.bindAll(this, 'renderBody', 'onFrameScroll', 'clearOff', 'onKeyPress');
+    bindAll(this, 'renderBody', 'onFrameScroll', 'clearOff', 'onKeyPress');
     on(window, 'scroll resize', this.clearOff);
     const { model } = this;
     this.config = o.config || {};

src/canvas/view/FrameView.js

@@ -1,10 +1,11 @@
+import Backbone from 'backbone';
 import { bindAll } from 'underscore';
 import { appendVNodes, empty } from 'utils/dom';
 
 const motionsEv =
   'transitionend oTransitionEnd transitionend webkitTransitionEnd';
 
-export default require('backbone').View.extend({
+export default Backbone.View.extend({
   tagName: 'iframe',
 
   attributes: {

src/code_manager/index.js

@@ -18,17 +18,16 @@
  * @module CodeManager
  */
 import { isUndefined } from 'underscore';
+import defaults from './config/config';
+import gHtml from './model/HtmlGenerator';
+import gCss from './model/CssGenerator';
+import gJson from './model/JsonGenerator';
+import gJs from './model/JsGenerator';
+import eCM from './model/CodeMirrorEditor';
+import editorView from './view/EditorView';
 
 export default () => {
-  var c = {},
-    defaults = require('./config/config'),
-    gHtml = require('./model/HtmlGenerator'),
-    gCss = require('./model/CssGenerator'),
-    gJson = require('./model/JsonGenerator'),
-    gJs = require('./model/JsGenerator'),
-    eCM = require('./model/CodeMirrorEditor'),
-    editorView = require('./view/EditorView');
-
+  var c = {};
   var generators = {},
     defGenerators = {},
     viewers = {},

src/code_manager/model/CodeMirrorEditor.js

@@ -1,9 +1,9 @@
 import { bindAll } from 'underscore';
 import Backbone from 'backbone';
-var CodeMirror = require('codemirror/lib/codemirror');
-var htmlMode = require('codemirror/mode/htmlmixed/htmlmixed');
-var cssMode = require('codemirror/mode/css/css');
-var formatting = require('codemirror-formatting');
+import CodeMirror from 'codemirror/lib/codemirror';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/mode/css/css';
+import 'codemirror-formatting';
 
 export default Backbone.Model.extend({
   defaults: {

src/code_manager/model/CssGenerator.js

@@ -1,8 +1,9 @@
+import Backbone from 'backbone';
 import { isUndefined, each } from 'underscore';
 
 const maxValue = Number.MAX_VALUE;
 
-export default require('backbone').Model.extend({
+export default Backbone.Model.extend({
   initialize() {
     this.compCls = [];
     this.ids = [];

src/commands/index.js

@@ -179,7 +179,7 @@ export default () => {
       defaultCommands['core:redo'] = e => e.UndoManager.redo();
       commandsDef.forEach(item => {
         const oldCmd = item[2];
-        const cmd = require(`./view/${item[1]}`);
+        const cmd = require(`./view/${item[1]}`).default;
         const cmdName = `core:${item[0]}`;
         defaultCommands[cmdName] = cmd;
         if (oldCmd) {

src/commands/model/Commands.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-var Command = require('./Command');
+import Command from './Command';
 
 export default Backbone.Collection.extend({
   model: Command

src/commands/view/DeleteComponent.js

@@ -1,11 +1,12 @@
-import _ from 'underscore';
+import { extend, bindAll } from 'underscore';
 import Backbone from 'backbone';
-const SelectComponent = require('./SelectComponent');
+import SelectComponent from './SelectComponent';
+
 const $ = Backbone.$;
 
-export default _.extend({}, SelectComponent, {
+export default extend({}, SelectComponent, {
   init(o) {
-    _.bindAll(this, 'startDelete', 'stopDelete', 'onDelete');
+    bindAll(this, 'startDelete', 'stopDelete', 'onDelete');
     this.hoverClass = this.pfx + 'hover-delete';
     this.badgeClass = this.pfx + 'badge-red';
   },

src/commands/view/MoveComponent.js

@@ -1,15 +1,15 @@
-import _ from 'underscore';
+import { extend, bindAll } from 'underscore';
 import Backbone from 'backbone';
 import { on, off } from 'utils/mixins';
+import SelectComponent from './SelectComponent';
+import SelectPosition from './SelectPosition';
 
-const SelectComponent = require('./SelectComponent');
-const SelectPosition = require('./SelectPosition');
 const $ = Backbone.$;
 
-export default _.extend({}, SelectPosition, SelectComponent, {
+export default extend({}, SelectPosition, SelectComponent, {
   init(o) {
     SelectComponent.init.apply(this, arguments);
-    _.bindAll(this, 'initSorter', 'rollback', 'onEndMove');
+    bindAll(this, 'initSorter', 'rollback', 'onEndMove');
     this.opt = o;
     this.hoverClass = this.ppfx + 'highlighter-warning';
     this.badgeClass = this.ppfx + 'badge-warning';

src/commands/view/OpenLayers.js

@@ -1,5 +1,6 @@
 import Backbone from 'backbone';
-const Layers = require('navigator');
+import Layers from 'navigator';
+
 const $ = Backbone.$;
 
 export default {

src/commands/view/OpenStyleManager.js

@@ -1,5 +1,6 @@
 import Backbone from 'backbone';
-const StyleManager = require('style_manager');
+import StyleManager from 'style_manager';
+
 const $ = Backbone.$;
 
 export default {

src/commands/view/OpenTraitManager.js

@@ -1,4 +1,6 @@
-const $ = require('backbone').$;
+import Backbone from 'backbone';
+
+const $ = Backbone.$;
 
 export default {
   run(editor, sender) {

src/commands/view/SelectComponent.js

@@ -1,9 +1,10 @@
+import Backbone from 'backbone';
 import { bindAll, isElement, isUndefined } from 'underscore';
 import { on, off, getUnitFromValue, isTaggableNode } from 'utils/mixins';
+import ToolbarView from 'dom_components/view/ToolbarView';
+import Toolbar from 'dom_components/model/Toolbar';
 
-const ToolbarView = require('dom_components/view/ToolbarView');
-const Toolbar = require('dom_components/model/Toolbar');
-const $ = require('backbone').$;
+const $ = Backbone.$;
 let showOffsets;
 
 export default {

src/css_composer/index.js

@@ -28,17 +28,16 @@
  */
 
 import { isArray } from 'underscore';
+import defaults from './config/config';
+import CssRule from './model/CssRule';
+import CssRules from './model/CssRules';
+import CssRulesView from './view/CssRulesView';
+import Selectors from 'selector_manager/model/Selectors';
+import Selector from 'selector_manager/model/Selector';
 
 export default () => {
   let em;
-  var c = {},
-    defaults = require('./config/config'),
-    CssRule = require('./model/CssRule'),
-    CssRules = require('./model/CssRules'),
-    CssRulesView = require('./view/CssRulesView');
-  const Selectors = require('selector_manager/model/Selectors');
-  const Selector = require('selector_manager/model/Selector');
-
+  var c = {};
   var rules, rulesView;
 
   return {

src/css_composer/model/CssRule.js

@@ -1,9 +1,8 @@
-import _ from 'underscore';
+import { map } from 'underscore';
 import Backbone from 'backbone';
 import Styleable from 'domain_abstract/model/Styleable';
 import { isEmpty, forEach } from 'underscore';
-
-var Selectors = require('selector_manager/model/Selectors');
+import Selectors from 'selector_manager/model/Selectors';
 
 export default Backbone.Model.extend(Styleable).extend({
   defaults: {
@@ -161,8 +160,8 @@ export default Backbone.Model.extend(Styleable).extend({
     //var a2 = _.pluck(this.get('selectors').models, cId);
     if (!(selectors instanceof Array) && !selectors.models)
       selectors = [selectors];
-    var a1 = _.map(selectors.models || selectors, model => model.get('name'));
-    var a2 = _.map(this.get('selectors').models, model => model.get('name'));
+    var a1 = map(selectors.models || selectors, model => model.get('name'));
+    var a2 = map(this.get('selectors').models, model => model.get('name'));
     var f = false;
 
     if (a1.length !== a2.length) return f;

src/css_composer/model/CssRules.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-var CssRule = require('./CssRule');
+import CssRule from './CssRule';
 
 export default Backbone.Collection.extend({
   initialize(models, opt) {

src/css_composer/view/CssGroupRuleView.js

@@ -1,4 +1,6 @@
-export default require('./CssRuleView').extend({
+import CssRuleView from './CssRuleView';
+
+export default CssRuleView.extend({
   _createElement: function(tagName) {
     return document.createTextNode('');
   },

src/css_composer/view/CssRuleView.js

@@ -1,4 +1,6 @@
-export default require('backbone').View.extend({
+import Backbone from 'backbone';
+
+export default Backbone.View.extend({
   tagName: 'style',
 
   initialize(o = {}) {

src/css_composer/view/CssRulesView.js

@@ -1,6 +1,7 @@
 import Backbone from 'backbone';
-const CssRuleView = require('./CssRuleView');
-const CssGroupRuleView = require('./CssGroupRuleView');
+import CssRuleView from './CssRuleView';
+import CssGroupRuleView from './CssGroupRuleView';
+
 const $ = Backbone.$;
 
 const getBlockId = (pfx, order) =>

src/device_manager/index.js

@@ -20,12 +20,12 @@
  *
  * @module DeviceManager
  */
+import defaults from './config/config';
+import Devices from './model/Devices';
+import DevicesView from './view/DevicesView';
 
 export default () => {
-  var c = {},
-    defaults = require('./config/config'),
-    Devices = require('./model/Devices'),
-    DevicesView = require('./view/DevicesView');
+  var c = {};
   var devices, view;
 
   return {

src/device_manager/model/Device.js

@@ -1,4 +1,3 @@
-import { isUndefined } from 'underscore';
 import Backbone from 'backbone';
 
 export default Backbone.Model.extend({

src/device_manager/model/Devices.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-var Device = require('./Device');
+import Device from './Device';
 
 export default Backbone.Collection.extend({
   model: Device,

src/device_manager/view/DevicesView.js

@@ -1,8 +1,8 @@
-import _ from 'underscore';
+import { template } from 'underscore';
 import Backbone from 'backbone';
 
 export default Backbone.View.extend({
-  template: _.template(`
+  template: template(`
     <div class="<%= ppfx %>device-label"><%= deviceLabel %></div>
     <div class="<%= ppfx %>field <%= ppfx %>select">
       <span id="<%= ppfx %>input-holder">

src/dom_components/index.js

@@ -28,103 +28,136 @@
  * @module DomComponents
  */
 import Backbone from 'backbone';
-import { isEmpty, isString, isObject, isArray, result } from 'underscore';
+import { isEmpty, isObject, isArray, result } from 'underscore';
+import defaults from './config/config';
+import Component from './model/Component';
+import Components from './model/Components';
+import ComponentView from './view/ComponentView';
+import ComponentsView from './view/ComponentsView';
+import ComponentTableCell from './model/ComponentTableCell';
+import ComponentTableCellView from './view/ComponentTableCellView';
+import ComponentTableRow from './model/ComponentTableRow';
+import ComponentTableRowView from './view/ComponentTableRowView';
+import ComponentTable from './model/ComponentTable';
+import ComponentTableView from './view/ComponentTableView';
+import ComponentTableHead from './model/ComponentTableHead';
+import ComponentTableHeadView from './view/ComponentTableHeadView';
+import ComponentTableBody from './model/ComponentTableBody';
+import ComponentTableBodyView from './view/ComponentTableBodyView';
+import ComponentTableFoot from './model/ComponentTableFoot';
+import ComponentTableFootView from './view/ComponentTableFootView';
+import ComponentMap from './model/ComponentMap';
+import ComponentMapView from './view/ComponentMapView';
+import ComponentLink from './model/ComponentLink';
+import ComponentLinkView from './view/ComponentLinkView';
+import ComponentLabel from './model/ComponentLabel';
+import ComponentLabelView from './view/ComponentLabelView';
+import ComponentVideo from './model/ComponentVideo';
+import ComponentVideoView from './view/ComponentVideoView';
+import ComponentImage from './model/ComponentImage';
+import ComponentImageView from './view/ComponentImageView';
+import ComponentScript from './model/ComponentScript';
+import ComponentScriptView from './view/ComponentScriptView';
+import ComponentSvg from './model/ComponentSvg';
+import ComponentSvgView from './view/ComponentSvgView';
+import ComponentComment from './model/ComponentComment';
+import ComponentCommentView from './view/ComponentCommentView';
+import ComponentTextNode from './model/ComponentTextNode';
+import ComponentTextNodeView from './view/ComponentTextNodeView';
+import ComponentText from './model/ComponentText';
+import ComponentTextView from './view/ComponentTextView';
+import ComponentWrapper from './model/ComponentWrapper';
 
 export default () => {
   var c = {};
   let em;
-  const defaults = require('./config/config');
-  const Component = require('./model/Component');
-  const ComponentView = require('./view/ComponentView');
-  const Components = require('./model/Components');
-  const ComponentsView = require('./view/ComponentsView');
   const componentsById = {};
 
   var component, componentView;
   var componentTypes = [
     {
       id: 'cell',
-      model: require('./model/ComponentTableCell'),
-      view: require('./view/ComponentTableCellView')
+      model: ComponentTableCell,
+      view: ComponentTableCellView
     },
     {
       id: 'row',
-      model: require('./model/ComponentTableRow'),
-      view: require('./view/ComponentTableRowView')
+      model: ComponentTableRow,
+      view: ComponentTableRowView
     },
     {
       id: 'table',
-      model: require('./model/ComponentTable'),
-      view: require('./view/ComponentTableView')
+      model: ComponentTable,
+      view: ComponentTableView
     },
     {
       id: 'thead',
-      model: require('./model/ComponentTableHead'),
-      view: require('./view/ComponentTableHeadView')
+      model: ComponentTableHead,
+      view: ComponentTableHeadView
     },
     {
       id: 'tbody',
-      model: require('./model/ComponentTableBody'),
-      view: require('./view/ComponentTableBodyView')
+      model: ComponentTableBody,
+      view: ComponentTableBodyView
     },
     {
       id: 'tfoot',
-      model: require('./model/ComponentTableFoot'),
-      view: require('./view/ComponentTableFootView')
+      model: ComponentTableFoot,
+      view: ComponentTableFootView
     },
     {
       id: 'map',
-      model: require('./model/ComponentMap'),
-      view: require('./view/ComponentMapView')
+      model: ComponentMap,
+      view: ComponentMapView
     },
     {
       id: 'link',
-      model: require('./model/ComponentLink'),
-      view: require('./view/ComponentLinkView')
+      model: ComponentLink,
+      view: ComponentLinkView
     },
     {
       id: 'label',
-      model: require('./model/ComponentLabel'),
-      view: require('./view/ComponentLabelView')
+      model: ComponentLabel,
+      view: ComponentLabelView
     },
     {
       id: 'video',
-      model: require('./model/ComponentVideo'),
-      view: require('./view/ComponentVideoView')
+      model: ComponentVideo,
+      view: ComponentVideoView
     },
     {
       id: 'image',
-      model: require('./model/ComponentImage'),
-      view: require('./view/ComponentImageView')
+      model: ComponentImage,
+      view: ComponentImageView
     },
     {
       id: 'script',
-      model: require('./model/ComponentScript'),
-      view: require('./view/ComponentScriptView')
+      model: ComponentScript,
+      view: ComponentScriptView
     },
     {
       id: 'svg',
-      model: require('./model/ComponentSvg'),
-      view: require('./view/ComponentSvgView')
+      model: ComponentSvg,
+      view: ComponentSvgView
     },
     {
       id: 'comment',
-      model: require('./model/ComponentComment'),
-      view: require('./view/ComponentCommentView')
+      model: ComponentComment,
+      view: ComponentCommentView
     },
     {
       id: 'textnode',
-      model: require('./model/ComponentTextNode'),
-      view: require('./view/ComponentTextNodeView')
+      model: ComponentTextNode,
+      view: ComponentTextNodeView
     },
     {
       id: 'text',
-      model: require('./model/ComponentText'),
-      view: require('./view/ComponentTextView')
+      model: ComponentText,
+      view: ComponentTextView
     },
     {
       id: 'wrapper',
-      model: require('./model/ComponentWrapper'),
+      model: ComponentWrapper,
       view: ComponentView
     },
     {

src/dom_components/model/Component.js

@@ -6,20 +6,19 @@ import {
   isEmpty,
   isBoolean,
   has,
-  clone,
   isString,
   forEach,
   result,
   keys
 } from 'underscore';
-import { shallowDiff, hasDnd } from 'utils/mixins';
+import { shallowDiff } from 'utils/mixins';
 import Styleable from 'domain_abstract/model/Styleable';
+import Backbone from 'backbone';
+import Components from './Components';
+import Selector from 'selector_manager/model/Selector';
+import Selectors from 'selector_manager/model/Selectors';
+import Traits from 'trait_manager/model/Traits';
 
-const Backbone = require('backbone');
-const Components = require('./Components');
-const Selector = require('selector_manager/model/Selector');
-const Selectors = require('selector_manager/model/Selectors');
-const Traits = require('trait_manager/model/Traits');
 const componentList = {};
 let componentIndex = 0;
 

src/dom_components/model/ComponentComment.js

@@ -1,4 +1,4 @@
-const Component = require('./ComponentTextNode');
+import Component from './ComponentTextNode';
 
 export default Component.extend(
   {

src/dom_components/model/ComponentImage.js

@@ -1,5 +1,6 @@
 import { result } from 'underscore';
-const Component = require('./Component');
+import Component from './Component';
+
 const svgAttrs =
   'xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 24 24" style="fill: rgba(0,0,0,0.15); transform: scale(0.75)"';
 

src/dom_components/model/ComponentLabel.js

@@ -1,4 +1,4 @@
-const Component = require('./ComponentText');
+import Component from './ComponentText';
 
 export default Component.extend(
   {

src/dom_components/model/ComponentLink.js

@@ -1,4 +1,4 @@
-const Component = require('./ComponentText');
+import Component from './ComponentText';
 
 export default Component.extend(
   {

src/dom_components/model/ComponentMap.js

@@ -1,5 +1,5 @@
-const Component = require('./ComponentImage');
-const OComponent = require('./Component');
+import Component from './ComponentImage';
+import OComponent from './Component';
 
 export default Component.extend(
   {

src/dom_components/model/ComponentScript.js

@@ -1,4 +1,4 @@
-const Component = require('./Component');
+import Component from './Component';
 
 export default Component.extend(
   {

src/dom_components/model/ComponentSvg.js

@@ -1,4 +1,4 @@
-const Component = require('./Component');
+import Component from './Component';
 
 export default Component.extend(
   {

src/dom_components/model/ComponentTable.js

@@ -1,4 +1,4 @@
-const Component = require('./Component');
+import Component from './Component';
 
 export default Component.extend(
   {

src/dom_components/model/ComponentTableBody.js

@@ -1,4 +1,4 @@
-const Component = require('./Component');
+import Component from './Component';
 
 export default Component.extend(
   {

src/dom_components/model/ComponentTableCell.js

@@ -1,4 +1,4 @@
-const Component = require('./Component');
+import Component from './Component';
 
 export default Component.extend(
   {

src/dom_components/model/ComponentTableFoot.js

@@ -1,4 +1,4 @@
-const ComponentTableBody = require('./ComponentTableBody');
+import ComponentTableBody from './ComponentTableBody';
 
 export default ComponentTableBody.extend(
   {

src/dom_components/model/ComponentTableHead.js

@@ -1,4 +1,4 @@
-const ComponentTableBody = require('./ComponentTableBody');
+import ComponentTableBody from './ComponentTableBody';
 
 export default ComponentTableBody.extend(
   {

src/dom_components/model/ComponentTableRow.js

@@ -1,4 +1,4 @@
-const Component = require('./Component');
+import Component from './Component';
 
 export default Component.extend(
   {

src/dom_components/model/ComponentText.js

@@ -1,4 +1,4 @@
-const Component = require('./Component');
+import Component from './Component';
 
 export default Component.extend({
   defaults: {

src/dom_components/model/ComponentTextNode.js

@@ -1,4 +1,4 @@
-const Component = require('./Component');
+import Component from './Component';
 
 export default Component.extend(
   {

src/dom_components/model/ComponentVideo.js

@@ -1,5 +1,6 @@
-const Component = require('./ComponentImage');
-const OComponent = require('./Component');
+import Component from './ComponentImage';
+import OComponent from './Component';
+
 const yt = 'yt';
 const vi = 'vi';
 const ytnc = 'ytnc';

src/dom_components/model/ComponentWrapper.js

@@ -1,5 +1,7 @@
 // We need this one just to identify better the wrapper type
-export default require('./Component').extend(
+import Component from './Component';
+
+export default Component.extend(
   {},
   {
     isComponent() {

src/dom_components/model/Components.js

@@ -1,6 +1,6 @@
+import Backbone from 'backbone';
 import { isEmpty, isArray, isString } from 'underscore';
 
-const Backbone = require('backbone');
 let Component;
 
 export default Backbone.Collection.extend({
@@ -47,7 +47,7 @@ export default Backbone.Collection.extend({
     const cssc = em.get('CssComposer');
     const parsed = em.get('Parser').parseHtml(value);
     // We need this to avoid duplicate IDs
-    if (!Component) Component = require('./Component');
+    if (!Component) Component = require('./Component').default;
     Component.checkId(parsed.html, parsed.css, this.opt.domc.componentsById);
 
     if (parsed.css && cssc && !opt.temporary) {

src/dom_components/model/Toolbar.js

@@ -1,4 +1,4 @@
-const Backbone = require('backbone');
-const ToolbarButton = require('./ToolbarButton');
+import Backbone from 'backbone';
+import ToolbarButton from './ToolbarButton';
 
 export default Backbone.Collection.extend({ model: ToolbarButton });

src/dom_components/model/ToolbarButton.js

@@ -1,4 +1,4 @@
-const Backbone = require('backbone');
+import Backbone from 'backbone';
 
 export default Backbone.Model.extend({
   defaults: {

src/dom_components/view/ComponentCommentView.js

@@ -1,4 +1,4 @@
-const ComponentView = require('./ComponentTextNodeView');
+import ComponentView from './ComponentTextNodeView';
 
 export default ComponentView.extend({
   _createElement() {

src/dom_components/view/ComponentImageView.js

@@ -1,5 +1,5 @@
 import { isString } from 'underscore';
-const ComponentView = require('./ComponentView');
+import ComponentView from './ComponentView';
 
 export default ComponentView.extend({
   tagName: 'img',

src/dom_components/view/ComponentLabelView.js

@@ -1 +1,3 @@
-export default require('./ComponentLinkView').extend({});
+import ComponentLinkView from './ComponentLinkView';
+
+export default ComponentLinkView.extend({});

src/dom_components/view/ComponentLinkView.js

@@ -1,4 +1,4 @@
-const ComponentView = require('./ComponentTextView');
+import ComponentView from './ComponentTextView';
 
 export default ComponentView.extend({
   render(...args) {

src/dom_components/view/ComponentMapView.js

@@ -1,5 +1,5 @@
-var Backbone = require('backbone');
-var ComponentView = require('./ComponentImageView');
+import Backbone from 'backbone';
+import ComponentView from './ComponentImageView';
 
 export default ComponentView.extend({
   tagName: 'div',

src/dom_components/view/ComponentScriptView.js

@@ -1,5 +1,5 @@
-var Backbone = require('backbone');
-var ComponentView = require('./ComponentImageView');
+import Backbone from 'backbone';
+import ComponentView from './ComponentImageView';
 
 export default ComponentView.extend({
   tagName: 'script',

src/dom_components/view/ComponentSvgView.js

@@ -1,4 +1,4 @@
-const ComponentView = require('./ComponentView');
+import ComponentView from './ComponentView';
 
 export default ComponentView.extend({
   _createElement: function(tagName) {

src/dom_components/view/ComponentTableBodyView.js

@@ -1 +1,3 @@
-export default require('./ComponentView').extend({});
+import ComponentView from './ComponentView';
+
+export default ComponentView.extend({});

src/dom_components/view/ComponentTableCellView.js

@@ -1 +1,3 @@
-export default require('./ComponentView').extend({});
+import ComponentView from './ComponentView';
+
+export default ComponentView.extend({});

src/dom_components/view/ComponentTableFootView.js

@@ -1 +1,3 @@
-export default require('./ComponentView').extend({});
+import ComponentView from './ComponentView';
+
+export default ComponentView.extend({});

src/dom_components/view/ComponentTableHeadView.js

@@ -1 +1,3 @@
-export default require('./ComponentView').extend({});
+import ComponentView from './ComponentView';
+
+export default ComponentView.extend({});

src/dom_components/view/ComponentTableRowView.js

@@ -1 +1,3 @@
-export default require('./ComponentView').extend({});
+import ComponentView from './ComponentView';
+
+export default ComponentView.extend({});

src/dom_components/view/ComponentTableView.js

@@ -1,3 +1,5 @@
-export default require('./ComponentView').extend({
+import ComponentView from './ComponentView';
+
+export default ComponentView.extend({
   events: {}
 });

src/dom_components/view/ComponentTextNodeView.js

@@ -1,4 +1,6 @@
-export default require('backbone').View.extend({
+import Backbone from 'backbone';
+
+export default Backbone.View.extend({
   initialize() {
     const { $el, model } = this;
     $el.data('model', model);

src/dom_components/view/ComponentTextView.js

@@ -1,6 +1,5 @@
 import { on, off } from 'utils/mixins';
-
-const ComponentView = require('./ComponentView');
+import ComponentView from './ComponentView';
 
 export default ComponentView.extend({
   events: {

src/dom_components/view/ComponentVideoView.js

@@ -1,6 +1,5 @@
-var Backbone = require('backbone');
-var ComponentView = require('./ComponentImageView');
-var OComponentView = require('./ComponentView');
+import ComponentView from './ComponentImageView';
+import OComponentView from './ComponentView';
 
 export default ComponentView.extend({
   tagName: 'div',

src/dom_components/view/ComponentView.js

@@ -1,9 +1,8 @@
 import Backbone from 'backbone';
 import { isArray, isEmpty, each, keys } from 'underscore';
-
-const Components = require('../model/Components');
-const ComponentsView = require('./ComponentsView');
-const Selectors = require('selector_manager/model/Selectors');
+import Components from '../model/Components';
+import ComponentsView from './ComponentsView';
+import Selectors from 'selector_manager/model/Selectors';
 
 export default Backbone.View.extend({
   className() {

src/dom_components/view/ComponentsView.js

@@ -79,7 +79,7 @@ export default Backbone.View.extend({
    * @private
    * */
   addToCollection(model, fragmentEl, index) {
-    if (!this.compView) this.compView = require('./ComponentView');
+    if (!this.compView) this.compView = require('./ComponentView').default;
     const { config, opts } = this;
     const fragment = fragmentEl || null;
     const dt = opts.componentTypes;

src/dom_components/view/ToolbarButtonView.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 
 export default Backbone.View.extend({
   events() {

src/dom_components/view/ToolbarView.js

@@ -1,5 +1,5 @@
-const DomainViews = require('domain_abstract/view/DomainViews');
-const ToolbarButtonView = require('./ToolbarButtonView');
+import DomainViews from 'domain_abstract/view/DomainViews';
+import ToolbarButtonView from './ToolbarButtonView';
 
 export default DomainViews.extend({
   itemView: ToolbarButtonView,

src/domain_abstract/model/Styleable.js

@@ -1,8 +1,9 @@
 import { isString, isArray, keys } from 'underscore';
 import { shallowDiff } from 'utils/mixins';
+import ParserHtml from 'parser/model/ParserHtml';
 
-const ParserHtml = require('parser/model/ParserHtml');
 const parseStyle = ParserHtml().parseStyle;
+
 export default {
   parseStyle,
 

src/domain_abstract/model/TypeableCollection.js

@@ -1,4 +1,6 @@
 import { isFunction } from 'underscore';
+import Backbone from 'backbone';
+
 const Model = Backbone.Model;
 const View = Backbone.View;
 

src/domain_abstract/ui/Input.js

@@ -1,4 +1,5 @@
-const Backbone = require('backbone');
+import Backbone from 'backbone';
+
 const $ = Backbone.$;
 
 export default Backbone.View.extend({

src/domain_abstract/ui/InputColor.js

@@ -1,8 +1,8 @@
 import Backbone from 'backbone';
 import { isUndefined } from 'underscore';
 import ColorPicker from 'utils/ColorPicker';
+import Input from './Input';
 
-const Input = require('./Input');
 const $ = Backbone.$;
 ColorPicker($);
 

src/domain_abstract/ui/InputNumber.js

@@ -1,7 +1,8 @@
-import { bindAll, isUndefined } from 'underscore';
+import Backbone from 'backbone';
+import { bindAll, isUndefined, indexOf } from 'underscore';
 import { on, off } from 'utils/mixins';
-const Input = require('./Input');
-const Backbone = require('backbone');
+import Input from './Input';
+
 const $ = Backbone.$;
 
 export default Input.extend({
@@ -252,7 +253,7 @@ export default Input.extend({
           val = !isNaN(val) ? val : defValue;
           var uN = valCopy.replace(val, '');
           // Check if exists as unit
-          if (_.indexOf(units, uN) >= 0) unit = uN;
+          if (indexOf(units, uN) >= 0) unit = uN;
         }
       }
     }

src/domain_abstract/view/DomainViews.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 
 export default Backbone.View.extend({
   // Default view

src/editor/index.js

@@ -99,11 +99,11 @@
  * @module Editor
  */
 import $ from 'cash-dom';
+import defaults from './config/config';
+import EditorModel from './model/Editor';
+import EditorView from './view/EditorView';
 
 export default (config = {}) => {
-  const defaults = require('./config/config');
-  const EditorModel = require('./model/Editor');
-  const EditorView = require('./view/EditorView');
   const c = {
     ...defaults,
     ...config

src/editor/model/Editor.js

@@ -1,11 +1,6 @@
-import {
-  isUndefined,
-  defaults,
-  isArray,
-  contains,
-  toArray,
-  keys
-} from 'underscore';
+import { isUndefined, isArray, contains, toArray, keys } from 'underscore';
+import Backbone from 'backbone';
+import Extender from 'utils/extender';
 import { getModel } from 'utils/mixins';
 
 const deps = [
@@ -31,12 +26,11 @@ const deps = [
   require('block_manager')
 ];
 
-const Backbone = require('backbone');
 const { Collection } = Backbone;
 let timedInterval;
 let updateItr;
 
-require('utils/extender')({
+Extender({
   Backbone: Backbone,
   $: Backbone.$
 });
@@ -181,7 +175,8 @@ export default Backbone.Model.extend({
    */
   loadModule(moduleName) {
     const { config } = this;
-    const Mod = new moduleName();
+    const Module = moduleName.default || moduleName;
+    const Mod = new Module();
     const name = Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1);
     const cfgParent = !isUndefined(config[name])
       ? config[name]

src/editor/view/EditorView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const $ = Backbone.$;
 
 export default Backbone.View.extend({

src/keymaps/index.js

@@ -32,8 +32,7 @@
  */
 
 import { isString } from 'underscore';
-
-const keymaster = require('keymaster');
+import keymaster from 'keymaster';
 
 export default () => {
   let em;

src/modal_dialog/index.js

@@ -27,11 +27,12 @@
  * @module Modal
  */
 
+import defaults from './config/config';
+import ModalM from './model/Modal';
+import ModalView from './view/ModalView';
+
 export default () => {
-  var c = {},
-    defaults = require('./config/config'),
-    ModalM = require('./model/Modal'),
-    ModalView = require('./view/ModalView');
+  var c = {};
   var model, modal;
 
   const triggerEvent = (enable, em) => {

src/modal_dialog/model/Modal.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 
 export default Backbone.Model.extend({
   defaults: {

src/modal_dialog/view/ModalView.js

@@ -1,4 +1,6 @@
-export default require('backbone').View.extend({
+import Backbone from 'backbone';
+
+export default Backbone.View.extend({
   template({ pfx, ppfx, content, title }) {
     return `<div class="${pfx}dialog ${ppfx}one-bg ${ppfx}two-color">
       <div class="${pfx}header">

src/navigator/view/ItemView.js

@@ -1,7 +1,8 @@
 import { isUndefined, isString } from 'underscore';
 import { getModel } from 'utils/mixins';
 import Backbone from 'backbone';
-const ComponentView = require('dom_components/view/ComponentView');
+import ComponentView from 'dom_components/view/ComponentView';
+
 const inputProp = 'contentEditable';
 const $ = Backbone.$;
 let ItemsView;
@@ -363,7 +364,7 @@ export default Backbone.View.extend({
     const level = this.level + 1;
 
     if (isUndefined(ItemsView)) {
-      ItemsView = require('./ItemsView');
+      ItemsView = require('./ItemsView').default;
     }
 
     const children = new ItemsView({

src/navigator/view/ItemsView.js

@@ -1,6 +1,7 @@
+import Backbone from 'backbone';
 import ItemView from './ItemView';
 
-export default require('backbone').View.extend({
+export default Backbone.View.extend({
   initialize(o = {}) {
     this.opt = o;
     const config = o.config || {};

src/panels/index.js

@@ -25,14 +25,14 @@
  *
  * @module Panels
  */
+import defaults from './config/config';
+import Panel from './model/Panel';
+import Panels from './model/Panels';
+import PanelView from './view/PanelView';
+import PanelsView from './view/PanelsView';
 
 export default () => {
-  var c = {},
-    defaults = require('./config/config'),
-    Panel = require('./model/Panel'),
-    Panels = require('./model/Panels'),
-    PanelView = require('./view/PanelView'),
-    PanelsView = require('./view/PanelsView');
+  var c = {};
   var panels, PanelsViewObj;
 
   return {

src/panels/model/Button.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 
 export default Backbone.Model.extend({
   defaults: {
@@ -21,7 +21,7 @@ export default Backbone.Model.extend({
 
   initialize(options) {
     if (this.get('buttons').length) {
-      var Buttons = require('./Buttons');
+      var Buttons = require('./Buttons').default;
       this.set('buttons', new Buttons(this.get('buttons')));
     }
   }