tern-browser-extension
Version:
A Tern plugin adding advanced features for Browser.
151 lines (124 loc) • 5.45 kB
HTML
<title>CodeMirror: Tern Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../node_modules/codemirror/doc/docs.css">
<!-- 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/hint/show-hint.js"></script>
<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/mode/xml/xml.js"></script>
<script src="../node_modules/codemirror/mode/htmlmixed/htmlmixed.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>
<!-- 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="../node_modules/tern-lint/../node_modules/codemirror/addon/lint/tern-lint.js"></script>
<script src="../node_modules/tern-lint/lint.js"></script>
<!-- Tern Browser Extension -->
<script src="../node_modules/sax/lib/sax.js"></script>
<script src="../browser-extension.js"></script>
<style>
.CodeMirror {border: 1px solid #ddd;}
</style>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../node_modules/codemirror/doc/logo.png"></a>
<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">
<html>
<div id="A"></div>
<script>
var elt = document.getElementById("A");
elt.addEventListener("click"
elt.addEventListener("XXX"
var e = new Event();
e.initEvent("abort"
e.initEvent("XXX"
</script>
</html>
</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: "text/html"
});
//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:{"browser-extension":{}, "lint":{}}});
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>