1.0.20

Reviewed-on: #5

build.js

@@ -1,74 +1,71 @@
 #!/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 prompts from "prompts";
+import {buildHubspotEmail} from "./platforms/hubspot/hubspot-email-adapter.js";
 import {getConfigs} from "./helpers.js";
 import {buildWordPress} from "./platforms/wordpress/wordpress-adapter.js";
-import path from "path";
+import {buildHubspotPage} from "./platforms/hubspot/hubspot-page-adapter.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',
+  title: 'WordPress'
+}, {
+  name: 'wordpress-blocks',
+  title: 'WordPress Block'
+}, {
+  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([
+const data = await getExportData();
+const selectedPlatform = PLATFORM_OPTIONS[data['platform']];
+await buildExportFiles(selectedPlatform);
+
+console.log('--------------------\nDone!');
+
+//
+// Functions
+//
+
+export async function buildExportFiles(platform) {
+  if (['wordpress', 'php'].includes(platform.name)) {
+
+    if (platform.name === 'wordpress') {
+      await buildWordPress(blockName);
+    } else {
+      if (platform.name === 'wordpress-blocks') {
+        await buildWordPress(blockName, true);
+      }
+    }
+  } else if (platform.name === 'hubspot-email') {
+    await buildHubspotEmail(blockName)
+  } else if (platform.name === 'hubspot') {
+    await buildHubspotPage(blockName)
+  }
+}
+
+function getExportData() {
+  return prompts([
     {
-        type: "list",
+      type: "select",
       name: "platform",
       message: "Choose Platform",
-        choices: ['WordPress', 'WordPress Block', 'Hubspot', 'Hubspot Email', 'JavaScript', 'PHP'],
+      choices: PLATFORM_OPTIONS.map(item => item.title),
       default: 'WordPress'
     }
-    ])
+  ]);
 }
-
-  writing() {
-    new Promise((resolve => {
-      if (['WordPress', 'PHP'].includes(this.data.platform)) {
-        const backPath = modulesPath ? modulesPath.split('/').map(() => '..').join('/') : '';
-
-        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);
-            }
-
-            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!');
-      });
-  }
-}
-
-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')

helpers.js

@@ -3,6 +3,7 @@ import config from 'config';
 import {fileURLToPath} from 'url';
 import memFs from 'mem-fs';
 import editor from 'mem-fs-editor';
+import fsExtra from "fs-extra";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -19,8 +20,6 @@ export function getConfigs() {
   };
 }
 
-import fsExtra from "fs-extra";
-
 export async function readJSONFile(jsonFile) {
   let data = {};
 

layouts/partials/scripts.hbs

@@ -1,4 +1,4 @@
-<script src="/scripts/frame-index.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 }}
 {{#each config.jsUrl }}<script src="{{ this }}"></script>

layouts/partials/toolbar.hbs

@@ -9,6 +9,9 @@
   </div>
 
   <div class="page_toolbar__right">
-    <a href="{{ previewFrameUrl }}" target="_blank" class="open_in_new_tab"></a>
+    {{#if config.styleGuideUrl}}
+      <a href="{{ config.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 @@
+!function(){let e;const t=2*window.outerHeight;function n(n){const o=document.querySelector("body > main").scrollHeight;if(e===o||o>t)return;e=o,window.parent.postMessage("resize:"+JSON.stringify({height:e}),"*")}n(),new ResizeObserver(n).observe(document.body)}();

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/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,17 @@
+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))
+    previewFrame.style.height = data.height + 'px'
+  });
+}
+
+export function getPreviewFrame() {
+  return document.getElementById('preview_frame');
+}

layouts/scripts/frame/frame.js

