Remove old exports

package.json

@@ -29,6 +29,7 @@
     "@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",
@@ -72,7 +73,8 @@
       ]
     ],
     "plugins": [
-      "@babel/plugin-transform-runtime"
+      "@babel/plugin-transform-runtime",
+      "add-module-exports"
     ]
   },
   "lint-staged": {

src/asset_manager/config/config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   // Default assets
   // eg. [
   //  'https://...image1.png',

src/asset_manager/index.js

@@ -30,7 +30,7 @@
  * @module AssetManager
  */
 
-module.exports = () => {
+export default () => {
   let c = {};
   const defaults = require('./config/config');
   const Assets = require('./model/Assets');

src/asset_manager/model/Asset.js

@@ -1,4 +1,4 @@
-module.exports = require('backbone').Model.extend({
+export default require('backbone').Model.extend({
   idAttribute: 'src',
 
   defaults: {

src/asset_manager/model/AssetImage.js

@@ -1,11 +1,11 @@
 const Asset = require('./Asset');
 
-module.exports = Asset.extend({
+export default Asset.extend({
   defaults: {
     ...Asset.prototype.defaults,
     type: 'image',
     unitDim: 'px',
     height: 0,
     width: 0
-  },
+  }
 });

src/asset_manager/model/Assets.js

@@ -1,6 +1,6 @@
 import TypeableCollection from 'domain_abstract/model/TypeableCollection';
 
-module.exports = require('backbone')
+export default require('backbone')
   .Collection.extend(TypeableCollection)
   .extend({
     types: [

src/asset_manager/view/AssetImageView.js

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

src/asset_manager/view/AssetView.js

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
 
-module.exports = Backbone.View.extend({
+export default Backbone.View.extend({
   initialize(o = {}) {
     this.options = o;
     this.collection = o.collection;

src/asset_manager/view/AssetsView.js

@@ -3,7 +3,7 @@ var AssetView = require('./AssetView');
 var AssetImageView = require('./AssetImageView');
 var FileUploader = require('./FileUploader');
 
-module.exports = Backbone.View.extend({
+export default Backbone.View.extend({
   events: {
     submit: 'handleSubmit'
   },

src/asset_manager/view/FileUploader.js

@@ -2,7 +2,7 @@ import _ from 'underscore';
 import Backbone from 'backbone';
 import fetch from 'utils/fetch';
 
-module.exports = Backbone.View.extend(
+export default Backbone.View.extend(
   {
     template: _.template(`
   <form>

src/block_manager/config/config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   // Specify the element to use as a container, string (query) or HTMLElement
   // With the empty value, nothing will be rendered
   appendTo: '',

src/block_manager/index.js

@@ -27,7 +27,7 @@
  */
 import { isElement } from 'underscore';
 
-module.exports = () => {
+export default () => {
   var c = {},
     defaults = require('./config/config'),
     Blocks = require('./model/Blocks'),

src/block_manager/model/Block.js

@@ -1,7 +1,7 @@
 import Backbone from 'backbone';
 var Category = require('./Category');
 
-module.exports = Backbone.Model.extend({
+export default Backbone.Model.extend({
   defaults: {
     // If true, triggers an 'active' event on dropped component
     activate: 0,

src/block_manager/model/Blocks.js

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

src/block_manager/model/Categories.js

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

src/block_manager/model/Category.js

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
 
-module.exports = Backbone.Model.extend({
+export default Backbone.Model.extend({
   defaults: {
     id: '',
     label: '',

src/block_manager/view/BlockView.js

@@ -2,7 +2,7 @@ import Backbone from 'backbone';
 import { isObject } from 'underscore';
 import { on, off, hasDnd } from 'utils/mixins';
 
-module.exports = Backbone.View.extend({
+export default Backbone.View.extend({
   events: {
     click: 'handleClick',
     mousedown: 'startDrag',

src/block_manager/view/BlocksView.js

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

src/block_manager/view/CategoryView.js

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

src/canvas/config/config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   stylePrefix: 'cv-',
 
   /*

src/canvas/index.js

@@ -35,7 +35,7 @@ import Droppable from 'utils/Droppable';
 
 const { requestAnimationFrame } = window;
 
-module.exports = () => {
+export default () => {
   var c = {},
     defaults = require('./config/config'),
     Canvas = require('./model/Canvas'),

src/canvas/model/Canvas.js

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

src/canvas/model/Frame.js

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
 
-module.exports = Backbone.Model.extend({
+export default Backbone.Model.extend({
   defaults: {
     wrapper: '',
     width: '',

src/canvas/view/CanvasView.js

@@ -11,7 +11,7 @@ const FrameView = require('./FrameView');
 const $ = Backbone.$;
 let timerZoom;
 
-module.exports = Backbone.View.extend({
+export default Backbone.View.extend({
   events: {
     wheel: 'onWheel'
   },

src/canvas/view/FrameView.js

@@ -4,7 +4,7 @@ import { appendVNodes, empty } from 'utils/dom';
 const motionsEv =
   'transitionend oTransitionEnd transitionend webkitTransitionEnd';
 
-module.exports = require('backbone').View.extend({
+export default require('backbone').View.extend({
   tagName: 'iframe',
 
   attributes: {

src/code_manager/config/config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   // Style prefix
   stylePrefix: 'cm-',
 

src/code_manager/index.js

@@ -19,7 +19,7 @@
  */
 import { isUndefined } from 'underscore';
 
-module.exports = () => {
+export default () => {
   var c = {},
     defaults = require('./config/config'),
     gHtml = require('./model/HtmlGenerator'),

src/code_manager/model/CodeMirrorEditor.js

@@ -5,7 +5,7 @@ var htmlMode = require('codemirror/mode/htmlmixed/htmlmixed');
 var cssMode = require('codemirror/mode/css/css');
 var formatting = require('codemirror-formatting');
 
-module.exports = Backbone.Model.extend({
+export default Backbone.Model.extend({
   defaults: {
     input: '',
     label: '',

src/code_manager/model/CssGenerator.js

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

src/code_manager/model/HtmlGenerator.js

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
 
-module.exports = Backbone.Model.extend({
+export default Backbone.Model.extend({
   build(model, opts = {}) {
     const models = model.get('components');
 

src/code_manager/model/JsGenerator.js

@@ -1,7 +1,7 @@
 import { extend } from 'underscore';
 import Backbone from 'backbone';
 
-module.exports = Backbone.Model.extend({
+export default Backbone.Model.extend({
   mapModel(model) {
     var code = '';
     var script = model.get('script');

src/code_manager/model/JsonGenerator.js

@@ -1,7 +1,7 @@
 import { each } from 'underscore';
 import Backbone from 'backbone';
 
-module.exports = Backbone.Model.extend({
+export default Backbone.Model.extend({
   /** @inheritdoc */
   build(model) {
     var json = model.toJSON();

src/code_manager/view/EditorView.js

@@ -1,7 +1,7 @@
 import { template } from 'underscore';
 import Backbone from 'backbone';
 
-module.exports = Backbone.View.extend({
+export default Backbone.View.extend({
   template: template(`
   <div class="<%= pfx %>editor" id="<%= pfx %><%= codeName %>">
   	<div id="<%= pfx %>title"><%= label %></div>

src/commands/index.js

@@ -31,7 +31,7 @@ import { isFunction, includes } from 'underscore';
 import CommandAbstract from './view/CommandAbstract';
 import defaults from './config/config';
 
-module.exports = () => {
+export default () => {
   let em;
   let c = {};
   const commands = {};

src/commands/model/Command.js

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
 
-module.exports = Backbone.Model.extend({
+export default Backbone.Model.extend({
   defaults: {
     id: ''
   }

src/commands/model/Commands.js

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

src/commands/view/CanvasClear.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   run(ed) {
     ed.DomComponents.clear();
     ed.CssComposer.clear();

src/commands/view/CanvasMove.js

@@ -2,7 +2,7 @@ import { bindAll } from 'underscore';
 import { on, off, getKeyChar } from 'utils/mixins';
 import Dragger from 'utils/Dragger';
 
-module.exports = {
+export default {
   run(ed) {
     bindAll(this, 'onKeyUp', 'enableDragger', 'disableDragger');
     this.editor = ed;

src/commands/view/ComponentDelete.js

@@ -1,6 +1,6 @@
 import { isArray } from 'underscore';
 
-module.exports = {
+export default {
   run(ed, sender, opts = {}) {
     let components = opts.component || ed.getSelectedAll();
     components = isArray(components) ? [...components] : [components];

src/commands/view/ComponentDrag.js

@@ -1,7 +1,7 @@
 import { keys, bindAll, each, isUndefined } from 'underscore';
 import Dragger from 'utils/Dragger';
 
-module.exports = {
+export default {
   run(editor, sender, opts = {}) {
     bindAll(
       this,

src/commands/view/ComponentEnter.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   run(ed) {
     if (!ed.Canvas.hasFocus()) return;
     const toSelect = [];

src/commands/view/ComponentExit.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   run(ed, snd, opts = {}) {
     if (!ed.Canvas.hasFocus() && !opts.force) return;
     const toSelect = [];

src/commands/view/ComponentNext.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   run(ed) {
     if (!ed.Canvas.hasFocus()) return;
     const toSelect = [];

src/commands/view/ComponentPrev.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   run(ed) {
     if (!ed.Canvas.hasFocus()) return;
     const toSelect = [];

src/commands/view/ComponentStyleClear.js

@@ -1,6 +1,6 @@
 import { isArray } from 'underscore';
 
-module.exports = {
+export default {
   run(ed, sender, opts = {}) {
     const { target } = opts;
     const dc = ed.DomComponents;

src/commands/view/CopyComponent.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   run(ed) {
     const em = ed.getModel();
     const models = [...ed.getSelectedAll()];

src/commands/view/DeleteComponent.js

@@ -3,7 +3,7 @@ import Backbone from 'backbone';
 const SelectComponent = require('./SelectComponent');
 const $ = Backbone.$;
 
-module.exports = _.extend({}, SelectComponent, {
+export default _.extend({}, SelectComponent, {
   init(o) {
     _.bindAll(this, 'startDelete', 'stopDelete', 'onDelete');
     this.hoverClass = this.pfx + 'hover-delete';

src/commands/view/ExportTemplate.js

@@ -1,7 +1,7 @@
 import Backbone from 'backbone';
 const $ = Backbone.$;
 
-module.exports = {
+export default {
   run(editor, sender, opts = {}) {
     sender && sender.set && sender.set('active', 0);
     const config = editor.getConfig();

src/commands/view/Fullscreen.js

@@ -1,6 +1,6 @@
 import { isElement } from 'underscore';
 
-module.exports = {
+export default {
   /**
    * Check if fullscreen mode is enabled
    * @return {Boolean}

src/commands/view/MoveComponent.js

@@ -6,7 +6,7 @@ const SelectComponent = require('./SelectComponent');
 const SelectPosition = require('./SelectPosition');
 const $ = Backbone.$;
 
-module.exports = _.extend({}, SelectPosition, SelectComponent, {
+export default _.extend({}, SelectPosition, SelectComponent, {
   init(o) {
     SelectComponent.init.apply(this, arguments);
     _.bindAll(this, 'initSorter', 'rollback', 'onEndMove');

src/commands/view/OpenAssets.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   run(editor, sender, opts = {}) {
     const modal = editor.Modal;
     const am = editor.AssetManager;

src/commands/view/OpenBlocks.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   run(editor, sender) {
     const bm = editor.BlockManager;
     const pn = editor.Panels;

src/commands/view/OpenLayers.js

@@ -2,7 +2,7 @@ import Backbone from 'backbone';
 const Layers = require('navigator');
 const $ = Backbone.$;
 
-module.exports = {
+export default {
   run(editor) {
     const lm = editor.LayerManager;
     const pn = editor.Panels;

src/commands/view/OpenStyleManager.js

@@ -2,7 +2,7 @@ import Backbone from 'backbone';
 const StyleManager = require('style_manager');
 const $ = Backbone.$;
 
-module.exports = {
+export default {
   run(em, sender) {
     this.sender = sender;
     if (!this.$cn) {

src/commands/view/OpenTraitManager.js

@@ -1,6 +1,6 @@
 const $ = require('backbone').$;
 
-module.exports = {
+export default {
   run(editor, sender) {
     this.sender = sender;
 

src/commands/view/PasteComponent.js

@@ -1,6 +1,6 @@
 import { isArray, contains } from 'underscore';
 
-module.exports = {
+export default {
   run(ed) {
     const em = ed.getModel();
     const clp = em.get('clipboard');

src/commands/view/Preview.js

@@ -1,6 +1,6 @@
 import { each } from 'underscore';
 
-module.exports = {
+export default {
   getPanels(editor) {
     if (!this.panels) {
       this.panels = editor.Panels.getPanelsEl();

src/commands/view/Resize.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   run(editor, sender, opts) {
     var opt = opts || {};
     var el = opt.el || '';

src/commands/view/SelectComponent.js

@@ -6,7 +6,7 @@ const Toolbar = require('dom_components/model/Toolbar');
 const $ = require('backbone').$;
 let showOffsets;
 
-module.exports = {
+export default {
   init(o) {
     bindAll(this, 'onHover', 'onOut', 'onClick', 'onFrameScroll');
   },

src/commands/view/SelectPosition.js

@@ -1,7 +1,7 @@
 import Backbone from 'backbone';
 const $ = Backbone.$;
 
-module.exports = {
+export default {
   /**
    * Start select position event
    * @param {HTMLElement} trg

src/commands/view/ShowOffset.js

@@ -2,7 +2,7 @@ import Backbone from 'backbone';
 import { isTextNode } from 'utils/mixins';
 const $ = Backbone.$;
 
-module.exports = {
+export default {
   getOffsetMethod(state) {
     var method = state || '';
     return 'get' + method + 'OffsetViewerEl';

src/commands/view/SwitchVisibility.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   run(ed) {
     ed.Canvas.getBody().className = this.ppfx + 'dashed';
   },

src/css_composer/config/config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   // Style prefix
   stylePrefix: 'css-',
 

src/css_composer/index.js

@@ -29,7 +29,7 @@
 
 import { isArray } from 'underscore';
 
-module.exports = () => {
+export default () => {
   let em;
   var c = {},
     defaults = require('./config/config'),

src/css_composer/model/CssRule.js

@@ -5,7 +5,7 @@ import { isEmpty, forEach } from 'underscore';
 
 var Selectors = require('selector_manager/model/Selectors');
 
-module.exports = Backbone.Model.extend(Styleable).extend({
+export default Backbone.Model.extend(Styleable).extend({
   defaults: {
     // Css selectors
     selectors: {},

src/css_composer/model/CssRules.js

@@ -1,7 +1,7 @@
 import Backbone from 'backbone';
 var CssRule = require('./CssRule');
 
-module.exports = Backbone.Collection.extend({
+export default Backbone.Collection.extend({
   initialize(models, opt) {
     // Inject editor
     if (opt && opt.em) this.editor = opt.em;

src/css_composer/view/CssGroupRuleView.js

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

src/css_composer/view/CssRuleView.js

@@ -1,4 +1,4 @@
-module.exports = require('backbone').View.extend({
+export default require('backbone').View.extend({
   tagName: 'style',
 
   initialize(o = {}) {

src/css_composer/view/CssRulesView.js

@@ -6,7 +6,7 @@ const $ = Backbone.$;
 const getBlockId = (pfx, order) =>
   `${pfx}${order ? `-${parseFloat(order)}` : ''}`;
 
-module.exports = Backbone.View.extend({
+export default Backbone.View.extend({
   initialize(o) {
     const config = o.config || {};
     this.atRules = {};

src/device_manager/config/config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   devices: [],
 
   deviceLabel: 'Device'

src/device_manager/index.js

@@ -21,7 +21,7 @@
  * @module DeviceManager
  */
 
-module.exports = () => {
+export default () => {
   var c = {},
     defaults = require('./config/config'),
     Devices = require('./model/Devices'),

src/device_manager/model/Device.js

@@ -1,7 +1,7 @@
 import { isUndefined } from 'underscore';
 import Backbone from 'backbone';
 
-module.exports = Backbone.Model.extend({
+export default Backbone.Model.extend({
   idAttribute: 'name',
 
   defaults: {

src/device_manager/model/Devices.js

@@ -1,7 +1,7 @@
 import Backbone from 'backbone';
 var Device = require('./Device');
 
-module.exports = Backbone.Collection.extend({
+export default Backbone.Collection.extend({
   model: Device,
 
   comparator: (left, right) => {

src/device_manager/view/DevicesView.js

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

src/dom_components/config/config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   stylePrefix: 'comp-',
 
   wrapperId: 'wrapper',

src/dom_components/index.js

@@ -30,7 +30,7 @@
 import Backbone from 'backbone';
 import { isEmpty, isString, isObject, isArray, result } from 'underscore';
 
-module.exports = () => {
+export default () => {
   var c = {};
   let em;
   const defaults = require('./config/config');

src/dom_components/model/Component.js

@@ -1220,4 +1220,4 @@ const Component = Backbone.Model.extend(Styleable).extend(
   }
 );
 
-module.exports = Component;
+export default Component;

src/dom_components/model/ComponentComment.js

@@ -1,6 +1,6 @@
 const Component = require('./ComponentTextNode');
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults

src/dom_components/model/ComponentImage.js

@@ -3,7 +3,7 @@ const Component = require('./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)"';
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentLabel.js

@@ -1,6 +1,6 @@
 const Component = require('./ComponentText');
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentLink.js

@@ -1,6 +1,6 @@
 const Component = require('./ComponentText');
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentMap.js

@@ -1,7 +1,7 @@
 const Component = require('./ComponentImage');
 const OComponent = require('./Component');
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentScript.js

@@ -1,6 +1,6 @@
 const Component = require('./Component');
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentSvg.js

@@ -1,6 +1,6 @@
 const Component = require('./Component');
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentTable.js

@@ -1,6 +1,6 @@
 const Component = require('./Component');
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentTableBody.js

@@ -1,6 +1,6 @@
 const Component = require('./Component');
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentTableCell.js

@@ -1,6 +1,6 @@
 const Component = require('./Component');
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentTableFoot.js

@@ -1,6 +1,6 @@
 const ComponentTableBody = require('./ComponentTableBody');
 
-module.exports = ComponentTableBody.extend(
+export default ComponentTableBody.extend(
   {
     defaults: {
       ...ComponentTableBody.prototype.defaults,

src/dom_components/model/ComponentTableHead.js

@@ -1,6 +1,6 @@
 const ComponentTableBody = require('./ComponentTableBody');
 
-module.exports = ComponentTableBody.extend(
+export default ComponentTableBody.extend(
   {
     defaults: {
       ...ComponentTableBody.prototype.defaults,

src/dom_components/model/ComponentTableRow.js

@@ -1,6 +1,6 @@
 const Component = require('./Component');
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentText.js

@@ -1,6 +1,6 @@
 const Component = require('./Component');
 
-module.exports = Component.extend({
+export default Component.extend({
   defaults: {
     ...Component.prototype.defaults,
     type: 'text',

src/dom_components/model/ComponentTextNode.js

@@ -1,6 +1,6 @@
 const Component = require('./Component');
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentVideo.js

@@ -4,7 +4,7 @@ const yt = 'yt';
 const vi = 'vi';
 const ytnc = 'ytnc';
 
-module.exports = Component.extend(
+export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,

src/dom_components/model/ComponentWrapper.js

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

src/dom_components/model/Components.js

@@ -3,7 +3,7 @@ import { isEmpty, isArray, isString } from 'underscore';
 const Backbone = require('backbone');
 let Component;
 
-module.exports = Backbone.Collection.extend({
+export default Backbone.Collection.extend({
   initialize(models, opt = {}) {
     this.opt = opt;
     this.listenTo(this, 'add', this.onAdd);

src/dom_components/model/Toolbar.js

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

src/dom_components/model/ToolbarButton.js

@@ -1,6 +1,6 @@
 const Backbone = require('backbone');
 
-module.exports = Backbone.Model.extend({
+export default Backbone.Model.extend({
   defaults: {
     command: '',
     attributes: {}