gedeontimothy/README_COMPIO_FR.md

## README_COMPIO_FR.md

      
    Raw
  

              README_COMPIO_FR.md
            
          
    Compio

Déscrption

Compio est un générateur de composants avancé. Il fonctionne temporairement uniquement sur Laravel avec Artisan (CLI) en générant des composants Blade, mais vous pouvez le personnaliser pour générer des composants à partir d'autres moteurs de modèles tels que Twig ou VueJs ou autres.
Comment l'installer

Après avoir créé votre projet laravel vous avez "Deux méthodes" pour installer Compio
Les deux méthodes sont les suivantes :

	Première méthode : Ajouter un code dans le fichier ./composer.json.
	Seconde méthode : Ajouter un code dans le fichier ./app/Console/Kernel.php.

Première méthode

Dans votre fichier ./composer.json vous devez coller ceci :
"Compio\\ComposerScripts::postAutoloadDump"
Copiez-le et collez-le dans votre fichier ./composer.json dans la clé(ou proriété) scripts.post-autoload-dump.
Vous devez le coller comme ceci :
{
	// code ...
	"scripts": {
		// code ...
		"post-autoload-dump": [
			// code ...
			"Compio\\ComposerScripts::postAutoloadDump"
		]
		// code ...
	}
	// code ...
}
En dernier, exécuter la commande suivante dans votre projet :
$ 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 !
  ...
Si le script Compio\\ComposerScripts::postAutoloadDump a bien abouti vous verrez dans votre fichier ./app/Console/Kernel.php une ligne de code ressemblant à ceci :
require_once getcwd() . '\vendor\dovetaily\compio\src\Environments\Laravel\...';
Si vous n'avez pas cette ligne de code dans votre fichier ./app/Console/Kernel.php, assurez-vous que la méthode commands existe et qu'il y a cette ligne de code require base_path('routes/console.php'); et ensuite ré-exécuter la commande composer dump-autoload dans la console.
Si en tout et pour tout votre fichier n'a toujours pas ajouté ceci require_once getcwd() . '\vendor\dovetaily\compio\src\Environments\Laravel\...';, alors essayez avec la seconde méthode.
Si tout se passe bien un fichier de configuration de Compio avec le minimum de configuration possible sera créé. Voici le contenu de ce fichier de configuration :
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' => [
		]
	]
];
Tout ce qui concerne la personnalisation des générations des composants se fera dans ce fichier de configuration et sera expliqué plus tard.
Terminer pour la Première méthode !
Seconde méthode

Dans cette deuxième méthode, vous allez coller le code correspondant à votre version Laravel dans votre fichier ./app/Console/Kernel.php dans la méthode commands.
# For larvel >=5.5
require_once getcwd() . '\vendor\dovetaily\compio\src\Environments\Laravel\V_sup_eq_5_5\resources\routes.commands.php';
Votre fichier ./app/Console/Kernel.php ressemblera à ceci :
# 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 ...
    }

}
Terminer pour la Seconde méthode !
Conclusion de l'installation

Si vous essayez l'une des deux méthodes ou les deux, exécutez la commande artisan list de la manière suivante pour confirmer que Compio marche :
$ php artisan list
Laravel Framework ...

Usage:
  ...

Options:
  ...

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

Et vous verrez la commande de Compio dans la liste des commandes disponible.
Si vous avez essayé les deux méthodes et que vous n'avez pas ce résultat, alors veuillez vérifier votre version Laravel si elle est conforme aux versions supporter par Compio.
How to use

Compio est très facile à utiliser.
Quand Compio génère un composant elle crée par défaut 4 modèle de fichier dont :

	Un fichier pour la class php dans le dossier ./app/View/Components/
	Un fichier pour le rendu(Blade par defaut) dans le dossier ./resources/views/components/
	Un fichier js dans le dossier ./public/js/components/
	Un fichier css dans le dossier ./public/css/components/

Cependant, vous pouvez personnaliser les chemins de dossiers ou sélectionner le modèle généré ou plus, créer vos propres modèles générés.
Il y a deux façon d'utiliser Compio.

	1 - Utilisation directe avec la console.
	2 - Utilisation avec un fichier de configuration.

1 Utilisation directe avec la console

