Render Component with JavaScript.

helpers.js

@@ -43,27 +43,24 @@ function getErrorHtml(message = '', errorMessage = '') {
   </div>`;
 }
 
-export async function getBlockConfigs(jsonFileName = 'default',
-                                      {includeConfigs, projectPath, modulesPath, dataFiles} = {}) {
+export async function getBlockData(jsonFileName = 'default', {projectPath} = {jsonFileName: 'default'}) {
   let data = await readJSONFile(path.join(projectPath, 'data', `${jsonFileName}.json`));
   if (data.error) {
     return data;
   }
 
-  if (includeConfigs) {
-    Object.assign(data, {
-      config: Object.assign(JSON.parse(JSON.stringify(config)), // The entire config object.
+  return data;
+}
+
+export function getBlockConfigs(args = {modulesPath: '', dataFiles: []}) {
+  return Object.assign(JSON.parse(JSON.stringify(config)), // The entire config object.
     {
-          projectDir: modulesPath, activeDataFile: jsonFileName, dataFiles: dataFiles.map((name) => {
+      projectDir: args.modulesPath, dataFiles: args.dataFiles.map((name) => {
         return {
-              name, active: jsonFileName === name,
+          name,
         };
       }), remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
-        })
     });
-  }
-
-  return data;
 }
 
 export function getBlockName(name = '') {

layouts/alignfull.hbs

@@ -4,9 +4,7 @@
 
 <body class="{{#if iframeMode}}body--iframe{{/if}}">
 
-<main>
-  {{> (include_block_template) }}
-</main>
+<div id="hbs-container"></div>
 
 {{> (include_partial "layouts/partials/scripts") }}
 

layouts/container.hbs

@@ -4,11 +4,9 @@
 
 <body class="{{#if iframeMode}}body--iframe{{/if}}">
 
-<main>
-  <div class="container">
-    {{> (include_block_template) }}
-  </div>
-</main>
+<div class="container">
+  <div id="hbs-container"></div>
+</div>
 
 {{> (include_partial "layouts/partials/scripts") }}
 

layouts/partials/scripts.hbs

@@ -1,3 +1,5 @@
+<script src="/socket.io/socket.io.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
 <script src="/scripts/dist/frame-index.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 <script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>{{#if config.jsUrl }}

layouts/scripts/dist/frame-index.min.js

@@ -1 +1,157 @@
-window.initBlock=function(e="",n="",o){document.querySelectorAll(n).forEach((e=>o(e)))},function(){let e;function n(n){const o=document.querySelector("body > main").scrollHeight;if(e===o)return;e=o,window.parent.postMessage("resize:"+JSON.stringify({height:e}),"*")}n(),new ResizeObserver(n).observe(document.body)}();
+window.initBlock = initBlock;
+
+let template;
+let data = {};
+let reload;
+
+// Blocks Initialization.
+function initBlock(blockName = '', selector = '', cb) {
+  reload = function () {
+    document.querySelectorAll(selector).forEach((el) => cb(el));
+  };
+
+  reload();
+}
+
+// Scrollbars / Frame resizes notifications.
+(function () {
+  let height;
+
+  handleHeightChange(); // Initial frame's height setup.
+  setupResizeListener(); // Listen to frame's height changes.
+
+  ///
+
+  function setupResizeListener() {
+    const resizeObserver = new ResizeObserver(handleHeightChange);
+    resizeObserver.observe(document.body);
+  }
+
+  function handleHeightChange() {
+    const updatedHeight = getCurrentHeight();
+
+    if (height === updatedHeight) {
+      return;
+    }
+
+    const RESIZE_CODE = 'resize:';
+    height = updatedHeight;
+    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
+  }
+
+  function getCurrentHeight() {
+    return document.querySelector('#hbs-container').scrollHeight;
+  }
+})();
+
+// Data Updates Listeners.
+(function () {
+  loadDataOptions();
+  listenToDataOptionsUpdates();
+
+  function listenToDataOptionsUpdates() {
+    window.addEventListener('message', function (event) {
+      const message = event.data;
+      const prefix = 'dataUpdate:';
+
+      if (typeof message !== "string" || !message.startsWith(prefix)) {
+        return;
+      }
+
+      try {
+        data = JSON.parse(message.substring(prefix.length));
+        updateBlock({data});
+      } catch (e) {
+        console.log('Error parsing incoming data.', e);
+      }
+    });
+  }
+
+  function getQueryParams() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const params = {};
+
+    for (const [key, value] of urlParams) {
+      params[key] = value;
+    }
+
+    return params;
+  }
+
+  function loadDataOptions() {
+    const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});
+    fetch(`/data?${queryParameters}`)
+      .then((response) => response.json())
+      .then((response) => {
+        data = response.data; // Update state.
+        updateBlock({data});
+      });
+  }
+})();
+
+// Listen to Template updates.
+(function () {
+  initSocket();
+
+  function initSocket() {
+    const socket = window.io.connect();
+
+    socket.on('error', function (err) {
+      console.log(err);
+    });
+
+    // socket.on('connect', function () {
+    //   console.log('user connected', socket.id)
+    // });
+
+    socket.on('templateUpdate', function (args) {
+      updateBlock({template: args.template});
+    });
+  }
+})();
+
+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"));
+}
+
+function renderBlock(templateHbs, jsonData, target) {
+  const template = Handlebars.compile(templateHbs);
+
+  /**
+   * Handlebars Helpers
+   */
+  Handlebars.registerHelper('esc_attr', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('esc_url', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('esc_html', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('base_url', function () {
+    return '/';
+  });
+
+  target.innerHTML = template(jsonData);
+
+  if (reload) {
+    reload();
+  }
+}
+//# sourceMappingURL=frame-index.min.js.map

layouts/scripts/dist/frame-index.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-index.min.js","sources":["../frame/frame.js"],"sourcesContent":["'use strict';\n\nwindow.initBlock = initBlock;\n\nlet template;\nlet data = {};\nlet reload;\n\n// Blocks Initialization.\nfunction initBlock(blockName = '', selector = '', cb) {\n  reload = function () {\n    document.querySelectorAll(selector).forEach((el) => cb(el));\n  }\n\n  reload();\n}\n\n// Scrollbars / Frame resizes notifications.\n(function () {\n  let height;\n  const debug = false;\n\n  handleHeightChange(); // Initial frame's height setup.\n  setupResizeListener(); // Listen to frame's height changes.\n\n  ///\n\n  function setupResizeListener() {\n    const resizeObserver = new ResizeObserver(handleHeightChange);\n    resizeObserver.observe(document.body);\n  }\n\n  function handleHeightChange() {\n    const updatedHeight = getCurrentHeight();\n\n    if (debug) {\n      console.log('Height Updates', 'Old vs New: ' + height, updatedHeight);\n    }\n\n    if (height === updatedHeight) {\n      return;\n    }\n\n    const RESIZE_CODE = 'resize:';\n    height = updatedHeight;\n    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');\n\n    if (debug) {\n      console.log('Resize message sent: ', height)\n    }\n  }\n\n  function getCurrentHeight() {\n    return document.querySelector('#hbs-container').scrollHeight;\n  }\n})();\n\n// Data Updates Listeners.\n(function () {\n  loadDataOptions();\n  listenToDataOptionsUpdates();\n\n  function listenToDataOptionsUpdates() {\n    window.addEventListener('message', function (event) {\n      const message = event.data;\n      const prefix = 'dataUpdate:';\n\n      if (typeof message !== \"string\" || !message.startsWith(prefix)) {\n        return;\n      }\n\n      try {\n        data = JSON.parse(message.substring(prefix.length));\n        updateBlock({data});\n      } catch (e) {\n        console.log('Error parsing incoming data.', e);\n      }\n    });\n  }\n\n  function getQueryParams() {\n    const urlParams = new URLSearchParams(window.location.search);\n    const params = {};\n\n    for (const [key, value] of urlParams) {\n      params[key] = value;\n    }\n\n    return params;\n  }\n\n  function loadDataOptions() {\n    const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});\n    fetch(`/data?${queryParameters}`)\n      .then((response) => response.json())\n      .then((response) => {\n        data = response.data; // Update state.\n        updateBlock({data});\n      })\n  }\n})();\n\n// Listen to Template updates.\n(function () {\n  initSocket();\n\n  function initSocket() {\n    const socket = window.io.connect();\n\n    socket.on('error', function (err) {\n      console.log(err);\n    });\n\n    // socket.on('connect', function () {\n    //   console.log('user connected', socket.id)\n    // });\n\n    socket.on('templateUpdate', function (args) {\n      updateBlock({template: args.template});\n    });\n  }\n})();\n\nfunction updateBlock(args = {}) {\n  if (args.template) {\n    template = args.template; // Update state.\n  }\n\n  if (args.data) {\n    data = args.data; // Update state.\n  }\n\n  if (!template) {\n    return;\n  }\n\n  renderBlock(template, data || {}, document.getElementById(\"hbs-container\"));\n}\n\nfunction renderBlock(templateHbs, jsonData, target) {\n  const template = Handlebars.compile(templateHbs);\n\n  /**\n   * Handlebars Helpers\n   */\n  Handlebars.registerHelper('esc_attr', function (attr) {\n    return attr;\n  });\n\n  Handlebars.registerHelper('esc_url', function (attr) {\n    return attr;\n  });\n\n  Handlebars.registerHelper('esc_html', function (attr) {\n    return attr;\n  });\n\n  Handlebars.registerHelper('base_url', function () {\n    return '/';\n  });\n\n  target.innerHTML = template(jsonData);\n\n  if (reload) {\n    reload();\n  }\n}\n"],"names":[],"mappings":"AAEA,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;AAC7B;AACA,IAAI,QAAQ,CAAC;AACb,IAAI,IAAI,GAAG,EAAE,CAAC;AACd,IAAI,MAAM,CAAC;AACX;AACA;AACA,SAAS,SAAS,CAAC,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE;AACtD,EAAE,MAAM,GAAG,YAAY;AACvB,IAAI,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAChE,IAAG;AACH;AACA,EAAE,MAAM,EAAE,CAAC;AACX,CAAC;AACD;AACA;AACA,CAAC,YAAY;AACb,EAAE,IAAI,MAAM,CAAC;AAEb;AACA,EAAE,kBAAkB,EAAE,CAAC;AACvB,EAAE,mBAAmB,EAAE,CAAC;AACxB;AACA;AACA;AACA,EAAE,SAAS,mBAAmB,GAAG;AACjC,IAAI,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAClE,IAAI,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1C,GAAG;AACH;AACA,EAAE,SAAS,kBAAkB,GAAG;AAChC,IAAI,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;AAK7C;AACA,IAAI,IAAI,MAAM,KAAK,aAAa,EAAE;AAClC,MAAM,OAAO;AACb,KAAK;AACL;AACA,IAAI,MAAM,WAAW,GAAG,SAAS,CAAC;AAClC,IAAI,MAAM,GAAG,aAAa,CAAC;AAC3B,IAAI,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AAK3E,GAAG;AACH;AACA,EAAE,SAAS,gBAAgB,GAAG;AAC9B,IAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,YAAY,CAAC;AACjE,GAAG;AACH,CAAC,GAAG,CAAC;AACL;AACLine truncated

layouts/scripts/dist/index.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.min.js","sources":["../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/react-dom/client.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@emotion/stylis/dist/stylis.esm.js","../../../node_modules/@emotion/unitless/dist/unitless.esm.js","../../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js","../../../node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../toolbar/responsive.style.js","../toolbar/responsive-button/responsive-button.style.js","../toolbar/responsive-button/ResponsiveButton.jsx","../toolbar/responsive.jsx","../toolbar/publish.jsx","../toolbar/data-options/data-options.style.js","../toolbar/data-options/design-preview.style.js","../toolbar/data-options/DesignPreview.jsx","../toolbar/data-options/DataOptions.jsx","../frame/editor.js","../index.js"],"sourcesContent":["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction Line truncated

layouts/scripts/frame/frame.js

@@ -2,9 +2,17 @@
 
 window.initBlock = initBlock;
 
+let template;
+let data = {};
+let reload;
+
 // Blocks Initialization.
 function initBlock(blockName = '', selector = '', cb) {
+  reload = function () {
     document.querySelectorAll(selector).forEach((el) => cb(el));
+  }
+
+  reload();
 }
 
 // Scrollbars / Frame resizes notifications.
@@ -22,7 +30,7 @@ function initBlock(blockName = '', selector = '', cb) {
     resizeObserver.observe(document.body);
   }
 
-  function handleHeightChange(entries) {
+  function handleHeightChange() {
     const updatedHeight = getCurrentHeight();
 
     if (debug) {
@@ -43,6 +51,117 @@ function initBlock(blockName = '', selector = '', cb) {
   }
 
   function getCurrentHeight() {
-    return document.querySelector('body > main').scrollHeight;
+    return document.querySelector('#hbs-container').scrollHeight;
   }
 })();
+
+// Data Updates Listeners.
+(function () {
+  loadDataOptions();
+  listenToDataOptionsUpdates();
+
+  function listenToDataOptionsUpdates() {
+    window.addEventListener('message', function (event) {
+      const message = event.data;
+      const prefix = 'dataUpdate:';
+
+      if (typeof message !== "string" || !message.startsWith(prefix)) {
+        return;
+      }
+
+      try {
+        data = JSON.parse(message.substring(prefix.length));
+        updateBlock({data});
+      } catch (e) {
+        console.log('Error parsing incoming data.', e);
+      }
+    });
+  }
+
+  function getQueryParams() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const params = {};
+
+    for (const [key, value] of urlParams) {
+      params[key] = value;
+    }
+
+    return params;
+  }
+
+  function loadDataOptions() {
+    const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});
+    fetch(`/data?${queryParameters}`)
+      .then((response) => response.json())
+      .then((response) => {
+        data = response.data; // Update state.
+        updateBlock({data});
+      })
+  }
+})();
+
+// Listen to Template updates.
+(function () {
+  initSocket();
+
+  function initSocket() {
+    const socket = window.io.connect();
+
+    socket.on('error', function (err) {
+      console.log(err);
+    });
+
+    // socket.on('connect', function () {
+    //   console.log('user connected', socket.id)
+    // });
+
+    socket.on('templateUpdate', function (args) {
+      updateBlock({template: args.template});
+    });
+  }
+})();
+
+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"));
+}
+
+function renderBlock(templateHbs, jsonData, target) {
+  const template = Handlebars.compile(templateHbs);
+
+  /**
+   * Handlebars Helpers
+   */
+  Handlebars.registerHelper('esc_attr', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('esc_url', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('esc_html', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('base_url', function () {
+    return '/';
+  });
+
+  target.innerHTML = template(jsonData);
+
+  if (reload) {
+    reload();
+  }
+}

layouts/scripts/toolbar/data-options/DataOptions.jsx

@@ -20,8 +20,7 @@ function DataOptions(props = {}) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   useEffect(async () => {
-    const data = await fetchDataOptions(state.dataName);
-    updateState(data);
+    await syncDataOptions(state.dataName);
   }, []);
 
   const handleCloseSidebarEscEvent = useCallback((e) => {
@@ -98,15 +97,7 @@ function DataOptions(props = {}) {
 
   async function changeDataOption(e) {
     const dataName = e.target.value;
-
-    const previewFrameUrl = new URL(window.devTool.previewFrameUrl);
-    previewFrameUrl.searchParams.set('data', dataName);
-    previewFrameUrl.searchParams.set('iframe', 'true');
-
-    props.rootAttributes.previewFrame.src = previewFrameUrl.href;
-
-    const dataOption = await fetchDataOptions(dataName);
-    updateState(Object.assign({}, dataOption, {dataName}));
+    await syncDataOptions(dataName);
   }
 
   async function fetchDataOptions(name = 'default') {
@@ -138,6 +129,19 @@ function DataOptions(props = {}) {
 
     setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
   }
+
+  async function syncDataOptions(dataName) {
+    const dataOptions = await fetchDataOptions(dataName);
+    updateIframe(dataOptions);
+
+    const newState = Object.assign({}, dataOptions, {dataName});
+    updateState(newState);
+  }
+
+  function updateIframe(dataOptions) {
+    const previewIframe = props.rootAttributes.previewFrame;
+    previewIframe.contentWindow.postMessage('dataUpdate:' + JSON.stringify(dataOptions.data || {}), '*');
+  }
 }
 
 function copyToClipboard(e, context) {

layouts/scroll.hbs

@@ -4,11 +4,11 @@
 
 <body class="{{#if iframeMode}}body--iframe{{/if}}">
 
-<main>
+<div>
   <section class="fullscreen_layout"></section>
-  {{> (include_block_template) }}
+  <div id="hbs-container"></div>
   <section class="fullscreen_layout"></section>
-</main>
+</div>
 
 {{> (include_partial "layouts/partials/scripts") }}
 

package-lock.json

@@ -32,11 +32,13 @@
 				"plugin-error": "^2.0.0",
 				"prompts": "^2.4.2",
 				"sanitize-html": "^2.7.1",
-				"sass": "^1.50.1"
+				"sass": "^1.50.1",
+				"ws": "^8.13.0"
 			},
 			"bin": {
 				"component-build": "build.js",
-				"component-dev": "server.js"
+				"component-dev": "server.js",
+				"component-info": "debug.js"
 			},
 			"devDependencies": {
 				"@babel/preset-react": "^7.18.6",
@@ -51,7 +53,11 @@
 				"rollup-plugin-copy": "^3.4.0",
 				"rollup-plugin-jsx": "^1.0.3",
 				"rollup-plugin-terser": "^7.0.2",
+				"socket.io": "^4.6.2",
 				"styled-components": "^5.3.5"
+			},
+			"engines": {
+				"node": ">=14.17.3"
 			}
 		},
 		"node_modules/@ampproject/remapping": {
@@ -935,9 +941,12 @@
 			"integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
 		},
 		"node_modules/@types/cors": {
-			"version": "2.8.12",
-			"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
-			"integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw=="
+			"version": "2.8.13",
+			"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz",
+			"integrity": "sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==",
+			"dependencies": {
+				"@types/node": "*"
+			}
 		},
 		"node_modules/@types/estree": {
 			"version": "1.0.0",
@@ -2901,9 +2910,9 @@
 			}
 		},
 		"node_modules/engine.io": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.2.1.tgz",
-			"integrity": "sha512-ECceEFcAaNRybd3lsGQKas3ZlMVjN3cyWwMP25D2i0zWfyiytVbTpRPa34qrr+FHddtpBVOmq4H/DCv1O0lZRA==",
+			"version": "6.4.2",
+			"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.2.tgz",
+			"integrity": "sha512-FKn/3oMiJjrOEOeUub2WCox6JhxBXq/Zn3fZOMCBxKnNYtsdKjxhl7yR3fZhM9PV+rdE75SU5SYMc+2PGzo+Tg==",
 			"dependencies": {
 				"@types/cookie": "^0.4.1",
 				"@types/cors": "^2.8.12",
@@ -2914,7 +2923,7 @@
 				"cors": "~2.8.5",
 				"debug": "~4.3.1",
 				"engine.io-parser": "~5.0.3",
-				"ws": "~8.2.3"
+				"ws": "~8.11.0"
 			},
 			"engines": {
 				"node": ">=10.0.0"
@@ -2932,6 +2941,26 @@
 				"xmlhttprequest-ssl": "~2.0.0"
 			}
 		},
+		"node_modules/engine.io-client/node_modules/ws": {
+			"version": "8.2.3",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+			"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/engine.io-parser": {
 			"version": "5.0.4",
 			"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
@@ -2948,6 +2977,26 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/engine.io/node_modules/ws": {
+			"version": "8.11.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+			"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/entities": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
@@ -8781,25 +8830,48 @@
 			}
 		},
 		"node_modules/socket.io": {
-			"version": "4.5.4",
-			"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.4.tgz",
-			"integrity": "sha512-m3GC94iK9MfIEeIBfbhJs5BqFibMtkRk8ZpKwG2QwxV0m/eEhPIV4ara6XCF1LWNAus7z58RodiZlAH71U3EhQ==",
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.6.2.tgz",
+			"integrity": "sha512-Vp+lSks5k0dewYTfwgPT9UeGGd+ht7sCpB7p0e83VgO4X/AHYWhXITMrNk/pg8syY2bpx23ptClCQuHhqi2BgQ==",
 			"dependencies": {
 				"accepts": "~1.3.4",
 				"base64id": "~2.0.0",
 				"debug": "~4.3.2",
-				"engine.io": "~6.2.1",
-				"socket.io-adapter": "~2.4.0",
-				"socket.io-parser": "~4.2.1"
+				"engine.io": "~6.4.2",
+				"socket.io-adapter": "~2.5.2",
+				"socket.io-parser": "~4.2.4"
 			},
 			"engines": {
 				"node": ">=10.0.0"
 			}
 		},
 		"node_modules/socket.io-adapter": {
-			"version": "2.4.0",
-			"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz",
-			"integrity": "sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg=="
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz",
+			"integrity": "sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==",
+			"dependencies": {
+				"ws": "~8.11.0"
+			}
+		},
+		"node_modules/socket.io-adapter/node_modules/ws": {
+			"version": "8.11.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+			"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
 		},
 		"node_modules/socket.io-client": {
 			"version": "4.5.4",
@@ -8816,9 +8888,9 @@
 			}
 		},
 		"node_modules/socket.io-parser": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
-			"integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+			"version": "4.2.4",
+			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+			"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
 			"dependencies": {
 				"@socket.io/component-emitter": "~3.1.0",
 				"debug": "~4.3.1"
@@ -10001,15 +10073,15 @@
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
 		},
 		"node_modules/ws": {
-			"version": "8.2.3",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
-			"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+			"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
 			"engines": {
 				"node": ">=10.0.0"
 			},
 			"peerDependencies": {
 				"bufferutil": "^4.0.1",
-				"utf-8-validate": "^5.0.2"
+				"utf-8-validate": ">=5.0.2"
 			},
 			"peerDependenciesMeta": {
 				"bufferutil": {
@@ -10806,9 +10878,12 @@
 			"integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
 		},
 		"@types/cors": {
-			"version": "2.8.12",
-			"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
-			"integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw=="
+			"version": "2.8.13",
+			"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz",
+			"integrity": "sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==",
+			"requires": {
+				"@types/node": "*"
+			}
 		},
 		"@types/estree": {
 			"version": "1.0.0",
@@ -12328,9 +12403,9 @@
 			}
 		},
 		"engine.io": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.2.1.tgz",
-			"integrity": "sha512-ECceEFcAaNRybd3lsGQKas3ZlMVjN3cyWwMP25D2i0zWfyiytVbTpRPa34qrr+FHddtpBVOmq4H/DCv1O0lZRA==",
+			"version": "6.4.2",
+			"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.2.tgz",
+			"integrity": "sha512-FKn/3oMiJjrOEOeUub2WCox6JhxBXq/Zn3fZOMCBxKnNYtsdKjxhl7yR3fZhM9PV+rdE75SU5SYMc+2PGzo+Tg==",
 			"requires": {
 				"@types/cookie": "^0.4.1",
 				"@types/cors": "^2.8.12",
@@ -12341,13 +12416,19 @@
 				"cors": "~2.8.5",
 				"debug": "~4.3.1",
 				"engine.io-parser": "~5.0.3",
-				"ws": "~8.2.3"
+				"ws": "~8.11.0"
 			},
 			"dependencies": {
 				"cookie": {
 					"version": "0.4.2",
 					"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
 					"integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
+				},
+				"ws": {
+					"version": "8.11.0",
+					"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+					"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+					"requires": {}
 				}
 			}
 		},
@@ -12361,6 +12442,14 @@
 				"engine.io-parser": "~5.0.3",
 				"ws": "~8.2.3",
 				"xmlhttprequest-ssl": "~2.0.0"
+			},
+			"dependencies": {
+				"ws": {
+					"version": "8.2.3",
+					"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+					"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+					"requires": {}
+				}
 			}
 		},
 		"engine.io-parser": {
@@ -16913,22 +17002,33 @@
 			}
 		},
 		"socket.io": {
-			"version": "4.5.4",
-			"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.4.tgz",
-			"integrity": "sha512-m3GC94iK9MfIEeIBfbhJs5BqFibMtkRk8ZpKwG2QwxV0m/eEhPIV4ara6XCF1LWNAus7z58RodiZlAH71U3EhQ==",
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.6.2.tgz",
+			"integrity": "sha512-Vp+lSks5k0dewYTfwgPT9UeGGd+ht7sCpB7p0e83VgO4X/AHYWhXITMrNk/pg8syY2bpx23ptClCQuHhqi2BgQ==",
 			"requires": {
 				"accepts": "~1.3.4",
 				"base64id": "~2.0.0",
 				"debug": "~4.3.2",
-				"engine.io": "~6.2.1",
-				"socket.io-adapter": "~2.4.0",
-				"socket.io-parser": "~4.2.1"
+				"engine.io": "~6.4.2",
+				"socket.io-adapter": "~2.5.2",
+				"socket.io-parser": "~4.2.4"
 			}
 		},
 		"socket.io-adapter": {
-			"version": "2.4.0",
-			"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz",
-			"integrity": "sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg=="
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz",
+			"integrity": "sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==",
+			"requires": {
+				"ws": "~8.11.0"
+			},
+			"dependencies": {
+				"ws": {
+					"version": "8.11.0",
+					"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+					"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+					"requires": {}
+				}
+			}
 		},
 		"socket.io-client": {
 			"version": "4.5.4",
@@ -16942,9 +17042,9 @@
 			}
 		},
 		"socket.io-parser": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
-			"integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+			"version": "4.2.4",
+			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+			"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
 			"requires": {
 				"@socket.io/component-emitter": "~3.1.0",
 				"debug": "~4.3.1"
@@ -17847,9 +17947,9 @@
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
 		},
 		"ws": {
-			"version": "8.2.3",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
-			"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+			"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
 			"requires": {}
 		},
 		"xmlhttprequest-ssl": {

package.json

@@ -7,9 +7,9 @@
 		"url": "https://axe-web.com/"
 	},
 	"scripts": {
-		"info": "NODE_ENV=development BLOCK_NAME=drinks-slider MODULE_PATH= node debug.js",
-		"dev": "NODE_ENV=development BLOCK_NAME=drinks-slider MODULE_PATH= node server.js",
-		"build-platform": "NODE_ENV=development BLOCK_NAME=drinks-slider MODULE_PATH= node ./build.js",
+		"info": "NODE_ENV=development BLOCK_NAME=header MODULE_PATH= node debug.js",
+		"dev": "NODE_ENV=development BLOCK_NAME=header MODULE_PATH= node server.js",
+		"build-platform": "NODE_ENV=development BLOCK_NAME=header MODULE_PATH= node ./build.js",
 		"dev-dev-tool": "NODE_ENV=development rollup --config rollup.config.js --watch",
 		"build-dev-tool": "rollup --config rollup.config.js"
 	},
@@ -42,7 +42,8 @@
 		"plugin-error": "^2.0.0",
 		"prompts": "^2.4.2",
 		"sanitize-html": "^2.7.1",
-		"sass": "^1.50.1"
+		"sass": "^1.50.1",
+		"ws": "^8.13.0"
 	},
 	"devDependencies": {
 		"@babel/preset-react": "^7.18.6",
@@ -57,6 +58,7 @@
 		"rollup-plugin-copy": "^3.4.0",
 		"rollup-plugin-jsx": "^1.0.3",
 		"rollup-plugin-terser": "^7.0.2",
+		"socket.io": "^4.6.2",
 		"styled-components": "^5.3.5"
 	},
 	"bin": {

server.js

@@ -19,8 +19,10 @@ import open from "open";
 import {sanitizeUrl} from "@braintree/sanitize-url";
 import sanitizeHtml from 'sanitize-html';
 import {escape} from "lodash-es";
-import {getBlockConfigs, getConfigs, readJSONFile, zipProject} from "./helpers.js";
+import {getBlockData, getBlockConfigs, getConfigs, readJSONFile, zipProject} from "./helpers.js";
 import PluginError from 'plugin-error';
+import {Server} from "socket.io";
+import {createServer} from 'http';
 
 /**
  * Constants
@@ -29,15 +31,24 @@ import PluginError from 'plugin-error';
 const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs();
 const blocksRegistry = isDev ? 'http://localhost:3020' : PRODUCTION_REGISTRY_URL;
 
+const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
+
+/**
+ * State
+ */
+
+let port = 3000; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
+let previewFrameUrl = `http://localhost:${port}`; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
+const sessions = [];
 
 /**
  * Init server
  */
 
-let port = 3000; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
-let previewFrameUrl = `http://localhost:${port}`; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
-const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
 const app = express();
+const httpServer = createServer(app);
+initSessionsServer(httpServer);
+
 const sass = gulpSass(dartSass);
 
 const hbs = create({
@@ -63,9 +74,8 @@ app.set('views', path.join(modulesPath, 'layouts'));
 // Routes
 //
 
-app.get('/', async (req, res) => {
-  let jsonFileName = req.query.data ? req.query.data : 'default';
-  const data = await getBlockConfigs(jsonFileName, {includeConfigs: true, projectPath, modulesPath, dataFiles});
+app.get('/', (req, res) => {
+  const data = getBlockConfigs({modulesPath, dataFiles});
   if (data.error && data.errorMessage) {
     return res.send(data.errorMessage);
   }
@@ -83,20 +93,14 @@ app.get('/', async (req, res) => {
   res.render('index', data);
 });
 
-app.get('/view/:baseView', async (req, res) => {
-  let jsonFileName = req.query.data ? req.query.data : 'default';
-  const data = await getBlockConfigs(jsonFileName, {includeConfigs: true, projectPath, modulesPath, dataFiles});
+app.get('/view/:baseView', (req, res) => {
+  const data = {config: getBlockConfigs({modulesPath, dataFiles})};
   if (data.error && data.errorMessage) {
     return res.send(data.errorMessage);
   }
 
-  const blockName = config.has('blockName') ? config.get('blockName') : developmentBlockName;
-
   data.helpers = {
     include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
-    include_block_template: () => handlebarLayoutsPath(projectPath, 'src', `${blockName}.template`),
-    section_class: `${blockName}--${jsonFileName}`,
-    base_url: '/',
   }
 
   if (!!req.query.iframe) {
@@ -110,7 +114,9 @@ app.get('/view/:baseView', async (req, res) => {
 
 app.get('/publish', async (req, res) => {
   const data = await readJSONFile(path.join(projectPath, `block.json`));
-  let responseData;
+  let responseData = {
+    uploadUrl: undefined
+  };
 
   try {
     const response = await fetch(`${blocksRegistry}`, {
@@ -157,7 +163,7 @@ app.get('/data', async (req, res) => {
   let jsonDataFileName = req.query.name ? req.query.name : 'default';
 
   const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
-  const data = await getBlockConfigs(jsonDataFileName, {projectPath, modulesPath, dataFiles});
+  const data = await getBlockData(jsonDataFileName, {projectPath});
   const designPreviewFiles = getListOfDesignPreviewFiles(jsonDataFileName, await fs.readdir(path.join(projectPath, 'design', 'preview')));
 
   return res.json({
@@ -175,6 +181,9 @@ app.use(express.static(path.join(projectPath, 'src')));
 app.use(express.static(path.join(projectPath, 'design')));
 app.use(express.static(path.join(modulesPath, 'layouts')));
 
+// Custom Middleware
+app.use(setHeaders);
+
 // Setup Gulp
 await buildAssetFiles();
 
@@ -209,7 +218,7 @@ function getListOfDesignPreviewFiles(jsonDataFileName, previewFiles) {
 
 function startBrowserSync() {
   return new Promise((resolve, reject) => {
-    const listener = app.listen(0, async () => {
+    const listener = httpServer.listen(0, async () => {
       const PORT = listener.address().port;
 
       console.log(`The web server has started on port ${PORT}`);
@@ -227,8 +236,8 @@ function startBrowserSync() {
         return cb();
       }]));
 
-      bs.watch(path.join(projectPath, "src/**/*.hbs"), function (event, file) {
-        browserSyncReload(bs, '', 'Template File Change: ' + file)
+      bs.watch(path.join(projectPath, "src/**/*.hbs"), function () {
+        return syncTemplate(sessions);
       });
 
       bs.init({
@@ -316,7 +325,7 @@ function buildAssetFiles() {
 
   // Run first build.
   return new Promise((resolve) => {
-    gulp.series('build-script-files', 'build-styling-files', function (cb) {
+    gulp.series('build-script-files', 'build-styling-files', function () {
       resolve();
     })();
   });
@@ -357,3 +366,27 @@ function handlebarLayoutsPath() {
   return path.join(...arguments)
     .replace(/\\/g, '/'); // Windows path issue. Fix all "\" for Handlebars.
 }
+
+function initSessionsServer(httpServer) {
+  const io = new Server(httpServer);
+  io.on('connection', async (socket) => {
+    sessions.push(socket);
+    await syncTemplate(sessions);
+  });
+
+  return httpServer;
+}
+
+function setHeaders(req, res, next) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  next();
+}
+
+async function syncTemplate(sessions = []) {
+  const blockName = config.has('blockName') ? config.get('blockName') : developmentBlockName;
+  const hbsTemplate = await fs.readFile(handlebarLayoutsPath(projectPath, 'src', `${blockName}.template.hbs`), 'utf8');
+
+  sessions.forEach(socket => {
+    socket.emit('templateUpdate', {template: hbsTemplate});
+  });
+}