Temple8 Templates

Introduction

Temple8 is the simple, yet powerful templating engine that is included with LaraGram. Unlike some PHP templating engines, Temple8 does not restrict you from using plain PHP code in your templates. In fact, all Temple8 templates are compiled into plain PHP code and cached until they are modified, meaning Temple8 adds essentially zero overhead to your application. Temple8 template files use the .t8.php file extension and are typically stored in the app/templates directory.

Temple8 templates may be returned from listens or controllers using the global template helper. Of course, as mentioned in the documentation on templates, data may be passed to the Temple8 template using the template helper's second argument:

Bot::onText('hi', function () {
    return template('greeting', ['name' => 'Finn']);
});

Displaying Data

You may display data that is passed to your Temple8 templates by wrapping the variable in curly braces. For example, given the following listen:

Bot::onText('hi', function () {
    return template('welcome', ['name' => 'Samantha']);
});

You may display the contents of the name variable like so:

Hello, {{ $name }}.

NOTE

Temple8's echo statements are automatically sent through PHP's htmlspecialchars function.

You are not limited to displaying the contents of the variables passed to the template. You may also echo the results of any PHP function. In fact, you can put any PHP code you wish inside of a Temple8 echo statement:

The current UNIX timestamp is {{ time() }}.

Displaying Unescaped Data

By default, Temple8 statements are automatically sent through PHP's htmlspecialchars function. If you do not want your data to be escaped, you may use the following syntax:

Hello, {!! $name !!}.

Temple8 Directives

In addition to template inheritance and displaying data, Temple8 also provides convenient shortcuts for common PHP control structures, such as conditional statements and loops. These shortcuts provide a very clean, terse way of working with PHP control structures while also remaining familiar to their PHP counterparts.

Inputs

You can write all Telegram method inputs as Temple8 directives, making your templates clean and expressive.

@text()
Hello
@endText

@parse_mode(markdown)

@chat_id(123456789)

The chat_id input is optional. if not defined, it will default to the chat_id from the current request.

Method Field

The @method Temple8 directive change API request method:

@method('sendAnimation')

The method is optional. if not defined, it will default to the sendMessage.

Keyboard Builder

Defining keyboards is also incredibly simple using the @keyboard, @row, and @col directives.

@keyboard()
    @row()
        @col('first', callback_data: 'first_btn')
        @col('second', callback_data: 'second_btn')
    @endRow
    @row()
        @col('return', callback_data: 'return_btn') 
    @endRow
@endKeyboard()

To specify the keyboard type, simply pass the desired type as an argument to the @keyboard directive. By default, the keyboard type is set to inlineKeyboardMarkup.

@keyboard(reply)

@endKeyboard()

Available Keyboard Types

directive parameter name	type
reply	replyKeyboardMarkup
remove	replyKeyboardRemove
force	forceReply
inline	inlineKeyboardMarkup

If Statements

You may construct if statements using the @if, @elseif, @else, and @endif directives. These directives function identically to their PHP counterparts:

@if (count($records) === 1)
    I have one record!
@elseif (count($records) > 1)
    I have multiple records!
@else
    I don't have any records!
@endif

For convenience, Temple8 also provides an @unless directive:

@unless ($user->signed())
    You are not signed in.
@endunless

In addition to the conditional directives already discussed, the @isset and @empty directives may be used as convenient shortcuts for their respective PHP functions:

@isset($records)
    // $records is defined and is not null...
@endisset

@empty($records)
    // $records is "empty"...
@endempty

Environment Directives

You may check if the application is running in the production environment using the @production directive:

@production
    // Production specific content...
@endproduction

Or, you may determine if the application is running in a specific environment using the @env directive:

@env('staging')
    // The application is running in "staging"...
@endenv

@env(['staging', 'production'])
    // The application is running in "staging" or "production"...
@endenv

Section Directives

You may determine if a template inheritance section has content using the @hasSection directive:

@hasSection('greeting')
    @text()
        Hello
    @endText()
@endif

You may use the sectionMissing directive to determine if a section does not have content:

@sectionMissing('greeting')
    @text()
        @include('default-greeting')
    @endText()
@endif

Context Directives

