VexTab y VexFlow — Misión

Por qué aprendo esto

Guitar Alchemist (GA) muestra voicings de guitarra, y un voicing se lee mejor como tablatura que como x-3-2-0-1-0. Al chatbot de GA se le pide que añada un bloque vextab a cada digitación que menciona; GA tiene una gramática VexTab en EBNF, un parser y un generador en F#, un visor en React y pruebas de extremo a extremo que esperan un SVG. Quería saber qué es VexTab, qué puede y qué no puede escribir, y si las piezas de GA que lo hablan coinciden con el original. La lección 4 responde a la última pregunta con mediciones, y la respuesta es, en su mayor parte, no.

Para quién es este curso

Escribes C# o Java. Conoces el JavaScript de JavaScript para desarrolladores de C#/Java: módulos, npm, funciones, objetos. Un poco de React ayuda para la segunda tanda. Sabes leer una tablatura de guitarra: seis líneas, una por cuerda, números para los trastes. La teoría musical que necesitan las lecciones, nombres de notas, octavas, armaduras, se recuerda donde aparece, con enlaces a Teoría musical para Guitar Alchemist.

VexTab y VexFlow en una tabla

	Qué es	Lo más parecido que ya conoces
VexFlow	Una biblioteca JavaScript que dibuja notación musical y tablatura, en SVG o en un canvas: pentagramas, notas, barras, ligaduras, bends, texto	Una API de dibujo con un motor de disposición, como el `DrawingContext` de WPF más un formateador
VexTab	Un pequeño lenguaje de texto para notación y tablatura, y el JavaScript que lo analiza y llama a VexFlow	Un DSL compilado a llamadas sobre una API de objetos, como una plantilla Razor compilada a C#
`tabstave`, `notes`, `text`, `options`	Los cuatro tipos de línea de VexTab	Las instrucciones del DSL
El Artist	El objeto de VexTab que convierte las líneas analizadas en pentagramas y notas de VexFlow	El generador de código de un compilador

Al terminar este curso, sabré

escribir VexTab para melodías, acordes y técnicas de guitarra, y leer los errores que emite;
fijar armaduras, compases, claves y afinaciones, y saber cuáles cambian la notación y cuáles solo la tablatura;
renderizar VexTab en SVG con Node, sin navegador, y probar el resultado;
decir qué no puede expresar VexTab, y cuándo bajar a VexFlow;
comprobar un programa que escribe VexTab, un chatbot o un generador, contra el parser real;
(segunda tanda) dibujar la misma música con los propios objetos de VexFlow, renderizarla en React sin redibujar con cada token, y planificar el paso de VexFlow 4 a 5.

Plan

#	Lección	Lo que ya conoces
1	Primer pentagrama, primera tablatura	un DSL compilado a una API, un árbol sintáctico, `System.Xml.Linq`
2	Técnicas de guitarra	la tablatura que lees: bends, slides, hammer-ons, acordes
3	Armaduras, compases, claves y afinaciones	armaduras, cejillas, drop D
4	Caso práctico: el chatbot de GA escribe VexTab	FParsec o una biblioteca de combinadores de parsers, prompts de LLM
5	Segunda tanda. `Stave`, `StaveNote`, `Voice`, `Formatter`: lo que VexTab oculta, y una voz estricta que cuenta los tiempos	construcción de objetos, una pasada de disposición
6	Segunda tanda. `TabStave` y `TabNote`; mantener notación y tablatura sincronizadas	dos vistas de un mismo modelo
7	Segunda tanda. Renderizar en React sin redibujar con cada token recibido, y probarlo con Playwright (el `MemoizedVexTab` de GA)	`memo`, efectos, pruebas de extremo a extremo
8	Segunda tanda. Pasar los componentes de GA de VexFlow 4 a 5: qué cambió en la API, las fuentes y la medición de texto	una actualización de versión mayor
—	Diario

Recursos

El tutorial de VexTab de Mohit Cheppudira (0xfe), autor de VexTab, y su README. La gramática es src/vextab.jison.
El sitio de VexFlow, su repositorio y su referencia de la API.
SMuFL, el estándar que numera los glifos musicales, y Bravura, la fuente con la que VexFlow 5 los dibuja.
GuitarAlchemist/ga, fijado en el commit 17ccee6 para la lección 4.