mirror of
https://github.com/discourse/discourse.git
synced 2024-12-15 20:33:41 +08:00
260 lines
7.2 KiB
JavaScript
260 lines
7.2 KiB
JavaScript
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());
|
|
}
|
|
|
|
}
|
|
}
|
|
};
|
|
};
|