Esprima update

node_modules/esprima/demo/parse.html

@@ -9,13 +9,155 @@
 <script src="../assets/json2.js"></script>
 <script src="../assets/codemirror/codemirror.js"></script>
 <script src="../assets/codemirror/javascript.js"></script>
+<script src="../assets/yui/yahoo-dom-event.js"></script>
+<script src="../assets/yui/treeview-min.js"></script>
 <link rel="stylesheet" type="text/css" href="../assets/codemirror/codemirror.css"/>
+<link rel="stylesheet" type="text/css" href="../assets/yui/treeview.css"/>
 <link rel="stylesheet" type="text/css" href="../assets/style.css"/>
 <link rel="stylesheet" type="text/css" href="parse.css"/>
+<style>
+.ygtvfocus .ygtvlabel,
+.ygtvfocus .ygtvlabel:link,
+.ygtvfocus .ygtvlabel:visited,
+.ygtvfocus .ygtvlabel:hover {
+    background-color: #eee;
+}
+
+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>
 <script>
 /*jslint sloppy:true browser:true */
-/*global esprima:true */
+/*global esprima:true, YAHOO:true */
 var parseId;
+
+function updateTree(syntax) {
+
+    if (window.tree) {
+        window.tree.destroy();
+        window.tree = null;
+    }
+
+    if (typeof syntax === 'undefined') {
+        return;
+    }
+
+    if (document.getElementById('tab_tree').className !== 'active') {
+        return;
+    }
+
+    window.tree = new YAHOO.widget.TreeView("treeview");
+    document.getElementById('collapse').onclick = function () { window.tree.collapseAll(); };
+    document.getElementById('expand').onclick = function () { window.tree.expandAll(); };
+
+    function isArray(o) {
+        return (typeof Array.isArray === 'function') ? Array.isArray(o) :
+            Object.prototype.toString.apply(o) === '[object Array]';
+    }
+
+    function convert(name, node) {
+        var result, i, key, value, child;
+
+        switch (typeof node) {
+        case 'string':
+            return {
+                type: 'Text',
+                label: name + ': ' + node
+            };
+
+        case 'number':
+        case 'boolean':
+            return {
+                type: 'Text',
+                label: name + ': ' + String(node)
+            };
+
+        case 'object':
+            if (!node) {
+                return {
+                    type: 'Text',
+                    label: name + ': null'
+                };
+            }
+            if (node instanceof RegExp) {
+                return {
+                    type: 'Text',
+                    label: name + ': ' + node.toString()
+                };
+            }
+            result = {
+                type: 'Text',
+                label: name,
+                expanded: true,
+                children: []
+            };
+            if (isArray(node)) {
+                if (node.length === 2 && name === 'range') {
+                    result.label = name + ': [' + node[0] + ', ' + node[1] + ']';
+                } else {
+                    result.label = result.label + ' [' + node.length + ']';
+                    for (i = 0; i < node.length; i += 1) {
+                        key = String(i);
+                        value = node[i];
+                        child = convert(key, value);
+                        if (isArray(child.children) && child.children.length === 1) {
+                            result.children.push(child.children[0]);
+                        } else {
+                            result.children.push(convert(key, value));
+                        }
+                    }
+                }
+            } else {
+                if (typeof node.type !== 'undefined') {
+                    result.children.push({
+                        type: 'Text',
+                        label: node.type,
+                        expanded: true,
+                        children: []
+                    });
+                    for (key in node) {
+                        if (Object.prototype.hasOwnProperty.call(node, key)) {
+                            if (key !== 'type') {
+                                value = node[key];
+                                result.children[0].children.push(convert(key, value));
+                            }
+                        }
+                    }
+                } else {
+                    for (key in node) {
+                        if (Object.prototype.hasOwnProperty.call(node, key)) {
+                            value = node[key];
+                            result.children.push(convert(key, value));
+                        }
+                    }
+                }
+            }
+            return result;
+
+        default:
+            break;
+        }
+
+        return {
+            type: 'Text',
+            label: '?'
+        };
+    }
+
+    window.tree.buildTreeFromObject(convert('Program body', syntax.body));
+    window.tree.render();
+}
+
 function parse(delay) {
     if (parseId) {
         window.clearTimeout(parseId);
@@ -54,8 +196,10 @@ function parse(delay) {
             str = JSON.stringify(result, adjustRegexLiteral, 4);
             document.getElementById('tokens').value = JSON.stringify(esprima.parse(code,
                 { tokens : true }).tokens, adjustRegexLiteral, 4);
+            updateTree(result);
         } catch (e) {
-            str = e.toString();
+            updateTree();
+            str = e.name + ': ' + e.message;
         }
 
         el = document.getElementById('syntax');
@@ -66,7 +210,7 @@ function parse(delay) {
 }
 </script>
 </head>
-<body>
+<body class="yui-skin-sam">
 <div class="container">
 
 <div class="topbar">
@@ -108,6 +252,15 @@ var answer = 6 * 7;</textarea></p>
         <textarea id="tokens" rows="20" readonly></textarea>
     </div>
     </li>
+    <li id="tab_tree">
+    <h3><a id="show_tree">Tree</a></h3>
+    <div class="tab">
+        <span style="margin-left: 500px;"><input type="button" id="expand" value="Expand All">
+            <input type="button" id="collapse" value="Collapse All"></span>
+        <div id="treeview">
+        </div>
+    </div>
+    </li>
 </ul>
 </div>
 
@@ -138,12 +291,21 @@ window.onload = function () {
         parse(1);
     } catch (e) { }
 
+    id('show_tree').onclick = function () {
+        id('tab_tree').className = 'active';
+        id('tab_syntax').className = '';
+        id('tab_tokens').className = '';
+        parse(1);
+    };
+
     id('show_syntax').onclick = function () {
+        id('tab_tree').className = '';
         id('tab_syntax').className = 'active';
         id('tab_tokens').className = '';
     };
 
     id('show_tokens').onclick = function () {
+        id('tab_tree').className = '';
         id('tab_syntax').className = '';
         id('tab_tokens').className = 'active';
     };