The @context directive may be used to determine if a context value exists. If the context value exists, the template contents within the @context and @endcontext directives will be evaluated. Within the @context directive's contents, you may echo the $value variable to display the context value:

@context('canonical')
    
@endcontext

Switch Statements

Switch statements can be constructed using the @switch, @case, @break, @default and @endswitch directives:

@switch($i)
    @case(1)
        First case...
        @break

    @case(2)
        Second case...
        @break

    @default
        Default case...
@endswitch

Loops

In addition to conditional statements, Temple8 provides simple directives for working with PHP's loop structures. Again, each of these directives functions identically to their PHP counterparts:

@for ($i = 0; $i < 10; $i++)
    The current value is {{ $i }}
@endfor

@foreach ($users as $user)
    This is user {{ $user->id }}
@endforeach

@forelse ($users as $user)
    {{ $user->name }}
@empty
    No users
@endforelse

@while (true)
    I'm looping forever.
@endwhile

NOTE

While iterating through a foreach loop, you may use the loop variable to gain valuable information about the loop, such as whether you are in the first or last iteration through the loop.

When using loops you may also skip the current iteration or end the loop using the @continue and @break directives:

@foreach ($users as $user)
    @if ($user->type == 1)
        @continue
    @endif

    {{ $user->name }}

    @if ($user->number == 5)
        @break
    @endif
@endforeach

You may also include the continuation or break condition within the directive declaration:

@foreach ($users as $user)
    @continue($user->type == 1)

    {{ $user->name }}

    @break($user->number == 5)
@endforeach

The Loop Variable

While iterating through a foreach loop, a $loop variable will be available inside of your loop. This variable provides access to some useful bits of information such as the current loop index and whether this is the first or last iteration through the loop:

@foreach ($users as $user)
    @if ($loop->first)
        This is the first iteration.
    @endif

    @if ($loop->last)
        This is the last iteration.
    @endif

    This is user {{ $user->id }}
@endforeach

If you are in a nested loop, you may access the parent loop's $loop variable via the parent property:

@foreach ($users as $user)
    @foreach ($user->posts as $post)
        @if ($loop->parent->first)
            This is the first iteration of the parent loop.
        @endif
    @endforeach
@endforeach

The $loop variable also contains a variety of other useful properties:

class="overflow-auto

Property	Description
$loop->index	The index of the current loop iteration (starts at 0).
$loop->iteration	The current loop iteration (starts at 1).
$loop->remaining	The iterations remaining in the loop.
$loop->count	The total number of items in the array being iterated.
$loop->first	Whether this is the first iteration through the loop.
$loop->last	Whether this is the last iteration through the loop.
$loop->even	Whether this is an even iteration through the loop.
$loop->odd	Whether this is an odd iteration through the loop.
$loop->depth	The nesting level of the current loop.
$loop->parent	When in a nested loop, the parent's loop variable.

Including Subtemplates

NOTE

While you're free to use the @include directive, Temple8 components provide similar functionality and offer several benefits over the @include directive such as data and attribute binding.

Temple8's @include directive allows you to include a Temple8 template from within another template. All variables that are available to the parent template will be made available to the included template:

@text
    @include('shared.errors')

    Another Text
@endText

Even though the included template will inherit all data available in the parent template, you may also pass an array of additional data that should be made available to the included template:

@include('template.name', ['status' => 'complete'])

If you attempt to @include a template which does not exist, LaraGram will throw an error. If you would like to include a template that may or may not be present, you should use the @includeIf directive:

@includeIf('template.name', ['status' => 'complete'])

If you would like to @include a template if a given boolean expression evaluates to true or false, you may use the @includeWhen and @includeUnless directives:

@includeWhen($boolean, 'template.name', ['status' => 'complete'])

@includeUnless($boolean, 'template.name', ['status' => 'complete'])

To include the first template that exists from a given array of templates, you may use the includeFirst directive:

@includeFirst(['custom.admin', 'admin'], ['status' => 'complete'])

WARNING

You should avoid using the __DIR__ and __FILE__ constants in your Temple8 templates, since they will refer to the location of the cached, compiled template.

Rendering Templates for Collections

