Merge pull request 'dev' (#9) from dev into master

Reviewed-on: https://git.devdevdev.life/AXE-WEB/block-dev-tool/pulls/9

helpers.js

@@ -9,6 +9,11 @@ import archiver from "archiver";
 import {buildWordPress} from "./platforms/wordpress/wordpress-adapter.js";
 import {buildHubspotEmail} from "./platforms/hubspot/hubspot-email-adapter.js";
 import {buildHubspotPage} from "./platforms/hubspot/hubspot-page-adapter.js";
+import fs from "fs/promises";
+import {constants} from "fs";
+import fetch from "node-fetch";
+import mime from "mime-types";
+import {exec} from "child_process";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -26,6 +31,7 @@ export async function readJSONFile(jsonFile) {
   let data = {};
 
   try {
+    await fs.access(jsonFile, constants.F_OK | constants.R_OK);
     data = await fsExtra.readJson(jsonFile);
   } catch (e) {
     return {
@@ -43,29 +49,37 @@ function getErrorHtml(message = '', errorMessage = '') {
   </div>`;
 }
 
-export async function getBlockConfigs(jsonFileName = 'default',
-                                      {includeConfigs, projectPath, modulesPath, dataFiles} = {}) {
-  let data = await readJSONFile(path.join(projectPath, 'data', `${jsonFileName}.json`));
+export async function getBlockData(jsonFileName = 'default', {projectPath} = {jsonFileName: 'default'}) {
+  const filePath = path.join(projectPath, 'data', `${jsonFileName}.json`);
+  const data = await readJSONFile(filePath);
+
   if (data.error) {
-    return data;
-  }
-
-  if (includeConfigs) {
-    Object.assign(data, {
-      config: Object.assign(JSON.parse(JSON.stringify(config)), // The entire config object.
-        {
-          projectDir: modulesPath, activeDataFile: jsonFileName, dataFiles: dataFiles.map((name) => {
-            return {
-              name, active: jsonFileName === name,
-            };
-          }), remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
-        })
-    });
+    console.log(filePath, data.errorMessage.replace(/<[^>]*>?/gm, ''));
+    return {};
   }
 
   return data;
 }
 
+export function getBlockConfigs(args = {modulesPath: '', dataFiles: []}) {
+  const updatedConfig = Object.assign(JSON.parse(JSON.stringify(config)), // The entire config object.
+    {
+      projectDir: args.modulesPath, dataFiles: args.dataFiles.map((name) => {
+        return {
+          name,
+        };
+      }), remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
+    });
+
+  // Avoid cache conflict on Global Project css/js files.
+  if (updatedConfig.project) {
+    updatedConfig.project.css = updatedConfig.project.css ? updatedConfig.project.css + '?cache=' + Date.now() : undefined;
+    updatedConfig.project.js = updatedConfig.project.js ? updatedConfig.project.js + '?cache=' + Date.now() : undefined;
+  }
+
+  return updatedConfig;
+}
+
 export function getBlockName(name = '') {
   if (name.startsWith('@')) {
     name = name.substring(1);
@@ -163,3 +177,158 @@ export async function buildExportFiles(blockName, platform) {
     await buildHubspotPage(blockName)
   }
 }
+
+export function removeCommentsFromCss(content) {
+  return content.replace(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, '');
+}
+
+export function removeCommentsFromJs(content) {
+  return content.replace(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, '');
+}
+
+export async function uploadFile(filePath, uploadUrl, validator) {
+  const options = {};
+
+  const contentType = mime.lookup(filePath);
+  if (['text/css', 'application/javascript'].includes(contentType)) {
+    options.encoding = 'utf8';
+  }
+
+  let body = await fs.readFile(filePath, options);
+
+  if (validator) {
+    body = validator(body);
+  }
+
+  try {
+    const response = await fetch(uploadUrl, {
+      method: 'PUT',
+      body: body,
+      headers: {'Content-Type': contentType}
+    });
+
+    return response.status !== 200;
+  } catch (err) {
+    console.log(err)
+    const fileName = filePath.split('/').pop();
+    throw new Error(`Can't upload "${fileName}" file. Server permission error.`);
+  }
+}
+
+export async function getImagesList(rootFolder, subFolder = '') {
+  const imagesPath = path.join(rootFolder, subFolder);
+
+  try {
+    await fs.access(imagesPath);
+  } catch (err) {
+    // Folder doesn't exist.
+    return [];
+  }
+
+  const images = await fs.readdir(imagesPath);
+  const imagesList = [];
+
+  for (const image of images) {
+    const stats = await fs.stat(path.join(imagesPath, image));
+
+    if (stats.isDirectory()) {
+      const subImages = await getImagesList(rootFolder, image);
+      imagesList.push(...subImages);
+    } else {
+      imagesList.push(path.join(subFolder, image));
+    }
+  }
+
+  return imagesList;
+}
+
+export async function isFileEmpty(filePath, ignoreComments = false) {
+  const fileContent = await fs.readFile(filePath, 'utf8');
+  const lines = fileContent.split('\n');
+
+  for (const line of lines) {
+    if (ignoreComments && line.trim().startsWith('//')) {
+      continue;
+    }
+
+    if (line.trim().length > 0) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function replaceNames(content, images, uploadedImages) {
+  images.forEach((image, index) => {
+    content = content.replace(image, uploadedImages[index].fileName);
+  });
+
+  return content;
+}
+
+export async function getBlockFromCloud(blockName, blocksRegistry) {
+  const queryString = new URLSearchParams();
+  queryString.append('blockName', blockName);
+  queryString.append('includeDevConfig', 'true');
+
+  const response = await fetch(`${blocksRegistry}?${queryString.toString()}`);
+  const responseData = await response.json();
+  if (!responseData || !responseData.name) {
+    const message = "⚠️ Block not found, please contact administrator."
+    throw new Error(message);
+  }
+
+  if (responseData.statusCode && responseData.statusCode !== 200) {
+    const message = ["⚠️ [ERROR]", responseData.message || "Server side error."].join(' ');
+    throw new Error(message);
+  }
+
+  return responseData;
+}
+
+export async function verifyVersion(projectPath, blocksRegistry) {
+  const blockJson = await readJSONFile(path.join(projectPath, `block.json`));
+  const blockName = getBlockName(blockJson.name);
+
+  if (typeof blockJson.version === 'undefined' || !blockName.name) {
+    return true;
+  }
+
+  /*
+   * This block is managed on cloud.
+   * Let's detect the latest version.
+   */
+
+  const block = await getBlockFromCloud('@' + blockJson.name, blocksRegistry);
+  return block.version === blockJson.version;
+}
+
+export async function syncFilesWithCloud(jsonBlockPath, bs, sourceFiles = false) {
+  const blockJson = await readJSONFile(jsonBlockPath);
+  const blockName = blockJson.name.startsWith('@') ? blockJson.name : `@${blockJson.name}`;
+
+  bs.pause();
+
+  // Looks like it takes time to pause the browser-sync server, so delay(setTimeout) is necessary.
+  await new Promise((resolve) => setTimeout(() => resolve(), 1000));
+
+  await new Promise((resolve) => {
+    const args = sourceFiles ? '--source' : '';
+    const createBlockModulePath = `./node_modules/@axe-web/create-block`;
+
+    // exec(`BLOCK_NAME=${blockName} node ${createBlockModulePath}/create-block.js sync ${args}`, (err, stdout, stderr) => {
+    exec(`node ${createBlockModulePath}/create-block.js sync ${args}`, (err, stdout, stderr) => {
+      if (err || stderr) {
+        const message = err || stderr;
+        console.error('Error:', message);
+        throw new Error(message);
+      }
+
+      console.log(stdout);
+      resolve();
+    });
+  });
+
+  bs.resume();
+}

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/index.hbs

@@ -14,6 +14,9 @@
 <script>
   window.devTool = {
     previewFrameUrl: '{{ previewFrameUrl }}',
+    {{#if publicUrl}}
+      publicUrl: true,
+    {{/if}}
   };
 </script>
 

layouts/partials/head.hbs

@@ -3,6 +3,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="stylesheet" href="https://unpkg.com/swiper@8.4.5/swiper-bundle.min.css"/>
+{{#if config.project.css }}  <link rel="stylesheet" href="{{ config.project.css }}">
+{{/if}}
   {{#if config.cssUrl }}
   {{#each config.cssUrl }}
   <link rel="stylesheet" href="{{ this }}">

layouts/partials/scripts.hbs

@@ -1,6 +1,11 @@
+<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/swiper@8.4.5/swiper-bundle.min.js"></script>{{#if config.jsUrl }}
+<script src="https://unpkg.com/swiper@8.4.5/swiper-bundle.min.js"></script>
+{{#if config.project.js }}<script src="{{ config.project.js }}"></script>
+{{/if}}
+{{#if config.jsUrl }}
 {{#each config.jsUrl }}<script src="{{ this }}"></script>
 {{/each}}
 {{/if}}

layouts/partials/toolbar.hbs

@@ -3,14 +3,17 @@
   <div class="page_toolbar__left"></div>
 
   <div class="page_toolbar__middle">
-    <div>
-      Sizes: <b>1rem = {{ config.remToPx }}px</b>
+    <div style="display: none">
+      Version: {{ config.version }}
     </div>
   </div>
 
   <div class="page_toolbar__right">
-    {{#if config.styleGuideUrl}}
-      <a href="{{ config.styleGuideUrl }}" target="_blank" class="palette" title="Open Style Guide"></a>
+    {{#if shareUrl}}
+      <a href="{{ shareUrl }}" target="_blank" class="share" title="Share URL"></a>
+    {{/if}}
+    {{#if styleGuideUrl}}
+      <a href="{{ styleGuideUrl }}" target="_blank" class="palette" title="Open Style Guide"></a>
     {{/if}}
     <a href="{{ previewFrameUrl }}" target="_blank" class="open_in_new_tab" title="Open in New Window"></a>
   </div>

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

@@ -1 +1 @@
-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)}();
+let e;window.initBlock=function(e="",n="",r){t=function(){document.querySelectorAll(n).forEach((e=>r(e)))},t()};let t,n={};function r(r={}){r.template&&(e=r.template),r.data&&(n=r.data),e&&function(e,n,r){const a=Handlebars.compile(e);let o;Handlebars.registerHelper("esc_attr",(function(e){return e})),Handlebars.registerHelper("esc_url",(function(e){return e})),Handlebars.registerHelper("esc_html",(function(e){return e})),Handlebars.registerHelper("base_url",(function(){return"/"}));try{o=a(n)}catch(e){o=`<div style="max-width: 1280px; margin: 1rem auto;">\n      <h1 style="all: unset; font-size: 1.5rem; font-weight: bold; display: block;">Syntax Error:</h1>\n      <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>\n    </div>`}r.innerHTML=o,t&&t()}(e,n||{},document.getElementById("hbs-container"))}!function(){function e(){const e=new URLSearchParams(window.location.search),t={};for(const[n,r]of e)t[n]=r;return t}!function(){const t=new URLSearchParams({name:e().data||"default"});fetch(`/data?${t}`).then((e=>e.json())).then((e=>{n=e.data,r({data:n})}))}(),window.addEventListener("message",(function(e){const t=e.data,a="dataUpdate:";if("string"==typeof t&&t.startsWith(a))try{n=JSON.parse(t.substring(a.length)),r({data:n})}catch(e){console.log("Error parsing incoming data.",e)}}))}(),function(){const e=window.io.connect();e.on("error",(function(e){console.log(e)})),e.on("templateUpdate",(function(e){r({template:e.template})}))}();

layouts/scripts/dist/toolbar/images/icon-share.svg

@@ -0,0 +1,3 @@
+<svg width="478" height="506" viewBox="0 0 478 506" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M379.8 315.4C352.01 315.4 327.062 327.817 310.146 347.315L186.499 278.249C188.838 270.119 190.1 261.521 190.1 252.7C190.1 243.782 188.834 235.223 186.427 227.037L309.923 158.096C326.774 177.698 351.821 190.2 379.7 190.2C430.409 190.2 471.8 148.918 471.8 98.1C471.8 47.2863 430.514 6 379.7 6C328.886 6 287.6 47.2863 287.6 98.1C287.6 106.995 288.859 115.615 291.265 123.769L167.886 192.697C151.025 173.006 125.968 160.6 98.1 160.6C47.3908 160.6 6 201.882 6 252.7C6 303.523 47.3954 344.8 98.2 344.8C126.093 344.8 151.144 332.287 168.074 312.598L291.571 381.633C289.143 389.853 287.8 398.557 287.8 407.5C287.8 458.209 329.082 499.6 379.9 499.6C430.714 499.6 472 458.314 472 407.5C472 356.677 430.605 315.4 379.8 315.4ZM379.8 45.1C409.086 45.1 432.9 68.9137 432.9 98.2C432.9 127.486 409.086 151.3 379.8 151.3C350.514 151.3 326.7 127.486 326.7 98.2C326.7 68.9203 350.607 45.1 379.8 45.1ZM98.2 305.8C68.9137 305.8 45.1 281.986 45.1 252.7C45.1 223.414 68.9137 199.6 98.2 199.6C127.486 199.6 151.3 223.414 151.3 252.7C151.3 281.98 127.393 305.8 98.2 305.8ZM379.8 460.5C350.514 460.5 326.7 436.686 326.7 407.4C326.7 378.114 350.514 354.3 379.8 354.3C409.086 354.3 432.9 378.114 432.9 407.4C432.9 436.686 409.086 460.5 379.8 460.5Z" fill="#21252D" stroke="#21252D" stroke-width="12"/>
+</svg>

layouts/scripts/frame/editor.js

@@ -1,21 +0,0 @@
-export function setupFrameResizeListener() {
-  const previewFrame = getPreviewFrame();
-
-  window.addEventListener('message', function (e) {
-    const RESIZE_CODE = 'resize:';
-    if (typeof e.data !== 'string' || !e.data.startsWith(RESIZE_CODE)) {
-      return;
-    }
-
-    const data = JSON.parse(e.data.substring(RESIZE_CODE.length))
-    let height = Number.parseInt(data.height)
-    if (height > 20000) {
-      height = 20000; // Limit max height.
-    }
-    previewFrame.style.height = height + 'px'
-  });
-}
-
-export function getPreviewFrame() {
-  return document.getElementById('preview_frame');
-}

layouts/scripts/frame/frame.js

@@ -2,47 +2,136 @@
 
 window.initBlock = initBlock;
 
+let template;
+let data = {};
+let reload;
+
 // Blocks Initialization.
 function initBlock(blockName = '', selector = '', cb) {
-  document.querySelectorAll(selector).forEach((el) => cb(el));
+  reload = function () {
+    document.querySelectorAll(selector).forEach((el) => cb(el));
+  }
+
+  reload();
 }
 
-// Scrollbars / Frame resizes notifications.
+// Data Updates Listeners.
 (function () {
-  let height;
-  const debug = false;
+  loadDataOptions();
+  listenToDataOptionsUpdates();
 
-  handleHeightChange(); // Initial frame's height setup.
-  setupResizeListener(); // Listen to frame's height changes.
+  function listenToDataOptionsUpdates() {
+    window.addEventListener('message', function (event) {
+      const message = event.data;
+      const prefix = 'dataUpdate:';
 
-  ///
+      if (typeof message !== "string" || !message.startsWith(prefix)) {
+        return;
+      }
 
-  function setupResizeListener() {
-    const resizeObserver = new ResizeObserver(handleHeightChange);
-    resizeObserver.observe(document.body);
+      try {
+        data = JSON.parse(message.substring(prefix.length));
+        updateBlock({data});
+      } catch (e) {
+        console.log('Error parsing incoming data.', e);
+      }
+    });
   }
 
-  function handleHeightChange(entries) {
-    const updatedHeight = getCurrentHeight();
-
-    if (debug) {
-      console.log('Height Updates', 'Old vs New: ' + height, updatedHeight);
-    }
+  function getQueryParams() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const params = {};
 
-    if (height === updatedHeight) {
-      return;
+    for (const [key, value] of urlParams) {
+      params[key] = value;
     }
 
-    const RESIZE_CODE = 'resize:';
-    height = updatedHeight;
-    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
+    return params;
+  }
 
-    if (debug) {
-      console.log('Resize message sent: ', height)
-    }
+  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});
+      })
   }
+})();
 
-  function getCurrentHeight() {
-    return document.querySelector('body > main').scrollHeight;
+// 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 '/';
+  });
+
+  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();
+  }
+}

layouts/scripts/index.js

@@ -3,13 +3,16 @@
 import {setupResponsiveness} from './toolbar/responsive.jsx';
 import {setupPublish} from "./toolbar/publish.jsx";
 import {setupDataOptions} from "./toolbar/data-options/DataOptions.jsx";
-import {getPreviewFrame, setupFrameResizeListener} from "./frame/editor.js";
 
 const rootAttributes = {
   previewFrame: getPreviewFrame(),
 };
 
-setupFrameResizeListener();
+// setupFrameResizeListener();
 setupResponsiveness(rootAttributes);
 setupDataOptions(rootAttributes);
 setupPublish(rootAttributes);
+
+function getPreviewFrame() {
+  return document.getElementById('preview_frame');
+}

layouts/scripts/sync.jsx

@@ -0,0 +1,100 @@
+'use strict';
+
+import React, {useState} from "react";
+import * as ReactDOM from "react-dom/client";
+
+function init() {
+  const wrapper = document.querySelector('#screen');
+
+  const root = ReactDOM.createRoot(wrapper);
+  const html = (<SyncScreen/>);
+
+  root.render(html);
+}
+
+function SyncScreen() {
+  const [loading, setLoading] = useState(null);
+  const [error, setError] = useState(null);
+
+  return <>
+
+    <section className="container py-5">
+      <h1 style={{marginBottom: '2rem'}}>Oops... Block not in sync.</h1>
+      {error && <p className="alert alert-danger">{error}</p>}
+
+      {loading ?
+        <>
+          {loading === 'syncing' &&
+            <p>Version upgrade in progress...</p>
+          }
+          <p>Please wait...</p>
+        </>
+        :
+        <>
+          <p>Your version of the block is not in sync with the cloud (not latest version).<br/>
+            Would you like to update it?</p>
+          <div className="options">
+            <button className="btn btn-primary" style={{marginRight: '0.5rem'}} onClick={runSyncLogic}>Yes, Update to
+              Latest
+            </button>
+            <button className="btn btn-secondary" onClick={ignoreVersionSync}>Ignore</button>
+          </div>
+        </>
+      }
+    </section>
+
+  </>
+
+  async function ignoreVersionSync() {
+    setLoading(true);
+
+    let data = {};
+    try {
+      const response = await fetch('/sync', {
+        method: 'POST',
+        body: JSON.stringify({ignore: true}),
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+      data = await response.json();
+    } catch (err) {
+      setError('Error: ' + err.message);
+      setLoading(false);
+      return;
+    }
+
+    if (data.status !== 200) {
+      setError(data.message);
+      setLoading(false);
+      return;
+    }
+
+    setTimeout(() => window.location.reload(), 1000);
+  }
+
+  async function runSyncLogic() {
+    setLoading('syncing');
+
+    let data = {};
+    try {
+      const response = await fetch('/sync', {method: 'POST'});
+      data = await response.json();
+    } catch (err) {
+      setError('Error: ' + err.message);
+      setLoading(false);
+      return;
+    }
+
+    if (data.status !== 200) {
+      setError(data.message);
+      setLoading(false);
+      return;
+    }
+
+    setTimeout(() => window.location.reload(), 1000);
+  }
+
+}
+
+init();

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

@@ -9,10 +9,21 @@ import {
 import {isClickOutside, isEscHit} from "../responsive-button/ResponsiveButton.jsx";
 import {DesignPreview} from "./DesignPreview.jsx";
 
+export const PRODUCTION_REGISTRY_URL = 'https://blocks-registery.axe-web.com';
+
 function DataOptions(props = {}) {
   props.rootAttributes = props.rootAttributes ?? {};
 
-  const initialState = {dataName: 'default', data: {}, dataOptions: [], designPreview: []};
+  const initialState = {
+    dataName: 'default',
+    data: {},
+    dataText: '{}',
+    dataOptions: [],
+    designPreview: [],
+    errorMessage: null,
+    loading: false,
+  };
+
   const [state, setState] = useState(initialState);
   const [previewOption, setPreviewOption] = useState(getDesignPreviewImage(state.dataName, state.designPreview));
   const updateState = (update) => setState(Object.assign({}, state, update));
@@ -20,8 +31,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) => {
@@ -66,7 +76,7 @@ function DataOptions(props = {}) {
         <SidebarDataOptionsStyle>
           <label htmlFor="data-options">Data Options</label>
 
-          <select name="data" id="data-options" onChange={(e) => changeDataOption(e)} value={state.dataName}>
+          <select name="data" id="data-options" onChange={(e) => changeDataOption(e)} value={state.dataName} disabled={state.loading}>
             {state.dataOptions.map((item) => {
               const isSelected = state.dataName === item;
               return <option value={item} selected={isSelected}>{item}</option>
@@ -76,10 +86,21 @@ function DataOptions(props = {}) {
       }
 
       {state.data &&
-        <pre>{JSON.stringify(state.data, null, 2)}</pre>
+        <textarea value={state.dataText} onChange={dataOptionUpdate} disabled={state.loading}/>
+      }
+
+      {state.errorMessage &&
+        <p className={'alert alert--error'}>{state.errorMessage}</p>
       }
 
-      <button className='btn btn--secondary' onClick={(e) => copyToClipboard(e, state.data)}>Copy to Clipboard</button>
+      {state.loading &&
+        <p className={'alert'}>Loading, please wait...</p>
+      }
+
+      <div className={'actions'}>
+        <button className='btn btn--secondary' disabled={state.loading} onClick={(e) => copyToClipboard(e, state.data)}>Copy to Clipboard</button>
+        <button className='btn btn--secondary' disabled={state.loading} onClick={(e) => generateVariation(e, state.data)}>Generate Test</button>
+      </div>
     </SidebarStyle>
   </div>;
 
@@ -87,6 +108,52 @@ function DataOptions(props = {}) {
   // Functions
   //
 
+  function generateVariation() {
+    const url = PRODUCTION_REGISTRY_URL + '/content-generator/';
+
+    const myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+
+    const requestOptions = {
+      method: 'POST',
+      headers: myHeaders,
+      body: JSON.stringify({json: state.data}),
+    };
+
+    updateState({loading: true, errorMessage: null});
+
+    return fetch(url, requestOptions)
+      .then(response => response.json())
+      .then(result => {
+        console.log(result)
+        if (result.statusCode !== 200) {
+          throw new Error(result.message);
+        }
+
+        const data = result.variation;
+        updateState({dataText: JSON.stringify(data, null, 2), data, errorMessage: null, loading: false});
+        updateIframe(data);
+      })
+      .catch(error => {
+        updateState({loading: false, errorMessage: 'Something went wrong, please try again.'})
+      });
+
+  }
+
+  function dataOptionUpdate(e) {
+    let data;
+
+    try {
+      data = JSON.parse(e.target.value);
+    } catch (err) {
+      updateState({dataText: e.target.value, errorMessage: 'Invalid JSON, please review and try again.'});
+      return;
+    }
+
+    updateState({dataText: e.target.value, data, errorMessage: null});
+    updateIframe(data);
+  }
+
   function openSidebar() {
     setSidebarOpen(true);
     setTimeout(() => document.querySelector('.sidebar-active').focus());
@@ -98,15 +165,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 +197,23 @@ function DataOptions(props = {}) {
 
     setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
   }
+
+  async function syncDataOptions(dataName) {
+    const dataOptions = await fetchDataOptions(dataName);
+    updateIframe(dataOptions.data);
+
+    const newState = Object.assign({errorMessage: null},
+      dataOptions,
+      {dataName},
+      {dataText: JSON.stringify(dataOptions.data, null, 2)},
+    );
+    updateState(newState);
+  }
+
+  function updateIframe(data) {
+    const previewIframe = props.rootAttributes.previewFrame;
+    previewIframe.contentWindow.postMessage('dataUpdate:' + JSON.stringify(data || {}), '*');
+  }
 }
 
 function copyToClipboard(e, context) {

layouts/scripts/toolbar/data-options/data-options.style.js

@@ -24,7 +24,10 @@ export const SidebarStyle = styled.div`
     visibility: visible;
   }
 
-  pre {
+  pre, textarea {
+    height: 100%;
+    //min-height: 480px;
+    resize: vertical;
     overflow-x: auto;
     padding: 0.5rem;
     background-color: #EDF2F7;
@@ -33,6 +36,20 @@ export const SidebarStyle = styled.div`
     border: 1px solid #cbd5e0;
     width: 100%;
     box-sizing: border-box;
+    margin: 0.5rem 0;
+    display: block;
+    white-space: pre;
+  }
+
+  .actions {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+
+  .alert--error {
+    color: red;
   }
 `;
 

layouts/scripts/toolbar/images/icon-share.svg

@@ -0,0 +1,3 @@
+<svg width="478" height="506" viewBox="0 0 478 506" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M379.8 315.4C352.01 315.4 327.062 327.817 310.146 347.315L186.499 278.249C188.838 270.119 190.1 261.521 190.1 252.7C190.1 243.782 188.834 235.223 186.427 227.037L309.923 158.096C326.774 177.698 351.821 190.2 379.7 190.2C430.409 190.2 471.8 148.918 471.8 98.1C471.8 47.2863 430.514 6 379.7 6C328.886 6 287.6 47.2863 287.6 98.1C287.6 106.995 288.859 115.615 291.265 123.769L167.886 192.697C151.025 173.006 125.968 160.6 98.1 160.6C47.3908 160.6 6 201.882 6 252.7C6 303.523 47.3954 344.8 98.2 344.8C126.093 344.8 151.144 332.287 168.074 312.598L291.571 381.633C289.143 389.853 287.8 398.557 287.8 407.5C287.8 458.209 329.082 499.6 379.9 499.6C430.714 499.6 472 458.314 472 407.5C472 356.677 430.605 315.4 379.8 315.4ZM379.8 45.1C409.086 45.1 432.9 68.9137 432.9 98.2C432.9 127.486 409.086 151.3 379.8 151.3C350.514 151.3 326.7 127.486 326.7 98.2C326.7 68.9203 350.607 45.1 379.8 45.1ZM98.2 305.8C68.9137 305.8 45.1 281.986 45.1 252.7C45.1 223.414 68.9137 199.6 98.2 199.6C127.486 199.6 151.3 223.414 151.3 252.7C151.3 281.98 127.393 305.8 98.2 305.8ZM379.8 460.5C350.514 460.5 326.7 436.686 326.7 407.4C326.7 378.114 350.514 354.3 379.8 354.3C409.086 354.3 432.9 378.114 432.9 407.4C432.9 436.686 409.086 460.5 379.8 460.5Z" fill="#21252D" stroke="#21252D" stroke-width="12"/>
+</svg>

layouts/scripts/toolbar/publish.jsx

@@ -5,6 +5,10 @@ function Publish(props = {}) {
   const [state, setState] = useState({loading: false});
   const updateState = (update) => setState(Object.assign({}, state, update));
 
+  if (window.devTool.publicUrl) {
+    return;
+  }
+
   return <div>
     {state.loading &&
       <div className="overlay overlay--loading">Loading, Please wait...</div>

layouts/scripts/toolbar/responsive.jsx

@@ -65,7 +65,8 @@ function Responsive(props = {}) {
   function updateController() {
     let frameBreakpoint = breakpoint;
     if (typeof frameBreakpoint !== 'string') {
-      frameBreakpoint = frameBreakpoint + 'px';
+      const scrollbarWidth = 15;
+      frameBreakpoint = (scrollbarWidth + frameBreakpoint) + 'px';
     }
 
     previewFrame.style.setProperty('--breakpoint', frameBreakpoint);

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") }}
 

layouts/styles/_page--preview.scss

@@ -1,5 +1,4 @@
 .preview {
-  overflow-y: scroll;
   height: calc(100% - var(--top_panel_height));
   position: relative;
 }
@@ -9,17 +8,14 @@
   margin-right: auto;
   margin-left: auto;
   min-height: 100%;
+  //height: 100%;
 
   --top_spacing: 0px;
   --breakpoint_top_spacing: 30px;
 
   margin-top: var(--top_spacing);
-  height: 100%;
   background-color: white;
-
   border: 0;
-  outline: 1px solid #E2E8F0;
-
   transition: max-width .3s ease-in-out, width .3s ease-in-out, margin-top .3s ease-in-out;
 
   &.has-breakpoint {

layouts/styles/_page--view-swiper.scss

@@ -1,9 +0,0 @@
-.swiper {
-  &-slide {
-    width: initial;
-  }
-
-  &-wrapper {
-    height: initial;
-  }
-}

layouts/styles/page--main.css

@@ -114,7 +114,6 @@ body {
 }
 
 .preview {
-  overflow-y: scroll;
   height: calc(100% - var(--top_panel_height));
   position: relative;
 }
@@ -127,10 +126,8 @@ body {
   --top_spacing: 0px;
   --breakpoint_top_spacing: 30px;
   margin-top: var(--top_spacing);
-  height: 100%;
   background-color: white;
   border: 0;
-  outline: 1px solid #E2E8F0;
   transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out, margin-top 0.3s ease-in-out;
 }
 #preview_frame.has-breakpoint {
@@ -139,7 +136,7 @@ body {
   max-width: var(--breakpoint);
 }
 
-.open_in_new_tab, .palette {
+.open_in_new_tab, .share, .palette {
   --size: 1.5rem;
   width: var(--size);
   height: var(--size);
@@ -162,4 +159,9 @@ body {
   background-image: url("/scripts/dist/toolbar/images/icon-palette.svg");
 }
 
+.share {
+  background-size: calc(var(--size) - 0.35rem);
+  background-image: url("/scripts/dist/toolbar/images/icon-share.svg");
+}
+
 /*# sourceMappingURL=page--main.css.map */

layouts/styles/page--main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH6DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE","file":"page--main.css"}
+{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EAEA;EACA;;;AHiEJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;EACA","file":"page--main.css"}

layouts/styles/page--main.scss

@@ -112,3 +112,9 @@ body {
   @extend .open_in_new_tab;
   background-image: url("/scripts/dist/toolbar/images/icon-palette.svg");
 }
+
+.share {
+  @extend .open_in_new_tab;
+  background-size: calc(var(--size) - 0.35rem);
+  background-image: url("/scripts/dist/toolbar/images/icon-share.svg");
+}

layouts/styles/page--view.css

@@ -2,24 +2,8 @@ body {
   margin: 0;
 }
 
-main {
-  margin-left: auto;
-  margin-right: auto;
-  min-height: 100%;
-  overflow-x: hidden;
-}
-main .swiper-slide {
-  width: initial;
-}
-main .swiper-wrapper {
-  height: initial;
-}
-
 .body--iframe {
-  overflow-y: hidden;
-}
-.body--iframe main {
-  overflow-y: auto;
+  overflow-y: scroll;
 }
 
 .fullscreen_layout {

layouts/styles/page--view.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--view.scss","_page--view-swiper.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;;ACPA;EACE;;AAGF;EACE;;;ADSJ;EACE;;AAEA;EAGE;;;AAIJ;EACE;EACA;EACA;EACA","file":"page--view.css"}
+{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;;;AAIF;EACE;;;AAGF;EACE;EACA;EACA;EACA","file":"page--view.css"}

layouts/styles/page--view.scss

@@ -2,25 +2,9 @@ body {
   margin: 0;
 }
 
-main {
-  margin-left: auto;
-  margin-right: auto;
-  min-height: 100%;
-  overflow-x: hidden;
-
-  // Fixes scrolling issues of swiperJS. Should be included in all projects.
-  @import "page--view-swiper";
-}
-
 // iFrame mode
 .body--iframe {
-  overflow-y: hidden;
-
-  main {
-    // If you change to "overflow: initial", the margin-top/bottom of first/last element will be not included.
-    // Test on fresh block setup where heading has margin-top.
-    overflow-y: auto;
-  }
+  overflow-y: scroll;
 }
 
 .fullscreen_layout {
@@ -29,4 +13,3 @@ main {
   background-image: url('https://i.ibb.co/pjwL8D1/shapelined-JBKdviwe-XI-unsplash.jpg');
   background-size: cover;
 }
-

layouts/sync.hbs

@@ -0,0 +1,18 @@
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Block Development Tool</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+</head>
+
+<body>
+
+<div id="screen">Loading...</div>
+
+<script src="/socket.io/socket.io.js"></script>
+<script src="/scripts/dist/sync.min.js"></script>
+
+</body>
+</html>

package.json

@@ -1,16 +1,16 @@
 {
 	"name": "@axe-web/block-dev-tool",
-	"version": "1.0.29",
+	"version": "1.0.31",
 	"author": {
 		"name": "AXE-WEB",
 		"email": "office@axe-web.com",
 		"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",
-		"dev-dev-tool": "NODE_ENV=development rollup --config rollup.config.js --watch",
+		"info": "BLOCK_NAME=swiper-test MODULE_PATH= node debug.js",
+		"dev": "BLOCK_NAME=swiper-test MODULE_PATH= node server.js",
+		"build-platform": "BLOCK_NAME=swiper-test MODULE_PATH= node ./build.js",
+		"dev-dev-tool": "rollup --config rollup.config.js --watch",
 		"build-dev-tool": "rollup --config rollup.config.js"
 	},
 	"engines": {
@@ -19,8 +19,10 @@
 	"license": "ISC",
 	"type": "module",
 	"dependencies": {
+		"@axe-web/create-block": "^1.1.30",
 		"@braintree/sanitize-url": "^6.0.0",
 		"archiver": "^5.3.1",
+		"body-parser": "^1.20.2",
 		"browser-sync": "^2.27.9",
 		"config": "^3.3.7",
 		"escape-html": "^1.0.3",
@@ -37,12 +39,15 @@
 		"lodash-es": "^4.17.21",
 		"mem-fs": "^2.2.1",
 		"mem-fs-editor": "^9.5.0",
+		"mime-types": "^2.1.35",
+		"ngrok": "^5.0.0-beta.2",
 		"node-fetch": "^3.2.10",
 		"open": "^8.4.0",
 		"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 +62,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": {

platforms/hubspot/hubspot-email-adapter.js

@@ -26,6 +26,10 @@ export async function createDistFolder(blockName, projectPath = '') {
 }
 
 export function getBlockFields(block = {}, type = 'content') {
+  if (!block['field_groups']) {
+    return [];
+  }
+
   const fields_group = block['field_groups'].find((group) => group.name === type);
   const fields = [];
 

platforms/wordpress/wordpress-adapter.js

@@ -1,5 +1,5 @@
 import path from "path";
-import {mkdir, copyFile} from "fs/promises";
+import fs, {mkdir, copyFile} from "fs/promises";
 import {capitalize, createFiles, getBlockName, getConfigs, readJSONFile} from "../../helpers.js";
 import {fileURLToPath} from 'url';
 import {copy} from "fs-extra";
@@ -68,10 +68,17 @@ export async function buildWordPress(blockName, args = {}) {
     path.join(distPath, 'templates', 'scripts', `${data.blockFilename}.min.js`),
   );
 
-  await copy(
-    path.join(projectPath, 'src', 'images'),
-    path.join(distPath, 'templates', 'images'),
-  );
+  try {
+    const imagesPath = path.join(projectPath, 'src', 'images');
+    await fs.access(imagesPath);
+
+    await copy(
+      path.join(imagesPath),
+      path.join(distPath, 'templates', 'images'),
+    );
+  } catch (err) {
+    // Folder doesn't exist.
+  }
 
   const phpDataObject = await execPHPFile(path.join(phpGeneratorPath, 'build.php'), 'jsonToPhp', {
     json: await readJSONFile(path.join(projectPath, 'data', 'default.json'), "utf8"),

rollup.config.js

@@ -47,4 +47,26 @@ export default [{
     commonjs(),
     !devMode && terser()
   ]
+}, {
+  input: 'layouts/scripts/sync.jsx',
+  output: {
+    file: 'layouts/scripts/dist/sync.min.js',
+    sourcemap: devMode
+  },
+  plugins: [
+    nodeResolve({
+      extensions: [".js"],
+    }),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      preventAssignment: true,
+    }),
+    babel({
+      compact: false,
+      babelHelpers: 'bundled',
+      presets: ["@babel/preset-react"],
+    }),
+    commonjs(),
+    !devMode && terser()
+  ]
 }];

server.js

@@ -19,8 +19,27 @@ 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 {
+  getBlockConfigs,
+  getBlockData,
+  getBlockName,
+  getConfigs,
+  getImagesList,
+  isFileEmpty,
+  readJSONFile,
+  removeCommentsFromCss,
+  removeCommentsFromJs,
+  replaceNames,
+  syncFilesWithCloud,
+  uploadFile,
+  verifyVersion,
+  zipProject
+} from "./helpers.js";
 import PluginError from 'plugin-error';
+import {Server} from "socket.io";
+import {createServer} from 'http';
+import {authtoken, connect} from "ngrok";
+import bodyParser from "body-parser";
 
 /**
  * Constants
@@ -28,16 +47,37 @@ import PluginError from 'plugin-error';
 
 const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs();
 const blocksRegistry = isDev ? 'http://localhost:3020' : PRODUCTION_REGISTRY_URL;
+const DevToolToken = 'D9lgz0TvzXCnp0xnwVBL109DaAR6Puk6F7YewDhgmP8='; // Temporary token for development purposes.
 
+const dataFiles = await getDataFiles(projectPath);
+const DEFAULT_VIEW_LAYOUT = 'alignfull';
 
 /**
- * Init server
+ * 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 dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
+let previewFrameUrl = `/`; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
+let shareUrl = '';
+const sessions = [];
+let ignoreVersionSync = false;
+let bs;
+
+/**
+ * Init server
+ */
+
 const app = express();
+
+// parse application/x-www-form-urlencoded
+app.use(bodyParser.urlencoded({extended: false}))
+
+// parse application/json
+app.use(bodyParser.json())
+
+const httpServer = createServer(app);
+initSessionsServer(httpServer);
+
 const sass = gulpSass(dartSass);
 
 const hbs = create({
@@ -63,54 +103,85 @@ 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('/', async (req, res, next) => {
+  const data = getBlockConfigs({modulesPath, dataFiles});
   if (data.error && data.errorMessage) {
     return res.send(data.errorMessage);
   }
 
-  const baseView = config.has('baseView') ? config.get('baseView') : 'container';
+  const baseView = config.has('baseView') ? config.get('baseView') : DEFAULT_VIEW_LAYOUT;
   const baseViewUrl = `view/${baseView}`;
 
   data.helpers = {
-    port,
     include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
-    baseView,
-    previewFrameUrl: `${previewFrameUrl}/${baseViewUrl}`,
   }
 
+  try {
+    const verifiedVersion = await verifyVersion(projectPath, blocksRegistry);
+    if (!verifiedVersion && !ignoreVersionSync) {
+      return res.render('sync', data);
+    }
+  } catch (err) {
+    const errorMessage = "Can't verify block version.";
+    console.log(errorMessage, err);
+    return next(new Error(errorMessage));
+  }
+
+  data.baseView = baseView;
+  data.port = `/${baseViewUrl}`;
+  data.previewFrameUrl = `${previewFrameUrl}/${baseViewUrl}`;
+  data.shareUrl = shareUrl;
+
+  // TODO: Need to review this logic, conflicts with the browsersync work after "/sync" action.
+  // if (req.headers.referer) {
+  //   // NGROK, public URL
+  //   data.shareUrl = undefined; // Link already shared.
+  //   data.previewFrameUrl = `/${baseViewUrl}`;
+  //   data.publicUrl = true;
+  // }
+
   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 = getDataOfFrame(!!req.query.iframe);
+
   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) {
-    data.iframeMode = true;
-  }
-
-  const baseView = req.params.baseView ?? 'container';
+  const baseView = req.params.baseView ?? DEFAULT_VIEW_LAYOUT;
 
   res.render(baseView, data)
 });
 
 app.get('/publish', async (req, res) => {
   const data = await readJSONFile(path.join(projectPath, `block.json`));
-  let responseData;
+
+  // Trigger build on the registry server only if the type of the unit is `foundation` or `component`.
+  const uploadStaticFiles = ['foundation', 'component'].includes(data.type);
+
+  // Prepare list of static files for the registry server.
+  if (uploadStaticFiles) {
+    data.static_files = {
+      css: getBlockName(data.name).name + '.min.css',
+      js: getBlockName(data.name).name + '.min.js',
+      images: await getImagesList(path.join(projectPath, 'src', 'images')),
+    }
+
+    if (await isFileEmpty(path.join(projectPath, `src/scripts`, data.static_files.js), true)) {
+      delete data.static_files.js;
+    }
+
+    if (!data.static_files.images.length) {
+      delete data.static_files.images;
+    }
+  }
+
+  let responseData = {
+    uploadBundleUrl: undefined,
+    staticFilesUrls: {}
+  };
 
   try {
     const response = await fetch(`${blocksRegistry}`, {
@@ -130,35 +201,87 @@ app.get('/publish', async (req, res) => {
     return;
   }
 
-  if (responseData.uploadUrl) {
-    await zipProject(path.join(projectPath, 'src'), path.join(projectPath, 'dist.zip'));
-    const body = await fs.readFile(path.join(projectPath, 'dist.zip'));
-    const response = await fetch(`${responseData.uploadUrl}`, {
-      method: 'PUT',
-      body,
-      headers: {'Content-Type': 'application/zip'}
-    });
+  // Start files uploading process.
+  try {
+    if (responseData.uploadBundleUrl) {
+      await zipProject(path.join(projectPath, 'src'), path.join(projectPath, 'dist.zip'));
+      await uploadFile(path.join(projectPath, 'dist.zip'), responseData.uploadBundleUrl); // Bundle
+    }
+
+    if (uploadStaticFiles) {
+      if (responseData.staticFilesUrls.css) {
+        await uploadFile(
+          path.join(projectPath, 'src/styles', data.static_files.css),
+          responseData.staticFilesUrls.css.uploadUrl,
+          (content) => {
+            if (responseData.staticFilesUrls.images) {
+              content = replaceNames(content, data.static_files.images, responseData.staticFilesUrls.images);
+            }
+
+            removeCommentsFromCss(content)
+            return content;
+          }); // CSS
+      }
+
+      if (responseData.staticFilesUrls.js) {
+        await uploadFile(
+          path.join(projectPath, 'src/scripts', data.static_files.js),
+          responseData.staticFilesUrls.js.uploadUrl,
+          (data) => removeCommentsFromJs(data)
+        ); // JS
+      }
+
+      if (responseData.staticFilesUrls.images) {
+        for (let i = 0; i < data.static_files.images.length; i++) {
+          await uploadFile(
+            path.join(projectPath, 'src/images', data.static_files.images[i]),
+            responseData.staticFilesUrls.images[i].uploadUrl,
+          ); // Images
+        }
+      }
+    }
+  } catch (err) {
+    // TODO: Need to update the registry server.
+    await fs.unlink(path.join(projectPath, 'dist.zip')); // Remove local bundle
+
+    res.json({success: false, message: err.message});
+    return;
+  }
+
+  await fs.unlink(path.join(projectPath, 'dist.zip')); // Remove local bundle
 
-    if (response.status !== 200) {
-      res.json({success: false, message: "Can't upload the archive, permissions error."});
-      // TODO: Need to update the registry server.
-      await fs.unlink(path.join(projectPath, 'dist.zip'));
+  // Trigger project's global files build on the registry server.
+  if (uploadStaticFiles) {
+    try {
+      await triggerGlobalProjectFilesBuild(getBlockName(data.name).project);
+    } catch (err) {
+      res.json({success: false, message: 'Something wrong with Project Builder.'});
       return;
     }
   }
 
+  try {
+    await syncFilesWithCloud(path.join(projectPath, 'block.json'), bs);
+  } catch (err) {
+    res.json({success: false, message: err});
+    return;
+  }
 
   res.json({success: true});
-
-  await fs.unlink(path.join(projectPath, 'dist.zip'));
 });
 
 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 designPreviewFiles = getListOfDesignPreviewFiles(jsonDataFileName, await fs.readdir(path.join(projectPath, 'design', 'preview')));
+  const dataFiles = await getDataFiles(projectPath);
+  const data = await getBlockData(jsonDataFileName, {projectPath});
+
+  let designPreviewFiles = [];
+  try {
+    designPreviewFiles = getListOfDesignPreviewFiles(jsonDataFileName, await fs.readdir(path.join(projectPath, 'design', 'preview')));
+  } catch (err) {
+    console.log('Preview Design doesn\'t exist');
+  }
 
   return res.json({
     dataOptions: dataFiles,
@@ -167,6 +290,22 @@ app.get('/data', async (req, res) => {
   });
 });
 
+app.post('/sync', async (req, res) => {
+  if (req.body['ignore']) {
+    ignoreVersionSync = true;
+    res.json({status: 200, message: 'Version upgrade is ignored.'});
+    return;
+  }
+
+  try {
+    await syncFilesWithCloud(path.join(projectPath, `block.json`), bs, true);
+  } catch (err) {
+    res.status(500).json({status: 500, message: err});
+  }
+
+  res.json({status: 200, message: 'Successfully synced!'});
+});
+
 // Errors handler
 app.use(handleSyntaxErrors);
 
@@ -175,10 +314,14 @@ 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();
 
 // BrowserSync
+shareUrl = await getShareableUrl();
 const bsOptions = await startBrowserSync();
 port = bsOptions.port;
 previewFrameUrl = bsOptions.previewFrameUrl;
@@ -207,14 +350,32 @@ function getListOfDesignPreviewFiles(jsonDataFileName, previewFiles) {
     });
 }
 
+function getDataOfFrame(isIframe = false) {
+  const data = {config: getBlockConfigs({modulesPath, dataFiles})};
+  if (data.error && data.errorMessage) {
+    return data;
+  }
+
+  data.helpers = {
+    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
+  }
+
+  if (isIframe) {
+    data.iframeMode = true;
+  }
+
+  return data;
+}
+
 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}`);
 
-      const bs = browserSync.create();
+      // BS is global variable.
+      bs = browserSync.create();
 
       const files = getJSBundleFiles();
       gulp.watch(files, {delay: 400}, gulp.series(['build-script-files', function (cb) {
@@ -227,14 +388,22 @@ 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({
+      const args = {
         proxy: `http://localhost:${PORT}`,
         open: false
-      }, (err, bs) => {
+      };
+
+      if (shareUrl) {
+        args.socket = {
+          domain: shareUrl
+        };
+      }
+
+      bs.init(args, (err, bs) => {
         if (err) {
           return reject(err);
         }
@@ -316,7 +485,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 +526,79 @@ 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});
+  });
+}
+
+async function getShareableUrl() {
+  let domain = PRODUCTION_REGISTRY_URL;
+  let data = {}
+
+  try {
+    const response = await fetch(`${domain}/dev-tool/?devToolToken=${DevToolToken}`);
+    data = await response.json();
+  } catch (e) {
+    console.log('Error:', `Can't load data from DevTool endpoint: ${domain}`);
+  }
+
+  if (data.statusCode !== 200) {
+    console.log('Reply from DevTool endpoint:', data.message);
+    return null;
+  }
+
+  let url;
+  try {
+    await authtoken(data.ngrokApiToken);
+    url = await connect(port);
+  } catch (e) {
+    console.log('Error:', `Can't connect to ngrok, probably wrong token.`);
+  }
+
+  return url;
+}
+
+async function triggerGlobalProjectFilesBuild(project) {
+  const response = await fetch(`${blocksRegistry}/project-files`, {
+    method: 'POST',
+    body: JSON.stringify({project}),
+    headers: {'Content-Type': 'application/json'}
+  });
+
+  return response.json();
+}
+
+async function getDataFiles(projectPath) {
+  const dataFiles = [];
+
+  try {
+    await fs.access(path.join(projectPath, 'data'));
+
+    const files = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
+    dataFiles.push(...files);
+  } catch (e) {
+    console.log('Warning: data folder not found.');
+  }
+
+  return dataFiles;
+}