Ulka Syntax

You can use any template engine you like. But ulka introduces new template engine @ulkajs/template-engine. This template engine is specially made for javascript developers. This template engine allows you to write javascript inside double curly brackets{{}}.

If you use vscode, I recommend you to download vscode-ulka extension. This extension will highlight and format code written inside *.ulka files.

Variables

{{ const name = "Roshan Acharya" }}

<h1>My name is {{ name }}.</h1>

Above code will output:

<h1>My name is Roshan Acharya.</h1>

Loops

{{ const langs = ["Javascript", "Rust", "Typescript", "C++"] }}

<div>
  {{ langs.map(lang => /* HTML */`<h1>I love ${lang}.</h1>`) }}
</div>

(/* HTML */ comment is used by vscode-ulka extension to highlight and format html inside template literal.) Above code will output:

<div>
  <h1>I love Javascript.</h1>
  <h1>I love Rust.</h1>
  <h1>I love Typescript.</h1>
  <h1>I love C++.</h1>
</div>

Conditionals

{{ const ulkaIsAwesome = true }}

{{ ulkaIsAwesome ? /* HTML */`<h1>😍 Thank you.</h1>`: /* HTML */`<h1>💔😥</h1>` }}

Above code will output:

<h1>😍 Thank you.</h1>

If you wan't to use if/else statement then you can use IIFE.

{{
  (() => {
    if (true){
      return /* HTML */`<h1>😍 Thank you.</h1>`
    } else {
      return /* HTML */`<h1>💔😥</h1>`
    }
  })()
}}

Importing

{{ import("./partials/header.ulka") }}

<h1>Hello World</h1>

{{ import("./partials/footer.ulka") }}

<!-- OR -->

{{
  const head = import("./partials/header.ulka")
  const footer = import("./partials/footer.ulka")
}}

{{ head }}

<h1>Hello World</h1>

{{ footer }}

Using require

You can use require as you do in normal javascript.

{{ require("./package.json").version }}

{{
  const dayjs = require("dayjs")
  dayjs.format()
}}