dan/monaco-yaml
1
0
Fork 0
mirror of https://github.com/danbulant/monaco-yaml synced 2026-07-05 19:10:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into vite-example

Browse source
This commit is contained in:
Remco Haszing 2021-11-15 17:09:35 +01:00
commit 2a80dc8913
No known key found for this signature in database
GPG key ID: 40D9F5FE9155FD3C
7 changed files with 11270 additions and 1918 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
examples/monaco-editor-webpack-plugin/README.md Normal file
View file

@ -0,0 +1,14 @@
# Monaco Editor Webpack Loader Plugin Example
This demo demonstrates how bundle `monaco-editor` and `monaco-yaml` with
[monaco-editor-webpack-plugin](https://github.com/microsoft/monaco-editor-webpack-plugin). The build
output is [esm library](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).
Example is based on
[link](https://github.com/microsoft/monaco-editor-samples/tree/main/browser-esm-webpack-monaco-plugin).
To start it, simply run:
```sh
npm start
```
The demo will open in your browser.

7
examples/monaco-editor-webpack-plugin/editor.js Normal file
View file

@ -0,0 +1,7 @@
// eslint-disable-next-line import/extensions
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
// eslint-disable-next-line import/extensions
export { editor } from 'monaco-editor/esm/vs/editor/editor.api.js';
export { setDiagnosticsOptions } from 'monaco-yaml';
export default monaco;

20
examples/monaco-editor-webpack-plugin/index.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Monaco Editor Webpack Plugin Example</title>
<style>
.editor {
width: 800px;
height: 600px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="editor"></div>
<script src="index.js" type="module"></script>
</body>
</html>

17
examples/monaco-editor-webpack-plugin/index.js Normal file
View file

@ -0,0 +1,17 @@
const value = `
number: 0xfe
boolean: true
`;
async function create() {
// eslint-disable-next-line import/extensions
const monaco = await import('./main.js');
monaco.editor.create(document.querySelector('.editor'), {
language: 'yaml',
tabSize: 2,
value,
});
}
create();

20
examples/monaco-editor-webpack-plugin/package.json Normal file
View file

@ -0,0 +1,20 @@
{
"name": "monaco-editor-webpack-plugin-example",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"start": "webpack serve --open --mode development",
"build": "webpack --mode production"
},
"dependencies": {
"monaco-editor": "^0.30.0",
"monaco-yaml": "file:../..",
"css-loader": "^6.0.0",
"style-loader": "^3.0.0",
"monaco-editor-webpack-plugin": "^6.0.0",
"webpack": "^5.0.0",
"webpack-cli": "^4.0.0",
"webpack-dev-server": "^4.0.0"
}
}

58
examples/monaco-editor-webpack-plugin/webpack.config.js Normal file
View file

@ -0,0 +1,58 @@
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
export default {
entry: './editor.js',
output: {
filename: '[name].js',
library: {
type: 'module',
},
clean: true,
},
target: 'es2020',
experiments: {
outputModule: true,
},
devtool: 'source-map',
resolve: {
fallback: {
// Yaml-ast-parser-custom-tags imports buffer. This can be omitted safely.
buffer: false,
},
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.ttf$/,
type: 'asset',
},
],
},
plugins: [
new MonacoWebpackPlugin({
languages: [],
customLanguages: [
{
label: 'yaml',
entry: [
'monaco-yaml/lib/esm/monaco.contribution',
'vs/basic-languages/yaml/yaml.contribution',
],
worker: {
id: 'monaco-yaml/lib/esm/yamlWorker',
entry: 'monaco-yaml/lib/esm/yaml.worker',
},
},
],
}),
],
devServer: {
static: {
directory: './',
},
},
};

13052
package-lock.json generated
View file

File diff suppressed because it is too large Load diff