|
2 | 2 | title: Languages |
3 | 3 | --- |
4 | 4 |
|
5 | | -> This page is a stub. Interested in contributing some documentation to it, or want to improve it? [Edit this page on GitHub](https://github.com/volarjs/docs/blob/main/src/content/docs/reference/languages.mdx) |
| 5 | +> This page is a work in progress. Interested in contributing some documentation to it, or want to improve it? [Edit this page on GitHub](https://github.com/volarjs/docs/blob/main/src/content/docs/reference/languages.mdx) |
| 6 | +
|
| 7 | +As can be expected from a framework for language servers, Volar allows you to define the languages you want to support in your project. |
| 8 | + |
| 9 | +## Shape of a language definition |
| 10 | + |
| 11 | +A language definition is a JavaScript object that contains a `createVirtualCode` and a `updateVirtualCode` function. |
| 12 | + |
| 13 | +```ts title="src/my-language.ts" |
| 14 | +export const language = { |
| 15 | + createVirtualCode(fileId, languageId, snapshot) { |
| 16 | + // Create a virtual code object |
| 17 | + }, |
| 18 | + updateVirtualCode(_fileId, languageCode, snapshot) { |
| 19 | + // Update the virtual code object |
| 20 | + }, |
| 21 | +}; |
| 22 | +``` |
| 23 | + |
| 24 | +As the names suggests, those methods create and update a `VirtualCode`. A `VirtualCode` object is created for each file that your language server will handle. These can then be accessed in the hooks of the [services](/reference/services) that provides the features of your language server, as such they're also a place you can store additional information about the file that could be useful to know for the features of your services. |
| 25 | + |
| 26 | +Albeit not required, a common pattern is to define a JavaScript class that implements the `VirtualCode` interface, as this makes it easier to later add more properties and methods to the virtual code object and unlock the ability to use `instanceof` to check if a virtual code object is of a certain type. |
| 27 | + |
| 28 | +```ts title="src/my-language.ts" |
| 29 | +import type { LanguagePlugin, VirtualCode } from '@volar/language-core'; |
| 30 | + |
| 31 | +export const language = { |
| 32 | + createVirtualCode(fileId, languageId, snapshot) { |
| 33 | + if (languageId !== 'my-language') |
| 34 | + return; |
| 35 | + |
| 36 | + return new MyLanguageVirtualCode(snapshot); |
| 37 | + }, |
| 38 | + updateVirtualCode(_fileId, languageCode, snapshot) { |
| 39 | + languageCode.update(snapshot); |
| 40 | + return languageCode; |
| 41 | + }, |
| 42 | +} satisfies LanguagePlugin<MyLanguageVirtualCode>; |
| 43 | + |
| 44 | +export class MyLanguageVirtualCode implements VirtualCode { |
| 45 | + id = 'root'; |
| 46 | + languageId = 'my-language'; |
| 47 | + mappings = [] |
| 48 | + |
| 49 | + constructor( |
| 50 | + public snapshot: ts.IScriptSnapshot |
| 51 | + ) { |
| 52 | + this.onSnapshotUpdated(); |
| 53 | + } |
| 54 | + |
| 55 | + public update(newSnapshot: ts.IScriptSnapshot) { |
| 56 | + this.snapshot = newSnapshot; |
| 57 | + this.onSnapshotUpdated(); |
| 58 | + } |
| 59 | + |
| 60 | + onSnapshotUpdated() { |
| 61 | + // Update the virtual code object |
| 62 | + } |
| 63 | +} |
| 64 | +``` |
| 65 | + |
| 66 | +This is a simple example of a language definition, where `MyVirtualLanguageCode` only does the strict minimum possible. In a real language definition, you would most likely have a lot more properties and methods available on the `MyLanguageVirtualCode` class. |
| 67 | + |
| 68 | +### Embedded languages |
| 69 | + |
| 70 | +If your language supports [embedded languages](/core-concepts/embedded-languages/), your instance `VirtualCode` should include a `embeddedCodes` property that contains an array of `VirtualCode` instances for the embedded languages. |
| 71 | + |
| 72 | +```ts title="src/my-language.ts" ins={20, 34-52} collapse={1-14, 22-31} |
| 73 | +import type { LanguagePlugin, VirtualCode } from '@volar/language-core'; |
| 74 | + |
| 75 | +export const language = { |
| 76 | + createVirtualCode(fileId, languageId, snapshot) { |
| 77 | + if (languageId !== 'my-language') |
| 78 | + return; |
| 79 | + |
| 80 | + return new MyLanguageVirtualCode(snapshot); |
| 81 | + }, |
| 82 | + updateVirtualCode(_fileId, languageCode, snapshot) { |
| 83 | + languageCode.update(snapshot); |
| 84 | + return languageCode; |
| 85 | + }, |
| 86 | +} satisfies LanguagePlugin<MyLanguageVirtualCode>; |
| 87 | + |
| 88 | +export class MyLanguageVirtualCode implements VirtualCode { |
| 89 | + id = 'root'; |
| 90 | + languageId = 'my-language'; |
| 91 | + mappings = [] |
| 92 | + embeddedCodes: VirtualCode[] = [] |
| 93 | + |
| 94 | + constructor( |
| 95 | + public snapshot: ts.IScriptSnapshot |
| 96 | + ) { |
| 97 | + this.onSnapshotUpdated(); |
| 98 | + } |
| 99 | + |
| 100 | + public update(newSnapshot: ts.IScriptSnapshot) { |
| 101 | + this.snapshot = newSnapshot; |
| 102 | + this.onSnapshotUpdated(); |
| 103 | + } |
| 104 | + |
| 105 | + onSnapshotUpdated() { |
| 106 | + const snapshotContent = this.snapshot.getText(0, this.snapshot.getLength()); |
| 107 | + |
| 108 | + // Find embedded languages |
| 109 | + const embeddedLanguages = findEmbeddedLanguages(snapshotContent); |
| 110 | + |
| 111 | + // Create virtual code objects for embedded languages |
| 112 | + this.embeddedCodes = embeddedLanguages.map(embeddedLanguage => { |
| 113 | + return { |
| 114 | + id: embeddedLanguage.id, |
| 115 | + languageId: embeddedLanguage.languageId, |
| 116 | + mappings: [], |
| 117 | + snapshot: { |
| 118 | + getText: (start, end) => embeddedLanguage.content.substring(start, end), |
| 119 | + getLength: () => embeddedLanguage.content.length, |
| 120 | + getChangeRange: () => undefined, |
| 121 | + } |
| 122 | + } |
| 123 | + }); |
| 124 | + } |
| 125 | +} |
| 126 | +``` |
0 commit comments