React Component Indexer

El React Component Indexer es un paquete de utilidades para indexar y gestionar componentes en una aplicación de React.

Features

• Indexa y organiza los componentes de tu aplicación de React de forma eficiente.

• Puede ser utilizado tanto en aplicaciones de React creadas con Create React App como en proyectos personalizados.

Install

Para instalar el React Component Indexer, utiliza npm o yarn:

#npm
npm install react-component-indexer

#yarn
yarn add react-component-indexer

Config

Con esta configuacion abreviamos el path de importacion ej:

//before
import { XXX } from "../../components/Example"
//after
import { XXX } from "components/Example"

• Crear archivo jsconfig.json e inserta:

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "baseUrl": "src"
    },
    "include": [
      "src/**/*"
    ],
    "exclude": [
      "node_modules"
    ]
  }

• Si usas vitejs, en el archivo de de configuracion de vite, vite.config.js inserta:

import jsconfigPaths from 'vite-jsconfig-paths'

export default defineConfig({
  plugins: [
    jsconfigPaths(),
  ]
})

• En el archivo package.json insertar el script:

  "scripts": {
    "indexer": "node node_modules/react-component-indexer/src/export.js"
  },

Usage

Los nombres de los componentes y funciones que contienen deben ser iguales ej:

// MiComponente.jsx

function MiComponente() {
  return (
    <div>
      {/* Contenido del componente */}
    </div>
  );
}

export default MiComponente;

• Ejecuta el comando npm run indexer o yarn indexer en la línea de comandos.

#npm
npm run indexer

#yarn
yarn indexer

• Aparecerá un mensaje solicitando que ingreses el nombre del directorio que deseas indexar.

#inserta el nombre de la carpeta que quieres indexar
Inserta el nombre del directorio a indexar:

• Aparecerá un mensaje indicando que los componentes se han indexado correctamente.

#crea un archivo index.js en la carpeta seleccionada
Componentes indexados corretamente!