Skip to content

Commit

Permalink
docs(monaco): update documentation to match the current API status (#255
Browse files Browse the repository at this point in the history
)
  • Loading branch information
elchininet authored Dec 23, 2024
1 parent 15fa6bf commit e5d68e9
Showing 1 changed file with 41 additions and 24 deletions.
65 changes: 41 additions & 24 deletions packages/monaco/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,16 @@ We assume you already know:
// my-lang.worker.ts
import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker';
import type * as monaco from 'monaco-editor-core';
import { createSimpleWorkerLanguageService, ServiceEnvironment } from '@volar/monaco/worker';
import type { LanguageServiceEnvironment } from '@volar/language-service';
import { createSimpleWorkerLanguageService } from '@volar/monaco/worker';
import { URI } from 'vscode-uri';

self.onmessage = () => {
worker.initialize((ctx: monaco.worker.IWorkerContext) => {
const env: ServiceEnvironment = {
workspaceFolder: 'file:///',
const env: LanguageServiceEnvironment = {
workspaceFolders: [
URI.parse('file:///'),
],
};
return createSimpleWorkerLanguageService({
workerContext: ctx,
Expand All @@ -48,16 +52,19 @@ self.onmessage = () => {
```diff
import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker';
import type * as monaco from 'monaco-editor-core';
-import { createSimpleWorkerLanguageService, ServiceEnvironment } from '@volar/monaco/worker';
+import { createTypeScriptWorkerLanguageService, ServiceEnvironment } from '@volar/monaco/worker';
+import * as ts from 'typescript';
+import { create as createTypeScriptPlugins } from 'volar-service-typescript';
+import { URI } from 'vscode-uri';
import type { LanguageServiceEnvironment } from '@volar/language-service';
-import { createSimpleWorkerLanguageService } from '@volar/monaco/worker';
+import { createTypeScriptWorkerLanguageService } from '@volar/monaco/worker';
import { URI } from 'vscode-uri';
+import { create as createTypeScriptServicePlugin } from 'volar-service-typescript';
+import ts from 'typescript';

self.onmessage = () => {
worker.initialize((ctx: monaco.worker.IWorkerContext) => {
const env: ServiceEnvironment = {
workspaceFolder: 'file:///',
const env: LanguageServiceEnvironment = {
workspaceFolders: [
URI.parse('file:///'),
],
};
- return createSimpleWorkerLanguageService({
+ return createTypeScriptWorkerLanguageService({
Expand All @@ -76,7 +83,7 @@ self.onmessage = () => {
],
languageServicePlugins: [
// ...
+ ...createTypeScriptPlugins(ts),
+ ...createTypeScriptServicePlugin(ts),
],
});
});
Expand All @@ -88,34 +95,38 @@ self.onmessage = () => {
```diff
import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker';
import type * as monaco from 'monaco-editor-core';
import { createTypeScriptWorkerLanguageService, ServiceEnvironment } from '@volar/monaco/worker';
import type { LanguageServiceEnvironment } from '@volar/language-service';
import { createTypeScriptWorkerLanguageService } from '@volar/monaco/worker';
import { URI } from 'vscode-uri';
+import { createNpmFileSystem } from '@volar/jsdelivr';
import * as ts from 'typescript';
import { create as createTypeScriptService } from 'volar-service-typescript';
import { create as createTypeScriptServicePlugin } from 'volar-service-typescript';
import ts from 'typescript';

self.onmessage = () => {
worker.initialize((ctx: monaco.worker.IWorkerContext) => {
const env: ServiceEnvironment = {
workspaceFolder: 'file:///',
typescript: {
uriToFileName: uri => uri.substring('file://'.length),
fileNameToUri: fileName => 'file://' + fileName,
},
const env: LanguageServiceEnvironment = {
workspaceFolders: [
URI.parse('file:///'),
],
};
+ env.fs = createNpmFileSystem();
return createTypeScriptWorkerLanguageService({
typescript: ts,
compilerOptions: {
// ...
},
uriConverter: {
asFileName: uri => uri.fsPath,
asUri: fileName => URI.file(fileName),
},
workerContext: ctx,
env,
languagePlugins: [
// ...
],
languageServicePlugins: [
// ...
createTypeScriptService(ts),
createTypeScriptServicePlugin(ts),
],
});
});
Expand All @@ -141,14 +152,14 @@ import myWorker from './my-lang.worker?worker';
### Setup Language Features and Diagnostics

```ts
import type { LanguageService } from '@volar/language-service';
import type { WorkerLanguageService } from '@volar/monaco/worker';
import { editor, languages, Uri } from 'monaco-editor-core';
import { activateMarkers, activateAutoInsertion, registerProviders } from '@volar/monaco';

languages.register({ id: 'my-lang', extensions: ['.my-lang'] });

languages.onLanguage('my-lang', () => {
const worker = editor.createWebWorker<LanguageService>({
const worker = editor.createWebWorker<WorkerLanguageService>({
moduleId: 'vs/language/my-lang/myLangWorker',
label: 'my-lang',
});
Expand All @@ -168,7 +179,13 @@ languages.onLanguage('my-lang', () => {
() => [Uri.file('/Foo.my-lang'), Uri.file('/Bar.my-lang')],
editor
);
registerProviders(worker, ['my-lang'], languages)
registerProviders(
worker,
['my-lang'],
// sync files
() => [Uri.file('/Foo.my-lang'), Uri.file('/Bar.my-lang')],
languages
)
});
```

Expand Down

0 comments on commit e5d68e9

Please sign in to comment.