Cómo crear y publicar correctamente una herramienta CLI de Deno

Una cosa interesante sobre el marco de Ember es que tiene la CLI de Ember para generar un componente, una plantilla o una ruta. Es un gran ahorro de tiempo, y aún más, ember generate componentgenera no solo el componente sino también un archivo de prueba para QUnit. Veamos cómo crear una herramienta Deno CLI para hacer algo similar para React.

En este tutorial de Deno, veremos cómo crear una herramienta CLI de Deno con TypeScript, cómo cargar dependencias desde la biblioteca estándar de Deno. Exploraremos cómo leer un directorio y escribir un archivo. Finalmente, aprenderemos a publicar nuestro módulo Deno en GitHub y ejecutarlo directamente desde esa ubicación y también a instalarlo localmente para que pueda funcionar sin conexión.

Visión general

La herramienta CLI que crearemos en este tutorial de Deno aceptará un nombre de componente pasado a través de la línea de comando y generará un directorio y un archivo con el código para un componente funcional de React.

Creé una versión más completa de esto que también crea una hoja de estilo SASS y un archivo de prueba adecuado para Jest y Enzyme. Pronto agregaremos más personalización y plantillas de componentes (como las que usan ganchos, Redux, Router o todos).

Sin embargo, en aras de la simplicidad, este tutorial de Deno cubrirá lo esencial: leer parámetros y escribir archivos y escribiremos un solo archivo. El resto es manipulación de cadenas y más escritura de contenido, nada particularmente especial. Puede acceder a la herramienta CLI de Deno completa para generar un componente React con SASS y Jest en el repositorio al final de este artículo.

Install Deno

Para ejecutar esta herramienta Deno CLI, debe tener instalado el tiempo de ejecución. Si ya usa Homebrew en macOS, puede instalar rápidamente Deno con:

brew install deno

Si no está usando Homebrew, puede instalarlo usando CURL:

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

Otros métodos y sistemas de instalación se describen en el Manual Deno.

Leer parámetros de línea de comandos en Deno

Lo más esencial que necesitamos para nuestro generador es tomar el nombre del componente. Necesitamos poder pasar el nombre del componente a la herramienta Deno . Cree un directorio y agregue un archivo llamado mod.tsy pegue esto en él:

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

Ahora, cuando agregue la Denovariable, probablemente recibirá una advertencia, dependiendo de su editor de código y su compatibilidad con TypeScript, diciendo que no puede encontrar el Denonombre. Si está en VS Code, puede resolver esto usando la extensión oficial de VS Code para agregar compatibilidad con Deno. JetBrains también ha publicado un complemento para brindar compatibilidad con Deno para los IDE de JetBrain.

Ahora ejecute este módulo con:

deno run mod.tsHola Mundo

Este responderá con el parámetro “HelloWorld" que le pasamos:

Writing component HelloWorld

¡Agradable! ¡Esta funcionando!

Escribir archivos con Deno

Vamos a escribir el archivo ahora. Primero necesitamos el contenido para ello, así que agréguelo al mod.tsarchivo. Haremos uso de literales de plantilla de JavaScript para crear una sola cadena e insertar el nombre del componente e incluso llamar a un método de cadena para ponerlo en minúsculas:

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

${name}.propTypes = {

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

Para escribir esto en un archivo, primero debemos verificar si el directorio existe. Usaremos la ensureDirfunción, parte de la biblioteca estándar de Deno, para esto. Creará el directorio o directorios si no existen. Para decirle a Deno que use esta dependencia, simplemente agregue esto en la parte superior del archivo:

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

Cuando ejecutemos nuestra herramienta, Deno descargará este módulo para utilizarlo. Finalmente es hora de escribir el archivo usando writeTestFile, un comando en el tiempo de ejecución de Deno. Pegue lo siguiente al final del archivo:

Prueba local

Hemos terminado de codificar nuestra herramienta Deno CLI y ahora podemos probarla. Deno está construido como un primer tiempo de ejecución seguro, por lo que las operaciones como leer el sistema de archivos o escribir en él se niegan de forma predeterminada. Debe pedirle explícitamente a Deno que permita el acceso al sistema de archivos. Está separado en acceso de lectura y acceso de escritura. En este caso, necesitamos permiso de lectura, porque ensureDirprimero hay que leer el directorio y comprobar si existe. Si no lo hace, lo creará y luego crearemos el archivo. Para las dos últimas tareas, necesitamos permiso de escritura. Así es como puedes ejecutarlo:

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

Y tendrá los directorios creados junto con el archivo, todos relacionados con la carpeta donde está ejecutando esto, como app/components/Button/index.js.

Publicar un módulo Deno

Distribuir un módulo Deno es simple. Cubrimos esto en detalle en una publicación anterior sobre la creación y publicación de un módulo Deno en GitHub. Debe inicializar un repositorio git local:

git init

agregue y confirme sus archivos:

git add .
git commit -m "Initial commit"

cree un repositorio en GitHub o un servicio similar y empújelo. Por ejemplo, si crea un repositorio con un nombre a-deno-moduleen GitHub, puede ejecutarlo localmente para publicarlo en línea:

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

Utilice el módulo publicado en línea

Deno puede ejecutar módulos directamente desde Internet e instalar sus dependencias automáticamente. Ahora que está implementada, puede ejecutar nuestra herramienta Deno CLI directamente desde GitHub:

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

Deno descargará la herramienta, verificará las dependencias y las instalará si es necesario. El resultado será el mismo que el anterior, creará los directorios y el archivo.

Para evitar tener que escribir todo eso (o buscarlo en el shell) Deno te permite instalar esta herramienta para que funcione sin conexión:

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

La herramienta se llamará denomodu. Lo que hace esto es crear un archivo ejecutable con la línea de comando en un directorio determinado, como /Users/%your-username%/.deno/binen macOS. Su contenido es el comando para ejecutar la herramienta y aceptar parámetros:

#!/bin/sh

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

Entonces, cuando finalice el proceso, si no ha agregado la ./deno/binruta a su variable de entorno PATH, Deno le pedirá que lo haga para que pueda ejecutar la herramienta.

Una vez que agregue la ruta a su variable PATH, ahora puede invocar la herramienta:

denomodu button

Es mucho más corto y ahora funciona sin estar conectado a Internet. ¡Felicidades! Creó una herramienta CLI de Deno, la publicó y la instaló localmente.

Herramienta Deno CLI para generar un componente React

Como se mencionó al comienzo de este tutorial de Deno, creé una versión más completa de esto, y puede acceder al repositorio de esta herramienta aquí:

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

Es solo un módulo Deno creado en TypeScript y crea estos archivos:

• index.js, un componente funcional de React
• style.scss, su hoja de estilo SASS
• test.js, una prueba simple usando Jest y Enzyme

El siguiente gif muestra cómo funciona esta herramienta Deno después de instalarla:

Acepta nombres compuestos separados por un guión. Por ejemplo, pasar nav-barcreará un componente llamado NavBar. También puede especificar una ruta de directorio personalizada que no sea la predeterminada app/components, o no, y continuar usando la ruta predeterminada.