Add an electron esm sample

4 years ago · 72e42c9b4b
parent 830e5bbd42
commit 72e42c9b4b
6 changed files with 122 additions and 0 deletions
--- a/electron-esm-webpack/.gitignore
+++ b/electron-esm-webpack/.gitignore
@ -0,0 +1,2 @@
+/dist/*.js
+/dist/*.ttf
--- a/electron-esm-webpack/dist/electron-index.html
+++ b/electron-esm-webpack/dist/electron-index.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta
+			http-equiv="Content-Security-Policy"
+			content="default-src 'none'; script-src file: 'sha256-AcqnkP3xWRYJaQ27hijK3b831+qsxvzEoSYt6PfGrRE='; style-src 'unsafe-inline' file:; font-src file:"
+		/>
+		<title>Monaco Editor!</title>
+		<style>
+			#container {
+				width: 500px;
+				height: 300px;
+				border: 1px solid #ccc;
+			}
+		</style>
+	</head>
+
+	<body>
+		<h1>Monaco Editor in Electron (without nodeIntegration)!</h1>
+		Note: Since Electron without nodeIntegration is very similar to a browser, you can have a look
+		at all the other `browser-` samples, as they should work just fine. <br /><br />
+		<div id="container"></div>
+	</body>
+
+	<script src="./app.bundle.js"></script>
+</html>
--- a/electron-esm-webpack/index.js
+++ b/electron-esm-webpack/index.js
@ -0,0 +1,24 @@
+import * as monaco from 'monaco-editor';
+
+self.MonacoEnvironment = {
+	getWorkerUrl: function (moduleId, label) {
+		if (label === 'json') {
+			return './json.worker.bundle.js';
+		}
+		if (label === 'css' || label === 'scss' || label === 'less') {
+			return './css.worker.bundle.js';
+		}
+		if (label === 'html' || label === 'handlebars' || label === 'razor') {
+			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/electron-esm-webpack/main.js
+++ b/electron-esm-webpack/main.js
@ -0,0 +1,32 @@
+const electron = require('electron');
+const app = electron.app;
+const BrowserWindow = electron.BrowserWindow;
+
+let mainWindow;
+
+function createWindow() {
+	mainWindow = new BrowserWindow({
+		width: 800,
+		height: 600,
+		webPreferences: { worldSafeExecuteJavaScript: true }
+	});
+	mainWindow.loadURL(`file://${__dirname}/dist/electron-index.html`);
+	mainWindow.webContents.openDevTools();
+	mainWindow.on('closed', function () {
+		mainWindow = null;
+	});
+}
+
+app.on('ready', createWindow);
+
+app.on('window-all-closed', function () {
+	if (process.platform !== 'darwin') {
+		app.quit();
+	}
+});
+
+app.on('activate', function () {
+	if (mainWindow === null) {
+		createWindow();
+	}
+});
--- a/electron-esm-webpack/package.json
+++ b/electron-esm-webpack/package.json
@ -0,0 +1,8 @@
+{
+	"name": "electron-esm-webpack",
+	"main": "./main",
+	"scripts": {
+		"build": "node ../node_modules/webpack/bin/webpack.js --progress",
+		"execute": "node ../node_modules/electron/cli.js ."
+	}
+}
--- a/electron-esm-webpack/webpack.config.js
+++ b/electron-esm-webpack/webpack.config.js
@ -0,0 +1,29 @@
+const path = require('path');
+
+module.exports = {
+	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: {
+		globalObject: 'self',
+		filename: '[name].bundle.js',
+		path: path.resolve(__dirname, 'dist')
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader']
+			},
+			{
+				test: /\.ttf$/,
+				use: ['file-loader']
+			}
+		]
+	}
+};