You may combine loops and includes into one line with Temple8's @each directive:

@each('template.name', $jobs, 'job')

The @each directive's first argument is the template to render for each element in the array or collection. The second argument is the array or collection you wish to iterate over, while the third argument is the variable name that will be assigned to the current iteration within the template. So, for example, if you are iterating over an array of jobs, typically you will want to access each job as a job variable within the template. The array key for the current iteration will be available as the key variable within the template.

You may also pass a fourth argument to the @each directive. This argument determines the template that will be rendered if the given array is empty.

@each('template.name', $jobs, 'job', 'template.empty')

WARNING

Templates rendered via @each do not inherit the variables from the parent template. If the child template requires these variables, you should use the @foreach and @include directives instead.

The @once Directive

The @once directive allows you to define a portion of the template that will only be evaluated once per rendering cycle. For example, if you are rendering a given component within a loop, you may wish to only push the Text to the header the first time the component is rendered:

@once
    @push('greeting')
        
    @endpush
@endonce

Since the @once directive is often used in conjunction with the @push or @prepend directives, the @pushOnce and @prependOnce directives are available for your convenience:

@pushOnce('greeting')

@endPushOnce

Raw PHP

In some situations, it's useful to embed PHP code into your templates. You can use the Temple8 @php directive to execute a block of plain PHP within your template:

@php
    $counter = 1;
@endphp

Or, if you only need to use PHP to import a class, you may use the @use directive:

@use('App\Models\Flight')

A second argument may be provided to the @use directive to alias the imported class:

@use('App\Models\Flight', 'FlightModel')

If you have multiple classes within the same namespace, you may group the imports of those classes:

@use('App\Models\{Flight, Airport}')

The @use directive also supports importing PHP functions and constants by prefixing the import path with the function or const modifiers:

@use(function App\Helpers\format_currency)
@use(const App\Constants\MAX_ATTEMPTS)

Just like class imports, aliases are supported for functions and constants as well:

@use(function App\Helpers\format_currency, 'formatMoney')
@use(const App\Constants\MAX_ATTEMPTS, 'MAX_TRIES')

Grouped imports are also supported with both function and const modifiers, allowing you to import multiple symbols from the same namespace in a single directive:

@use(function App\Helpers\{format_currency, format_date})
@use(const App\Constants\{MAX_ATTEMPTS, DEFAULT_TIMEOUT})

Comments

Temple8 also allows you to define comments in your templates. However, unlike PHP comments, Temple8 comments are not included in the request by your application:

{{-- This comment will not be present in the rendered --}}

Components

Components and slots provide similar benefits to sections, layouts, and includes; however, some may find the mental model of components and slots easier to understand. There are two approaches to writing components: class-based components and anonymous components.

To create a class-based component, you may use the make:component Commander command. To illustrate how to use components, we will create a simple Alert component. The make:component command will place the component in the app/Template/Components directory:

php laragram make:component Alert

The make:component command will also create a template template for the component. The template will be placed in the app/templates/components directory. When writing components for your own application, components are automatically discovered within the app/Template/Components directory and app/templates/components directory, so no further component registration is typically required.

You may also create components within subdirectories:

php laragram make:component Forms/Input

The command above will create an Input component in the app/Template/Components/Forms directory and the template will be placed in the app/templates/components/forms directory.

If you would like to create an anonymous component (a component with only a Temple8 template and no class), you may use the --template flag when invoking the make:component command:

php laragram make:component forms.input --template

The command above will create a Temple8 file at app/templates/components/forms/input.t8.php which can be rendered as a component via <x-forms.input />.

Manually Registering Package Components

When writing components for your own application, components are automatically discovered within the app/Template/Components directory and app/templates/components directory.

However, if you are building a package that utilizes Temple8 components, you will need to manually register your component class. You should typically register your components in the boot method of your package's service provider:

use LaraGram\Support\Facades\Temple8;

/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Temple8::component('package-alert', Alert::class);
}

Once your component has been registered, it may be rendered using its tag alias:

<x-package-alert/>

Alternatively, you may use the componentNamespace method to autoload component classes by convention. For example, a Nightshade package might have Calendar and ColorPicker components that reside within the Package\Templates\Components namespace:

