You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-**JavaScript** ([`javascript.ts`](javascript.ts)) — the standalone ECMAScript base TypeScript [builds on](#adding-a-language) (subset → superset); parses real-world JS, with less conformance-corpus depth than TS so far.
11
11
-**HTML** ([`html.ts`](html.ts)) — the engine reaching *past token streams into markup*; ~95 lines, validated against [`parse5`](https://github.com/inikulin/parse5).
12
-
-**Vue** ([`vue.ts`](vue.ts)) — a dialect of `html.ts`: SFC blocks that embed Monogram's own TS/JS/CSS, plus directives and `{{ }}` interpolation.
12
+
-**YAML** ([`yaml.ts`](yaml.ts)) — indentation-sensitive markup on the shared engine; validated against the maintained [RedCMD/YAML-Syntax-Highlighter](https://github.com/RedCMD/YAML-Syntax-Highlighter).
13
+
14
+
## Used by
15
+
16
+
Projects shipping Monogram-derived grammars:
17
+
18
+
-[**vuejs/language-tools**](https://github.com/vuejs/language-tools) — the Vue TextMate grammars + VS Code language configuration ([vuejs/language-tools#6085](https://github.com/vuejs/language-tools/pull/6085)).
19
+
20
+
Using Monogram in your project? Open a PR to add it here.
13
21
14
22
## Quick start
15
23
@@ -77,7 +85,6 @@ This matters because `tsc`'s *parser* is not the same thing as the language. It
77
85
| TSX | 96.7% · 65.7% | 95.6% vs 95.4% |
78
86
| HTML | 95.3% · 49.3% | 100.0% vs 98.8% |
79
87
| YAML | 100.0% · 73.9% | 100.0% vs 99.5% |
80
-
| Vue | — | 98.0% vs 98.0% |
81
88
<!-- coverage:end -->
82
89
83
90
Measured against the *maintained* official grammar where it matters, not a dead bundle: JS/TS use Microsoft's maintained [TypeScript-TmLanguage](https://github.com/microsoft/TypeScript-TmLanguage); YAML uses the maintained [RedCMD/YAML-Syntax-Highlighter](https://github.com/RedCMD/YAML-Syntax-Highlighter) that VS Code switched to ([microsoft/vscode#232244](https://github.com/microsoft/vscode/pull/232244)); only HTML's baseline is the unmaintained [textmate/html.tmbundle](https://github.com/textmate/html.tmbundle) — the #203212 case Monogram targets.
@@ -88,7 +95,7 @@ Take the bugs reported against each *hand-written* official grammar and ask whet
88
95
89
96
<!-- issues:start -->
90
97
<!-- generated by `npm run bench:issues` — do not edit by hand -->
91
-
_Each hand-written **official** grammar vs Monogram's **derived** one, on the bugs filed against it: **TypeScript 26/26** (official 8/26) · **TSX 11/11** (official 5/11) · **HTML 20/20** (official 13/20) · **Vue 23/23** (official 18/23) · **YAML 8/8** (official 8/8). Per-issue detail below — auto-generated by `npm run bench:issues`._
98
+
_Each hand-written **official** grammar vs Monogram's **derived** one, on the bugs filed against it: **TypeScript 26/26** (official 8/26) · **TSX 11/11** (official 5/11) · **HTML 20/20** (official 13/20) · **YAML 8/8** (official 8/8). Per-issue detail below — auto-generated by `npm run bench:issues`._
92
99
93
100
#### TypeScript
94
101
| issue | Monogram | official |
@@ -180,40 +187,6 @@ _Each hand-written **official** grammar vs Monogram's **derived** one, on the bu
180
187
181
188
</details>
182
189
183
-
#### Vue
184
-
| issue | Monogram | official |
185
-
|---|:--:|:--:|
186
-
|[#6007](https://github.com/vuejs/language-tools/issues/6007)/[#2096](https://github.com/vuejs/language-tools/issues/2096)/[#520](https://github.com/vuejs/language-tools/issues/520) — `as` type assertion in directive value | ✓ | · |
187
-
|[#2060](https://github.com/vuejs/language-tools/issues/2060)-inline — `` const a = 1;</script> `` (content on the close line) embeds + clean close | ✓ | · |
188
-
|[#2060](https://github.com/vuejs/language-tools/issues/2060)-inline-adjacent — an unterminated union before a same-line `` </script> ``, then a second `<script setup>` block | ✓ | · |
189
-
|[#5660](https://github.com/vuejs/language-tools/issues/5660) — `as const` cast in a v-for value | ✓ | · |
190
-
|[#4716](https://github.com/vuejs/language-tools/issues/4716)/[#5571](https://github.com/vuejs/language-tools/issues/5571) — `as` cast followed by another attribute | ✓ | · |
191
-
192
-
<details><summary>… and 18 more both grammars already handle (✓ / ✓)</summary>
|[#3999](https://github.com/vuejs/language-tools/issues/3999) — a force-wrapped multi-line `<script lang="ts">` start tag keeps the body as the `ts` family (no .ts→.js flip) | ✓ | ✓ |
204
-
|[#4769](https://github.com/vuejs/language-tools/issues/4769) — tag name starting with `template`| ✓ | ✓ |
|[#2666](https://github.com/vuejs/language-tools/issues/2666) — dynamic slot name from a template literal | ✓ | ✓ |
213
-
|[#2560](https://github.com/vuejs/language-tools/issues/2560)/[#1290](https://github.com/vuejs/language-tools/issues/1290) — `type` as a v-for loop variable | ✓ | ✓ |
214
-
215
-
</details>
216
-
217
190
#### YAML
218
191
_No asymmetries — both grammars handle all 8 filed bugs below._
219
192
@@ -233,7 +206,7 @@ _No asymmetries — both grammars handle all 8 filed bugs below._
233
206
</details>
234
207
<!-- issues:end -->
235
208
236
-
<sub>A sampled ledger of real tracker issues, not an exhaustive audit. Run `npm run bench:issues` to regenerate (needs the official grammars: VS Code's installed TS/JS/HTML, and the Vue fixtures — see [`test/vue-bench.ts`](test/vue-bench.ts)). Sources: [`test/issue-cases.ts`](test/issue-cases.ts), [`test/html-issue-cases.ts`](test/html-issue-cases.ts), [`test/vue-issue-cases.ts`](test/vue-issue-cases.ts).</sub>
209
+
<sub>A sampled ledger of real tracker issues, not an exhaustive audit. Run `npm run bench:issues` to regenerate (needs the official grammars: VS Code's installed TS/JS/HTML). Sources: [`test/issue-cases.ts`](test/issue-cases.ts), [`test/html-issue-cases.ts`](test/html-issue-cases.ts).</sub>
237
210
238
211
239
212
### The ceiling — and the bar for claiming it
@@ -363,7 +336,7 @@ const Regex = token(seq(
363
336
});
364
337
```
365
338
366
-
[`test/agnostic.ts`](test/agnostic.ts) proves it directly — the same engine parses a toy grammar whose identifier token is `Word`, with no templates or regex. The deeper proof is [`html.ts`](html.ts): markup shares *nothing* with TypeScript's token stream, yet the same engine handles it (and Vue layers SFC blocks + `{{ }}` interpolation on top).
339
+
[`test/agnostic.ts`](test/agnostic.ts) proves it directly — the same engine parses a toy grammar whose identifier token is `Word`, with no templates or regex. The deeper proof is [`html.ts`](html.ts): markup shares *nothing* with TypeScript's token stream, yet the same engine handles it.
367
340
368
341
## Adding a language
369
342
@@ -373,7 +346,7 @@ A new language is **one grammar file** on the unchanged engine:
373
346
2.**Prove it as a parser** against the language's own official test suite, measured **bidirectionally** (accept what the reference accepts, reject what it rejects).
374
347
3.**Drop in the official TextMate grammar** as the baseline, so highlighter coverage is measured against what you're replacing, not asserted.
375
348
376
-
The lexer, CST types, and all three highlighters fall out of step 1; a *dialect* (`.tsx`/`.jsx` via [`jsx.ts`](jsx.ts), or Vue on [`html.ts`](html.ts)) reuses a base grammar's rules by name in a few lines. The conformance/highlighter harnesses are currently TypeScript-specific (they call `tsc` and read VS Code's grammar) — point them at your own reference compiler.
349
+
The lexer, CST types, and all three highlighters fall out of step 1; a *dialect* (`.tsx`/`.jsx`, or a markup dialect on [`html.ts`](html.ts)) reuses a base grammar's rules by name in a few lines. The conformance/highlighter harnesses are currently TypeScript-specific (they call `tsc` and read VS Code's grammar) — point them at your own reference compiler.
377
350
378
351
## Known differences from the official highlighter
0 commit comments