Come creare e pubblicare correttamente uno strumento Deno CLI

Un aspetto interessante del framework Ember è che ha la CLI Ember per generare un componente, un modello o un percorso. È un grande risparmio di tempo e, ancora di più, ember generate componentgenera non solo il componente ma anche un file di test per QUnit. Vediamo come creare uno strumento Deno CLI per fare qualcosa di simile per React.

In questo tutorial Deno, vedremo come creare uno strumento CLI Deno con TypeScript, come caricare le dipendenze dalla libreria standard Deno. Esploreremo come leggere una directory e scrivere un file. Infine, impareremo a pubblicare il nostro modulo Deno su GitHub ed eseguirlo direttamente da quella posizione e anche a installarlo localmente in modo che possa funzionare senza connessione.

Panoramica

Lo strumento CLI che creeremo in questo tutorial di Deno accetterà un nome di componente passato attraverso la riga di comando e genererà una directory e un file con il codice per un componente funzionale di React.

Ho creato una versione più completa di questo che crea anche un foglio di stile SASS e un file di test adatto per Jest ed Enzyme. Presto verranno aggiunte più personalizzazioni e modelli di componenti (come quelli che usano hook, o Redux, o Router o tutti).

Per semplicità, però, questo tutorial di Deno tratterà gli elementi essenziali: leggere i parametri e scrivere i file e scriveremo un singolo file. Il resto è manipolazione di stringhe e più scrittura di contenuti, niente di particolarmente speciale. Puoi accedere allo strumento Deno CLI completo per generare un componente React con SASS e Jest nel repository alla fine di questo articolo.

Installa Deno

Per eseguire questo strumento Deno CLI, è necessario che il runtime sia installato. Se stai già utilizzando Homebrew su macOS, puoi installare rapidamente Deno con:

brew install deno

Se non stai usando Homebrew, puoi installarlo usando CURL:

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

Altri metodi e sistemi di installazione sono descritti nel Manuale Deno.

Leggi i parametri della riga di comando in Deno

La cosa più essenziale di cui abbiamo bisogno per il nostro generatore è prendere il nome del componente. Dobbiamo essere in grado di passare il nome del componente allo strumento Deno. Crea una directory e aggiungi un file chiamato mod.tse incollalo al suo interno:

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

Ora, quando aggiungi la Denovariabile, probabilmente riceverai un avviso, a seconda del tuo editor di codice e del suo supporto TypeScript, dicendo che non riesce a trovare il Denonome. Se sei in VS Code, puoi risolverlo usando l’ estensione ufficiale VS Code per aggiungere il supporto Deno. JetBrains ha anche pubblicato un plug-in per fornire il supporto Deno per gli IDE JetBrain.

Ora esegui questo modulo con:

deno run mod.tsCiao mondo

Questo risponderà con il parametro "HelloWorld" che abbiamo superato:

Writing component HelloWorld

Simpatico! Sta funzionando!

Scrivi file con Deno

Scriviamo ora il file. Per prima cosa abbiamo bisogno del contenuto, quindi aggiungilo al mod.tsfile. Utilizzeremo i valori letterali del modello JavaScript per creare una singola stringa e inserire il nome del componente e persino chiamare un metodo stringa per renderlo minuscolo:

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

${name}.propTypes = {

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

Per scriverlo in un file, dobbiamo prima verificare se la directory esiste. Useremo la ensureDirfunzione, parte della libreria standard Deno, per questo. Creerà la directory o le directory se non esistono. Per dire a Deno di usare questa dipendenza, aggiungi semplicemente questo nella parte superiore del file:

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

Quando eseguiamo il nostro strumento, Deno scaricherà questo modulo per usarlo. È finalmente il momento di scrivere il file usando writeTestFile, un comando nel runtime di Deno. Incolla quanto segue alla fine del file:

Prova locale

Abbiamo finito di codificare il nostro strumento Deno CLI e ora possiamo testarlo. Deno è costruito come un runtime sicuro, quindi operazioni come la lettura del filesystem o la scrittura su di esso sono negate per impostazione predefinita. Devi chiedere esplicitamente a Deno di consentire l’accesso al filesystem. È separato in accesso in lettura e accesso in scrittura. In questo caso, abbiamo bisogno del permesso di lettura, perché ensureDirprima è necessario leggere la directory e verificare se esiste. In caso contrario, lo creerà e quindi creeremo il file. Per le ultime due attività, abbiamo bisogno del permesso di scrittura. Quindi ecco come puoi eseguirlo:

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

E avrai le directory create insieme al file, tutte relative alla cartella in cui lo stai eseguendo, come app/components/Button/index.js.

Pubblica un modulo Deno

La distribuzione di un modulo Deno è semplice. Ne abbiamo parlato in dettaglio in un post precedente sulla creazione e pubblicazione di un modulo Deno su GitHub. Devi inizializzare un repository git locale:

git init

aggiungi e salva i tuoi file:

git add .
git commit -m "Initial commit"

crea un repository su GitHub o un servizio simile e invialo. Ad esempio, se crei un repository denominato a-deno-modulesu GitHub puoi eseguirlo localmente per inviarlo online:

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

Utilizza il modulo pubblicato online

Deno può eseguire moduli direttamente da Internet e installare automaticamente le sue dipendenze. Ora che è distribuito, puoi eseguire il nostro strumento Deno CLI direttamente da GitHub:

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

Deno scaricherà lo strumento, controllerà le dipendenze e le installerà se necessario. Il risultato sarà lo stesso di sopra, creerà le directory e il file.

Per evitare di dover scrivere tutto questo (o cercarlo nella shell) Deno ti consente di installare questo strumento in modo che funzioni offline:

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

Lo strumento si chiamerà denomodu. Quello che fa è creare un file eseguibile con la riga di comando in una determinata directory, come /Users/%your-username%/.deno/binin macOS. Il suo contenuto è il comando per eseguire lo strumento e accettare i parametri:

#!/bin/sh

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

Quindi, al termine del processo, se non hai aggiunto il ./deno/binpercorso alla variabile di ambiente PATH, Deno ti chiederà di farlo, in modo da poter eseguire lo strumento.

Dopo aver aggiunto il percorso alla variabile PATH, ora puoi invocare lo strumento:

denomodu button

È molto più breve e ora funziona senza essere connesso a Internet. Congratulazioni! Hai creato uno strumento Deno CLI, l’hai pubblicato e installato localmente.

Strumento Deno CLI per generare un componente React

Come accennato all’inizio di questo tutorial di Deno, ho creato una versione più completa di questo e puoi accedere al repository per questo strumento qui:

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

È solo un modulo Deno creato su TypeScript e crea questi file:

• index.js, un componente funzionale Reagire
• style.scss, il suo foglio di stile SASS
• test.js, un semplice test che utilizza Jest ed Enzyme

La gif qui sotto mostra come funziona questo strumento Deno dopo essere stato installato:

Accetta nomi composti separati da un trattino. Ad esempio, il passaggio nav-barcreerà un componente denominato NavBar. È inoltre possibile specificare un percorso di directory personalizzato diverso da quello predefinito app/componentso meno e continuare a utilizzare il percorso predefinito.