[damn, I can't center the image] This is a front-end framework with a solid built-in template engine, a VanCode VM, plus:
- Supranim web server (with PowPow backend)
- Browser sync/reload
- A decent standard library
- Option to inject custom nim code See User Scripts
- Source to Source capabilities (py, lua, rb, php, nim, js, adding more soon)
- Embeddable in other languages as a native extension (python, ruby, php, lua, nodejs) (See showcase files in examples dir)
- WIP package manager
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!")
});
})
@endUsing 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")- Booyaka Documentation: https://tim.openpeeps.dev
- API Reference: https://openpeeps.github.io/tim/theindex.html
- Some benchmarks: https://github.com/openpeeps/tim#benchmarks
- VSCode extension https://github.com/georgelemon/tim-vscode-extension (need to publish it to the marketplace)
todos:
- For SPA, I need to find a way to integrate Tim with Web Components, using lit
- Tested on Linux and MacOS, untested on Windows
- Package manager
- Create packages for Bootstrap and other UI frameworks
- Publish packages for other langs
- Thinking seriously to publish on ProductHunt