Усильте свои ремесленные команды с помощью Termwind

If you're building a Laravel application, package, or CLI (commи-line interface) application, you'll likely create your own custom Artisan commиs at some stage. When creating these commиs, you might want to make the output unique и stи out from the rest из the console output. To do this, you can the awesome Термвинд упаковка.

В этой статье мы рассмотрим, что такое Termwind, как его установить и как использовать в ваших собственных командах Artisan. Затем мы шаг за шагом обновим старый пример Artisan-команды, чтобы использовать Termwind, и посмотрим, как это улучшит вывод.

Что такое Термвинд?

Termwind — это пакет PHP, созданный и поддерживаемый Нуно Мадуро (и другие замечательные участники, такие как Франциско Мадейра), который позволяет вам использовать классы CSS, подобные Tailwind, в вашем коде PHP, чтобы добавить стиль к вашему выводу CLI.

Это отличный инструмент, который можно использовать, если вы хотите, чтобы вывод ваших команд выглядел уникальным и выделялся из толпы. Поэтому его очень удобно использовать, если вы создаете приложение CLI или пакет Laravel, который предоставляет любые Artisan-команды.

Он предоставляет вам возможность создавать выходные данные, используя HTML и классы, подобные Tailwind, такие как текст-синий-500, сгибаться and космос-x-1. Вы можете ознакомиться с полным списком классов, доступных в package's документация.

Применение

Установка

Чтобы начать использовать Termwind в своих приложениях Laravel, вам необходимо установить его с помощью Composer, выполнив следующую команду:

composer require nunomaduro/termwind

Вот и все! Теперь Termwind установлен и готов к работе.

Отображение вывода с использованием встроенного HTML

Теперь, когда у нас установлен Termwind, давайте посмотрим, как мы можем использовать его для вывода некоторого вывода в CLI.

Самый быстрый способ отобразить вывод — передать некоторый HTML-код в виде строки непосредственно в пакет. оказывать функция.

Чтобы дать этому немного контекста, давайте взглянем на простой пример. Представим, что у нас есть Artisan-команда, которую мы можем использовать для вывода некоторой статистики о нашем приложении Laravel. Ради этой статьи мы будем использовать жестко заданную статистику, чтобы мы могли сосредоточиться исключительно на Termwind.

Итак, давайте посмотрим на команду:

namespace App\Console\Commands;

use Illuminate\Console\Command;
use function Termwind\{render};

class AppStats extends Command
{
    protected $signature = 'app:stats';

    protected $description = 'Display the application stats';

    public function handle(): int
    {
        render(<<<'HTML'
            <div class="mx-2 my-1">
                <div class="space-x-1">
                    <span class="px-1 bg-blue-500 text-white">Application Info</span>
                </div>

                <div class="mt-1">
                    <span class="font-bold text-green">Totals</span>

                    <div class="flex space-x-1">
                        <span class="font-bold">Users</span>
                        <span class="flex-1 content-repeat-[.] text-gray"></span>
                        <span class="font-bold text-green">150</span>
                    </div>

                    <div class="flex space-x-1">
                        <span class="font-bold">Posts</span>
                        <span class="flex-1 content-repeat-[.] text-gray"></span>
                        <span class="font-bold text-green">200</span>
                    </div>

                    <div class="flex space-x-1">
                        <span class="font-bold">Comments</span>
                        <span class="flex-1 content-repeat-[.] text-gray"></span>
                        <span class="font-bold text-green">175</span>
                    </div>
                </div>

                <div class="mt-1">
                    <span class="font-bold text-green">Health Checks</span>

                    <div class="flex space-x-1">
                        <span class="font-bold">Mailcoach</span>
                        <i class="text-gray">Newsletter</i>
                        <span class="flex-1 content-repeat-[.] text-gray"></span>
                        <span class="font-bold text-green">CONNECTED</span>
                    </div>

                    <div class="flex space-x-1">
                        <span class="font-bold">Vonage</span>
                        <i class="text-gray">SMS</i>
                        <span class="flex-1 content-repeat-[.] text-gray"></span>
                        <span class="font-bold text-red">ERROR!</span>
                    </div>
                </div>
            </div>
        HTML);

        return self::SUCCESS;
    }
}

Приведенная выше команда выведет в CLI следующее:

As you can see, we can generate some really cool output using Termwind. But having the HTML directly in the command class can become messy very quickly. It's not very readable or maintainable. For example, if we wanted to use the same стильs in other commands, we'd potentially be duplicating a lot of the shared HTML.

Однако стоит отметить, что для небольших объемов вывода этот подход вполне может подойти. Просто когда вы начинаете получать много вывода, поддерживать его может стать немного утомительно.

Термвинд стиль Функция может помочь нам сгруппировать стили вместе, чтобы мы могли повторно использовать их в нескольких местах. Однако это не обязательно решает проблему фактического HTML, который строит структуру вывода. Я бы порекомендовал ознакомиться с style функция в документации чтобы узнать больше о том, как вы можете использовать его, чтобы упростить обслуживание.

