-
Notifications
You must be signed in to change notification settings - Fork 6
/
demo.html
120 lines (108 loc) · 5.23 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Demonstrating monaco editor esm with i18n</h2>
<h3>Things to check...</h3>
<ul>
<li>Theme should be set to <code>forge-dark</code></li>
<li>Intellisense for node globals, node-red utility functions should be present</li>
<li>Monaco lang should be german (right click inside the editor, check palette menu <kbd>F1</kbd> or <kbd>CTRL-SHIFT-P</kbd>) </li>
</ul>
<div id="monaco-editor" style="height: 500px;">MONACO</div>
<script src="./output/monaco/dist/locale/de.js"></script>
<script src="./output/monaco/dist/editor.js"></script>
<script>
let editor;
(function () {
const base = "./output/monaco/dist/";
const types = "./output/types/";
const defCode = `const fs = require("fs/promises") //<< should be of type fs/promises & have intellisense
const os = require("os") // << should be of type os & have intellisense
const buf = Buffer.from([1,2,3]) // << should be of type Buffer & have intellisense
let m = RED.util.cloneMessage({}) // << hover over cloneMessage - see rich tips
let t = msg.topic // << see msg properties after entering msg.
let e = env.get("host") // << hover over get - see rich tips
const path = node.path // << should be recognised by editor
node.status({fill:"red",shape:"ring",text:"hello"}) // << should be recognised by editor
node.error("hello") // << should be recognised by editor
node.warn("hello") // << should be recognised by editor
`
const compilerOptions = {
allowJs: true,
checkJs: true,
allowNonTsExtensions: true,
target: monaco.languages.typescript.ScriptTarget.ESNext,
strictNullChecks: false,
strictPropertyInitialization: true,
strictFunctionTypes: true,
strictBindCallApply: true,
moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
module: monaco.languages.typescript.ModuleKind.CommonJS,
typeRoots: ["types"],
lib: ["esnext"] // don't load DOM by default,
}
monaco.languages.typescript.javascriptDefaults.setCompilerOptions(compilerOptions);
const diagnosticOptions = {
noSemanticValidation: false,
noSyntaxValidation: false,
diagnosticCodesToIgnore: [
1108, //return not inside function
//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!
2307, //Cannot find module 'xxx' or its corresponding type declarations
2322, //Type 'unknown' is not assignable to type 'string'
2339, //property does not exist on
2345, //Argument of type xxx is not assignable to parameter of type 'DateTimeFormatOptions'
7043, //i forget what this one is,
80001, //Convert to ES6 module
80004, //JSDoc types may be moved to TypeScript types.
]
};
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions(diagnosticOptions);
editor = monaco.editor.create(document.getElementById("monaco-editor"), {
value: defCode,
language: "javascript"
});
const themeName = "forge-dark"
fetch(base + "theme/" + themeName + ".json").then(response => {
return response.json();
}).then(theme => {
if ((theme.rules && Array.isArray(theme.rules)) || theme.colors) {
monaco.editor.defineTheme(themeName, theme);
monaco.editor.setTheme(themeName);
} else {
console.warn("theme is not valid")
}
}).catch(err => {
console.error(err);
});
const urls = [
types + "node-red/util.d.ts",
types + "node-red/func.d.ts",
types + "node/globals.d.ts",
types + "node/buffer.d.ts",
types + "node/console.d.ts",
types + "node/fs.d.ts",
types + "node/fs/promises.d.ts",
types + "node/os.d.ts",
types + "node/timers.d.ts",
]
var promises = urls.map(url => fetch(url).then(y => y.text()));
Promise.all(promises).then(results => {
console.log(results);
for (let index = 0; index < results.length; index++) {
const ts = results[index];
const fn = urls[index].replace(types, "");
monaco.languages.typescript.javascriptDefaults.addExtraLib(ts, `file://types/${fn}`);
}
});
})();
</script>
</body>
</html>