Skip to content

Commit 5ea1eb9

Browse files
ComFreekmarijnh
ComFreek
authored and
marijnh
committed
Merged JavaScript and TypeScript mode as marijnh suggested
1 parent fdf78f7 commit 5ea1eb9

File tree

3 files changed

+112
-6
lines changed

3 files changed

+112
-6
lines changed

‎mode/javascript/index.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,19 @@ <h1>CodeMirror: JavaScript mode</h1>
6969
});
7070
</script>
7171

72-
<p>JavaScript mode supports a single configuration
73-
option, <code>json</code>, which will set the mode to expect JSON
74-
data rather than a JavaScript program.</p>
72+
<p>
73+
JavaScript mode supports a two configuration
74+
options:
75+
<ul>
76+
<li><code>json</code> which will set the mode to expect JSON data rather than a JavaScript program.</li>
77+
<li>
78+
<code>typescript</code> which will activate additional syntax highlighting and some other things for TypeScript code.
79+
<br />
80+
Click here for the demo which also provides an extra theme: <a href="typescript.html">typescript.html</a>
81+
</li>
82+
</ul>
83+
</p>
7584

76-
<p><strong>MIME types defined:</strong> <code>text/javascript</code>, <code>application/json</code>.</p>
85+
<p><strong>MIME types defined:</strong> <code>text/javascript</code>, <code>application/json</code>, <code>text/typescript</code>, <code>application/typescript</code>.</p>
7786
</body>
7887
</html>

‎mode/javascript/javascript.js‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1-
CodeMirror.defineMode("javascript", function(config, parserConfig) {
1+
/**
2+
* The TypeScript extensions are (C) Copyright 2012 by ComFreek <[email protected]>
3+
*/
4+
5+
CodeMirror.defineMode("javascript", function (config, parserConfig) {
26
var indentUnit = config.indentUnit;
37
var jsonMode = parserConfig.json;
8+
var isTS = parserConfig.typescript;
49

510
// Tokenizer
611

712
var keywords = function(){
813
function kw(type) {return {type: type, style: "keyword"};}
914
var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
1015
var operator = kw("operator"), atom = {type: "atom", style: "atom"};
11-
return {
16+
17+
var jsKeywords = {
1218
"if": A, "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
1319
"return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C,
1420
"var": kw("var"), "const": kw("var"), "let": kw("var"),
@@ -17,6 +23,34 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
1723
"in": operator, "typeof": operator, "instanceof": operator,
1824
"true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom
1925
};
26+
27+
// Extend the 'normal' keywords with the TypeScript language extensions
28+
if (isTS) {
29+
var tsKeywords = {
30+
// object-like things
31+
"interface": kw("interface"),
32+
"class": kw("class"),
33+
"extends": kw("extends"),
34+
"constructor": kw("constructor"),
35+
36+
// scope modifiers
37+
"public": kw("public"),
38+
"private": kw("private"),
39+
"protected": kw("protected"),
40+
"static": kw("static"),
41+
42+
"super": kw("super"),
43+
44+
// types
45+
"string": type, "number": type, "bool": type, "any": type
46+
};
47+
48+
for (var attr in tsKeywords) {
49+
jsKeywords[attr] = tsKeywords[attr];
50+
}
51+
}
52+
53+
return jsKeywords;
2054
}();
2155

2256
var isOperatorChar = /[+\-*&%=<>!?|]/;
@@ -360,3 +394,5 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
360394

361395
CodeMirror.defineMIME("text/javascript", "javascript");
362396
CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
397+
CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
398+
CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });

‎mode/javascript/typescript.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CodeMirror: JavaScript mode using TypeScript extension</title>
6+
<link rel="stylesheet" href="../../lib/codemirror.css">
7+
<script src="../../lib/codemirror.js"></script>
8+
<script src="javascript.js"></script>
9+
<link rel="stylesheet" href="../../doc/docs.css">
10+
<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
11+
</head>
12+
<body>
13+
<h1>CodeMirror: JavaScript mode using TypeScript extension</h1>
14+
15+
<div><textarea id="code" name="code">
16+
class Greeter {
17+
greeting: string;
18+
constructor (message: string) {
19+
this.greeting = message;
20+
}
21+
greet() {
22+
return "Hello, " + this.greeting;
23+
}
24+
}
25+
26+
var greeter = new Greeter("world");
27+
28+
var button = document.createElement('button')
29+
button.innerText = "Say Hello"
30+
button.onclick = function() {
31+
alert(greeter.greet())
32+
}
33+
34+
document.body.appendChild(button)
35+
36+
</textarea></div>
37+
38+
<script>
39+
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
40+
lineNumbers: true,
41+
matchBrackets: true,
42+
mode: "text/typescript"
43+
});
44+
</script>
45+
46+
<p>
47+
JavaScript mode supports a two configuration
48+
options:
49+
<ul>
50+
<li><code>json</code> which will set the mode to expect JSON data rather than a JavaScript program.</li>
51+
<li><code>typescript</code> which will activate additional syntax highlighting and some other things for TypeScript code.</li>
52+
</ul>
53+
</p>
54+
55+
<p>
56+
This sample also uses the <a href="../../theme/typebox.css">TypeBox.css</a> theme.
57+
</p>
58+
59+
<p><strong>MIME types defined:</strong> <code>text/javascript</code>, <code>application/json</code>, <code>text/typescript</code>, <code>application/typescript</code>.</p>
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)