@@ -0,0 +1,32 @@
+'use strict';
+
+// Scrollbars / Frame resizes notifications.
+(function () {
+  let height;
+  const heightLimit = window.outerHeight * 2;
+
+  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(entries) {
+    const updatedHeight = getCurrentHeight();
+    if (height === updatedHeight || updatedHeight > heightLimit) {
+      return;
+    }
+
+    const RESIZE_CODE = 'resize:';
+    height = updatedHeight;
+    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
+  }
+
+  function getCurrentHeight() {
+    return document.querySelector('body > main').scrollHeight;
+  }
+})();

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/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/publish.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import * as ReactDOM from 'react-dom/client';
 
 function Publish(props = {}) {

layouts/styles/page--main.css

@@ -139,7 +139,7 @@ body {
   max-width: var(--breakpoint);
 }
 
-.open_in_new_tab {
+.open_in_new_tab, .palette {
   --size: 1.5rem;
   width: var(--size);
   height: var(--size);
@@ -158,4 +158,8 @@ body {
   outline: none;
 }
 
+.palette {
+  background-image: url("/scripts/toolbar/images/icon-palette.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","file":"page--main.css"}

layouts/styles/page--main.scss

@@ -107,3 +107,8 @@ body {
   border-radius: 0.25rem;
   outline: none;
 }
+
+.palette {
+  @extend .open_in_new_tab;
+  background-image: url("/scripts/toolbar/images/icon-palette.svg");
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axe-web/block-dev-tool",
-	"version": "1.0.19",
+	"version": "1.0.20",
 	"author": {
 		"name": "AXE-WEB",
 		"email": "office@axe-web.com",
@@ -8,11 +8,12 @@
 	},
 	"scripts": {
 		"start": "component-dev",
-		"dev": "NODE_ENV=development NODE_CONFIG_DIR=blocks/team/config BLOCK_NAME=team node server.js",
+		"info": "node debug.js",
+		"dev": "NODE_ENV=development NODE_CONFIG_DIR=blocks/text-block/config BLOCK_NAME=text-block 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": "NODE_ENV=development NODE_CONFIG_DIR=blocks/text-block/config BLOCK_NAME=text-block node ./build.js",
 		"build-platform-cli": "component-build",
-		"dev-js": "rollup --config rollup.config.js --watch"
+		"dev-js": "NODE_ENV=development rollup --config rollup.config.js --watch"
 	},
 	"license": "ISC",
 	"type": "module",
@@ -22,6 +23,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",
@@ -37,10 +39,9 @@
 		"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"
+		"sass": "^1.50.1"
 	},
 	"devDependencies": {
 		"@babel/preset-react": "^7.18.6",
@@ -54,6 +55,7 @@
 		"rollup": "^2.77.2",
 		"rollup-plugin-copy": "^3.4.0",
 		"rollup-plugin-jsx": "^1.0.3",
+		"rollup-plugin-terser": "^7.0.2",
 		"styled-components": "^5.3.5"
 	},
 	"bin": {
@@ -62,7 +64,10 @@
 	},
 	"files": [
 		"helpers.js",
-		"layouts/**/*",
+		"debug.js",
+		"layouts/**/*.hbs",
+		"layouts/styles/*.css*",
+		"layouts/scripts/dist/*.js*",
 		"platforms/**/*"
 	]
 }

platforms/hubspot/hubspot-email-adapter.js

@@ -1,47 +1,33 @@
+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`)
+const {modulesPath, projectPath} = getConfigs();
 
-  const metaData = {
+export async function buildHubspotEmail(blockName) {
+  const distPath = await createDistFolder(blockName);
+
+  // 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));
+export async function createDistFolder(blockName) {
+  const distPath = path.join('exports', 'hubspot', `${blockName}.module`);
+  await mkdir(distPath, {recursive: true})
+
+  return distPath;
 }
 
-function getBlockFields(block = {}, type = 'content') {
+export function getBlockFields(block = {}, type = 'content') {
   const fields_group = block['field_groups'].find((group) => group.name === type);
   const fields = [];
 
@@ -61,7 +47,7 @@ function getBlockFields(block = {}, type = 'content') {
   });
 }
 
-function convertToHubspotField(field = {}) {
+export function convertToHubspotField(field = {}) {
   const data = {
     id: field.name,
     name: field.name,
@@ -70,9 +56,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 +100,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 +216,53 @@ function convertToHubspotField(field = {}) {
   }
 }
 
-export function capitalize(str) {
-  if (typeof str !== 'string') {
-    return '';
+export async function buildHubspotJSONFiles(distPath, metaData) {
+  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(/{{#if /g, '{% if module.');
+  handlebars = handlebars.replace(/{{\/if}}/g, '{% endif %}');
+  handlebars = handlebars.replace(/{{#each /g, '{% for 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.');
+
+  return handlebars;
 }

platforms/hubspot/hubspot-page-adapter.js

@@ -0,0 +1,29 @@
+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";
+
+const {modulesPath, projectPath} = getConfigs();
+
+export async function buildHubspotPage(blockName) {
+  const distPath = await createDistFolder(blockName);
+
+  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,8 +3,10 @@
 // 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 = [];
@@ -52,7 +54,8 @@ class Component_Builder {
   use Custom_Handlebars;
 
   public string $component_name = '';
-  private string $module_path = '';
+  public string $module_path = '';
+  public string $project_path = '';
 
   function __construct( $component_name, $module_path, $project_path ) {
     $this->module_path    = $module_path;
@@ -63,22 +66,15 @@ class Component_Builder {
 
   function build(): void {
     $root_path = __DIR__ . '/' . $this->module_path . '/../../' . $this->project_path;
+
+    $this->buildTemplatePhpFile( $root_path );
+  }
+
+  private function buildTemplatePhpFile( $root_path ) {
     $file_name = $this->get_handlebars_template( "$root_path/src/$this->component_name.template.hbs" );
 
     $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 );
-      }
-    }
-
     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" );
-
-    echo "Generated '$file_name'.";
   }
 
   private function get_handlebars_template( $path = '' ): string {
@@ -123,4 +119,15 @@ class Component_Builder {
   }
 }
 
-( new Component_Builder( $argv[1], $argv[2], $argv[3] ) )->build();
+function build( $args = [] ) {
+  ( new Component_Builder( $args['blockName'], $args['backPath'], $args['projectPath'] ) )->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,30 +1,37 @@
 <?php
 
+namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>;
+
 use Core\Global_Functions;
 
 class <%= blockClassModel %>_Component {
 
 	public function __construct() {
-		add_action( 'wp_enqueue_scripts', [ $this, 'register_assets' ] );
+		// add_action( 'wp_enqueue_scripts', [ $this, 'register_assets' ] );
+    add_action( 'after_setup_theme', [ $this, 'register_assets' ] );
 	}
 
 	function register_assets(): void {
-		wp_enqueue_style( '<%= blockFilename %>',
+		wp_register_style( '<%= blockFilename %>',
 			get_template_directory_uri() . '/components/partials/<%= blockFilename %>/templates/styles/<%= blockFilename %>.min.css',
 			[ 'style-wp' ],
 			Global_Functions::get_current_version_number()
 		);
+		wp_enqueue_style( '<%= blockFilename %>' )
 
-		wp_enqueue_script( '<%= blockFilename %>',
+		wp_register_script( 'script-<%= blockFilename %>',
 			get_template_directory_uri() . '/components/partials/<%= blockFilename %>/templates/scripts/<%= blockFilename %>.min.js',
 			[ 'jquery', 'swiper' ],
 			Global_Functions::get_current_version_number(),
 			true
 		);
+		wp_enqueue_script( 'script-<%= blockFilename %>' )
 	}
 
 	public function render( $args = [] ): void {
-		$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( array_merge( [], $args ), self::class );
+    $args = array_merge( [], Helpers\<%= blockClassModel %>_Defaults::default_args( $args ), $args);
+		$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( $args, self::class );
+
 		echo apply_filters( 'the_content', wpautop( $output ) );
 	}
 

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/wordpress-adapter.js

@@ -2,23 +2,26 @@ 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();
+const {modulesPath, projectPath} = getConfigs();
 
-export async function buildWordPress(isBlock = false) {
+export async function buildWordPress(blockName, isBlock = false) {
   const distPath = path.join(projectPath, 'exports', 'wordpress');
-  await mkdir(distPath, {recursive: true})
+  // await mkdir(distPath, {recursive: true})
+  await mkdir(path.join(distPath, 'templates'), {recursive: true})
 
-  const jsonFilePath = path.join(projectPath, 'block.json');
-  await copyFile(jsonFilePath, `${distPath}/block.json`)
+  const blockFilePath = path.join(projectPath, 'block.json');
+  await copyFile(blockFilePath, path.join(distPath, 'block.json'));
 
-  let data = await readJSONFile(jsonFilePath);
+  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);
 
@@ -37,6 +40,39 @@ export async function buildWordPress(isBlock = false) {
     include_elementor_widget: false,
   });
 
+  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});
+
+  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 (isBlock) {
     await createFiles(data, [{
       from: `templates/Template_Component.php`,
@@ -53,14 +89,6 @@ export async function buildWordPress(isBlock = false) {
       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)
-    });
   } else {
     await createFiles(data, [{
       from: `templates/Template_Basic_Component.php`,
@@ -71,3 +99,44 @@ export async function buildWordPress(isBlock = false) {
     });
   }
 }
+
+export function execCommand(cmd = '') {
+  return new Promise((resolve, reject) => {
+
+    exec(cmd, function (error, stdout) {
+      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, print) => {
+        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'}
       ]
     })
   ],
-}
+}, {
+  input: 'layouts/scripts/frame/frame.js',
+  output: {
+    file: 'layouts/scripts/dist/frame-index.min.js',
+    sourcemap: devMode
+  },
+  plugins: [
+    commonjs(),
+    !devMode && terser()
+  ]
+}];

server.js

@@ -27,8 +27,11 @@ import PluginError from 'plugin-error';
  * Constants
  */
 
+const PRODUCTION_REGISTRY_URL = 'https://blocks-registery.axe-web.com';
+
 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;
+
 
 /**
  * Init server
@@ -75,7 +78,7 @@ app.get('/', async (req, res) => {
 
   data.helpers = {
     port,
-    include_partial: (filesPath) => path.join(modulesPath, filesPath),
+    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
     baseView,
     previewFrameUrl: `${previewFrameUrl}/${baseViewUrl}`,
   }
@@ -93,8 +96,8 @@ app.get('/view/:baseView', async (req, res) => {
   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`),
+    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
+    include_block_template: () => handlebarLayoutsPath(projectPath, 'src', `${blockName}.template`),
     section_class: `${blockName}--${jsonFileName}`,
     base_url: '/'
   }
@@ -218,7 +221,7 @@ 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();
       }]));
@@ -272,12 +275,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());
@@ -288,11 +291,11 @@ function buildScriptFiles(done) {
     .pipe(uglify())
     .pipe(rename({extname: '.min.js'}))
     .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 +305,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() {
@@ -375,7 +378,7 @@ async function zipProject() {
   archive.pipe(output);
 
   // append files from a subdirectory, putting its contents at the root of archive
-  archive.directory(path.join(projectPath, 'src', '/'), false);
+  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
@@ -394,3 +397,8 @@ function handleSyntaxErrors(err, req, res, next) {
 
   next();
 }
+
+function handlebarLayoutsPath() {
+  return path.join(...arguments)
+    .replace(/\\/g, '/'); // Windows path issue. Fix all "\" for Handlebars.
+}