
[damn, I can't center the image] This is a front-end framework with a solid built-in template engine, a VanCode VM, plus:
The main idea is to be able to keep the front-end templates decoupled from any backend language, and also to transpile the templates to any target language. Optionally, embed Tim in your backend language while keeping the front-end at Tim level. A salad of features, Crraazy!
The feeling:
var title = "Welcome to Tim Engine"
div.container > div.row > div.col-12
h1.display-4.fw-bold: $title // passing local variable to template
p.lead: "Tim Engine is a powerful front-end engine for cool developers"
a.btn.btn-primary.px-4.rounded-3
href="https://example.com": "Get Started"
HTML output via tim src test.timl:
<div class="container"><div class="row"><div class="col-12"><h1 class="display-4 fw-bold">Welcome to Tim Engine</h1><p class="lead">Tim Engine is a powerful front-end engine for cool developers</p><a href="https://example.com" class="btn btn-primary px-4 rounded-3">Get Started</a></div></div></div>
JS output, 'tim src test.timl --ext:js':
class Test {
static render(locals = {}, app = {}) {
let html = "";
/** @type {string} */
let title = "Welcome to Tim Engine";
html += `<div class=\"container\">`;
html += `<div class=\"row\">`;
html += `<div class=\"col-12\">`;
html += `<h1 class=\"display-4 fw-bold\">`;
html += String(title);
html += `</h1>`;
html += `<p class=\"lead\">`;
html += `Tim Engine is a powerful front-end engine for cool developers`;
html += `</p>`;
html += `<a class=\"btn btn-primary px-4 rounded-3\" href=\"https://example.com\">`;
html += `Get Started`;
html += `</a>`;
html += `</div>`;
html += `</div>`;
html += `</div>`;
return html;
}
}
module.exports = Test;
More examples:
A basic page using Bootstrap
html
title: "Tim Engine is Awesome!"
meta charset="utf-8"
meta name="viewport" content="width=device-width, initial-scale=1"
link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
body
div.container > div.row > div.col-md-12.text-center
h1: "Tim Engine is Awesome!"
p: "This is a basic example of a Tim Engine template using Bootstrap for styling."
// bootstrap JS bundle
script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
Add vanilla JS to your template:
a.btn.btn-primary: "Learn More"
@javascript
document.addEventListener("DOMContentLoaded", () => {
document.querySelector('.btn').addEventListener('click', () => {
console.log("Hello, World!")
});
})
@end
Using a Tim macro to create reusable component:
macro primary-button(label: string, url: string) =
a.btn.btn-primary title=$label href=url: $label
@primary-button("Click Me", "https://example.com")
todos: