New example: syntax validator.

http://code.google.com/p/esprima/issues/detail?id=314
tjim · Aug 4, 2012 · f2884e1 · f2884e1
1 parent 005c222
commit f2884e1
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 0 deletions.
diff --git a/demo/validate.html b/demo/validate.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Esprima: Syntax Validator</title>
+<script src="../test/3rdparty/platform.js"></script>
+<script src="checkenv.js"></script>
+<script src="../esprima.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"/>
+<style>
+table th, table td {
+    text-align: left;
+    background-color: white;
+}
+
+tbody tr:nth-child(odd) td {
+    background-color: white;
+}
+
+tbody td {
+    background-color: white;
+}
+</style>
+</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="../doc/index.html">Documentation</a></li>
+<li><a href="http://issues.esprima.org">Issues</a></li>
+</ul>
+</div>
+
+<h1>Syntax Validator <small>checks for mistakes and errors</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">
+return 42; // Return statement not inside a function
+
+function f() {
+  'use strict';
+
+  // No more octal
+  var x = 042;
+
+  // Duplicate property
+  var y = { x: 1, x: 2 };
+
+  // With statement can't be used
+  with (z) {}
+
+}
+</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>
+
+<div id="result"><p>No result yet.</p></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 src="validate.js"></script>
+</body>
+</html>
diff --git a/demo/validate.js b/demo/validate.js
@@ -0,0 +1,74 @@
+/*jslint sloppy:true browser:true */
+/*global esprima:true, CodeMirror:true */
+var validateId;
+
+function validate(delay) {
+    if (validateId) {
+        window.clearTimeout(validateId);
+    }
+
+    validateId = window.setTimeout(function () {
+        var code, result, i, str;
+
+        if (typeof window.editor === 'undefined') {
+            code = document.getElementById('code').value;
+        } else {
+            code = window.editor.getValue();
+        }
+
+        try {
+            result = esprima.parse(code, { tolerant: true, loc: true }).errors;
+            if (result.length > 0) {
+                str = '<p>Found <b>' + result.length + '</b>:</p>';
+                for (i = 0; i < result.length; i += 1) {
+                    str += '<p>' + result[i].message + '</p>';
+                }
+            } else {
+                str = '<p>No syntax error.</p>';
+            }
+        } catch (e) {
+            str = e.name + ': ' + e.message;
+        }
+        document.getElementById('result').innerHTML = str;
+
+        validateId = undefined;
+    }, delay || 811);
+}
+
+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 {
+        validate(1);
+    } catch (e) { }
+};
+
+try {
+    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: validate
+    });
+} catch (e) {
+    // CodeMirror failed to initialize, possible in e.g. old IE.
+    document.getElementById('codemirror').innerHTML = '';
+    document.getElementById('code').onchange = validate;
+    document.getElementById('code').onkeydown = validate;
+} finally {
+    document.getElementById('testbox').parentNode.removeChild(document.getElementById('testbox'));
+}
diff --git a/index.html b/index.html
@@ -73,6 +73,7 @@ <h3>Use-cases</h3>
 <h3>Semantic analysis</h3>
 <ul>
     <li><a href="demo/parse.html">Code parser</a></li>
+    <li><a href="demo/validate.html">Syntax validator</a></li>
     <li><a href="demo/precedence.html">Operator precedence</a></li>
     <li><a href="demo/collector.html">Regex collector</a></li>
     <li><a href="demo/functiontrace.html">Function tracing</a></li>