Added option to generate test variations.

# Conflicts:
#	layouts/scripts/dist/frame-index.min.js
#	layouts/scripts/dist/frame-index.min.js.map
#	layouts/scripts/dist/index.min.js
#	layouts/scripts/dist/index.min.js.map

.editorconfig

@@ -18,6 +18,10 @@ indent_size = 2
 indent_style = tab
 indent_size = 4
 
+[*.php]
+indent_style = tab
+indent_size = 4
+
 [*.md]
 trim_trailing_whitespace = false
 

build.js

@@ -1,74 +1,57 @@
 #!/usr/bin/env node
+// For development purposes - run `npm run build-platform`.
 
-import {exec} from 'child_process';
 import config from 'config';
-import Generator from "yeoman-generator";
-import yeoman from 'yeoman-environment';
-import {buildHubspot} from "./platforms/hubspot/hubspot-adapter.js";
-import {getConfigs} from "./helpers.js";
-import {buildWordPress} from "./platforms/wordpress/wordpress-adapter.js";
-import path from "path";
+import prompts from "prompts";
+import {buildExportFiles, getConfigs} from "./helpers.js";
 
-const {modulesPath, projectPath} = getConfigs();
+const {isDev, developmentBlockName} = getConfigs();
+const blockName = !isDev && config.has('blockName') ? config.get('blockName') : developmentBlockName;
 
-const blockName = config.has('blockName') ? config.get('blockName') : 'development';
+export const PLATFORM_OPTIONS = [{
+  name: 'wordpress-acf-block',
+  title: 'WordPress AFC Block'
+}, {
+  name: 'wordpress',
+  title: 'WordPress'
+}, {
+  name: 'wordpress-component-manager',
+  title: 'WordPress (Component Manager)'
+}, {
+  name: 'wordpress-elementor',
+  title: 'WordPress Elementor'
+}, {
+  name: 'hubspot',
+  title: 'Hubspot'
+}, {
+  name: 'hubspot-email',
+  title: 'Hubspot Email'
+}, {
+  name: 'javascript',
+  title: 'JavaScript'
+}, {
+  name: 'php',
+  title: 'PHP'
+}];
 
-class buildGenerator extends Generator {
-  async prompting() {
-    this.data = await this.prompt([
-      {
-        type: "list",
-        name: "platform",
-        message: "Choose Platform",
-        choices: ['WordPress', 'WordPress Block', 'Hubspot', 'Hubspot Email', 'JavaScript', 'PHP'],
-        default: 'WordPress'
-      }
-    ])
-  }
+const data = await getExportData();
+const selectedPlatform = PLATFORM_OPTIONS[data['platform']];
+await buildExportFiles(blockName, selectedPlatform);
 
-  writing() {
-    new Promise((resolve => {
-      if (['WordPress', 'PHP'].includes(this.data.platform)) {
-        const backPath = modulesPath ? modulesPath.split('/').map(() => '..').join('/') : '';
+console.log('--------------------\nDone!');
 
-        return new Promise((resolve, reject) => {
-          const phpGeneratorPath = path.join(modulesPath, 'platforms', 'php');
-          exec(`cd ${phpGeneratorPath} && composer install && php build.php '${blockName}' '${backPath}' '${projectPath}'`, function (error, stdout) {
-            if (error) {
-              console.log('Error:', error)
-              reject(error);
-            }
+//
+// Functions
+//
 
-            console.log(stdout);
-            resolve();
-          });
-        }).then(() => {
-          if (this.data.platform === 'WordPress') {
-            return buildWordPress();
-          }
-
-          if (this.data.platform === 'WordPress Block') {
-            return buildWordPress(true);
-          }
-        });
-
-      } else if (this.data.platform === 'Hubspot Email') {
-        buildHubspot(blockName)
-          .then(() => {
-            resolve();
-          });
-      } else if (this.data.platform === 'Hubspot') {
-        console.log('"Hubspot" Coming soon...');
-        resolve();
-      } else {
-        resolve();
-      }
-    }))
-      .then(() => {
-        console.log('--------------------\nDone!');
-      });
-  }
+function getExportData() {
+  return prompts([
+    {
+      type: "select",
+      name: "platform",
+      message: "Choose Platform",
+      choices: PLATFORM_OPTIONS.map(item => item.title),
+      default: 'WordPress'
+    }
+  ]);
 }
-
-const build = new buildGenerator([], {env: yeoman.createEnv()}, {});
-build.run().then(() => null);

debug.js

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+
+import {getConfigs} from "./helpers.js";
+
+const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs();
+
+console.log('----------------------------------\n')
+console.log('Local Details', process.versions, '\n');
+console.log('Configs', {
+  isDev,
+  modulesPath,
+  projectPath,
+  developmentBlockName
+});
+console.log('\n----------------------------------\n')

env.js

@@ -0,0 +1,46 @@
+import path from 'path';
+
+/**
+ * Since this file overwrites environment variables for `config` lib,
+ * it's important to "import" this file before all scripts in entry point file,
+ * especially before `config` module import.
+ */
+
+
+/**
+ * Export constant variables
+ */
+export const PRODUCTION_REGISTRY_URL = 'https://blocks-registery.axe-web.com';
+export const IS_DEV = process.env.NODE_ENV === 'development';
+export const BLOCK_NAME = process.env.BLOCK_NAME;
+
+/**
+ * Overwrite env variables.
+ */
+
+process.env.NODE_CONFIG_DIR = path.join(getProjectPath(), 'config');
+
+
+export function getModulePath() {
+  let modulePath = 'node_modules/block-dev-tool';
+
+  if (typeof process.env.MODULE_PATH !== 'undefined') {
+    modulePath = process.env.MODULE_PATH;
+  } else if (process.env.BLOCK_NAME) {
+    modulePath = 'node_modules/@axe-web/block-dev-tool';
+  }
+
+  return modulePath;
+}
+
+export function getProjectPath() {
+  let projectPath = '';
+
+  if (typeof process.env.PROJECT_PATH !== 'undefined') {
+    projectPath = path.join(process.env.PROJECT_PATH ?? '', process.env.BLOCK_NAME ?? '')
+  } else if (process.env.BLOCK_NAME) {
+    projectPath = path.join('blocks', process.env.BLOCK_NAME ?? '')
+  }
+
+  return projectPath;
+}

helpers.js

@@ -1,26 +1,27 @@
 import path from 'path';
+import {BLOCK_NAME, getModulePath, getProjectPath, IS_DEV} from "./env.js";
 import config from 'config';
 import {fileURLToPath} from 'url';
 import memFs from 'mem-fs';
 import editor from 'mem-fs-editor';
+import fsExtra from "fs-extra";
+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";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 export function getConfigs() {
-  const isDev = process.env.NODE_ENV === 'development'; // Check README file in case you get "missing files" error.
-  const developmentBlockName = process.env.BLOCK_NAME;
-
   return {
-    isDev,
-    developmentBlockName,
-    modulesPath: isDev ? '' : 'node_modules/block-dev-tool',
-    projectPath: isDev ? path.join('blocks', developmentBlockName) : '',
+    isDev: IS_DEV,
+    developmentBlockName: BLOCK_NAME,
+    modulesPath: getModulePath(),
+    projectPath: getProjectPath(),
   };
 }
 
-import fsExtra from "fs-extra";
-
 export async function readJSONFile(jsonFile) {
   let data = {};
 
@@ -42,29 +43,26 @@ 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.
-        {
-          projectDir: modulesPath, activeDataFile: jsonFileName, dataFiles: dataFiles.map((name) => {
-            return {
-              name, active: jsonFileName === name,
-            };
-          }), remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
-        })
-    });
-  }
-
   return data;
 }
 
+export function getBlockConfigs(args = {modulesPath: '', dataFiles: []}) {
+  return 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,
+    });
+}
+
 export function getBlockName(name = '') {
   if (name.startsWith('@')) {
     name = name.substring(1);
@@ -107,3 +105,58 @@ export function capitalize(str) {
     })
     .join(' ');
 }
+
+export async function zipProject(srcDir, outputFileName = 'dist.zip') {
+  // create a file to stream archive data to.
+  const output = await fsExtra.createWriteStream(outputFileName);
+  const archive = archiver('zip', {});
+
+  // listen for all archive data to be written
+  // 'close' event is fired only when a file descriptor is involved
+  output.on('close', function () {
+    console.log(archive.pointer() + ' total bytes');
+    console.log('archiver has been finalized and the output file descriptor has closed.');
+  });
+
+  // This event is fired when the data source is drained no matter what was the data source.
+  // It is not part of this library but rather from the NodeJS Stream API.
+  // @see: https://nodejs.org/api/stream.html#stream_event_end
+  output.on('end', function () {
+    console.log('Data has been drained');
+  });
+
+  // good practice to catch warnings (ie stat failures and other non-blocking errors)
+  archive.on('warning', function (err) {
+    if (err.code === 'ENOENT') {
+      // log warning
+    } else {
+      // throw error
+      throw err;
+    }
+  });
+
+  // good practice to catch this error explicitly
+  archive.on('error', function (err) {
+    throw err;
+  });
+
+  // pipe archive data to the file
+  archive.pipe(output);
+
+  // append files from a subdirectory, putting its contents at the root of archive
+  archive.directory(srcDir, false);
+
+  // finalize the archive (ie we are done appending files but streams have to finish yet)
+  // 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehand
+  await archive.finalize();
+}
+
+export async function buildExportFiles(blockName, platform) {
+  if (platform.name.startsWith('wordpress')) {
+    await buildWordPress(blockName, {platform: platform.name});
+  } else if (platform.name === 'hubspot-email') {
+    await buildHubspotEmail(blockName)
+  } else if (platform.name === 'hubspot') {
+    await buildHubspotPage(blockName)
+  }
+}

