Skip to content

Commit 63c6bb7

Browse files
knollearyknolleary
authored
Merge pull request #2 from Steve-Mcl/update-for-v3
Update to latest monaco v0.33.0
2 parents 9c7f5f1 + a6eac0d commit 63c6bb7

File tree

14 files changed

+5610
-2789
lines changed

14 files changed

+5610
-2789
lines changed

‎demo.html‎

Lines changed: 87 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -2,114 +2,110 @@
22
<html>
33

44
<head>
5-
<meta charset="utf-8">
6-
<title></title>
7-
<meta name="author" content="">
8-
<meta name="description" content="">
9-
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<meta charset="utf-8">
6+
<title></title>
7+
<meta name="author" content="">
8+
<meta name="description" content="">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
1010
</head>
1111

1212
<body>
1313

14-
<p>Demonstrating monaco editor esm with i18n, cobalt theme and added types (node-red & nodejs) </p>
15-
<p>Monaco lang should be french (right click inside the editor) </p>
14+
<h2>Demonstrating monaco editor esm with i18n</h2>
15+
<h3>Things to check...</h3>
16+
<ul>
17+
<li>Theme should be set to <code>forge</code></li>
18+
<li>Intellisense for node globals, node-red utility functions should be present</li>
19+
<li>Monaco lang should be spanish (right click inside the editor, check palette menu <kbd>F1</kbd> or <kbd>CTRL-SHIFT-P</kbd>) </li>
20+
</ul>
1621

17-
<div id="monaco-editor" style="height: 500px;">MONACO</div>
22+
<div id="monaco-editor" style="height: 500px;">MONACO</div>
1823

19-
<script src="./output/monaco/dist/locale/fr.js"></script>
20-
<script src="./output/monaco/dist/editor.js" ></script>
24+
<script src="./output/monaco/dist/locale/es.js"></script>
25+
<script src="./output/monaco/dist/editor.js"></script>
2126

