Feat/source: sourceMap support

packages/network-debugger/src/fork/resource-service.ts

@@ -3,33 +3,16 @@ import path from 'path'
 import { fileURLToPath, pathToFileURL } from 'url'
 import { __dirname } from '../common'
 
+// Actually Allowed Values: JavaScript, WebAssembly
 function getScriptLangByFileName(fileName: string) {
  const extension = fileName.split('.').pop()?.toLowerCase()
  switch (extension) {
  case 'js':
  case 'mjs':
  case 'cjs':
  return 'JavaScript'
- case 'ts':
- return 'TypeScript'
- case 'jsx':
- return 'JSX'
- case 'tsx':
- return 'TSX'
- case 'html':
- case 'htm':
- return 'HTML'
- case 'css':
- return 'CSS'
- case 'vue':
- return 'Vue'
- case 'json':
- return 'JSON'
- case 'yaml':
- case 'yml':
- return 'YAML'
- case 'xml':
- return 'XML'
+ case 'wasm':
+ return 'WebAssembly'
  default:
  return 'Unknown'
  }
@@ -91,6 +74,23 @@ export class ResourceService {
  }
  }
 
+ readLastLine(filePath: string, stat: fs.Stats) {
+ const fileSize = stat.size
+ // chunkSize
+ const chunkSize = Math.min(1024, fileSize)
+ const startPos = fileSize - chunkSize
+ const buffer = Buffer.alloc(chunkSize)
+
+ const fd = fs.openSync(filePath, 'r')
+ fs.readSync(fd, buffer, 0, chunkSize, startPos)
+ fs.closeSync(fd)
+
+ const chunk = buffer.toString('utf8')
+ const lines = chunk.split('\n')
+
+ return lines[lines.length - 1] ?? ''
+ }
+
  private traverseDirToMap(directoryPath: string, ignoreList: string[] = ['node_modules']) {
  const scriptList = []
  const stack = [directoryPath]
@@ -99,39 +99,42 @@ export class ResourceService {
  while (stack.length > 0) {
  const currentPath = stack.pop()!
  const items = fs.readdirSync(currentPath)
-
  for (const item of items) {
  if (ignoreList.includes(item)) {
  continue
  }
 
  const fullPath = path.join(currentPath, item)
  const stats = fs.statSync(fullPath)
-
  if (stats.isDirectory()) {
  stack.push(fullPath)
  } else {
  const resolvedPath = path.resolve(fullPath)
  const fileUrl = pathToFileURL(resolvedPath)
  const scriptIdStr = `${++scriptId}`
+ let sourceMapURL = ''
+ if (/\.(js|ts)$/.test(resolvedPath)) {
+ const lastChunkCode = this.readLastLine(fullPath, stats)
+ const sourceMapFilePathMatch = lastChunkCode.match(/sourceMappingURL=(.+)$/)?.[1] ?? ''
+ sourceMapURL = sourceMapFilePathMatch
+ ? sourceMapFilePathMatch.startsWith('data:')
+ ? // inline sourcemap
+ sourceMapFilePathMatch
+ : // file path
+ pathToFileURL(path.join(currentPath, sourceMapFilePathMatch)).href
+ : ''
+ }
+ const url = fileUrl.href
+ const scriptLanguage = getScriptLangByFileName(url)
  scriptList.push({
- url: fileUrl.href,
- scriptLanguage: getScriptLangByFileName(fileUrl.href),
+ url,
+ scriptLanguage,
  embedderName: fileUrl.href,
  scriptId: scriptIdStr,
- // TODO: SourceMap?
- sourceMapURL: '',
+ sourceMapURL: sourceMapURL,
  hasSourceURL: false
- // TODO: is useful?
- // startColumn: 0,
- // startLine: 0,
- // endColumn: 231,
- // endLine: 145,
- // isModule: false,
- // length: 63559,
- // isLiveEdit: false
  })
- this.scriptMap.addMapping(fileUrl.href, scriptIdStr)
+ this.scriptMap.addMapping(url, scriptIdStr)
  }
  }
  }