README

法文版本

描述

Compio是一个高级组件生成器。目前仅支持在Laravel框架中使用Artisan (CLI) 生成Blade组件，但你可以自定义以生成来自其他模板引擎（如Twig或VueJs或其它）的组件。

如何安装

创建Laravel项目后，你有“两种方法”来安装Compio。这两种方法是：

第一种方法：在`./composer.json`文件中添加代码。
第二种方法：在`./app/Console/Kernel.php`文件中添加代码。

第一种方法

在你的文件./composer.json中，你需要粘贴以下内容：

"Compio\\ComposerScripts::postAutoloadDump"

复制并粘贴到你的文件./composer.json中，在键（或属性）scripts.post-autoload-dump中。你需要这样粘贴：

{
	// code ...
	"scripts": {
		// code ...
		"post-autoload-dump": [
			// code ...
			"Compio\\ComposerScripts::postAutoloadDump"
		]
		// code ...
	}
	// code ...
}

最后，在项目中运行以下命令：

$ composer dump-autoload
  ...
  ...	
  |~ Compio for Laravel>=5.5 is load !

          ~ The `C:\Path\...\my_project\app\Console\Kernel.php` file has ben modified
            to integrate Compio Laravel command !

          ~ The configuration file `C:\Path\...\my_project\config\compio.php` has been created !
  ...

如果脚本Compio\\ComposerScripts::postAutoloadDump成功执行，你将在文件./app/Console/Kernel.php中看到一行代码，类似于以下：

require_once getcwd() . '\vendor\dovetaily\compio\src\Environments\Laravel\...';

如果你在文件./app/Console/Kernel.php中没有这行代码，请确保方法commands存在，并且有这行代码require base_path('routes/console.php');，然后重新在控制台运行命令composer dump-autoload。

如果所有这些都没有添加到你的文件./app/Console/Kernel.php中的代码require_once getcwd() . '\vendor\dovetaily\compio\src\Environments\Laravel\...';，那么请尝试第二种方法。

如果一切顺利，将创建一个包含最少配置的Compio配置文件。以下是该配置文件的内容：

return [

	/*
	|--------------------------------------------------------------------------
	| The configuration of the Compio(`dovetaily/compio`) Lib.
	|--------------------------------------------------------------------------
	|
	| Customize the way Compio(`dovetaily/compio`) generates your components
	| by adding your own templates or by modifying the way default templates
	| are generated. And you have the possibility to list your components to
	| generate in any configuration file, Compio(`dovetaily/compio`) will
	| generate all your components according to your global and current
	| configuration related to the components.
	|
	*/
	'component' => [
		'config' => [
			'require_template' => false,
			'replace_component_exist' => null
		],
		'components' => [
		]
	]
];

所有关于组件生成自定义的内容都将在这个配置文件中完成，稍后进行解释。完成第一种方法！

第二种方法

在这个第二种方法中，你将粘贴对应你Laravel版本的代码到你的文件./app/Console/Kernel.php中的commands。

# For larvel >=5.5
require_once getcwd() . '\vendor\dovetaily\compio\src\Environments\Laravel\V_sup_eq_5_5\resources\routes.commands.php';

你的./app/Console/Kernel.php文件将看起来像这样：

# code ...
class Kernel extends ConsoleKernel
{
	# code ...
		protected function commands()
		{
			# code ...

			# For larvel >=5.5
				require_once getcwd() . '\vendor\dovetaily\compio\src\Environments\Laravel\V_sup_eq_5_5\resources\routes.commands.php';

			# code ...
		}

}

完成第二种方法！

完成安装

如果你尝试了其中一种或两种方法，请运行以下命令php artisan list以确认Compio正在工作

$ php artisan list
Laravel Framework ...

Usage:
  ...

Options:
  ...

Available commands:
 ...
 ...
 compio
  compio:component       Advanced component generator Compio(`dovetail/compio`)
 ...
 ...

如果你尝试了两种方法，但没有得到这个结果，那么请检查你的Laravel版本是否符合Compio支持版本。

如何使用

Compio非常易于使用。当Compio生成组件时，它默认创建4个文件模板，包括：

在./app/View/Components/文件夹中的PHP类文件
在./resources/views/components/文件夹中的渲染文件（默认为Blade）
在./public/js/components/文件夹中的js文件
在./public/css/components/文件夹中的css文件

然而，你可以自定义文件夹路径或选择要生成的模板，创建自己的生成模板。

使用Compio有两种方式。

1 - 使用控制台直接使用。
2 - 使用配置文件使用。

1 - 使用控制台直接使用

让我们深入探讨一下Compio命令。

compio
	compio:component       Advanced component generator Compio(`dovetail/compio`)
...
...
$ php artisan compio:component -h
Description:
  Advanced component generator Compio(`dovetail/compio`)

