Wagon Engine

Wagon is a very fast and cool templating engine for fast development.

Here is quick example on the syntax.

<div id="myDiv">
    {#if (usingWagon === true)}
        {niceMessage()}
    {:else}
        Use it because it is cool.
    {/if}
</div>

As you can see, it is literally javascript in html.

Now lets try to compile this template.

let renderer = Template.fromFile("fullPathToTemplate.html").compile();
console.log(
  renderer({
    usingWagon: true,
    niceMessage: () => "Yay, you are using Wagon!",
  })
);

Ouputs

<div id="myDiv">Yay, you are using Wagon!</div>

Time to spice things up!

with for loops...

{#for (let i = 0; i < 10; i ++>)}
    {i}
{/for}

Outputs...

0 1 2 3 4 5 6 7 8 9

with while loops...

{#while (true)}
    Oops no good
{/while}

Outputs...

Nothing just like any javascript never ending loop.

with literally javascript code...

{%
    class Human {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
        greet() {
            return `Hello, my name is ${this.name} and I am ${this.age}.`
        }
    }
}
{new Human("Bob", 20).greet()}

Outputs...

Hello, my name is Bob and I am 20

Very simple syntax...

| syntax | description | example | | --------------------- | ----------------------------- | ------------------------------------ | | {code} | Evaluated and displayed | {"You will see me"} | | {% code} | Evaluated, but not displayed | {% let m = "You will not"} | | {# block statement} | Open a block statement | {# if (true)} | | {: block statement} | Chains a block statement | {: else if (true)} | | {/...} | Closes a block statement | {/ if} | | {@ code} | Evaluated during compile time | {@ this.include("./partial.html")} |

Render time variables

| name | description | | ------- | ------------------------------ | | $main | Root template name (full path) | | $html | In generation HTML | | $code | Generated code | | data | Props passed from the renderer |

$html can be modified by the template.

So...

{% $html += "Hello world"}

will be the same as...

{"Hello world"}

or even simpler...

Hello world

Compile time variables and methods

| name | description | | ------------------------------------- | ------------------------------------------- | | this.main | Root template name (full path) | | this.name | Current template name (full path) | | this.raw | Raw template | | this.code | In genration code | | this.vars | Render time variable names. eg. $html | | this.define(string name, any value) | Define a constant | | this.include(string relativePath) | Inserts compiled code from another template | | this.add(string code) | Inserts code during compile time |

Syntax highlighting

There is syntax highlighter in the VScode Marketplace. https://marketplace.visualstudio.com/items?itemName=str1z.html-wagon-syntax-highlighting