Move into monaco-editor-samples folder

This commit is contained in:
Alex Dima 2021-11-05 12:12:35 +01:00
parent b9969d41cb
commit a9ab892f7a
No known key found for this signature in database
GPG key ID: 39563C1504FDD0C9
86 changed files with 0 additions and 0 deletions

View file

@ -0,0 +1,3 @@
dist/*.js
dist/*.ttf
dist/*.txt

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<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>

View file

@ -0,0 +1,140 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See LICENSE in the project root for license information.
*--------------------------------------------------------------------------------------------*/
const glob = require('glob');
const path = require('path');
const fs = require('fs');
const FILE_PATH = path.join(__dirname, 'index.js');
generateLanguages();
generateFeatures();
/**
* @returns { Promise<string[]> }
*/
function getBasicLanguages() {
return new Promise((resolve, reject) => {
glob(
'./node_modules/monaco-editor/esm/vs/basic-languages/*/*.contribution.js',
{ cwd: path.dirname(__dirname) },
(err, files) => {
if (err) {
reject(err);
return;
}
resolve(
files.map((file) => {
return file.substring('./node_modules/monaco-editor/esm/'.length).replace(/\.js$/, '');
})
);
}
);
});
}
/**
* @returns { Promise<string[]> }
*/
function getAdvancedLanguages() {
return new Promise((resolve, reject) => {
glob(
'./node_modules/monaco-editor/esm/vs/language/*/monaco.contribution.js',
{ cwd: path.dirname(__dirname) },
(err, files) => {
if (err) {
reject(err);
return;
}
resolve(
files
.map((file) => file.substring('./node_modules/monaco-editor/esm/vs/language/'.length))
.map((file) => file.substring(0, file.length - '/monaco.contribution.js'.length))
.map((lang) => `vs/language/${lang}/monaco.contribution`)
);
}
);
});
}
function generateLanguages() {
return Promise.all([getBasicLanguages(), getAdvancedLanguages()]).then(
([basicLanguages, advancedLanguages]) => {
basicLanguages.sort(strcmp);
advancedLanguages.sort(strcmp);
const allLanguages = advancedLanguages.concat(basicLanguages);
const imports = allLanguages
.map((l) => `import 'monaco-editor/esm/${l}.js';`)
.map((l) => `${/python/.test(l) ? '' : '// '}${l}`)
.join('\n');
let contents = fs.readFileSync(FILE_PATH).toString();
contents = contents.replace(
/\/\/ BEGIN_LANGUAGES\n([\/ a-zA-Z0-9'\/\-\.;]+\n)+\/\/ END_LANGUAGES/,
`// BEGIN_LANGUAGES\n${imports}\n// END_LANGUAGES`
);
fs.writeFileSync(FILE_PATH, contents);
}
);
}
function strcmp(a, b) {
if (a < b) {
return -1;
}
if (a > b) {
return 1;
}
return 0;
}
/**
* @returns { string[] }
*/
function generateFeatures() {
const skipImports = [
'vs/editor/common/standaloneStrings',
'vs/editor/contrib/tokenization/tokenization',
'vs/editor/editor.all',
'vs/base/browser/ui/codicons/codiconStyles'
];
let features = [];
const files =
fs
.readFileSync(
path.join(__dirname, '../node_modules/monaco-editor/esm/vs/editor/edcore.main.js')
)
.toString() +
fs
.readFileSync(
path.join(__dirname, '../node_modules/monaco-editor/esm/vs/editor/editor.all.js')
)
.toString();
files.split(/\r\n|\n/).forEach((line) => {
const m = line.match(/import '([^']+)'/);
if (m) {
const tmp = path.posix.join('vs/editor', m[1]).replace(/\.js$/, '');
if (skipImports.indexOf(tmp) === -1) {
features.push(tmp);
}
}
});
features.sort(strcmp);
const imports = features
.map((l) => `import 'monaco-editor/esm/${l}.js';`)
.map((l) => `${/(coreCommands)|(findController)/.test(l) ? '' : '// '}${l}`)
.join('\n');
let contents = fs.readFileSync(FILE_PATH).toString();
contents = contents.replace(
/\/\/ BEGIN_FEATURES\n([\/ a-zA-Z0-9'\/\-\.;]+\n)+\/\/ END_FEATURES/,
`// BEGIN_FEATURES\n${imports}\n// END_FEATURES`
);
fs.writeFileSync(FILE_PATH, contents);
}

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>Monaco Editor Webpack Sample</h2>
This sample shows how to load a small subset of the editor:
<ul>
<li>Only the core editor and the find widget</li>
<li>Only the python language coloring</li>
</ul>
To run this sample, you need to:
<pre>
$/> npm install .
$/> npm run simpleserver
$/browser-esm-webpack-small> npm run build
</pre
>
Then, <a href="./dist">open the ./dist folder</a>.
</body>
</html>

View file

@ -0,0 +1,168 @@
// (1) Desired editor features:
// BEGIN_FEATURES
import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
// import 'monaco-editor/esm/vs/editor/browser/widget/codeEditorWidget.js';
// import 'monaco-editor/esm/vs/editor/browser/widget/diffEditorWidget.js';
// import 'monaco-editor/esm/vs/editor/browser/widget/diffNavigator.js';
// import 'monaco-editor/esm/vs/editor/contrib/anchorSelect/anchorSelect.js';
// import 'monaco-editor/esm/vs/editor/contrib/bracketMatching/bracketMatching.js';
// import 'monaco-editor/esm/vs/editor/contrib/caretOperations/caretOperations.js';
// import 'monaco-editor/esm/vs/editor/contrib/caretOperations/transpose.js';
// import 'monaco-editor/esm/vs/editor/contrib/clipboard/clipboard.js';
// import 'monaco-editor/esm/vs/editor/contrib/codeAction/codeActionContributions.js';
// import 'monaco-editor/esm/vs/editor/contrib/codelens/codelensController.js';
// import 'monaco-editor/esm/vs/editor/contrib/colorPicker/colorContributions.js';
// import 'monaco-editor/esm/vs/editor/contrib/comment/comment.js';
// import 'monaco-editor/esm/vs/editor/contrib/contextmenu/contextmenu.js';
// import 'monaco-editor/esm/vs/editor/contrib/cursorUndo/cursorUndo.js';
// import 'monaco-editor/esm/vs/editor/contrib/dnd/dnd.js';
// import 'monaco-editor/esm/vs/editor/contrib/documentSymbols/documentSymbols.js';
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
// import 'monaco-editor/esm/vs/editor/contrib/folding/folding.js';
// import 'monaco-editor/esm/vs/editor/contrib/fontZoom/fontZoom.js';
// import 'monaco-editor/esm/vs/editor/contrib/format/formatActions.js';
// import 'monaco-editor/esm/vs/editor/contrib/gotoError/gotoError.js';
// import 'monaco-editor/esm/vs/editor/contrib/gotoSymbol/goToCommands.js';
// import 'monaco-editor/esm/vs/editor/contrib/gotoSymbol/link/goToDefinitionAtPosition.js';
// import 'monaco-editor/esm/vs/editor/contrib/hover/hover.js';
// import 'monaco-editor/esm/vs/editor/contrib/inPlaceReplace/inPlaceReplace.js';
// import 'monaco-editor/esm/vs/editor/contrib/indentation/indentation.js';
// import 'monaco-editor/esm/vs/editor/contrib/inlineHints/inlineHintsController.js';
// import 'monaco-editor/esm/vs/editor/contrib/linesOperations/linesOperations.js';
// import 'monaco-editor/esm/vs/editor/contrib/linkedEditing/linkedEditing.js';
// import 'monaco-editor/esm/vs/editor/contrib/links/links.js';
// import 'monaco-editor/esm/vs/editor/contrib/multicursor/multicursor.js';
// import 'monaco-editor/esm/vs/editor/contrib/parameterHints/parameterHints.js';
// import 'monaco-editor/esm/vs/editor/contrib/rename/rename.js';
// import 'monaco-editor/esm/vs/editor/contrib/smartSelect/smartSelect.js';
// import 'monaco-editor/esm/vs/editor/contrib/snippet/snippetController2.js';
// import 'monaco-editor/esm/vs/editor/contrib/suggest/suggestController.js';
// import 'monaco-editor/esm/vs/editor/contrib/toggleTabFocusMode/toggleTabFocusMode.js';
// import 'monaco-editor/esm/vs/editor/contrib/unusualLineTerminators/unusualLineTerminators.js';
// import 'monaco-editor/esm/vs/editor/contrib/viewportSemanticTokens/viewportSemanticTokens.js';
// import 'monaco-editor/esm/vs/editor/contrib/wordHighlighter/wordHighlighter.js';
// import 'monaco-editor/esm/vs/editor/contrib/wordOperations/wordOperations.js';
// import 'monaco-editor/esm/vs/editor/contrib/wordPartOperations/wordPartOperations.js';
// import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
// import 'monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js';
// import 'monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js';
// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js';
// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js';
// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js';
// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js';
// import 'monaco-editor/esm/vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js';
// import 'monaco-editor/esm/vs/editor/standalone/browser/toggleHighContrast/toggleHighContrast.js';
// END_FEATURES
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
// (2) Desired languages:
// BEGIN_LANGUAGES
// import 'monaco-editor/esm/vs/language/css/monaco.contribution.js';
// import 'monaco-editor/esm/vs/language/html/monaco.contribution.js';
// import 'monaco-editor/esm/vs/language/json/monaco.contribution.js';
// import 'monaco-editor/esm/vs/language/typescript/monaco.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/abap/abap.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/apex/apex.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/azcli/azcli.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/bat/bat.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/cameligo/cameligo.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/clojure/clojure.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/coffee/coffee.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/cpp/cpp.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/csharp/csharp.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/csp/csp.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/css/css.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/dart/dart.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/ecl/ecl.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/fsharp/fsharp.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/go/go.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/handlebars/handlebars.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/hcl/hcl.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/html/html.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/ini/ini.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/java/java.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/julia/julia.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/kotlin/kotlin.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/less/less.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/lexon/lexon.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/lua/lua.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/m3/m3.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/mips/mips.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/msdax/msdax.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/mysql/mysql.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/objective-c/objective-c.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/pascal/pascal.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/pascaligo/pascaligo.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/perl/perl.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/pgsql/pgsql.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/php/php.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/postiats/postiats.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/powerquery/powerquery.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/powershell/powershell.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/pug/pug.contribution.js';
import 'monaco-editor/esm/vs/basic-languages/python/python.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/r/r.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/razor/razor.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/redis/redis.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/redshift/redshift.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/restructuredtext/restructuredtext.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/ruby/ruby.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/rust/rust.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/sb/sb.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/scala/scala.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/scheme/scheme.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/scss/scss.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/solidity/solidity.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/sophia/sophia.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/st/st.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/swift/swift.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/systemverilog/systemverilog.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/tcl/tcl.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/twig/twig.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/vb/vb.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js';
// END_LANGUAGES
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: [
'from banana import *',
'',
'class Monkey:',
' # Bananas the monkey can eat.',
' capacity = 10',
' def eat(self, N):',
" '''Make the monkey eat N bananas!'''",
' capacity = capacity - N*banana.size',
'',
' def feeding_frenzy(self):',
' eat(9.25)',
' return "Yum yum"'
].join('\n'),
language: 'python'
});

View file

@ -0,0 +1,7 @@
{
"name": "browser-esm-webpack-small",
"scripts": {
"build": "node ../node_modules/webpack/bin/webpack.js --progress",
"generate-imports": "node generate-imports.js"
}
}

View file

@ -0,0 +1,35 @@
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production',
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']
}
]
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin()]
}
};