layouts/alignfull.hbs

@@ -2,11 +2,9 @@
 
 {{> (include_partial "layouts/partials/head") }}
 
-<body>
+<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

@@ -2,13 +2,11 @@
 
 {{> (include_partial "layouts/partials/head") }}
 
-<body>
+<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,11 +14,14 @@
 <script>
   window.devTool = {
     previewFrameUrl: '{{ previewFrameUrl }}',
+    {{#if publicUrl}}
+      publicUrl: true,
+    {{/if}}
   };
 </script>
 
 <div class="preview">
-  <iframe id="preview_frame" src="{{ previewFrameUrl }}" class="breakpoint"></iframe>
+  <iframe id="preview_frame" src="{{ previewFrameUrl }}?iframe=true" class="breakpoint"></iframe>
 </div>
 
 <script src="/scripts/dist/index.min.js"></script>

layouts/partials/head.hbs

@@ -2,11 +2,11 @@
   <meta charset="UTF-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.cssUrl }}
   {{#each config.cssUrl }}
   <link rel="stylesheet" href="{{ this }}">
   {{/each}}
   {{/if}}<link rel="stylesheet" href="/styles/page--view.css">{{# if config.blockName}}
   <link rel="stylesheet" href="/styles/{{ config.blockName }}.min.css">{{/if}}
-  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
 </head>

layouts/partials/scripts.hbs

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

layouts/partials/toolbar.hbs

@@ -4,11 +4,17 @@
 
   <div class="page_toolbar__middle">
     <div>
-      Sizes: <b>1rem = {{ config.remToPx }}px</b>
+      Version: <b>1rem = {{ config.version }}px</b>
     </div>
   </div>
 
   <div class="page_toolbar__right">
-    <a href="{{ previewFrameUrl }}" target="_blank" class="open_in_new_tab"></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>
 </header>

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

@@ -0,0 +1,167 @@
+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 '/';
+  });
+
+  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();
+  }
+}
+//# sourceMappingURL=frame-index.min.js.map

layouts/scripts/dist/index.min.js

@@ -9354,7 +9354,7 @@ const ResponsiveButtonStyle = qe.div`
 const responsiveOptions = {
   desktop: [1920, 1800, 1680, 1440, 1360, 1280, 1024],
   tablet: [992, 768, 600],
-  mobile: [480, 414, 375, 360]
+  mobile: [480, 414, 375, 360, 320]
 };
 const defaultResponsiveOptions = {
   reset: '100%',
@@ -9513,6 +9513,9 @@ function Publish(props = {}) {
     loading: false
   });
   const updateState = update => setState(Object.assign({}, state, update));
+  if (window.devTool.publicUrl) {
+    return;
+  }
   return /*#__PURE__*/React.createElement("div", null, state.loading && /*#__PURE__*/React.createElement("div", {
     className: "overlay overlay--loading"
   }, "Loading, Please wait..."), /*#__PURE__*/React.createElement("button", {
@@ -9579,7 +9582,10 @@ const SidebarStyle = qe.div`
     visibility: visible;
   }
 
-  pre {
+  pre, textarea {
+    height: 100%;
+    //min-height: 480px;
+    resize: vertical;
     overflow-x: auto;
     padding: 0.5rem;
     background-color: #EDF2F7;
@@ -9588,6 +9594,20 @@ const SidebarStyle = qe.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;
   }
 `;
 const SidebarHeaderStyle = qe.header`
@@ -9880,21 +9900,24 @@ function DesignPreview({
   }
 }
 
+const PRODUCTION_REGISTRY_URL = 'https://blocks-registery.axe-web.com';
 function DataOptions(props = {}) {
   props.rootAttributes = props.rootAttributes ?? {};
   const initialState = {
     dataName: 'default',
     data: {},
+    dataText: '{}',
     dataOptions: [],
-    designPreview: []
+    designPreview: [],
+    errorMessage: null,
+    loading: false
   };
   const [state, setState] = react.exports.useState(initialState);
   const [previewOption, setPreviewOption] = react.exports.useState(getDesignPreviewImage(state.dataName, state.designPreview));
   const updateState = update => setState(Object.assign({}, state, update));
   const [sidebarOpen, setSidebarOpen] = react.exports.useState(false);
   react.exports.useEffect(async () => {
-    const data = await fetchDataOptions(state.dataName);
-    updateState(data);
+    await syncDataOptions(state.dataName);
   }, []);
   const handleCloseSidebarEscEvent = react.exports.useCallback(e => {
     if (isEscHit(e)) {
@@ -9942,22 +9965,88 @@ function DataOptions(props = {}) {
     name: "data",
     id: "data-options",
     onChange: e => changeDataOption(e),
-    value: state.dataName
+    value: state.dataName,
+    disabled: state.loading
   }, state.dataOptions.map(item => {
     const isSelected = state.dataName === item;
     return /*#__PURE__*/React.createElement("option", {
       value: item,
       selected: isSelected
     }, item);
-  }))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2)), /*#__PURE__*/React.createElement("button", {
+  }))), state.data && /*#__PURE__*/React.createElement("textarea", {
+    value: state.dataText,
+    onChange: dataOptionUpdate,
+    disabled: state.loading
+  }), state.errorMessage && /*#__PURE__*/React.createElement("p", {
+    className: 'alert alert--error'
+  }, state.errorMessage), state.loading && /*#__PURE__*/React.createElement("p", {
+    className: 'alert'
+  }, "Loading, please wait..."), /*#__PURE__*/React.createElement("div", {
+    className: 'actions'
+  }, /*#__PURE__*/React.createElement("button", {
     className: "btn btn--secondary",
+    disabled: state.loading,
     onClick: e => copyToClipboard(e, state.data)
-  }, "Copy to Clipboard")));
+  }, "Copy to Clipboard"), /*#__PURE__*/React.createElement("button", {
+    className: "btn btn--secondary",
+    disabled: state.loading,
+    onClick: e => generateVariation(e, state.data)
+  }, "Generate Test"))));
 
   //
   // 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 => {
+      if (result.statusCode !== 200) {
+        throw new Error(result.message);
+      }
+      const data = result.variation;
+      updateState({
+        dataText: JSON.stringify(data, null, 2),
+        data
+      });
+      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());
@@ -9967,11 +10056,7 @@ function DataOptions(props = {}) {
   }
   async function changeDataOption(e) {
     const dataName = e.target.value;
-    props.rootAttributes.previewFrame.src = window.devTool.previewFrameUrl + '?data=' + dataName;
-    const dataOption = await fetchDataOptions(dataName);
-    updateState(Object.assign({}, dataOption, {
-      dataName
-    }));
+    await syncDataOptions(dataName);
   }
   async function fetchDataOptions(name = 'default') {
     const queryParameters = new URLSearchParams({
@@ -9999,6 +10084,22 @@ 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) {
   e.stopPropagation();
@@ -10035,19 +10136,31 @@ function setupDataOptions(rootAttributes) {
   root.render(html);
 }
 
-const previewFrame = document.getElementById('preview_frame');
+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';
+  });
+}
+function getPreviewFrame() {
+  return document.getElementById('preview_frame');
+}
+
 const rootAttributes = {
-  previewFrame
+  previewFrame: getPreviewFrame()
 };
+setupFrameResizeListener();
 setupResponsiveness(rootAttributes);
 setupDataOptions(rootAttributes);
 setupPublish(rootAttributes);
-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));
-  previewFrame.style.height = data.height + 'px';
-});
 //# sourceMappingURL=index.min.js.map

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

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="#21252d">
+  <path
+    d="M24 45.25q-4.35 0-8.225-1.675T9 39q-2.9-2.9-4.575-6.775Q2.75 28.35 2.75 24q0-4.5 1.675-8.375t4.625-6.75Q12 6 15.95 4.35q3.95-1.65 8.4-1.65 4.2 0 8 1.425t6.675 3.95Q41.9 10.6 43.6 14.05q1.7 3.45 1.7 7.5 0 5.7-3.2 9.35-3.2 3.65-8.9 3.65h-2.9q-.8 0-1.4.65-.6.65-.6 1.45 0 1.25.5 1.75t.5 1.55q0 2.2-1.5 3.75-1.5 1.55-3.8 1.55ZM24 24Zm-11.2 1.3q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75Zm6.1-8.15q1 0 1.75-.75t.75-1.75q0-1.05-.75-1.775-.75-.725-1.75-.725-1.05 0-1.775.725-.725.725-.725 1.725 0 1.05.725 1.8t1.775.75Zm10.25 0q1 0 1.75-.75t.75-1.75q0-1.05-.75-1.775-.75-.725-1.75-.725-1.05 0-1.775.725-.725.725-.725 1.725 0 1.05.725 1.8t1.775.75Zm6.2 8.15q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1.05 0-1.775.75-.725.75-.725 1.75t.725 1.75q.725.75 1.775.75ZM23.8 40.55q.4 0 .6-.175.2-.175.2-.625 0-.7-.75-1.175-.75-.475-.75-2.375 0-2.45 1.65-4.4 1.65-1.95 4.1-1.95h4.35q3.7 0 5.525-2.2 1.825-2.2 1.825-5.8 0-6.6-4.925-10.5Q30.7 7.45 24.4 7.45q-7.1 0-12.025 4.825Q7.45 17.1 7.45 24q0 6.9 4.8 11.725 4.8 4.825 11.55 4.825Z"/>
+</svg>

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-index.js

