构建一个独立的插件

前言

请阅读有关面板插件开发和入门指南的文档，然后继续。

引言

在本演练中，我们将构建一个简单的插件，它将添加一个可用于表单的新表单组件。这也意味着它将在用户的面板中可用。

本插件的最终代码可在https://github.com/awcodes/headings找到

步骤 1: 创建插件

首先，我们将使用入门指南中概述的步骤创建插件.

步骤 2: 清理

接下来，我们将清理插件，以移除我们不需要的样板代码。这看起来会很多，但由于这是一个简单的插件，我们可以移除大量的样板代码。

删除以下目录和文件:

二进制
配置
数据库
src/命令
src/Facades
存根

现在我们可以清理我们的 composer.json 文件以删除不需要的选项.

json

"autoload": {
    "psr-4": {
        // We can remove the database factories
        "Awcodes\\Headings\\Database\\Factories\\": "database/factories/"
    }
},
"extra": {
    "laravel": {
        // We can remove the facade
        "aliases": {
            "Headings": "Awcodes\\Headings\\Facades\\ClockWidget"
        }
    }
},

通常情况下，Filament 建议用户使用自定义的 Filament 主题为其插件设置样式，但是为了举例说明，我们来提供一个自己的样式表，该样式表可以使用 Filament v3 中新的 x-load 功能异步加载。因此，让我们更新 package.json 文件以包含 cssnano、postcss、postcss-cli 和 postcss-nesting 来构建我们的样式表。

json

{
    "private": true,
    "scripts": {
        "build": "postcss resources/css/index.css -o resources/dist/headings.css"
    },
    "devDependencies": {
        "cssnano": "^6.0.1",
        "postcss": "^8.4.27",
        "postcss-cli": "^10.1.0",
        "postcss-nesting": "^13.0.0"
    }
}

接下来我们需要安装我们的依赖项。

bash

npm install

我们还需要更新我们的 postcss.config.js 文件以配置 postcss。

javascript

module.exports = {
    plugins: [
        require('postcss-nesting')(),
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

您也可以删除测试目录和文件，但目前我们会保留它们，尽管在此示例中我们不会使用它们，但我们强烈建议您为您的插件编写测试。

步骤 3: 配置提供程序

既然我们的插件已经清理完毕，我们就可以开始添加代码了。src/HeadingsServiceProvider.php 文件中的样板代码内容很多，所以，让我们删除所有内容，然后从头开始。

我们需要能够将样式表注册到 Filament 资产管理器，以便我们可以在 Blade 视图中按需加载它。为此，我们需要在服务提供者的 packageBooted 方法中添加以下内容。

注意 loadedOnRequest() 方法。这很重要，因为它告诉 Filament 只在需要时加载样式表。

php

namespace Awcodes\Headings;

use Filament\Support\Assets\Css;
use Filament\Support\Facades\FilamentAsset;
use Spatie\LaravelPackageTools\Package;
use Spatie\LaravelPackageTools\PackageServiceProvider;

class HeadingsServiceProvider extends PackageServiceProvider
{
    public static string $name = 'headings';

    public function configurePackage(Package $package): void
    {
        $package->name(static::$name)
            ->hasViews();
    }

    public function packageBooted(): void
    {
        FilamentAsset::register([
            Css::make('headings', __DIR__ . '/../resources/dist/headings.css')->loadedOnRequest(),
        ], 'awcodes/headings');
    }
}

步骤 4: 创建我们的组件

接下来，我们需要创建我们的组件。在 src/Heading.php 创建一个新文件，并添加以下代码。

php

namespace Awcodes\Headings;

use Closure;
use Filament\Schemas\Components\Component;
use Filament\Support\Colors\Color;
use Filament\Support\Concerns\HasColor;

class Heading extends Component
{
    use HasColor;

    protected string | int $level = 2;

    protected string | Closure $content = '';

    protected string $view = 'headings::heading';

    final public function __construct(string | int $level)
    {
        $this->level($level);
    }

    public static function make(string | int $level): static
    {
        return app(static::class, ['level' => $level]);
    }

    protected function setUp(): void
    {
        parent::setUp();

        $this->dehydrated(false);
    }

    public function content(string | Closure $content): static
    {
        $this->content = $content;

        return $this;
    }

    public function level(string | int $level): static
    {
        $this->level = $level;

        return $this;
    }

    public function getColor(): array
    {
        return $this->evaluate($this->color) ?? Color::Amber;
    }

    public function getContent(): string
    {
        return $this->evaluate($this->content);
    }

    public function getLevel(): string
    {
        return is_int($this->level) ? 'h' . $this->level : $this->level;
    }
}

步骤 5: 渲染我们的组件

接下来，我们需要为我们的组件创建视图。在 resources/views/heading.blade.php 创建一个新文件并添加以下代码。

我们正在使用 x-load 来异步加载样式表，因此它只在必要时加载。您可以在文档的核心概念部分了解更多信息。

blade

@php
    $level = $getLevel();
    $color = $getColor();
@endphp

<{{ $level }}
    x-data
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('headings', package: 'awcodes/headings'))]"
    {{
        $attributes
            ->class([
                'headings-component',
                match ($color) {
                    'gray' => 'text-gray-600 dark:text-gray-400',
                    default => 'text-custom-500',
                },
            ])
            ->style([
                \Filament\Support\get_color_css_variables($color, [500]) => $color !== 'gray',
            ])
    }}
