Generate distinct paths for supporting .vue files in sourcemaps

[connor4312]

What problem does this feature solve?

Hello Vue 👋

I'm working on our new JavaScript debugger for VS Code, and ran into some problems when trying out Vue. The default vue-cli setup creates several supporting .vue scripts. For instance, open the Chrome devtools and ctrl p for "App.vue" in a new project. The top entry is the correct Vue file, the others aren't.

From the VS Code perspective, the user might ask us to set a breakpoint in a Vue file. We know which file the breakpoint is attached to on disk, and we need to figure out which loaded file that breakpoint gets mapped to. However, because all these paths are quite similar and all (in the context of a generic web app) possibly the file we want, we end up putting the breakpoint in the wrong file and breaking in the incorrect place. And often the supporting scripts evaluate before the 'real' script does, so we can't, for example, wait and pick the best match from the possible candidates.

What does the proposed API look like?

The simplest solution would be to prefix the supporting files with some path like __vue__, or something along those lines. This would prevent the paths from incorrectly mapping to files that exist on disk.

[posva]

Maybe @znck or @sodatea know more about where to do something here

[znck]

This happens in vue-loader, right now I don’t have bandwidth to take it but I can guide if someone is interested.

[connor4312]

I could probably find some time to help out. Code pointers or guidance would be appreciated 🙂

[connor4312]

This is turning out to be a little more tricky than I thought. Convincing webpack to resolve paths that don't actually exist on the filesystem is difficult; I've made some headway with the virtual-module-webpack-plugin, though it's somewhat dangerous and there's more work to do to have imports from adjusted modules resolve correctly, I'm not really happy with this solution. Maybe there's a way to tweak change the locations in the sourcemaps for these files without needing to ask Webpack to treat them as entirely different disk files.

I've pushed some ugly scratch work to https://github.com/connor4312/vue-loader

[connor4312]

In microsoft/vscode-js-debug@2f3c93a I introduced a heuristic that seems to work very well for plain Vue with JS files, where the path is different (as in the screenshot above). However, with lang="ts" in vue components the path of the generated code is entirely indistinguishable from that of the generated code.

E.g., only one of these is the right one:

Without doing some kind of source code analysis, which is complex and fragile, I can't deterministically tell which one is the 'right' script to map back to the file.

[sirlancelot]

Would be neat to see this fixed as well. It's difficult to know which one is correct even as a human looking at Chrome Devtools 🤷

[connor4312]

@znck let me know what you think a good solution is. We've gotten continued reports of people running into this with VS Code 🙂