[babel-plugin] add debugFilePath option

[henryqdineen]

What changed / motivation ?

I have an extremely basic chrome extension locally where I want to show the styles for an element and link to the "Sources" tab.

The problem I ran into was that filenames in data-style-src do not have enough information for me to make a chrome.devtools.panels.openResource() call when the link is clicked.

My solution in this PR is to add debugFilePath option that we can use to customize the filenames used in data-style-src. In our case the debugFilePath implementation will be very similar to our logic in the our Rspack output.devtoolModuleFilenameTemplate config, which determines the filenames in the source map.

We don't have an immediate need for this feature but I figured it was worth creating a PR to open the discussion. We are interested in any future devtools and out want to make sure they work for us. Thanks!

Pre-flight checklist

• I have read the contributing guidelines
  Contribution Guidelines
• Performed a self-review of my code

[mellyeliu]

Awesome! Just needs flow fixes. We have it in the backlog to create a more comprehensive dev tools extension.

[nmn]

One change I would suggest is to not nest the config option under unstable_moduleResolution.

That is very specific to theming APIs and this work is more general than that, so it probably makes sense to make it a top-level config option.

[henryqdineen]

Sorry for the delay. I just pushed a commit that fixes the flow types and moves createShortFilename to be a top-level config option. Let me know if there is a more appropriate name for the option. debugFilePath?

[nmn]

Let's rename the option to debugFilePath and please rebase this PR.

[nmn]

The changes themselves look good. Should be good to merge after a rebase and change the name of the config option.

[henryqdineen]

Rebased, renamed, and updated PR subject/body. Thanks!