use LaraGram\Support\Facades\Temple8;

/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Temple8::componentNamespace('Nightshade\\Templates\\Components', 'nightshade');
}

This will allow the usage of package components by their vendor namespace using the package-name:: syntax:

<x-nightshade::calendar />
<x-nightshade::color-picker />

Temple8 will automatically detect the class that's linked to this component by pascal-casing the component name. Subdirectories are also supported using "dot" notation.

Rendering Components

To display a component, you may use a Temple8 component tag within one of your Temple8 templates. Temple8 component tags start with the string x- followed by the kebab case name of the component class:

<x-alert/>

<x-user-profile/>

If the component class is nested deeper within the app/Template/Components directory, you may use the . character to indicate directory nesting. For example, if we assume a component is located at app/Template/Components/Inputs/Button.php, we may render it like so:

<x-inputs.button/>

If you would like to conditionally render your component, you may define a shouldRender method on your component class. If the shouldRender method returns false the component will not be rendered:

use LaraGram\Support\Str;

/**
 * Whether the component should be rendered
 */
public function shouldRender(): bool
{
    return Str::length($this->message) > 0;
}

Index Components

Sometimes components are part of a component group and you may wish to group the related components within a single directory. For example, imagine a "card" component with the following class structure:

App\Templates\Components\Card\Card
App\Templates\Components\Card\Header
App\Templates\Components\Card\Body

Since the root Card component is nested within a Card directory, you might expect that you would need to render the component via <x-card.card>. However, when a component's file name matches the name of the component's directory, LaraGram automatically assumes that component is the "root" component and allows you to render the component without repeating the directory name:

<x-card>
    <x-card.header>...</x-card.header>
    <x-card.body>...</x-card.body>
</x-card>

Passing Data to Components

You may pass data to Temple8 components using HTML attributes. Hard-coded, primitive values may be passed to the component using simple HTML attribute strings. PHP expressions and variables should be passed to the component via attributes that use the : character as a prefix:

<x-alert :message="$message"/>

You should define all of the component's data attributes in its class constructor. All public properties on a component will automatically be made available to the component's template. It is not necessary to pass the data to the template from the component's render method:

<?php

namespace App\Template\Components;

use LaraGram\Template\Component;
use LaraGram\Template\Template;

class Alert extends Component
{
    /**
     * Create the component instance.
     */
    public function __construct(
        public string $message,
    ) {}

    /**
     * Get the template / contents that represent the component.
     */
    public function render(): Template
    {
        return template('components.alert');
    }
}

When your component is rendered, you may display the contents of your component's public variables by echoing the variables by name:

{{ $message }}

Casing

Component constructor arguments should be specified using camelCase, while kebab-case should be used when referencing the argument names in your component attributes. For example, given the following component constructor:

/**
 * Create the component instance.
 */
public function __construct(
    public string $alertType,
) {}

The $alertType argument may be provided to the component like so:

<x-alert alert-type="danger" />

Short Attribute Syntax

When passing attributes to components, you may also use a "short attribute" syntax. This is often convenient since attribute names frequently match the variable names they correspond to:

{{-- Short attribute syntax... --}}
<x-profile :$userId :$name />

{{-- Is equivalent to... --}}
<x-profile :user-id="$userId" :name="$name" />

Escaping Attribute Rendering

You also use colon-prefixed attributes, you may use a double colon (::) prefix to inform Temple8 that the attribute is not a PHP expression. For example, given the following component:

<x-button ::type="{ reply: markup }">
    Submit
</x-button>

Additional Dependencies

If your component requires dependencies from LaraGram's service container, you may list them before any of the component's data attributes and they will automatically be injected by the container:

use App\Services\AlertCreator;

/**
 * Create the component instance.
 */
public function __construct(
    public AlertCreator $creator,
    public string $type,
    public string $message,
) {}

Hiding Attributes / Methods

If you would like to prevent some public methods or properties from being exposed as variables to your component template, you may add them to an $except array property on your component:

<?php

namespace App\Template\Components;

use LaraGram\Template\Component;

