Refactor script component

src/dom_components/model/ComponentScript.js

@@ -1,10 +1,13 @@
 import Component from './Component';
 
+const type = 'script';
+
 export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,
-      type: 'script',
+      type,
+      tagName: type,
       droppable: false,
       draggable: false,
       layerable: false
@@ -13,7 +16,7 @@ export default Component.extend(
   {
     isComponent(el) {
       if (el.tagName == 'SCRIPT') {
-        var result = { type: 'script' };
+        const result = { type };
 
         if (el.src) {
           result.src = el.src;

src/dom_components/view/ComponentScriptView.js

@@ -1,4 +1,3 @@
-import Backbone from 'backbone';
 import ComponentView from './ComponentImageView';
 
 export default ComponentView.extend({
@@ -7,43 +6,31 @@ export default ComponentView.extend({
   events: {},
 
   render() {
-    var model = this.model;
-    var src = model.get('src');
-    var em = this.em;
-    var scriptCount = em && em.get('scriptCount') ? em.get('scriptCount') : 0;
-    var content = '';
+    const { model, em } = this;
+    const src = model.get('src');
+    const scrCnt = em && em.get('scriptCount');
+    const scriptCount = scrCnt ? scrCnt : 0;
+    let content = '';
 
     // If it's an external script
     if (src) {
-      var onload = model.get('onload');
-      var svar = 'script' + scriptCount;
-      var svarNext = 'script' + (scriptCount + 1);
-      content =
-        'var ' +
-        svar +
-        " = document.createElement('script');\n" +
-        svar +
-        '.onload = function(){\n' +
-        (onload ? onload + '();\n' : '') +
-        'typeof ' +
-        svarNext +
-        "Start == 'function' && " +
-        svarNext +
-        'Start();\n' +
-        '};\n' +
-        svar +
-        ".src = '" +
-        src +
-        "';\n" +
-        'function ' +
-        svar +
-        'Start() { document.body.appendChild(' +
-        svar +
-        '); };\n' +
-        (!scriptCount ? svar + 'Start();' : '');
-      if (em) {
-        em.set('scriptCount', scriptCount + 1);
-      }
+      const onload = model.get('onload');
+      const svar = `script${scriptCount}`;
+      const svarNext = `script${scriptCount + 1}`;
+      const svarFn = `${svar}Start`;
+      const svarNextFn = `${svarNext}Start`;
+      // Load multiple external scripts in the correct order
+      content = `
+        var ${svar} = document.createElement('script');
+        ${svar}.onload = function() {
+          ${onload ? `${onload}();\n` : ''}
+          typeof ${svarNextFn} == 'function' && ${svarNextFn}();
+        };
+        ${svar}.src = '${src}';
+        function ${svarFn}() { document.body.appendChild(${svar}); };
+        ${!scriptCount ? `${svarFn}();` : ''}
+      `;
+      em && em.set('scriptCount', scriptCount + 1);
     } else {
       content = model.get('content');
     }