@@ -1,27 +0,0 @@
-'use strict';
-
-const heightLimit = window.outerHeight * 2;
-let height = getCurrentHeight();
-setupResizeListener();
-
-///
-
-function setupResizeListener() {
-  const resizeObserver = new ResizeObserver(handleHeightChange);
-  resizeObserver.observe(document.body);
-}
-
-function handleHeightChange(entries) {
-  const updatedHeight = getCurrentHeight();
-  if (height === updatedHeight || updatedHeight > heightLimit) {
-    return;
-  }
-
-  const RESIZE_CODE = 'resize:';
-  window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
-  height = updatedHeight;
-}
-
-function getCurrentHeight() {
-  return document.querySelector('body > main').scrollHeight;
-}

layouts/scripts/frame/editor.js

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,177 @@
+'use strict';
+
+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;
+  const debug = false;
+
+  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 (debug) {
+      console.log('Height Updates', 'Old vs New: ' + height, updatedHeight);
+    }
+
+    if (height === updatedHeight) {
+      return;
+    }
+
+    const RESIZE_CODE = 'resize:';
+    height = updatedHeight;
+    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
+
+    if (debug) {
+      console.log('Resize message sent: ', 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 '/';
+  });
+
+  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,22 +3,13 @@
 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 previewFrame = document.getElementById('preview_frame');
 const rootAttributes = {
-  previewFrame,
-}
+  previewFrame: getPreviewFrame(),
+};
 
+setupFrameResizeListener();
 setupResponsiveness(rootAttributes);
 setupDataOptions(rootAttributes);
-setupPublish(rootAttributes)
-
-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))
-  previewFrame.style.height = data.height + 'px';
-});
+setupPublish(rootAttributes);

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}/>
       }
 