Отображение вывода с использованием представления

Теперь, когда мы увидели, как вывести некоторый HTML-код непосредственно в CLI, давайте посмотрим, как мы можем использовать представление Blade для вывода вывода. Я предпочитаю использовать этот подход, поскольку он отделяет HTML от класса команд и упрощает поддержку и повторное использование в разных командах.

Для начала создадим новый Кли каталог в наших проектах ресурсы/просмотры каталог. Здесь мы будем хранить все представления, относящиеся к CLI.

Затем мы создадим новый приложение-stats.blade.php посмотреть в Кли directory. This will be the Посмотреть that we'll use to оказывать the output for our приложение:статистика команда, и она будет содержать HTML из нашего предыдущего примера (все между <<<'HTML' and HTML).

Теперь, когда у нас есть HTML в представлении Blade, мы можем обновить наш класс команд, чтобы использовать его. Мы сделаем это с помощью view вспомогательная функция для визуализации представления и передачи его вывода в Termwind render функция:

namespace App\Console\Commands;

use Illuminate\Console\Command;
use function Termwind\{render};

class AppStats extends Command
{
    protected $signature = 'app:stats';

    protected $description = 'Display the application stats';

    public function handle(): int
    {
        render(view('cli.app-stats'));

        return self::SUCCESS;
    }

Как видите, это значительно упростило понимание и поддержку класса команд. Теперь мы можем сосредоточиться на логике команды и не беспокоиться о том, что HTML загромождает этот класс.

Огромным преимуществом использования этого подхода является то, что он также позволяет нам использовать компоненты Blade, чтобы сделать наш вывод еще более пригодным для повторного использования. Мы можем создать компонент для каждого из различных разделов вывода, а затем использовать их в нашем представлении.

Давайте посмотрим, как мы можем использовать некоторые компоненты Blade, чтобы улучшить ремонтопригодность нашей команды.

Начнем с создания нового компоненты/cli каталог в нашем ресурсы/просмотры каталог. Похож на наш ресурсы/представления/cli каталог, здесь мы будем хранить все наши компоненты Blade, специфичные для CLI.

Мы можем выделить две основные части вывода нашей команды, которые можно разделить на компоненты в нашем примере выше:

Итоги
Проверки здоровья

Итак, мы создадим компонент для каждого из них. Помните, однако, что вы можете создать столько компонентов, сколько хотите, чтобы соответствовать потребностям вашего проекта.

Начнем с создания нового итоги.blade.php компонент в ресурсы/представления/компоненты/cli каталог. Этот компонент будет использоваться для отображения итогов для каждой статистики, которая у нас есть.

@props([
    'title',
    'value',
])
<div class="flex space-x-1">
    <span class="font-bold">{{ $title }}</span>
    <span class="flex-1 content-repeat-[.] text-gray"></span>
    <span class="font-bold text-green">{{ $value }}</span>
</div>

Как видите, этот компонент очень прост и имеет 2 разных свойства, определенных с помощью @реквизит Директива по лезвию. Он принимает два свойства, заглавие and ценить. Это отличный способ убедиться, что мы не забыли передать компоненту все необходимые свойства.

Теперь мы также можем создать новый соединение.blade.php компонент в ресурсы/представления/компоненты/cli каталог:

@props([
    'title',
    'subText',
    'connected' => false,
])
<div class="flex space-x-1">
    <span class="font-bold">{{ $title }}</span>
    <i class="text-gray">{{ $subText }}</i>
    <span class="flex-1 content-repeat-[.] text-gray"></span>

    @if($connected)
        <span class="font-bold text-green">CONNECTED</span>
    @else
        <span class="font-bold text-red">ERROR!</span>
    @endif
</div>

Вы могли заметить, что компонент имеет 3 разных свойства, определенных с помощью @реквизит Директива по лезвию. Это приводит к тому, что мы должны пройти заглавие имущество, подтекст свойство и необязательный связано всякий раз, когда мы используем компонент.

Как видно из нашего предыдущего примера, если связано свойство установлено на истинный, компонент выведет СВЯЗАНО текст зеленым цветом. В противном случае будет выведено ОШИБКА! текст красным цветом.

Теперь, когда у нас созданы и готовы компоненты, мы можем преобразовать наш ресурсы/представления/cli/app-stats.blade.php вид, чтобы использовать их:

<div class="mx-2 my-1">
    <div class="space-x-1">
        <span class="px-1 bg-blue-500 text-white">Application Info</span>
    </div>

    <div class="mt-1">
        <span class="font-bold text-green">Totals</span>

        <x-cli.stat title="Users" value="150" />
        <x-cli.stat title="Posts" value="200" />
        <x-cli.stat title="Comments" value="175" />
    </div>

    <div class="mt-1">
        <span class="font-bold text-green">Health Checks</span>

