Reorganize, add webpack sample

7 years ago · f22dfb79ba
parent f692f47f73
commit f22dfb79ba
26 changed files with 8904 additions and 9 deletions
--- a/README.md
+++ b/README.md
@ -14,6 +14,19 @@ npm run simpleserver

 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

 MIT
--- a/browser-amd-diff-editor/index.html
+++ b/browser-amd-diff-editor/index.html
--- a/browser-amd-diff-editor/modified.txt
+++ b/browser-amd-diff-editor/modified.txt
--- a/browser-amd-diff-editor/original.txt
+++ b/browser-amd-diff-editor/original.txt
--- a/browser-amd-editor/index.html
+++ b/browser-amd-editor/index.html
--- a/browser-amd-iframe/index.html
+++ b/browser-amd-iframe/index.html
--- a/browser-amd-iframe/inner.html
+++ b/browser-amd-iframe/inner.html
--- a/browser-amd-localized/index.html
+++ b/browser-amd-localized/index.html
--- a/browser-amd-monarch/index.html
+++ b/browser-amd-monarch/index.html
--- a/browser-amd-shared-model/index.html
+++ b/browser-amd-shared-model/index.html
--- a/browser-esm-webpack/.gitignore
+++ b/browser-esm-webpack/.gitignore
@ -0,0 +1 @@
+dist/*.js
--- a/browser-esm-webpack/dist/index.html
+++ b/browser-esm-webpack/dist/index.html
@ -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>
--- a/browser-esm-webpack/index.html
+++ b/browser-esm-webpack/index.html
@ -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>
--- a/browser-esm-webpack/index.js
+++ b/browser-esm-webpack/index.js
@ -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'
+});
--- a/browser-esm-webpack/package-lock.json
+++ b/browser-esm-webpack/package-lock.json
--- a/browser-esm-webpack/package.json
+++ b/browser-esm-webpack/package.json
@ -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"
+  }
+}
--- a/browser-esm-webpack/webpack.config.js
+++ b/browser-esm-webpack/webpack.config.js
@ -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/)
+	],
+};
--- a/browser-script-editor/index.html
+++ b/browser-script-editor/index.html
--- a/electron-amd/electron-index.html
+++ b/electron-amd/electron-index.html
@ -2,15 +2,15 @@
 <html>
 	<head>
 		<meta charset="UTF-8">
-		<title>Hello World!</title>
+		<title>Monaco Editor!</title>
 	</head>
 	<body>
-		<h1>Hello World!</h1>
+		<h1>Monaco Editor in Electron!</h1>
 		<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div>
 	</body>

 	<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.
 		var nodeRequire = global.require;
 	</script>
--- a/electron-amd/index.html
+++ b/electron-amd/index.html
@ -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>
--- a/sample-electron/main.js
+++ b/sample-electron/main.js
@ -6,7 +6,7 @@ let mainWindow;

 function createWindow () {
 	mainWindow = new BrowserWindow({width: 800, height: 600})
-	mainWindow.loadURL(`file://${__dirname}/index.html`)
+	mainWindow.loadURL(`file://${__dirname}/electron-index.html`)
 	mainWindow.webContents.openDevTools()
 	mainWindow.on('closed', function () {
 		mainWindow = null
--- a/sample-nwjs-v2/index.html
+++ b/sample-nwjs-v2/index.html
--- a/sample-nwjs-v2/package.json
+++ b/sample-nwjs-v2/package.json
--- a/sample-nwjs/index.html
+++ b/sample-nwjs/index.html
--- a/sample-nwjs/package.json
+++ b/sample-nwjs/package.json
--- a/sample-electron/README.md
+++ b/sample-electron/README.md
@ -1,5 +0,0 @@
-To run this sample, you need to [download Electron](https://github.com/electron/electron/releases)
-
-```
-$/sample-electron> electron main.js
-```