TextMate & Tree-sitter Grammars
Relevant source files
The following files were used as context for generating this wiki page:
- modules/svelte-effect-runtime-grammars/src/mod.ts
- modules/svelte-effect-runtime-grammars/src/textmate.ts
- modules/svelte-effect-runtime-grammars/package.json
- modules/svelte-effect-runtime-grammars/README.md
- modules/svelte-effect-runtime-grammars/src/tree-sitter.ts
- modules/svelte-effect-runtime/src/compiler/source-scan.ts
The TextMate and Tree-sitter grammars within the Svelte Effect Runtime (SER) project provide the essential syntax highlighting and lexical analysis data required for SER-aware tooling. These grammars enable editors and development environments to recognize specific SER extensions to the Svelte syntax, such as the effect attribute in script tags and the use of yield* within Svelte markup.
These grammar assets are packaged in the svelte-effect-runtime-grammars module and are designed to be consumed by other tools like the SER Language Server and the VS Code extension. By providing these grammars, the project ensures that developers receive accurate visual feedback and editor support when writing effectful Svelte components.
Sources: modules/svelte-effect-runtime-grammars/README.md:1-5, modules/svelte-effect-runtime-grammars/package.json:1-5
Architecture and Integration
The grammar module acts as a provider of raw syntax data. It exports both TextMate JSON definitions for Shiki-compatible highlighters and Tree-sitter query bundles for structural analysis.
The diagram shows how the grammar module serves as the source for highlighting and language server analysis.
Sources: modules/svelte-effect-runtime-grammars/src/mod.ts:1-18, modules/svelte-effect-runtime-grammars/src/textmate.ts:106-124
TextMate Implementation
The TextMate grammar is implemented as an injection grammar. Rather than replacing the standard Svelte grammar, it targets the source.svelte scope to add SER-specific patterns.
Key Components
textmate_language: ATextMateLanguageRegistrationobject containing the raw patterns and repository for the grammar.TextMateGrammarBundle: A structured export that includes the language registration, scope name, and the target injection selector.- Injection Target: The grammar specifically targets
source.sveltevia itsinjectionSelector.
| Interface | Description |
|---|---|
TextMateRawRule | Defines a subset of a TextMate rule including match, begin/end, and captures. |
TextMateCaptureMap | A map of capture group IDs to their respective naming styles (e.g., keyword.control.ser.svelte). |
TextMateLanguageRegistration | The complete Shiki-compatible registration for the grammar. |
Sources: modules/svelte-effect-runtime-grammars/src/textmate.ts:7-104
Grammar Rules and Structure
The rules are designed to identify SER syntax like yield* and the effect attribute. The lexical scanner in the core runtime also identifies these regions to ensure consistency between the editor's view and the compiler's behavior.
The class diagram represents the data structure used to register TextMate grammars for editor support.
Sources: modules/svelte-effect-runtime-grammars/src/textmate.ts:60-85
Tree-sitter Integration
The Tree-sitter component provides query bundles used for deeper structural analysis and injections within the Svelte document structure.
Exported Assets
The package publishes specific Tree-sitter query files as subpaths:
tree-sitter/highlights.tsq: For syntax highlighting queries.tree-sitter/injections.tsq: For injecting SER-aware logic into existing Svelte syntax trees.
Sources: modules/svelte-effect-runtime-grammars/package.json:23-24, modules/svelte-effect-runtime-grammars/src/tree-sitter.ts:1-12
Lexical Synchronization
While the grammars handle editor-side visualization, the svelte-effect-runtime core includes a scan_svelte_effect_source function. This shared scanner ensures that the compiler's understanding of the source (e.g., finding <script effect> regions) matches the editor's highlighting.
| Scan Feature | Description |
|---|---|
ScriptRegion | Detects <script> tags, their lang (TS/JS), and the presence of the effect attribute. |
MarkupBraceExpression | Identifies {} expressions in markup, used to find yield* targets. |
BareConstDeclarationTag | Detects {const ...} tags that require normalization in the editor projection. |
Sources: modules/svelte-effect-runtime/src/compiler/source-scan.ts:50-142
Build and Distribution
The grammar module uses a specific build pipeline to generate the distribution assets from source query and JSON files.
The build process for the grammar module involving cleaning, node-based asset generation, and TypeScript compilation.
Sources: modules/svelte-effect-runtime-grammars/package.json:28-32
Published Subpaths
Tooling can import raw assets directly from the npm package:
svelte-effect-runtime-grammars/textmate/svelte-effect-runtime.tmLanguage.jsonsvelte-effect-runtime-grammars/tree-sitter/highlights.tsqsvelte-effect-runtime-grammars/tree-sitter/injections.tsq
Sources: modules/svelte-effect-runtime-grammars/README.md:7-11
Conclusion
The TextMate and Tree-sitter grammars are the foundational blocks for the Svelte Effect Runtime's developer experience. By providing standard-compliant syntax definitions, the project enables high-fidelity highlighting and structural analysis in modern editors, bridging the gap between standard Svelte and SER's effectful syntax extensions.