feat: Allow to edit sourcemap to move caret to a correct place.

[hyrious]

Originally evanw/esbuild#1886

Abstract
Sourcemap is about strings, it is not strictly bound to some language. However, tools that processing sourcemaps are expecting some mapping rules to be followed. If we can move the corresponding caret of source code in the generated code, we may be able to follow those rules.

Reproduction

1. Consider we have a file written: (the | represents our caret).

   |<div>hello</div>

2. We edit that source into the form export default templ(…).

   export default templ(`|<div>hello</div>`)

3. Now something bad happens: if templ throws any error or just print something to the console, Chrome, Firefox and node won't generate correct location.

   This is easy to explain: the runtime captures an error thrown from templ, it then look for the source location from the sourcemap. However, it can not find a location because it did not find a caret around the templ token, either at left ( |templ ) or at right ( templ| ).

4. The solution is moving that caret to the left of templ, or even more left to export. Because the runtime has the whole AST, it knows where to stop searching.

API Advice
I currently have no good design to this feature. Ideally the carets may increase if we split the input into parts. It's not obvious to find a way to manipulate them.

[antfu]

I wonder if this would be out-of-scope of magic-string, as we only do text mapping and have no context of the how the code works. To modify the sourcemap, users can always manipulate the generated source code or use generateDecodedMap and encode afterward. In that case, I don't see magic-string needing to provide a hook for modifying the source map.

for your specific case, I guess you might be able to work around it by:

import MagicString from 'magic-string'

const RAW = '<div>hello</div>'

const str1 = new MagicString(RAW)
str1.prepend('export default templ(`')
str1.append('`);')

console.log(str1.toString())
console.log(str1.generateDecodedMap().mappings)

const str2 = new MagicString(RAW)
str2.overwrite(0, 1, `export default templ(\`${RAW[0]}`)
str2.append('`);')

console.log(str2.toString())
console.log(str2.generateDecodedMap().mappings)

export default templ(`<div>hello</div>`);
[ [ [ 22, 0, 0, 0 ] ] ]
export default templ(`<div>hello</div>`);
[ [ [ 0, 0, 0, 0 ], [ 23, 0, 0, 1 ] ] ]