Editing Stubs/Templates

Vemto Template Engine (VET) is a template engine made for code and text generation. It can be used for any dynamic text generation and accepts all Javascript syntaxes inside special tags. VET files have the .vemtl extension.

Vemto uses this template engine for all code generation tasks and learning how to use it allows you to edit the existing templates and creating plugins that could generate custom code files.

To play with it, you can use the Templates Editor in the PlaygroundMode.

Introduction

Let's consider we have this data:

{
    "name": "Tiago Silva Pereira Rodrigues",
    "projects": [
        "VET", "Rapid Mockup", "Vemto"
    ]
}

And we have this text template:

Hi, I'm <$ this.name $>.

I created these projects:

<# It is a comment #>
<% for (let project of this.projects) { %>
    - <$ project $>
<% } %>

As you can see, we can attach the data to the template scope and can access it using this. Any javascript command is accepted inside <% %> tags.

Then, after compiling the template, the result will be:

Hi, I'm Tiago Silva Pereira Rodrigues.

I created these projects:

    - VET
    - Rapid Mockup
    - Vemto

{info} You can copy and paste the template above to the Templates Editor in the Playground Mode to play with it and see it being compiled in realtime

Tags

At this moment, VET has six different tags that can be used. All the text outside these tags will be generated without modifications, keeping the indentation and break lines.

The most commonly used tags are:

<# #> - Used for line comments. Everything inside these tags are removed from the resulting code
<$ $> - Used to show variables or expression values. Commands and variables inside these tags will be called and the result will be transformed into text
<% %> - Used for javascript logic blocks like if, for, etc. Commands and variables inside these tags will not be transformed to text. Accepts all javascript syntax, including creating variables during the template execution. You can use these tags to control the logic and the flux of your generated text/code

And here are some less used tags:

<* *> - Used to enable/disable modes (for example, to enable the indent-back mode)
<up up> - It is like <$ $>, but will put the result on the previous line (only if the tags are at the start of a new line)
<import template="imported.vemtl"> - Used to import other templates (it is necessary to declare all imported templates before compiling a file)

Examples:

<# It is a comment and will not be transformed to text #>
<# Showing a value - will convert to something #>
<# like "Tiago Rodrigues" #>
<$ this.name $>

---------------

<# Showing an expression return - will convert to  #>
<# something like "id", etc #>
<$ this.model.getPrimaryKeyName() $>

---------------

<# The second sentence will be generated #>
<# on the previous line - will result in something like #>
<# "Tiago Rodrigues - Tiago Rodrigues" #>
<$ this.name $> - 
<up if(true) { up>
<$ this.name $>
<up } up>

---------------

<# If this.data is equal true #>
<% if(this.canSayHello) { %>
Hello World!!
<% } %>

Here you can see the execution result for the code above:

Please notice that, to execute the code, we predefined the data on the Data Editor from the Templates Editor:

Modes

Modes can be enabled/disabled using the <* *> tags. They are used to modify the VET behavior when generating the code.

The following modes are available:

Indent-Back Mode

This mode is used to remove indentation from logic blocks (like <% %>). When this mode is enabled, the text of <$ $> tag result will always be sent to the same position of the highest logic block that it inherits.

{warning} You can notice that the indent-back mode is rarely used in the Vemto templates. It happens because generally Vemto formats the code using an specific formatter (for example, PHP formatter, Blade Formatter, etc). So it is not necessary to enable the indent-back mode (it would just waste processing). So, if you are using Vemto Formatters on your plugins, just ignore it

By default, VET will always keep the initial spaces of each line untouched. For example:

As you can see, the indentation was included in the generated code. To avoid this behavior, you can enable the indent-back mode:

The indent-back mode will always respect the text indentation. It only removes the logic indentation:

Without the indent-back mode, the only way to get the same result is to don't use indentation on logic blocks, but this impairs the readability of the VET code in some case (so please use this technique carefully):

To disable the indent-back mode, you can use the tag: <* end:indent-back *>. If you are using the mode in your entire VET code, it is not necessary to disable it.

Syntax Highlighter

We have a simple VET Syntax Highlighter for VSCode here.

The syntax highlighter will work on files with .vemtl extension.

Get Started