Transpilation Overview

🔗What's up with transpilation?

Transpilation is the process of converting source code from one programming language to another. In this case, Tim is capable of transpiling its own scripting language into multiple target languages, such as JavaScript, Python, PHP, Lua, Ruby and Nim. This allows developers to write their templates in Tim's scripting language while still being able to use the generated code in their preferred programming language.

🔗Benefits of transpilation

Transpilation allows developers to write their templates in Tim's scripting language while still being able to use their favorite stack, tools and programming languages.

The front-end migration process can be a daunting task. Having your front-end logic written in scripting language like Tim can make the transition smoother, as you can transpile your existing code to the target language without having to rewrite it from scratch.

🔗JavaScript

Transpiling a Tim template to JavaScript is straightforward. Here, we have a simple Tim template that includes a variable and some HTML elements:

div.container
  var name = "Tim Engine is Awesome!"
  p: $name

Now, using the src command, we can pass --ext:js to specify the target language for transpilation:

tim src example.timl --ext:js

The resulting JavaScript code would look something like this:

class Test {
  static render(locals = {}, app = {}) {
    let html = "";
    html += `<div class=\"container\">`;
    /** @type {string} */
    let name = "Tim Engine is Awesome!";
    html += `<p>`;
    html += String(name);
    html += `</p>`;
    html += `</div>`;
    return html;
  }
}
module.exports = Test;

As you can see from the example, the Tim template is transpiled into a JavaScript class with a static render method that generates the HTML output. The variable name is defined and used within the method, demonstrating how the scripting language is transpiled into JavaScript code.

🔗Nim language

Transpiling the same template into Nim is possible with the --ext:nim flag:

tim src example.timl --ext:nim

The resulting Nim code would look like this:

import std/[json]

proc getTestView*(locals, app: JsonNode = newJObject()): string =
  var result = ""
  add result, "<div class=\"container\">"
  var name = "Tim Engine is Awesome!"
  add result, "<p>"
  add result, $name
  add result, "</p>"
  add result, "</div>"
  move(result)

🔗Ruby

Transpiling the same template into Ruby is also possible using the --ext:rb flag. This will generate the following Ruby code:

class Test
  # @param locals [Hash] Local data
  # @param app [Hash] Global data
  # @return [String] The generated HTML.
  def self.render(locals = {}, app = {})
    html = +""
    html << "<div class=\"container\">"
    name = "Tim Engine is Awesome!"
    html << "<p>"
    html << "#{ name }"
    html << "</p>"
    html << "</div>"
    html
  end
end

🔗Python

Switching from Ruby to Python is as simple as changing the --ext flag to --ext:py. The resulting Python code would look like this:

class Test:
    @staticmethod
    def render(locals=None, app=None):
        html = []
        html.append(f'<div class=\"container\">')
        # type: name: Any
        name = 'Tim Engine is Awesome!'
        html.append(f'<p>')
        html.append(str(name))
        html.append('</p>')
        html.append('</div>')
        return ''.join(html)

🔗Lua

Transpiling to Lua is also supported. By using the --ext:lua flag, the generated Lua code would look like this:

local Test = {}

-- @param args Table
-- @return string The generated HTML.
function Test.render(args)
  local app = args.app or {}
  local this = args.this or {}
  local html = ''
  html = html .. "<div class=\"container\">"
  local name = "Tim Engine is Awesome!"
  html = html .. "<p>"
  html = html .. tostring(name)
  html = html .. "</p>"
  html = html .. "</div>"
  return html
end
return Test

🔗PHP

Transpiling to PHP is also supported. By using the --ext:php flag, the generated PHP code would look like this:

<?php
class Test {
  static function render($locals = [], $app = []) {
    $html = '';
    $html .= "<div class=\"container\">";
    // @var $name: string
    $name = "Tim Engine is Awesome!";
    $html .= "<p>";
    $html .= $name;
    $html .= "</p>";
    $html .= "</div>";
    return $html;
  }
}