22-
<script>
23-
var editor;
24-
(function() {
25-
var base = "./output/monaco/dist/";
26-
var types = "./output/types/";
27-
window.MonacoEnvironment = window.MonacoEnvironment || {};
28-
window.MonacoEnvironment.getWorkerUrl = function (moduleId, label) {
29-
if (label === 'json') return base + 'json.worker.js';
30-
if (label === 'css') return base + 'worker.js';
31-
if (label === 'html') return base + 'html.worker.js';
32-
if (label === 'typescript' || label === 'javascript') return base + 'ts.worker.js';
33-
return base + 'editor.worker.js';
34-
}
35-
36-
const defCode = `const fs = require("fs"); //<< should be of type fs & have intellisense
27+
<script>
28+
let editor;
29+
(function () {
30+
const base = "./output/monaco/dist/";
31+
const types = "./output/types/";
32+
const defCode = `const fs = require("fs"); //<< should be of type fs & have intellisense
3733
const os = require("os"); //<< should be of type os & have intellisense
3834
const buf = Buffer.from([1,2,3]); //<< should be of type Buffer & have intellisense
3935
let m = RED.util.cloneMessage({}); //<< hover over cloneMessage - see rich tips
4036
let t = msg.topic; //<< see msg properties after entering msg.
4137
let e = env.get("host"); //<< hover over get - see rich tips
4238
`
4339

44-
const compilerOptions = {
45-
allowJs: true,
46-
checkJs: true,
47-
allowNonTsExtensions: true,
48-
target: monaco.languages.typescript.ScriptTarget.ESNext,
49-
strictNullChecks: false,
50-
strictPropertyInitialization: true,
51-
strictFunctionTypes: true,
52-
strictBindCallApply: true,
53-
moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
54-
module: monaco.languages.typescript.ModuleKind.CommonJS,
55-
typeRoots: ["types"],
56-
lib: ["esnext"] //dont load DOM by default,
57-
}
58-
monaco.languages.typescript.javascriptDefaults.setCompilerOptions(compilerOptions);
40+
const compilerOptions = {
41+
allowJs: true,
42+
checkJs: true,
43+
allowNonTsExtensions: true,
44+
target: monaco.languages.typescript.ScriptTarget.ESNext,
45+
strictNullChecks: false,
46+
strictPropertyInitialization: true,
47+
strictFunctionTypes: true,
48+
strictBindCallApply: true,
49+
moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
50+
module: monaco.languages.typescript.ModuleKind.CommonJS,
51+
typeRoots: ["types"],
52+
lib: ["esnext"] //dont load DOM by default,
53+
}
54+
monaco.languages.typescript.javascriptDefaults.setCompilerOptions(compilerOptions);
5955

60-
const diagnosticOptions = {
61-
noSemanticValidation: false,
62-
noSyntaxValidation: false,
63-
diagnosticCodesToIgnore: [
64-
1108, //return not inside function
65-
//2304, //Cannot find name - this one is heavy handed and prevents user seeing stupid errors. Would provide better ACE feature parity (i.e. no need for declaration of vars) but misses lots of errors. Lets be bold & leave it out!
66-
2307, //Cannot find module 'xxx' or its corresponding type declarations
67-
2322, //Type 'unknown' is not assignable to type 'string'
68-
2339, //property does not exist on
69-
2345, //Argument of type xxx is not assignable to parameter of type 'DateTimeFormatOptions'
70-
7043, //i forget what this one is,
71-
80001, //Convert to ES6 module
72-
80004, //JSDoc types may be moved to TypeScript types.
73-
]
74-
};
75-
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions(diagnosticOptions);
56+
const diagnosticOptions = {
57+
noSemanticValidation: false,
58+
noSyntaxValidation: false,
59+
diagnosticCodesToIgnore: [
60+
1108, //return not inside function
61+
//2304, //Cannot find name - this one is heavy handed and prevents user seeing stupid errors. Would provide better ACE feature parity (i.e. no need for declaration of vars) but misses lots of errors. Lets be bold & leave it out!
62+
2307, //Cannot find module 'xxx' or its corresponding type declarations
63+
2322, //Type 'unknown' is not assignable to type 'string'
64+
2339, //property does not exist on
65+
2345, //Argument of type xxx is not assignable to parameter of type 'DateTimeFormatOptions'
66+
7043, //i forget what this one is,
67+
80001, //Convert to ES6 module
68+
80004, //JSDoc types may be moved to TypeScript types.
69+
]
70+
};
71+
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions(diagnosticOptions);
7672

77-
editor = monaco.editor.create(document.getElementById("monaco-editor"), {
78-
value: defCode,
79-
language: "javascript"
80-
});
81-
var themeName = "monokai"
82-
fetch(base + "theme/" + themeName + ".json").then(response => {
83-
return response.json();
84-
}).then(theme => {
85-
if ((theme.rules && Array.isArray(theme.rules)) || theme.colors) {
86-
monaco.editor.defineTheme(themeName, theme);
87-
monaco.editor.setTheme(themeName);
88-
} else {
89-
console.warn("theme is not valid")
90-
}
91-
}).catch(err => {
92-
console.error(err);
93-
});
94-
const urls = [
95-
types + "node-red/util.d.ts",
96-
types + "node-red/func.d.ts",
97-
types + "node/globals.d.ts",
98-
types + "node/fs.d.ts",
99-
types + "node/os.d.ts",
100-
]
101-
var promises = urls.map(url => fetch(url).then(y => y.text()));
102-
Promise.all(promises).then(results => {
103-
console.log(results);
104-
for (let index = 0; index < results.length; index++) {
105-
const ts = results[index];
106-
const fn = urls[index].replace(types,"");
107-
monaco.languages.typescript.javascriptDefaults.addExtraLib(ts, `file://types/${fn}`);
108-
}
109-
});
110-
})();
73+
editor = monaco.editor.create(document.getElementById("monaco-editor"), {
74+
value: defCode,
75+
language: "javascript"
76+
});
77+
var themeName = "forge"
78+
fetch(base + "theme/" + themeName + ".json").then(response => {
79+
return response.json();
80+
}).then(theme => {
81+
if ((theme.rules && Array.isArray(theme.rules)) || theme.colors) {
82+
monaco.editor.defineTheme(themeName, theme);
83+
monaco.editor.setTheme(themeName);
84+
} else {
85+
console.warn("theme is not valid")
86+
}
87+
}).catch(err => {
88+
console.error(err);
89+
});
90+
const urls = [
91+
types + "node-red/util.d.ts",
92+
types + "node-red/func.d.ts",
93+
types + "node/globals.d.ts",
94+
types + "node/fs.d.ts",
95+
types + "node/os.d.ts",
96+
]
97+
var promises = urls.map(url => fetch(url).then(y => y.text()));
98+
Promise.all(promises).then(results => {
99+
console.log(results);
100+
for (let index = 0; index < results.length; index++) {
101+
const ts = results[index];
102+
const fn = urls[index].replace(types, "");
103+
monaco.languages.typescript.javascriptDefaults.addExtraLib(ts, `file://types/${fn}`);
104+
}
105+
});
106+
})();
111107

