reactcci

React criar componente interativo cli

CLI para criar ou editar reagir ou reagir componentes nativos com sua própria estrutura

• Plug and Play : Config Instant for CRA com o TypeScript
• Fácil de configurar : configuração interativa e modelagem simples
• Ótima documentação : mais informações em nosso site
• Funciona com qualquer coisa : TypeScript, Storybook, Redux, Jest, ...
• Leve : <40kb + 3 pequenas bibliotecas
• Pesquisa rápida : Local de seleção muito rápida para o novo componente por pesquisa dinâmica
• Muito por um comando : tonelada de arquivos por recurso multi-criação
• Criado para React : Melhor que Plop , Hygen ou qualquer biblioteca de andaimes, porque é para reagir
• Multiplataform : funciona em macOS, Windows e Linux.
• Extensão do vscode
• Integração da Webstorm

Usado por

Visão geral rápida

Via fio e modo interativo

 $ yarn add -D reactcci
$ yarn rcci

ou via npm e bandeiras

 $ npm i -D reactcci
$ npx rcci --name Header Body Footer --dest src/App

Instalação

Para instalar via NPM:
npm install --save-dev reactcci

Para instalar via Yarn:
yarn add --dev reactcci

Config

Na primeira execução, a CLI perguntará sobre a configuração automática. Apenas execute um comando:
npx rcci
Este comando cria arquivo rcci.config.js e pasta de modelo com conjunto de modelos básicos.

O arquivo de configuração contém os próximos parâmetros:

• folderPath
  Diretório raiz para colocar seus componentes ou variedade de caminhos
  Padrão: src/

• templatesFolder
  Caminho para seus próprios modelos de componentes
  Padrão: templates

• multiProject
  Permite configurar a configuração para o mono-repositório com vários projetos
  Padrão: false

• skipFinalStep
  Permite que você desative a última etapa de verificação
  Padrão: false

• checkExistenceOnCreate
  Permite que você ligue a existência de componentes de verificação em Criar para evitar a substituição
  Padrão: false

• templates
  Objeto com estrutura do seu componente

• processFileAndFolderName
  String ou função que permite remapear o nome do seu componente para o nome da pasta e o prefixo de nome do arquivo
  Padrão: PascalCase
  Tipos:

  • camelCase
  • PascalCase
  • snake_case
  • dash-case
  • (name: string, parts: string[], isFolder: boolean) => string

  Exemplo:

   {
      ... config ,
      processFileAndFolderName : ( name , parts , isFolder ) => 
          isFolder ? name : parts . map ( ( part ) => part . toLowerCase ( ) ) . join ( '-' )
  }

• placeholders
  Lista de espaços reservados que você pode usar para construir seu próprio modelo de componente
  Padrão:
  #NAME# para um nome de componente
  #STYLE# para importação de módulo CSS
  #STORY_PATH# para o título do livro de histórias

• afterCreation
  Objeto com scripts para processar você arquivar após a criação
  Padrão: undefined
  Exemplo:

   {
      ... config ,
      afterCreation : {                
          prettier : {
              extensions : [ '.ts' , '.tsx' ] , // optional
              cmd : 'prettier --write [filepath]'
          }
      }
  } 

Espaços reservados

Cada espaço reservado é uma função que obtém alguns dados para criar seu próprio espaço reservado.
Durante a criação de múltiplos componentes, todas as funções serão chamadas para cada componente.
Exemplo:

placeholders: {
    NAME : ( { componentName } ) => componentName
}

Depois disso, você pode usar esse espaço reservado por #NAME# dentro de seus arquivos de modelo.
Abaixo, você pode ver a lista de todos os dados e funções disponíveis para criar um novo.

Campo	Descrição
project	Nome do projeto no modo de vários projetos
componentName , objectName	Nome do componente ou outro objeto no modo multi-templado
objectType	Tipo de objeto que foi selecionado pelo usuário. É component por padrão.
pathToObject	pasta de caminho para objetos Exemplo: src/components
destinationFolder	caminho relativo para a pasta de objeto que está sendo criada Exemplo: App/Header/Logo
objectFolder	Caminho absoluto para o seu objeto (componente) pasta
relativeObjectFolder	Caminho relativo para sua pasta de objeto (componente)
filePrefix	Nome do objeto processado (componente) para o nome do arquivo
folderName	Nome do objeto processado (componente) para pasta
files	Objeto de arquivos que estão sendo criados
getRelativePath(to: string)	Função para obter um caminho relativo para qualquer outro caminho Exemplo: ../../src/helpers
join(...parts: string)	Função para se unir a partes do caminho. Exemplo: join(project, destinationFolder, componentName) => Project/Footer/Email
stringToCase(str: string, toCase: string)	Função para mapear qualquer string para caso. Exemplo: stringToCase('dash-case-string', 'PascalCase') => DashCaseString

Argumentos

• --update , -u
  Para ativar o modo de atualização para adicionar novos arquivos ao componente ou substituir
• --dest , -d
  Para definir o caminho absoluto ou de destino para criar ou atualizar o componente
• --skip-search , -s
  Para pular a seleção de pastas interativa para usar o argumento dest como está
• --name , -n
  Para definir o nome do componente ou nomes divididos pelo espaço para criar vários
• --files , -f
  Para definir arquivos para criar ou atualizar, seleção interativa
  Exemplo: --files style test component[1]
  Criará arquivos opcionais como style e test e selecionará o segundo tipo de componente por índice
• --project , -p
  Para definir o projeto no modo multi-projeto
• --sls
  Para pular o último acordo, como skipFinalStep no arquivo de configuração

Multi-Template

Se você precisar gerar outra coisa, não apenas componentes, poderá configurar uma variedade de modelos.
Exemplo abaixo:

 {
    ... config ,
    templates : [
        {
            name : 'component' , // will be added to default folderPath folder
            files : {
                index : {
                    name : 'index.ts' ,
                    file : 'component.ts'
                }
            }
        } ,
        {
            name : 'service' ,
            folderPath : 'services/' , // will be added by the specific path
            files : {
                index : {
                    name : 'index.ts' ,
                    file : 'service.ts'
                }
            }
        }
    ]
} 

Licença