Voyons la commande de Compio en profondeur.
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
L'utilisation de la commande se présente comme ceci :
$ php artisan compio:component [<component_name> [<args>...]]

	<name> : Le nom de votre composant, selon l'expression régulière /^[a-z_]+[a-z0-9\/_]+$|^[a-z_]$/i (ou encore /^\#([a-z]+)\|([^|]+)$/i mais cette expression sera vu dans l'utilisation avec un fichier de configuration)
	<arguments> : Les arguments de votre class et cette entrée n'est pas obligatoire, vous pouvez ne pas le mettre.

Ulistrons tout ça par l'exemple ci-dessus :
$ 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 !
La commande 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 reçoit toutes les informations du composant sur une seule ligne, mais vous pouvez l'exécuter aussi de la manière suivantes :
$ 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 !
Voyons les fichiers générés
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.
	 *
	 * @retturn \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
	 *
	 * @retturn 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);

	}
}
Sur la ligne suivante :
# 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 ...
Analysons les arguments généré :

	string:my_string_type_argument="Default value" : Argument typé avec une valeur par défaut.
	array:null:my_array_or_null_type_argument_2= : Argument typé avec comme valeur par défaut null. Si vous entrez vos argument dans l'entrée Put your arguments :, vous devez entrer la valeur null (comme ceci array:null:my_array_or_null_type_argument_2=null)
	my_argument_require_3 : Argument non typé obligatoire.

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 Utilisation avec un fichier de configuration

Dans cette section, nous utiliserons les données d'un fichier de configuration.
Lors de l'installation de Compio quand tous se passent bien, elle génère un fichier de configuration ./my_project/config/compio.php si elle n'est pas créer veuillez le créée, et pour configuré ce qui touche aux generations des composants, ajoutez la clé component et à l'intérieur vous y ajouterez la clé config et pour un rendu minimum de la configuration, elle donnera ceci :
return [
	// ...
	'component' => [
		'config' => [
			// ...
		]
	]
];
A. Utiliser simplement le fichier de configuration pour générer plusieurs composants

Donc nous avons component.config, et avant de voir les configurations possibles de compio dans le point 'B', nous verrons en premier comment générer plusieurs composants à la fois. Veuillez ajouter la clé où sera stocké la liste de vos composants à généré, elle peut être nommée comme vous le voudrez mais ne peut pas contenir le symbole |. Donc pour un exemple nous ajouterons la clé datas et la structure deviendra component.datas. Et nous allons y mettre nos composants.
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, // valeur par défaut `null`
					'my_argument_require_3' => null // Argument obligatoire
				]
			],
			['name' => 'Cards/Post/User',
				'args' => [
					'string:title' => null, // Argument obligatoire
					'string:null:description' => \Compio\Component\Arguments::NULL_VALUE, // valeur par défaut `null`
					'array:string:image' => ['http://my.cdn.com/img/21128376.jpg', 'http://my_cdn.com/img/44837110.jpg'], // valeur par défaut un tableau
					'int:null:like' => \Compio\Component\Arguments::NULL_VALUE,  // valeur par défaut `null`
					'\Illuminate\Contracts\View\View:\Closure:string:null:more' => \Compio\Component\Arguments::NULL_VALUE  // valeur par défaut `null`
				]
			],
			['name' => 'Shape/Ball']
		]
	]
];
Maintenant que le fichier de configuration a des composants à générer, nous allons exécuter la commande suivante php artisan compio:component "#config|[config_keys]". L'entrée [config_keys] sera le chemin de configuration vers la clé des composants comme quand nous utilisons la fonction helper config([config_keys]) de Laravel :
$ 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 !
À savoir, nous allons voir les paramètres(arguments) de la méthode __construct du composant Cards/Post/User pour comprendre les valeurs par défaut des arguments :
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, // Argument obligatoire
		string|null $description = null, // '...description' => \Compio\Component\Arguments::NULL_VALUE, // valeur par défaut `null`
		int|null $like = null, // '...like' => \Compio\Component\Arguments::NULL_VALUE, // valeur par défaut `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. Les configurations possibles de compio