112-
</script>
108+
</script>
113109

114110
</body>
115111

‎generate-monaco-esm-i18n.js‎

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,7 @@ const replaceInFile = require("replace-in-file");
77
const ncp = require("ncp").ncp;
88
const rimraf = require("rimraf");
99
const readJson = require('read-package-json')
10-
const { semver, mkDirSafe } = require("./common");
11-
const { tempDir } = require("./paths")
12-
13-
14-
function readPackage(packageFile) {
15-
return new Promise(function(resolve, reject) {
16-
readJson(packageFile, console.error, false, (err,data) => {
17-
if (err) {
18-
reject(err);
19-
} else {
20-
resolve(data)
21-
}
22-
});
23-
});
24-
}
10+
const { semver } = require("./common");
2511

2612
const {
2713
monacoDir,
@@ -34,10 +20,21 @@ const {
3420
} = require("./paths");
3521

3622
const langDirPrefix = "vscode-language-pack-";
37-
const vsCodeRepository = "git://github.com/Microsoft/vscode-loc.git";
38-
23+
const vsCodeRepository = "https://github.com/Microsoft/vscode-loc.git";
3924
const fileExistsCache = new Map();
4025

26+
function readPackage(packageFile) {
27+
return new Promise(function (resolve, reject) {
28+
readJson(packageFile, console.error, false, (err, data) => {
29+
if (err) {
30+
reject(err);
31+
} else {
32+
resolve(data)
33+
}
34+
});
35+
});
36+
}
37+
4138
/**
4239
* The microsoft/vscode-loc contains many more i18n keys that are used by monaco editor.
4340
* Keys are grouped by source files, so we include only those keys whose source files
@@ -61,14 +58,14 @@ function sourceFileExists(key) {
6158
* then i18n key. So we modify the each call to `localize` so that it includes
6259
* the source file name.
6360
*
64-
* > nls.localize("my.key", args)
61+
* > nls.localize(key, args)
6562
*
6663
* becomes
6764
*
68-
* > nls.localize("source/file.js", "my.key", args)
65+
* > nls.localize("source/file.js", key, args)
6966
* @param callback
7067
*/
71-
function injectSourcePath(callback) {
68+
function injectSourcePath(monacoVersion, callback) {
7269
rimraf(monacoModDir, function (err) {
7370
if (err) {
7471
callback(err);
@@ -88,26 +85,46 @@ function injectSourcePath(callback) {
8885
if (file.endsWith(".js")) {
8986
const vsPath = path.relative(monacoModEsmDir, path.dirname(file)).replace(/\\/g, "/");
9087
const transPath = vsPath + "/" + path.basename(file, ".js");
88+
//1a. Find localize( : localize( localize2( .localize2( etc (but NOT function localize() )
89+
//1b. Change to localize("path/to/translation/item", xxxx
90+
//2a. Find localize.apply(
91+
//2b. Change to localize.apply("path/to/translation/item", xxxxx
9192
replaceInFile({
9293
files: file,
9394
from: [
94-
/localize\(/g,
95-
/localize\.apply\(\s*([^,]+)\s*,\s*\[/g,
95+
/(?<!function )(localize\d*?\s*?\()/g, //match:- .localize( : localize( localize2( .localize2( etc
96+
/(localize\d*?\.apply)\(\s*([^,]+)\s*,\s*\[/g,
9697
],
9798
to: [
98-
`localize('${transPath}', `,
99-
`localize.apply($1, ['${transPath}', `,
99+
`$1 '${transPath}', `,
100+
`$1($2, ['${transPath}', `,
100101
],
101102
});
102-
if(file.endsWith("services\\htmlLinks.js")) {
103-
//workaround a bug i cant understand - findDocumentLinks is called with null document & an exception occurs
103+
if (file.endsWith("iconLabels.js")) {
104+
//if a translation is missing, prevent error in `stripIcons` (ensures command palette is populated)
105+
replaceInFile({
106+
files: file,
107+
from: [
108+
/stripIcons\(text\)\s?{/g
109+
],
110+
to: [
111+
`stripIcons(text) {\n text = text || "";`
112+
],
113+
});
114+
} else if (file.search(/[\\|\/]editor[\\|\/]editor.api.js$/) > -1) {
115+
//insert version:
116+
//1. Find const api = createMonacoBaseAPI();
117+
//2. Insert Object.defineProperty(api, 'version', {get: function() { return 'x.y.z' }});
118+
// export const version = api.version;
104119
replaceInFile({
105120
files: file,
106121
from: [
107-
/(export.*?function.*?findDocumentLinks.*?{)/g
122+
/(const\s+?)(\w*?)(\s+?=\s+?createMonacoBaseAPI\(\).*$)/gm
108123
],
109124
to: [
110-
`$1\n if(!document) return [];`
125+
`$1$2$3` +
126+
`\nObject.defineProperty($2, 'version', {get: function() { return '${monacoVersion}' }});` +
127+
`\nexport const version = $2.version;`
111128
],
112129
});
113130
}
@@ -180,44 +197,27 @@ function createScript(lang, locale) {
180197
const sortedLocale = {};
181198
for (const key of sortedKeys) {
182199
sortedLocale[key] = locale[key];
200+
// sortedLocale[safeKey(key)] = locale[key];
183201
}
184-
return "this.MonacoEnvironment = this.MonacoEnvironment || {}; this.MonacoEnvironment.Locale = {language: '" + lang + "', data: " + JSON.stringify(sortedLocale, null, 4) + "};";
202+
return `window.MonacoEnvironment = window.MonacoEnvironment || {};
203+
window.MonacoEnvironment.Locale = window.MonacoLocale = {
204+
language: '${lang}',
205+
data: ${JSON.stringify(sortedLocale, null, 2)}
206+
};`;
185207
}
186208

187209
async function main() {
188210
const pkg = await readPackage("package.json");
189-
const monacoVersion = pkg.devDependencies["monaco-editor"];
190-
const monacoSemver = semver(monacoVersion);
191-
const esm = `import * as monaco from "monaco-editor-esm-i18n";
192-
193-
if(monaco && monaco.monaco) {
194-
monaco = monaco.monaco;
195-
}
196-
197-
if(typeof window!="undefined") {
198-
if(!window.monaco) window.monaco = monaco
199-
}
211+
const monacoDep = pkg.devDependencies["monaco-editor"];
212+
const monacoSemver = semver(monacoDep);
213+
const monacoVersion = monacoSemver.toString();
200214

201-
if(typeof self!="undefined") {
202-
if(!self.monaco) self.monaco = monaco
203-
}
204-
205-
monaco.version = "${monacoSemver.toString()}";
206-
207-
export {
208-
monaco
209-
};
210-
`
211-
//mkDirSafe(tempDir);
212-
mkdirp.sync(tempDir);
213-
var fn = path.join(tempDir, "monaco-editor-esm-i18n.js");
214-
fs.writeFileSync(fn, esm);
215215
mkdirp.sync(gitDir);
216-
injectSourcePath(err => {
216+
injectSourcePath(monacoVersion, err => {
217217
if (err) throw err;
218218
gitPullOrClone(vsCodeRepository, vsCodeLocDir, function (err) {
219219
if (err) throw err;
220-
220+
221221
fs.readdir(vsCodeLocI18nDir, (err, langDirs) => {
222222
if (err) throw err;
223223
langDirs.forEach(langDir => {

0 commit comments

Comments
 (0)