Add an electron esm sample
Alexandru Dima
4 years ago
parent
830e5bbd42
commit
72e42c9b4b
@ -0,0 +1,2 @@
|
|||||||
|
/dist/*.js
|
||||||
|
/dist/*.ttf
|
||||||
@ -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>
|
||||||
@ -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'
|
||||||
|
});
|
||||||
@ -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();
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -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 ."
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue