DevToolbox descubre sus herramientas con import.meta.glob de Vite
El proyecto, en TypeScript y Vite, convierte cada utilidad en un módulo independiente y construye su registro automáticamente en tiempo de compilación.
DevToolbox es una aplicación en TypeScript y Vite que trata cada utilidad —formatear JSON, decodificar Base64, convertir timestamps, parsear una URL— como un módulo independiente. Su autor la ha montado de forma que añadir una herramienta nueva no obliga a tocar un router central: el registro se construye solo, en tiempo de compilación, con import.meta.glob de Vite. El código está en el repositorio y hay una demo pública, todo estático sobre GitHub Pages.
El contrato de herramienta
Cada herramienta vive en su carpeta bajo src/tools/<id>/ y exporta un ToolDefinition desde su index.ts: identificador, nombre, descripción, categoría, palabras clave y una función mount que recibe un contenedor vacío y construye la interfaz. Esa función puede devolver una limpieza para cuando el usuario sale de la herramienta. Los metadatos alimentan el menú lateral y el enrutado por hash (#/json-formatter).
La lógica pura que transforma los datos va en un módulo hermano, logic.ts. Así Vitest puede probar los caminos de codificación y decodificación sin montar nada en el DOM. La interfaz queda como una capa fina que solo se ocupa de su panel.
Auto-descubrimiento
El registro no importa las herramientas por nombre. Le pide a Vite todos los módulos que encajen con el patrón y se queda con los que exportan una definición válida, filtrando la carpeta _template para que la plantilla de partida no aparezca como una herramienta fantasma en el menú. El glob es eager, así que el bundle de producción incluye todas las herramientas desde el principio.
Esa decisión tiene un coste, y el autor lo reconoce: mantiene el runtime simple, sin mapa de importaciones asíncronas que cuidar, pero si el catálogo creciera mucho habría que pasar a carga diferida. El diseño de carpetas no cambiaría.
Añadir una herramienta es copiar _template, implementar las funciones puras con sus tests, exportar la definición y abrir un pull request. No hay un switch central que editar, y eso evita que varios colaboradores se peleen por el mismo archivo.
Todo en el navegador
No hay backend. Cuando pegas un JSON o una cadena con pinta de JWT, el trabajo ocurre en JavaScript de la página. Eso encaja bien con codificar, formatear, parsear o hashear con Web Crypto.
El autor es claro sobre lo que esto no significa: no protege de extensiones del navegador, capturas de pantalla ni de la propia red. Solo quiere decir que la aplicación no envía la entrada a ningún servidor, porque no existe. Lo único que persiste en el dispositivo es la preferencia de tema, en localStorage.
La integración continua corre ESLint, Prettier --check, tsc --noEmit, Vitest y el build de producción, y la protección de rama exige que ese job pase antes de mezclar.
Lo interesante aquí es el patrón, no el producto: una carpeta por herramienta con descubrimiento en build es un punto medio razonable entre el plugin registry, que sobra para tres utilidades, y el monolito que ahoga a cualquiera que llegue después. Queda la duda que plantea el propio autor: si la carga eager es el buen valor por defecto o conviene diferida desde el primer día.
