reactcci

React Crear componente CLI interactivo

CLI para crear o editar reaccionar o reaccionar componentes nativos con su propia estructura

• Plug and Play : Configuración instantánea para CRA con TypeScript
• Fácil de configurar : configuración interactiva y plantilla simple
• Gran documentación : más información en nuestro sitio web
• Funciona con cualquier cosa : mecanografiado, libro de cuentos, redux, broma, ...
• Ligero : <40kb + 3 pequeñas bibliotecas
• Búsqueda rápida : lugar de selección muy rápido para un nuevo componente por búsqueda dinámica
• Mucho por un comando : tonelada de archivos por función de creación múltiple
• Creado para React : Mejor que PLOP , Hygen o cualquier Biblioteca de andamios, porque es para React
• Multiplataforma : funciona en macOS, Windows y Linux.
• Extensión VSCODE
• Integración de tormentas web

Utilizado por

Descripción general rápida

A través del hilo y el modo interactivo

 $ yarn add -D reactcci
$ yarn rcci

o a través de NPM y banderas

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

Instalación

Para instalar a través de NPM:
npm install --save-dev reactcci

Para instalar a través del hilo:
yarn add --dev reactcci

Configuración

En la primera ejecución, la CLI le preguntará sobre la configuración automática. Solo ejecuta un comando:
npx rcci
Este comando crea el archivo rcci.config.js y la carpeta de plantilla con el conjunto de plantillas básicas.

El archivo de configuración contiene los siguientes parámetros:

• folderPath
  Directorio de raíz para colocar sus componentes o una variedad de rutas
  Valor predeterminado: src/

• templatesFolder
  Ruta a sus propias plantillas de componentes
  Valor predeterminado: templates

• multiProject
  Le permite configurar la configuración para mono-repositorio con varios proyectos
  Valor predeterminado: false

• skipFinalStep
  Le permite apagar el último paso de control
  Valor predeterminado: false

• checkExistenceOnCreate
  Le permite activar la existencia del componente verificar en creación para evitar reemplazar
  Valor predeterminado: false

• templates
  Objeto con estructura de su componente

• processFileAndFolderName
  Cadena o función que le permite reasignar su nombre de componente en el prefijo de nombre de carpeta y nombre de archivo
  Valor predeterminado: PascalCase
  Tipos:

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

  Ejemplo:

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

• placeholders
  Lista de marcadores de posición que puede usar para construir su propia plantilla de componentes
  Por defecto:
  #NAME# para un nombre de componente
  #STYLE# para la importación CSS-Module
  #STORY_PATH# para el título del libro de cuentos

• afterCreation
  Objeto con scripts para procesar su archivo después de la creación
  Valor predeterminado: undefined
  Ejemplo:

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

Marcador de posición

Cada marcador de posición es una función que obtiene algunos datos para construir su propio marcador de posición.
Durante la creación de componentes múltiples, se solicitarán todas las funciones para cada componente.
Ejemplo:

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

Después de esta configuración, puede usar este marcador de posición por #NAME# dentro de sus archivos de plantilla.
A continuación, puede ver la lista de todos los datos y funciones disponibles para crear uno nuevo.

Campo	Descripción
project	Nombre del proyecto en modo multyproject
componentName , objectName	Nombre del componente u otro objeto en modo multitemplo
objectType	Tipo de objeto seleccionado por el usuario. Es component de forma predeterminada.
pathToObject	carpeta de ruta a objetos Ejemplo: src/components
destinationFolder	ruta relativa a la carpeta del objeto que se está creando Ejemplo: App/Header/Logo
objectFolder	Carpeta absoluta ruta a su objeto (componente)
relativeObjectFolder	Ruta relativa a su carpeta de objeto (componente)
filePrefix	Nombre del objeto procesado (componente) para el nombre de archivo
folderName	Nombre del objeto procesado (componente) para la carpeta
files	Objeto de archivos que se está creando
getRelativePath(to: string)	Función para obtener ruta relativa a cualquier otra ruta Ejemplo: ../../src/helpers
join(...parts: string)	Función para obtener partes unidas de la ruta. Ejemplo: join(project, destinationFolder, componentName) => Project/Footer/Email
stringToCase(str: string, toCase: string)	Función para asignar cualquier cadena al caso. Ejemplo: stringToCase('dash-case-string', 'PascalCase') => DashCaseString

Argumentos

• --update , -u
  Para activar el modo de actualización para agregar nuevos archivos al componente o para reemplazar
• --dest , -d
  Para establecer la ruta absoluta o de destino para crear o actualizar el componente
• --skip-search , -s
  Para omitir la selección de la carpeta interactiva para usar el argumento dest como es
• --name , -n
  Para establecer el nombre o los nombres del componente dividido por el espacio para crear varios
• --files , -f
  Para establecer archivos para crear o actualizar, en su lugar, la selección interactiva
  Ejemplo: --files style test component[1]
  Creará archivos opcionales como style y test y seleccionará el segundo tipo de componente por índice
• --project , -p
  Para establecer el proyecto en modo multiproyecto
• --sls
  Para omitir el último acuerdo paso como skipFinalStep en el archivo de configuración

Múltiple

Si necesita generar algo más, no solo componentes, puede configurar la matriz de plantillas.
Ejemplo a continuación:

 {
    ... 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'
                }
            }
        }
    ]
} 

Licencia