From 72e42c9b4be286e50bf1f69f65efec9cbb295aa9 Mon Sep 17 00:00:00 2001 From: Alexandru Dima Date: Wed, 30 Dec 2020 10:04:21 +0100 Subject: [PATCH] Add an electron esm sample --- electron-esm-webpack/.gitignore | 2 ++ electron-esm-webpack/dist/electron-index.html | 27 ++++++++++++++++ electron-esm-webpack/index.js | 24 ++++++++++++++ electron-esm-webpack/main.js | 32 +++++++++++++++++++ electron-esm-webpack/package.json | 8 +++++ electron-esm-webpack/webpack.config.js | 29 +++++++++++++++++ 6 files changed, 122 insertions(+) create mode 100644 electron-esm-webpack/.gitignore create mode 100644 electron-esm-webpack/dist/electron-index.html create mode 100644 electron-esm-webpack/index.js create mode 100644 electron-esm-webpack/main.js create mode 100644 electron-esm-webpack/package.json create mode 100644 electron-esm-webpack/webpack.config.js diff --git a/electron-esm-webpack/.gitignore b/electron-esm-webpack/.gitignore new file mode 100644 index 00000000..7ef6094d --- /dev/null +++ b/electron-esm-webpack/.gitignore @@ -0,0 +1,2 @@ +/dist/*.js +/dist/*.ttf diff --git a/electron-esm-webpack/dist/electron-index.html b/electron-esm-webpack/dist/electron-index.html new file mode 100644 index 00000000..f7dfa113 --- /dev/null +++ b/electron-esm-webpack/dist/electron-index.html @@ -0,0 +1,27 @@ + + + + + + Monaco Editor! + + + + +

Monaco Editor in Electron (without nodeIntegration)!

+ 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.

+
+ + + + diff --git a/electron-esm-webpack/index.js b/electron-esm-webpack/index.js new file mode 100644 index 00000000..8b444a2b --- /dev/null +++ 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' +}); diff --git a/electron-esm-webpack/main.js b/electron-esm-webpack/main.js new file mode 100644 index 00000000..1d9e0d5c --- /dev/null +++ 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(); + } +}); diff --git a/electron-esm-webpack/package.json b/electron-esm-webpack/package.json new file mode 100644 index 00000000..0c0afb91 --- /dev/null +++ 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 ." + } +} diff --git a/electron-esm-webpack/webpack.config.js b/electron-esm-webpack/webpack.config.js new file mode 100644 index 00000000..1685f61b --- /dev/null +++ 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'] + } + ] + } +};