Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merging inputSourceMaps may result in off-by-one lines #7632

Closed
loganfsmyth opened this issue Mar 26, 2018 · 1 comment

Comments

Projects
None yet
3 participants
@loganfsmyth
Copy link
Member

commented Mar 26, 2018

I'll be looking into this, but filing for tracking. Came across this with Vue's default quickstart application.


var vueOut = JSON.parse(String.raw`
{
  "version": 3,
  "sources": [
    "HelloWorld.vue"
  ],
  "names": [],
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA",
  "sourceRoot": "src/components",
  "sourcesContent": [
    "<template>\n  <div class=\"hello\">\n    <h1>{{ msg }}</h1>\n    <h2>Essential Links</h2>\n    <ul>\n      <li>\n        <a\n          href=\"https://vuejs.org\"\n          target=\"_blank\"\n        >\n          Core Docs\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://forum.vuejs.org\"\n          target=\"_blank\"\n        >\n          Forum\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://chat.vuejs.org\"\n          target=\"_blank\"\n        >\n          Community Chat\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://twitter.com/vuejs\"\n          target=\"_blank\"\n        >\n          Twitter\n        </a>\n      </li>\n      <br>\n      <li>\n        <a\n          href=\"http://vuejs-templates.github.io/webpack/\"\n          target=\"_blank\"\n        >\n          Docs for This Template\n        </a>\n      </li>\n    </ul>\n    <h2>Ecosystem</h2>\n    <ul>\n      <li>\n        <a\n          href=\"http://router.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vue-router\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"http://vuex.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vuex\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"http://vue-loader.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vue-loader\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://github.com/vuejs/awesome-vue\"\n          target=\"_blank\"\n        >\n          awesome-vue\n        </a>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'HelloWorld',\n  data () {\n    return {\n      msg: 'Welcome to Your Vue.js App'\n    }\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\nh1, h2 {\n  font-weight: normal;\n}\nul {\n  list-style-type: none;\n  padding: 0;\n}\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\na {\n  color: #42b983;\n}\n</style>\n"
  ]
}
`);

var babelOut = JSON.parse(String.raw`
{
  "version": 3,
  "sources": [
    "src/components/HelloWorld.vue"
  ],
  "names": [
    "name",
    "data",
    "msg"
  ],
  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,eAAe;AACbA,QAAM,YADO;AAEbC,MAFa,kBAEL;AACN,WAAO;AACLC,WAAK;AADA,KAAP;AAGD;AANY,CAAf",
  "file": "HelloWorld.vue",
  "sourceRoot": "/Users/thesmyth/projects/debugger-examples/examples/vue",
  "sourcesContent": [
    "//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nexport default {\n  name: 'HelloWorld',\n  data () {\n    return {\n      msg: 'Welcome to Your Vue.js App'\n    }\n  }\n}\n"
  ]
}
`);

With this, running

require("./packages/babel-core/lib/transformation/file/generate").mergeSourceMap(vueOut, babelOut)

results in

{
  "version": 3,
  "sources": [
    "HelloWorld.vue"
  ],
  "names": [],
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA;QAEA;wBACA;;WACA,AACA,AACA,AACA,AANA",
  "sourceRoot": "src/components",
  "sourcesContent": [
    "<template>\n  <div class=\"hello\">\n    <h1>{{ msg }}</h1>\n    <h2>Essential Links</h2>\n    <ul>\n      <li>\n        <a\n          href=\"https://vuejs.org\"\n          target=\"_blank\"\n        >\n          Core Docs\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://forum.vuejs.org\"\n          target=\"_blank\"\n        >\n          Forum\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://chat.vuejs.org\"\n          target=\"_blank\"\n        >\n          Community Chat\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://twitter.com/vuejs\"\n          target=\"_blank\"\n        >\n          Twitter\n        </a>\n      </li>\n      <br>\n      <li>\n        <a\n          href=\"http://vuejs-templates.github.io/webpack/\"\n          target=\"_blank\"\n        >\n          Docs for This Template\n        </a>\n      </li>\n    </ul>\n    <h2>Ecosystem</h2>\n    <ul>\n      <li>\n        <a\n          href=\"http://router.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vue-router\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"http://vuex.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vuex\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"http://vue-loader.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vue-loader\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://github.com/vuejs/awesome-vue\"\n          target=\"_blank\"\n        >\n          awesome-vue\n        </a>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'HelloWorld',\n  data () {\n    return {\n      msg: 'Welcome to Your Vue.js App'\n    }\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\nh1, h2 {\n  font-weight: normal;\n}\nul {\n  list-style-type: none;\n  padding: 0;\n}\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\na {\n  color: #42b983;\n}\n</style>\n"
  ]
}

which when converted to readable mappings is

{ source: 'src/components/HelloWorld.vue',
  generatedLine: 87,
  generatedColumn: 0,
  originalLine: 87,
  originalColumn: 0,
  name: null }
{ source: 'src/components/HelloWorld.vue',
  generatedLine: 88,
  generatedColumn: 8,
  originalLine: 89,
  originalColumn: 0,
  name: null }
{ source: 'src/components/HelloWorld.vue',
  generatedLine: 89,
  generatedColumn: 24,
  originalLine: 90,
  originalColumn: 0,
  name: null }
{ source: 'src/components/HelloWorld.vue',
  generatedLine: 91,
  generatedColumn: 11,
  originalLine: 88,
  originalColumn: 0,
  name: null }
{ source: 'src/components/HelloWorld.vue',
  generatedLine: 91,
  generatedColumn: 11,
  originalLine: 91,
  originalColumn: 0,
  name: null }
{ source: 'src/components/HelloWorld.vue',
  generatedLine: 91,
  generatedColumn: 11,
  originalLine: 92,
  originalColumn: 0,
  name: null }
{ source: 'src/components/HelloWorld.vue',
  generatedLine: 91,
  generatedColumn: 11,
  originalLine: 93,
  originalColumn: 0,
  name: null }
{ source: 'src/components/HelloWorld.vue',
  generatedLine: 91,
  generatedColumn: 11,
  originalLine: 94,
  originalColumn: 0,
  name: null }

The mappings for Vue's output are neat line to line mappings, and the output from Babel itself seems alright from what I can tell, but things get complicated when they are merged somewhere, resulting in

{ source: 'src/components/HelloWorld.vue',
  generatedLine: 88,
  generatedColumn: 8,
  originalLine: 89,
  originalColumn: 0,
  name: null }

above for instance, where I'd expect the generated and original line to be the same.

@loganfsmyth loganfsmyth changed the title Merging inputSourceMaps results in off-by-one lines Merging inputSourceMaps may result in off-by-one lines Mar 26, 2018

@gzzhanghao

This comment has been minimized.

Copy link
Contributor

commented Apr 4, 2018

A minimal reproducible example on gist: mergeSourceMap merges input.map and output.map into merged.map

@lock lock bot added the outdated label Jul 25, 2018

@lock lock bot locked as resolved and limited conversation to collaborators Jul 25, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.