Add ES6 download button

[Flamenco]

I added an ES6 export button. This will export the function as the default. I also clarified that the named export text box is only for CommonJS.

USAGE

import {parse} from './theExport.js'
parse(...)

or

import * as Parser from './theExport.js'
Parser.parse(...)

[hildjj]

I was expecting to see a format: 'es' in the call to generate()?

[Flamenco]

Not needed. Just need to export the function as default. It will probably work either way though.

[Flamenco]

I have been using this and also generating typescript bindings, so that generate method will all get updated when I get around to it.

[Flamenco]

Hey @hildjj

I took your advice and tried this, and it worked well.

  $( "#parser-download-es6" )
    .click(function(){

      // If this button was enabled, the source was already validated by 'rebuildGrammar'
      const esSource = peggy.generate(editor.getValue(), {
        cache: $("#option-cache").is(":checked"),
        output: "source",
        format: 'es'
      })

      var blob = new Blob([esSource], {type: "application/javascript"});
      window.saveAs(blob, "parser.js");

    });

[Flamenco]

No longer a default export though....

So this wont work.

import Parser from './theExport.js'
Parser.parse(...)

This will

import * as Parser from './theExport.js'
Parser.parse(...)

[hildjj]

format: 'es' has a few other side-effects, most of which aren't likely to affect the output for the web (yet). Once we add support for libraries to the web, though, it's likely to matter.

Default export isn't really right, since you also sometimes need access to the SyntaxError class.

import {parse} from './src/parser.js'

[Flamenco]

I just added a try/catch block to be safe.

[Flamenco]

format: 'es' has a few other side-effects, most of which aren't likely to affect the output for the web (yet). Once we add support for libraries to the web, though, it's likely to matter.

Default export isn't really right, since you also sometimes need access to the SyntaxError class.

import {parse} from './src/parser.js'

Yes, the named export is best for tree shaking to. I updated the first comment with the usage.

[hildjj]

OK, this looks good to me, ready to merge after rebase. Did you test with an invalid grammar to make sure the UI is adequate?

[Flamenco]

I downloaded the generated es6 and ran it in node. I needed to rename to .mjs... I am not sure if we should change the extension though, as it will work in bundler or if module is defined in project.

[Flamenco]

I don't know why the rebase is so messy, I am going to force push the branch.

[hildjj]

I agree that the default name being .mjs doesn't hurt anything and is more likely to work more often.

[hildjj]

Also note: none of this will go live on peggyjs.org until we do a release. It's theoretically possible to cherry-pick over to the stable branch, but it causes such a headache it's usually not worth it.

[Flamenco]

Want me to change the extension to mjs?

[hildjj]

Yes, please. I think changing to .mjs is a good idea.

[hildjj]

Thanks!

[Flamenco]

LOL Do you know how many times I tried to change that text box with "module.exports" over the past couple of years. 😆

[hildjj]

Open source is all about scratching your itch. :)