Templates ​
STX provides a powerful and flexible templating system that combines the elegance of Laravel Blade with modern TypeScript features. This guide covers everything you need to know about working with STX templates.
Basic Template Structure ​
A basic STX template looks like this:
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
@ts
const greeting = 'Welcome to STX!'
@endts
<h1>{{ greeting }}</h1>
<div>@slot</div>
</body>
</html>Template Syntax ​
Variables and Expressions ​
Display variables using double curly braces:
<h1>{{ title }}</h1>
<p>{{ user.name }}</p>For complex expressions:
<p>Total: {{ price * quantity }}</p>
<div>{{ isActive ? 'Active' : 'Inactive' }}</div>TypeScript Integration ​
Use the @ts directive to write TypeScript code:
@ts
interface User {
name: string
email: string
isAdmin: boolean
}
const user: User = {
name: 'John',
email: 'john@example.com',
isAdmin: true
}
@endts
<div>
@if(user.isAdmin)
<admin-panel />
@endif
</div>Directives ​
STX provides several built-in directives for common tasks:
Conditionals ​
@if(user.isAdmin)
<admin-panel />
@elseif(user.isManager)
<manager-panel />
@else
<user-panel />
@endif
@unless(user.isBlocked)
<access-panel />
@endunlessLoops ​
@foreach(users as user)
<user-card :user="user" />
@endforeach
@for(let i = 0; i < 5; i++)
<div>Item {{ i + 1 }}</div>
@endfor
@while(condition)
<div>Looped content</div>
@endwhileTemplate Inheritance ​
STX supports template inheritance through layouts:
- Define a layout (
layouts/main.stx):
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
@section('meta')
@endsection
</head>
<body>
<nav>
@include('partials/nav')
</nav>
<main>
@section('content')
@endsection
</main>
<footer>
@include('partials/footer')
</footer>
</body>
</html>- Extend the layout in your template:
@extends('layouts/main')
@section('title', 'My Page')
@section('meta')
<meta name="description" content="Page description">
@endsection
@section('content')
<h1>Welcome</h1>
<p>Page content goes here</p>
@endsectionIncluding Partials ​
Break your templates into reusable partials:
@include('partials/header')
<main>
@include('partials/sidebar', { active: 'home' })
@include('partials/content')
</main>
@include('partials/footer')Components ​
Use components for reusable UI elements:
@component('Card', { title: 'Welcome', theme: 'dark' })
<h2>{{ title }}</h2>
<slot></slot>
@slot('footer')
<button>Read More</button>
@endslot
@endcomponentError Handling ​
Handle errors gracefully in templates:
@try
{{ potentiallyErroringFunction() }}
@catch(error)
<error-display :message="error.message" />
@endtryBest Practices ​
- Keep Templates Focused: Each template should have a single responsibility
- Use Components: Break complex UIs into reusable components
- Leverage TypeScript: Use TypeScript for type safety and better IDE support
- Consistent Naming: Follow a consistent naming convention for templates and partials
- Comments: Use comments to explain complex logic or important notes
{{-- This is a template comment --}}
@ts
// This is a TypeScript comment
@endtsPerformance Tips ​
- Use
@oncefor content that doesn't need to be re-rendered:
@once
<heavy-component />
@endonce- Leverage caching when possible:
@cache('key')
<expensive-component />
@endcache- Use lazy loading for heavy components:
@lazy
<heavy-feature />
@endlazyAdvanced Features ​
Custom Directives ​
Create custom directives for specialized functionality:
@directive('uppercase')
return value.toUpperCase()
@enddirective
<h1>@uppercase('hello')</h1> <!-- Outputs: HELLO -->State Management ​
Integrate with state management:
@ts
import { useStore } from '@/store'
const store = useStore()
@endts
<div>
<h1>{{ store.user.name }}</h1>
<button @click="store.logout()">Logout</button>
</div>Streaming Support ​
STX supports streaming for improved performance:
@stream
<real-time-feed />
@endstreamDebug Mode ​
Enable debug mode during development:
@debug
{{ someVariable }}
@enddebugThis will output additional debugging information in the browser console.