Handlebars 表达式扩展

link.extension.js

/**
 * @description - just handle block extension
 * @author - huang.jian <hjj491229492@hotmail.com>
 */

const fs = require('fs');
const path = require('path');
const hbs = require('handlebars');
const _ = require('lodash');

const { SafeString, Utils: { escapeExpression } } = hbs;

hbs.registerHelper('link', (resource) => {
  const scriptRegExp = /\.js$/;
  const stylesheetRegExp = /\.css$/;
  const state = { result: '' };

  switch (true) {
    case scriptRegExp.test(resource):
    case scriptRegExp.test(resource.src):
      state.result = linkScriptResource(resource);
      break;
    case stylesheetRegExp.test(resource):
    case stylesheetRegExp.test(resource.href):
      state.result = linkStyleSheetResource(resource);
      break;
    default:
      state.result = '';
  }

  return state.result;
});

const context = {
  scripts: [
    'https://static.zhihu.com/heifetz/main.app.c994694b7b8c848b345c.css',
    { src: 'https://static.zhihu.com/heifetz/main.app.c994694b7b8c848b345c.js', crossorigin: true },
  ]
};

const template = fs.readFileSync(path.resolve(__dirname, 'demo.hbs'), { encoding: 'utf8' });

console.log(hbs.compile(template)(context));

function linkScriptResource(script) {
  if (_.isString(script)) {
    return new SafeString(`<script type="application/javascript" src="${escapeExpression(script)}"></script>`);
  }

  if (_.isPlainObject(script)) {
    const { src, async, defer, crossorigin } = script;
    const addition = [
      async ? 'async' : '',
      defer ? 'defer' : '',
      crossorigin ? 'crossorigin="anonymous"' : '',
    ];
    const wrapper = {
      src: escapeExpression(src),
      addition: addition.filter((item) => item).join(' ')
    };

    return new SafeString(`<script type="application/javascript" src="${wrapper.src}" ${wrapper.addition}></script>`);
  }

  return '';
}

function linkStyleSheetResource(stylesheet) {
  if (_.isString(stylesheet)) {
    return new SafeString(`<link rel="stylesheet" href="${escapeExpression(stylesheet)}">`);
  }

  if (_.isPlainObject(stylesheet)) {
    const { rel, href } = stylesheet;
    const wrapper = {
      rel: _.isString(rel) ? escapeExpression(rel) : 'stylesheet',
      href: escapeExpression(href)
    };

    return new SafeString(`<link rel="${wrapper.rel}" href="${wrapper.href}">`);
  }

  return '';
}

function inline(resource) {
  const state = { result: '' };
  const { type, content } = resource;

  switch (type) {
    case 'stylesheet':
      state.result = `<style type="text/css">\n${escapeExpression(content)}\n</style>`;
      break;
    case 'script':
      state.result = `<script type="application/javascript">\n${escapeExpression(content)}\n</script>`;
      break;
    default:
      state.result = '';
  }

  return new SafeString(state.result);
}