README

This package adds some features to make it easier to work with components and html tags in laravel blade.

<AppLayout>
    <Slot title>BladeX</Slot>
    
    <MyButton type="primary">Click here</MyButton>
</AppLayout>

BladeX v2

Requirements

Php 8.1 or higher
Laravel 10.0 or 11.0

Installation

Install the package with composer:

composer require rapid/bladex

Then clear the compiled view caches to recompile blade files:

php artisan view:clear

Compiling

BladeX converts the components tag into proper php code at compile time! Some operations are not at runtime.

This means that if you change something that doesn't recompile the source file, but affects the code, you have to clear the compiled caches to recompile:

php artisan view:clear

Components

You can call components by <HtmlTag> in anywhere you want!

Name Rule

The component call name should be PascalCase, but the file name should be kebab-case.

Component Path

Every folder named components is a component path.

Exmaples:

View Path	Tag Name	View-Based Name
`components/button.blade.php`	`Button`	`button`
`components/button/red.blade.php`	`Button.Red`	`button.red`
`components/button/index.blade.php`	`Button`	`button`
`componets/posts/post-card.blade.php`	`Posts.PostCard`	`posts.post-card`
`posts/components/post-card.blade.php`	`Posts.PostCard`	`posts.post-card`
`posts/actions/components/del.blade.php`	`Posts.Actions.Del`	`posts.actions.del`

Call Component

Just type <TagName>:

<Button class="bg-red-500">Delete</Button>
<Button.Red>Cancel</Button.Red>
<Posts.PostCard :post="$post" />

Note: If the component file is not found at compile time, the component will not compile.

Slots

In the blade, you must write <x-slot name="slot_name"> to define slot value.

But in BladeX, just type <Slot slot_name>:

<Dropdown>
    Select Option
    
    <Slot options>
        <li>Option 1</li>
        <li>Option 2</li>
    </Slot>
    
    <Slot icon>
        <svg>...</svg>
    </Slot>
</Dropdown>

Use Component

If you want to call component by alias (like programming use keyword), you can use magic blade directive @use:

@use(Posts.Actions.Del)

<Del :post="$post" />

Add as keyword to set alias:

@use(Posts.Actions.Del as PostDelete)

<PostDelete :post="$post" />

You can also use a component folder:

@use(Posts.Actions as PostAct)

<PostAct.Del :post="$post" />

Use View Like Components

If you want to use it by specifying the view path, you can use this syntax:

@use('home.post' as Post)

<Post />

<!-- Automatically convert 'app-layout' to 'AppLayout' as alias! -->
@use('layout.app-layout')

<AppLayout />

Use All (*)

If you want to use all components in same directory/name, you can write @use directive with .* suffix:

@use(Posts.Actions.*)

<!-- Calls <Posts.Actions.Del> if exists -->
<Del :post="$post" />
<!-- Calls <Posts.Actions.Create> if exists -->
<Create :post="$post" />

@use('layouts.*')

<!-- Calls 'layouts.app-layout.blade.php' if exists -->
<AppLayout>
    Hello World
</AppLayout>

Note: Try not to spam this feature.

Because this feature searches among the files and slows down the compiling view

However, all lookups are done at compile time only. So don't worry about the slowness of the website :)

Layouts

You can create layouts with BladeX. For example:

layouts/app.blade.php

<html lang="en">
<head>
    <title>{{ $title }}</title>
</head>
<body>
    {{ $slot }}
</body>
</html>

index.blade.php

@use('layouts.app' as AppLayout)

<AppLayout>
    <Slot title>BladeX</Slot>
    
    Welcome to BladeX!
</AppLayout>

You don't need @use tag anymore if you create .blade.php configuration file! More Info

Directive Helpers

Layout

Layout equals to @extends, but only adds layouts. name to your view name. For example @layout('guest') converts to @extends('layouts.guest') and @layout('admin.main') to @extends('admin.layouts.main')

@layout('guest')

@section('content')
    <h1>Hello World</h1>
@endsection

Also, you can use components for layouts.

Partial

Partial equals to @include, but only adds partials. name to your view name. For example @partial('edit') converts to @include('partials.edit') and @partial('admin.delete') to @include('admin.partials.delete')

<AppLayout>
    @partial('users.my-info')
</AppLayout>

Current Directory Name

You can use @ in @include, @use, @layout, @extends, @partial to use current path reference.

admin/dashboard.blade.php:

@use('admin.btn-create')
@use('@btn-create')

@include('admin.partials.create-user')
@include('@partials.create-user')
@partial('@create-user')

Configuration

Add the .blade.php file wherever you want to apply the sub files:

<?php

# Note: After editing this source, run `php artisan view:clear` one time.

return [
    # Use components alias
    'use' => [
        // Example:
        // 1- 'Posts.PostCard'
        // 2- 'posts.post-card'
        // 3- 'Buttons.Red' => 'Alias',
        // 4- 'Buttons.*'
        
    ],
];

For example, create file resources/views/.blade.php with the following content:

<?php

# Note: After editing this source, run `php artisan view:clear` one time.

return [
    # Use components alias
    'use' => [
        // Example:
        // 1- 'Posts.PostCard'
        // 2- 'posts.post-card'
        // 3- 'Buttons.Red' => 'Alias',
        // 4- 'Buttons.*'
        
        'layouts.app' => 'AppLayout',
        'layouts.guest' => 'GuestLayout',
    ],
];

Now, you can use layouts with components in any blade files in resources/views

<AppLayout>
    <p>Content</p>
</AppLayout>

Support

Telegram: @Mahdi_Saremi
Instagram: @mahdi_saremi_org

rapid / bladex

Maintainers

Details