page-helper/index.js

'use strict';

const path = require('path');
const gulp = require('gulp');
const minify = require("babel-minify");
const Handlebars = require('handlebars');
const jsdom = require('jsdom');
const glob = require('glob');
const read = require('read-file');
const reload = require('reload');
const jsonfile = require('jsonfile');
const fs = require('fs');
const crypto = require("crypto");
const copydir = require('copy-dir');
const request = require('request-json');

const regex = /{([^\/]*)}/gm;
const whiteSpaceRegex = /\s{2,}/gm;
const newLineRegex = /\n/gm;
const subst = `:$1`;

module.exports.Helper = class Helper {
    constructor(config) {
        this.defaultLocale = config.defaultLocale || '';
        this.locales = [];
        this.watchable = [];
        this.workingDir = config.workingDir || '.';
        this.components = config.components || {};
        this.routes = config.routes || {};

        //todo:check routes

        this.layouts = config.layouts || {};
        this.resources = {
            translations: {},
        };

        for (let locale in this.resources.translations) {
            if (this.resources.translations.hasOwnProperty(locale)) {
                this.locales.push(locale)
            }
        }

        this.componentsId = crypto.randomBytes(12).toString('hex');
        this.regex = /\$(\w+)/g; // api url variable replacement

        if (config.hasOwnProperty('imports')) {
            console.log("got imports", config.imports);

            config.imports.forEach(imp => {
                if (imp && imp.hasOwnProperty('registerComponent')) {
                    const c = imp.registerComponent();
                    if (c) {
                        console.log(c);
                        const component = this.createComponent(c.filepath);
                        const mjs = './tmp/components/' + component.name + '.js';

                        fs.mkdirSync('./tmp/components', {recursive: true});


                        fs.writeFileSync(mjs, component.minifiedScript);

                        const iii = require(path.resolve(mjs));
                        console.log(iii);

                        /*import(mjs).then(t => {
                            console.log("component imported");
                            //console.log(t);
                            t.default();
                        }).catch(err => {
                            console.error(err)
                        })*/
                    }

                }
            })
        }
    }

    getLayout(name, reload) {
        if (this.layouts.hasOwnProperty(name)) {
            const layout = this.layouts[name];
            if (reload) {
                layout.template = read.sync(layout.file, 'utf8');
            }
            return layout
        }
    }

    getComponent(name, reload) {
        if (this.components.hasOwnProperty(name)) {
            const component = this.components[name];
            if (reload) {
                this.createComponent(component.file)
            }
            return this.components[name]
        }
    }

    createComponent(filePath, skipWrite) {
        const component = {
            file: filePath,
            name: path.basename(filePath, '.html'),
            template: '',
            skipWrite: skipWrite,
            render: true,
        };
        const template = read.sync(component.file, 'utf8');
        const dom = new jsdom.JSDOM(template, {
            includeNodeLocations: true
        });
        const body = dom.window.document.head;
        for (let i = 0; i < body.children.length; i++) {
            let child = body.children[i];
            if (child.nodeName === "TEMPLATE") {
                const loc = dom.nodeLocation(child);
                const start = loc.startTag.endOffset;
                const end = loc.endOffset - start - 11;
                component.template = template.substr(start, end);
                component.template = component.template.replace(newLineRegex, ``);
                component.template = component.template.replace(whiteSpaceRegex, ` `);
                component.render = child.getAttribute('render') !== 'false'
            } else if (child.nodeName === "SCRIPT") {
                const {code, map} = minify(child.innerHTML, {
                    mangle: {
                        keepClassName: true
                    }
                });
                component.minifiedScript = code;
                component.script = child.innerHTML
            }
        }

        Handlebars.registerPartial(component.name, "<" + component.name + ">" + (component.render ? component.template : "") + "</" + component.name + ">");
        component.precompiledTemplate = Handlebars.precompile(component.template);
        component.precompiled = Handlebars.precompile("<" + component.name + ">{{> _" + component.name + "}}</" + component.name + ">");
        this.components[component.name] = component;
        return component
    }

    createLayout(filePath) {
        const layout = {
            file: filePath,
            name: path.basename(filePath, '.html'),
        };
        layout.template = read.sync(layout.file, 'utf8');
        layout.template = layout.template.replace(newLineRegex, ``);
        layout.template = layout.template.replace(whiteSpaceRegex, ` `);

        layout.compiled = Handlebars.compile(layout.template);

        this.layouts[layout.name] = layout;
    }

    createResource(filePath) {
        const resource = read.sync(filePath, 'utf8');
        const jsonResource = JSON.parse(resource);
        if (jsonResource) {
            this.resources = Object.assign(this.resources || {}, jsonResource)
        }
    }

    parseLayout(pattern) {
        this.watchable.push({pattern: pattern, type: 'layout'});
        const files = glob.sync(pattern);
        for (let i = 0; i < files.length; i++) {
            this.createLayout(files[i])
        }
    }

    parse(pattern, skipWrite) {
        this.watchable.push({pattern: pattern, type: 'component'});
        const files = glob.sync(pattern);
        for (let i = 0; i < files.length; i++) {
            this.createComponent(files[i], skipWrite)
        }
    }

    parseResource(pattern) {
        this.watchable.push({pattern: pattern, type: 'resource'});
        const files = glob.sync(pattern);
        for (let i = 0; i < files.length; i++) {
            this.createResource(files[i])
        }
    }

    buildRoute(h, route, basePath, parents) {
        this.routeCount += 1;
        route.parents = parents;
        route.id = this.routeCount;
        let newPath = path.posix.join(basePath, route.path);

        // replace {param} with :param
        newPath = newPath.replace(regex, subst);

        if (route.path === '/') {
            newPath += '/'
        }
        if (!this.hasOwnProperty(newPath)) {
            h[newPath] = [];
        }
        if (parents) {
            h[newPath] = h[newPath].concat(parents)
        }
        if (!route.children || route.children.length === 0) {
            h[newPath].push(route)
        }
        if (route.children && route.children.length > 0) {
            let ps = parents || [];
            ps.push(route);
            for (let i = 0; i < route.children.length; i++) {
                h = this.buildRoute(h, route.children[i], newPath, ps)
            }
        }
        return h
    }

    changeDetected(watchable) {
        return change => {
            if (watchable.type === 'component') {
                this.createComponent(change.path)
            } else if (watchable.type === 'layout') {
                this.createLayout(change.path)
            } else if (watchable.type === 'resource') {
                this.createResource(change.path)
            }
            if (this.reload) {
                this.reload.reload()
            }
        }
    }

    setupExpress(app, opt) {
        // definitions
        //Handlebars.registerPartial('definitions', `<script src="/${this.componentsId}.js"></script>`);

        Handlebars.registerPartial('definitions', `<script>(()=>{'use strict';window.context={{{contextObject}}} })()</script><script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-bundle.js"></script><script src="/${this.componentsId}.js"></script>`);

        // Serve components
        app.use('/' + this.componentsId + '.js', (req, res, next) => {
            const lang = req.query.lang || this.defaultLocale;
            res.type('application/javascript');
            res.send(this.packagedHandlebars(true));
            //next()
        });

        // serve self-contained components
        Object.keys(this.components).map(i => {
            const component = this.components[i];
            app.use('/' + component.name + '.component.js', (req, res, next) => {
                res.type('application/javascript');
                res.send(this.selfContainedComponent(component));
                //next()
            });
        });

        if (opt) {
            if (opt.hasOwnProperty('liveReload') && opt.liveReload === true) {
                this.reload = reload(app);
                for (let i = 0; i < this.watchable.length; i++) {
                    const w = this.watchable[i];
                    gulp.watch(w.pattern, this.changeDetected(w))
                }
            }
        }

        this.routeCount = -1;
        this.handle = {}; // map of array of routes
        for (let i = 0; i < this.routes.length; i++) {
            this.handle = this.buildRoute(this.handle, this.routes[i], "/", [])
        }

        for (const p in this.handle) {
            if (this.handle.hasOwnProperty(p)) {
                const rs = this.handle[p];
                app.get(p, this.handleRoute(p, rs))
            }
        }

        // Language helper
        Handlebars.registerHelper("i18n", (locale, k) => {
            return this.resources.translations[locale][k]
        });

        // JSON helper
        Handlebars.registerHelper("json", k => {
            return JSON.stringify(k)
        });

    }

    handleRoute(p, rs) {
        return (req, res) => {
            return new Promise((resolve, reject) => {
                let context = {
                    storage: this.resources
                };
                if (req.params) {
                    context.query = req.params
                }
                context.query = Object.assign(context.query || {}, req.query);
                if (req.query.hasOwnProperty('lang')) {
                    this.locale = req.query.lang || this.defaultLocale
                } else {
                    this.locale = this.defaultLocale
                }
                let layoutName = 'index';

                if (rs && rs.length > 0) {
                    const r = rs[0];
                    if (r && r.hasOwnProperty('layout') && r.layout.length > 0) {
                        layoutName = r.layout
                    }
                }

                const layout = this.getLayout(layoutName);
                const registeredPages = [];
                const selfContainedWaiting = [];
                const requests = [];

                let outletName = 'router-outlet';
                for (let i = 0; i < rs.length; i++) {
                    const r = rs[i];
                    if (r.hasOwnProperty('redirect')) {
                        res.redirect(308, r.redirect);
                        return resolve()
                    }
                    if (r.hasOwnProperty('outlet') && !!r.outlet && r.outlet.length > 0) {
                        outletName = r.outlet
                    }
                    registeredPages.push(outletName);
                    const component = this.components[r.component];
                    if (component.skipWrite) {
                        selfContainedWaiting.push(component)
                    }
                    Handlebars.registerPartial(outletName, "<" + component.name + ">" + (component.render ? component.template : "") + "</" + component.name + ">");
                    if (r.hasOwnProperty('requests')) {
                        r.requests.forEach(_request => {
                            const request = {
                                url: _request.url,
                                method: _request.method,
                                headers: _request.headers,
                                body: _request.body,
                            };

                            if (request.hasOwnProperty('url')) {
                                /*let resolvedApiUri = request.url;*/
                                request.url = request.url.replace(this.regex, function (match, param) {
                                    return match.replace('$' + param, req.params[param]);
                                });

                                let split = request.url.split('?');
                                request.url = split[0];
                                let resolvedQuery = '';
                                if (split.length > 1) {
                                    resolvedQuery = split[1]
                                }

                                for (let k in req.query) {
                                    if (req.query.hasOwnProperty(k)) {
                                        if (resolvedQuery.length > 0) {
                                            resolvedQuery += '&'
                                        }
                                        resolvedQuery += k + '=' + req.query[k]
                                    }
                                }

                                request.url += '?' + resolvedQuery;
                            }

                            if (request.hasOwnProperty('body') && typeof request.body === "object") {
                                /*let resolvedApiUri = request.url;*/
                                const body = JSON.stringify(request.body).replace(this.regex, function (match, param) {
                                    return match.replace('$' + param, req.params[param]);
                                });

                                request.body = JSON.parse(body);
                            }

                            if (request.hasOwnProperty('method') && typeof request.method === "string") {
                                request.method = request.method.toUpperCase();
                                switch (request.method) {
                                    case "GET":
                                    case "POST":
                                        /*case "PUT":
                                        case "OPTIONS":
                                        case "DELETE":
                                        case "POST":*/
                                        break;
                                    default:
                                        reject("method not allowed: " + request.method)
                                }
                            } else {
                                request.method = "GET"
                            }

                            requests.push(request)
                        });
                    }
                    if (r.hasOwnProperty('page')) {
                        context = Object.assign(context, r.page);
                    }
                }

                let selfContaining = "";
                selfContainedWaiting.forEach(component => {
                    selfContaining += this.selfContainedComponent(component)
                });


                // add locale
                context['locale'] = this.locale;

                // get api data
                if (requests.length > 0) {
                    const ps = [];
                    context.data = {};

                    requests.forEach((r, index) => {
                        const client = request.createClient(r.url);
                        if (r.headers) {
                            for (let key in r.headers) {
                                if (r.headers.hasOwnProperty(key)) {
                                    client.headers[key] = r.headers[key]
                                }
                            }
                        }
                        switch (r.method) {
                            case "GET":
                                console.log('resolving GET ' + r.url);
                                ps.push(new Promise((resolve1, reject1) => {
                                    client.get('', function (err, response, body) {
                                        context.data[index.toString()] = body;
                                        resolve1()
                                    });
                                }));
                                break;
                            case "POST":
                                console.log('resolving POST ' + r.url);
                                ps.push(new Promise((resolve1, reject1) => {
                                    client.post('', r.body, function (err, response, body) {
                                        context.data[index.toString()] = body;
                                        resolve1()
                                    });
                                }));
                                break;
                        }
                    });

                    Promise.all(ps).then(() => {
                        context["contextObject"] = JSON.stringify(context);
                        res.send(layout.compiled(context));
                        // remove pages from cache
                        for (let i = 0; i < registeredPages.length; i++) {
                            Handlebars.unregisterPartial(registeredPages[i])
                        }
                        resolve()
                    })
                } else {
                    context["contextObject"] = JSON.stringify(context);
                    res.send(layout.compiled(context));
                    // remove pages from cache
                    for (let i = 0; i < registeredPages.length; i++) {
                        Handlebars.unregisterPartial(registeredPages[i])
                    }
                    resolve()
                }
            })
        }
    }

    packagedHandlebars(isLocal) {
        const cArr = Object.keys(this.components).filter(i => {
            if (!this.components[i].skipWrite) {
                return this.components[i]
            }
        }).map(i => this.components[i]);

        const resources = Object.assign({}, this.resources || {});
        return `${handlebarsScript}(function(){'use strict';Handlebars.registerHelper("stringify",k=>{return JSON.stringify(k)});var template=Handlebars.template,templates=Handlebars.templates=Handlebars.templates || {};${cArr.map((component) => {
            return `Handlebars.partials['${component.name}'] = template(${component.precompiled});Handlebars.partials['_${component.name}'] = template(${component.precompiledTemplate});`
        }).join('')};WebComponents.waitFor=WebComponents.waitFor||function(p){return Promise.all([p].map(function(fn){return fn instanceof Function ? fn() : fn;}))};WebComponents.waitFor(()=>{return new Promise((res)=>{var cc=new function(){this.define=function(name,module){if(module&&module.hasOwnProperty('exports')){module.exports.prototype.template=function(c,o){return Handlebars.partials["_"+name](c,o)};window.customElements.define(name,module.exports)}}};window['customComponents']=cc;${cArr.map((component) => {
            return component.script ? `cc.define('${component.name}',(function(){var module={};${component.script};return module})());` : ''
        }).join('')};res()})})${isLocal ? `;var r=document.createElement('script');r.setAttribute('src','/reload/reload.js');document.head.appendChild(r)` : ``}})();`
    }

    selfContainedComponent(component) {
        return `(function(){'use strict';WebComponents.waitFor(()=>new Promise(n=>{var cc=new function(){this.define=function(n,e){e&&e.hasOwnProperty("exports")&&(e.exports.prototype.template=function(e,t){return Handlebars.partials[n](e,t)},window.customElements.define(n,e.exports))}};Handlebars.partials['${component.name}']=Handlebars.template(${component.precompiled});cc.define('${component.name}',(function(){const module={};${component.minifiedScript ? component.minifiedScript : ''};return module})());n()}));})();`
    }

    build(dist) {
        mkDirByPathSync(dist);
        mkDirByPathSync(dist + '/public');

        // copy static files
        copydir.sync(this.workingDir + '/public', dist + '/public');
        // build manifest.json file

        const componentsVersion = crypto.randomBytes(6).toString('hex');
        const manifest = {
            'imports': [],
            'routes': this.routes,
            'defaultLocale': this.defaultLocale,
            'resources': this.resources,
            'componentsVersion': componentsVersion,
        };
        for (let name in this.components) {
            if (this.components.hasOwnProperty(name)) {
                const component = this.components[name];

                // write template
                const templatePath = 'public/' + name + '.template.html';
                fs.writeFileSync(dist + "/" + templatePath, component.template);

                // write self-contained component
                const componentPath = 'public/' + name + '.component.js';
                fs.writeFileSync(dist + "/" + componentPath, this.selfContainedComponent(component));

                manifest.imports.push({
                    'templatePath': templatePath,
                    'componentPath': componentPath,
                    'name': name,
                    'render': component.render,
                })
            }
        }

        // write singlefile packaged handlebars
        const packagedHandlebars = 'public/' + componentsVersion + '.js';
        fs.writeFileSync(dist + "/" + packagedHandlebars, this.packagedHandlebars());

        // add definitions partial
        fs.writeFileSync(dist + "/definitions.html", `<script>(()=>{'use strict';window.context={{{contextObject}}} })()</script><script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js"></script><script src="/${componentsVersion}.js"></script>`);
        manifest.imports.push({
            'templatePath': "definitions.html",
            'name': "definitions",
            'render': true
        });

        for (let name in this.layouts) {
            if (this.layouts.hasOwnProperty(name)) {
                const newFilePath = 'public/' + name + '.layout.html';

                // write file
                fs.writeFileSync(dist + '/' + newFilePath, this.layouts[name].template);

                manifest.imports.push({
                    'templatePath': newFilePath,
                    'name': name,
                    'layout': true,
                })
            }
        }

        jsonfile.writeFileSync(dist + '/manifest.json', manifest)
    }
};

function mkDirByPathSync(targetDir, {isRelativeToScript = false} = {}) {
    const sep = path.sep;
    const initDir = path.isAbsolute(targetDir) ? sep : '';
    const baseDir = isRelativeToScript ? __dirname : '.';
    targetDir.split(sep).reduce((parentDir, childDir) => {
            const curDir = path.resolve(baseDir, parentDir, childDir);
            try {
                fs.mkdirSync(curDir);
            } catch (err) {
                if (err.code !== 'EEXIST') {
                    throw err;
                }
            }
            return curDir;
        },
        initDir
    )
}

const handlebarsScript = read.sync('./node_modules/handlebars/dist/handlebars.min.js');