Voici les clés principales de compio pour une bonne gestion personnelle de la librarie :
return [
	// ...
	'component' => [
		'config' => [
			'template' => [
				'class' => [
					// code ...
				],
				'render' => [
					// code ...
				],
				'css' => [
					// code ...
				],
				'js' => [
					// code ...
				]
			],
			'require_template' => false,
			'replace_component_exist' => null,
		]
	]
]
Comme vous avez pu le remarquer, quand vous générez un composant, il y a quatre fichiers qui sont créés et ces fichiers correspondent au nombre de modèle qu'il y a dans component.config.template(class, render, css et js).
Avant de voir comment Ajouter, Arrêter ou Modifier des modèles, nous verrons d'abord les clés component.config.require_template et component.config.replace_component_exist
La clé component.config.require_template

Quand vous exécutez une commande pour générer un composant, elle ne vous demande pas quel modèle généré, elle génère automatiquement 4 fichiers modèles prédéfinis par Compio.
La clé component.config.require_template accepte que les valeurs de type : bool

Si la clé component.config.require_template est false (valeur par défaut de la clé) : vous n'avez aucun moyen de choisir quel modèle généré.
Si la clé component.config.require_template est true : vous pouvez choisir quel modèle généré.

Nous allons voir un exemple quand la clé component.config.require_template est true.
'require_template' => true,
Et dans la console
$ 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 !
Et voilà quand pour la clé 'require_template' => true. Quand elle est false, le processus de génération se fera comme dans les exemples plus au-dessus.
La clé component.config.replace_component_exist

Cette clé nous offre un moyen de Remplacer, Ignorer ou Choisir, un composant qui existe déjà.
La clé component.config.replace_component_exist accepte que des valeurs de type : bool|null

Si la clé component.config.replace_component_exist est null (valeur par défaut de la clé): pendant le processus elle vous demandera de Choisir si vous voulez régénérer le composant (elle vous le demandera seulement si elle trouve le modèle de class) et vous devrez choisir quel modèle régénérer.
Si la clé component.config.replace_component_exist est true : à chaque fois qu'un composant existe déjà, elle sera automatiquement Remplacer.
Si la clé component.config.replace_component_exist est false : Si un composant existe déjà, elle sera automatiquement Ignorer(ce composant ne sera pas régénéré).

Exemple si component.config.replace_component_exist est 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 !
Exemple si component.config.replace_component_exist est 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 !
Exemple si component.config.replace_component_exist est 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 !
Vous pouvez aussi le configurer directement sur la ligne de commande avec l'option --replace.
$ php artisan compio:component Path/MyComponent --replace=true
La clé des modèles (component.config.template)

Cette clé possède des modèles par défaut dont :

	class
	render
	css
	js

Le modèle class

Les valeurs de configuration de Compio pour ce modèle sont :
return [
	// code ...
			'template' => [
				'class' => [
					'path' => getcwd() . '\app\View\Components',
					'template_file' => dirname(__DIR__) . '\resources\component\class.php',
					'generate' => true,
					'keywords' => [
						'@command',
						'@namespace',
						'@class_name',
						'@locate_css',
						'@locate_js',
						'@locate_render',
						'@args_init',
						'@args_params',
						'@args_construct',
						'@args_render',
					]
				]
			]
	// code ...
]

La clé path (type string|array) : c'est le dossier où les fichiers générés seront stockés.
La clé template_file (type string) : c'est le fichier modèle pour générer des composants (elle peut être un fichier .txt, .php,... ou autres). Et la fonction dirname(__DIR__) se trouve dans la classe de Compio.
La clé generate (type bool) : si elle est false, le modèle ne sera pas généré et si elle est true ce sera le contraire.
La clé keywords (type array): ce sont les mots-clé retrouver dans le fichier modèle (vous verrez leur utilité dans le fichier du modèle).