class Alert extends Component
{
    /**
     * The properties / methods that should not be exposed to the component template.
     *
     * @var array
     */
    protected $except = ['type'];

    /**
     * Create the component instance.
     */
    public function __construct(
        public string $type,
    ) {}
}

Retrieving and Filtering Attributes

You may filter attributes using the filter method. This method accepts a closure which should return true if you wish to retain the attribute in the attribute bag:

{{ $attributes->filter(fn (string $value, string $key) => $key == 'foo') }}

For convenience, you may use the whereStartsWith method to retrieve all attributes whose keys begin with a given string:

{{ $attributes->whereStartsWith('type:replymarkup') }}

Conversely, the whereDoesntStartWith method may be used to exclude all attributes whose keys begin with a given string:

{{ $attributes->whereDoesntStartWith('type:replymarkup') }}

Using the first method, you may render the first attribute in a given attribute bag:

{{ $attributes->whereStartsWith('type:replymarkup')->first() }}

If you would like to check if an attribute is present on the component, you may use the has method. This method accepts the attribute name as its only argument and returns a boolean indicating whether or not the attribute is present:

@if ($attributes->has('type'))
    Class attribute is present
@endif

If an array is passed to the has method, the method will determine if all of the given attributes are present on the component:

@if ($attributes->has(['name', 'type']))
    All of the attributes are present
@endif

The hasAny method may be used to determine if any of the given attributes are present on the component:

@if ($attributes->hasAny(['type', ':type', 'v-bind:type']))
    One of the attributes is present
@endif

You may retrieve a specific attribute's value using the get method:

{{ $attributes->get('type') }}

The only method may be used to retrieve only the attributes with the given keys:

{{ $attributes->only(['type']) }}

The except method may be used to retrieve all attributes except those with the given keys:

{{ $attributes->except(['type']) }}

Reserved Keywords

By default, some keywords are reserved for Temple8's internal use in order to render components. The following keywords cannot be defined as public properties or method names within your components:

class="content-list" markdown="1

• data
• render
• resolveTemplate
• shouldRender
• template
• withAttributes
• withName

Slots

You will often need to pass additional content to your component via "slots". Component slots are rendered by echoing the $slot variable. To explore this concept, let's imagine that an alert component has the following markup:

<!-- /app/templates/components/alert.t8.php -->

{{ $slot }}

We may pass content to the slot by injecting content into the component:

<x-alert>
    <b>Whoops!</strong> Something went wrong!
</x-alert>

Sometimes a component may need to render multiple different slots in different locations within the component. Let's modify our alert component to allow for the injection of a "title" slot:

<!-- /app/templates/components/alert.t8.php -->

{{ $title }}
-------------

{{ $slot }}

You may define the content of the named slot using the x-slot tag. Any content not within an explicit x-slot tag will be passed to the component in the $slot variable:

<x-alert>
    <x-slot:title>
        Server Error
    </x-slot>

    <b>Whoops!</b> Something went wrong!
</x-alert>

You may invoke a slot's isEmpty method to determine if the slot contains content:

{ $title }}

@if ($slot->isEmpty())
    This is default content if the slot is empty.
@else
    {{ $slot }}
@endif

Additionally, the hasActualContent method may be used to determine if the slot contains any "actual" content that is not an comment:

@if ($slot->hasActualContent())
    The scope has non-comment content.
@endif

Scoped Slots

If you have used a JavaScript framework such as Vue, you may be familiar with "scoped slots", which allow you to access data or methods from the component within your slot. You may achieve similar behavior in LaraGram by defining public methods or properties on your component and accessing the component within your slot via the $component variable. In this example, we will assume that the x-alert component has a public formatAlert method defined on its component class:

<x-alert>
    <x-slot:title>
        {{ $component->formatAlert('Server Error') }}
    </x-slot>

    <strong>Whoops!</strong> Something went wrong!
</x-alert>

Inline Component Templates

For very small components, it may feel cumbersome to manage both the component class and the component's template template. For this reason, you may return the component's markup directly from the render method:

/**
 * Get the template / contents that represent the component.
 */
public function render(): string
{
    return <<<'temple8'
            {{ $slot }}
    temple8;
}

Generating Inline Template Components

