Вот Вам пример простого шаблонизатора, который только умеет заменять переменные, без if/else/for...
const file = `
<template>
<div>
#{hello}
Component #{component.name} working!
</div>
</template>
<script>
export default {
name: '#{component.name}'
}
</script>
`;
const output = templater(file, {
hello: 'Hello from templater function',
component: {
name: "My Default Component Name"
}
});
console.log(output);
function templater(input, data, config) {
const setup = Object.assign({}, {
flag: 'g',
start: '\#\{',
end: '\}',
deep: true
}, config);
for (const key in data) {
if (Object.prototype.hasOwnProperty.call(data, key)) {
if (setup.deep && (typeof data[key] === "object" && data[key] !== null && !Array.isArray(data[key]))) {
const deep = {};
for (const name in data[key]) {
if (Object.prototype.hasOwnProperty.call(data[key], name)) {
deep[`${key}.${name}`] = data[key][name];
}
}
input = templater(input, deep, setup);
} else {
input = input.replace(new RegExp(setup.start + key + setup.end, setup.flag), data[key]);
}
}
}
return input;
}