reactcci

React Créer des composants interactifs CLI

CLI pour créer ou modifier React ou réagir des composants natifs avec votre propre structure

• Plug and Play : Configy instantané pour l'ARC avec TypeScript
• Facile à configurer : configuration interactive et modèles simples
• Excellente documentation : plus d'informations sur notre site Web
• Fonctionne avec n'importe quoi : dactylographié, livre de contes, redux, plaisanterie, ...
• Léger : <40Kb + 3 petites bibliothèques
• Recherche rapide : Sélection très rapide Place pour un nouveau composant par recherche dynamique
• Beaucoup par une commande : tonne de fichiers par fonctionnalité multi-création
• Créé pour React : Mieux que Plop , Hygen ou toute bibliothèque d'échafaudage, car c'est pour React
• Multiplatform : fonctionne sur macOS, Windows et Linux.
• Extension VScode
• Intégration en ligne

Utilisé par

Aperçu rapide

Via le fil et le mode interactif

 $ yarn add -D reactcci
$ yarn rcci

ou via le NPM et les drapeaux

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

Installation

Pour installer via NPM:
npm install --save-dev reactcci

Pour installer via le fil:
yarn add --dev reactcci

Configurer

On First Run CLI vous interrogera la configuration automatique. Exécutez simplement une commande:
npx rcci
Cette commande crée un dossier de fichier rcci.config.js et de modèle avec un jeu de modèle de base.

Le fichier de configuration contient les paramètres suivants:

• folderPath
  Répertoire racine pour placer vos composants, ou tableau de chemins
  Par défaut: src/

• templatesFolder
  Chemin vers vos propres modèles de composants
  Par défaut: templates

• multiProject
  Vous permet de configurer la configuration pour le mono-repositoire avec plusieurs projets
  Par défaut: false

• skipFinalStep
  Vous permet d'éteindre la dernière étape de vérification
  Par défaut: false

• checkExistenceOnCreate
  Vous permet d'activer l'existence des composants de vérification sur Créer pour éviter de remplacer
  Par défaut: false

• templates
  Objet avec structure de votre composant

• processFileAndFolderName
  Chaîne ou fonction qui vous permet de remédier au nom de votre composant en nom de dossier et préfixe de nom de fichier
  Par défaut: PascalCase
  Types:

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

  Exemple:

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

• placeholders
  Liste des espaces réservés que vous pouvez utiliser pour créer votre propre modèle de composant
  Défaut:
  #NAME# pour un nom de composant
  #STYLE# pour l'importation du module CSS
  #STORY_PATH# pour le titre de livre de contes

• afterCreation
  Objet avec des scripts pour traiter votre fichier après la création
  Par défaut: undefined
  Exemple:

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

Espaces réservés

Chaque placement est une fonction qui obtient des données pour créer votre propre espace réservé.
Pendant la création de composants multiples, toutes les fonctions seront appelées à chaque composant.
Exemple:

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

Après cette configuration, vous pouvez utiliser cet espace réservé par #NAME# à l'intérieur de vos fichiers de modèle.
Ci-dessous, vous pouvez voir la liste de toutes les données et fonctions disponibles pour en créer une nouvelle.

Champ	Description
project	Nom du projet en mode Multy-Project
componentName , objectName	Nom du composant ou d'un autre objet en mode multi-mat
objectType	Type d'objet sélectionné par l'utilisateur. Il est component par défaut.
pathToObject	Path vers le dossier des objets Exemple: src/components
destinationFolder	Chemin relatif vers le dossier de l'objet qui est créé Exemple: App/Header/Logo
objectFolder	Chemin absolu vers votre dossier d'objet (composant)
relativeObjectFolder	Chemin relatif vers votre dossier d'objet (composant)
filePrefix	Nom de l'objet traité (composant) pour le nom de fichier
folderName	Nom de l'objet traité (composant) pour le dossier
files	Objet de fichiers qui est créé
getRelativePath(to: string)	Fonction pour obtenir un chemin relatif vers un autre chemin Exemple: ../../src/helpers
join(...parts: string)	Fonction pour obtenir des parties jointes du chemin. Exemple: join(project, destinationFolder, componentName) => Project/Footer/Email
stringToCase(str: string, toCase: string)	Fonction pour mapper n'importe quelle chaîne dans le cas. Exemple: stringToCase('dash-case-string', 'PascalCase') => DashCaseString

Arguments

• --update , -u
  Pour activer le mode de mise à jour pour ajouter de nouveaux fichiers au composant ou pour remplacer
• --dest , -d
  Pour définir le chemin absolu ou de destination pour créer ou mettre à jour le composant
• --skip-search , -s
  Pour sauter la sélection de dossiers interactifs pour utiliser l'argument dest tel quel
• --name , -n
  Pour définir le nom ou les noms du composant divisé par l'espace pour en créer plusieurs
• --files , -f
  Pour définir des fichiers pour créer ou mettre à jour, plutôt une sélection interactive
  Exemple: --files style test component[1]
  Créera des fichiers facultatifs comme style et test et sélectionnera le deuxième type de composant par index
• --project , -p
  Pour définir le projet en mode multi-projets
• --sls
  Pour sauter la dernière étape de l'accord comme skipFinalStep dans le fichier de configuration

Multi-matte

Si vous avez besoin de générer autre chose, pas des composants, vous pouvez configurer une table de modèles.
Exemple ci-dessous:

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

Licence