To create a component that renders an inline template, you may use the inline option when executing the make:component command:

php laragram make:component Alert --inline

Dynamic Components

Sometimes you may need to render a component but not know which component should be rendered until runtime. In this situation, you may use LaraGram's built-in dynamic-component component to render the component based on a runtime value or variable:

// $componentName = "secondary-button";

<x-dynamic-component :component="$componentName" class="mt-4" />

Manually Registering Components

WARNING

The following documentation on manually registering components is primarily applicable to those who are writing LaraGram packages that include template components. If you are not writing a package, this portion of the component documentation may not be relevant to you.

When writing components for your own application, components are automatically discovered within the app/Template/Components directory and app/templates/components directory.

However, if you are building a package that utilizes Temple8 components or placing components in non-conventional directories, you will need to manually register your component class so that LaraGram knows where to find the component. You should typically register your components in the boot method of your package's service provider:

use LaraGram\Support\Facades\Temple8;
use VendorPackage\Template\Components\AlertComponent;

/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Temple8::component('package-alert', AlertComponent::class);
}

Once your component has been registered, it may be rendered using its tag alias:

<x-package-alert/>

Autoloading Package Components

Alternatively, you may use the componentNamespace method to autoload component classes by convention. For example, a Nightshade package might have Calendar and ColorPicker components that reside within the Package\Templates\Components namespace:

use LaraGram\Support\Facades\Temple8;

/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Temple8::componentNamespace('Nightshade\\Templates\\Components', 'nightshade');
}

This will allow the usage of package components by their vendor namespace using the package-name:: syntax:

<x-nightshade::calendar />
<x-nightshade::color-picker />

Temple8 will automatically detect the class that's linked to this component by pascal-casing the component name. Subdirectories are also supported using "dot" notation.

Anonymous Components

Similar to inline components, anonymous components provide a mechanism for managing a component via a single file. However, anonymous components utilize a single template file and have no associated class. To define an anonymous component, you only need to place a Temple8 template within your app/templates/components directory. For example, assuming you have defined a component at app/templates/components/alert.t8.php, you may simply render it like so:

<x-alert/>

You may use the . character to indicate if a component is nested deeper inside the components directory. For example, assuming the component is defined at app/templates/components/inputs/button.t8.php, you may render it like so:

<x-inputs.button/>

Anonymous Index Components

Sometimes, when a component is made up of many Temple8 templates, you may wish to group the given component's templates within a single directory. For example, imagine an "accordion" component with the following directory structure:

/app/templates/components/accordion.t8.php
/app/templates/components/accordion/item.t8.php

This directory structure allows you to render the accordion component and its item like so:

<x-accordion>
    <x-accordion.item>
        ...
    </x-accordion.item>
</x-accordion>

However, in order to render the accordion component via x-accordion, we were forced to place the "index" accordion component template in the app/templates/components directory instead of nesting it within the accordion directory with the other accordion related templates.

Thankfully, Temple8 allows you to place a file matching the component's directory name within the component's directory itself. When this template exists, it can be rendered as the "root" element of the component even though it is nested within a directory. So, we can continue to use the same Temple8 syntax given in the example above; however, we will adjust our directory structure like so:

/app/templates/components/accordion/accordion.t8.php
/app/templates/components/accordion/item.t8.php

Anonymous Component Paths

As previously discussed, anonymous components are typically defined by placing a Temple8 template within your app/templates/components directory. However, you may occasionally want to register other anonymous component paths with LaraGram in addition to the default path.

The anonymousComponentPath method accepts the "path" to the anonymous component location as its first argument and an optional "namespace" that components should be placed under as its second argument. Typically, this method should be called from the boot method of one of your application's service providers:

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Temple8::anonymousComponentPath(__DIR__.'/../components');
}

When component paths are registered without a specified prefix as in the example above, they may be rendered in your Temple8 components without a corresponding prefix as well. For example, if a panel.t8.php component exists in the path registered above, it may be rendered like so:

<x-panel />

Prefix "namespaces" may be provided as the second argument to the anonymousComponentPath method:

Temple8::anonymousComponentPath(__DIR__.'/../components', 'dashboard');

