block-dev-tool/server.js

#!/usr/bin/env node

import path from 'path';
import fetch from "node-fetch";
import express from 'express';
import {create} from 'express-handlebars';
import browserSync from 'browser-sync';
import config from 'config';
import gulp from 'gulp';
import babel from "gulp-babel";
import uglify from "gulp-uglify";
import rename from "gulp-rename";
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import sourcemaps from "gulp-sourcemaps";
import fs from "fs/promises";
import open from "open";
import {sanitizeUrl} from "@braintree/sanitize-url";
import sanitizeHtml from 'sanitize-html';
import {escape} from "lodash-es";
import {getBlockConfigs, getConfigs, readJSONFile, zipProject} from "./helpers.js";
import 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;


/**
 * Init server
 */

let port = 3000; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
let previewFrameUrl = `http://localhost:${port}`; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
const app = express();
const sass = gulpSass(dartSass);

const hbs = create({
  extname: '.hbs', defaultLayout: false, partialsDir: ['.'], helpers: {
    esc_attr(attr) {
      return escape(attr);
    }, esc_url(url) {
      return sanitizeUrl(url);
    }, esc_html(html) {
      // TODO: Check if we can remove this helper.
      return html;
    }, safe_html(html) {
      return sanitizeHtml(html);
    }
  }
});

app.engine('.hbs', hbs.engine);
app.set('view engine', '.hbs');
app.set('views', path.join(modulesPath, 'layouts'));

//
// Routes
//

app.get('/', async (req, res) => {
  let jsonFileName = req.query.data ? req.query.data : 'default';
  const data = await getBlockConfigs(jsonFileName, {includeConfigs: true, projectPath, modulesPath, dataFiles});
  if (data.error && data.errorMessage) {
    return res.send(data.errorMessage);
  }

  const baseView = config.has('baseView') ? config.get('baseView') : 'container';
  const baseViewUrl = `view/${baseView}`;

  data.helpers = {
    port,
    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
    baseView,
    previewFrameUrl: `${previewFrameUrl}/${baseViewUrl}`,
  }

  res.render('index', data);
});

app.get('/view/:baseView', async (req, res) => {
  let jsonFileName = req.query.data ? req.query.data : 'default';
  const data = await getBlockConfigs(jsonFileName, {includeConfigs: true, projectPath, modulesPath, dataFiles});
  if (data.error && data.errorMessage) {
    return res.send(data.errorMessage);
  }

  const blockName = config.has('blockName') ? config.get('blockName') : developmentBlockName;

  data.helpers = {
    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
    include_block_template: () => handlebarLayoutsPath(projectPath, 'src', `${blockName}.template`),
    section_class: `${blockName}--${jsonFileName}`,
    base_url: '/',
  }

  if (!!req.query.iframe) {
    data.iframeMode = true;
  }

  const baseView = req.params.baseView ?? 'container';

  res.render(baseView, data)
});

app.get('/publish', async (req, res) => {
  const data = await readJSONFile(path.join(projectPath, `block.json`));
  let responseData;

  try {
    const response = await fetch(`${blocksRegistry}`, {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {'Content-Type': 'application/json'}
    });

    responseData = await response.json();
  } catch (e) {
    res.json({success: false, message: 'Blocks Registry server is not available.'});
    return;
  }

  if (responseData.statusCode !== 200) {
    res.json({success: false, message: 'Error on registry level.'});
    return;
  }

  if (responseData.uploadUrl) {
    await zipProject(path.join(projectPath, 'src'));
    const body = await fs.readFile(path.join(projectPath, 'dist.zip'));
    const response = await fetch(`${responseData.uploadUrl}`, {
      method: 'PUT',
      body,
      headers: {'Content-Type': 'application/zip'}
    });

    if (response.status !== 200) {
      res.json({success: false, message: "Can't upload the archive, permissions error."});
      // TODO: Need to update the registry server.
      await fs.unlink(path.join(projectPath, 'dist.zip'));
      return;
    }
  }


  res.json({success: true});

  await fs.unlink(path.join(projectPath, 'dist.zip'));
});

app.get('/data', async (req, res) => {
  let jsonDataFileName = req.query.name ? req.query.name : 'default';

  const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
  const data = await getBlockConfigs(jsonDataFileName, {projectPath, modulesPath, dataFiles});
  const designPreviewFiles = getListOfDesignPreviewFiles(jsonDataFileName, await fs.readdir(path.join(projectPath, 'design', 'preview')));

  return res.json({
    dataOptions: dataFiles,
    designPreview: designPreviewFiles,
    data,
  });
});

// Errors handler
app.use(handleSyntaxErrors);

