# @kocan/monaco

> `@kocan/monaco` is used to bridge the language capabilities implemented based on Kocan.js to Monaco Editor, you can expect:

Latest version **1.5.0** (published 2023-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kocan/monaco
pnpm add @kocan/monaco
yarn add @kocan/monaco
bun add @kocan/monaco
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2023-12-17 |
| First published | 2023-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 72.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nkduy |

## Links

- npm: https://www.npmjs.com/package/@kocan/monaco
- Repository: https://github.com/kocanjs/kocan.js
- Homepage: https://github.com/kocanjs/kocan.js#readme
- Issues: https://github.com/kocanjs/kocan.js/issues
- npm.io page: https://npm.io/package/@kocan/monaco

## Dependencies (4)

- [vscode-uri](https://npm.io/package/vscode-uri.md) ^3.0.7
- [monaco-editor-core](https://npm.io/package/monaco-editor-core.md) ^0.36.0
- [@kocan/language-service](https://npm.io/package/@kocan/language-service.md) 1.5.0
- [vscode-languageserver-protocol](https://npm.io/package/vscode-languageserver-protocol.md) ^3.17.3

## Recent versions

- 1.5.0 (latest) — 2023-12-17
- 1.3.0-alpha.0 (next) — 2023-06-14
- 1.2.2 — 2023-06-14

## README

# @kocan/monaco

`@kocan/monaco` is used to bridge the language capabilities implemented based on Kocan.js to Monaco Editor, you can expect:

- Support IntelliSense, Diagnosis, Formatting
- Language behavior is consistent with regular IDEs
- Optimized Performance
- Missing package types are automatically fetched from CDN

It should be noted that this package does not participate in syntax highlighting support and language configuration.

We assume you already know:

- How to create a Monaco Editor
- How to work with Web Worker

## Usage

### Setup worker

```ts
// 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 { createLanguageService } from '@kocan/monaco/worker';

self.onmessage = () => {
	worker.initialize((ctx: monaco.worker.IWorkerContext) => {
		return createLanguageService({
			workerContext: ctx,
			config: {
				// ...Language Service Config of my-lang language support
			},
		});
	});
};
```

#### TypeScript Support

```ts
import { createLanguageService } from '@kocan/monaco/worker';
import * as ts from 'typescript';

createLanguageService({
	// ...
	typescript: {
		module: ts as any,
		compilerOptions: {
			// ...tsconfig options
		},
	},
	// Enable auto fetch node_modules types
	dtsHost: createDtsHost('https://unpkg.com/', { typescript: '4.9.5' }),
});
```

### Add worker loader to global env

```ts
import editorWorker from 'monaco-editor-core/esm/vs/editor/editor.worker?worker';
import myWorker from './my-lang.worker?worker';

(self as any).MonacoEnvironment = {
	getWorker(_: any, label: string) {
		if (label === 'my-lang') {
			return new myWorker();
		}
		return new editorWorker();
	}
}
```

### Setup Language Features and Diagnostics

```ts
import type { LanguageService } from '@kocan/language-service';
import { editor, languages, Uri } from 'monaco-editor-core';
import * as KocanMonaco from '@kocan/monaco';

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

languages.onLanguage('my-lang', () => {
	const worker = editor.createWebWorker<LanguageService>({
		moduleId: 'vs/language/my-lang/myLangWorker',
		label: 'my-lang',
	});
	KocanMonaco.editor.activateMarkers(
		worker,
		['my-lang'],
		'my-lang-markers-owner',
		// sync files
		() => [Uri.file('/Foo.my-lang'), Uri.file('/Bar.my-lang')],
		editor
	);
	// auto close tags
	KocanMonaco.editor.activateAutoInsertion(
		worker,
		['my-lang'],
		// sync files
		() => [Uri.file('/Foo.my-lang'), Uri.file('/Bar.my-lang')],
		editor
	);
	KocanMonaco.languages.registerProvides(worker, ['my-lang'], languages)
});
```

---
_Source: https://npm.io/package/@kocan/monaco · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._