feat(vscode): derive the Vue TextMate grammars with Monogram

[johnsoncodehk]

Draft / proposal — for evaluation. Replaces the hand-written Vue TextMate grammars and the VS Code language configuration with output generated by Monogram, pinned here as a github dependency.

Architecture

• Monogram is a pinned github devDependency ("monogram": "github:johnsoncodehk/monogram#<commit>" in extensions/vscode/package.json). Its engine (gen-tm, gen-vscode-config) and the reused HTML base (html.ts) come from the dependency; the Vue grammar definition lives in this repo as vue.monogram.ts.
• scripts/generate-grammar.ts produces, from that one source, the three TextMate grammars (vue.tmLanguage.json + the vue.directives / vue.interpolations injections) and the language configuration (languages/vue-language-configuration.json). It needs only Monogram's own source — no other deps.
• npm run gen:grammar regenerates + formats; a grammar.spec.ts guard fails if the committed output drifts from vue.monogram.ts + the pinned commit. (Generation runs via node --import scripts/strip-node-modules-types.mjs, a small load hook, because Node won't type-strip .ts under node_modules; the tests run under vitest, which handles them directly.)

Language configuration is now generated

Monogram gained markup language-config support: for a grammar with markup, generateLanguageConfig derives the tag-aware onEnterRules / indentationRules, region folding from the comment delimiters, comment + embedded-language brackets, and the word pattern — all from the markup data (void / raw-text tag sets, comment delimiters, embed scopes), gated so the token-stream grammars (TS / JS / YAML) are unaffected and the agnostic gate still passes. The result is at parity with the hand-written vue-language-configuration.json.

Test coverage

Monogram's Vue correctness gates move here, run against the generated grammar (extensions/vscode/tests/vue-highlight.spec.ts, on the same vscode-tmlanguage-snapshot engine + the real VS Code embedded grammars): directive / {{ }} injection, embed boundaries (#1666 </script>, #5012 as-cast, #3999 multi-line start tag), interpolation expression scoping, <style lang="X"> dialect embedding, and the reported-issue regression corpus below. npm run test:grammar runs these gates alongside the snapshot, so bumping the pinned monogram commit and breaking tokenization fails the sync workflow.

Reported-issue coverage

The regression corpus verifies the generated grammar against issues filed on the hand-written Vue grammar — it improves on 5 and matches on 18.

issue	generated	hand-written
#6007/#2096/#520 — as type assertion in directive value	✓	·
#2060-inline — const a = 1;</script> (content on the close line) embeds + clean close	✓	·
#2060-inline-adjacent — an unterminated union before a same-line </script>, then a second <script setup> block	✓	·
#5660 — as const cast in a v-for value	✓	·
#4716/#5571 — as cast followed by another attribute	✓	·

… and 18 more both the generated and hand-written grammar handle (✓ / ✓)

issue	generated	hand-written
#3400 — instanceof in {{ }}	✓	✓
#5370 — typeof x !== in v-if	✓	✓
#5118 — ?. / ?? in {{ }}	✓	✓
#1675 — arrow => in {{ }}	✓	✓
#6039/#4741 — < operator in {{ }} (not a tag!)	✓	✓
#5722 — negated ternary + quotes in {{ }}	✓	✓
#5538/#2060 — trailing export type before </script>	✓	✓
#3999 — a force-wrapped multi-line <script lang="ts"> start tag keeps the body as the ts family	✓	✓
#4769 — tag name starting with template	✓	✓
#5701 — {{ inside a <script> string	✓	✓
#6070 — capitalized component then a <style> block	✓	✓
#4291 — <script lang="tsx"> body embeds the declared source.tsx	✓	✓
#4291-jsx — <script lang="jsx"> body embeds the declared source.js.jsx	✓	✓
generic="T" — generic="T extends U"> type-param list embeds as TS	✓	✓
#4410 — dynamic directive argument :[attr]	✓	✓
#3727 — .prop modifier shorthand	✓	✓
#2666 — dynamic slot name from a template literal	✓	✓
#2560/#1290 — type as a v-for loop variable	✓	✓

Keeping in sync with Monogram

.github/workflows/sync-grammar.yml (daily + workflow_dispatch) bumps the pinned monogram commit in package.json to monogram master, runs pnpm install, regenerates, and commits any change — a reviewable, reproducible pin (recorded in pnpm-lock.yaml), replacing the old curl of pre-built JSON.

Behaviour

Regenerated from monogram master: the SFC raw-text close rules are restructured and the block close tags lowercased. The only tokenization change in the snapshot is template-in-template.vue, where a plain </template> close no longer leaks text.pug and now matches every other close tag. The grammar snapshot and the language-config drift guard are the best place to review the concrete impact.