🧪 Ejemplo: React FSD

Muestra de cómo implementar la Gobernanza Arquitectónica en un proyecto real siguiendo Feature-Sliced Design (FSD).

📁 Estructura del Proyecto

Localizado en examples/react-fsd/. Este ejemplo demuestra cómo Firefly observa una arquitectura de capas compleja.

🧩 Declaración de Contratos

El proyecto utiliza archivos declarations.yaml distribuidos por las carpetas para definir las reglas de dependencia.

• src/declarations.yaml: Define que app puede usar pages, pero entities solo puede usar shared.
• src/shared/declarations.yaml: Define reglas internas para la capa compartida.

⚙️ Configuración (firefly.config.ts)

Demuestra el flujo completo de la primera iteración: Reader -> Contract -> Analyzer.

import { defineConfig } from "@fireflyjs/core";
import { FileReaderPlugin } from "@fireflyjs/file-reader";
import { ContractReaderPlugin } from "@fireflyjs/contract-reader";
import { ContractAnalyzer } from "@fireflyjs/contracts-analyzer";

export default defineConfig({
  plugins: [
    new FileReaderPlugin({ 
        include: ["./src/**/*", "**/declarations.yaml"] 
    }),
    new ContractReaderPlugin(),
  ],
  tools: [
    new ContractAnalyzer({
      aliases: { "@/*": "./src/*" }
    })
  ],
});

🏃 Ejecución

Para validar la arquitectura una sola vez (ideal para CI):

pnpm firefly:run

👁️ Modo Observador

Para recibir feedback instantáneo mientras desarrollas:

pnpm firefly:watch