Merge pull request 'hubspot-pages' (#5) from hubspot-pages into master

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

build.js

@@ -3,9 +3,10 @@
 
 import config from 'config';
 import prompts from "prompts";
-import {buildHubspot} from "./platforms/hubspot/hubspot-adapter.js";
+import {buildHubspotEmail} from "./platforms/hubspot/hubspot-email-adapter.js";
 import {getConfigs} from "./helpers.js";
 import {buildWordPress} from "./platforms/wordpress/wordpress-adapter.js";
+import {buildHubspotPage} from "./platforms/hubspot/hubspot-page-adapter.js";
 
 const {isDev, developmentBlockName} = getConfigs();
 const blockName = !isDev && config.has('blockName') ? config.get('blockName') : developmentBlockName;
@@ -51,9 +52,9 @@ export async function buildExportFiles(platform) {
       }
     }
   } else if (platform.name === 'hubspot-email') {
-    await buildHubspot(blockName)
+    await buildHubspotEmail(blockName)
   } else if (platform.name === 'hubspot') {
-    console.log('"Hubspot" Coming soon...');
+    await buildHubspotPage(blockName)
   }
 }
 

platforms/hubspot/hubspot-adapter.js → 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();
+
+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 async function createDistFolder(blockName) {
+  const distPath = path.join('exports', 'hubspot', `${blockName}.module`);
+  await mkdir(distPath, {recursive: true})
 
-  // Export JSON file.
-  await writeFile(`${distPath}/fields.json`, JSON.stringify(fields, null, 4));
+  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/wordpress/wordpress-adapter.js

@@ -1,9 +1,8 @@
 import path from "path";
-import {mkdir, copyFile, readFile} from "fs/promises";
+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 fsExtra from "fs-extra";
 import {exec} from 'child_process';
 import execPhp from "exec-php";