React Modularize

CLI para generar y gestionar módulos en proyectos React/TypeScript con arquitectura modular.

Instalación

# Local (desarrollo)
git clone <repo>
cd react-modularize
npm install
npm run build
npm link

# Uso en cualquier proyecto
cd /tu/proyecto/react
react-modularize init
react-modularize make:module --name=AppModule

Comandos

init

Inicializa react-modularize en un proyecto React/TypeScript ya creado.

# Modo interactivo (pregunta todas las opciones)
react-modularize init

# Modo directo (sin prompts)
react-modularize init \
  --modules-path=src/modules \
  --manifest=modules.ts \
  --styling=css-modules \
  --router=react-router-v6

# Sin crear el módulo raíz AppModule
react-modularize init --skip-root

Opciones de --styling: css-modules | tailwind | plain Opciones de --router: react-router-v6 | tanstack-router

Genera:

• react-modularize.json — Configuración del proyecto
• {modulesPath}/modules.ts — Manifiesto de módulos
• {modulesPath}/types.ts — Tipos TypeScript
• AppModule/ (si no se usa --skip-root) — Módulo raíz con index.tsx, routes.tsx y components/

make:module

Crea un nuevo módulo con su estructura de carpetas.

# Modo interactivo
react-modularize make:module

# Modo directo
react-modularize make:module --name=Blog
react-modularize make:module --name=Posts --parent=app.module.blog

Genera:

• {ModuleName}/index.tsx
• {ModuleName}/routes.tsx
• {ModuleName}/components/
• Actualiza modules.ts

make:component

Crea un componente dentro de un módulo existente.

# Modo interactivo (muestra lista de módulos)
react-modularize make:component

# Modo directo
react-modularize make:component --module=app.module.blog --name=PostList --type=component

Tipos disponibles:

• component - Componente React (tsx)
• hook - Custom hook (ts)
• service - Servicio API (ts)
• type - Interface/Type (ts)
• page - Página con ruta (tsx)

list

Muestra el árbol de módulos registrados.

react-modularize list
react-modularize list --verbose

routes

Muestra el árbol de rutas de todos los módulos.

react-modularize routes
react-modularize routes --json

Estructura Generada

src/modules/
├── modules.ts              # Manifiesto de módulos
├── AppModule/              # Módulo raíz
│   ├── index.tsx
│   ├── routes.tsx
│   └── components/
│       └── Layout.tsx
└── Blog/                   # Módulo de funcionalidad
    ├── index.tsx
    ├── routes.tsx
    ├── components/
    │   ├── PostList.tsx
    │   └── PostDetail.tsx
    ├── hooks/
    │   └── usePosts.ts
    ├── services/
    │   └── postService.ts
    └── types.ts

Configuración

Opcionalmente crea react-modularize.json en la raíz de tu proyecto:

{
  "modulesPath": "src/modules",
  "manifestFile": "modules.ts",
  "styling": "css-modules",
  "router": "react-router-v6"
}

Desarrollo

npm install
npm run build
npm test

Licencia

MIT