阅读 JavaScript-TypeScript 源映射并在另一个中显示代码

Question

I have 2 main questions:

1. how to read or parse a js/ts source map file in NodeJs
2. how to find the equivalent javascript compiled part of code, from typescript selected code

---

I'm building a typescript compiler and I'm using typescript API for that.

after compiling the code I want to let the user to select a part of ts code and then I want to highlight the compiled equivalent code in a WebView.

so how to find/locate that piece of code?

please tell me if you need more information. and sorry for poor English

Answer 1

source-map is a library that parses source maps and gives you an api to run queries on them.

main.js.map

{
  "version": 3,
  "file": "main.js",
  "sourceRoot": "",
  "sources": [
    "main.ts"
  ],
  "names": [],
  "mappings": "AAKA,IAAM,KAAK,GAAM;IACf,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;CACL,CAAA"
}

Example usage

await sourcemap.SourceMapConsumer.with(mainSourceMap /* main.js.map */, null, (consumer) => {
  consumer.sources // [ 'main.ts' ]

  consumer.generatedPositionFor({
    source: "main.ts",
    line: 7,
    column: 2,
  }) // { line: 2, column: 4, lastColumn: 4 }

  consumer.originalPositionFor({
    line: 2,
    column: 4,
  })  // { source: 'main.ts', line: 7, column: 2, name: null }
})