Voici comment le fichier(template_file) modèle par défaut se présente :
<?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.
	 *
	 * @retturn \Illuminate\Contracts\View\View|\Closure|string
	 */
	public function render()
	{

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

	}

	/**
	 * Get component assets
	 *
	 * @retturn 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);

	}
}
Nous observons maintenant clairement les mots-clés @command, @namespace, @class_name, @locate_css, @locate_js, @locate_render, @args_init, @args_params, @args_construct et @args_render

Le mot-clé @command : la commande permettant de générer le même composant.
Le mot-clé @namespace : l'espace de nom.
Le mot-clé @class_name : Le nom de la classe.
Le mot-clé @locate_css : le chemin du fichier css.
Le mot-clé @locate_js : le chemin du fichier js.
Le mot-clé @locate_render : le chemin vers le fichier de rendu.
Le mot-clé @args_init : la zone d'initialisation des arguments en propriété de la classe.
Le mot-clé @args_params : structuration des arguments dans la methode __construct.
Le mot-clé @args_construct : affectation des arguments dans les propriétés de la classe.
Le mot-clé @args_render : données à passer au rendu.
Vous pouvez personnaliser les mots-clés pour qu'elle renvoit ce dont vous avez besoin.
Exemple :

// 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 ...
Tout ce que vous mettrez comme text dans un mot-clé sera remplacé dans le même mot-clé se trouvant dans le fichier modèle, mais le mot-clé peut contenir une fonction de rappel, comme ceci :
'@command' => function(array $template_datas, array|null $arguments){
	return '--- My customize content ---';
} 
À savoir, voici la structure des arguments de la fonction de rappel :
// Si vous exectuer la commande :
	// 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\...", // fichier du modèle
	"generate" => true,
	"keywords" => [ // Mot clé a remplacé dans le fichier du modèle
		"@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
]
Le modèle render

Les valeurs de configuration de Compio pour ce modèle sont :
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 ...
]

La clé path (type string|array) : se référer au modèle class.
La clé file_extension (type string) : définir l'extension de votre fichier (elle peut aussi être définie dans le modèle class).
La clé short_path (type string) : elle sert de chemin de raccourci pour le mot-clé @locate_render dans le modèle class (ne sert pas dans le modèle class).
La clé template_file (type string) : se référer au modèle class.
La clé generate (type bool) : se référer au modèle class.
La clé keywords (type array): se référer au modèle class.

Voici comment le fichier(template_file) modèle par défaut se présente :
<!-- COMPONENT @component_name START -->
	<div class="@class_html">
		<!-- Content... -->
	</div>
<!-- COMPONENT @component_name STOP -->
Dans ce fichier modèle, il y a deux nouveaux mots-clés dont @component_name et @class_html.

Le mot-clé @component_name : le nom du composant fusionné avec son chemin.
Le mot-clé @class_html : une classe HTML aléatoire fusionné avec le nom du composant.

Voyons ce que ces mots-clés contiennent :
// Si vous exectuer la commande :
	// 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 ...
]
Le modèle css

Les valeurs de configuration de Compio pour ce modèle sont :
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 ...
]

La clé path (type string|array) : se référer au modèle class.
La clé file_extension (type string) : se référer au modèle render.
La clé short_path (type string) : elle sert de chemin de raccourci pour le mot-clé @locate_css dans le modèle class.
La clé template_file (type string) : se référer au modèle class.
La clé generate (type bool) : se référer au modèle class.
La clé keywords (type array): se référer au modèle class.

Voici comment le fichier(template_file) modèle par défaut se présente :
.@class_html{
	/*...*/
}
.z-1{ z-index: 1; }


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

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

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


/* ---- MEDIA SCREEN START ---- */
	...
	...
	...
/* ---- MEDIA SCREEN STOP ---- */
Le modèle js

Les valeurs de configuration de Compio pour ce modèle sont :
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 ...
]

La clé path (type string|array) : se référer au modèle class.
La clé file_extension (type string) : se référer au modèle render.
La clé short_path (type string) : elle sert de chemin de raccourci pour le mot-clé @locate_js dans le modèle class.
La clé template_file (type string) : se référer au modèle class.
La clé generate (type bool) : se référer au modèle class.
La clé keywords (type array): se référer au modèle class.

Voici comment le fichier(template_file) modèle par défaut se présente :
// document.querySelector('.@class_html') ...

// (function($) {
//	// $('.@class_html') ...
// })(jQuery);
Créer vos propres modèles

La création des modèles est très simple, commençons par faire une nouvelle configuration.
Pour ajouter votre propre modèle, vous devez le placer dans la clé component.config.template.my_template
return [
	'component' => [
		'config' => [
			'template' => [
				'my_template' => [
					// clé obligatoire
						'path' => string|array, // l'emplacement de stockage du composant généré
						'template_file' => string, // le fichier modèle
						'generate' => bool, // decide si le modèle doit être généré
					// non obligatoire
						'keywords' => array, // les mots-clé à remplacer dans le modèle
						'short_path' => string, // raccourcis du chemin vers le fichier modèle ou autre
						'file_extension' => string, // l'extension du fichier du modèle généré (`.php` par defaut)
				]
			]
		]
	]
]
En suivant cette structure vous avez la possibilité de créer vos propres modèles.
Si vous créez un modèle à partir du nom des templates qui existe déjà (ex class, render, css et js), vous aurez les valeurs par défaut de ce modèle.
Les modèles class, render, css et js sont automatiquement générés par compio, pour empêcher cela, vous devrez définir leur clé generate sur la valeur false, comme ceci :
return [
	'component' => [
		'config' => [
			'template' => [
				'class' => ['generate' => false],
				'render' => ['generate' => false],
				'css' => ['generate' => false],
				'js' => ['generate' => false],
			]
			// code ...
		]
		// code ...
	]
]
Les keywords en profondeur

