Comment créer et publier correctement un outil Deno CLI

Une chose intéressante à propos du framework Ember est qu’il dispose de la CLI Ember pour générer un composant, un modèle ou une route. C’est un gain de temps considérable, et plus encore, le ember generate componentgénère non seulement le composant mais également un fichier de test pour QUnit. Voyons comment créer un outil Deno CLI pour faire quelque chose de similaire pour React.

Dans ce didacticiel Deno, nous verrons comment créer un outil CLI Deno avec TypeScript, comment charger les dépendances à partir de la bibliothèque standard Deno. Nous allons explorer comment lire un répertoire et écrire un fichier. Enfin, nous apprendrons à publier notre module Deno sur GitHub et à l’exécuter directement à partir de cet emplacement, ainsi qu’à l’installer localement afin qu’il puisse fonctionner sans connexion.

Aperçu

L’outil CLI que nous allons construire dans ce tutoriel Deno acceptera un nom de composant transmis via la ligne de commande et générera un répertoire et un fichier avec le code d’un composant fonctionnel React.

J’en ai créé une version plus complète qui crée également une feuille de style SASS et un fichier de test adapté à Jest et Enzyme. Nous ajouterons bientôt plus de modèles de personnalisation et de composants (comme ceux utilisant des crochets, ou Redux, ou Router, ou tous).

Par souci de simplicité cependant, ce tutoriel Deno couvrira l’essentiel: lire les paramètres et écrire des fichiers et nous n’écrirons qu’un seul fichier. Le reste est de la manipulation de chaînes et plus d’écriture de contenu, rien de particulièrement spécial. Vous pouvez accéder à l’outil Deno CLI complet pour générer un composant React avec SASS et Jest dans le référentiel à la fin de cet article.

Installer Deno

Pour exécuter cet outil Deno CLI, vous devez avoir installé le runtime. Si vous utilisez déjà Homebrew sur macOS, vous pouvez rapidement installer Deno avec :

brew install deno

Si vous n’utilisez pas Homebrew, vous pouvez l’installer en utilisant CURL :

curl -fsSL https://deno.land/x/install/install.sh | sh

D’autres méthodes et systèmes d’installation sont décrits dans le manuel Deno.

Lire les paramètres de ligne de commande dans Deno

La chose la plus essentielle dont nous avons besoin pour notre générateur est de prendre le nom du composant. Nous devons être en mesure de transmettre le nom du composant à l’ outil Deno . Créez un répertoire et ajoutez un fichier appelé mod.tset collez-le dedans :

const { args: [name] } = Deno;
console.log( `Writing component ${ name }` );

Maintenant, lorsque vous ajoutez la Denovariable, vous recevrez probablement un avertissement, selon votre éditeur de code et sa prise en charge TypeScript, indiquant qu’il ne peut pas trouver le Denonom. Si vous êtes dans VS Code, vous pouvez résoudre ce problème en utilisant l’ extension officielle VS Code pour ajouter le support Deno. JetBrains a également publié un plugin pour fournir la prise en charge de Deno pour les IDE JetBrain.

Exécutez maintenant ce module avec :

deno run mod.tsBonjour le monde

Cela répondra avec le paramètre "HelloWorld" que nous avons passé :

Writing component HelloWorld

Agréable! Ça marche!

Écrire des fichiers avec Deno

Écrivons le fichier maintenant. Nous avons d’abord besoin de son contenu, alors ajoutez-le au mod.tsfichier. Nous utiliserons des littéraux de modèle JavaScript pour créer une seule chaîne et insérer le nom du composant et même appeler une méthode de chaîne pour la mettre en minuscule :

const compoContent: string = `import React from 'react';
import PropTypes from 'prop-types';

${name}.propTypes = {

};
function ${name}(props) {
    return();
}
export default ${name};
`;

Pour écrire ceci dans un fichier, nous devons d’abord vérifier si le répertoire existe. Nous utiliserons la ensureDirfonction, qui fait partie de la bibliothèque standard Deno, pour cela. Il créera le répertoire ou les répertoires s’ils n’existent pas. Pour indiquer à Deno d’utiliser cette dépendance, ajoutez simplement ceci en haut du fichier :

import { ensureDir } from "https://deno.land/std/fs/ensure_dir.ts";

Lorsque nous exécuterons notre outil, Deno téléchargera ce module pour l’utiliser. Il est enfin temps d’écrire le fichier en utilisant writeTestFile, une commande du runtime Deno. Collez ce qui suit à la fin du fichier :

