block-dev-tool/server.js

#!/usr/bin/env node

import express from 'express';
import {create} from 'express-handlebars';
import fsExtra from 'fs-extra';
import browserSync from 'browser-sync';
import config from 'config';
import gulp from 'gulp';
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";

/**
 * Constants
 */

const isDev = config.get('mode') === 'development';
const modulePath = 'node_modules/axe-web-component/';
const projectDir = isDev ? '' : modulePath;
console.log('Development Mode:', isDev);

const sass = gulpSass(dartSass);

/**
 * Init server
 */

const app = express();

const hbs = create({
    extname: '.hbs', defaultLayout: false, partialsDir: ['.'],
});

app.engine('.hbs', hbs.engine);
app.set('view engine', '.hbs');
app.set('views', projectDir + 'layouts');

const dataFiles = prepareListOfDataFiles(await fs.readdir('./data'));

app.get('/', async (req, res) => {
    let jsonFileName = (req.query.data) ? req.query.data : 'default';
    if (!jsonFileName || !await fsExtra.exists(`./data/${jsonFileName}.json`)) {
        jsonFileName = 'default';
    }

    const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);

    Object.assign(data, {
        config: {
            projectDir,
            dataFiles: dataFiles.map((name) => {
                return {
                    name,
                    active: jsonFileName === name,
                };
            }),
            cssUrl: config.get('cssUrl'),
            blockName: config.get('blockName')
        }
    });

    data.helpers = {
        include_partial: (path) => projectDir + path,
        include_block_template: (path) => 'src/' + config.get('blockName') + '.template',
    }

    res.render('page-container', data);
});

app.use(express.static('src'));
app.use(express.static(projectDir + 'layouts'));

const listener = app.listen(0, () => {
    const PORT = listener.address().port;

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

    const bs = browserSync.create();

    gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'], {delay: 400}, gulp.series([buildScriptFiles, function (cb) {
        browserSyncReload(bs, 'js', 'Script Files Change');
        return cb();
    }]));

    gulp.watch('src/**/*.scss', {delay: 400}, gulp.series([buildStyleFiles, function (cb) {
        browserSyncReload(bs, 'css', 'Style Files Change');
        return cb();
    }]));


    // bs.watch("src/**/*.js", function (event, file) {});
    // bs.watch("src/**/*.css", function (event, file) {});

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

    bs.init({
        proxy: `http://localhost:${PORT}`,
    });
});

/**
 * Functions
 */

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

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

    bs.reload(extension);
}

function buildScriptFiles() {
    return gulp.src(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'])
        .pipe(sourcemaps.init({}))
        .pipe(babel())
        .pipe(gulp.src('vendor/*.js'))
        // .pipe(gulp.dest('src/'))
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('src/'));
}

function buildStyleFiles() {
    return gulp.src('src/**/*.scss')
        .pipe(sourcemaps.init({}))
        .pipe(sass.sync().on('error', sass.logError))
        // .pipe(gulp.dest('src/'))
        .pipe(rename({extname: '.min.css'}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('src/'))
}

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

// TODO:
//
// [v] Add Gulp for CSS/JS Styling
// [v] Add Browsersync that will refresh the page on changes
//
// Breakpoints and data options will come from backend server.
// - Top Panel with options to switch data (select input)
// - Options to resize the page and test Responsiveness (select input)