Vous devez savoir que vous pouvez aussi créer vos propres mots-clés component.config.template.my_template.keywords.my_own_keyword
Par défaut keywords a déjà des valeurs dont :
// 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 ...
Et quand vous créez votre mot-clé, elle sera fusionné avec la valuer par défaut de keywords.
Vous pouvez aussi obtenir vos arguments sous forme de mot-clé, de la manière suivante @args[argument key][string template]
Dans le texte du modèle vous pouvez écrire ce dont vous voulez et le combiner avec les informations de l'argument :
// Si vous exectuer la commande :
	// 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--}"]', // Resultat : My first argument is "my_string_type_argument"
	'@args[1][Mon argument {--name--} est de type {--type--}]', // Resultat : Mon argument my_array_or_null_type_argument_2 est de type array|null
	'@args[2][La valeur de l\'argument {--name--} est "{--value--}"]', // Resultat : La valeur de l'argument my_argument_require_3 est ""
	'@args[*][{--all--}]', // Resultat : 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--}]', // Resultat : string $my_string_type_argument
	'@args[1][{--name-value--}]', // Resultat : my_array_or_null_type_argument_2 = "Default value"
	'@args[1][{--all--}]', // Resultat : array|null $my_array_or_null_type_argument_2 = null
	'@args[*][{--name--}]', // Resultat : my_string_type_argument; my_array_or_null_type_argument_2; my_argument_require_3;
	'@args[*][name -> {--name--} type -> {--type--}]', // Resultat : name -> my_string_type_argument -> string; name -> my_array_or_null_type_argument_2 -> array|null; name -> my_argument_require_3 -> ;
]
Voyons maintenant comment créer un mot-clé.
Les consignes sont simples pour avoir un mot-clé vous devez respecter :
1 - L'expression régulière /^@([a-z_]+.*|[a-z_]+|[a-z_])$/i
2 - La valeur de votre valeur par défaut doit être de type string|closure. La closure doit retourner une valeur de type string|null.
Exemple :
// code ...
	'component' => [
		'config' => [
			'template' => [
				'my_template' => [
					// code ...
					'keywords' => [ // les mots-clé à remplacer dans le modèle
						'@command' => 'My own value', // Changement de la valeur par defaut de ce mot-clé
						'@my_own_keyword', // Valeur par defaut `null`
						'@my_own_keyword_2' => function(array $template_datas, array|null $arguments){
							$result = null;
							// code ...
								// ... votre propre traitement des données
							return $result;
						}, // 
						'@my_own_keyword_3' => 'My value',
					],
					// code ...
				]
			]
		]
	]
// code ...
Appliquer differentes configurations dans plusieurs composants

En utilisant le fichier de configuration pour générer plusieurs composants, vous pourrez appliquer différentes configurations pour chacune d'entre elles.
return [
	// ...
	'component' => [
		'config' => [
			// ...
		],
		'datas' => [
			['name' => 'Path/MyComponent',
				'args' => [ /*...*/ ],
				'config' => [
					// clé obligatoire
						'path' => string|array, // l'emplacement de stockage du composant généré
						'template_file' => string, // le fichier modèle
						'generate' => bool, // decide si le modèle doit être généré
					// non obligatoire
						'keywords' => array, // les mots-clé à remplacer dans le modèle
						'short_path' => string, // raccourcis du chemin vers le fichier modèle ou autre
						'file_extension' => string, // l'extension du fichier du modèle généré (`.php` par defaut)
				]
			],
			['name' => 'Cards/Post/User',
				'args' => [ /*...*/ ],
				'config' => [
					// component config
				]
			],
			['name' => 'Shape/Ball']
		]
	]
];