1.0.18

build.js

@@ -1,71 +1,74 @@
 #!/usr/bin/env node
-// For development purposes - run `npm run build-platform`.
 
+import {exec} from 'child_process';
 import config from 'config';
-import prompts from "prompts";
+import Generator from "yeoman-generator";
-import {buildHubspotEmail} from "./platforms/hubspot/hubspot-email-adapter.js";
+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 {buildHubspotPage} from "./platforms/hubspot/hubspot-page-adapter.js";
+import path from "path";
 
-const {isDev, developmentBlockName} = getConfigs();
+const {modulesPath, projectPath} = getConfigs();
-const blockName = !isDev && config.has('blockName') ? config.get('blockName') : developmentBlockName;
 
-export const PLATFORM_OPTIONS = [{
+const blockName = config.has('blockName') ? config.get('blockName') : 'development';
-  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'
-}];
 
-const data = await getExportData();
+class buildGenerator extends Generator {
-const selectedPlatform = PLATFORM_OPTIONS[data['platform']];
+  async prompting() {
-await buildExportFiles(selectedPlatform);
+    this.data = await this.prompt([
-
+      {
-console.log('--------------------\nDone!');
+        type: "list",
-
+        name: "platform",
-//
+        message: "Choose Platform",
-// Functions
+        choices: ['WordPress', 'WordPress Block', 'Hubspot', 'Hubspot Email', 'JavaScript', 'PHP'],
-//
+        default: 'WordPress'
-
-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') {
+  writing() {
-    await buildHubspotPage(blockName)
+    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!');
+      });
   }
 }
 
-function getExportData() {
+const build = new buildGenerator([], {env: yeoman.createEnv()}, {});
-  return prompts([
+build.run().then(() => null);
-    {
-      type: "select",
-      name: "platform",
-      message: "Choose Platform",
-      choices: PLATFORM_OPTIONS.map(item => item.title),
-      default: 'WordPress'
-    }
-  ]);
-}

debug.js

@@ -1,15 +0,0 @@
-#!/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,7 +3,6 @@ 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);
@@ -20,6 +19,8 @@ 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/dist/frame-index.min.js"></script>
+<script src="/scripts/frame-index.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,9 +9,6 @@
   </div>
 
   <div class="page_toolbar__right">
-    {{#if config.styleGuideUrl}}
+    <a href="{{ previewFrameUrl }}" target="_blank" class="open_in_new_tab"></a>
-      <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

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

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

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

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

layouts/scripts/frame/frame.js

@@ -1,32 +0,0 @@
-'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,13 +3,22 @@
 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: getPreviewFrame(),
+  previewFrame,
-};
+}
 
-setupFrameResizeListener();
 setupResponsiveness(rootAttributes);
 setupDataOptions(rootAttributes);
-setupPublish(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';
+});

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

@@ -1,4 +0,0 @@
-<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, {useState} from 'react';
+import React, {useEffect, 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, .palette {
+.open_in_new_tab {
   --size: 1.5rem;
   width: var(--size);
   height: var(--size);
@@ -158,8 +158,4 @@ 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;;;AAGF;EAEE","file":"page--main.css"}
+{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;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"}

layouts/styles/page--main.scss

@@ -107,8 +107,3 @@ 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.20",
+	"version": "1.0.18",
 	"author": {
 		"name": "AXE-WEB",
 		"email": "office@axe-web.com",
@@ -8,12 +8,11 @@
 	},
 	"scripts": {
 		"start": "component-dev",
-		"info": "node debug.js",
+		"dev": "NODE_ENV=development NODE_CONFIG_DIR=blocks/team/config BLOCK_NAME=team node server.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/text-block/config BLOCK_NAME=text-block node ./build.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": "NODE_ENV=development rollup --config rollup.config.js --watch"
+		"dev-js": "rollup --config rollup.config.js --watch"
 	},
 	"license": "ISC",
 	"type": "module",
@@ -23,7 +22,6 @@
 		"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",
@@ -39,9 +37,10 @@
 		"node-fetch": "^3.2.10",
 		"open": "^8.4.0",
 		"plugin-error": "^2.0.0",
-		"prompts": "^2.4.2",
 		"sanitize-html": "^2.7.1",
-		"sass": "^1.50.1"
+		"sass": "^1.50.1",
+		"yeoman-environment": "^3.10.0",
+		"yeoman-generator": "^5.6.1"
 	},
 	"devDependencies": {
 		"@babel/preset-react": "^7.18.6",
@@ -55,7 +54,6 @@
 		"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": {
@@ -64,10 +62,7 @@
 	},
 	"files": [
 		"helpers.js",
-		"debug.js",
+		"layouts/**/*",
-		"layouts/**/*.hbs",
-		"layouts/styles/*.css*",
-		"layouts/scripts/dist/*.js*",
 		"platforms/**/*"
 	]
 }

platforms/hubspot/hubspot-adapter.js

@@ -1,33 +1,47 @@
-import path from "path";
 import {readFile, writeFile, mkdir, copyFile} from "fs/promises";
-import {capitalize, getConfigs} from "../../helpers.js";
 
-const {modulesPath, projectPath} = getConfigs();
+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 metaData = {
-  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) {
+function getBlockFields(block = {}, type = 'content') {
-  const distPath = path.join('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 = [];
 
@@ -47,7 +61,7 @@ export function getBlockFields(block = {}, type = 'content') {
   });
 }
 
-export function convertToHubspotField(field = {}) {
+function convertToHubspotField(field = {}) {
   const data = {
     id: field.name,
     name: field.name,
@@ -56,12 +70,9 @@ export 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) {
@@ -100,14 +111,12 @@ export function convertToHubspotField(field = {}) {
         display: "checkbox",
       });
     case 'select':
-      const options = [];
+      const choices = [];
-      if (field.options) {
+      Object.keys(data.choices).forEach(value => choices.push([value, data.choices[value]]));
-        Object.keys(field.options).forEach(value => options.push([value, field.options[value]]));
-      }
 
       return Object.assign({}, data, {
-        type: "choice",
+        type: "select",
-        choices: options
+        choices: [choices]
       });
     case 'link':
       return Object.assign({}, data, {
@@ -216,53 +225,17 @@ export function convertToHubspotField(field = {}) {
   }
 }
 
-export async function buildHubspotJSONFiles(distPath, metaData) {
+export function capitalize(str) {
-  await writeFile(path.join(distPath, 'meta.json'), JSON.stringify(metaData, null, 4));
+  if (typeof str !== 'string') {
-
+    return '';
-  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);
   }
 
-  // Export JSON file.
+  return str
-  await writeFile(path.join(distPath, 'fields.json'), JSON.stringify(fields, null, 4));
+    .toLowerCase()
-}
+    .split(/[ -_]/g)
-
+    .filter((word) => !!word)
-
+    .map((word) => {
-export function handlebarsToHubl(handlebars) {
+      return word.charAt(0).toUpperCase() + word.slice(1);
-  handlebars = handlebars.replace(/{{#if /g, '{% if module.');
+    })
-  handlebars = handlebars.replace(/{{\/if}}/g, '{% endif %}');
+    .join(' ');
-  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

@@ -1,29 +0,0 @@
-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,10 +3,8 @@
 // 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 = [];
@@ -54,27 +52,33 @@ class Component_Builder {
   use Custom_Handlebars;
 
   public string $component_name = '';
-  public string $module_path = '';
+  private string $module_path = '';
-  public string $project_path = '';
 
   function __construct( $component_name, $module_path, $project_path ) {
     $this->module_path    = $module_path;
-    $this->project_path   = $project_path;
+    $this->project_path    = $project_path;
     $this->component_name = $component_name;
     $this->register_default_handlebar_helpers();
   }
 
   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 {
@@ -119,15 +123,4 @@ class Component_Builder {
   }
 }
 
-function build( $args = [] ) {
+( new Component_Builder( $argv[1], $argv[2], $argv[3] ) )->build();
-  ( 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,7 +6,6 @@
 	},
 	"require": {
 		"php": ">=8.0",
-		"zordius/lightncandy": "^1.2.6",
+		"zordius/lightncandy": "^1.2.6"
-		"brick/varexporter": "^0.3.7"
 	}
 }

platforms/php/composer.lock

@@ -4,113 +4,8 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "6731e0a19d488ee457b6682e62ef9018",
+    "content-hash": "1d9b4e7a02be366b48383c185193727f",
     "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,37 +1,30 @@
 <?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_register_style( '<%= blockFilename %>',
+		wp_enqueue_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_register_script( 'script-<%= blockFilename %>',
+		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
 		);
-		wp_enqueue_script( 'script-<%= blockFilename %>' )
 	}
 
 	public function render( $args = [] ): void {
-    $args = array_merge( [], Helpers\<%= blockClassModel %>_Defaults::default_args( $args ), $args);
+		$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( array_merge( [], $args ), self::class );
-		$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,10 +8,8 @@ namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>\Helpers;
 
 class <%= blockClassModel %>_Defaults {
 	public static function default_args(): array {
-		$args =  <%- defaultData %>;
+		return [
-
+	       'title'           => '<%= title %>',
-    // $args['base_url'] = \Core\Global_Functions::get_file_url( __DIR__ . '/../templates/' );
+		];
-
-    return $args;
 	}
 }

platforms/wordpress/wordpress-adapter.js

@@ -2,26 +2,23 @@ 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 {modulesPath, projectPath} = getConfigs();
+const {projectPath} = getConfigs();
 
-export async function buildWordPress(blockName, isBlock = false) {
+export async function buildWordPress(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 blockFilePath = path.join(projectPath, 'block.json');
+  const jsonFilePath = path.join(projectPath, 'block.json');
-  await copyFile(blockFilePath, path.join(distPath, 'block.json'));
+  await copyFile(jsonFilePath, `${distPath}/block.json`)
 
-  let data = await readJSONFile(blockFilePath);
+  let data = await readJSONFile(jsonFilePath);
   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);
 
@@ -40,39 +37,6 @@ export async function buildWordPress(blockName, 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`,
@@ -89,6 +53,14 @@ export async function buildWordPress(blockName, 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`,
@@ -99,44 +71,3 @@ export async function buildWordPress(blockName, 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,17 +3,13 @@ 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";
 
-const devMode = (process.env.NODE_ENV === 'development');
+export default {
-console.log('Build Mode', devMode ? 'Development' : 'Production');
-
-export default [{
   input: 'layouts/scripts/index.js',
   output: {
     file: 'layouts/scripts/dist/index.min.js',
-    sourcemap: devMode,
+    sourcemap: true
   },
   plugins: [
     nodeResolve({
@@ -30,21 +26,10 @@ 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

@@ -27,11 +27,8 @@ 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' : PRODUCTION_REGISTRY_URL;
+const blocksRegistry = isDev ? 'http://localhost:3020' : 'https://axe-web-blocks-registry.captain.devdevdev.life';
-
 
 /**
  * Init server
@@ -78,7 +75,7 @@ app.get('/', async (req, res) => {
 
   data.helpers = {
     port,
-    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
+    include_partial: (filesPath) => path.join(modulesPath, filesPath),
     baseView,
     previewFrameUrl: `${previewFrameUrl}/${baseViewUrl}`,
   }
@@ -96,8 +93,8 @@ app.get('/view/:baseView', async (req, res) => {
   const blockName = config.has('blockName') ? config.get('blockName') : developmentBlockName;
 
   data.helpers = {
-    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
+    include_partial: (filesPath) => path.join(modulesPath, filesPath),
-    include_block_template: () => handlebarLayoutsPath(projectPath, 'src', `${blockName}.template`),
+    include_block_template: () => path.join(projectPath, 'src', `${blockName}.template`),
     section_class: `${blockName}--${jsonFileName}`,
     base_url: '/'
   }
@@ -221,7 +218,7 @@ function startBrowserSync() {
         return cb();
       }]));
 
-      gulp.watch(path.posix.join(projectPath, "src/**/*.scss"), {delay: 400}, gulp.series(['build-styling-files', function (cb) {
+      gulp.watch(path.join(projectPath, 'src/**/*.scss'), {delay: 400}, gulp.series(['build-styling-files', function (cb) {
         browserSyncReload(bs, 'css', 'Style Files Change');
         return cb();
       }]));
@@ -275,12 +272,12 @@ function browserSyncReload(bs, extension = '', message = '') {
 }
 
 function getJSBundleFiles() {
-  return [path.posix.join(projectPath, "src/**/*.js"), path.posix.join(projectPath, "src/**/*.mjs"), "!" + path.posix.join(projectPath, "src/**/*.min.js")];
+  return [path.join(projectPath, 'src/**/*.js'), path.join(projectPath, 'src/**/*.mjs'), '!' + path.join(projectPath, 'src/**/*.min.js')];
 }
 
 function buildScriptFiles(done) {
   const files = getJSBundleFiles();
-  return gulp.src(files, {base: path.posix.join(projectPath, 'src')})
+  return gulp.src(files)
     .pipe(sourcemaps.init({}))
     .pipe(babel()).on('error', function (error) {
       showError(new PluginError('JavaScript', error).toString());
@@ -291,11 +288,11 @@ function buildScriptFiles(done) {
     .pipe(uglify())
     .pipe(rename({extname: '.min.js'}))
     .pipe(sourcemaps.write('.'))
-    .pipe(gulp.dest(path.posix.join(projectPath, 'src')));
+    .pipe(gulp.dest(path.join(projectPath, 'src/')));
 }
 
 function buildStyleFiles(done) {
-  return gulp.src(path.join(projectPath, 'src/**/*.scss'), {base: path.posix.join(projectPath, 'src')})
+  return gulp.src(path.join(projectPath, 'src/**/*.scss'))
     .pipe(sourcemaps.init({}))
     .pipe(sass.sync({outputStyle: 'compressed'}).on('error', function (error) {
       showError(new PluginError('SCSS', error.messageFormatted).toString());
@@ -305,7 +302,7 @@ function buildStyleFiles(done) {
     // .pipe(gulp.dest('src/'))
     .pipe(rename({extname: '.min.css'}))
     .pipe(sourcemaps.write('.', {}))
-    .pipe(gulp.dest(path.posix.join(projectPath, 'src')))
+    .pipe(gulp.dest(path.join(projectPath, 'src')))
 }
 
 function buildAssetFiles() {
@@ -378,7 +375,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
@@ -397,8 +394,3 @@ function handleSyntaxErrors(err, req, res, next) {
 
   next();
 }
-
-function handlebarLayoutsPath() {
-  return path.join(...arguments)
-    .replace(/\\/g, '/'); // Windows path issue. Fix all "\" for Handlebars.
-}