When a prefix is provided, components within that "namespace" may be rendered by prefixing to the component's namespace to the component name when the component is rendered:

<x-dashboard::panel />

Building Layouts

Layouts Using Components

Most bot applications maintain the same general layout across various pages. It would be incredibly cumbersome and hard to maintain our application if we had to repeat the entire layout in every template we create. Thankfully, it's convenient to define this layout as a single Temple8 component and then use it throughout our application.

Applying the Layout Component

Once the layout component has been defined, we may create a Temple8 template that utilizes the component. In this example, we will define a simple template that displays our task list:

<!-- app/templates/tasks.t8.php -->

<x-layout>
    @foreach ($tasks as $task)
        {{ $task }}
    @endforeach
</x-layout>

Remember, content that is injected into a component will be supplied to the default $slot variable within our layout component. As you may have noticed, our layout also respects a $title slot if one is provided; otherwise, a default title is shown. We may inject a custom title from our task list template using the standard slot syntax discussed in the component documentation:

<!-- app/templates/tasks.t8.php -->

<x-layout>
    <x-slot:title>
        Custom Title
    </x-slot>

    @foreach ($tasks as $task)
        {{ $task }}
    @endforeach
</x-layout>

Now that we have defined our layout and task list templates, we just need to return the task template from a listen:

use App\Models\Task;

Bot::onText('/tasks', function () {
    return template('tasks', ['tasks' => Task::all()]);
});

Layouts Using Template Inheritance

Defining a Layout

Layouts may also be created via "template inheritance". This was the primary way of building applications prior to the introduction of components.

To get started, let's take a look at a simple example. First, we will examine a page layout. Since most bot applications maintain the same general layout across various pages, it's convenient to define this layout as a single Temple8 template:

<!-- app/templates/layouts/app.t8.php -->

@yield('title')
-------------------

@yield('content')

As you can see, this file contains typical mark-up. However, take note of the @section and @yield directives. The @section directive, as the name implies, defines a section of content, while the @yield directive is used to display the contents of a given section.

Now that we have defined a layout for our application, let's define a child page that inherits the layout.

Extending a Layout

When defining a child template, use the @extends Temple8 directive to specify which layout the child template should "inherit". Templates which extend a Temple8 layout may inject content into the layout's sections using @section directives. Remember, as seen in the example above, the contents of these sections will be displayed in the layout using @yield:

<!-- app/templates/child.t8.php -->

@extends('layouts.app')

@section('title', 'Page Title')

@section('content')
    This is my body content.
@endsection

The @yield directive also accepts a default value as its second parameter. This value will be rendered if the section being yielded is undefined:

@yield('content', 'Default content')

Validation Errors

The @error directive may be used to quickly check if validation error messages exist for a given attribute. Within an @error directive, you may echo the $message variable to display the error message:

<!-- /app/templates/post/create.t8.php -->

@error('title')
    
@enderror

Since the @error directive compiles to an "if" statement, you may use the @else directive to render content when there is not an error for an attribute.

You may pass the name of a specific error bag as the second parameter to the @error directive to retrieve validation error messages on pages containing multiple forms:

<!-- /app/templates/auth.t8.php -->

@error('email', 'login')
    
@enderror

Stacks

Temple8 allows you to push to named stacks which can be rendered somewhere else in another template or layout.

@push('head')
    
@endpush

If you would like to @push content if a given boolean expression evaluates to true, you may use the @pushIf directive:

@pushIf($shouldPush, 'head')
    
@endPushIf

You may push to a stack as many times as needed. To render the complete stack contents, pass the name of the stack to the @stack directive:

@stack('head')

If you would like to prepend content onto the beginning of a stack, you should use the @prepend directive:

@push('head')
    This will be second...
@endpush

// Later...

@prepend('head')
    This will be first...
@endprepend

Service Injection

The @inject directive may be used to retrieve a service from the LaraGram service container. The first argument passed to @inject is the name of the variable the service will be placed into, while the second argument is the class or interface name of the service you wish to resolve:

@inject('metrics', 'App\Services\MetricsService')

Monthly Revenue: {{ $metrics->monthlyRevenue() }}.

Rendering Inline Temple8 Templates

