#esprima

We recognize directly the different elements in the whole text, and we give directly a particular priority. All these elements are visual and structural clearly separated. A way to find patterns or extraieren blocks is the use of "regular expressions". In this process the text is compared with [...]

nodejsでコマンドライン実行するToy SImulator用Restricted JavaScript をtoyjs関数にして、ブラウザ上でJSコード編集とコンパイル出来るよう にしたもの。CDNのexprimaパーザとaceエディタを使った。

Last time we discussed version 1.0 of Code on the Go; both the libraries I used and why I decided to do a rewrite for 2.0. Now we're going to talk about the libraries I used in 2.0. I'll explain what they do and why I decided to use them.

WinJS 2.0 In the case of WinJS the question really become "Why HTML/JavaScript?" After all I could have used XAML/C# and been just as comfortable. The reason I chose HTML/JavaScript was the same in both: The editor library. In the XAML/C# world there are editors out there but none are free. Now I have zero issue paying for something but they are not cheap and I had no idea if this would make me any money. (Still have no idea for that matter.) In the HTML/JavaScript world I knew of one free code editor, CodeMirror, and would learn of another while developing 2.0.

Orion Orion an open source HTML/JavaScript code editor. I found it when looking in to making my autocomplete better in CodeMirror. Knowing that the Esprima library (see below) would be my best bet I started poking around the site. To my shock there was an example of using Esprima to power autocomplete. I quickly investigated and found out that the example had imbedded a library called Orion. Now I had to chose: Use Code Mirror that I knew and had some features that would make life easier (like a document system to make having more than one file open at a time simple), yet Orion was less black box like for me as well as had autocomplete that put CodeMirror to shame. I decided that autocomplete would win the day. The version or Orion that I use has been heavily customize. I do plan to submit that work to the project at some point. Orion provides syntax highlighting, autocomplete, code folding, undo/redo, text formatting, brace matching, and more.

Almond Almond is an Asynchronous Module Definition (AMD) library. AMD is a development pattern where you define "modules" and then import them as needed, removing the need for most global variables. Originally I had no plan to use the AMD pattern, planning to use a name spacing system. Orion though was build internally to use AMD via Almond, though it exposed a global variable so you could use either. As I tweaked Orion I got to like the AMD pattern with Almond and decided to use it. I like it so much that I've made it my default pattern now.

Knockout Knockout is a library I had been meaning to try for ages. It gives you data-binding in HTML. Data-binding is a way to allow you to not have to use 'getElementByX' methods or inline on-event handlers. This allows the two code sources to be extremely independent of one another. Knowing that I loved Dad-binding in the XAML world I figured I'd love to have for HTML too and I did.

Continuum Continuum is one of the most interesting I've seen. Continuum is a JavaScript Runtime Environment written in JavaScript. I've always loved the project but had no good use of it, till now. One of the features that I'm proud of developing is a "debug" mode for Code on the Go. It uses Continuum to run and test your code while being safe and sandboxed.

Esprima As explained in the last post Esprima is a library that analyzes JavaScript creating an AST. In fact there are THREE versions of Esprima in Code on the Go. Orion contains a modified version for JavaScript autocomplete. Continuum contains a version that it uses to help it run JavaScript. Finally there's a version that I added and use to show users syntactical errors in their code. I have thought about trying to reduce down to just one version that they all could use. For now though I'm leaving it at three.

CodeMirror Once I had decided to use Orion for the editor I had expected to drop CodeMirror and I did. Then I wanted to add the "debug" mode. To do so I need a user interface. After trying different things I realized I could use the demo that comes with Continuum with some modifications. That demo used CodeMirror and I didn't want to spend the time yanking it out yet. And so CodeMirror returned.

PortableRest PortableRest is a library designed to make calls to REST services simple. While currently the only place I use it currently is to receive feedback from users eventually it will be used for more.

OfflineAjax OfflineAjax is a library I built to solve a simple problem. If I user submits feedback while the machine is offline I would need to store it and send it at a later point. And that's what OfflineAjax does. It provides an object with nearly the same API as XHR but only adds each request to a queue, only popping items out when there is internet. Currently there is a flaw in that if the app loses focus the queue is loss.

MetroColorPicker Metro ColorPicker is a user interface component that I made. It allows a user to select from preset colors or define their own. I use it to allow users to customize the colors in the editor.

Blanket.js is seamless code coverage.  It's only a basic release, but so far we're very excited about it.  Please gives us feedback or help out with the dev.

Esprima[http://esprima.org/]

Esprima is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScript).

Esprima runs on web browsers (IE 6+, Firefox 1+, Safari 3+, Chrome 1+, Konqueror 4.6+, Opera 8+) as well as Node.js.

Features

Full support for ECMAScript 5.1 (ECMA-262)

Sensible syntax tree format, compatible with Mozilla Parser AST Heavily tested (> 550 unit tests with solid 100% statement coverage)

Optional tracking of syntax node location (index-based and line-column)

Experimental support for ES6/Harmony (module, class, destructuring, ...)