>
    {{ $getContent() }}
</{{ $level }}>

步骤 6: 添加一些样式

接下来，让我们为我们的字段提供一些自定义样式。我们将把以下内容添加到 resources/css/index.css。并运行 npm run build 来编译我们的 CSS。

css

.headings-component {
    &:is(h1, h2, h3, h4, h5, h6) {
         font-weight: 700;
         letter-spacing: -.025em;
         line-height: 1.1;
     }

    &h1 {
         font-size: 2rem;
     }

    &h2 {
         font-size: 1.75rem;
     }

    &h3 {
         font-size: 1.5rem;
     }

    &h4 {
         font-size: 1.25rem;
     }

    &h5,
    &h6 {
         font-size: 1rem;
     }
}

然后我们需要构建我们的样式表。

bash

npm run build

步骤 7: 更新您的 README

您会想要更新您的 README.md 文件以包含有关如何安装您的插件的说明，以及您想与用户分享的任何其他信息，例如如何在他们的项目中L使用它。例如：

php

use Awcodes\Headings\Heading;

Heading::make(2)
    ->content('Product Information')
    ->color(Color::Lime),

并且, 就这样, 我们的用户现在可以安装我们的插件并在他们的项目中使用它了.

前言

请阅读有关面板插件开发和入门指南的文档，然后继续。

引言

在本演练中，我们将构建一个简单的插件，它将添加一个可用于表单的新表单组件。这也意味着它将在用户的面板中可用。

本插件的最终代码可在https://github.com/awcodes/headings找到

步骤 1: 创建插件

首先，我们将使用入门指南中概述的步骤创建插件.

步骤 2: 清理

接下来，我们将清理插件，以移除我们不需要的样板代码。这看起来会很多，但由于这是一个简单的插件，我们可以移除大量的样板代码。

删除以下目录和文件:

二进制
配置
数据库
src/命令
src/Facades
存根

现在我们可以清理我们的 composer.json 文件以删除不需要的选项.

json

"autoload": {
    "psr-4": {
        // We can remove the database factories
        "Awcodes\\Headings\\Database\\Factories\\": "database/factories/"
    }
},
"extra": {
    "laravel": {
        // We can remove the facade
        "aliases": {
            "Headings": "Awcodes\\Headings\\Facades\\ClockWidget"
        }
    }
},

json

{
    "private": true,
    "scripts": {
        "build": "postcss resources/css/index.css -o resources/dist/headings.css"
    },
    "devDependencies": {
        "cssnano": "^6.0.1",
        "postcss": "^8.4.27",
        "postcss-cli": "^10.1.0",
        "postcss-nesting": "^13.0.0"
    }
}

接下来我们需要安装我们的依赖项。

bash

npm install

我们还需要更新我们的 postcss.config.js 文件以配置 postcss。

javascript

