1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-28 12:29:56 +00:00
TiddlyWiki5/node_modules/esprima/demo/parse.html
Jeremy Ruston f6338d9109 Replace pegs parser with Esprima
It preserves comments and text positions, enabling us to do syntax
highlighting. Hopefully.
2012-03-01 22:47:31 +00:00

191 lines
6.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Esprima: Parsing Demo</title>
<script src="../test/3rdparty/platform.js"></script>
<script src="checkenv.js"></script>
<script src="../esprima.js"></script>
<script src="../assets/json2.js"></script>
<script src="../assets/codemirror/codemirror.js"></script>
<script src="../assets/codemirror/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/codemirror/codemirror.css"/>
<link rel="stylesheet" type="text/css" href="../assets/style.css"/>
<link rel="stylesheet" type="text/css" href="parse.css"/>
<script>
/*jslint sloppy:true browser:true */
/*global esprima:true */
var parseId;
function parse(delay) {
if (parseId) {
window.clearTimeout(parseId);
}
parseId = window.setTimeout(function () {
var code, options, result, el, str;
// Special handling for regular expression literal since we need to
// convert it to a string literal, otherwise it will be decoded
// as object "{}" and the regular expression would be lost.
function adjustRegexLiteral(key, value) {
if (key === 'value' && value instanceof RegExp) {
value = value.toString();
}
return value;
}
if (typeof window.editor === 'undefined') {
code = document.getElementById('code').value;
} else {
code = window.editor.getValue();
}
options = {
comment: document.getElementById('comment').checked,
raw: document.getElementById('raw').checked,
range: document.getElementById('range').checked,
loc: document.getElementById('loc').checked
};
document.getElementById('tokens').value = '';
try {
result = esprima.parse(code, options);
str = JSON.stringify(result, adjustRegexLiteral, 4);
document.getElementById('tokens').value = JSON.stringify(esprima.parse(code,
{ tokens : true }).tokens, adjustRegexLiteral, 4);
} catch (e) {
str = e.toString();
}
el = document.getElementById('syntax');
el.value = str;
parseId = undefined;
}, delay || 811);
}
</script>
</head>
<body>
<div class="container">
<div class="topbar">
<ul class="nav">
<li><a href="../index.html">&larr; Home</a></li>
<li><a href="http://github.com/ariya/esprima">Code</a></li>
<li><a href="http://wiki.esprima.org">Documentation</a></li>
<li><a href="http://issues.esprima.org">Issues</a></li>
</ul>
</div>
<h1>Parser <small>produces syntax tree</small></h1>
<p>Esprima version <span id="version"></span>.</p>
<p>Type ECMAScript code:</p>
<p><textarea id="code" autofocus="autofocus" cols="70" rows="15" spellcheck="false">
// Life, Universe, and Everything
var answer = 6 * 7;</textarea></p>
<p id="codemirror" align="right"><small>The above code editor is based on <a href="http://codemirror.net" target="_blank">CodeMirror</a>.</small></p>
<p><label><input type="checkbox" id="raw"> Preserve raw value of literals</label></p>
<p><label><input type="checkbox" id="comment"> Include comments</label></p>
<p> Syntax node location info (start, end)</p>
<div style="margin-left: 20px;">
<p><label><input type="checkbox" id="range">Index-based range</label></p>
<p><label><input type="checkbox" id="loc">Line and column-based</label></p>
</div>
<div class="tabs">
<ul>
<li id="tab_syntax" class="active">
<h3><a id="show_syntax">Syntax</a></h3>
<div class="tab">
<textarea id="syntax" rows="20" readonly></textarea>
</div>
</li>
<li id="tab_tokens">
<h3><a id="show_tokens">Tokens</a></h3>
<div class="tab">
<textarea id="tokens" rows="20" readonly></textarea>
</div>
</li>
</ul>
</div>
<!--
<div class="footer"><strong>Esprima</strong> is created by
<a href="http://ariya.ofilabs.com/about" target="_blank">Ariya Hidayat</a>. Follow <a href="http://twitter.com/ariyahidayat">@ariyahidayat</a> on Twitter.
</div>
-->
<p id="testbox"><textarea id="test"></textarea></p>
</div>
<script>
window.onload = function () {
var id, el;
id = function (i) {
return document.getElementById(i);
};
el = id('version');
if (typeof el.innerText === 'string') {
el.innerText = esprima.version;
} else {
el.textContent = esprima.version;
}
try {
parse(1);
} catch (e) { }
id('show_syntax').onclick = function () {
id('tab_syntax').className = 'active';
id('tab_tokens').className = '';
};
id('show_tokens').onclick = function () {
id('tab_syntax').className = '';
id('tab_tokens').className = 'active';
};
};
</script>
<script>
/*jslint sloppy:true browser:true */
/*global CodeMirror:true */
try {
function quickParse() { parse(1); }
document.getElementById('comment').onchange = quickParse;
document.getElementById('raw').onchange = quickParse;
document.getElementById('range').onchange = quickParse;
document.getElementById('loc').onchange = quickParse;
document.getElementById('tokens').onchange = quickParse;
// Special handling for IE.
document.getElementById('comment').onclick = quickParse;
document.getElementById('raw').onclick = quickParse;
document.getElementById('range').onclick = quickParse;
document.getElementById('loc').onclick = quickParse;
document.getElementById('tokens').onclick = quickParse;
window.checkEnv();
// This is just testing, to detect whether CodeMirror would fail or not
window.editor = CodeMirror.fromTextArea(document.getElementById("test"));
window.editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true,
onChange: parse
});
} catch (e) {
// CodeMirror failed to initialize, possible in e.g. old IE.
document.getElementById('codemirror').innerHTML = '';
document.getElementById('code').onchange = parse;
document.getElementById('code').onkeydown = parse;
} finally {
document.getElementById('testbox').parentNode.removeChild(document.getElementById('testbox'));
}
</script>
</body>
</html>