# Vite Plugin Monaco Editor

A plugin to simplify loading the [Monaco Editor](https://github.com/Microsoft/monaco-editor) with [vite](https://vitejs.dev/).

* It uses Vite specific plugin hooks: configResolved, configureServer, transformIndexHtml.
* It uses esbuild to bundle worker in the `node_modules/.monaco` directory, via the `server.middlewares` proxy http server for the bundle worker. 

## Installing
```ts
// make sure you have it installed monaco-editor.

yarn add vite-plugin-monaco-editor -D

// or
npm install --save-dev vite-plugin-monaco-editor
```
## Using
* `vite.config.ts`:
```ts
import { defineConfig } from "vite";
import monacoEditorPlugin from "vite-plugin-monaco-editor"

export default defineConfig({
    plugins: [
        monacoEditorPlugin()
    ],
    
})

```
### Import all monaco functions
* `index.ts`:
```ts
import * as monaco from 'monaco-editor'


monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world")',
  language: 'javascript'
});
```


### Import part of monaco functions
The `import * as monaco from 'monaco-editor'` is import all features and languages of the Monaco Editor. Assume you only need part of the features and languages:

* `customMonaco.ts`
```ts
import 'monaco-editor/esm/vs/editor/editor.all.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';

 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

 export { monaco };

```
The Complete list of imports: [customMonaco.ts](test/src/mona/customMonaco.ts)

* `index.ts`
```ts
import {monaco} from './customMonaco.ts'
monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world")',
  language: 'javascript'
});
```



## Options

* `languageWorkers` (`string[]`) -  include only a subset of the languageWorkers supported.
  * default value: ['editorWorkerService', 'css', 'html', 'json', 'typescript'].
  *  Assuming only use css worker(editorWorkerService is must include base worker), you can set ['editorWorkerService', 'css']

* `customWorkers` (`IWorkerDefinition[]`) - include your custom worker.
  * default value: []
  * example value: `[{label: "graphql", entry: "monaco-graphql/esm/graphql.worker"}]`, The `entry` is relative path in the node_modules Or you can set absolute path.

* `publicPath` (`string`) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. Or you can set CDN e.g `https://unpkg.com/vite-plugin-monaco-editor@1.0.5/cdn`
    * default value: `monacoeditorwork`

* `globalAPI` (`boolean`) - specifies whether the editor API should be exposed through a global `monaco` object or not. This option is applicable to `0.22.0` and newer version of `monaco-editor`. Since `0.22.0`, the ESM version of the monaco editor does no longer define a global `monaco` object unless `global.MonacoEnvironment = { globalAPI: true }` is set ([change log](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md#0220-29012021)).
  * default value: `false`.



Some languages share the same web worker. If one of the following languages is included, you must also include the language responsible for instantiating their shared worker:

  | Language      | Instantiator  |
  | ------------- | ------------- |
  | javascript    | typescript    |
  | handlebars    | html          |
  | scss, less    | css           |


