Générer les vues avec la commande generate

20 min

Générer les vues avec la commande generate

La commande views generate permet de générer les vues de l’application à partir des fichiers de configuration YAML.

Elle lit les fichiers de configuration présents dans le dossier config/views, vérifie les fichiers de transition associés dans le dossier transitions, puis génère les fichiers nécessaires au fonctionnement des vues côté client et côté serveur.

Afficher l’aide de la commande

Pour afficher l’aide de la commande generate, utilisez la commande suivante :

oip-tools views generate -h

ou :

oip-tools views generate --help

Utilisation

oip-tools views generate

Options disponibles

Option	Type	Valeur par défaut	Description
--clean-unused-files	boolean	false	Supprime les fichiers générés qui ne sont plus utilisés.
--ext-file-backend	string	mjs	Définit l’extension des fichiers serveur générés.
--gen-test-files	boolean	true	Active ou désactive la génération des fichiers de tests des vues.
--tree-structure	string	standard	Définit l’arborescence générée pour les vues situées dans des sous-dossiers. Valeurs possibles : legacy, standard.
--gen-secure-resolvers	boolean	false	Sécurise les resolvers GraphQL générés.

Exemple d’utilisation

oip-tools views generate --ext-file-backend mjs

Dans cet exemple, la commande génère les vues en utilisant l’extension .mjs pour les fichiers serveur générés.

Ajouter le script de génération

Il est recommandé d’ajouter un script dédié dans le fichier package.json afin de simplifier l’exécution de la commande.

{ "scripts": { "build:views": "oip-tools views generate" } }

La génération des vues peut ensuite être lancée avec :

yarn build:views

ou :

npm run build:views

Fonctionnement général

La commande views generate s’appuie sur deux éléments principaux :

les fichiers de configuration des vues ;

les fichiers de transition associés aux vues.

Les fichiers de configuration des vues sont attendus dans le dossier suivant :

config/views

Les fichiers de transition sont attendus dans le dossier suivant :

transitions

Chaque vue configurée doit disposer des éléments nécessaires à sa génération, notamment un identifiant de vue, un chemin d’accès, un dossier cible, des actions et, si nécessaire, une configuration GraphQL.

Si un fichier de transition associé à une vue est absent ou invalide, la génération retourne une erreur.

Fichiers de configuration des vues

Un fichier YAML est attendu pour chaque vue.

Par convention, le nom du fichier correspond à l’identifiant unique de la vue. Il peut être préfixé par deux chiffres afin d’indiquer l’ordre d’apparition de la vue dans le parcours.

Exemple :

Project Root/ └── config/ └── views/ ├── 00-home.yml ├── 01-customer.yml └── 02-company.yml

Structure d’un fichier de configuration

Le fichier de configuration d’une vue peut contenir les propriétés suivantes :

Propriété	Description
viewId	Identifiant unique de la vue.
pathname	Chemin de la vue dans l’URL.
directory	Nom du dossier dans lequel générer le code de la vue.
actions	Liste des actions disponibles dans la vue.
graphql	Définition des queries, mutations ou subscriptions GraphQL utilisées par la vue.
testFile	Active ou désactive la génération du fichier de test pour la vue.

Exemple de configuration YAML

customer: viewId: customer pathname: /customer directory: customer actions: - NEXT - PREVIOUS graphql: queries: - type: Customer fields: firstName: String lastName: String - type: GetCustomers fields: customers: "[Customer]" resolver: getCustomers

mutations: - type: Customer inputs: firstName: String lastName: String resolver: createCustomer

Fichiers générés

Après exécution de la commande, une vue peut générer une structure de fichiers de ce type :

Project Root/ └── views/ └── customer/ ├── client/ │ ├── graphql/ │ │ ├── mutations/ │ │ │ └── CreateCustomerMutation.js │ │ └── queries/ │ │ └── GetCustomersQuery.js │ ├── hooks/ │ │ ├── useCreateCustomerMutationQuery.js │ │ └── useGetCustomersQuery.js │ └── Customer.jsx └── server/ └── graphql/ ├── resolver/ │ ├── createCustomer.mjs │ ├── getCustomers.mjs │ └── index.mjs └── type/ ├── MutationType.mjs ├── QueryType.mjs └── queryTypeResolvers.mjs

Structure de génération

La structure des fichiers générés dépend de l’option --tree-structure.

Par défaut, la valeur utilisée est :

standard

L’option accepte également la valeur :

legacy

Cette option permet d’adapter l’organisation des fichiers générés selon la structure attendue par le projet.

Structure standard

La structure standard est utilisée par défaut.

views/ └── some-dir/ └── my-view/ ├── client/ │ └── ... └── server/ └── ...

Structure legacy

La structure legacy organise les fichiers client et serveur dans des dossiers séparés.

views/ └── some-dir/ ├── client/ │ └── my-view/ │ └── ... └── server/ └── my-view/ └── ...

Sécurisation des resolvers GraphQL

L’option --gen-secure-resolvers permet de sécuriser les resolvers GraphQL générés.

Lorsque cette option est activée, seuls les resolvers associés à la vue actuelle du contexte de l’application peuvent être appelés.

Fichiers générés à ne pas modifier

De nombreux fichiers générés par cette commande ne doivent pas être modifiés directement.

Ces fichiers sont identifiés grâce au commentaire d’en-tête suivant :

Code generated by gen. DO NOT EDIT.

Tout fichier contenant cet en-tête doit être considéré comme généré automatiquement. Il peut être écrasé lors d’une prochaine génération.

Remarques

La commande views generate doit être relancée à chaque modification significative des fichiers YAML de configuration.

Si l’option --clean-unused-files est activée, les fichiers générés qui ne sont plus utilisés peuvent être supprimés automatiquement lors de la génération.

Si l’option --gen-test-files est désactivée, les fichiers de tests ne sont pas générés.

Avant de lancer la génération, vérifiez que chaque vue dispose bien d’un fichier de configuration dans config/views et d’un fichier de transition associé dans transitions.