<!doctype html>

<title>CodeMirror: Tern Demo</title>
<meta charset="utf-8"/>


<!-- CodeMirror -->
    <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
    <script src="../node_modules/codemirror/lib/codemirror.js"></script>
    <link rel="stylesheet" href="../node_modules/codemirror/theme/eclipse.css">
    <script src="../node_modules/codemirror/addon/edit/closetag.js"></script>
    <script src="../node_modules/codemirror/addon/edit/closebrackets.js"></script>    
    <script src="../node_modules/codemirror/addon/edit/matchbrackets.js"></script>
    <script src="../node_modules/codemirror/addon/selection/active-line.js"></script>
    <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
    <script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>    

    <script src="../node_modules/codemirror/addon/lint/lint.js"></script>
    <link rel="stylesheet" href="../node_modules/codemirror/addon/lint/lint.css">


<script>
var defs = [];
CodeMirror.tern = {};
CodeMirror.tern.addDef = function(def) {
	defs.push(def);
}
</script>
    <script src="defs/ecma5.json.js"></script>    
    <script src="defs/browser.json.js"></script>
        
  <!-- Tern JS -->
  <script src="../node_modules/acorn/dist/acorn.js"></script>
  <script src="	../node_modules/acorn/dist/acorn_loose.js"></script>
  <script src="../node_modules/acorn/dist/walk.js"></script>
  <script src="../node_modules/tern/lib/signal.js"></script>
  <script src="../node_modules/tern/lib/tern.js"></script>
  <script src="../node_modules/tern/lib/def.js"></script>
  <script src="../node_modules/tern/lib/comment.js"></script>
  <script src="../node_modules/tern/lib/infer.js"></script>
  
  <script src="../node_modules/tern/plugin/doc_comment.js"></script>
 

  <!-- Official CodeMirror Tern addon -->
  <script src="../node_modules/codemirror/addon/tern/tern.js"></script>   
  
<link rel="stylesheet" href="../node_modules/codemirror/addon/dialog/dialog.css">
<link rel="stylesheet" href="../node_modules/codemirror/addon/hint/show-hint.css">
<link rel="stylesheet" href="../node_modules/codemirror/addon/tern/tern.css">
<script src="../node_modules/codemirror/addon/dialog/dialog.js"></script>
<script src="../node_modules/codemirror/addon/hint/show-hint.js"></script>
<script src="../node_modules/codemirror/addon/tern/tern.js"></script>

<!--  Tern Lint -->
  <script src="../codemirror/addon/lint/tern-lint.js"></script>  
  <script src="../lint.js"></script>
    
<style>
      .CodeMirror {border: 1px solid #ddd;}
    </style>
<div id=nav>


  <ul>
    <li><a href="../index.html">Home</a>
    <li><a href="../doc/manual.html">Manual</a>
    <li><a href="https://github.com/marijnh/codemirror">Code</a>
  </ul>
  <ul>
    <li><a class=active href="#">Tern</a>
  </ul>
</div>

<article>
<h2>Tern Lint Demo</h2>
<form><textarea id="code" name="code">/**
 * @returns {Boolean}
 */
function test(state) {
  if (state) {
    return 'true'  //Raise warning
  } else {
    return 'false'  //Raise warning
  }
  return true; // OK
}


/**
 * @param {String} x
 * @param {Number} y
 * @returns {String}
**/
function foo(x, y) {
  return x.length * y;
}
foo('Hello', 42);
</textarea></p>

<p>Demonstrates integration of <a href="http://ternjs.net/">Tern</a>
and CodeMirror. The following keys are bound:</p>

<dl>
  <dt>Ctrl-Space</dt><dd>Autocomplete</dd>
  <dt>Ctrl-I</dt><dd>Find type at cursor</dd>
  <dt>Alt-.</dt><dd>Jump to definition (Alt-, to jump back)</dd>
  <dt>Ctrl-Q</dt><dd>Rename variable</dd>
</dl>

<p>Documentation is sparse for now. See the top of
the <a href="../node_modules/codemirror/addon/tern/tern.js">script</a> for a rough API
overview.</p>

<script>

  function getURL(url, c) {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.send();
    xhr.onreadystatechange = function() {
      if (xhr.readyState != 4) return;
      if (xhr.status < 400) return c(null, xhr.responseText);
      var e = new Error(xhr.responseText || "No response");
      e.status = xhr.status;
      c(e);
    };
  }

  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    mode: "javascript"
  });

  //var server;
  //getURL("http://ternjs.net/defs/ecma5.json", function(err, code) {
  //  if (err) throw new Error("Request for ecma5.json: " + err);
  var server = new CodeMirror.TernServer({defs: defs, plugins:{"lint":{}, "doc_comment": {strong: true}}});
    editor.setOption("extraKeys", {
      "Ctrl-Space": function(cm) { server.complete(cm); },
      "Ctrl-I": function(cm) { server.showType(cm); },
      "Alt-.": function(cm) { server.jumpToDef(cm); },
      "Alt-,": function(cm) { server.jumpBack(cm); },
      "Ctrl-Q": function(cm) { server.rename(cm); },
    })
    editor.setOption("gutters",["CodeMirror-lint-markers"]);
    editor.setOption("lint", {getAnnotations: CodeMirror.ternLint, async : true, server: server})
    editor.on("cursorActivity", function(cm) { server.updateArgHints(cm); });
  //});
    
</script>

  </article>
