QuasarEl motor de documentos que nunca lanza una excepción.
Entra cualquier texto. Sale un árbol válido.
Quasar convierte el BBCode en un árbol de sintaxis inmutable, vuelve a analizar solo lo que tocó cada edición y transforma cada etiqueta rota en un diagnóstico con su arreglo. Es el motor que mueve a Miliastry, y el texto siempre manda: nada de lo que hace reescribe un carácter que el autor no tocó.
- Cero dependencias en runtime
- Navegador, Node.js, Bun, Deno y Tauri
- Tres dialectos: osu, miliastry y lyne
- 2400+
- pruebas en la suite del propio motor
- 144.000
- ediciones al azar comparadas con un análisis completo
- 0
- divergencias encontradas en ellas
- 0
- dependencias en runtime
Miliastry es el editor. Quasar es lo que entiende.
Cada parte de Miliastry que lee tu página la lee a través de Quasar: el mismo árbol, las mismas reglas, la misma respuesta. Por eso la vista previa nunca discrepa de lo que osu! publica, el Error Checker señala los caracteres exactos y el editor visual puede cambiar una palabra sin reescribir tu código.
156 archivos de código de Miliastry lo importan.
Editor de código
Los colores de etiquetas, el autocompletado y el esquema del documento salen de las tablas del motor.
Vista previa osu!
Las reglas de emparejado y saltos de línea de osu!, parcheadas bloque a bloque mientras escribes.
Error Checker
Cada problema y cada arreglo de la bombilla es un diagnóstico del analizador.
Editor visual
Los bloques y el lienzo editan el árbol y devuelven cambios mínimos.
Text Studio
Degradados, arcoíris y ondas, horneados en BBCode por el kit de efectos.
Exportar
Lo que publicas sale del exportador, que ni siquiera puede llegar al renderer.
Anclas
Las cajas que abres en la vista previa siguen abiertas mientras escribes: las anclas siguen al texto.
Esta página
Cada vista previa y cada salida que ves aquí la renderizó el motor.
Una sola fuente de verdad
El código, la vista previa y el lienzo son vistas de un mismo árbol. Ninguno guarda una copia que pueda desviarse.
El texto siempre manda
Un clic en el editor visual se vuelve la edición más pequeña posible de tu BBCode. Tus espacios y mayúsculas sobreviven.
Lo que ves es lo que muestra osu!
La vista previa reproduce el parser del propio osu!, así que una página que se ve bien aquí se ve bien en tu perfil.
Anatomía de una tecla.
Lo que pasa entre que presionas una tecla y Miliastry muestra el resultado, en una página de cualquier tamaño.
- 1
Una edición
El editor le pasa a Quasar exactamente lo que cambió: dónde empieza, dónde termina y el texto nuevo. Nada más.
- 2
Una ventana, no la página
Quasar re-analiza una ventana pequeña alrededor de la edición. Cada nodo fuera de ella se conserva como el mismo objeto.
- 3
Posiciones, sin prisa
El árbol rojo encima mueve las posiciones solo cuando alguien las pide. Los ids no cambian, así que las anclas y las cajas abiertas siguen al texto.
- 4
Diagnósticos de la ventana
El analizador revisa lo que cambió. Una etiqueta sin cerrar se vuelve un aviso, con su arreglo incluido.
- 5
Un bloque repintado
La vista previa de osu! parchea solo el bloque que cambió. Todo lo demás en pantalla sigue siendo el mismo DOM.
Escribe el peor BBCode que puedas.
Este es el motor real, cargado en tu navegador. Cada tecla se aplica como una edición, se re-analiza de forma incremental y se cronometra en tu equipo.
Atrayendo el motor…
- análisis completo
- —
- diagnóstico
- —
- nodos
- —
- Problemas
- —
O deja que el caos escriba por ti.
Lanza sopa de etiquetas al azar contra el parser, mil documentos a la vez, aquí mismo.
- 0
- documentos analizados
- 0
- excepciones lanzadas
- —
- tiempo total
…Un árbol. Todas las salidas.
Se analiza una vez en el dialecto de Miliastry y se escribe como lo necesite el destino. osu! no tiene etiqueta de degradado, así que el exportador pinta un color por letra.
[centre][size=150][gradient=#ffe4b8,#ffb35c,#ff6d5a]Quasar[/gradient][/size][/centre]
[box=What it does]
[list]
[*][b]Parses[/b] anything
[*][i]Never[/i] throws
[/list]
[/box]
[centre][size=150][color=#FFE4B8]Q[/color][color=#FFD093]u[/color][color=#FFBD6E]a[/color][color=#FFA55C]s[/color][color=#FF895B]a[/color][color=#FF6D5A]r[/color][/size][/centre]
[box=What it does]
[list]
[*][b]Parses[/b] anything
[*][i]Never[/i] throws
[/list]
[/box]
Y también lee en sentido contrario.
Markdown, HTML y MilHibri se importan al mismo árbol, así que se exportan a BBCode como cualquier otra cosa.
# Hello, osu!
Some **bold**, some _italic_ and a [link](https://osu.ppy.sh).
- one
- two[heading]Hello, osu![/heading]
Some [b]bold[/b], some [i]italic[/i] and a [url=https://osu.ppy.sh]link[/url].
[list][*]one[*]two[/list]
Más pequeño, y ni un píxel distinto.
El optimizador encuentra el marcado que no cambia nada en pantalla y lo quita, con todas las ediciones planeadas juntas para que ninguna pelee por los mismos caracteres.
- Remove redundant nested [bold]
- Unwrap colour around whitespace
- #ff0000 → #f00
- Merge 2 × [color=#ff0000]
- #ffcc00 → #fc0
- Remove empty [italic]
Tan rápido que desaparece.
Al escribir se re-analiza una ventana alrededor de la edición y se reutiliza el resto del árbol. Medido sobre un documento de 547 KB, frente a los 16,7 ms que dura un fotograma a 60 Hz.
- Una tecla en prosa0,3 ms
- Tecla al azar, mediana0,89 ms
- Tecla al azar, percentil 902,02 ms
- Tecla al azar, percentil 9928,6 ms
- Reconstrucción completa≈ 55 ms
Todo lo que un editor necesita, sobre un solo árbol.
Un árbol, y encima cada servicio que un editor quiere. Todo se exporta desde la raíz del paquete.
Árbol de sintaxis
Nodos verdes inmutables compartidos entre ediciones, y nodos rojos encima con padres, rangos e ids estables.
GreenNodeRedNode
Análisis incremental
Re-analiza una ventana alrededor de cada edición y reutiliza todo lo de afuera.
applyChangeIncrementalParser
Diagnósticos y arreglos
Etiquetas sin cerrar, cruzadas o desconocidas, URLs inseguras y trampas de osu!, cada una con su arreglo rápido o un Arreglar todo.
queryLightbulbfixAll
Fidelidad con osu!
Las reglas de emparejado y saltos de línea del propio osu!, con una vista previa que parchea el DOM bloque a bloque.
OsuPreviewTreepairing: 'osu'
Lienzo WYSIWYG
Un contenteditable donde negrita, Enter y pegar se vuelven ediciones mínimas que respetan los espacios del autor.
CanvasDocument
Render y exportación
HTML con temas de osu! y Lyne, SVG, BBCode por dialecto, Markdown, JSON y Tiptap.
HTMLRendererBBCodeExporter
Efectos de texto
Degradados, arcoíris y ondas horneados en BBCode, mezclados en OKLab.
evaluateEffectmixHexOklab
Anclas y colaboración
Rangos que siguen al texto entre ediciones y recargas, y transformaciones para un CRDT de texto.
AnchorSettransformRange
Cada promesa tiene quien la haga cumplir.
Una garantía que nada hace cumplir es una esperanza. Cada una de estas la sostiene el sistema de tipos, un constructor, el validador del árbol o una prueba de propiedades.
| Promesa | La hace cumplir |
|---|---|
| Ninguna entrada lanza una excepción. Pasados 256 niveles de anidación, el resto queda como texto, con un aviso. | 20.000 niveles de anidación en siete formas, por cada fase |
| Cada hoja de texto contiene exactamente los caracteres que cubre su rango. | El validador del árbol, tras cada reconstrucción y re-análisis |
| Un re-análisis incremental construye el mismo árbol que uno completo. | 144.000 ediciones al azar, 0 divergencias |
| Publicar nunca depende de la presentación. | Una prueba que recorre todo el grafo de imports |
| Un arreglo automático nunca cambia lo que ve el lector. | Cada hallazgo automático del corpus, renderizado antes y después |
| Un ancla nunca se mueve en silencio. | 80 semillas al azar, 0 errores silenciosos |
Preguntas que quizá tengas.
Respuestas cortas, con el número o el archivo que sostiene cada una.
¿Quasar es lo mismo que Quasar Framework?
No. Quasar Framework es un framework de interfaz para Vue.js, mantenido por otro proyecto. Quasar, aquí, es un motor de documentos BBCode escrito en TypeScript por Miliastry: un analizador, un diagnosticador, un formateador y un exportador. Comparten el nombre y nada más.
¿Miliastry es solo un editor de BBCode?
No. Miliastry es un estudio creativo de ventanas para userpages de osu!. El editor de código, el lienzo visual, la vista previa de osu!, Text Studio y el espacio de trabajo son vistas de un mismo documento; el BBCode es el formato que habla, no el producto.
¿Qué lo convierte en motor de documentos y no en un parser de BBCode?
Un parser convierte texto en un árbol. Quasar además es dueño del árbol: nodos verdes inmutables compartidos entre ediciones, nodos rojos con padres, rangos e ids estables, re-análisis incremental, diagnósticos con arreglos, anclas que sobreviven a las ediciones y exportadores a BBCode de osu!, Markdown, JSON, HTML y Tiptap. Los editores se construyen encima, no dentro.
¿Lanza excepciones con entrada malformada?
No. Cualquier texto produce un árbol válido: etiquetas sin cerrar, cruzadas, desconocidas y 20.000 niveles de anidamiento siguen siendo texto, con un aviso. Una página no puede romper el editor.
¿Qué dialectos de BBCode soporta?
Tres: osu, con su propio conjunto de etiquetas y reglas de emparejamiento; miliastry, el superconjunto en el que se edita dentro del estudio; y lyne, el tema con el que se renderizan las páginas. Cada exportador apunta a un dialecto, así que un degradado que osu! no tiene se pinta con un color por letra.
¿Qué tan rápida es una edición?
En un documento de 547 KB, 0,30 ms por pulsación en prosa y una mediana de 0,89 ms en ediciones aleatorias, frente a los 16,7 ms que dura un fotograma a 60 Hz. El 96,4% de la escritura real en el corpus de 65 documentos de Miliastry se resuelve de forma incremental, y un análisis repetido sin edición no cuesta nada.
¿Corre en el navegador?
Sí. Es TypeScript puro, sin dependencias en runtime, y corre en el navegador, Node.js, Bun, Deno y Tauri. El playground de esta página importa el motor real después del primer pintado y hace fuzzing de mil documentos en tu pestaña.
¿Cuánto de Miliastry está construido sobre él?
156 archivos fuente importan @miliastry/quasar. El editor de código, la vista previa de osu!, el verificador de errores, el lienzo visual, Text Studio, las anclas y la exportación leen y escriben a través del mismo árbol, y por eso no pueden contradecirse.
¿Qué licencia tiene?
Código disponible bajo la Miliastry Source License (MSL-1.1). El código, los tests y la documentación son públicos en github.com/AegleWorks/quasar-engine.
¿Cómo se instala?
Desde GitHub Packages: agrega @miliastry:registry=https://npm.pkg.github.com/ a .npmrc y luego npm install @miliastry/quasar. Tres líneas van del texto al árbol: new BBCodeDocumentModel({ source, dialect }), doc.applyChange(...) y new BBCodeExporter({ target: 'osu' }).export(doc.redRoot).
Tres líneas hasta un árbol.
Dentro del monorepo de Miliastry es el workspace @miliastry/quasar. En cualquier otro lado, instálalo desde GitHub Packages.
- Agrega el registro a
.npmrc@miliastry:registry=https://npm.pkg.github.com/ - Instala
npm install @miliastry/quasar
import { BBCodeDocumentModel, BBCodeExporter } from '@miliastry/quasar'
const doc = new BBCodeDocumentModel({
source: '[b]Hello[/b] [color=#ff0000]world',
dialect: 'osu',
})
doc.toHTML()
// <span class="bb-paragraph"><strong>Hello</strong> …</span>
doc.diagnostics?.items
// [{ severity: 'warning', code: 'unclosed-tag', … }]
doc.applyChange({ start: 3, end: 8, text: 'Hi' })
new BBCodeExporter({ target: 'osu' }).export(doc.redRoot!)
// [b]Hi[/b] [color=#ff0000]world[/color]
El motor entero, sus pruebas y su documentación están en GitHub. O abre Miliastry y míralo funcionar debajo de un editor.
github.com/AegleWorks/quasar-engine
Código disponible bajo la Miliastry Source License (MSL-1.1).