Sometimes you may need to transform a raw Temple8 template string into valid PHP code. You may accomplish this using the render method provided by the Temple8 facade. The render method accepts the Temple8 template string and an optional array of data to provide to the template:

use LaraGram\Support\Facades\Temple8;

return Temple8::render('Hello, {{ $name }}', ['name' => 'Julian Bashir']);

LaraGram renders inline Temple8 templates by writing them to the storage/framework/templates directory. If you would like LaraGram to remove these temporary files after rendering the Temple8 template, you may provide the deleteCachedTemplate argument to the method:

return Temple8::render(
    'Hello, {{ $name }}',
    ['name' => 'Julian Bashir'],
    deleteCachedTemplate: true
);

Rendering Temple8 Fragments

@fragment('user-list')
    @foreach ($users as $user)
        {{ $user->name }}
    @endforeach
@endfragment

Then, when rendering the template that utilizes this template, you may invoke the fragment method to specify that only the specified fragment should be included in the outgoing HTTP response:

return template('dashboard', ['users' => $users])->fragment('user-list');

The fragmentIf method allows you to conditionally return a fragment of a template based on a given condition. Otherwise, the entire template will be returned:

return template('dashboard', ['users' => $users])
    ->fragmentIf($request->user()->id(), 'xxx');

The fragments and fragmentsIf methods allow you to return multiple template fragments in the response. The fragments will be concatenated together:

template('dashboard', ['users' => $users])
    ->fragments(['user-list', 'comment-list']);

template('dashboard', ['users' => $users])
    ->fragmentsIf(
        $request->user()->id(),
        ['xxx', 'yyy']
    );

Extending Temple8

Temple8 allows you to define your own custom directives using the directive method. When the Temple8 compiler encounters the custom directive, it will call the provided callback with the expression that the directive contains.

The following example creates a @datetime($var) directive which formats a given $var, which should be an instance of DateTime:

<?php

namespace App\Providers;

use LaraGram\Support\Facades\Temple8;
use LaraGram\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // ...
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Temple8::directive('datetime', function (string $expression) {
            return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
        });
    }
}

As you can see, we will chain the format method onto whatever expression is passed into the directive. So, in this example, the final PHP generated by this directive will be:

<?php echo ($var)->format('m/d/Y H:i'); ?>

WARNING

After updating the logic of a Temple8 directive, you will need to delete all of the cached Temple8 templates. The cached Temple8 templates may be removed using the template:clear Commander command.

Custom Echo Handlers

If you attempt to "echo" an object using Temple8, the object's __toString method will be invoked. The __toString method is one of PHP's built-in "magic methods". However, sometimes you may not have control over the __toString method of a given class, such as when the class that you are interacting with belongs to a third-party library.

In these cases, Temple8 allows you to register a custom echo handler for that particular type of object. To accomplish this, you should invoke Temple8's stringable method. The stringable method accepts a closure. This closure should type-hint the type of object that it is responsible for rendering. Typically, the stringable method should be invoked within the boot method of your application's AppServiceProvider class:

use LaraGram\Support\Facades\Temple8;
use Money\Money;

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Temple8::stringable(function (Money $money) {
        return $money->formatTo('en_GB');
    });
}

Once your custom echo handler has been defined, you may simply echo the object in your Temple8 template:

Cost: {{ $money }}

Custom If Statements

Programming a custom directive is sometimes more complex than necessary when defining simple, custom conditional statements. For that reason, Temple8 provides a Temple8::if method which allows you to quickly define custom conditional directives using closures. For example, let's define a custom conditional that checks the configured default "disk" for the application. We may do this in the boot method of our AppServiceProvider:

use LaraGram\Support\Facades\Temple8;

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Temple8::if('disk', function (string $value) {
        return config('filesystems.default') === $value;
    });
}

Once the custom conditional has been defined, you can use it within your templates:

@disk('local')
    <!-- The application is using the local disk... -->
@elsedisk('public')
    <!-- The application is using the s3 disk... -->
@else
    <!-- The application is using some other disk... -->
@enddisk

@unlessdisk('local')
    <!-- The application is not using the local disk... -->
@enddisk