Skip to content

Commit b3c1c79

Browse files
committed
Make typescript mode recognize type declarations
1 parent 5ea1eb9 commit b3c1c79

File tree

3 files changed

+26
-27
lines changed

3 files changed

+26
-27
lines changed

mode/javascript/index.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,7 @@ <h1>CodeMirror: JavaScript mode</h1>
7575
<ul>
7676
<li><code>json</code> which will set the mode to expect JSON data rather than a JavaScript program.</li>
7777
<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>
78+
<code>typescript</code> which will activate additional syntax highlighting and some other things for TypeScript code (<a href="typescript.html">demo</a>).
8179
</li>
8280
</ul>
8381
</p>

mode/javascript/javascript.js

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
* The TypeScript extensions are (C) Copyright 2012 by ComFreek <[email protected]>
33
*/
44

5-
CodeMirror.defineMode("javascript", function (config, parserConfig) {
5+
// TODO actually recognize syntax of TypeScript constructs
6+
7+
CodeMirror.defineMode("javascript", function(config, parserConfig) {
68
var indentUnit = config.indentUnit;
79
var jsonMode = parserConfig.json;
810
var isTS = parserConfig.typescript;
@@ -25,7 +27,8 @@ CodeMirror.defineMode("javascript", function (config, parserConfig) {
2527
};
2628

2729
// Extend the 'normal' keywords with the TypeScript language extensions
28-
if (isTS) {
30+
if (isTS) {
31+
var type = {type: "variable", style: "variable-3"};
2932
var tsKeywords = {
3033
// object-like things
3134
"interface": kw("interface"),
@@ -42,12 +45,12 @@ CodeMirror.defineMode("javascript", function (config, parserConfig) {
4245
"super": kw("super"),
4346

4447
// types
45-
"string": type, "number": type, "bool": type, "any": type
48+
"string": type, "number": type, "bool": type, "any": type
4649
};
4750

48-
for (var attr in tsKeywords) {
49-
jsKeywords[attr] = tsKeywords[attr];
50-
}
51+
for (var attr in tsKeywords) {
52+
jsKeywords[attr] = tsKeywords[attr];
53+
}
5154
}
5255

5356
return jsKeywords;
@@ -309,8 +312,19 @@ CodeMirror.defineMode("javascript", function (config, parserConfig) {
309312
if (type == "}") return cont();
310313
return pass(statement, block);
311314
}
315+
function maybetype(type) {
316+
if (type == ":") return cont(typedef);
317+
return pass();
318+
}
319+
function typedef(type) {
320+
if (type == "variable"){cx.marked = "variable-3"; return cont();}
321+
return pass();
322+
}
312323
function vardef1(type, value) {
313-
if (type == "variable"){register(value); return cont(vardef2);}
324+
if (type == "variable") {
325+
register(value);
326+
return isTS ? cont(maybetype, vardef2) : cont(vardef2);
327+
}
314328
return cont();
315329
}
316330
function vardef2(type, value) {
@@ -340,7 +354,7 @@ CodeMirror.defineMode("javascript", function (config, parserConfig) {
340354
if (type == "(") return cont(pushlex(")"), pushcontext, commasep(funarg, ")"), poplex, statement, popcontext);
341355
}
342356
function funarg(type, value) {
343-
if (type == "variable") {register(value); return cont();}
357+
if (type == "variable") {register(value); return isTS ? cont(maybetype) : cont();}
344358
}
345359

346360
// Interface

mode/javascript/typescript.html

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>CodeMirror: JavaScript mode using TypeScript extension</title>
5+
<title>CodeMirror: TypeScript mode</title>
66
<link rel="stylesheet" href="../../lib/codemirror.css">
77
<script src="../../lib/codemirror.js"></script>
88
<script src="javascript.js"></script>
99
<link rel="stylesheet" href="../../doc/docs.css">
1010
<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
1111
</head>
1212
<body>
13-
<h1>CodeMirror: JavaScript mode using TypeScript extension</h1>
13+
<h1>CodeMirror: TypeScript mode</h1>
1414

1515
<div><textarea id="code" name="code">
1616
class Greeter {
@@ -43,19 +43,6 @@ <h1>CodeMirror: JavaScript mode using TypeScript extension</h1>
4343
});
4444
</script>
4545

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>
46+
<p>This is a specialization of the <a href="index.html">JavaScript mode</a>.</p>
6047
</body>
6148
</html>

0 commit comments

Comments
 (0)