discourse/lib/javascripts/widget-hbs-compiler.js.es6

function resolve(path) {
  if (path.indexOf('settings') === 0 || path.indexOf('transformed') === 0) {
    return `this.${path}`;
  }
  return path;
}

function sexp(value) {
  if (value.path.original === "hash") {

    let result = [];

    value.hash.pairs.forEach(p => {
      let pValue = p.value.original;
      if (p.value.type === "StringLiteral") {
        pValue = JSON.stringify(pValue);
      }

      result.push(`"${p.key}": ${pValue}`);
    });

    return `{ ${result.join(", ")} }`;
  }
}

function argValue(arg) {
  let value = arg.value;
  if (value.type === "SubExpression") {
    return sexp(arg.value);
  } else if (value.type === "PathExpression") {
    return value.original;
  } else if (value.type === "StringLiteral") {
    return JSON.stringify(value.value);
  }
}

function mustacheValue(node, state) {
  let path = node.path.original;

  switch(path) {
    case 'attach':
      let widgetName = argValue(node.hash.pairs.find(p => p.key === "widget"));

      let attrs = node.hash.pairs.find(p => p.key === "attrs");
      if (attrs) {
        return `this.attach(${widgetName}, ${argValue(attrs)})`;
      }
      return `this.attach(${widgetName}, attrs)`;

      break;
    case 'yield':
      return `this.attrs.contents()`;
      break;
    case 'i18n':
      let value;
      if (node.params[0].type === "StringLiteral") {
        value = `"${node.params[0].value}"`;
      } else if (node.params[0].type === "PathExpression") {
        value = resolve(node.params[0].original);
      }

      if (value) {
        return `I18n.t(${value})`;
      }

      break;
    case 'fa-icon':
    case 'd-icon':
      state.helpersUsed.iconNode = true;
      let icon = node.params[0].value;
      return `__iN("${icon}")`;
      break;
    default:
      if (node.escaped) {
        return `${resolve(path)}`;
      } else {
        state.helpersUsed.rawHtml = true;
        return `new __rH({ html: '<span>' + ${resolve(path)} + '</span>'})`;
      }
      break;
  }
}

class Compiler {
  constructor(ast) {
    this.idx = 0;
    this.ast = ast;

    this.state = {
      helpersUsed: {}
    };
  }

  newAcc() {
    return `_a${this.idx++}`;
  }

  processNode(parentAcc, node) {
    let instructions = [];
    let innerAcc;

    switch(node.type) {
      case "Program":
        node.body.forEach(bodyNode => {
          instructions = instructions.concat(this.processNode(parentAcc, bodyNode));
        });
        break;
      case "ElementNode":
        innerAcc = this.newAcc();
        instructions.push(`var ${innerAcc} = [];`);
        node.children.forEach(child => {
          instructions = instructions.concat(this.processNode(innerAcc, child));
        });

        if (node.attributes.length) {

          let attributes = [];
          node.attributes.forEach(a => {
            const name = a.name === 'class' ? 'className' : a.name;
            if (a.value.type === "MustacheStatement") {
              attributes.push(`"${name}":${mustacheValue(a.value, this.state)}`);
            } else {
              attributes.push(`"${name}":"${a.value.chars}"`);
            }
          });

          const attrString = `{${attributes.join(', ')}}`;
          instructions.push(`${parentAcc}.push(virtualDom.h('${node.tag}', ${attrString}, ${innerAcc}));`);
        } else {
          instructions.push(`${parentAcc}.push(virtualDom.h('${node.tag}', ${innerAcc}));`);
        }

        break;

      case "TextNode":
        return `${parentAcc}.push(${JSON.stringify(node.chars)});`;

      case "MustacheStatement":
        const value = mustacheValue(node, this.state);
        if (value) {
          instructions.push(`${parentAcc}.push(${value})`);
        }
        break;
      case "BlockStatement":
        let negate = '';

        switch(node.path.original) {
          case 'unless':
            negate = '!';
          case 'if':
            instructions.push(`if (${negate}${resolve(node.params[0].original)}) {`);
            node.program.body.forEach(child => {
              instructions = instructions.concat(this.processNode(parentAcc, child));
            });

            if (node.inverse) {
              instructions.push(`} else {`);
              node.inverse.body.forEach(child => {
                instructions = instructions.concat(this.processNode(parentAcc, child));
              });
            }
            instructions.push(`}`);
            break;
          case 'each':
            const collection = resolve(node.params[0].original);
            instructions.push(`if (${collection} && ${collection}.length) {`);
            instructions.push(`  ${collection}.forEach(${node.program.blockParams[0]} => {`);
            node.program.body.forEach(child => {
              instructions = instructions.concat(this.processNode(parentAcc, child));
            });
            instructions.push(`  });`);
            instructions.push('}');

            break;
        }
        break;
      default:
        break;
    }

    return instructions.join("\n");
  }

  compile() {
    return this.processNode('_r', this.ast);
  }

}

function compile(template) {
  const preprocessor = Ember.__loader.require('@glimmer/syntax');
  const compiled = preprocessor.preprocess(template);
  const compiler = new Compiler(compiled);

  let code = compiler.compile();

  let imports = '';
  if (compiler.state.helpersUsed.iconNode) {
    imports += "var __iN = Discourse.__widget_helpers.iconNode; ";
  }
  if (compiler.state.helpersUsed.rawHtml) {
    imports += "var __rH = Discourse.__widget_helpers.rawHtml; ";
  }

  return `function(attrs, state) { ${imports}var _r = [];\n${code}\nreturn _r; }`;
}

exports.compile = compile;

function error(path, state, msg) {
  const filename = state.file.opts.filename;
  return path.replaceWithSourceString(`function() { console.error("${filename}: ${msg}"); }`);
}

exports.WidgetHbsCompiler = function(babel) {
  let t = babel.types;
  return {
    visitor: {
      ImportDeclaration(path, state) {
        let node = path.node;
        if (t.isLiteral(node.source, { value: "discourse/widgets/hbs-compiler" })) {
          let first = node.specifiers && node.specifiers[0];
          if (!t.isImportDefaultSpecifier(first)) {
            let input = state.file.code;
            let usedImportStatement = input.slice(node.start, node.end);
            let msg = `Only \`import hbs from 'discourse/widgets/hbs-compiler'\` is supported. You used: \`${usedImportStatement}\``;
            throw path.buildCodeFrameError(msg);
          }

          state.importId = state.importId || path.scope.generateUidIdentifierBasedOnNode(path.node.id);
          path.scope.rename(first.local.name, state.importId.name);
          path.remove();
        }
      },

      TaggedTemplateExpression(path, state) {
        if (!state.importId) { return; }

        let tagPath = path.get('tag');
        if (tagPath.node.name !== state.importId.name) {
          return;
        }

        if (path.node.quasi.expressions.length) {
          return error(path, state, "placeholders inside a tagged template string are not supported");
        }

        let template = path.node.quasi.quasis.map(quasi => quasi.value.cooked).join('');

        try {
          path.replaceWithSourceString(compile(template));
        } catch(e) {
          return error(path, state, e.toString());
        }

      }
    }
  };
};