mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 18:32:56 +01:00
Reorganize, add webpack sample
This commit is contained in:
Alex Dima
parent
f692f47f73
commit
f22dfb79ba
26 changed files with 8904 additions and 9 deletions
13
README.md
13
README.md
|
|
@ -14,6 +14,19 @@ npm run simpleserver
|
||||||
|
|
||||||
Go to <a href="http://localhost:8888">localhost:8888</a> and explore the samples!
|
Go to <a href="http://localhost:8888">localhost:8888</a> and explore the samples!
|
||||||
|
|
||||||
|
## Loading variations
|
||||||
|
* `browser-amd-editor`: running in a browser using `AMD` lazy loading.
|
||||||
|
* `browser-script-editor`: running in a browser using `AMD` synchronous loading via `<script>` tags.
|
||||||
|
* `electron-amd`: running in electron.
|
||||||
|
* `nwjs-amd` and `nwjs-amd-v2`: running in nwjs. it is reported that v2 works and the initial version does not.
|
||||||
|
|
||||||
|
## Other examples & techniques
|
||||||
|
* `browser-amd-diff-editor`: running the diff editor in a browser.
|
||||||
|
* `browser-amd-iframe`: running in an `<iframe>`.
|
||||||
|
* `browser-amd-localized`: running with the `German` locale.
|
||||||
|
* `browser-amd-monarch`: running with a custom language grammar written with Monarch.
|
||||||
|
* `browser-amd-shared-model`: using the same text model in two editors.
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
MIT
|
MIT
|
||||||
|
|
|
||||||
1
browser-esm-webpack/.gitignore
vendored
Normal file
1
browser-esm-webpack/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
dist/*.js
|
||||||
14
browser-esm-webpack/dist/index.html
vendored
Normal file
14
browser-esm-webpack/dist/index.html
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="container" style="width:800px;height:600px;border:1px solid #ccc"></div>
|
||||||
|
|
||||||
|
<script src="./app.bundle.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
browser-esm-webpack/index.html
Normal file
21
browser-esm-webpack/index.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Monaco Editor Webpack Sample</h2>
|
||||||
|
|
||||||
|
To run this sample, you need to:
|
||||||
|
|
||||||
|
<pre>
|
||||||
|
$/browser-esm-webpack> npm install .
|
||||||
|
$/browser-esm-webpack> ./node_modules/.bin/webpack
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
Then, <a href="./dist">open the ./dist folder</a>.
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
28
browser-esm-webpack/index.js
Normal file
28
browser-esm-webpack/index.js
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import * as monaco from 'monaco-editor';
|
||||||
|
|
||||||
|
self.MonacoEnvironment = {
|
||||||
|
getWorkerUrl: function (moduleId, label) {
|
||||||
|
if (label === 'json') {
|
||||||
|
return './json.worker.bundle.js';
|
||||||
|
}
|
||||||
|
if (label === 'css') {
|
||||||
|
return './css.worker.bundle.js';
|
||||||
|
}
|
||||||
|
if (label === 'html') {
|
||||||
|
return './html.worker.bundle.js';
|
||||||
|
}
|
||||||
|
if (label === 'typescript' || label === 'javascript') {
|
||||||
|
return './ts.worker.bundle.js';
|
||||||
|
}
|
||||||
|
return './editor.worker.bundle.js';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
monaco.editor.create(document.getElementById('container'), {
|
||||||
|
value: [
|
||||||
|
'function x() {',
|
||||||
|
'\tconsole.log("Hello world!");',
|
||||||
|
'}'
|
||||||
|
].join('\n'),
|
||||||
|
language: 'javascript'
|
||||||
|
});
|
||||||
8767
browser-esm-webpack/package-lock.json
generated
Normal file
8767
browser-esm-webpack/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
11
browser-esm-webpack/package.json
Normal file
11
browser-esm-webpack/package.json
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"name": "helloworld",
|
||||||
|
"dependencies": {},
|
||||||
|
"devDependencies": {
|
||||||
|
"css-loader": "^0.28.10",
|
||||||
|
"monaco-editor": "^0.11.0",
|
||||||
|
"style-loader": "^0.20.3",
|
||||||
|
"webpack": "^4.1.1",
|
||||||
|
"webpack-cli": "^2.0.12"
|
||||||
|
}
|
||||||
|
}
|
||||||
27
browser-esm-webpack/webpack.config.js
Normal file
27
browser-esm-webpack/webpack.config.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
const path = require('path');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
mode: 'development',
|
||||||
|
entry: {
|
||||||
|
"app": './index.js',
|
||||||
|
"editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
|
||||||
|
"json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
|
||||||
|
"css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
|
||||||
|
"html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
|
||||||
|
"ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
filename: '[name].bundle.js',
|
||||||
|
path: path.resolve(__dirname, 'dist')
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [ 'style-loader', 'css-loader' ]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new webpack.IgnorePlugin(/^((fs)|(path)|(os)|(crypto)|(source-map-support))$/, /vs\/language\/typescript\/lib/)
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -2,15 +2,15 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Hello World!</title>
|
<title>Monaco Editor!</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Hello World!</h1>
|
<h1>Monaco Editor in Electron!</h1>
|
||||||
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div>
|
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Monaco uses a custom amd loader that over-rides node's require.
|
// Monaco uses a custom amd loader that overrides node's require.
|
||||||
// Keep a reference to node's require so we can restore it after executing the amd loader file.
|
// Keep a reference to node's require so we can restore it after executing the amd loader file.
|
||||||
var nodeRequire = global.require;
|
var nodeRequire = global.require;
|
||||||
</script>
|
</script>
|
||||||
18
electron-amd/index.html
Normal file
18
electron-amd/index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Monaco Editor Electron Sample</h2>
|
||||||
|
|
||||||
|
To run this sample, you need to <a href="https://github.com/electron/electron/releases">download Electron</a> and then execute:
|
||||||
|
|
||||||
|
<pre>
|
||||||
|
$/electron-amd> electron main.js
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -6,7 +6,7 @@ let mainWindow;
|
||||||
|
|
||||||
function createWindow () {
|
function createWindow () {
|
||||||
mainWindow = new BrowserWindow({width: 800, height: 600})
|
mainWindow = new BrowserWindow({width: 800, height: 600})
|
||||||
mainWindow.loadURL(`file://${__dirname}/index.html`)
|
mainWindow.loadURL(`file://${__dirname}/electron-index.html`)
|
||||||
mainWindow.webContents.openDevTools()
|
mainWindow.webContents.openDevTools()
|
||||||
mainWindow.on('closed', function () {
|
mainWindow.on('closed', function () {
|
||||||
mainWindow = null
|
mainWindow = null
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
To run this sample, you need to [download Electron](https://github.com/electron/electron/releases)
|
|
||||||
|
|
||||||
```
|
|
||||||
$/sample-electron> electron main.js
|
|
||||||
```
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue