Table des matières
Motivations
Voici comment j'organise mes composants :
composant /
|
--- MyButton/
|
--- myButton.module.scss
|
--- MyButton.tsx
|
--- MyArticle/
|
--- myArticle.module.scss
|
--- MyArticle.tsx
Pour le composant MyButton, il faut ensuite 'relier' le module et le composant :
- TypeScript
// MyButton.tsx
import styles from "./myButton.module.scss"
type MyButtonProps = {label:string}
const MyButton = (props: MyButtonProps) => {
const {label} = props
return (<button className={styles.btn}>{label}</button>)
}
export default MyFirstAuto
- CSS
// myButton.module.scss
.btn{
// styles...
}
Certes on peut créer des files templates mais il s'agit toujours de créer :
- le dossier,
- puis de nommer les fichiers,
- importer le module dans le composant
- ajouter la classe...
Des étapes qui peuvent s'avérer répétitives et faire perdre beaucoup de temps. ⌛
1. Créer le fichier
Créez un nouveau fichier appelé create-component.sh et ouvrez-le dans votre éditeur de texte préféré.
touch create-component.sh
2. Le script
Ouvrez le fichier avec open create-component.sh et
ajoutez à ce fichier:
#!/bin/bash
if [ $# -ne 2 ]; then
echo "Usage: create-component <ComponentName> <path>"
exit 1
fi
component_name="$1"
path="$2"
# Convert to PascalCase and camelCase
component_name_pascal="$(tr a-z A-Z <<<"${component_name:0:1}")${component_name:1}"
component_name_camel="$(tr A-Z a-z <<<"${component_name:0:1}")${component_name:1}"
# Create directory
component_dir="${path}/${component_name_pascal}"
mkdir -p "${component_dir}"
# Create ComponentName.tsx
tsx_file="${component_dir}/${component_name_pascal}.tsx"
cat > "${tsx_file}" <<- EOM
import styles from "./${component_name_camel}.module.scss"
type ${component_name_pascal}Props = {}
const ${component_name_pascal} = (props: ${component_name_pascal}Props) => {
const {} = props
return (<div className={styles.component}></div>)
}
export default ${component_name_pascal}
EOM
# Create componentName.module.scss
scss_file="${component_dir}/${component_name_camel}.module.scss"
cat > "${scss_file}" <<- EOM
.component {
}
EOM
echo "Component '${component_name_pascal}' created at '${component_dir}'"
3. Enregistrez le Enregistrer le fichier
Enregistrer le fichier et rendez-le exécutable:
chmod +x create-component.sh
Puis, déplacez le script dans un répertoire de votre PATH, par exemple, /usr/local/bin, afin de pouvoir l'exécuter de n'importe où :
sudo mv create-component.sh /usr/local/bin/create-component
4. Utilisation
Maintenant, vous pouvez utiliser la commande create-component [componentName] [path] pour créer vos composants. Par exemple :
create-component BasedButton /path/to/components
Cela créera un répertoire BasedButton dans le chemin spécifié, ainsi que les fichiers BasedButton.tsx et basedButton.module.scss.
🎉
Vous aurez sans doute besoin de relancer votre terminal.
Lorsque l'on veut créer un composant Button dans src/components/[ici] , il n'y a plus qu'à entrer la commande
create-component Button ./src/components/
Hop! Le tour est joué! 😎
Top comments (0)