astro-auto-import

Qué es

astro-auto-import es una integración para Astro creada por Chris Swithinbank (delucis) que registra componentes (u otros módulos) para que estén disponibles automáticamente dentro de ficheros MDX, sin necesidad de escribir los import en cada uno. Está escrita en TypeScript, incluye sus propios tipos y se distribuye en npm bajo licencia MIT.

Para qué sirve

• Inyectar componentes en MDX sin repetir sentencias import en cada fichero.
• Mantener limpios los archivos de contenido escritos por autores no técnicos.
• Importar exportaciones por defecto, exportaciones nombradas o módulos completos como espacio de nombres.
• Renombrar componentes mediante alias al registrarlos.

Cuándo usarlo

Es útil en blogs o sitios de documentación basados en Astro + MDX donde un puñado de componentes (avisos, embeds, tablas) se repite en muchas páginas. Si solo usas un componente de forma puntual, el import manual de MDX puede ser suficiente. Funciona junto a integraciones como astro-embed o Starlight.

Ejemplo

Instalación (requiere la integración de MDX):

npm i astro-auto-import
npx astro add mdx

Configuración en astro.config.mjs (AutoImport debe ir antes que mdx):

import { defineConfig } from 'astro/config';
import AutoImport from 'astro-auto-import';
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [
    AutoImport({
      imports: [
        './src/components/A.astro',
        {
          './src/components/B.astro': [['default', 'B']],
          'astro-embed': ['Tweet', 'YouTube'],
          './src/components': 'Components',
        },
      ],
    }),
    mdx(),
  ],
});

Tras esto puedes usar <A />, <B />, <Tweet /> o <Components.Card /> directamente en cualquier .mdx sin importarlos.

Puntos clave

• Soporta tres formas de registro: exportación por defecto, exportaciones nombradas y módulos completos como namespace.
• Permite alias para renombrar componentes al importarlos.
• Escrita en TypeScript con definiciones de tipos incluidas.
• Proyecto activo y mantenido (última versión 0.5.1).

Ten en cuenta

El orden en integrations importa: AutoImport debe declararse antes que la integración de MDX para que los auto-imports funcionen. Solo afecta a ficheros MDX, no a .astro ni a Markdown plano. Usar muchos auto-imports puede ocultar de dónde vienen los componentes para quien lea el contenido.