-      <button className='btn btn--secondary' onClick={(e) => copyToClipboard(e, state.data)}>Copy to Clipboard</button>
+      {state.errorMessage &&
+        <p className={'alert alert--error'}>{state.errorMessage}</p>
+      }
+
+      {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,51 @@ 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 => {
+        if (result.statusCode !== 200) {
+          throw new Error(result.message);
+        }
+
+        const data = result.variation;
+        updateState({dataText: JSON.stringify(data, null, 2), data});
+        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,10 +164,7 @@ function DataOptions(props = {}) {
 
   async function changeDataOption(e) {
     const dataName = e.target.value;
-    props.rootAttributes.previewFrame.src = window.devTool.previewFrameUrl + '?data=' + dataName;
-
-    const dataOption = await fetchDataOptions(dataName);
-    updateState(Object.assign({}, dataOption, {dataName}));
+    await syncDataOptions(dataName);
   }
 
   async function fetchDataOptions(name = 'default') {
@@ -133,6 +196,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-palette.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="#21252d">
+  <path
+    d="M24 45.25q-4.35 0-8.225-1.675T9 39q-2.9-2.9-4.575-6.775Q2.75 28.35 2.75 24q0-4.5 1.675-8.375t4.625-6.75Q12 6 15.95 4.35q3.95-1.65 8.4-1.65 4.2 0 8 1.425t6.675 3.95Q41.9 10.6 43.6 14.05q1.7 3.45 1.7 7.5 0 5.7-3.2 9.35-3.2 3.65-8.9 3.65h-2.9q-.8 0-1.4.65-.6.65-.6 1.45 0 1.25.5 1.75t.5 1.55q0 2.2-1.5 3.75-1.5 1.55-3.8 1.55ZM24 24Zm-11.2 1.3q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75Zm6.1-8.15q1 0 1.75-.75t.75-1.75q0-1.05-.75-1.775-.75-.725-1.75-.725-1.05 0-1.775.725-.725.725-.725 1.725 0 1.05.725 1.8t1.775.75Zm10.25 0q1 0 1.75-.75t.75-1.75q0-1.05-.75-1.775-.75-.725-1.75-.725-1.05 0-1.775.725-.725.725-.725 1.725 0 1.05.725 1.8t1.775.75Zm6.2 8.15q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1.05 0-1.775.75-.725.75-.725 1.75t.725 1.75q.725.75 1.775.75ZM23.8 40.55q.4 0 .6-.175.2-.175.2-.625 0-.7-.75-1.175-.75-.475-.75-2.375 0-2.45 1.65-4.4 1.65-1.95 4.1-1.95h4.35q3.7 0 5.525-2.2 1.825-2.2 1.825-5.8 0-6.6-4.925-10.5Q30.7 7.45 24.4 7.45q-7.1 0-12.025 4.825Q7.45 17.1 7.45 24q0 6.9 4.8 11.725 4.8 4.825 11.55 4.825Z"/>
+</svg>

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

@@ -1,10 +1,14 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import * as ReactDOM from 'react-dom/client';
 
 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-button/ResponsiveButton.jsx

@@ -4,7 +4,7 @@ import {ButtonStyling, ResponsiveButtonStyle, ResponsiveOptionsDropdown} from ".
 const responsiveOptions = {
   desktop: [1920, 1800, 1680, 1440, 1360, 1280, 1024],
   tablet: [992, 768, 600],
-  mobile: [480, 414, 375, 360],
+  mobile: [480, 414, 375, 360, 320],
 }
 
 const defaultResponsiveOptions = {

layouts/scroll.hbs

@@ -0,0 +1,16 @@
+<html lang="en">
+
+{{> (include_partial "layouts/partials/head") }}
+
+<body class="{{#if iframeMode}}body--iframe{{/if}}">
+
+<div>
+  <section class="fullscreen_layout"></section>
+  <div id="hbs-container"></div>
+  <section class="fullscreen_layout"></section>
+</div>
+
+{{> (include_partial "layouts/partials/scripts") }}
+
+</body>
+</html>

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

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

layouts/styles/page--main.css

@@ -139,11 +139,11 @@ body {
   max-width: var(--breakpoint);
 }
 
-.open_in_new_tab {
+.open_in_new_tab, .share, .palette {
   --size: 1.5rem;
   width: var(--size);
   height: var(--size);
-  background-image: url("/scripts/toolbar/images/icon-open-new-tab.svg");
+  background-image: url("/scripts/dist/toolbar/images/icon-open-new-tab.svg");
   background-repeat: no-repeat;
   background-size: calc(var(--size) - 0.15rem);
   background-position: center center;
@@ -158,4 +158,13 @@ body {
   outline: none;
 }
 
+.palette {
+  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","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;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;;;AAGF;EAEE;EACA","file":"page--main.css"}

layouts/styles/page--main.scss

@@ -92,7 +92,7 @@ body {
   width: var(--size);
   height: var(--size);
 
-  background-image: url("/scripts/toolbar/images/icon-open-new-tab.svg");
+  background-image: url("/scripts/dist/toolbar/images/icon-open-new-tab.svg");
   background-repeat: no-repeat;
   background-size: calc(var(--size) - 0.15rem);
   background-position: center center;
@@ -107,3 +107,14 @@ body {
   border-radius: 0.25rem;
   outline: none;
 }
+
+.palette {
+  @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

@@ -1,11 +1,32 @@
 body {
   margin: 0;
-  overflow-y: hidden;
 }
 
 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;
+}
+
+.fullscreen_layout {
+  background-color: #9cc3ff;
+  min-height: 100%;
+  background-image: url("https://i.ibb.co/pjwL8D1/shapelined-JBKdviwe-XI-unsplash.jpg");
+  background-size: cover;
 }
 
 /*# sourceMappingURL=page--view.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA","file":"page--view.css"}
+{"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"}

layouts/styles/page--view.scss

@@ -1,18 +1,32 @@
 body {
   margin: 0;
-  overflow-y: hidden;
 }
 
 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;
+  }
+}
+
+.fullscreen_layout {
+  background-color: #9cc3ff;
+  min-height: 100%;
+  background-image: url('https://i.ibb.co/pjwL8D1/shapelined-JBKdviwe-XI-unsplash.jpg');
+  background-size: cover;
 }
 
-// Container rules must be provided by the projectStyles (theme).
-//.container {
-//  max-width: 1200px;
-//  margin-left: auto;
-//  margin-right: auto;
-//  padding-left: 15px;
-//  padding-right: 15px;
-//}

package.json

@@ -1,18 +1,20 @@
 {
 	"name": "@axe-web/block-dev-tool",
-	"version": "1.0.18",
+	"version": "1.0.27",
 	"author": {
 		"name": "AXE-WEB",
 		"email": "office@axe-web.com",
 		"url": "https://axe-web.com/"
 	},
 	"scripts": {
-		"start": "component-dev",
-		"dev": "NODE_ENV=development NODE_CONFIG_DIR=blocks/team/config BLOCK_NAME=team node server.js",
-		"build": "rollup --config rollup.config.js",
-		"build-platform": "NODE_ENV=development NODE_CONFIG_DIR=blocks/team/config BLOCK_NAME=team node ./build.js",
-		"build-platform-cli": "component-build",
-		"dev-js": "rollup --config rollup.config.js --watch"
+		"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"
+	},
+	"engines": {
+		"node": ">=14.17.3"
 	},
 	"license": "ISC",
 	"type": "module",
@@ -22,6 +24,7 @@
 		"browser-sync": "^2.27.9",
 		"config": "^3.3.7",
 		"escape-html": "^1.0.3",
+		"exec-php": "^0.0.6",
 		"express": "^4.17.3",
 		"express-handlebars": "^6.0.4",
 		"fs-extra": "^10.0.1",
@@ -34,13 +37,14 @@
 		"lodash-es": "^4.17.21",
 		"mem-fs": "^2.2.1",
 		"mem-fs-editor": "^9.5.0",
+		"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",
-		"yeoman-environment": "^3.10.0",
-		"yeoman-generator": "^5.6.1"
+		"ws": "^8.13.0"
 	},
 	"devDependencies": {
 		"@babel/preset-react": "^7.18.6",
@@ -54,15 +58,25 @@
 		"rollup": "^2.77.2",
 		"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": {
 		"component-dev": "./server.js",
-		"component-build": "./build.js"
+		"component-build": "./build.js",
+		"component-info": "./debug.js"
 	},
 	"files": [
+		"env.js",
 		"helpers.js",
-		"layouts/**/*",
+		"debug.js",
+		"layouts/**/*.hbs",
+		"layouts/styles/*.css*",
+		"layouts/scripts/dist/*.js*",
+		"layouts/scripts/dist/**/*.jpg",
+		"layouts/scripts/dist/**/*.png",
+		"layouts/scripts/dist/**/*.svg",
 		"platforms/**/*"
 	]
 }

platforms/hubspot/hubspot-email-adapter.js

@@ -1,47 +1,31 @@
+import path from "path";
 import {readFile, writeFile, mkdir, copyFile} from "fs/promises";
+import {capitalize, getConfigs} from "../../helpers.js";
 
-export async function buildHubspot(blockName) {
-  const distPath = `./exports/hubspot/${blockName}.module`;
-  await mkdir(distPath, {recursive: true})
-  await copyFile(`./src/${blockName}.template.hbs`, `${distPath}/module.html`)
+export async function buildHubspotEmail(blockName) {
+  const distPath = await createDistFolder(blockName);
 
-  const metaData = {
+  // Template
+  let handlebars = await readFile(path.join(srcPath, `${blockName}.template.hbs`), "utf8");
+  await writeFile(path.join(distPath, 'module.html'), handlebarsToHubl(handlebars));
+
+  // JSON
+  await buildHubspotJSONFiles(distPath, {
     global: false,
     host_template_types: ["EMAIL"],
     label: capitalize(blockName),
     is_available_for_new_content: true
-  }
-
-  await writeFile(`${distPath}/meta.json`, JSON.stringify(metaData, null, 4));
-
-  const blockJSON = await readFile(`./block.json`, "utf8");
-  const block = JSON.parse(blockJSON);
-
-  const fields = getBlockFields(block, 'content');
-
-  // Styling TAB.
-  const stylingFields = getBlockFields(block, 'styling');
-
-  if (stylingFields.length) {
-    const stylingFieldsByName = {};
-    stylingFields.forEach(field => stylingFieldsByName[field.name] = field);
-
-    const stylingGroup = convertToHubspotField({
-      type: 'group',
-      name: 'style',
-      label: "Style",
-      sub_fields: stylingFieldsByName,
-    });
-    stylingGroup.tab = "STYLE";
-
-    fields.push(stylingGroup);
-  }
-
-  // Export JSON file.
-  await writeFile(`${distPath}/fields.json`, JSON.stringify(fields, null, 4));
+  });
 }
 
-function getBlockFields(block = {}, type = 'content') {
+export async function createDistFolder(blockName, projectPath = '') {
+  const distPath = path.join(projectPath, 'exports', 'hubspot', `${blockName}.module`);
+  await mkdir(distPath, {recursive: true})
+
+  return distPath;
+}
+
+export function getBlockFields(block = {}, type = 'content') {
   const fields_group = block['field_groups'].find((group) => group.name === type);
   const fields = [];
 
@@ -61,7 +45,7 @@ function getBlockFields(block = {}, type = 'content') {
   });
 }
 
-function convertToHubspotField(field = {}) {
+export function convertToHubspotField(field = {}) {
   const data = {
     id: field.name,
     name: field.name,
@@ -70,9 +54,12 @@ function convertToHubspotField(field = {}) {
     validation_regex: "",
     required: false,
     locked: false,
-    default: field.default
   };
 
+  if (field.default) {
+    data.default = field.default;
+  }
+
   let sub_fields = [];
 
   switch (field.type) {
@@ -111,12 +98,14 @@ function convertToHubspotField(field = {}) {
         display: "checkbox",
       });
     case 'select':
-      const choices = [];
-      Object.keys(data.choices).forEach(value => choices.push([value, data.choices[value]]));
+      const options = [];
+      if (field.options) {
+        Object.keys(field.options).forEach(value => options.push([value, field.options[value]]));
+      }
 
       return Object.assign({}, data, {
-        type: "select",
-        choices: [choices]
+        type: "choice",
+        choices: options
       });
     case 'link':
       return Object.assign({}, data, {
@@ -225,17 +214,57 @@ function convertToHubspotField(field = {}) {
   }
 }
 
-export function capitalize(str) {
-  if (typeof str !== 'string') {
-    return '';
+export async function buildHubspotJSONFiles(distPath, metaData) {
+  const {modulesPath, projectPath} = getConfigs();
+  await writeFile(path.join(distPath, 'meta.json'), JSON.stringify(metaData, null, 4));
+
+  const blockJSON = await readFile(path.join(projectPath, 'block.json'), "utf8");
+  const block = JSON.parse(blockJSON);
+
+  const fields = getBlockFields(block, 'content');
+
+  // Styling TAB.
+  const stylingFields = getBlockFields(block, 'styling');
+
+  if (stylingFields.length) {
+    const stylingFieldsByName = {};
+    stylingFields.forEach(field => stylingFieldsByName[field.name] = field);
+
+    const stylingGroup = convertToHubspotField({
+      type: 'group',
+      name: 'style',
+      label: "Style",
+    });
+
+    stylingGroup.children = Object.values(stylingFieldsByName);
+    stylingGroup.tab = "STYLE";
+
+    fields.push(stylingGroup);
   }
 
-  return str
-    .toLowerCase()
-    .split(/[ -_]/g)
-    .filter((word) => !!word)
-    .map((word) => {
-      return word.charAt(0).toUpperCase() + word.slice(1);
-    })
-    .join(' ');
+  // Export JSON file.
+  await writeFile(path.join(distPath, 'fields.json'), JSON.stringify(fields, null, 4));
+}
+
+
+export function handlebarsToHubl(handlebars) {
+  handlebars = handlebars.replace(/{{ else }}/g, '{% else %}');
+  handlebars = handlebars.replace(/{{else}}/g, '{% else %}');
+  handlebars = handlebars.replace(/{{#if /g, '{% if module.');
+  handlebars = handlebars.replace(/{{\/if}}/g, '{% endif %}');
+  handlebars = handlebars.replace(/{{#each /g, '{% for item in module.');
+  handlebars = handlebars.replace(/{{\/each}}/g, '{% endfor %}');
+  handlebars = handlebars.replace(/{{base_url}}/g, '');
+  handlebars = handlebars.replace(/{esc_attr /g, '{');
+  handlebars = handlebars.replace(/{esc_url /g, '{');
+  handlebars = handlebars.replace(/{esc_html /g, '{');
+  handlebars = handlebars.replace(/{{{ /g, '{{');
+  handlebars = handlebars.replace(/ }}}/g, '}}');
+  handlebars = handlebars.replace(/{{{/g, '{{');
+  handlebars = handlebars.replace(/}}}/g, '}}');
+  handlebars = handlebars.replace(/{{/g, '{{module.');
+  handlebars = handlebars.replace(/{{module. /g, '{{ module.');
+  handlebars = handlebars.replace(/.url/g, '.src');
+
+  return handlebars;
 }

platforms/hubspot/hubspot-page-adapter.js

@@ -0,0 +1,28 @@
+import path from "path";
+import {copyFile, readFile, writeFile} from "fs/promises";
+import {capitalize, getConfigs} from "../../helpers.js";
+import {buildHubspotJSONFiles, createDistFolder, handlebarsToHubl,} from "./hubspot-email-adapter.js";
+
+export async function buildHubspotPage(blockName) {
+  const {modulesPath, projectPath} = getConfigs();
+  const distPath = await createDistFolder(blockName, projectPath);
+
+  const srcPath = path.join(projectPath, 'src');
+
+  // Template
+  let handlebars = await readFile(path.join(srcPath, `${blockName}.template.hbs`), "utf8");
+  await writeFile(path.join(distPath, 'module.html'), handlebarsToHubl(handlebars));
+
+  // Assets
+  await copyFile(path.join(srcPath, 'styles', `${blockName}.min.css`), path.join(distPath, 'module.css'));
+  await copyFile(path.join(srcPath, 'scripts', `${blockName}.min.js`), path.join(distPath, 'module.js'));
+  // await copy(path.join(projectPath, 'src', 'images'), path.join(distPath, 'images'));
+
+  // JSON
+  await buildHubspotJSONFiles(distPath, {
+    global: false,
+    host_template_types: ["PAGE"],
+    label: capitalize(blockName),
+    is_available_for_new_content: true
+  });
+}

platforms/php/build.php

@@ -3,124 +3,149 @@
 // Composer - Autoloader
 require_once __DIR__ . '/vendor/autoload.php';
 
+use Brick\VarExporter\ExportException;
 use LightnCandy\Flags;
 use LightnCandy\LightnCandy;
+use Brick\VarExporter\VarExporter;
 
 trait Custom_Handlebars {
-  public array $custom_handlebars = [];
+	public array $custom_handlebars = [];
 
-  public function register_default_handlebar_helpers() {
-    $this->add_handlebar( 'esc_url', function ( $context ) {
-      if ( function_exists( 'esc_url' ) ) {
-        return esc_url( $context );
-      }
+	public function register_default_handlebar_helpers(): void {
+		$this->add_handlebar( 'esc_url', function ( $context ) {
+			if ( function_exists( 'esc_url' ) ) {
+				return esc_url( $context );
+			}
 
-      return $context;
-    } );
+			return $context;
+		} );
 
-    $this->add_handlebar( 'esc_attr', function ( $context ) {
-      if ( function_exists( 'esc_attr' ) ) {
-        return esc_attr( $context );
-      }
+		$this->add_handlebar( 'esc_attr', function ( $context ) {
+			if ( function_exists( 'esc_attr' ) ) {
+				return esc_attr( $context );
+			}
 
-      return $context;
-    } );
+			return $context;
+		} );
 
-    $this->add_handlebar( 'esc_html', function ( $context ) {
-      if ( function_exists( 'esc_html' ) ) {
-        return esc_html( $context );
-      }
+		$this->add_handlebar( 'esc_html', function ( $context ) {
+			if ( function_exists( 'esc_html' ) ) {
+				return esc_html( $context );
+			}
 
-      return $context;
-    } );
+			return $context;
+		} );
 
-    $this->add_handlebar( 'safe_html', function ( $context ) {
-      if ( function_exists( 'wp_kses_post' ) ) {
-        return wp_kses_post( $context );
-      }
+		$this->add_handlebar( 'safe_html', function ( $context ) {
+			if ( function_exists( 'wp_kses_post' ) ) {
+				return wp_kses_post( $context );
+			}
 
-      return $context;
-    } );
-  }
+			return $context;
+		} );
+	}
 
-  public function add_handlebar( $key, $func ) {
-    $this->custom_handlebars[ $key ] = $func;
-  }
+	public function add_handlebar( $key, $func ): void {
+		$this->custom_handlebars[ $key ] = $func;
+	}
 }
 
 class Component_Builder {
-  use Custom_Handlebars;
+	use Custom_Handlebars;
 
-  public string $component_name = '';
-  private string $module_path = '';
+	public string $component_name = '';
+	public string $module_path = '';
+	public string $project_path = '';
+	private string $dist_path = '';
 
-  function __construct( $component_name, $module_path, $project_path ) {
-    $this->module_path    = $module_path;
-    $this->project_path    = $project_path;
-    $this->component_name = $component_name;
-    $this->register_default_handlebar_helpers();
-  }
+	function __construct( $args = [] ) {
+		if ( ! isset( $args['backPath'] ) || ! isset( $args['projectPath'] ) || ! isset( $args['blockName'] ) || ! isset( $args['platform'] ) ) {
+			throw new \Exception( 'Error: Missing arguments. Make sure all parameter passed.' );
+		}
 
-  function build(): void {
-    $root_path = __DIR__ . '/' . $this->module_path . '/../../' . $this->project_path;
-    $file_name = $this->get_handlebars_template( "$root_path/src/$this->component_name.template.hbs" );
+		$this->module_path    = $args['backPath'];
+		$this->project_path   = $args['projectPath'];
+		$this->component_name = $args['blockName'];
 
-    $output_folder = $root_path . '/exports/wordpress/templates';
-    foreach ( [ 'styles', 'scripts', 'images' ] as $dir ) {
-      $output_dir = "$output_folder/$dir";
-      if ( is_dir( $output_dir ) === false ) {
-        mkdir( $output_dir, 0777, true );
-      }
-    }
+		$this->dist_path = __DIR__ . '/' . $this->module_path . '/../../' . $this->project_path . '/exports' . '/' . $args['platform'];
+		$this->register_default_handlebar_helpers();
 
-    rename( $file_name, "$output_folder/$this->component_name.template.php" );
-    copy( "$root_path/src/styles/$this->component_name.min.css", "$output_folder/styles/$this->component_name.min.css" );
-    copy( "$root_path/src/scripts/$this->component_name.min.js", "$output_folder/scripts/$this->component_name.min.js" );
-    shell_exec( "cp -r $root_path/src/images $output_folder" );
+		$this->add_handlebar( 'base_url', function ( $context ) {
+			$path = join( '/', [ 'blocks', $this->block_project, $this->block_name, 'templates' ] );
+			return plugins_url( $path . '/', 'axeweb-blocks-library/axeweb-blocks-library.php' );
+		} );
+	}
 
-    echo "Generated '$file_name'.";
-  }
+	function build(): void {
+		$root_path = __DIR__ . '/' . $this->module_path . '/../../' . $this->project_path;
 
-  private function get_handlebars_template( $path = '' ): string {
-    $template = file_get_contents( $path );
-    $phpStr   = LightnCandy::compile( $template,
-      [
-        'flags'   => Flags::FLAG_NOESCAPE | Flags::FLAG_PARENT | Flags::FLAG_SPVARS | Flags::FLAG_ELSE | Flags::FLAG_JSLENGTH | Flags::FLAG_JSTRUE,
-        'helpers' => $this->custom_handlebars ?? [],
-      ]
-    );
+		$this->buildTemplatePhpFile( $root_path );
+	}
 
-    /**
-     * NOTE:
-     * PHP 8.0.0 has problems with the LightCandy lib.
-     * If you're running the exact php8.0.0 version, try to downgrade to LightCandy@1.2.5.
-     */
+	private function buildTemplatePhpFile( $root_path ): void {
+		$file_name = $this->get_handlebars_template( "$root_path/src/$this->component_name.template.hbs" );
 
-    return self::create_cache_file( $path, $phpStr );
-  }
+		$output_folder = $this->dist_path . '/templates';
+		rename( $file_name, "$output_folder/$this->component_name.template.php" );
+	}
 
-  private static function create_cache_file( string $file_path, string $content ): string {
-    $file_path_parts = explode( ".", $file_path );
-    array_pop( $file_path_parts ); // remove ".hbs" format.
-    $file_path_parts[] = 'php';
-    $file_path         = join( '.', $file_path_parts );
+	private function get_handlebars_template( $path = '' ): string {
+		$template = file_get_contents( $path );
+		$phpStr   = LightnCandy::compile( $template,
+			[
+				'flags'   => Flags::FLAG_NOESCAPE | Flags::FLAG_PARENT | Flags::FLAG_SPVARS | Flags::FLAG_ELSE | Flags::FLAG_JSLENGTH | Flags::FLAG_JSTRUE | Flags::FLAG_THIS,
+				'helpers' => $this->custom_handlebars ?? [],
+			]
+		);
 
-    $comment = "
+		/**
+		 * NOTE:
+		 * PHP 8.0.0 has problems with the LightCandy lib.
+		 * If you're running the exact php8.0.0 version, try to downgrade to LightCandy@1.2.5.
+		 */
+
+		return self::create_cache_file( $path, $phpStr );
+	}
+
+	private static function create_cache_file( string $file_path, string $content ): string {
+		$file_path_parts = explode( ".", $file_path );
+		array_pop( $file_path_parts ); // remove ".hbs" format.
+		$file_path_parts[] = 'php';
+		$file_path         = join( '.', $file_path_parts );
+
+		$comment = "
 /**
  * FILE INFO:
  * This file was generated by LightCandy::compile function.
  * The original source is the .HBS(handlebars) file that is located next to this generated PHP file.
+ *
+ *  Compiled at " . date( 'Y-m-d h:i:s' ) . "
  */
 
  ";
 
-    $t = file_put_contents( $file_path, '<?php ' . $comment . $content . ' ?>' );
-    if ( $t === false ) {
-      die( "Error: Can't generate HBS template to PHP file. Cache folder is not accessible." );
-    }
+		$t = file_put_contents( $file_path, '<?php ' . $comment . $content . ' ?>' );
+		if ( $t === false ) {
+			throw new \Exception( "Error: Can't generate HBS template to PHP file. Cache folder is not accessible." );
+		}
 
-    return $file_path;
-  }
+		return $file_path;
+	}
 }
 
-( new Component_Builder( $argv[1], $argv[2], $argv[3] ) )->build();
+/**
+ * Functions below will be triggered by JavaScript (index.js).
+ */
+
+function build( $args = [] ): void {
+	( new Component_Builder( $args ) )->build();
+}
+
+/**
+ * @throws ExportException
+ */
+function jsonToPhp( $args = [] ): ?string {
+	$json = $args['json'] ?? [];
+
+	return VarExporter::export( $json );
+}

platforms/php/composer.json

@@ -6,6 +6,7 @@
 	},
 	"require": {
 		"php": ">=8.0",
-		"zordius/lightncandy": "^1.2.6"
+		"zordius/lightncandy": "^1.2.6",
+		"brick/varexporter": "^0.3.7"
 	}
 }

platforms/php/composer.lock

@@ -4,8 +4,113 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "1d9b4e7a02be366b48383c185193727f",
+    "content-hash": "6731e0a19d488ee457b6682e62ef9018",
     "packages": [
+        {
+            "name": "brick/varexporter",
+            "version": "0.3.7",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/brick/varexporter.git",
+                "reference": "3e263cd718d242594c52963760fee2059fd5833c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/brick/varexporter/zipball/3e263cd718d242594c52963760fee2059fd5833c",
+                "reference": "3e263cd718d242594c52963760fee2059fd5833c",
+                "shasum": ""
+            },
+            "require": {
+                "nikic/php-parser": "^4.0",
+                "php": "^7.2 || ^8.0"
+            },
+            "require-dev": {
+                "php-coveralls/php-coveralls": "^2.2",
+                "phpunit/phpunit": "^8.5 || ^9.0",
+                "vimeo/psalm": "4.23.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Brick\\VarExporter\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "A powerful alternative to var_export(), which can export closures and objects without __set_state()",
+            "keywords": [
+                "var_export"
+            ],
+            "support": {
+                "issues": "https://github.com/brick/varexporter/issues",
+                "source": "https://github.com/brick/varexporter/tree/0.3.7"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/BenMorel",
+                    "type": "github"
+                }
+            ],
+            "time": "2022-06-29T23:37:57+00:00"
+        },
+        {
+            "name": "nikic/php-parser",
+            "version": "v4.15.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/nikic/PHP-Parser.git",
+                "reference": "f59bbe44bf7d96f24f3e2b4ddc21cd52c1d2adbc"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/nikic/PHP-Parser/zipball/f59bbe44bf7d96f24f3e2b4ddc21cd52c1d2adbc",
+                "reference": "f59bbe44bf7d96f24f3e2b4ddc21cd52c1d2adbc",
+                "shasum": ""
+            },
+            "require": {
+                "ext-tokenizer": "*",
+                "php": ">=7.0"
+            },
+            "require-dev": {
+                "ircmaxell/php-yacc": "^0.0.7",
+                "phpunit/phpunit": "^6.5 || ^7.0 || ^8.0 || ^9.0"
+            },
+            "bin": [
+                "bin/php-parse"
+            ],
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "4.9-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "PhpParser\\": "lib/PhpParser"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Nikita Popov"
+                }
+            ],
+            "description": "A PHP parser written in PHP",
+            "keywords": [
+                "parser",
+                "php"
+            ],
+            "support": {
+                "issues": "https://github.com/nikic/PHP-Parser/issues",
+                "source": "https://github.com/nikic/PHP-Parser/tree/v4.15.2"
+            },
+            "time": "2022-11-12T15:38:23+00:00"
+        },
         {
             "name": "zordius/lightncandy",
             "version": "v1.2.6",

platforms/wordpress/templates/Template_Basic_Component.php

@@ -1,31 +1,55 @@
 <?php
 
-use Core\Global_Functions;
+namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>;
 
-class <%= blockClassModel %>_Component {
+class <%= blockClassModel %>_Component <% if (isComponentManager || isElementor) { %>extends \Core\Component <% } %>{
+	const VERSION = '<%= version %>';
+	public $block_project = '<%= ownerFilename %>';
+	public $block_name = '<%= blockFilename %>';
+	public $hook_prefix = 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>';
 
-	public function __construct() {
-		add_action( 'wp_enqueue_scripts', [ $this, 'register_assets' ] );
+	<% if (!isComponentManager && !isElementor) { %>public function __construct() {
+		parent::__construct();
+		// add_action( 'wp_enqueue_scripts', [ $this, 'register_assets' ] );
+		add_action( 'after_setup_theme', [ $this, 'register_assets' ] );
 	}
 
-	function register_assets(): void {
-		wp_enqueue_style( '<%= blockFilename %>',
-			get_template_directory_uri() . '/components/partials/<%= blockFilename %>/templates/styles/<%= blockFilename %>.min.css',
-			[ 'style-wp' ],
-			Global_Functions::get_current_version_number()
-		);
+	<% } %>function register_assets(): void {
+		$base_path = plugin_dir_url( __FILE__ ); // In Plugins
+		// $base_path = get_template_directory_uri() . '/components/partials/<%= blockFilename %>/'; // In Theme
 
-		wp_enqueue_script( '<%= blockFilename %>',
-			get_template_directory_uri() . '/components/partials/<%= blockFilename %>/templates/scripts/<%= blockFilename %>.min.js',
-			[ 'jquery', 'swiper' ],
-			Global_Functions::get_current_version_number(),
-			true
-		);
+		$style_deps = apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::style_deps', [ 'assets-style' ] );
+		wp_register_style( 'block-<%= blockFilename %>', $base_path . 'templates/styles/<%= blockFilename %>.min.css', $style_deps, self::VERSION );
+
+		$script_deps = apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::script_deps', [ 'assets-script' ] );
+		wp_register_script( 'block-<%= blockFilename %>', $base_path . 'templates/scripts/<%= blockFilename %>.min.js', $script_deps, self::VERSION, true );<% if (!isElementor) { %>
+
+		if ( ! is_admin() ) {
+			wp_enqueue_style( 'block-<%= blockFilename %>' );
+			wp_enqueue_script( 'block-<%= blockFilename %>' );
+		}<% } %>
 	}
 
-	public function render( $args = [] ): void {
-		$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( array_merge( [], $args ), self::class );
-		echo apply_filters( 'the_content', wpautop( $output ) );
+	public function get_content( $args = [] ): string {
+		$default_args = apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::default_args', [] ); // Not really practical.
+
+		$args = apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::prepare_args', array_merge( $default_args, $args ) );
+
+		$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( $args, self::class );
+
+		return apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::content', $output );
+	}<% if (isElementor) { %>
+
+	function register_custom_logic(): void {
+		add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_elementor_widget' ] );
 	}
 
+	function register_elementor_widget( $widgets_manager ): void {
+		require_once "helpers/<%= blockClassModel %>_Elementor_Widget.php";
+		$widgets_manager->register_widget_type( new Helpers\<%= blockClassModel %>_Elementor_Widget() );
+	}<% } %>
+
 }
+
+<% if (isComponentManager) { %><%= blockClassModel %>_Component::get_instance();<% } else {
+	%>new <%= blockClassModel %>_Component();<% } %>

platforms/wordpress/templates/Template_Component.php

@@ -3,53 +3,46 @@
 namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>;
 
 class <%= blockClassModel %>_Component extends \Core\Component {
+	const VERSION = '<%= version %>';
+	public $block_project = '<%= ownerFilename %>';
+	public $block_name = '<%= blockFilename %>';
+	public $hook_prefix = 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>';
 
 	public function get_content( $args = [] ): string {
-		$args = array_merge( Helpers\<%= blockClassModel %>_Defaults::default_args(), $args );
-    $args = Helpers\<%= blockClassModel %>_API::prepare_args( $args );
+		$default_args = apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::default_args', [] ); // Not really practical.
 
-		<% if (templateFormat === 'hbs') { %>return $this->get_component_template( __DIR__ . '/templates/<%= blockFilename %>.template.hbs', $args );<% } %>
-		<% if (templateFormat === 'php') { %>
-				$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( array_merge( [], $args ), self::class );
-    		echo apply_filters( 'the_content', wpautop( $output ) );
-		<% } %>
+		$args = apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::prepare_args', array_merge( $default_args, $args ) );
+
+		$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( $args, self::class );
+
+		return apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::content', $output );
 	}
+	<% if (!include_acf_block && !include_native_gutenberg_block) { %>function register_assets(): void {
+    $version = get_plugin_data( __DIR__ . "/../../scytale-custom-blocks.php" )['Version']; // In Plugins
+    // $version = \Core\Global_Functions::get_current_version_number(); // In Theme
 
-<% if (!include_acf_block && !include_native_gutenberg_block) { %>
-	public function register_assets() {
-		$this->add_style( __DIR__ . '/templates/styles/<%= blockFilename %>.min.css' );
-        <% if (include_script) { %>$this->add_script( __DIR__ . '/templates/scripts/<%= blockFilename %>.js' );<% } %>
+    // $base_path = get_template_directory_uri() . '/components/partials/<%= blockFilename %>/';
+    wp_enqueue_style( 'block-<%= blockFilename %>', plugins_url( 'templates/styles/<%= blockFilename %>.min.css', __FILE__ ), ['assets-style'], self::VERSION );<% if (include_script) { %>
+    wp_enqueue_script( 'block-<%= blockFilename %>', plugins_url( 'templates/scripts/<%= blockFilename %>.min.js', __FILE__ ), ['assets-script'], self::VERSION, true );<% } %>
+
+    wp_enqueue_script( 'script-block-<%= blockFilename %>' );
+  }<% } %>
+  <% if (include_acf_block) { %>  function register_acf_block() {
+		$this->register_block( __DIR__ . "/<%= blockFilename %>.block.json", [
+			'style_assets'  => [
+				[
+					'name' => '<%= blockFilename %>',
+					'url'  => plugins_url( 'templates/styles/<%= blockFilename %>.min.css', __FILE__ ),
+				]
+			],
+			'script_assets' => [
+				[
+					'name' => '<%= blockFilename %>',
+					'url'  => plugins_url( 'templates/scripts/<%= blockFilename %>.min.js', __FILE__ ),
+				]
+			]
+		] );
 	}
-
-<% } %><% if (include_elementor_widget) { %>   function register_custom_logic(): void {
-		add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_elementor_widget' ] );
-	}
-
-<% } %><% if (include_elementor_widget) { %>   function register_elementor_widget( $widgets_manager ) {
-		$widgets_manager->register_widget_type( new Helpers\<%= blockClassModel %>_Elementor_Widget() );
-	}
-
-<% } %><% if (include_acf_block) { %>  function register_acf_block() {
-    $this->register_block( __DIR__ . "/<%= blockFilename %>.block.json", [
-      'enqueue_assets'  => function () {
-	      wp_enqueue_style( '<%= blockFilename %>', \Core\Global_Functions::get_file_url( __DIR__ . '/templates/styles/<%= blockFilename %>.min.css', true ), [], get_blocks_version() );<% if (include_script) { %>
-	      wp_enqueue_script( '<%= blockFilename %>', \Core\Global_Functions::get_file_url( __DIR__ . '/templates/scripts/<%= blockFilename %>.js', true ), ['assets-script'], get_blocks_version() );<% } %>
-      },
-      'default'        => Helpers\<%= blockClassModel %>_Defaults::default_args(),
-      'supports' => [
-        //'jsx' => true,
-		'color'   => [
-			'background' => true,
-			'text'       => true,
-		],
-		'spacing' => [
-			'margin'  => [ 'top', 'bottom' ],
-			'padding' => [ 'top', 'bottom' ]
-		],
-      ]
-    ] );
-  }
-
 <% } %><% if (include_native_gutenberg_block) { %>  function register_native_gutenberg_block() {
     register_block_type( __DIR__ . '/templates/gutenberg-block/block.json' );<% if (include_script) { %>
 
@@ -64,5 +57,6 @@ class <%= blockClassModel %>_Component extends \Core\Component {
       );
     } );<% } %>
   }<% } %>
-
 }
+
+<%= blockClassModel %>_Component::get_instance();

platforms/wordpress/templates/helpers/Template_Defaults.php

@@ -8,8 +8,10 @@ namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>\Helpers;
 
 class <%= blockClassModel %>_Defaults {
 	public static function default_args(): array {
-		return [
-	       'title'           => '<%= title %>',
-		];
+		$args =  <%- defaultData %>;
+
+    // $args['base_url'] = \Core\Global_Functions::get_file_url( __DIR__ . '/../templates/' );
+
+    return $args;
 	}
 }

platforms/wordpress/templates/helpers/Template_Elementor_Widget.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>\Helpers;
+
+class <%= blockClassModel %>_Elementor_Widget extends \Elementor\Widget_Base {
+	const PLUGIN_NAME = '<%= blockFilename %>';
+
+	public function get_name() {
+		return self::PLUGIN_NAME;
+	}
+
+	public function get_title() {
+		return '<%= blockClassModel %>';
+	}
+
+	public function get_icon() {
+		return 'eicon-plus-square-o';
+	}
+
+	protected function _register_controls() {
+		$block_data = \Core\Block::get_block_data( __DIR__ . '/../<%= blockFilename %>.block.json' );
+		\Core\Elementor_Block::register_groups( $block_data, $this );
+	}
+
+	function get_style_depends() {
+		return [ 'block-<%= blockFilename %>' ];
+	}
+
+	function get_script_depends() {
+		return [ 'block-<%= blockFilename %>' ];
+	}
+
+	protected function render() {
+		$settings = $this->get_settings_for_display();
+
+		$component = new \AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>\<%= blockClassModel %>_Component();
+
+		$args = self::prepare( $settings );
+		$component->render( $args );
+	}
+
+	public static function prepare( $args ): array {
+	    // Prepare $args for render function.
+		return $args;
+	}
+}

platforms/wordpress/wordpress-adapter.js

@@ -2,23 +2,29 @@ import path from "path";
 import {mkdir, copyFile} from "fs/promises";
 import {capitalize, createFiles, getBlockName, getConfigs, readJSONFile} from "../../helpers.js";
 import {fileURLToPath} from 'url';
+import {copy} from "fs-extra";
+import {exec} from 'child_process';
+import execPhp from "exec-php";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const {projectPath} = getConfigs();
+export async function buildWordPress(blockName, args = {}) {
+  const isBlock = args.platform === 'wordpress-acf-block';
+  const isElementor = args.platform === 'wordpress-elementor';
+  const isComponentManager = args.platform === 'wordpress-component-manager'
 
-export async function buildWordPress(isBlock = false) {
-  const distPath = path.join(projectPath, 'exports', 'wordpress');
-  await mkdir(distPath, {recursive: true})
+  const {modulesPath, projectPath} = getConfigs();
 
-  const jsonFilePath = path.join(projectPath, 'block.json');
-  await copyFile(jsonFilePath, `${distPath}/block.json`)
+  const distPath = path.join(projectPath, 'exports', args.platform);
+  // await mkdir(distPath, {recursive: true})
+  await mkdir(path.join(distPath, 'templates'), {recursive: true})
 
-  let data = await readJSONFile(jsonFilePath);
+  const blockFilePath = path.join(projectPath, 'block.json');
+
+  let data = await readJSONFile(blockFilePath);
   Object.assign(data, getBlockName(data.name));
 
-  // let data = await readJSONFile(path.join(projectPath, `block.json`));
   const title = capitalize(data.name);
   const owner = capitalize(data.project);
 
@@ -31,12 +37,64 @@ export async function buildWordPress(isBlock = false) {
     ownerClass: owner.replace(/ /ig, '_'),
     ownerFilename: owner.toLowerCase().replace(/ /ig, '-'),
     templateFormat: 'php',
-    include_acf_block: false,
+    include_acf_block: isBlock,
     include_native_gutenberg_block: false,
     include_script: true,
-    include_elementor_widget: false,
+    include_elementor_widget: isElementor,
+    isElementor,
+    isComponentManager,
   });
 
+  await copyFile(blockFilePath, path.join(distPath, data.blockFilename + '.block.json'));
+
+  const backPath = modulesPath ? modulesPath.split('/').map(() => '..').join('/') : '';
+
+  const phpGeneratorPath = path.join(modulesPath, 'platforms', 'php');
+  await execCommand(`cd ${phpGeneratorPath} && composer install`);
+  await execPHPFile(path.join(phpGeneratorPath, 'build.php'), 'build', {
+    blockName,
+    backPath,
+    projectPath,
+    platform: args.platform
+  });
+
+  await copyStaticFile(
+    path.join(projectPath, 'src', 'styles', `${data.blockFilename}.min.css`),
+    path.join(distPath, 'templates', 'styles', `${data.blockFilename}.min.css`),
+  );
+
+  await copyStaticFile(
+    path.join(projectPath, 'src', 'scripts', `${data.blockFilename}.min.js`),
+    path.join(distPath, 'templates', 'scripts', `${data.blockFilename}.min.js`),
+  );
+
+  await copy(
+    path.join(projectPath, 'src', 'images'),
+    path.join(distPath, 'templates', 'images'),
+  );
+
+  const phpDataObject = await execPHPFile(path.join(phpGeneratorPath, 'build.php'), 'jsonToPhp', {
+    json: await readJSONFile(path.join(projectPath, 'data', 'default.json'), "utf8"),
+  });
+
+  // await createFiles(Object.assign({}, data, {defaultData: phpDataObject}), [{
+  //   from: `templates/helpers/Template_Defaults.php`,
+  //   to: `helpers/${data.blockClassModel}_Defaults.php`,
+  // }], {
+  //   pathDist: distPath,
+  //   generatorsPath: path.join(__dirname),
+  // });
+
+  if (isElementor) {
+    await createFiles(data, [{
+      from: `templates/helpers/Template_Elementor_Widget.php`,
+      to: `helpers/${data.blockClassModel}_Elementor_Widget.php`,
+    }], {
+      pathDist: distPath,
+      generatorsPath: path.join(__dirname)
+    });
+  }
+
   if (isBlock) {
     await createFiles(data, [{
       from: `templates/Template_Component.php`,
@@ -46,21 +104,13 @@ export async function buildWordPress(isBlock = false) {
       generatorsPath: path.join(__dirname)
     });
 
-    await createFiles(data, [{
-      from: `templates/helpers/Template_API.php`,
-      to: `helpers/${data.blockClassModel}_API.php`,
-    }], {
-      pathDist: distPath,
-      generatorsPath: path.join(__dirname)
-    });
-
-    await createFiles(data, [{
-      from: `templates/helpers/Template_Defaults.php`,
-      to: `helpers/${data.blockClassModel}_Defaults.php`,
-    }], {
-      pathDist: distPath,
-      generatorsPath: path.join(__dirname)
-    });
+    // await createFiles(data, [{
+    //   from: `templates/helpers/Template_API.php`,
+    //   to: `helpers/${data.blockClassModel}_API.php`,
+    // }], {
+    //   pathDist: distPath,
+    //   generatorsPath: path.join(__dirname)
+    // });
   } else {
     await createFiles(data, [{
       from: `templates/Template_Basic_Component.php`,
@@ -71,3 +121,44 @@ export async function buildWordPress(isBlock = false) {
     });
   }
 }
+
+export function execCommand(cmd = '') {
+  return new Promise((resolve, reject) => {
+
+    exec(cmd, function (error) {
+      if (error) {
+        console.log('Error:', error)
+        reject(error);
+      }
+
+      // console.log(stdout);
+      resolve();
+    });
+
+  });
+}
+
+function execPHPFile(file = '', functionName = '', args = {}) {
+  return new Promise((resolve, reject) => {
+    execPhp(file, 'php', (err, php, out) => {
+      if (err) {
+        console.error(out);
+        return reject(err);
+      }
+
+      php[functionName.toLowerCase()](args, (err, res, out) => {
+        if (err) {
+          console.error(out);
+          return reject(err);
+        }
+
+        return resolve(res);
+      })
+    })
+  });
+}
+
+async function copyStaticFile(from = '', to = '') {
+  await mkdir(path.dirname(to), {recursive: true})
+  await copyFile(from, to);
+}

rollup.config.js

@@ -3,13 +3,17 @@ import {nodeResolve} from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace';
 import css from "@modular-css/rollup";
-import copy from 'rollup-plugin-copy'
+import copy from 'rollup-plugin-copy';
+import {terser} from "rollup-plugin-terser";
 
-export default {
+const devMode = (process.env.NODE_ENV === 'development');
+console.log('Build Mode', devMode ? 'Development' : 'Production');
+
+export default [{
   input: 'layouts/scripts/index.js',
   output: {
     file: 'layouts/scripts/dist/index.min.js',
-    sourcemap: true
+    sourcemap: devMode,
   },
   plugins: [
     nodeResolve({
@@ -26,10 +30,21 @@ export default {
       presets: ["@babel/preset-react"],
     }),
     commonjs(),
+    !devMode && terser(),
     copy({
       targets: [
-        { src: 'layouts/scripts/toolbar/images/**/*', dest: 'layouts/scripts/dist/toolbar/images' }
+        {src: 'layouts/scripts/toolbar/images/**/*', dest: 'layouts/scripts/dist/toolbar/images'}
       ]
     })
   ],
-}
+}, {
+  input: 'layouts/scripts/frame/frame.js',
+  output: {
+    file: 'layouts/scripts/dist/frame-index.min.js',
+    sourcemap: devMode
+  },
+  plugins: [
+    commonjs(),
+    !devMode && terser()
+  ]
+}];

server.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
+import {PRODUCTION_REGISTRY_URL} from "./env.js";
 import path from 'path';
 import fetch from "node-fetch";
 import express from 'express';
 import {create} from 'express-handlebars';
-import fsExtra from 'fs-extra';
 import browserSync from 'browser-sync';
 import config from 'config';
 import gulp from 'gulp';
@@ -19,25 +19,39 @@ import open from "open";
 import {sanitizeUrl} from "@braintree/sanitize-url";
 import sanitizeHtml from 'sanitize-html';
 import {escape} from "lodash-es";
-import archiver from 'archiver';
-import {getBlockConfigs, getConfigs, readJSONFile} 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';
+import {authtoken, connect} from "ngrok";
 
 /**
  * Constants
  */
 
 const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs();
-const blocksRegistry = isDev ? 'http://localhost:3020' : 'https://axe-web-blocks-registry.captain.devdevdev.life';
+const blocksRegistry = isDev ? 'http://localhost:3020' : PRODUCTION_REGISTRY_URL;
+const DevToolToken = 'D9lgz0TvzXCnp0xnwVBL109DaAR6Puk6F7YewDhgmP8='; // Temporary token for development purposes.
+
+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 = `/`; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
+let shareUrl = '';
+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 +77,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);
   }
@@ -74,29 +87,37 @@ app.get('/', async (req, res) => {
   const baseViewUrl = `view/${baseView}`;
 
   data.helpers = {
-    port,
-    include_partial: (filesPath) => path.join(modulesPath, filesPath),
-    baseView,
-    previewFrameUrl: `${previewFrameUrl}/${baseViewUrl}`,
+    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
+  }
+
+  data.baseView = baseView;
+  data.port = `/${baseViewUrl}`;
+  data.previewFrameUrl = `${previewFrameUrl}/${baseViewUrl}`;
+  // data.previewFrameUrl = `/${baseViewUrl}`;
+  data.shareUrl = shareUrl;
+
+  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 = {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) => path.join(modulesPath, filesPath),
-    include_block_template: () => path.join(projectPath, 'src', `${blockName}.template`),
-    section_class: `${blockName}--${jsonFileName}`,
-    base_url: '/'
+    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
+  }
+
+  if (!!req.query.iframe) {
+    data.iframeMode = true;
   }
 
   const baseView = req.params.baseView ?? 'container';
@@ -106,7 +127,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}`, {
@@ -127,7 +150,7 @@ app.get('/publish', async (req, res) => {
   }
 
   if (responseData.uploadUrl) {
-    await zipProject();
+    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',
@@ -153,7 +176,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({
@@ -171,10 +194,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;
@@ -205,7 +232,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}`);
@@ -218,19 +245,27 @@ function startBrowserSync() {
         return cb();
       }]));
 
-      gulp.watch(path.join(projectPath, 'src/**/*.scss'), {delay: 400}, gulp.series(['build-styling-files', function (cb) {
+      gulp.watch(path.posix.join(projectPath, "src/**/*.scss"), {delay: 400}, gulp.series(['build-styling-files', function (cb) {
         browserSyncReload(bs, 'css', 'Style Files Change');
         return cb();
       }]));
 
-      bs.watch("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);
         }
@@ -272,12 +307,12 @@ function browserSyncReload(bs, extension = '', message = '') {
 }
 
 function getJSBundleFiles() {
-  return [path.join(projectPath, 'src/**/*.js'), path.join(projectPath, 'src/**/*.mjs'), '!' + path.join(projectPath, 'src/**/*.min.js')];
+  return [path.posix.join(projectPath, "src/**/*.js"), path.posix.join(projectPath, "src/**/*.mjs"), "!" + path.posix.join(projectPath, "src/**/*.min.js")];
 }
 
 function buildScriptFiles(done) {
   const files = getJSBundleFiles();
-  return gulp.src(files)
+  return gulp.src(files, {base: path.posix.join(projectPath, 'src')})
     .pipe(sourcemaps.init({}))
     .pipe(babel()).on('error', function (error) {
       showError(new PluginError('JavaScript', error).toString());
@@ -285,14 +320,14 @@ function buildScriptFiles(done) {
     })
     .pipe(gulp.src(path.join(projectPath, 'vendor/*.js')))
     // .pipe(gulp.dest('src/'))
-    .pipe(uglify())
     .pipe(rename({extname: '.min.js'}))
+    .pipe(uglify())
     .pipe(sourcemaps.write('.'))
-    .pipe(gulp.dest(path.join(projectPath, 'src/')));
+    .pipe(gulp.dest(path.posix.join(projectPath, 'src')));
 }
 
 function buildStyleFiles(done) {
-  return gulp.src(path.join(projectPath, 'src/**/*.scss'))
+  return gulp.src(path.join(projectPath, 'src/**/*.scss'), {base: path.posix.join(projectPath, 'src')})
     .pipe(sourcemaps.init({}))
     .pipe(sass.sync({outputStyle: 'compressed'}).on('error', function (error) {
       showError(new PluginError('SCSS', error.messageFormatted).toString());
@@ -302,7 +337,7 @@ function buildStyleFiles(done) {
     // .pipe(gulp.dest('src/'))
     .pipe(rename({extname: '.min.css'}))
     .pipe(sourcemaps.write('.', {}))
-    .pipe(gulp.dest(path.join(projectPath, 'src')))
+    .pipe(gulp.dest(path.posix.join(projectPath, 'src')))
 }
 
 function buildAssetFiles() {
@@ -312,7 +347,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();
     })();
   });
@@ -336,52 +371,6 @@ function prepareListOfDataFiles(dataFiles) {
     .sort();
 }
 
-
-async function zipProject() {
-  // create a file to stream archive data to.
-  const output = await fsExtra.createWriteStream('dist.zip');
-  const archive = archiver('zip', {});
-
-  // listen for all archive data to be written
-  // 'close' event is fired only when a file descriptor is involved
-  output.on('close', function () {
-    console.log(archive.pointer() + ' total bytes');
-    console.log('archiver has been finalized and the output file descriptor has closed.');
-  });
-
-  // This event is fired when the data source is drained no matter what was the data source.
-  // It is not part of this library but rather from the NodeJS Stream API.
-  // @see: https://nodejs.org/api/stream.html#stream_event_end
-  output.on('end', function () {
-    console.log('Data has been drained');
-  });
-
-  // good practice to catch warnings (ie stat failures and other non-blocking errors)
-  archive.on('warning', function (err) {
-    if (err.code === 'ENOENT') {
-      // log warning
-    } else {
-      // throw error
-      throw err;
-    }
-  });
-
-  // good practice to catch this error explicitly
-  archive.on('error', function (err) {
-    throw err;
-  });
-
-  // pipe archive data to the file
-  archive.pipe(output);
-
-  // append files from a subdirectory, putting its contents at the root of archive
-  archive.directory(path.join(projectPath, 'src', '/'), false);
-
-  // finalize the archive (ie we are done appending files but streams have to finish yet)
-  // 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehand
-  await archive.finalize();
-}
-
 function handleSyntaxErrors(err, req, res, next) {
   if (err) {
     return res.render('error', {
@@ -394,3 +383,59 @@ function handleSyntaxErrors(err, req, res, next) {
 
   next();
 }
+
+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;
+}

test.js

@@ -0,0 +1,10 @@
+/**
+ * FUTURE TESTS.
+ *
+ * # ENV
+ * In `blocks-builder` service, we update MODULE_PATH and PROJECT_PATH environment variables before we run platform
+ * bundle build process. Actually before we call buildExportFiles().
+ *
+ * We have to make sure that this logic is working properly and stable.
+ *
+ */