peggy icon indicating copy to clipboard operation
peggy copied to clipboard

How to use source map?

Open physikerwelt opened this issue 3 years ago • 4 comments

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.

physikerwelt avatar Jun 07 '22 17:06 physikerwelt

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?

hildjj avatar Jun 07 '22 17:06 hildjj

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.

physikerwelt avatar Jun 07 '22 20:06 physikerwelt

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")}
`);

hildjj avatar Jun 07 '22 22:06 hildjj

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

physikerwelt avatar Jun 08 '22 06:06 physikerwelt