// Static Files
app.use(express.static(path.join(projectPath, 'src')));
app.use(express.static(path.join(projectPath, 'design')));
app.use(express.static(path.join(modulesPath, 'layouts')));

// Setup Gulp
await buildAssetFiles();

// BrowserSync
const bsOptions = await startBrowserSync();
port = bsOptions.port;
previewFrameUrl = bsOptions.previewFrameUrl;
await open(bsOptions.devToolUrl);


//
// Functions
//

function getListOfDesignPreviewFiles(jsonDataFileName, previewFiles) {
  return previewFiles
    .filter(fileName => {
      return fileName.startsWith(jsonDataFileName + '.');
    })
    .map(fileName => {
      const fileData = fileName.split('.');
      const fileFormat = fileData.pop();
      const previewSize = fileData.pop();

      return {
        dataSource: jsonDataFileName,
        widthDimension: Number.parseInt(previewSize, 10),
        url: `/preview/${fileName}`,
      };
    });
}

function startBrowserSync() {
  return new Promise((resolve, reject) => {
    const listener = app.listen(0, async () => {
      const PORT = listener.address().port;

      console.log(`The web server has started on port ${PORT}`);

      const bs = browserSync.create();

      const files = getJSBundleFiles();
      gulp.watch(files, {delay: 400}, gulp.series(['build-script-files', function (cb) {
        browserSyncReload(bs, 'js', 'Script Files Change');
        return cb();
      }]));

      gulp.watch(path.posix.join(projectPath, "src/**/*.scss"), {delay: 400}, gulp.series(['build-styling-files', function (cb) {
        browserSyncReload(bs, 'css', 'Style Files Change');
        return cb();
      }]));

      bs.watch("src/**/*.hbs", function (event, file) {
        browserSyncReload(bs, '', 'Template File Change: ' + file)
      });

      bs.init({
        proxy: `http://localhost:${PORT}`,
        open: false
      }, (err, bs) => {
        if (err) {
          return reject(err);
        }

        const options = bs.getOptions().toJS();

        const urls = {
          devTool: options.urls.local.replace(options.port, options.proxy.url.port),
          previewFrame: options.urls.local,
        };

        // If local network is available.
        if (options.urls.external) {
          urls.devTool = options.urls.external.replace(options.port, options.proxy.url.port);
          urls.previewFrame = options.urls.external;
        }

        resolve({
          devToolUrl: urls.devTool,
          previewFrameUrl: urls.previewFrame,
          port: options.port
        });
      });
    });
  });
}

function browserSyncReload(bs, extension = '', message = '') {
  if (isDev) {
    // console.log(event, file);
    console.log(message);
  }

  if (extension) {
    extension = "*." + extension;
  }

  bs.reload(extension);
}

function getJSBundleFiles() {
  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, {base: path.posix.join(projectPath, 'src')})
    .pipe(sourcemaps.init({}))
    .pipe(babel()).on('error', function (error) {
      showError(new PluginError('JavaScript', error).toString());
      done();
    })
    .pipe(gulp.src(path.join(projectPath, 'vendor/*.js')))
    // .pipe(gulp.dest('src/'))
    .pipe(rename({extname: '.min.js'}))
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(path.posix.join(projectPath, 'src')));
}

function buildStyleFiles(done) {
  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());
      // sass.logError(error);
      done();
    }))
    // .pipe(gulp.dest('src/'))
    .pipe(rename({extname: '.min.css'}))
    .pipe(sourcemaps.write('.', {}))
    .pipe(gulp.dest(path.posix.join(projectPath, 'src')))
}

function buildAssetFiles() {
  // Register tasks.
  gulp.task('build-script-files', buildScriptFiles);
  gulp.task('build-styling-files', buildStyleFiles);

  // Run first build.
  return new Promise((resolve) => {
    gulp.series('build-script-files', 'build-styling-files', function (cb) {
      resolve();
    })();
  });
}

function showError(errorMessage) {
  console.log(errorMessage);

  // TODO: Send this message to browser.
  // So the developer can understand there is an error.
}

function prepareListOfDataFiles(dataFiles) {
  return dataFiles
    .filter((fileName) => fileName.split('.').pop() === 'json')
    .map((fileName) => {
      const splitName = fileName.split('.');
      splitName.pop();
      return splitName.join('');
    })
    .sort();
}

function handleSyntaxErrors(err, req, res, next) {
  if (err) {
    return res.render('error', {
      helpers: {
        include_partial: (filesPath) => path.join(modulesPath, filesPath),
      },
      err
    });
  }

  next();
}

function handlebarLayoutsPath() {
  return path.join(...arguments)
    .replace(/\\/g, '/'); // Windows path issue. Fix all "\" for Handlebars.
}