Latihan 1: Source Maps — Debugging

Latihan 1 dari materi Source Maps di Debugging — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Lengkapi createSourceMapResolver(mappings). mappings adalah array { bundled: { line, column }, original: { file, line, column } }, yaitu isi source map yang sudah di-decode.

Kembalikan objek dengan tiga method:

  1. resolve(line, column): cari mapping yang bundled.line === line dan bundled.column === column. Kembalikan original ({ file, line, column }), atau null kalau gak ada.
  2. resolveFrame(frame): frame berbentuk "bundled.js:10:80". Pecah dengan split(':'), ubah baris dan kolom jadi angka, lalu cari dengan resolve. Ketemu: kembalikan "file:baris:kolom" aslinya. Gak ketemu: kembalikan frame apa adanya.
  3. unmappedCount(): kembalikan berapa kali pencarian (resolve atau resolveFrame) gak menemukan mapping. Tiap pencarian yang gagal dihitung sekali.

Kode awal sudah berisi dua mapping dan enam console.log, biarkan begitu. Output-nya harus persis enam baris ini, berurutan:

  1. src/App.tsx
  2. 42
  3. src/utils.ts:8:5
  4. bundled.js:99:1
  5. null
  6. 2

Ada juga satu cek dengan mapping lain, { bundled: { line: 3, column: 7 }, original: { file: 'src/x.ts', line: 1, column: 2 } }: hasilnya harus ["src/x.ts", 1, "src/x.ts:1:2", "b.js:9:9", null, 2] untuk resolve(3, 7).file, .line, resolveFrame('b.js:3:7'), resolveFrame('b.js:9:9'), resolve(4, 4), dan unmappedCount().

Hint