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.
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
.
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 !
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 !
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.
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/
Il y a deux façon d'utiliser Compio.
- 1 - Utilisation directe avec la console.
- 2 - Utilisation avec un fichier de configuration.
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
// 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éfautnull
. Si vous entrez vos argument dans l'entréePut your arguments :
, vous devez entrer la valeurnull
(comme ceciarray:null:my_array_or_null_type_argument_2=null
)my_argument_require_3
: Argument non typé obligatoire.
<!-- COMPONENT PathMycomponent START -->
<div class="path-mycomponent-f0ul3mey">
<!-- Content... -->
</div>
<!-- COMPONENT PathMycomponent STOP -->
.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 ---- */
// document.querySelector('.path-mycomponent-f0ul3mey') ...
// (function($) {
// // $('.path-mycomponent-f0ul3mey') ...
// })(jQuery);
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' => [
// ...
]
]
];
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 ...
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
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
estfalse
(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
esttrue
: 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.
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
estnull
(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 declass
) et vous devrez choisir quel modèle régénérer. - Si la clé
component.config.replace_component_exist
esttrue
: à chaque fois qu'un composant existe déjà, elle sera automatiquement Remplacer. - Si la clé
component.config.replace_component_exist
estfalse
: 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
Cette clé possède des modèles par défaut dont :
class
render
css
js
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
(typestring|array
) : c'est le dossier où les fichiers générés seront stockés. - La clé
template_file
(typestring
) : c'est le fichier modèle pour générer des composants (elle peut être un fichier .txt, .php,... ou autres). Et la fonctiondirname(__DIR__)
se trouve dans la classe de Compio. - La clé
generate
(typebool
) : si elle estfalse
, le modèle ne sera pas généré et si elle esttrue
ce sera le contraire. - La clé
keywords
(typearray
): 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
]
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
(typestring|array
) : se référer au modèleclass
. - La clé
file_extension
(typestring
) : définir l'extension de votre fichier (elle peut aussi être définie dans le modèleclass
). - La clé
short_path
(typestring
) : elle sert de chemin de raccourci pour le mot-clé@locate_render
dans le modèleclass
(ne sert pas dans le modèleclass
). - La clé
template_file
(typestring
) : se référer au modèleclass
. - La clé
generate
(typebool
) : se référer au modèleclass
. - La clé
keywords
(typearray
): se référer au modèleclass
.
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 ...
]
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
(typestring|array
) : se référer au modèleclass
. - La clé
file_extension
(typestring
) : se référer au modèlerender
. - La clé
short_path
(typestring
) : elle sert de chemin de raccourci pour le mot-clé@locate_css
dans le modèleclass
. - La clé
template_file
(typestring
) : se référer au modèleclass
. - La clé
generate
(typebool
) : se référer au modèleclass
. - La clé
keywords
(typearray
): se référer au modèleclass
.
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 ---- */
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
(typestring|array
) : se référer au modèleclass
. - La clé
file_extension
(typestring
) : se référer au modèlerender
. - La clé
short_path
(typestring
) : elle sert de chemin de raccourci pour le mot-clé@locate_js
dans le modèleclass
. - La clé
template_file
(typestring
) : se référer au modèleclass
. - La clé
generate
(typebool
) : se référer au modèleclass
. - La clé
keywords
(typearray
): se référer au modèleclass
.
Voici comment le fichier(template_file
) modèle par défaut se présente :
// document.querySelector('.@class_html') ...
// (function($) {
// // $('.@class_html') ...
// })(jQuery);
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 ...
]
]
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 ...
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']
]
]
];