feat(highlight): bundled TextMate TypeScript grammar for embedded contexts

claude · sinelaw · commit 6c3ef88be866 · 2026-07-24T01:49:16.000+03:00
diff --git a/crates/fresh-editor/build.rs b/crates/fresh-editor/build.rs
@@ -372,6 +372,7 @@ fn generate_syntax_packdump() -> Result<(), Box<dyn std::error::Error>> {
         ("src/grammars/earthfile.sublime-syntax", "Earthfile"),
         ("src/grammars/gomod.sublime-syntax", "Go Module"),
         ("src/grammars/vue.sublime-syntax", "Vue"),
+        ("src/grammars/typescript.sublime-syntax", "TypeScript"),
         ("src/grammars/svelte.sublime-syntax", "Svelte"),
         ("src/grammars/astro.sublime-syntax", "Astro"),
         ("src/grammars/hyprlang.sublime-syntax", "Hyprlang"),
diff --git a/crates/fresh-editor/src/grammars/typescript.sublime-syntax b/crates/fresh-editor/src/grammars/typescript.sublime-syntax
@@ -0,0 +1,117 @@
+%YAML 1.2
+---
+# TypeScript syntax highlighting for Fresh editor.
+#
+# NOTE: `.ts` buffers are highlighted by tree-sitter, not by this grammar —
+# the grammar catalog deliberately skips "TypeScript" the same way it skips
+# "JavaScript" (see grammar/types.rs). This grammar exists for embedded
+# contexts resolved by language token: Vue `<script lang="ts">` blocks and
+# Markdown ```ts fences (docs/internal/embedded-language-highlighting.md).
+name: TypeScript
+file_extensions:
+  - ts
+  - tsx
+  - mts
+  - cts
+scope: source.ts
+
+contexts:
+  main:
+    - include: comments
+    - include: template-strings
+    - include: strings
+    - include: decorators
+    - include: keywords
+    - include: numbers
+    - include: functions
+    - include: types
+
+  comments:
+    - match: '//'
+      scope: punctuation.definition.comment.ts
+      push:
+        - meta_scope: comment.line.double-slash.ts
+        - match: '$'
+          pop: true
+    - match: '/\*'
+      scope: punctuation.definition.comment.begin.ts
+      push:
+        - meta_scope: comment.block.ts
+        - match: '\*/'
+          scope: punctuation.definition.comment.end.ts
+          pop: true
+
+  strings:
+    - match: '"'
+      scope: punctuation.definition.string.begin.ts
+      push:
+        - meta_scope: string.quoted.double.ts
+        - match: '\\.'
+          scope: constant.character.escape.ts
+        - match: '"'
+          scope: punctuation.definition.string.end.ts
+          pop: true
+        - match: '$'
+          pop: true
+    - match: "'"
+      scope: punctuation.definition.string.begin.ts
+      push:
+        - meta_scope: string.quoted.single.ts
+        - match: '\\.'
+          scope: constant.character.escape.ts
+        - match: "'"
+          scope: punctuation.definition.string.end.ts
+          pop: true
+        - match: '$'
+          pop: true
+
+  template-strings:
+    - match: '`'
+      scope: punctuation.definition.string.begin.ts
+      push:
+        - meta_scope: string.quoted.template.ts
+        - match: '\\.'
+          scope: constant.character.escape.ts
+        - match: '\$\{[^}]*\}'
+          scope: variable.interpolation.ts
+        - match: '`'
+          scope: punctuation.definition.string.end.ts
+          pop: true
+
+  decorators:
+    - match: '@[A-Za-z_$][\w$]*'
+      scope: entity.name.decorator.ts
+
+  keywords:
+    - match: '\b(import|export|from|default|as)\b'
+      scope: keyword.other.ts
+    - match: '\b(if|else|for|while|do|switch|case|break|continue|return|try|catch|finally|throw|yield|await)\b'
+      scope: keyword.control.ts
+    - match: '\b(const|let|var|function|class|extends|implements|interface|type|enum|namespace|module|declare|abstract|readonly|public|private|protected|static|get|set|async|constructor|satisfies|infer|asserts|is|keyof|override|accessor)\b'
+      scope: keyword.declaration.ts
+    - match: '\b(new|delete|typeof|instanceof|void|in|of)\b'
+      scope: keyword.operator.ts
+    - match: '\b(true|false|null|undefined|NaN|Infinity|this|super|globalThis)\b'
+      scope: constant.language.ts
+
+  numbers:
+    - match: '\b0[xX][0-9a-fA-F_]+n?\b'
+      scope: constant.numeric.hex.ts
+    - match: '\b0[bB][01_]+n?\b'
+      scope: constant.numeric.binary.ts
+    - match: '\b0[oO][0-7_]+n?\b'
+      scope: constant.numeric.octal.ts
+    - match: '\b\d[\d_]*(\.[\d_]+)?([eE][+-]?\d+)?n?\b'
+      scope: constant.numeric.decimal.ts
+
+  functions:
+    - match: '(?<=\bfunction\s)[A-Za-z_$][\w$]*'
+      scope: entity.name.function.ts
+    - match: '\b[A-Za-z_$][\w$]*(?=\s*\()'
+      scope: variable.function.ts
+
+  types:
+    - match: '\b(string|number|boolean|any|unknown|never|object|symbol|bigint)\b'
+      scope: support.type.primitive.ts
+    - match: '\b[A-Z][\w$]*\b'
+      scope: support.class.ts
diff --git a/crates/fresh-editor/src/primitives/grammar/types.rs b/crates/fresh-editor/src/primitives/grammar/types.rs
@@ -236,6 +236,11 @@ pub const EARTHFILE_GRAMMAR: &str = include_str!("../../grammars/earthfile.subli
 pub const GOMOD_GRAMMAR: &str = include_str!("../../grammars/gomod.sublime-syntax");
 /// Embedded Vue grammar
 pub const VUE_GRAMMAR: &str = include_str!("../../grammars/vue.sublime-syntax");
+
+/// Embedded TypeScript grammar. Serves embedded contexts only (Vue
+/// `lang="ts"`, Markdown ```ts fences) — `.ts` buffers stay on
+/// tree-sitter via the catalog skip below, mirroring JavaScript.
+pub const TYPESCRIPT_GRAMMAR: &str = include_str!("../../grammars/typescript.sublime-syntax");
 /// Embedded Svelte grammar
 pub const SVELTE_GRAMMAR: &str = include_str!("../../grammars/svelte.sublime-syntax");
 /// Embedded Astro grammar
@@ -754,6 +759,7 @@ impl GrammarRegistry {
             (EARTHFILE_GRAMMAR, "Earthfile"),
             (GOMOD_GRAMMAR, "Go Module"),
             (VUE_GRAMMAR, "Vue"),
+            (TYPESCRIPT_GRAMMAR, "TypeScript"),
             (SVELTE_GRAMMAR, "Svelte"),
             (ASTRO_GRAMMAR, "Astro"),
             (HYPRLANG_GRAMMAR, "Hyprlang"),
@@ -1081,8 +1087,16 @@ impl GrammarRegistry {
         // still returns syntect's grammar via the catalog's fallback path,
         // so markdown popup rendering and other code-string highlighters
         // are unaffected.
+        //
+        // TypeScript is skipped for the same reason in reverse: its bundled
+        // grammar exists only for embedded contexts (Vue `lang="ts"`,
+        // Markdown ```ts fences, resolved via `find_syntax_by_token`), and
+        // `.ts` buffers must keep the richer tree-sitter highlighting.
         for (idx, syntax) in self.syntax_set.syntaxes().iter().enumerate() {
-            if syntax.name == "Plain Text" || syntax.name == "JavaScript" {
+            if syntax.name == "Plain Text"
+                || syntax.name == "JavaScript"
+                || syntax.name == "TypeScript"
+            {
                 continue;
             }
             let (language_id, tree_sitter) = derive_language_id(&syntax.name);
diff --git a/crates/fresh-editor/src/primitives/highlight_engine.rs b/crates/fresh-editor/src/primitives/highlight_engine.rs
@@ -2321,16 +2321,15 @@ mod tests {
         );
     }
 
-    /// A `lang` naming a language with no syntect grammar (TypeScript is
-    /// tree-sitter-only in fresh) falls back to the region's default
-    /// language rather than dropping highlighting entirely — `<script
-    /// lang=\"ts\">` is the dominant real-world Vue pattern.
+    /// A `lang` naming a language with no grammar in the set falls back
+    /// to the region's default language rather than dropping
+    /// highlighting entirely.
     #[test]
     fn test_vue_unresolvable_lang_falls_back_to_default() {
         let registry =
             GrammarRegistry::load(&crate::primitives::grammar::LocalGrammarLoader::embedded_only());
         let mut engine = HighlightEngine::for_file(Path::new("App.vue"), None, &registry);
-        let content = "<script setup lang=\"ts\">\nconst answer = 42;\n</script>\n";
+        let content = "<script setup lang=\"mysterylang\">\nconst answer = 42;\n</script>\n";
         let buffer = Buffer::from_str(content, 0, test_fs());
         let theme = Theme::load_builtin(theme::THEME_LIGHT).unwrap();
         let spans = engine.highlight_viewport(&buffer, 0, buffer.len(), &theme, 0);
@@ -2346,6 +2345,62 @@ mod tests {
         );
     }
 
+    /// `lang="ts"` resolves to the bundled TypeScript grammar — the
+    /// dominant real-world Vue pattern gets TS-aware highlighting
+    /// (`interface` is not a keyword to the JS default it previously
+    /// fell back to).
+    #[test]
+    fn test_vue_lang_ts_uses_typescript_grammar() {
+        let registry =
+            GrammarRegistry::load(&crate::primitives::grammar::LocalGrammarLoader::embedded_only());
+        let mut engine = HighlightEngine::for_file(Path::new("App.vue"), None, &registry);
+        let content =
+            "<script setup lang=\"ts\">\ninterface Greeting {\n  message: string;\n}\n</script>\n";
+        let buffer = Buffer::from_str(content, 0, test_fs());
+        let theme = Theme::load_builtin(theme::THEME_LIGHT).unwrap();
+        let spans = engine.highlight_viewport(&buffer, 0, buffer.len(), &theme, 0);
+
+        let category_at = |needle: &str| {
+            let position = content.find(needle).unwrap();
+            spans
+                .iter()
+                .find(|span| span.range.start <= position && position < span.range.end)
+                .and_then(|span| span.category)
+        };
+        assert_eq!(
+            category_at("interface"),
+            Some(HighlightCategory::Keyword),
+            "TS-only keyword must be styled by the TypeScript grammar"
+        );
+        assert_eq!(
+            category_at("string"),
+            Some(HighlightCategory::Type),
+            "TS primitive type must be styled by the TypeScript grammar"
+        );
+    }
+
+    /// Markdown ```ts fences resolve to the same TypeScript grammar.
+    #[test]
+    fn test_markdown_ts_fence_uses_typescript_grammar() {
+        let registry =
+            GrammarRegistry::load(&crate::primitives::grammar::LocalGrammarLoader::embedded_only());
+        let mut engine = HighlightEngine::for_file(Path::new("README.md"), None, &registry);
+        let content = "```ts\ntype Answer = number;\n```\n";
+        let buffer = Buffer::from_str(content, 0, test_fs());
+        let theme = Theme::load_builtin(theme::THEME_LIGHT).unwrap();
+        let spans = engine.highlight_viewport(&buffer, 0, buffer.len(), &theme, 0);
+
+        let position = content.find("type").unwrap();
+        assert_eq!(
+            spans
+                .iter()
+                .find(|span| span.range.start <= position && position < span.range.end)
+                .and_then(|span| span.category),
+            Some(HighlightCategory::Keyword),
+            "```ts fences must be parsed with the TypeScript grammar"
+        );
+    }
+
     #[test]
     fn test_tree_sitter_direct() {
         // Verify a tree-sitter highlighter can be created directly for a
diff --git a/docs/internal/embedded-language-highlighting.md b/docs/internal/embedded-language-highlighting.md
@@ -77,10 +77,16 @@ script and style), each with two scope selectors and an optional default:
 - `language_scope` — the scope the host grammar puts on the language
   token of the opening line (`constant.other.language-name` for both);
 - `default_language` — used when the opening line names no language *or*
-  names one that doesn't resolve to a syntax in the set. Vue uses js/css
-  (so `lang="ts"` — TypeScript has no TextMate grammar in fresh — gets
-  the standard JS approximation instead of nothing); Markdown uses
-  `None`, meaning such regions keep the host's own raw-code styling.
+  names one that doesn't resolve to a syntax in the set. Vue uses js/css;
+  Markdown uses `None`, meaning such regions keep the host's own raw-code
+  styling.
+
+A compact TextMate TypeScript grammar is bundled *solely* for embedded
+contexts (`lang="ts"` in Vue, ```ts fences): the grammar catalog skips it
+by name — mirroring the JavaScript skip — so `.ts` buffers keep the richer
+tree-sitter highlighting, while `find_syntax_by_token("ts")` still
+resolves it for regions. (Vendoring Sublime's official TS grammar is not
+an option: it needs `branch_point`, which no released syntect supports.)
 
 Per line, the host parser runs first (inside a region it is in a cheap
 "raw" context — it must run regardless, because only the host knows where
