Automazione con Plop - lucadileo9/template-catalog GitHub Wiki

Che cos'è Plop?

Plop è uno strumento di automazione che semplifica la creazione di file e strutture ripetitive all'interno di un progetto. Nel contesto del Template Catalog, Plop viene utilizzato per generare automaticamente componenti, template e pagine/routes, riducendo il rischio di errori umani e garantendo coerenza nella struttura del codice.

---

Struttura del File plopfile.js

Il file plopfile.js è il cuore della configurazione di Plop. Esso definisce i generatori disponibili e li associa alle rispettive funzioni di generazione. Nello specifico:

• generateComponent: Generatore per creare nuovi componenti.
• generateTemplate: Generatore per creare nuovi template completi.
• generateRoute: Generatore per creare nuove pagine o routes all'interno di un template.

Ogni generatore è registrato tramite il metodo plop.setGenerator(), che lo rende accessibile tramite comandi da riga di comando (es. npm run new-component).

---

Descrizione Dettagliata dei Generatori

1. Generatore di Componenti

Il generatore di componenti crea automaticamente un nuovo componente locale, seguendo il principio dell'Atomic Design. Ecco come funziona:

Cosa Chiede

1. Nome del Template:
   • Richiede il nome del template in cui vuoi creare il componente (in minuscolo, es. pizzeria).
   • Verifica che il nome sia valido e non vuoto.
2. Nome del Componente:
   • Richiede il nome del componente in formato PascalCase (es. UserCard).
   • Verifica che il nome sia descrittivo (almeno 3 caratteri).
3. Livello Atomic Design:
   • Ti chiede di scegliere tra tre livelli: Atomo, Molecola o Organismo.
   • Ogni livello corrisponde a una cartella specifica (atoms, molecules, organisms).

Cosa Fa

• Crea due file principali per il componente:
  1. File Principale (index.tsx): Contiene la logica del componente.
  2. File di Tipi (index.types.ts): Contiene i tipi TypeScript associati al componente.
• I file vengono salvati nella cartella corrispondente al livello Atomic Design scelto (es. templates/pizzeria-template/components/atoms/UserCard/).

---

2. Generatore di Route

Il generatore di route crea una nuova pagina o route all'interno di un template esistente. Include l'aggiornamento automatico della configurazione del menu header.

Cosa Chiede

1. Nome del Template:
   • Richiede il nome del template in cui vuoi creare la route (in minuscolo, es. pizzeria).
   • Verifica che il nome sia valido e non vuoto.
2. Nome della Route:
   • Richiede il nome della route (es. menu).
   • Verifica che il nome sia valido e non vuoto.
3. Etichetta Visibile:
   • Richiede l'etichetta visibile per la route (es. Menu).
   • Verifica che l'etichetta sia valida e non vuota.

Cosa Fa

• Crea un file page.tsx per la nuova route nella cartella corrispondente (es. templates/pizzeria-template/app/menu/page.tsx).
• Aggiorna automaticamente il file config.js del template per includere la nuova route nel menu:

  menuItems: [
    { label: "Menu", link: "/pizzeria/menu" },
  ];
  

N.B.: Nel file config.js il link viene configurato in modo da essere relativo al template, quindi viene incluso il nome del template in automatico.

---

3. Generatore di Template

Il generatore di template crea una nuova cartella dedicata al template, completa di tutti i file necessari per renderlo funzionale.

Cosa Chiede

1. Nome del Template:
   • Richiede il nome del template (in minuscolo, es. pizzeria).
   • Verifica che il nome sia valido e non vuoto.

Cosa Fa

• Crea una struttura completa per il nuovo template, inclusa:
  1. Layout (layout.tsx): Definisce il layout del template.
  2. Pagina Principale (page.tsx): Pagina principale del template.
  3. Cartella Components: Vuota, pronta per ospitare i componenti locali.
  4. Cartella Public: Creata con una sottocartella della cartella publi generale, essa sarà specifica per le immagini del template.
  5. Configurazione (config.js): File di configurazione del template (colori, menu items, logo).
  6. Descrizione (description.md): File Markdown per descrivere il template.
  7. Stili Globali (globals.css): Stili globali del template.
  8. GlobalStyle (GlobalStyle.tsx): Gestisce i colori dinamici del template.
  9. Header, Footer e Hero: Componenti predefiniti per header, footer e hero section.
• Aggiorna automaticamente il file tsconfig.json per includere un alias per il nuovo template (es. @pizzeria/*).
• Aggiorna l'array validTemplates in config/templates.ts per includere il nuovo template.

---

Scheletri dei File

I generatori utilizzano modelli predefiniti per creare i file necessari. Questi modelli sono archiviati nella cartella .plop/templates/ e includono:

• Componenti: Modelli per componenti atomici, molecole e organismi.
• Template: Modelli per la struttura completa di un template.
• Route: Modelli per pagine e layout.

Ad esempio:

• Il modello per un componente include un file .tsx per la logica e un file .hbs per i tipi TypeScript.
• Il modello per un template include file di configurazione, layout e stili.

Questi modelli assicurano che ogni file generato segua le convenzioni del progetto, mantenendo la coerenza e riducendo il tempo necessario per la configurazione manuale.

---