Usage:
  compio:component [options] [--] [<component_name> [<args>...]]

Arguments:
  component_name           Component Name (^[a-z_]+[a-z0-9\/_]+$|^[a-z_]$ or use config ^\#([a-z]+)\|([^|]+)
  args                     Your arguments for the class (ex. my_arg=default_value my_second_arg my_xx_arg="Hello world")

Options:
  -r, --replace[=REPLACE]  Replace the component if it exists ('true' for replace, ignore with 'false')
  -h, --help               Display help for the given command. When no command is given display help for the list command
  -q, --quiet              Do not output any message
  -V, --version            Display this application version
      --ansi|--no-ansi     Force (or disable --no-ansi) ANSI output
  -n, --no-interaction     Do not ask any interactive question
      --env[=ENV]          The environment the command should run under
  -v|vv|vvv, --verbose     Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

命令用法如下：

$ php artisan compio:component [<component_name> [<args>...]]

<name>：组件名称，根据正则表达式 /^[a-z_]+[a-z0-9\/_]+$|^[a-z_]$/i（或再次 /^\#([a-z]+)\|([^|]+)$/i，但这个表达式将在使用配置文件时出现）。
<arguments>：类的参数，此条目不是必需的，您可以省略它。

让我们用上面的例子来说明。

$ php artisan compio:component Path/MyComponent string:my_string_type_argument="Default value" array:null:my_array_or_null_type_argument_2= my_argument_require_3

		  "Blade>=5.5" template engine is selected to generate component !



		Success | Created : "C:\Path\...\my_project\app\View\Components\Path\MyComponent.php"


		Success | Created : "C:\Path\...\my_project\resources\views\components\Path\MyComponent.blade.php"


		Success | Created : "C:\Path\...\my_project\public\css\components\Path\MyComponent.css"


		Success | Created : "C:\Path\...\my_project\public\js\components\Path\MyComponent.js"


		Component (Path/MyComponent) created successfully !

命令 php artisan compio:component Path/MyComponent string:my_string_type_argument="默认值" array:null:my_array_or_null_type_argument_2= my_argument_require_3 在一行中接收所有组件信息，但您也可以按如下方式运行：

$ php artisan compio:component

          "Blade>=5.5" template engine is selected to generate component !

 Component name ? (Component | Path/Component):
 > Path/MyComponent

 Put your arguments :
 > string:my_string_type_argument="Default value" array:null:my_array_or_null_type_argument_2=null my_argument_require_3
 	...
 	...
        Component (Path/MyComponent) created successfully !

让我们看看生成的文件。

文件 `my_project\app\View\Components\Path\MyComponent.php`

// php artisan compio:component Path/MyComponent string:my_string_type_argument="Default value" array:null:my_array_or_null_type_argument_2= my_argument_require_3
namespace App\View\Components\Path;

use Illuminate\View\Component;

class MyComponent extends Component
{

    /**
     * The class assets.
     *
     * @var array
     */
	private static $assets = [
		'css' => [
			'css\components\Path\MyComponent.css'
		],
		'js' => [
			'js\components\Path\MyComponent.js'
		],
	];

	// properties...
	public $my_argument_require_3;
	public $my_string_type_argument;
	public $my_array_or_null_type_argument_2;

	/**
	 * Create a new component instance.
	 *
	 * @return void
	 */
	public function __construct($my_argument_require_3, string $my_string_type_argument = "Default value", array|null $my_array_or_null_type_argument_2 = null){

		// properties...
		$this->my_argument_require_3 = $my_argument_require_3;
		$this->my_string_type_argument = $my_string_type_argument;
		$this->my_array_or_null_type_argument_2 = $my_array_or_null_type_argument_2;

	}

	/**
	 * Get the view / contents that represent the component.
	 *
	 * @return \Illuminate\Contracts\View\View|\Closure|string
	 */
	public function render()
	{

		return view('components.Path.MyComponent', [
			// properties...
			'my_argument_require_3' => $this->my_argument_require_3,
			'my_string_type_argument' => $this->my_string_type_argument,
			'my_array_or_null_type_argument_2' => $this->my_array_or_null_type_argument_2,
		]);

	}

	/**
	 * Get component assets
	 *
	 * @param string|null  $key
	 * @return array|string
	 */
	public static function getAssets(string|null $key = null){

		return empty($key) ? self::$assets : (array_key_exists($key, self::$assets) ? self::$assets[$key] : false);

	}
}

在下一行：

# code ...
	public function __construct($my_argument_require_3, string $my_string_type_argument = "Default value", array|null $my_array_or_null_type_argument_2 = null){
# code ...

让我们分析生成的参数。

string:my_string_type_argument="默认值"：带默认值的类型化参数。
array:null:my_array_or_null_type_argument_2=：带默认值 null 的类型化参数。
如果您在输入 请输入您的参数： 中输入参数，您必须输入值 null（如 array:null:my_array_or_null_type_argument_2=null）。
my_argument_require_3：必填的无类型参数。

文件 `my_project\resources\views\components\Path\MyComponent.blade.php`

<!-- COMPONENT PathMycomponent START -->
	<div class="path-mycomponent-f0ul3mey">
		<!-- Content... -->
	</div>
<!-- COMPONENT PathMycomponent STOP -->

文件 `my_project\public\css\components\Path\MyComponent.css`

.path-mycomponent-f0ul3mey{
	/*...*/
}
.z-1{ z-index: 1; }




/* ---- COLOR START ----  */

	@media (prefers-color-scheme: dark) {
		.path-mycomponent-f0ul3mey{
			/*...*/
		}
	}

/* ---- COLOR STOP ---- */




/* ---- MEDIA SCREEN START ---- */

	/* MIN WIDTH */
	/*---- sm ----*/
	@media (min-width: 640px) { /*...*/ }
	/*---- md ----*/
	@media (min-width: 768px) { /*...*/ }
	/*---- lg ----*/
	@media (min-width: 1024px) { /*...*/ }
	/*---- xl ----*/
	@media (min-width: 1280px) { /*...*/ }
	/*---- 2xl ----*/
	@media (min-width: 1536px) { /*...*/ }
	/*---- xxl ----*/
	@media (max-width: 1400px) { /*...*/ }




	/* MAX WIDTH */
	/*---- 2xl ----*/
	@media (max-width: 1535px) { /*...*/ }
	/*---- xl ----*/
	@media (max-width: 1279px) { /*...*/ }
	/*---- lg ----*/
	@media (max-width: 1023px) { /*...*/ }
	/*---- md ----*/
	@media (max-width: 767px) { /*...*/ }
	/*---- sm ----*/
	@media (max-width: 639px) { /*...*/ }
	/*------ MORE ------*/
	@media (max-width: 576px){ /*...*/ }

	@media (max-width: 539px){ /*...*/ }

	@media (max-width: 467px){ /*...*/ }

	@media (max-width: 395px){ /*...*/ }

	@media (max-width: 355px){ /*...*/ }

	@media (max-width: 300px){ /*...*/ }

	@media (max-width: 268px){ /*...*/ }

/* ---- MEDIA SCREEN STOP ---- */

文件 `my_project\public\js\components\Path\MyComponent.js`

// document.querySelector('.path-mycomponent-f0ul3mey') ...

// (function($) {
//	// $('.path-mycomponent-f0ul3mey') ...
// })(jQuery);

2 - 使用配置文件

在本节中，我们将使用配置文件中的数据。在 Compio 安装期间，如果一切顺利，它会生成一个配置文件 ./my_project/config/compio.php，如果尚未创建，请创建它，并为了配置影响组件生成的设置，添加键 component，然后在其中添加键 config，对于最小渲染配置，将提供以下内容：

return [
	// ...
	'component' => [
		'config' => [
			// ...
		]
	]
];

A. 简单使用配置文件生成多个组件

因此我们有 component.config，在查看点 'B' 中可能的 Compio 配置之前，我们将首先了解如何同时生成多个组件。请添加一个键，用于存储生成的组件列表，您可以命名它，但不能包含符号 |。所以，为了举例，我们将添加键 datas，结构将变成 component.datas。然后我们将组件放在那里。

return [
	// ...
	'component' => [
		'config' => [
			// ...
		],
		'datas' => [
			['name' => 'Path/MyComponent',
				'args' => [
					'string:my_string_type_argument' => "Default value", //
					'array:null:my_array_or_null_type_argument_2' => \Compio\Component\Arguments::NULL_VALUE, // set `null` value
					'my_argument_require_3' => null // Mandatory argument
				]
			],
			['name' => 'Cards/Post/User',
				'args' => [
					'string:title' => null, // Mandatory argument
					'string:null:description' => \Compio\Component\Arguments::NULL_VALUE, // set `null` value
					'array:string:image' => ['http://my.cdn.com/img/21128376.jpg', 'http://my_cdn.com/img/44837110.jpg'], // set `array` value
					'int:null:like' => \Compio\Component\Arguments::NULL_VALUE,  // set `null` value
					'\Illuminate\Contracts\View\View:\Closure:string:null:more' => \Compio\Component\Arguments::NULL_VALUE  // set `null` value
				]
			],
			['name' => 'Shape/Ball']
		]
	]
];

现在配置文件中有了要生成的组件，我们将运行以下命令 php artisan compio:component "#config|[config_keys]"。条目 [config_keys] 将是组件键的配置路径，就像我们使用 Laravel 的辅助函数 config([config_keys]) 一样。

$ php artisan compio:component "#config|compio.component.datas"

          "Blade>=5.5" template engine is selected to generate component !

          This config `compio.component.components` is matched !

        0 : "Path/MyComponent" component is loaded !
        1 : "Cards/Post/User" component is loaded !
        2 : "Shape/Ball" component is loaded !


        Success | Created : "C:\Path\...\my_project\app\View\Components\Path\MyComponent.php"
        Success | Created : "C:\Path\...\my_project\resources\views\components\Path\MyComponent.blade.php"
        Success | Created : "C:\Path\...\my_project\public\css\components\Path\MyComponent.css"
        Success | Created : "C:\Path\...\my_project\public\js\components\Path\MyComponent.js"
        Component (Path/MyComponent) created successfully !

        Success | Created : "C:\Path\...\my_project\app\View\Components\Cards\Post\User.php"
        ...
        ...
        Success | Created : "C:\Path\...\my_project\public\js\components\Cards\Post\User.js"
        Component (Cards/Post/User) created successfully !

        Success | Created : "C:\Path\...\my_project\app\View\Components\Shape\Ball.php"
        ...
        ...
        Success | Created : "C:\Path\...\my_project\public\js\components\Shape\Ball.js"
        Component (Shape/Ball) created successfully !

具体来说，我们将查看 Cards/Post/User 组件方法的参数（参数），以了解参数的默认值：文件 C:\Path\...\my_project\app\View\Components\Cards\Post\User.php

// ...
namespace App\View\Components\Cards\Post;
class User extends Component
	// code ...
	public function __construct(
		string $title, // '...title' => null, // Mandatory argument
		string|null $description = null, // '...description' => \Compio\Component\Arguments::NULL_VALUE, // default value `null`
		int|null $like = null, // '...like' => \Compio\Component\Arguments::NULL_VALUE, // default value `null`
		array|string $image = array (
			0 => 'http://my.cdn.com/img/21128376.jpg',
			1 => 'http://my_cdn.com/img/44837110.jpg',
		),
		\Illuminate\Contracts\View\View|\Closure|string|null $more = null
	)
	// code ...

B. 可能的 Compio 配置

以下是 Compio 的主要键，用于良好地管理库。

return [
	// ...
	'component' => [
		'config' => [
			'template' => [
				'class' => [
					// code ...
				],
				'render' => [
					// code ...
				],
				'css' => [
					// code ...
				],
				'js' => [
					// code ...
				]
			],
			'require_template' => false,
			'replace_component_exist' => null,
		]
	]
]

如您所注意到的，当您生成组件时，将创建四个文件，这些文件对应于 component.config.template（class、render、css 和 js）中的模板数量。在查看如何 添加、停止或修改模板 之前，我们首先将查看键 component.config.require_template 和 component.config.replace_component_exist。

键 `component.config.require_template`

当您运行命令以生成组件时，它不会询问您要生成哪种模板，它会自动生成由 Compio 预定义的四个模板文件。

键 component.config.require_template 仅接受类型为 bool 的值。

如果键 component.config.require_template 是 false（默认键值）: 您无法选择要生成的模板。
如果键 component.config.require_template 是 true：您可以选择要生成的模板。

当键 component.config.require_template 是 true 时，我们将看到一个示例。

'require_template' => true,

然后在控制台

$ php artisan compio:component Path/MyComponent string:my_string_type_argument="Default value" array:null:my_array_or_null_type_argument_2= my_argument_require_3

          "Blade>=5.5" template engine is selected to generate component !

 Only change templates :

        [0] ALL
        [1] class
        [2] render
        [3] css
        [4] js

 Choose one or more templates (ex. 2, 4) [0]:
 > 1, 2

          These template(s) will be generate : class, render

        Success | Created : "C:\Users\...\my_project\app\View\Components\Path\MyComponent.php"
        Success | Created : "C:\Users\...\my_project\resources\views\components\Path\MyComponent.blade.php"
        Component (Path/MyComponent) created successfully !

这就是当键 'require_template' => true 时的情况。当它是 false 时，生成过程将与上面示例中的情况相同。

键 `component.config.replace_component_exist`

此键为我们提供了一种替换、忽略或选择已存在组件的方法。

键 component.config.replace_component_exist 只接受以下类型的值： bool|null

如果键 component.config.replace_component_exist 是 null（默认键值）: 在处理过程中，它会询问您是否要重新生成组件（它只会在找到 class 模板时询问您），您将不得不选择要重新生成的模板。
如果键 component.config.replace_component_exist 是 true：每当组件已存在时，它将自动替换。
如果键 component.config.replace_component_exist 是 false：如果组件已存在，它将自动忽略（此组件将不会重新生成）。

如果 component.config.replace_component_exist 是 null 的示例

$ php artisan compio:component Path/MyComponent string:my_string_type_argument="Default value" array:null:my_array_or_null_type_argument_2= my_argument_require_3
 ...
 Component "Path/MyComponent" already exists.

 Do you want to continue and regenerate component ? (yes/no) [yes]:
 > yes

 Only change templates :

        [0] ALL
        [1] class
        [2] render
        [3] css
        [4] js

 Choose one or more templates (ex. 2, 4) [0]:
 > 0

          These template(s) will be regenerate : class, render, css, js

        Warning | Modified : "C:\...\my_project\app\View\Components\Path\MyComponent.php"
        Warning | Modified : "C:\...\my_project\resources\views\components\Path\MyComponent.blade.php"
        Warning | Modified : "C:\...\my_project\public\css\components\Path\MyComponent.css"
        Warning | Modified : "C:\...\my_project\public\js\components\Path\MyComponent.js"
        Component (Path/MyComponent) created successfully !

如果 component.config.replace_component_exist 是 true 的示例

$ php artisan compio:component Path/MyComponent string:my_string_type_argument="Default value" array:null:my_array_or_null_type_argument_2= my_argument_require_3

          "Blade>=5.5" template engine is selected to generate component !

        Warning | Modified : "C:\Users\...\my_project\app\View\Components\Path\MyComponent.php"
        ...
        ...
        Warning | Modified : "C:\Users\...\my_project\public\js\components\Path\MyComponent.js"
        Component (Path/MyComponent) created successfully !

如果 component.config.replace_component_exist 是 false 的示例

$ php artisan compio:component Path/MyComponent string:my_string_type_argument="Default value" array:null:my_array_or_null_type_argument_2= my_argument_require_3

          "Blade>=5.5" template engine is selected to generate component !

         "Path/MyComponent" Component already exists !

您也可以使用 --replace 选项直接在命令行上配置它。

$ php artisan compio:component Path/MyComponent --replace=true

模板键（《component.config.template》）

此键具有默认模板，包括

`class`
`render`
`css`
`js`

模板 `class`

此模板的 Compio 配置值

return [
	// code ...
			'template' => [
				'class' => [
					'path' => getcwd() . '\app\View\Components',
					'template_file' => dirname(__DIR__) . '\resources\component\class.php',
					'generate' => true,
					'convert_case' => 'default',
					'keywords' => [
						'@command',
						'@namespace',
						'@class_name',
						'@locate_css',
						'@locate_js',
						'@locate_render',
						'@args_init',
						'@args_params',
						'@args_construct',
						'@args_render',
					]
				]
			]
	// code ...
]

键 path（类型 string|array）：这是生成文件存储的文件夹。
键 template_file（类型 string）：这是生成组件的模板文件（可以是 .txt, .php... 或其他文件）。并且 dirname(__DIR__) 函数位于 Compio 类中。
键 generate（类型 bool）：如果它是 false，则模板将不会生成，如果它是 true，则相反。
键 convert_case（类型 string|callable）：将组件名称的短路径名称转换为小写（默认值 lower）。
键 keywords（类型 array）：这些是在模板文件中找到的关键字（您将在模板文件中看到它们的有用之处）。

以下是默认模板文件（template_file）的外观

<?php
@command
namespace App\View\Components@namespace;

use Illuminate\View\Component;

class @class_name extends Component
{

    /**
     * The class assets.
     *
     * @var array
     */
	private static $assets = [
		'css' => [@locate_css],
		'js' => [@locate_js],
	];

	// properties...
	@args_init

	/**
	 * Create a new component instance.
	 *
	 * @return void
	 */
	public function __construct(@args_params){

		// properties...
		@args_construct

	}

	/**
	 * Get the view / contents that represent the component.
	 *
	 * @return \Illuminate\Contracts\View\View|\Closure|string
	 */
	public function render()
	{

		return view('@locate_render', [
			// properties...
			@args_render
		]);

	}

	/**
	 * Get component assets
	 *
	 * @param string|null  $key
	 * @return array|string
	 */
	public static function getAssets(string|null $key = null){

		return empty($key) ? self::$assets : (array_key_exists($key, self::$assets) ? self::$assets[$key] : false);

	}
}

现在我们可以清楚地观察到关键字 @command、@namespace、@class_name、@locate_css、@locate_js、@locate_render、@args_init、@args_params、@args_construct 和 @args_render

关键字 @command：生成相同组件的命令。
关键字 @namespace：命名空间。
关键字 @class_name：类名。
关键字 @locate_css：CSS 文件的路径。
关键字 @locate_js：JS 文件的路径。
关键字 @locate_render：渲染文件的路径。
关键字 @args_init：作为类属性的性质的参数初始化区域。
关键字 @args_params：在 __construct 方法中对参数进行结构化。
关键字 @args_construct：将参数分配给类属性。
关键字 @args_render：传递给渲染的数据。

您可以自定义关键词以返回所需的内容。例如

// file : '.\my_project\config\compio.php'
// ______________________________________
return [
	// code ...
			'template' => [
				'class' => [
					// code ...
					'keywords' => [
						'@command' => '--- My customize content ---' 
					]
				]
				// code ...
			]
	// code ...
]


// file : '.\my_project\app\View\Components\Path\MyComponent.php'
// ______________________________________________________________
<?php
--- My customize content ---
namespace App\View\Components\Path;

use Illuminate\View\Component;

class MyComponent extends Component
// code ...

在关键词中输入的任何文本都将替换模板文件中的相同关键词，但关键词可以包含回调函数，如下所示

'@command' => function(array $template_datas, array|null $arguments){
	return '--- My customize content ---';
}

具体来说，这里是回调函数的参数结构

// If you run the command :
	// php artisan compio:component Path/MyComponent string:my_string_type_argument="Default value" array:null:my_array_or_null_type_argument_2= my_argument_require_3
$template_datas = [
	'path' => [  // chemin des fichiers généré
		0 => [
			"dirname" => "C:\Users\...\my_project\app\View\Components\Path",
			"basename" => "MyComponent.php",
			"extension" => "php",
			"filename" => "MyComponent",
			"file" => "C:\Users\...\my_project\app\View\Components\Path\MyComponent.php"
		]
	],
	"template_file" => "C:\Users\...\my_project\vendor\dovetaily\compio\...", // Template file
	"generate" => true,
	"keywords" => [ // Keyword replaced in template file
		"@command" => function(array $template_datas, array|null $arguments){/*...*/},
		"@namespace" => "\Path",
		"@class_name" => "MyComponent",
		"@locate_css" => "\n\t\t\t'css\components\Path\MyComponent.css'\n\t\t",
		"@locate_css" => "\n\t\t\t'js\components\Path\MyComponent.js'\n\t\t",
		"@locate_render" => "components.Path.MyComponent",
		"@args_init" => "public $my_string_type_argument;\n\tpublic $my_array_or_null_type_argument_2;\n\tpublic $my_argument_require_3;",
		"@args_params" => "$my_argument_require_3, string $my_string_type_argument = \"Default value\", array|null $my_array_or_null_type_argument_2 = null",
		"@args_construct" => "$this->my_string_type_argument = $my_string_type_argument;\n\t\t$this->my_array_or_null_type_argument_2 = $my_array_or_null_type_argument_2;\n\t\t$this->my_argument_require_3 = $my_argument_require_3;",
		"@args_render" => "'my_string_type_argument' => $this->my_string_type_argument,\n\t\t\t'my_array_or_null_type_argument_2' => $this->my_array_or_null_type_argument_2,\n\t\t\t'my_argument_require_3' => $this->my_argument_require_3,"
	]
]
$arguments = [
	"string:my_string_type_argument" => "Default value",
	"array:null:my_array_or_null_type_argument_2" => "!##Be_null||", // \Compio\Component\Arguments::NULL_VALUE
	"my_argument_require_3" => null
]

`render` 模型

此模板的 Compio 配置值如下

return [
	// code ...
			'template' => [
				// code ...
				'render' => [
					'path' => getcwd() . '\resources\views\components',
					'file_extension' => 'blade.php',
					'short_path' => 'components',
					'template_file' => dirname(__DIR__) . '\resources\component\render.php',
					'generate' => true,
					'keywords' => [
						'@component_name',
						'@class_html',
					]
				]
			]
	// code ...
]

键 path（类型 string|array）：参考模板 class。
键 file_extension（类型 string）：定义文件的扩展名（它也可以在模板 class 中定义）。
键 short_path（类型 string）：它作为模板 class 中关键词 @locate_render 的快捷路径（在模板 class 中未使用）。
键 template_file（类型 string）：参考模板 class。
键 generate（类型 bool）：参考模板 class。
键 keywords（类型 array）：参考模板 class。

以下是默认模板文件（template_file）的示例

<!-- COMPONENT @component_name START -->
	<div class="@class_html">
		<!-- Content... -->
	</div>
<!-- COMPONENT @component_name STOP -->

在此模板文件中，包括 @component_name 和 @class_html 两个新关键词。

关键词 @component_name：组件名称与其路径合并。
关键词 @class_html：随机 HTML 类与组件名称合并。

让我们看看这些关键词包含什么

// If you run the command :
	// php artisan compio:component Path/MyComponent string:my_string_type_argument="Default value" array:null:my_array_or_null_type_argument_2= my_argument_require_3
$template_datas = [
	'path' => [  // chemin des fichiers généré
		// code ...
	],
	// code ...
	"keywords" => [ // Mot clé a remplacé dans le fichier du modèle
		"@namespace" => "PathMycomponent",
		"@class_name" => "path-mycomponent-72h4pk05",
	]
]
$arguments = [
	// code ...
]

`css` 模型

此模板的 Compio 配置值如下

return [
	// code ...
			'template' => [
				// code ...
				'css' => [
					'path' => getcwd() . '\public\css\components',
					'file_extension' => 'css',
					'short_path' => 'css\components',
					'template_file' => dirname(__DIR__) . '\resources\component\css.php',
					'generate' => true,
					'keywords' => [
						'@class_html',
					]
				]
			]
	// code ...
]

键 path（类型 string|array）：参考模板 class。
键 file_extension（类型 string）：参考模板 render。
键 short_path（类型 string）：它作为模板 class 中关键词 @locate_css 的快捷路径。
键 template_file（类型 string）：参考模板 class。
键 generate（类型 bool）：参考模板 class。
键 keywords（类型 array）：参考模板 class。

以下是默认模板文件（template_file）的外观

.@class_html{
	/*...*/
}
.z-1{ z-index: 1; }




/* ---- COLOR START ----  */

	@media (prefers-color-scheme: dark) {
		.@class_html{
			/*...*/
		}
	}

/* ---- COLOR STOP ---- */




/* ---- MEDIA SCREEN START ---- */
	...
	...
	...
/* ---- MEDIA SCREEN STOP ---- */

`js` 模型

此模板的 Compio 配置值如下

return [
	// code ...
			'template' => [
				// code ...
				'js' => [
					'path' => getcwd() . '\public\js\components',
					'file_extension' => 'js',
					'short_path' => 'js\components',
					'template_file' => dirname(__DIR__) . '\resources\component\js.php',
					'generate' => true,
					'keywords' => [
						'@class_html',
					]
				]
			]
	// code ...
]

键 path（类型 string|array）：参考模板 class。
键 file_extension（类型 string）：参考模板 render。
键 short_path（类型 string）：它作为模板 class 中关键词 @locate_js 的快捷路径。
键 template_file（类型 string）：参考模板 class。
键 generate（类型 bool）：参考模板 class。
键 keywords（类型 array）：参考模板 class。

以下是默认模板文件（template_file）的外观

// document.querySelector('.@class_html') ...

// (function($) {
//	// $('.@class_html') ...
// })(jQuery);

创建您自己的模板

创建模板非常简单，让我们先创建一个新的配置。要添加您自己的模板，您必须将其放置在键 component.config.template.my_template 中。

return [
	'component' => [
		'config' => [
			'template' => [
				'my_template' => [
					// required key
						'path' => string|array, // the storage location of the generated component
						'template_file' => string, // the template file
						'generate' => bool, // decide if the template should be generated
					// not required
						'keywords' => array, // the keywords to replace in template 
						'short_path' => string, // path shortcuts to template file or other
						'file_extension' => string, // the file extension of the generated template (`.php` by default)
				]
			]
		]
	]
]

按照此结构，您有创建自己的模板的可能性。如果您从现有模板的名称创建模板（例如 class、render、css 和 js），则将具有此模板的默认值。模板 class、render、css 和 js 由 Compio 自动生成，为了避免这种情况，您需要将其 generate 键设置为 false，如下所示

return [
	'component' => [
		'config' => [
			'template' => [
				'class' => ['generate' => false],
				'render' => ['generate' => false],
				'css' => ['generate' => false],
				'js' => ['generate' => false],
			]
			// code ...
		]
		// code ...
	]
]

深入了解关键词

您应该知道，您还可以创建自己的关键词 component.config.template.my_template.keywords.my_own_keyword 默认 keywords 已经有值，包括

// code ...
'keywords' => [
	'@command',
	'@namespace',
	'@class_name',
	'@locate_css',
	'@locate_js',
	'@locate_render',
	'@args_init',
	'@args_params',
	'@args_construct',
	'@args_render',
	'@component_name',
	'@class_html',
]
// code ...

当您创建关键词时，它将与 keywords 的默认值合并。

您还可以将参数作为关键词获取，如下所示 @args[argument key][string template] 在模板文本中，您可以写入任何内容并将其与参数信息组合

// If you run the command :
	// php artisan compio:component Path/MyComponent string:my_string_type_argument="Default value" array:null:my_array_or_null_type_argument_2= my_argument_require_3 

	// [argument key]
	// [0] string:my_string_type_argument="Default value"
	// [1] array:null:my_array_or_null_type_argument_2=
	// [2] my_argument_require_3 

'keywords' => [
	'@args[0][My first argument is "{--name--}"]', // Result : My first argument is "my_string_type_argument"
	'@args[1][My argument {--name--} is of type {--type--}]', // Result : My argument my_array_or_null_type_argument_2 is of type array|null
	'@args[2][The value of argument {--name--} is "{--value--}"]', // Result : The value of argument my_argument_require_3 is ""
	'@args[*][{--all--}]', // Result : string $my_string_type_argument = "Default value"; array|null $my_array_or_null_type_argument_2 = null; $my_argument_require_3;
	'@args[0][{--type-name--}]', // Result : string $my_string_type_argument
	'@args[1][{--name-value--}]', // Result : my_array_or_null_type_argument_2 = "Default value"
	'@args[1][{--all--}]', // Result : array|null $my_array_or_null_type_argument_2 = null
	'@args[*][{--name--}]', // Result : my_string_type_argument; my_array_or_null_type_argument_2; my_argument_require_3;
	'@args[*][name -> {--name--} type -> {--type--}]', // Result : name -> my_string_type_argument -> string; name -> my_array_or_null_type_argument_2 -> array|null; name -> my_argument_require_3 -> ;
]

现在让我们看看如何创建关键词。说明很简单，要有一个关键词，您必须遵守：1 - 正则表达式 /^@([a-z_]+.*|[a-z_]+|[a-z_])$/i 2 - 您的默认值必须是 string|closure 类型。闭包必须返回类型为 string|null 的值。示例

// code ...
	'component' => [
		'config' => [
			'template' => [
				'my_template' => [
					// code ...
					'keywords' => [ // the keywords to replace in the template
						'@command' => 'My own value', // Changing the default value of this keyword
						'@my_own_keyword', // defaut value `null`
						'@my_own_keyword_2' => function(array $template_datas, array|null $arguments){
							$result = null;
							// code ...
								// ... your runtime code
							return $result;
						}, // 
						'@my_own_keyword_3' => 'My value',
					],
					// code ...
				]
			]
		]
	]
// code ...

在多个组件中应用不同的配置

通过使用配置文件生成多个组件，您将为每个组件应用不同的配置。

return [
	// ...
	'component' => [
		'config' => [
			// ...
		],
		'datas' => [
			['name' => 'Path/MyComponent',
				'args' => [ /*...*/ ],
				'config' => [
					'template' =>
					[
						'class' => [
							// required key
								'path' => string|array, // the storage location of the generated component
								'template_file' => string, // the template file
								'generate' => bool, // decide if the template should be generated
							// not required
								'keywords' => array, // the keywords to replace in template 
								'short_path' => string, // path shortcuts to template file or other
								'file_extension' => string, // the file extension of the generated template (`.php` by default)
						]
					],
					'require_template' => true,
					'replace_component_exist' => false,
				]
			],
			['name' => 'Cards/Post/User',
				'args' => [ /*...*/ ],
				'config' => [
					// component config
				]
			],
			['name' => 'Shape/Ball']
		]
	]
];

dovetaily / compio

维护者

详细信息

README

描述

如何安装

第一种方法

第二种方法

完成安装

如何使用

1 - 使用控制台直接使用

文件 `my_project\app\View\Components\Path\MyComponent.php`

文件 `my_project\resources\views\components\Path\MyComponent.blade.php`

文件 `my_project\public\css\components\Path\MyComponent.css`

文件 `my_project\public\js\components\Path\MyComponent.js`

2 - 使用配置文件

A. 简单使用配置文件生成多个组件

B. 可能的 Compio 配置

键 `component.config.require_template`

键 `component.config.replace_component_exist`

模板键（《component.config.template》）

模板 `class`

`render` 模型

`css` 模型

`js` 模型

创建您自己的模板

深入了解关键词

在多个组件中应用不同的配置

dovetaily / compio

维护者

详细信息

README

描述

如何安装

第一种方法

第二种方法

完成安装

如何使用

1 - 使用控制台直接使用

文件 my_project\app\View\Components\Path\MyComponent.php

文件 my_project\resources\views\components\Path\MyComponent.blade.php

文件 my_project\public\css\components\Path\MyComponent.css

文件 my_project\public\js\components\Path\MyComponent.js

2 - 使用配置文件

A. 简单使用配置文件生成多个组件

B. 可能的 Compio 配置

键 component.config.require_template

键 component.config.replace_component_exist

模板键（《component.config.template》）

模板 class

render 模型

css 模型

js 模型

创建您自己的模板

深入了解关键词

在多个组件中应用不同的配置

文件 `my_project\app\View\Components\Path\MyComponent.php`

文件 `my_project\resources\views\components\Path\MyComponent.blade.php`

文件 `my_project\public\css\components\Path\MyComponent.css`

文件 `my_project\public\js\components\Path\MyComponent.js`

键 `component.config.require_template`

键 `component.config.replace_component_exist`

模板 `class`

`render` 模型

`css` 模型

`js` 模型