        <x-cli.connection title="Mailcoach" subText="Newsletter" :connected="true" />
        <x-cli.connection title="Vonage" subText="SMS" :connected="false" />
    </div>
</div>

Как видите, HTML теперь намного легче читать и понимать. Нам удалось уменьшить количество дублированного HTML, вызывая компоненты с помощью <x-cli.stat ... /> and <x-cli.connection ... /> Синтаксис лезвия. Что мне нравится в этом подходе, так это то, что, поскольку мы можем использовать Blade, создание выходных данных CLI очень похоже на создание веб-представлений.

Преобразование существующей команды

Теперь, когда мы увидели, как мы можем выводить HTML в CLI с помощью Termwind, давайте кратко рассмотрим, как мы можем преобразовать существующую команду для использования Termwind.

Давайте представим, что у нас есть Artisan-команда, которая делает следующее:

Запрашивает у пользователя поисковый запрос.
Searches the database for any пользователи that have an email address that contains the search term.
Выводит результаты в CLI.

Это всего лишь простой пример, но он должен дать нам хороший шанс выделить некоторые функции, которые предоставляет Termwind. Ради примера мы также не будем рассказывать, как мы ищем пользователей в базе данных, так как это не является предметом рассмотрения в этой статье. Но мы можем предположить, что searchПользовательs метод в приведенном ниже примере вернет Коллекция of User модели.

Наша существующая команда может выглядеть примерно так:

namespace App\Console\Commands;

use App\Models\User;
use Illuminate\Console\Command;

final class UsersSearch extends Command
{
    protected $signature = 'users:search';

    protected $description = 'Search for users in the system';

    public function handle(): int
    {
        $searchTerm = $this->ask('Search term: ');

        $users = $this->searchUsers($searchTerm);

        $rows = $users->map(fn (User $user): array => [
            $user->name,
            $user->email,
            $user->email_verified_at ?? 'No!',
        ])->all();

        $this->info('Found '.count($users).' users');
        $this->table(['Name', 'Email', 'Approved'], $rows);

        return self::SUCCESS;
    }
}

Приведенная выше команда предоставит следующий вывод:

Если бы мы хотели обновить команду для использования Termwind, наш класс мог бы выглядеть так:

namespace App\Console\Commands;

use App\Models\User;
use Illuminate\Console\Command;
use function Termwind\{ask, render};

final class UsersSearch extends Command
{
    protected $signature = 'users:search';

    protected $description = 'Search for users in the system';

    public function handle(): int
    {
        $searchTerm = ask(<<<HTML
            <span class="mt-1 ml-2 mr-1 bg-green px-1 text-black">
                Search term:
            </span>
        HTML);

        $users = $this->searchUsers($searchTerm);

        render(view('cli.user-search', [
            'users' => $users,
        ]));
        return self::SUCCESS;
    }
}

Давайте посмотрим, что изменилось.

Как вы могли заметить, мы заменили $this->просить позвоните с Termwind's ask функция. Это даст нам опыт, аналогичный существующей команде, но с дополнительным преимуществом, заключающимся в возможности использовать стили Termwind.

Мы также заменили $ это-> информация and $эта->таблица вызовы, перемещая остальную часть вывода команды в ресурсы/представления/cli/user-search.blade.php Представление Blade (как мы рассмотрели ранее в этой статье). Как видим, мы прошли $пользователи коллекции в представление точно так же, как мы могли бы передавать данные в веб-представление. Вид Blade выглядит так:

<div class="m-1">
    <div class="text-right mb-1 w-full">
        <span class="text-indigo-500">Found [<b>{{ $users->count() }}</b>] users</span>
    </div>

    @foreach($users as $user)
        <div>
            <div class="flex space-x-1">
                <span class="font-bold">{{ $user->name }}</span>
                <span class="text-gray">[{{ $user->email }}]</span>
                <span class="flex-1 content-repeat-[.] text-gray"></span>
                <span class="text-gray">Approved:</span>

                @if($user->email_verified_at)
                    <span class="font-bold text-green">{{ $user->email_verified_at }}</span>
                @else
                    <span class="font-bold text-red">NO!</span>
                @endif
            </div>
        </div>
    @endforeach
</div>

В файле Blade мы показываем общее количество найденных пользователей, а затем просматриваем users Коллекция передается для просмотра и вывода имен пользователей, адресов электронной почты и того, были ли они одобрены.

В результате внесения этих изменений команда теперь выводит следующее:

Теперь мы успешно преобразовали команду Artisan для использования Termwind!

Заключение

Надеюсь, эта статья должна была дать вам обзор того, что такое Termwind и как вы можете использовать его для создания потрясающих выходных данных CLI для ваших команд Artisan. Теперь вы сможете взять существующие команды и преобразовать их для использования Termwind или даже начать создавать новые команды с нуля.

Если вы хотите узнать больше о Termwind, вы можете проверить documentation на Гитхабе.

Что такое Термвинд?

Применение

Установка

Отображение вывода с использованием встроенного HTML

Отображение вывода с использованием представления

Преобразование существующей команды

Заключение

Comments

Yurij Finiv

Full stack

All-in-one SEO platform for teams and individuals