- Rebuilt the entire project - now we can pass blockName in URL.

- Added "ViewMode"

layouts/scripts/frame/frame.js

@@ -17,6 +17,8 @@ function initBlock(blockName = '', selector = '', cb) {
 
 // Data Updates Listeners.
 (function () {
+  const block = getQueryParams().block;
+
   loadDataOptions();
   listenToDataOptionsUpdates();
 
@@ -50,7 +52,10 @@ function initBlock(blockName = '', selector = '', cb) {
   }
 
   function loadDataOptions() {
-    const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});
+    const queryParameters = new URLSearchParams({
+      block,
+      name: getQueryParams().data || 'default'
+    });
     fetch(`/data?${queryParameters}`)
       .then((response) => response.json())
       .then((response) => {
@@ -58,14 +63,12 @@ function initBlock(blockName = '', selector = '', cb) {
         updateBlock({data});
       })
   }
-})();
 
-// Listen to Template updates.
-(function () {
+  // Listen to Template updates.
   initSocket();
 
   function initSocket() {
-    const socket = window.io.connect();
+    const socket = window.io.connect('', {query: `block=${block}`});
 
     socket.on('error', function (err) {
       console.log(err);
@@ -78,60 +81,104 @@ function initBlock(blockName = '', selector = '', cb) {
     socket.on('templateUpdate', function (args) {
       updateBlock({template: args.template});
     });
-  }
-})();
 
-function updateBlock(args = {}) {
-  if (args.template) {
-    template = args.template; // Update state.
+    socket.on('scriptUpdate', function (args) {
+      const tag = updateTag('block-script');
+      tag.onload = () => {
+        updateBlock({template: args.template});
+      }
+    });
+
+    socket.on('styleUpdate', function (args) {
+      updateTag('block-stylesheet');
+    });
   }
 
-  if (args.data) {
-    data = args.data; // Update state.
+  function updateTag(id) {
+    const tag = document.getElementById(id);
+    const wrapper = tag.parentNode;
+
+    let clone;
+    let attr;
+    if (tag.tagName === 'SCRIPT') {
+      clone = document.createElement('script');
+      clone.type = 'text/javascript';
+      attr = 'src';
+    } else if (tag.tagName === 'LINK') {
+      clone = document.createElement('link');
+      clone.rel = 'stylesheet';
+      attr = 'href';
+    }
+
+    clone.id = id;
+
+    // Add version to the stylesheet URL, make sure we override the cache and already existing version there.
+    clone[attr] = tag[attr].replace(/(\?v=)[^&]+/, `$1${Date.now()}`);
+
+    tag.remove();
+    wrapper.append(clone);
+
+    return clone;
   }
 
-  if (!template) {
-    return;
+  function updateBlock(args = {}) {
+    if (args.template) {
+      template = args.template; // Update state.
+    }
+
+    if (args.data) {
+      data = args.data; // Update state.
+    }
+
+    if (!template) {
+      return;
+    }
+
+    renderBlock(template, data || {}, document.getElementById("hbs-container"));
   }
 
-  renderBlock(template, data || {}, document.getElementById("hbs-container"));
-}
+  function renderBlock(templateHbs, jsonData, target) {
+    const template = Handlebars.compile(templateHbs);
 
-function renderBlock(templateHbs, jsonData, target) {
-  const template = Handlebars.compile(templateHbs);
+    /**
+     * Handlebars Helpers
+     */
+    Handlebars.registerHelper('esc_attr', function (attr) {
+      return attr;
+    });
 
-  /**
-   * Handlebars Helpers
-   */
-  Handlebars.registerHelper('esc_attr', function (attr) {
-    return attr;
-  });
+    Handlebars.registerHelper('esc_url', function (attr) {
+      return attr;
+    });
 
-  Handlebars.registerHelper('esc_url', function (attr) {
-    return attr;
-  });
+    Handlebars.registerHelper('esc_html', function (attr) {
+      return attr;
+    });
 
-  Handlebars.registerHelper('esc_html', function (attr) {
-    return attr;
-  });
+    Handlebars.registerHelper('base_url', function () {
+      const list = ['block'];
 
-  Handlebars.registerHelper('base_url', function () {
-    return '/';
-  });
+      if (block) {
+        list.push(block.substr(1));
+      }
 
-  let html;
+      return ['', ...list, ''].join('/');
+    });
 
-  try {
-    html = template(jsonData);
-  } catch (e) {
-    html = `<div style="max-width: 1280px; margin: 1rem auto;">
+    let html;
+
+    try {
+      html = template(jsonData);
+    } catch (e) {
+      html = `<div style="max-width: 1280px; margin: 1rem auto;">
       <h1 style="all: unset; font-size: 1.5rem; font-weight: bold; display: block;">Syntax Error:</h1>
       <pre style="all: unset; padding: 10px 15px; background-color: #ffe6e6; border: 1px solid red; border-radius: 0.25rem; overflow: auto; display: block; white-space: pre;">${e.toString()}</pre>
     </div>`;
-  }
+    }
 
-  target.innerHTML = html;
-  if (reload) {
-    reload();
+    target.innerHTML = html;
+    if (reload) {
+      reload();
+    }
   }
-}
+})();