Views

Entropy comes with handy built-in view template engine. View templates in your app are placed in /views directory and inside modules. View files have the *.atom.html extension.

Template Engine

Entropy template engine allows you to create loops, conditionals and variable interpolation.

An example view template may look like this:

        

          

          

          


          
views/home.atom.html

        
<nav>
  @if (!user.authenticated)
    <h2>You have to log in.</h2>
  @/if
</nav>

<main>
  @for (post in posts)
    <article class="post">{{ post.content }}</article>
  @empty
    <p>There are no posts yet.</p>
  @/for
</main>

Conditional Blocks

You can specify a conditional block using special @if directive. You may also provide an @else block that will render if condition is falsy.

        

          

          

          


          
views/home.atom.html

        
<nav>
  @if (user.authenticated)
    <div>{{ user.name }}</div>
  @else
    <p>You are not logged in.</p>
  @/if
</nav>

Form Request Methods

Entropy lets you to use all HTTP methods in forms thanks to the @method directive. Just pass a method name and you'll be able to use PUT, PATCH, DELETE and other methods in HTML forms.

        

          

          

          


          
views/home.atom.html

        
<form action="/login" method="post">
  @method('PATCH')
</form>

JSON Serialization

Sometimes you need to pass some data from backend to frontend using HTML <script /> tag. You can accomplish that by converting data to JSON with @json directive:

        

          

          

          


          
views/home.atom.html

        
<script>
  window.userData = @json(userData);
</script>

Partials

Entropy provides support for partials. You can split your view into smaller pieces using the @include directive:

        

          

          

          


          
views/home.atom.html

        
<main>
  @include('partials/content');
</main>

CSRF Token

For every user session Entropy generates a unique token to protect your application from Cross-Site Request Forgery attacks.

Anytime you define HTML forms with method other than GET and HEAD, you need to add a hidden field containing generated token. Otherwise, you won't be able to pass the form and you'll get the 419 Invalid Token error.

To add the token field just use the @csrf directive:

        

          

          

          


          
views/home.atom.html

        
<form action="/login" method="post">
  @csrf
</form>

Raw Templates

Sometimes you may want to left some parts of code uncompiled. For example, when you are using some frontend framework, you may want not to parse the code with template engine. That's why Entropy comes with a @raw directive:

        

          

          

          


          
views/home.atom.html

        
@​raw
  {{ content }}
@​/raw

Switch

Just like switch statements in JavaScript and TypeScript, you can use them in your views:

        

          

          

          


          
views/home.atom.html

        
<main>
  @switch (role)
    @case ('user')
      <p>You are a user</p>
    @/case

    @case ('admin')
      <p>You are an administrator</p>
    @/case

    @case ('moderator')
      <p>You are a moderator</p>
    @/case

    @default
      <p>Invalid role</p>
    @/default
  @/switch
</main>

@dev and @prod

Entropy comes with two directives which allow you to render content only in development or production environment:

        

          

          

          


          
views/home.atom.html

        
@dev
  <script src="/build.development.js"></script>
@/dev

@prod
  <script src="/build.production.js"></script>
@/prod

@stack and @push

You can push view blocks to named stacks which will be rendered anywhere in your template using @stack and @push directives:

        

          

          

          


          
views/home.atom.html

        
<head>
  ...

  @stack('scripts')
</head>
        

          

          

          


          
views/home.atom.html

        
@push('scripts')
  <script src="/lib.js"></script>
@/push

<!-- Somewhere else (child view, etc.): -->

@push('scripts')
  <script src="/app.js"></script>
@/push

@hotReload

You are able to use Hot Reload (auto refresh) in your view files. To enable it, you need to add @hotReload directive to your <head> tag:

        

          

          

          


          
views/home.atom.html

        
<head>
  ...

  @hotReload
</head>

Layouts

Entropy's view engine provides support for layouts. You can define a layout template and use it in your views:

        

          

          

          


          
views/layouts/master.atom.html

        
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ title }} | My App</title>

    ...
  </head>

  <body>
    @include('partials/navigation')

    <main class="content">
      @slot('content')
    </main>
  </body>
<html>

As you can see, you can use the @slot directive to render the content of your view inside the layout. To use the layout, you need to add @layout directive to your view in order to specify the layout file:

        

          

          

          


          
views/pages/home.atom.html

        
@layout('../layouts/master')

@section('content')
  <div class="content">
    
Home page

  </div>
@/section

Comments

To add a comment that will not be renderer in a view, use the following syntax:

        

          

          

          


          
views/pages/home.atom.html

        
{{-- This is a comment --}}

Global Constants

Entropy exposes few global constants you can use in your views:

Constant
Description
$DENO_VERSION
Deno runtime version
$OS
Operating system
$TYPESCRIPT_VERSION
TypeScript version
$V8_VERSION
Deno V8 engine version
$VERSION
Entropy framework version

That you can use in your templates:

        

          

          

          


          
views/pages/home.atom.html

        
<h1>This app is running on Entropy version {{ $VERSION }}</h1>

Predefined Variables

Yout can also access some request-related data with predefined variables:

Variable
Description
$errors
Form validation error bag
$input
Previous request form input
$request
Current HTTP request object
$session
Request session object
$token
CSRF security token
$translate
Translator util function
        

          

          

          


          
views/pages/home.atom.html

        
<p>You are visiting {{ $request.path() }} route</p>
Requests Dependency Injection