Compiling grammar and running parser in the browser

ky...@n3twork.com

unread,

Jun 2, 2014, 7:44:40 PM6/2/14

to pe...@googlegroups.com

I'm writing a grammar that will interact with certain portions of a page in the browser. Every time I try to make any change, however, I have to first update the grammar, then the parser, then test the results. How can I automate the parser generation process, so I never have to worry about that, and it'll always use the most up-to-date grammar (because it will be created at runtime). I know it's possible, because I've seen online editors for pegjs, but I wasn't able to glean any information from those sites on how to do this.

If anyone knows how I can do this, please let me know.

Guilherme Vieira

unread,

Jun 3, 2014, 8:26:47 AM6/3/14

to Kyle Adams, pe...@googlegroups.com

I think you can use a program called Browserify. It will take node.js modules (such PEG.js) and create browser bundles. Then you just put a <script src="/your-bundle.js"></script> and after that you can access the modules using require().

If you've never used node, this is more specifically how to do it. First:

$ cd your-project

$ npm install pegjs # This will install the PEG.js package inside your-project/node_modules.

$ npm install -g browserify # This will install Browserify as a command-line program on your machine for the currently logged in user. If it fails, try running as root.

Then create a file such as:

// parser-builder.js

var PEG = require('pegjs');

window.your_parser = PEG.buildParser(document.getElementById('parser-source-code').innerHTML);

Then you can Browserify that file with:

$ browserify parser-builder.js > bundle.js # The bundle will contain both your parser-builder.js code and its dependencies; in this case, just PEG.js.

Then you can do this in your HTML file:

<!doctype html>

// Your grammar code goes here!

</script>

After that point, your parser function should be ready to use in window.your_parser. Additionally, you can call require('pegjs') at any later time, including from the browser console, and call buildParser() again to build more parsers or whatever.

It is important that the #parser-source-code element come before the bundle inclusion since the bundle will execute immediately, and if an element with ID 'parser-source-code' doesn't exist at that point in the DOM, the script will fail (Check the console.)

It is also important that you only use window.your_parser after including the bundle, since it would be undefined prior to that.

Last but not least, #parser-source-code element's type attribute should be text/plain or text/x-something, otherwise the browser will try to actually execute the code as JavaScript.

Hope this helps and happy hacking.

Atenciosamente / Sincerely,
Guilherme Prá Vieira

On Mon, Jun 2, 2014 at 8:44 PM, <ky...@n3twork.com> wrote:

I'm writing a grammar that will interact with certain portions of a page in the browser. Every time I try to make any change, however, I have to first update the grammar, then the parser, then test the results. How can I automate the parser generation process, so I never have to worry about that, and it'll always use the most up-to-date grammar (because it will be created at runtime). I know it's possible, because I've seen online editors for pegjs, but I wasn't able to glean any information from those sites on how to do this.

If anyone knows how I can do this, please let me know.

--
You received this message because you are subscribed to the Google Groups "PEG.js: Parser Generator for JavaScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pegjs+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Andrei Neculau

unread,

Jun 3, 2014, 10:05:59 AM6/3/14

to pe...@googlegroups.com, ky...@n3twork.com

Clone https://github.com/dmajda/pegjs

then "make browser"

This will create a "browser" folder with a javascript file you can use, yes you guessed it, in the browser.

From that point on, just use pegjs and your grammar to compile a parser, just like it says in the README.md

/Andrei

ky...@n3twork.com

unread,

Jun 3, 2014, 6:41:28 PM6/3/14

to pe...@googlegroups.com, ky...@n3twork.com

That worked, thanks n2liquid. However, I don't want my html document to be made so much longer by including the grammar there, so is there a way I can import the text of the grammar from another file?

I tried the following:

but when I tried to parse something with that, I got an error because window.parser is undefined. Is my syntax incorrect, or is this impossible?

Guilherme Vieira

unread,

Jun 3, 2014, 8:06:43 PM6/3/14

to Kyle Adams, pe...@googlegroups.com

I don't think that works, unfortunately, no. For async loading of your grammar, I suggest doing an AJAX request. If you're using jQuery, that should be pretty easy to do. If you have trouble, let us know.

Also, avoid loading PEG.js the way I explained, unless you're already using Browserify for other things. Andrei's instructions are much more appropriate otherwise; I wasn't aware of that Makefile at all! Woops :)

Atenciosamente / Sincerely,
Guilherme Prá Vieira

Reply all

Reply to author

Forward