wagon-engine v1.0.3

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...

Render time variables

$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

Syntax highlighting

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