Make typescript mode recognize type declarations

marijnh · marijnh · commit b3c1c795f561 · 2012-10-16T11:50:57.000+02:00
diff --git a/mode/javascript/index.html b/mode/javascript/index.html
@@ -75,9 +75,7 @@ <h1>CodeMirror: JavaScript mode</h1>
       <ul>
         <li><code>json</code> which will set the mode to expect JSON data rather than a JavaScript program.</li>
         <li>
-          <code>typescript</code> which will activate additional syntax highlighting and some other things for TypeScript code.
-          <br />
-          Click here for the demo which also provides an extra theme: <a href="typescript.html">typescript.html</a>
+          <code>typescript</code> which will activate additional syntax highlighting and some other things for TypeScript code (<a href="typescript.html">demo</a>).
         </li>
       </ul>
     </p>
diff --git a/mode/javascript/javascript.js b/mode/javascript/javascript.js
@@ -2,7 +2,9 @@
   * The TypeScript extensions are (C) Copyright 2012 by ComFreek <comfreek@outlook.com>
   */
 
-CodeMirror.defineMode("javascript", function (config, parserConfig) {
+// TODO actually recognize syntax of TypeScript constructs
+
+CodeMirror.defineMode("javascript", function(config, parserConfig) {
   var indentUnit = config.indentUnit;
   var jsonMode = parserConfig.json;
   var isTS = parserConfig.typescript;
@@ -25,7 +27,8 @@ CodeMirror.defineMode("javascript", function (config, parserConfig) {
     };
 
     // Extend the 'normal' keywords with the TypeScript language extensions
-    if (isTS) {
+    if (isTS) {
+      var type = {type: "variable", style: "variable-3"};
       var tsKeywords = {
         // object-like things
         "interface": kw("interface"),
@@ -42,12 +45,12 @@ CodeMirror.defineMode("javascript", function (config, parserConfig) {
         "super": kw("super"),
 
         // types
-        "string": type, "number": type, "bool": type, "any": type
+        "string": type, "number": type, "bool": type, "any": type
       };
 
-      for (var attr in tsKeywords) {
-        jsKeywords[attr] = tsKeywords[attr];
-      }
+      for (var attr in tsKeywords) {
+        jsKeywords[attr] = tsKeywords[attr];
+      }
     }
 
     return jsKeywords;
@@ -309,8 +312,19 @@ CodeMirror.defineMode("javascript", function (config, parserConfig) {
     if (type == "}") return cont();
     return pass(statement, block);
   }
+  function maybetype(type) {
+    if (type == ":") return cont(typedef);
+    return pass();
+  }
+  function typedef(type) {
+    if (type == "variable"){cx.marked = "variable-3"; return cont();}
+    return pass();
+  }
   function vardef1(type, value) {
-    if (type == "variable"){register(value); return cont(vardef2);}
+    if (type == "variable") {
+      register(value);
+      return isTS ? cont(maybetype, vardef2) : cont(vardef2);
+    }
     return cont();
   }
   function vardef2(type, value) {
@@ -340,7 +354,7 @@ CodeMirror.defineMode("javascript", function (config, parserConfig) {
     if (type == "(") return cont(pushlex(")"), pushcontext, commasep(funarg, ")"), poplex, statement, popcontext);
   }
   function funarg(type, value) {
-    if (type == "variable") {register(value); return cont();}
+    if (type == "variable") {register(value); return isTS ? cont(maybetype) : cont();}
   }
 
   // Interface
diff --git a/mode/javascript/typescript.html b/mode/javascript/typescript.html
@@ -2,15 +2,15 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>CodeMirror: JavaScript mode using TypeScript extension</title>
+    <title>CodeMirror: TypeScript mode</title>
     <link rel="stylesheet" href="../../lib/codemirror.css">
     <script src="../../lib/codemirror.js"></script>
     <script src="javascript.js"></script>
     <link rel="stylesheet" href="../../doc/docs.css">
     <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
   </head>
   <body>
-    <h1>CodeMirror: JavaScript mode using TypeScript extension</h1>
+    <h1>CodeMirror: TypeScript mode</h1>
 
 <div><textarea id="code" name="code">
 class Greeter {
@@ -43,19 +43,6 @@ <h1>CodeMirror: JavaScript mode using TypeScript extension</h1>
       });
     </script>
 
-    <p>
-      JavaScript mode supports a two configuration
-      options:
-      <ul>
-        <li><code>json</code> which will set the mode to expect JSON data rather than a JavaScript program.</li>
-        <li><code>typescript</code> which will activate additional syntax highlighting and some other things for TypeScript code.</li>
-      </ul>
-    </p>
-    
-    <p>
-      This sample also uses the <a href="../../theme/typebox.css">TypeBox.css</a> theme.
-    </p>
-
-    <p><strong>MIME types defined:</strong> <code>text/javascript</code>, <code>application/json</code>, <code>text/typescript</code>, <code>application/typescript</code>.</p>
+    <p>This is a specialization of the <a href="index.html">JavaScript mode</a>.</p>
   </body>
 </html>
