### Run Tree-sitter Playground

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/CONTRIBUTING.md

Use this command to start the tree-sitter playground for testing new syntax rules in your browser.

```bash
deno run start
```

--------------------------------

### Envoy Directives Example

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/envoy.txt

Demonstrates the usage of multiple Envoy notification directives within a single @finished block.

```blade
@finished
    @microsoftTeams('webhook-url')
    @slack('webhook-url', '#bots', 'Hello, Slack.')
    @discord('discord-webhook-url')
@endfinished
```

--------------------------------

### Using @svg directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Provides an example of how to render an SVG icon by name using the @svg directive.

```blade
@svg('name')
```

--------------------------------

### Blade @switch Statement Example

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/switch-statements.txt

Demonstrates the basic usage of the @switch directive with multiple @case and a @default clause. Use @break to exit the switch block after a matching case.

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

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

    @case(3)
    @case(4)
        Third and fourth case...
        @break

    @default
        Default case...
@endswitch
```

--------------------------------

### Using @prependOnce Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/stacks.txt

The @prependOnce directive adds content to the beginning of a named stack only if it hasn't been prepended before. This ensures unique content at the start of a stack.

```blade
@prependOnce('test')
        prependOnce
@endPrependOnce
```

```tree-sitter
(document
  (stack
    (directive_start)
    (parameter)
    (text)
    (directive_end)))
```

--------------------------------

### Blade @assets Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/nested-directives.txt

Includes external assets like JavaScript and CSS files. This example shows how to load Pikaday JS and its CSS.

```blade
@assets
  <script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js" defer></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css"/>
@endassets
```

--------------------------------

### Blade @script Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/nested-directives.txt

Embeds JavaScript code within a Blade template, often used for Livewire component-specific scripts. The setInterval example demonstrates refreshing Livewire data.

```blade
@script
    <script>
        setInterval(() => {
            $wire.$refresh()
        }, 2000)
    </script>
@endscript
```

--------------------------------

### Including WireUI scripts with nonce

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Demonstrates how to include WireUI scripts, optionally providing a nonce for CSP.

```blade
@wireUiScripts(['nonce': 'csp-token'])
```

```blade
@wireUiScripts(['nonce': 'csp-token', 'foo' => true])
```

--------------------------------

### Run Grammar Unit Tests

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/CONTRIBUTING.md

Execute this command to run the unit tests for the grammar to ensure new rules do not break existing ones.

```bash
deno run test-grammar
```

--------------------------------

### Package Component Parsing

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/components.txt

Shows how package components with namespace separators are parsed.

```tree-sitter
(document
  (element
    (self_closing_tag
      (tag_name)))
  (element
    (self_closing_tag
      (tag_name))))
```

--------------------------------

### Define and Execute Envoy Tasks

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/envoy.txt

Define a task named 'deploy' that runs on the 'web' server. Includes commands for changing directory, conditionally pulling from git, and migrating the database.

```blade
@task('deploy', ['on' => 'web'])
    cd /home/user/example.com

    @if ($branch)
        git pull origin {{ $branch }}
    @endif

    php artisan migrate --force
