Color Highlight v2
Escaneo con debounce de 150 ms y build con esbuild: 38 KB y 2 dependencias
Métricas clave
Métricas de rendimiento y topología del sistema Métricas y topología del sistema
- del artefacto compilado de la extensión
- 0 KBdel artefacto compilado de la extensión
- de debounce añadido: el original relanzaba el escaneo completo en cada tecla
- 0 msde debounce añadido: el original relanzaba el escaneo completo en cada tecla
- dependencias en runtime, de 4 en el original a 2 en el fork
- 0dependencias en runtime, de 4 en el original a 2 en el fork
- estrategias de detección de color en 6 formatos: SCSS, LESS, CSS vars, Hex/RGB, HSL y HWB
- 0estrategias de detección de color en 6 formatos: SCSS, LESS, CSS vars, Hex/RGB, HSL y HWB
Color Highlight v2
Fork modernizado de vscode-ext-color-highlight (GPL-3.0): debounce añadido al motor, build con esbuild y 38 KB de artefacto.
Debounce de 150 ms
El motor deja de relanzar el escaneo completo en cada tecla, que era el atasco al escribir.
Build con esbuild
Sustituye a webpack + babel + npm; sin transpilación intermedia.
Dependencias reducidas
De 4 a 2 en runtime: color y color-name, sin @babel/runtime ni file-importer.
Núcleo en TypeScript
Motor, mapa de decoraciones, contraste e importer de Sass, con check-types en cada build.
Mapa de decoraciones
Ciclo de vida y dispose explícitos: corrige las fugas de memoria de decoraciones.
Resumen
Fork modernizado de `vscode-ext-color-highlight` (GPL-3.0), la extensión que resalta los colores directamente en el editor. El original relanzaba un escaneo completo en cada tecla: añadí un debounce de 150 ms que elimina ese cuello de botella. También sustituí su cadena de build (webpack + babel + npm) por esbuild + pnpm, dejando el artefacto en 38 KB y las dependencias en runtime de 4 a 2, y migré el núcleo a TypeScript. Fork bajo GPL-3.0, con crédito explícito a los autores originales.
Problema
La extensión original resolvía un problema real — ver los colores del código directamente en el editor — pero su base había envejecido: relanzaba un escaneo completo en cada tecla, su build pasaba por webpack y babel con cuatro dependencias en runtime, y el núcleo no estaba tipado. Modernizarla la hace mantenible y ligera sin abandonar la licencia ni el crédito de sus autores.
Mi rol
- Sustituí la cadena de build (webpack + babel + npm) por esbuild + pnpm: el artefacto compilado quedó en 38 KB y las dependencias en runtime bajaron de 4 a 2.
- Añadí un debounce de 150 ms al motor de resaltado, que antes relanzaba el escaneo completo con cada tecla; el motivo está documentado en el código.
- Migré el núcleo a TypeScript (motor de resaltado, mapa de decoraciones, contraste e importer de Sass) y añadí un script `check-types` al pipeline.
- Reescribí el mapa de decoraciones con ciclo de vida y liberación explícita, corrigiendo las fugas de memoria de decoraciones.
- Mantuve la licencia GPL-3.0 y el crédito a los autores originales: el proyecto se presenta como fork modernizado, nunca como invención propia.
Solución
- Debounce de 150 ms: el motor deja de relanzar el escaneo completo en cada tecla, que es de donde venía el atasco al escribir.
- Build con esbuild: sustituye a webpack + babel, sin transpilación intermedia ni esa cadena de toolchain.
- 38 KB y 2 dependencias: el paquete se empaqueta con `--no-dependencies`, así que instala en VS Code, Cursor, Windsurf, VSCodium y Antigravity sin arrastrar nada.
- Núcleo en TypeScript: motor, mapa de decoraciones, contraste e importer de Sass con tipado, verificados en cada build con `check-types`.