module.exports = {
    plugins: [
        require('postcss-nesting')(),
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

您也可以删除测试目录和文件，但目前我们会保留它们，尽管在此示例中我们不会使用它们，但我们强烈建议您为您的插件编写测试。

步骤 3: 配置提供程序

注意 loadedOnRequest() 方法。这很重要，因为它告诉 Filament 只在需要时加载样式表。

php

namespace Awcodes\Headings;

use Filament\Support\Assets\Css;
use Filament\Support\Facades\FilamentAsset;
use Spatie\LaravelPackageTools\Package;
use Spatie\LaravelPackageTools\PackageServiceProvider;

class HeadingsServiceProvider extends PackageServiceProvider
{
    public static string $name = 'headings';

    public function configurePackage(Package $package): void
    {
        $package->name(static::$name)
            ->hasViews();
    }

    public function packageBooted(): void
    {
        FilamentAsset::register([
            Css::make('headings', __DIR__ . '/../resources/dist/headings.css')->loadedOnRequest(),
        ], 'awcodes/headings');
    }
}

步骤 4: 创建我们的组件

接下来，我们需要创建我们的组件。在 src/Heading.php 创建一个新文件，并添加以下代码。

php

namespace Awcodes\Headings;

use Closure;
use Filament\Schemas\Components\Component;
use Filament\Support\Colors\Color;
use Filament\Support\Concerns\HasColor;

class Heading extends Component
{
    use HasColor;

    protected string | int $level = 2;

    protected string | Closure $content = '';

    protected string $view = 'headings::heading';

    final public function __construct(string | int $level)
    {
        $this->level($level);
    }

    public static function make(string | int $level): static
    {
        return app(static::class, ['level' => $level]);
    }

    protected function setUp(): void
    {
        parent::setUp();

        $this->dehydrated(false);
    }

    public function content(string | Closure $content): static
    {
        $this->content = $content;

        return $this;
    }

    public function level(string | int $level): static
    {
        $this->level = $level;

        return $this;
    }

    public function getColor(): array
    {
        return $this->evaluate($this->color) ?? Color::Amber;
    }

    public function getContent(): string
    {
        return $this->evaluate($this->content);
    }

    public function getLevel(): string
    {
        return is_int($this->level) ? 'h' . $this->level : $this->level;
    }
}

步骤 5: 渲染我们的组件

接下来，我们需要为我们的组件创建视图。在 resources/views/heading.blade.php 创建一个新文件并添加以下代码。

我们正在使用 x-load 来异步加载样式表，因此它只在必要时加载。您可以在文档的核心概念部分了解更多信息。

blade

@php
    $level = $getLevel();
    $color = $getColor();
@endphp

<{{ $level }}
    x-data
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('headings', package: 'awcodes/headings'))]"
    {{
        $attributes
            ->class([
                'headings-component',
                match ($color) {
                    'gray' => 'text-gray-600 dark:text-gray-400',
                    default => 'text-custom-500',
                },
            ])
            ->style([
                \Filament\Support\get_color_css_variables($color, [500]) => $color !== 'gray',
            ])
    }}
>
    {{ $getContent() }}
</{{ $level }}>

步骤 6: 添加一些样式

接下来，让我们为我们的字段提供一些自定义样式。我们将把以下内容添加到 resources/css/index.css。并运行 npm run build 来编译我们的 CSS。

css

.headings-component {
    &:is(h1, h2, h3, h4, h5, h6) {
         font-weight: 700;
         letter-spacing: -.025em;
         line-height: 1.1;
     }

    &h1 {
         font-size: 2rem;
     }

    &h2 {
         font-size: 1.75rem;
     }

    &h3 {
         font-size: 1.5rem;
     }

    &h4 {
         font-size: 1.25rem;
     }

    &h5,
    &h6 {
         font-size: 1rem;
     }
}

然后我们需要构建我们的样式表。

bash

npm run build

步骤 7: 更新您的 README

您会想要更新您的 README.md 文件以包含有关如何安装您的插件的说明，以及您想与用户分享的任何其他信息，例如如何在他们的项目中L使用它。例如：

php

use Awcodes\Headings\Heading;

Heading::make(2)
    ->content('Product Information')
    ->color(Color::Lime),

并且, 就这样, 我们的用户现在可以安装我们的插件并在他们的项目中使用它了.

文档导航

前言

引言

步骤 1: 创建插件

步骤 2: 清理

步骤 3: 配置提供程序

步骤 4: 创建我们的组件

步骤 5: 渲染我们的组件

步骤 6: 添加一些样式

步骤 7: 更新您的 README

前言

引言

步骤 1: 创建插件

步骤 2: 清理

步骤 3: 配置提供程序

步骤 4: 创建我们的组件

步骤 5: 渲染我们的组件

步骤 6: 添加一些样式

步骤 7: 更新您的 README