@endtask
```

--------------------------------

### Laravel Welcome Page with Vite Integration

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/html-blade.txt

A standard Laravel welcome page demonstrating conditional asset inclusion using Vite. It checks for the existence of manifest.json or the hot file to determine the build environment.

```blade
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

        <!-- Styles / Scripts -->
        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/js/app.js'])
        @else
            <style>
                /*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:'Instrument Sans',ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(.971 .013 17.38);--color-red-100:oklch(.936 .032 17.717);--color-red-200:oklch(.885 .062 18.334);--color-red-300:oklch(.808 .114 19.571);--color-red-400:oklch(.704 .191 22.216);--color-red-500:oklch(.637 .237 25.331);--color-red-600:oklch(.577 .245 27.325);--color-red-700:oklch(.505 .213 27.518);--color-red-800:oklch(.444 .177 26.899);--color-red-900:oklch(.396 .141 25.723);--color-red-950:oklch(.258 .092 26.042);--color-orange-50:oklch(.98 .016 73.684);--color-orange-100:oklch(.954 .038 75.164);--color-orange-200:oklch(.901 .076 70.697);--color-orange-300:oklch(.837 .128 66.29);--color-orange-400:oklch(.75 .183 55.934);--color-orange-500:oklch(.705 .213 47.604);--color-orange-600:oklch(.646 .222 41.116);--color-orange-700:oklch(.553 .195 38.402);--color-orange-800:oklch(.47 .157 37.304);--color-orange-900:oklch(.408 .123 38.172);--color-orange-950:oklch(.266 .079 36.259);--color-amber-50:oklch(.987 .022 95.277);--color-amber-100:oklch(.962 .059 95.617);--color-amber-200:oklch(.924 .12 95.746);--color-amber-300:oklch(.879 .169 91.605);--color-amber-400:oklch(.828 .189 84.429);--color-amber-500:oklch(.769 .188 70.08);--color-amber-600:oklch(.666 .179 58.318);--color-amber-700:oklch(.555 .163 48.998);--color-amber-800:oklch(.473 .137 46.201);--color-amber-900:oklch(.414 .112 45.904);--color-amber-950:oklch(.279 .077 45.635);--color-yellow-50:oklch(.987 .026 102.212);--color-yellow-100:oklch(.973 .071 103.193);--color-yellow-200:oklch(.945 .129 101.54);--color-yellow-300:oklch(.905 .182 98.111);--color-yellow-400:oklch(.852 .199 91.936);--color-yellow-500:oklch(.795 .184 86.047);--color-yellow-600:oklch(.681 .162 75.834);--color-yellow-700:oklch(.554 .135 66.442);--color-yellow-800:oklch(.476 .114 61.907);--color-yellow-900:oklch(.421 .095 57.708);--color-yellow-950:oklch(.286 .066 53.813);--color-lime-50:oklch(.986 .031 120.757);--color-lime-100:oklch(.967 .067 122.328);--color-lime-200:oklch(.938 .127 124.321);--color-lime-300:oklch(.897 .196 126.665);--color-lime-400:oklch(.841 .238 
```

--------------------------------

### Orchestrate Tasks with Envoy Stories

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/envoy.txt

Define a 'deploy' story that executes 'update-code' and 'install-dependencies' tasks sequentially. Requires server definitions.

```blade
@servers(['web' => ['user@192.168.1.1']])

@story('deploy')
    update-code
    install-dependencies
@endstory

@task('update-code')
    cd /home/user/example.com
    git pull origin master
@endtask

@task('install-dependencies')
    cd /home/user/example.com
    composer install
@endtask
```

--------------------------------

### Using @stack directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Illustrates the basic usage of the @stack directive to push content to a named stack.

```blade
@stack('test')
```

--------------------------------

### Using @use directive with alias

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Demonstrates how to use the @use directive to alias a class.

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

--------------------------------

### Nested Component Notation

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/components.txt

Demonstrates parsing of nested Blade components using dot notation.

```tree-sitter
(document
  (element
    (start_tag
      (tag_name))
    (element
      (start_tag
        (tag_name))
      (text)
      (end_tag
        (tag_name)))
    (element
      (start_tag
        (tag_name))
      (text)
      (end_tag
        (tag_name)))
    (end_tag
      (tag_name))))
```

--------------------------------

### Import Envoy Blade Files

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/envoy.txt

Import other Envoy Blade files into the current file. This allows for modular task definitions.

```blade
@import('vendor/package/Envoy.blade.php')
```

--------------------------------

### Render a Livewire Component

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/livewire.txt

Renders a Livewire component with the given alias. Ensure the component alias matches a registered Livewire component.

```blade
@livewire('show-posts')
```

--------------------------------

### Define Servers for Envoy

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/envoy.txt

Define server connections for Envoy tasks. Specify connection details like user and IP address.

```blade
@servers(['web' => ['user@192.168.1.1'], 'workers' => ['user@192.168.1.2']])
```

--------------------------------

### Blade Component with Attributes

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/components.txt

Demonstrates a standard Blade component with attributes, including those containing PHP statements.

```blade
<x-component attribute="{{ php_statement() }}"></x-component>
```

```blade
<x-component attribute="{{ php_statement() }}" other="value"></x-component>
```

```blade
<x-component attribute="{{ php_statement() }}"></x-component>
```

```blade
<x-component attribute="{{ php_statement() }}"></x-component>
```

```blade
<x-component attribute="{{ php_statement() }}"></x-component>
```

```blade
<x-component attribute="{{ php_statement() }}"></x-component>
```

```blade
<x-component attribute="{{ php_statement() }}"></x-component>
```

```blade
<x-component attribute="{{ php_statement() }}"></x-component>
```

```blade
<x-component attribute="{{ php_statement() }}"></x-component>
```

```blade
<x-component attribute="{{ php_statement() }}"></x-component>
```

--------------------------------

### Self-Closing Component Parsing

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/components.txt

Demonstrates the parsing of self-closing Blade components.

```tree-sitter
(document
  (element
    (self_closing_tag
      (tag_name))))
```

--------------------------------

### @guest Directive (No Parameters)

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

Renders content only if the current user is not authenticated. Close with @endguest.

```blade
@guest
        test
@endguest
```

--------------------------------

### Configure Livewire Script

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/livewire.txt

This directive is used to configure Livewire's JavaScript. It should be placed before `@livewireScripts`.

```blade
@livewireScriptConfig
```

--------------------------------

### Conditional Keywords: @if, @elseif, @else

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

Utilize @if, @elseif, and @else for multi-condition checks. Each block must be terminated by @endif.

```blade
@if (true)
    test
@elseif (true)
    test
@else
    test
@endif
```

--------------------------------

### Blade Conditional Rendering

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/html-blade.txt

Demonstrates how to conditionally display content using Blade's @if, @elseif, and @else directives. Useful for showing different content based on authentication status or other conditions.

```blade
@if (Route::has('login'))
    <nav class="flex items-center justify-end gap-4">
        @auth
            <a
                href="{{ url('/dashboard') }}"
                class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] border-[#19140035] hover:border-[#1915014a] border text-[#1b1b18] dark:border-[#3E3E3A] dark:hover:border-[#62605b] rounded-sm text-sm leading-normal"
            >
                Dashboard
            </a>
        @else
            <a
                href="{{ route('login') }}"
                class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] text-[#1b1b18] border border-transparent hover:border-[#19140035] dark:hover:border-[#3E3E3A] rounded-sm text-sm leading-normal"
            >
                Log in
            </a>

            @if (Route::has('register'))
                <a
                    href="{{ route('register') }}"
                    class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] border-[#19140035] hover:border-[#1915014a] border text-[#1b1b18] dark:border-[#3E3E3A] dark:hover:border-[#62605b] rounded-sm text-sm leading-normal">
                    Register
                </a>
            @endif
        @endauth
    </nav>
@endif
```

--------------------------------

### @guest Directive (With Parameters)

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

Conditionally renders content for guests, optionally specifying guards. Must be closed with @endguest.

```blade
@guest('test')
        test
@endguest
```

--------------------------------

### Blade @continue and @break in loops

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/loops.txt

Control loop execution with @continue to skip the current iteration and @break to exit the loop entirely.

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

    <li>{{ $user->name }}</li>

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

--------------------------------

### Blade @while loop

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/loops.txt

Implement a while loop using the @while directive. Ensure a condition to exit the loop to prevent infinite loops.

```blade
@while (true)
    <p>I'm looping forever.</p>
@endwhile
```

--------------------------------

### Using @prepend Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/stacks.txt

The @prepend directive adds content to the beginning of a named stack. Use this when you need to insert content at the front of a stack.

```blade
@prepend('test')
        prepend
@endprepend
```

```tree-sitter
(document
  (stack
    (directive_start)
    (parameter)
    (text)
    (directive_end)))
```

--------------------------------

### Blade @includeFirst Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @includeFirst directive to render the first available Blade view from a list of views.

```blade
@includeFirst('test')
```

--------------------------------

### Blade @use Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @use directive to import classes or facades into the Blade view.

```blade
@use('App\Models\Flight')
```

--------------------------------

### @env Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

Conditionally renders content based on the current application environment. Requires a closing @endenv tag.

```blade
@env('test')
        test
@endenv
```

--------------------------------

### Heavily Nested Component Parsing

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/components.txt

Illustrates parsing of deeply nested components with attributes.

```tree-sitter
(document
  (element
    (start_tag
      (tag_name)
      (attribute
        (attribute_name)
        (quoted_attribute_value
          (attribute_value))))
    (text)
    (end_tag
      (tag_name))))
```

--------------------------------

### Parse @style attribute

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/attributes.txt

Shows how the @style directive is parsed when applied as an HTML attribute for inline styling.

```html
<div @style('test') > </div>
```

```tree-sitter-grammar
(document
  (element
    (start_tag
      (tag_name)
      (attribute
        (directive)
        (parameter)))
    (end_tag
      (tag_name))))
```

--------------------------------

### Include Livewire Styles

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/livewire.txt

Use this directive to include Livewire's CSS assets. It should typically be placed within the `<head>` section of your Blade view.

```blade
@livewireStyles
```

--------------------------------

### Include Livewire Scripts

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/livewire.txt

Use this directive to include all necessary Livewire JavaScript assets in your Blade view. It should typically be placed at the end of your `<body>` tag.

```blade
@livewireScripts
```

--------------------------------

### Blade @for loop

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/loops.txt

Use the @for directive for standard for loops. It accepts initialization, condition, and increment/decrement expressions.

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

--------------------------------

### @production Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

Renders content specifically when the application is running in the 'production' environment. Use @endproduction to terminate.

```blade
@production
        test
@endproduction
```

--------------------------------

### Blade @verbatim Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/nested-directives.txt

Renders content exactly as it is, without parsing Blade directives. Use this for including raw HTML or scripts.

```blade
@verbatim
        verbatim
@endverbatim
```

--------------------------------

### Blade @switch AST Structure

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/switch-statements.txt

Abstract Syntax Tree (AST) representation of a Blade @switch statement, showing the parsed structure of directives and parameters.

```tree-sitter
(document
  (switch
    (directive_start)
    (parameter)
    (directive)
    (parameter)
    (text)
    (directive)
    (directive)
    (parameter)
    (text)
    (directive)
    (directive)
    (parameter)
    (directive)
    (parameter)
    (text)
    (directive)
    (directive)
    (text)
    (directive_end)))
```

--------------------------------

### Render Volt Component

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/livewire.txt

Renders a Volt component, which allows for inline Blade components. The component is identified by the provided key.

```blade
@volt('player')
  <div>hello world</div>
@endvolt
```

--------------------------------

### Nested @if Directives

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

Demonstrates nesting @if directives within each other for complex conditional logic. Ensure each @if has a corresponding @endif.

```blade
@if(true)
        @if(true)
            test
        @endif
@endif
```

--------------------------------

### Using @push Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/stacks.txt

The @push directive adds content to a named stack. Use this when you need to append content to a stack that might be defined elsewhere.

```blade
@push('test')
        push
@endpush
```

```tree-sitter
(document
  (stack
    (directive_start)
    (parameter)
    (text)
    (directive_end)))
```

--------------------------------

### Using @pushIf Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/stacks.txt

The @pushIf directive adds content to a named stack only if a given condition is true. This allows for conditional stacking of content.

```blade
@pushIf('test')
        pushIf
@endPushIf
```

```tree-sitter
(document
  (stack
    (directive_start)
    (parameter)
    (text)
    (directive_end)))
```

--------------------------------

### Raw PHP Output in Blade

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/php-statements.txt

Use {!! !!} to output raw, unescaped PHP variables or expressions. Use this with caution as it can expose your application to XSS attacks if the content is not properly sanitized.

```blade
{!! not escaped !!}

```

```blade
{!!echo 'test'!!}

```

--------------------------------

### PHP Syntax in Attribute Values

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/components.txt

Shows parsing of attribute values containing PHP syntax enclosed in double or single curly braces.

```html
<div id="{{$php}}"> ... </div>
```

```html
<img id="{{$php}}"/>
```

```html
<div class="bg-red-{{$php}}"> ... </div>
```

```html
<div class="bg-{{$php}}-500"> ... </div>
```

```html
<div class="{{$php}}-red-500"> ... </div>
```

```html
<div id='{{$php}}'> ... </div>
```

```html
<img id='{{$php}}'/>
```

```html
<div class='bg-red-{{$php}}'> ... </div>
```

```html
<div class='bg-{{$php}}-500'> ... </div>
```

```html
<div class='{{$php}}-red-500'> ... </div>
```

--------------------------------

### Blade @once Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/nested-directives.txt

Ensures that a block of code is only rendered once. Useful for preventing duplicate initialization or rendering.

```blade
@once
        once
@endonce
```

--------------------------------

### Blade @forelse loop

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/loops.txt

Use @forelse to iterate over a collection and display content when the collection is empty using the @empty directive.

```blade
@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>No users</p>
@endforelse
```

--------------------------------

### Execute PHP Code within Envoy

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/envoy.txt

Execute arbitrary PHP code within an Envoy file. Useful for setting variables or performing logic before tasks.

```blade
@setup
    $now = new DateTime;
@endsetup
```

--------------------------------

### Using @pushOnce Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/stacks.txt

The @pushOnce directive adds content to a named stack only if it hasn't been pushed before. This is useful for ensuring a piece of content is added just once.

```blade
@pushOnce('test')
        pushOnce
@endPushOnce
```

```tree-sitter
(document
  (stack
    (directive_start)
    (parameter)
    (text)
    (directive_end)))
```

--------------------------------

### @auth Directive (With Parameters)

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

Conditionally renders content for authenticated users, optionally checking for specific guards. Requires @endauth.

```blade
@auth('test')
        test
@endauth
```

--------------------------------

### @isset Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

Use @isset to render content if a variable is set and not null. It must be closed with @endisset.

```blade
@isset(true)
        test
@endisset
```

--------------------------------

### Blade Named Entities

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/html-blade.txt

Demonstrates the use of various named HTML entities within Blade templates. These are typically used for special characters.

```blade
@if('test')

&amp;
&lt;
&gt;
&quot;
&apos;
&copy;
&reg;
&trade;
&ndash;
&mdash;
&lsquo;
&rsquo;
&ldquo;
&rdquo;
&hellip;
&iexcl;
&cent;
&yen;
&euro;
&sect;
&para;
&laquo;
&raquo;
&times;
&divide;
&plusmn;
&sup1;
&sup2;
&sup3;
&frac14;
&frac12;
&frac34;
&deg;
&micro;
&bull;
&prime;
&Prime;
&lsaquo;
&rsaquo;

@endif
```

--------------------------------

### Discord Notification Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/envoy.txt

Configures Envoy to send a notification to Discord. Requires a webhook URL.

```blade
@finished
    @discord('discord-webhook-url')
@endfinished
```

--------------------------------

### Basic @if Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

Use the @if directive for simple conditional rendering. It requires a closing @endif tag.

```blade
@if (true)
    test
@endif
```

--------------------------------

### Blade @include Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @include directive to render another Blade view within the current view.

```blade
@include('test')
```

--------------------------------

### Self-Closing Blade Component with Attribute

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/components.txt

Illustrates a self-closing Blade component that includes an attribute with a PHP statement.

```blade
<x-component attribute="{{ php_statement() }}" />
```

```blade
<x-component attribute="{{ php_statement() }}" />
```

--------------------------------

### Send Notifications with Envoy

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/envoy.txt

Send notifications to Microsoft Teams, Slack, and Discord. Requires webhook URLs and channel information.

```blade
@before
    @microsoftTeams('webhook-url')
    @slack('webhook-url', '#bots', 'Hello, Slack.')
    @discord('discord-webhook-url')
@endbefore
```

```blade
@after
    @microsoftTeams('webhook-url')
    @slack('webhook-url', '#bots', 'Hello, Slack.')
    @discord('discord-webhook-url')
@endafter
```

```blade
@error
    @microsoftTeams('webhook-url')
    @slack('webhook-url', '#bots', 'Hello, Slack.')
    @discord('discord-webhook-url')
@enderror
```

```blade
@success
    @microsoftTeams('webhook-url')
    @slack('webhook-url', '#bots', 'Hello, Slack.')
    @discord('discord-webhook-url')
@endsuccess
```

--------------------------------

### @auth Directive (No Parameters)

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

Renders content only if the current user is authenticated. Use @endauth to close the block.

```blade
@auth
        test
@endauth
```

--------------------------------

### Blade @vite Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @vite directive to include assets managed by Vite.

```blade
@vite('resources/js/app.js')
```

--------------------------------

### Blade @extends Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @extends directive to define the parent layout for a Blade view. It must be the first directive in the file.

```blade
@extends('test')
```

--------------------------------

### Slack Notification Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/envoy.txt

Configures Envoy to send a notification to Slack. Requires a webhook URL, channel, and message content.

```blade
@finished
    @slack('webhook-url', '#bots', 'Hello, Slack.')
@endfinished
```

--------------------------------

### Blade @includeUnless Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @includeUnless directive to render a Blade view unless a given boolean expression evaluates to true.

```blade
@includeUnless('test')
```

--------------------------------

### Parse @class attribute

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/attributes.txt

Demonstrates the parsing of the @class directive when used as an HTML attribute. This is useful for dynamically setting CSS classes on elements.

```html
<div @class('test') id="test" style="test" > </div>
```

```tree-sitter-grammar
(document
  (element
    (start_tag
      (tag_name)
      (attribute
        (directive)
        (parameter))
      (attribute
        (attribute_name)
        (quoted_attribute_value
          (attribute_value)))
      (attribute
        (attribute_name)
        (quoted_attribute_value
          (attribute_value))))
    (end_tag
      (tag_name))))
```

--------------------------------

### Blade @includeIf Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @includeIf directive to conditionally render a Blade view based on a given boolean expression.

```blade
@includeIf('test')
```

--------------------------------

### Blade @includeWhen Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @includeWhen directive to render a Blade view only when a given boolean expression evaluates to true.

```blade
@includeWhen('test')
```

--------------------------------

### Blade @each Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @each directive to loop over an array or collection and render a partial view for each item.

```blade
@each('test')
```

--------------------------------

### Persist Component State with @persist

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/livewire.txt

Use the `@persist` directive to maintain the state of a component across page reloads or navigation. The state is identified by the provided key.

```blade
@persist('player')
  <div>hello world</div>
@endpersist
```

--------------------------------

### Blade @section Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/nested-directives.txt

Defines a section that can be rendered or extended in other templates. Use @parent to include the parent section's content.

```blade
@section('sidebar')
            This is the master sidebar.
        @show
```

```blade
@section('test')
          @parent
            test
        @endsection
```

--------------------------------

### Blade @foreach loop

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/loops.txt

Iterate over arrays or collections using the @foreach directive. It assigns each item to a variable.

```blade
@foreach ($users as $user)
    <p>This is user {{ $user->id }}</p>
@endforeach
```

```blade
@foreach ( (array) $users as $user)
    <p>This is user {{ $user->id }}</p>
@endforeach
```

--------------------------------

### Blade @method Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @method directive to spoof an HTTP verb in forms.

```blade
@method('test')
```

--------------------------------

### Blade Numbered Entities

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/html-blade.txt

Illustrates the usage of numbered HTML entities within Blade templates, often used for characters not directly representable or for specific encoding needs.

```blade
@php

&#34;
&#38;
&#39;
&#60;
&#62;
&#169;
&#174;
&#8482;
&#8211;
&#8212;
&#8216;
&#8217;
&#8220;
&#8221;
&#8230;
&#161;
&#162;
&#165;
&#8364;
&#167;
&#182;
&#171;
&#187;
&#215;
&#247;
&#177;
&#185;
&#178;
&#179;
&#188;
&#189;
&#190;
&#176;
&#181;
&#8226;
&#8242;
&#8243;
&#8249;
&#8250;
@endphp
```

--------------------------------

### Telegram Notification Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/envoy.txt

Configures Envoy to send a notification to Telegram. Requires a bot ID and chat ID.

```blade
@finished
    @telegram('bot-id','chat-id')
@endfinished
```

--------------------------------

### Escaped PHP Output in Blade

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/php-statements.txt

Use double curly braces {{ }} to output escaped PHP variables or expressions. This is the default and safest method for displaying dynamic content.

```blade
{{ escaped }}

```

```blade
{{echo 'test'}}

```

--------------------------------

### Microsoft Teams Notification Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/envoy.txt

Configures Envoy to send a notification to Microsoft Teams. Requires a webhook URL.

```blade
@finished
    @microsoftTeams('webhook-url')
@endfinished
```

--------------------------------

### Blade loop with conditional

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/loops.txt

Combine loops with conditional statements like @if to render content only when specific conditions are met within an iteration.

```blade
@foreach ( $users as $user)
      @if(true)
        <p>This is user {{ $user->id }}</p>
      @endif
@endforeach
```

--------------------------------

### Blade @inject Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @inject directive to resolve a service container instance and inject it into the view.

```blade
@inject('test')
```

--------------------------------

### Blade Component with Scoped Slots

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/components.txt

Shows a Blade component utilizing scoped slots for content projection. Note the erroneous end tag in the source.

```blade
<x-alert>
    <x-slot>
        ...
    </x-slot>
    <x-slot:title>
        ...
    </x-slot>
    <x-slot:contents>
        ...
    </x-slot:contents>
    <x-slot:title>
        ...
    </x-slot:other>
</x-alert>
```

--------------------------------

### Teleport Component Content with @teleport

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/livewire.txt

The `@teleport` directive allows you to render a component's content into a different part of the DOM, identified by a target ID. This is useful for modals or elements that need to be outside their original hierarchy.

```blade
@teleport('player')
  <div>hello world</div>
@endteleport
```

--------------------------------

### Embedding PHP variables with @js directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Shows how to embed PHP variables into JavaScript using the @js directive within an x-data attribute.

```blade
<div x-data="{ posts: @js($posts) }"></div>
```

--------------------------------

### Multi-line Raw PHP Directive in Blade

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/php-statements.txt

For longer PHP code blocks, use the @php ... @endphp syntax. This allows for multi-line PHP statements and logic within your Blade template.

```blade
@php
    $name = $attributes->get('name');
    $value = resolve_input($name, $value, empty($model) ? null : $model, $useOld);
@endphp

```

--------------------------------

### Blade @props Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @props directive to declare the expected props for a Blade component.

```blade
@props('test')
```

--------------------------------

### Parse @disabled attribute

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/attributes.txt

Explains the parsing of the @disabled directive as an HTML attribute, used to disable form elements.

```html
<div @disabled('test') > </div>
```

```tree-sitter-grammar
(document
  (element
    (start_tag
      (tag_name)
      (attribute
        (directive)
        (parameter)))
    (end_tag
      (tag_name))))
```

--------------------------------

### Blade @fragment Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/nested-directives.txt

Defines a reusable fragment within a Blade template. Use this to encapsulate and reuse small pieces of UI.

```blade
@fragment('test')
        fragment
@endfragment
```

--------------------------------

### Parse @readonly attribute

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/attributes.txt

Covers the parsing of the @readonly directive when it functions as an HTML attribute, making input fields read-only.

```html
<div @readonly('test') > </div>
```

```tree-sitter-grammar
(document
  (element
    (start_tag
      (tag_name)
      (attribute
        (directive)
        (parameter)))
    (end_tag
      (tag_name))))
```

--------------------------------

### @unless Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

The @unless directive renders content when the condition is false. It requires a closing @endunless tag.

```blade
@unless(true)
        test
@endunless
```

--------------------------------

### @empty Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/conditionals.txt

The @empty directive renders content if a variable is considered empty (null, false, 0, empty string, empty array). It requires a closing @endempty tag.

```blade
@empty(true)
        test
@endempty
```

--------------------------------

### Blade @yield Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @yield directive to define a section in a Blade view that can be pushed content into from child views.

```blade
@yield('test')
```

--------------------------------

### Blade @aware Directive

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use the @aware directive to make specific request attributes available to the component's view.

```blade
@aware(['color' => 'gray'])
```

--------------------------------

### Parse @selected attribute

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/attributes.txt

Details the parsing of the @selected directive when used as an HTML attribute, commonly for option elements in select lists.

```html
<div @selected('test') > </div>
```

```tree-sitter-grammar
(document
  (element
    (start_tag
      (tag_name)
      (attribute
        (directive)
        (parameter)))
    (end_tag
      (tag_name))))
```

--------------------------------

### Inline Raw PHP Directive in Blade

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/php-statements.txt

The @php directive allows you to embed short, inline PHP code snippets directly within your Blade template. The code is executed directly.

```blade
@php(echo 'test')

```

--------------------------------

### Parse @checked attribute

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/attributes.txt

Illustrates the parsing of the @checked directive used as an HTML attribute, typically for form inputs to set their checked state.

```html
<div @checked('test') > </div>
```

```tree-sitter-grammar
(document
  (element
    (start_tag
      (tag_name)
      (attribute
        (directive)
        (parameter)))
    (end_tag
      (tag_name))))
```

--------------------------------

### Parse @required attribute

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/attributes.txt

Details the parsing of the @required directive as an HTML attribute, enforcing that a form field must be filled out.

```html
<div @required('test') > </div>
```

```tree-sitter-grammar
(document
  (element
    (start_tag
      (tag_name)
      (attribute
        (directive)
        (parameter)))
    (end_tag
      (tag_name))))
```

--------------------------------

### Blade @section and @endsection Directives

Source: https://github.com/emranmr/tree-sitter-blade/blob/main/test/corpus/inline-directives.txt

Use @section and @endsection to define sections in a Blade view that can be overridden by child views. A section can also be defined with inline content.

```blade
@section('test','test')
```

```blade
@section('test')
  <div></div>
@endsection
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.