Como criar e publicar corretamente uma ferramenta Deno CLI

Uma coisa legal sobre o framework Ember é que ele tem a CLI do Ember para gerar um componente, um template ou uma rota. É uma grande economia de tempo e, mais ainda, ember generate componentgera não apenas o componente, mas também um arquivo de teste para o QUnit. Vamos ver como criar uma ferramenta Deno CLI para fazer algo semelhante para React.

Neste tutorial do Deno, veremos como criar uma ferramenta Deno CLI com TypeScript, como carregar dependências da biblioteca padrão do Deno. Vamos explorar como ler um diretório e escrever um arquivo. Por fim, aprenderemos a publicar nosso módulo Deno no GitHub e executá-lo diretamente desse local e também a instalá-lo localmente para que funcione sem conexão.

Visão geral

A ferramenta CLI que construiremos neste tutorial do Deno aceitará um nome de componente passado pela linha de comando e gerará um diretório e um arquivo com o código para um componente funcional React.

Eu criei uma versão mais completa disso que também cria uma folha de estilo SASS e um arquivo de teste adequado para Jest e Enzyme. Em breve, adicionaremos mais modelos de personalização e componentes (como aqueles que usam ganchos, Redux, Roteador ou todos eles).

Por uma questão de simplicidade, porém, este tutorial do Deno cobrirá o essencial: leitura de parâmetros e gravação de arquivos e escreveremos um único arquivo. O resto é manipulação de strings e mais escrita de conteúdo, nada particularmente especial. Você pode acessar a ferramenta Deno CLI completa para gerar um componente React com SASS e Jest no repositório no final deste artigo.

Instalar Deno

Para executar esta ferramenta Deno CLI, você precisa ter o runtime instalado. Se você já estiver usando o Homebrew no macOS, poderá instalar rapidamente o Deno com:

brew install deno

Se você não estiver usando o Homebrew, poderá instalá-lo usando o CURL:

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

Outros métodos e sistemas de instalação estão descritos no Manual Deno.

Ler parâmetros de linha de comando no Deno

A coisa mais essencial que precisamos para o nosso gerador é levar o nome do componente. Precisamos ser capazes de passar o nome do componente para a ferramenta Deno . Crie um diretório e adicione um arquivo chamado mod.tse cole isso nele:

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

Agora, quando você adiciona a Denovariável, provavelmente receberá um aviso, dependendo do seu editor de código e do suporte a TypeScript, dizendo que não pode encontrar o Denonome. Se você estiver no VS Code, poderá resolver isso usando a extensão oficial do VS Code para adicionar suporte ao Deno. JetBrains também publicou um plugin para fornecer suporte Deno para JetBrain IDEs.

Agora execute este módulo com:

deno run mod.tsOlá Mundo

Isso responderá com o parâmetro "HelloWorld" que passamos:

Writing component HelloWorld

Agradável! Está funcionando!

Gravar arquivos com Deno

Vamos escrever o arquivo agora. Primeiro precisamos do conteúdo para ele, então adicione isso ao mod.tsarquivo. Usaremos literais de modelo JavaScript para criar uma única string e inserir o nome do componente e até chamar um método de string para torná-lo minúsculo:

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

${name}.propTypes = {

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

Para gravar isso em um arquivo, primeiro precisamos verificar se o diretório existe. Usaremos a ensureDirfunção, parte da biblioteca padrão Deno, para isso. Ele criará o diretório ou diretórios se eles não existirem. Para dizer ao Deno para usar essa dependência, basta adicionar isso no topo do arquivo:

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

Quando executarmos nossa ferramenta, o Deno baixará este módulo para usá-lo. Finalmente é hora de escrever o arquivo usando writeTestFile, um comando no runtime do Deno. Cole o seguinte no final do arquivo:

Teste local

Terminamos de codificar nossa ferramenta Deno CLI e agora podemos testá-la. O Deno é construído como um tempo de execução seguro, portanto, operações como ler o sistema de arquivos ou gravar nele são negadas por padrão. Você precisa pedir explicitamente ao Deno para permitir o acesso ao sistema de arquivos. É separado em acesso de leitura e acesso de gravação. Neste caso, precisamos de permissão de leitura, pois ensureDirprimeiro precisamos ler o diretório e verificar se ele existe. Se não, ele irá criá-lo e, em seguida, criaremos o arquivo. Para as duas últimas tarefas, precisamos de permissão de gravação. Então é assim que você pode executá-lo:

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

E você terá os diretórios criados junto com o arquivo, todos relativos à pasta onde você está executando isso, como app/components/Button/index.js.

Publicar um módulo Deno

Distribuir um módulo Deno é simples. Cobrimos isso em detalhes em um post anterior sobre como criar e publicar um módulo Deno no GitHub. Você precisa inicializar um repositório git local:

git init

adicione e confirme seus arquivos:

git add .
git commit -m "Initial commit"

crie um repositório no GitHub ou serviço semelhante e envie-o por push. Por exemplo, se você criar um repositório chamado a-deno-moduleno GitHub, poderá executá-lo localmente para enviá-lo online:

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

Use o módulo publicado online

Deno pode executar módulos diretamente da Internet e instalar suas dependências automaticamente. Agora que está implantado, você pode executar nossa ferramenta Deno CLI diretamente do GitHub:

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

Deno fará o download da ferramenta, verificará as dependências e as instalará, se necessário. O resultado será o mesmo que acima, ele criará os diretórios e o arquivo.

Para evitar ter que escrever tudo isso (ou procurá-lo no shell), o Deno permite que você instale esta ferramenta para que funcione offline:

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

A ferramenta será nomeada denomodu. O que isso faz é criar um arquivo executável com a linha de comando em um determinado diretório, como /Users/%your-username%/.deno/binno macOS. Seu conteúdo é o comando para executar a ferramenta e aceitar parâmetros:

#!/bin/sh

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

Então, quando o processo terminar, se você não adicionou o ./deno/bincaminho à sua variável de ambiente PATH, o Deno solicitará que você faça isso, para que você possa executar a ferramenta.

Depois de adicionar o caminho à sua variável PATH, agora você pode invocar a ferramenta:

denomodu button

É muito mais curto e agora funciona sem estar conectado à Internet. Parabéns! Você criou uma ferramenta Deno CLI, publicou-a e instalou-a localmente.

Ferramenta Deno CLI para gerar um componente React

Como mencionado no início deste tutorial do Deno, criei uma versão mais completa disso, e você pode acessar o repositório dessa ferramenta aqui:

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

É apenas um módulo Deno criado no TypeScript e cria esses arquivos:

• index.js, um componente funcional React
• style.scss, sua folha de estilo SASS
• test.js, um teste simples usando Jest e Enzyme

O gif abaixo mostra como esta ferramenta Deno funciona após ser instalada:

Ele aceita nomes compostos separados por um traço. Por exemplo, passar nav-barcriará um componente chamado NavBar. Você também pode especificar um caminho de diretório personalizado diferente do padrão app/componentsou não e continuar usando o caminho padrão.