Essai local

Nous avons fini de coder notre outil Deno CLI et nous pouvons maintenant le tester. Deno est conçu comme un environnement d’exécution sécurisé d’abord, de sorte que les opérations telles que la lecture du système de fichiers ou l’écriture sur celui-ci sont refusées par défaut. Vous devez demander explicitement à Deno d’autoriser l’accès au système de fichiers. Il est séparé en accès en lecture et en accès en écriture. Dans ce cas, nous avons besoin d’une autorisation de lecture, car nous devons ensureDird’abord lire le répertoire et vérifier s’il existe. Si ce n’est pas le cas, il le créera, puis nous créerons le fichier. Pour les deux dernières tâches, nous avons besoin d’une autorisation d’écriture. Voici donc comment vous pouvez l’exécuter :

deno --allow-read --allow-write mod.ts button

Et vous aurez les répertoires créés avec le fichier, tous relatifs au dossier dans lequel vous exécutez ceci, comme app/components/Button/index.js.

Publier un module Deno

Distribuer un module Deno est simple. Nous avons couvert cela en détail dans un article précédent sur la création et la publication d’un module Deno sur GitHub. Vous devez initialiser un dépôt git local :

git init

ajoutez et validez vos fichiers :

git add .
git commit -m "Initial commit"

créez un référentiel sur GitHub ou un service similaire, et poussez-le. Par exemple, si vous créez un référentiel nommé a-deno-modulesur GitHub, vous pouvez l’exécuter localement pour le mettre en ligne :

git remote add origin git@github.com:YOUR-GITHUB-USER/a-deno-module.git<br>git push -u origin master

Utiliser le module publié en ligne

Deno peut exécuter des modules directement depuis Internet et installer ses dépendances automatiquement. Maintenant qu’il est déployé, vous pouvez exécuter notre outil Deno CLI directement depuis GitHub :

deno run --allow-read --allow-write https://raw.githubusercontent.com/YOUR-GITHUB-USER/a-deno-module/master/mod.ts button

Deno téléchargera l’outil, vérifiera les dépendances et les installera si nécessaire. Le résultat sera le même que ci-dessus, il créera les répertoires et le fichier.

Pour éviter d’avoir à écrire tout ça (ou à le chercher dans le shell) Deno permet d’installer cet outil pour qu’il fonctionne hors ligne :

deno install --allow-read --allow-write --name denomodu https://raw.githubusercontent.com/YOUR-GITHUB-USER/a-deno-module/master/mod.ts

L’outil sera nommé denomodu. Cela consiste à créer un fichier exécutable avec la ligne de commande dans un certain répertoire, comme /Users/%your-username%/.deno/bindans macOS. Son contenu est la commande pour exécuter l’outil et accepter les paramètres :

#!/bin/sh

deno "run" "--allow-read" "--allow-write" "https://raw.githubusercontent.com/eliorivero/react-generate-component/master/mod.ts" "$@"

Ainsi, une fois le processus terminé, si vous n’avez pas ajouté le ./deno/binchemin d’accès à votre variable d’environnement PATH, Deno vous invitera à le faire afin que vous puissiez exécuter l’outil.

Une fois que vous avez ajouté le chemin à votre variable PATH, vous pouvez maintenant appeler l’outil :

denomodu button

C’est beaucoup plus court et maintenant ça marche sans être connecté à Internet. Toutes nos félicitations! Vous avez créé un outil Deno CLI, vous l’avez publié et installé localement.

Outil Deno CLI pour générer un composant React

Comme mentionné au début de ce tutoriel Deno, j’en ai créé une version plus complète, et vous pouvez accéder au dépôt de cet outil ici :

https://github.com/eliorivero/react-generate-component

C’est un seul module Deno créé sur TypeScript et crée ces fichiers :

• index.js, un composant fonctionnel React
• style.scss, sa feuille de style SASS
• test.js, un test simple utilisant Jest et Enzyme

Le gif ci-dessous montre comment cet outil Deno fonctionne après avoir été installé :

Il accepte les noms composés séparés par un tiret. Par exemple, passer nav-barcréera un composant nommé NavBar. Vous pouvez également spécifier un chemin de répertoire personnalisé autre que le chemin par défaut app/components, ou non, et continuer à utiliser le chemin par défaut.