peggyjs / peggy

Peggy: Parser generator for JavaScript
https://peggyjs.org/
MIT License
947 stars 65 forks source link

How to use source map? #278

Open physikerwelt opened 2 years ago

physikerwelt commented 2 years ago

I implemented the source map feature, but I was unable to set breakpoints in the pegjs file which would stop the program (using webstorm). Also, my collaborator was unable to find someone who knows how to use the generated map file in a node.js context.

Is there some general interest in understanding how the generated maps can be used in IDEs? I think it would be helpful to have a step by step guide on how to use the maps in the examples so that one can differentiate if the generated map was faulty or if the IDE does not support that feature.

hildjj commented 2 years ago

I've labelled this documentation, but I bet we'll run into several issues as we create those docs. Source maps should also get a lot easier to use for breakpoints in when #240 lands.

In the meantime, see if -m inline works?

physikerwelt commented 2 years ago

Thank you with -m inline it works out of the box with webstorm. Maybe I find a way to use the -m inline option from within the API.

hildjj commented 2 years ago

I'm going to leave this issue as documentation, then start a new issue for getting the inline output out of the API. In the meantime, this is roughly what the CLI is doing:

const res = peggy.generate("foo = 'foo'", {
  output: "source-and-map",
});

const sourceMap = res.toStringWithSourceMap();
const json = sourceMap.map.toJSON();
const buf = Buffer.from(JSON.stringify(json));
console.log(sourceMap.code + `\
//\x23 sourceMappingURL=data:application/json;charset=utf-8;base64,${buf.toString("base64")}
`);
physikerwelt commented 2 years ago

Thank you. My issue has been resolved and I was able to use breakpoints in the generated code.