Vue version

vuejs/core(Vue 3)

Link to minimal reproduction

https://template-explorer.vuejs.org/#eyJzcmMiOiI8ZGl2PmhlbGxvIHdvcmxkPC9kaXY+XG48ZGl2Pm90aGVyPC9kaXY+Iiwib3B0aW9ucyI6e319

Steps to reproduce

Click the source code in the editor with the cursor, there is no highlight in the output device, but click in the output device, there will be a corresponding highlight in the editor

What is expected?

Click the corresponding line in the editor, and there is no highlight in the outputter

What is actually happening?

Click the corresponding line in the editor, and the corresponding highlight will appear in the outputter

System Info

No response

Any additional comments?

After I checked the code, I found the reason because the configuration error in the template-explorer/src/index.ts file:

const { code, ast, map } = compileFn(source, {
        filename: 'ExampleTemplate.vue',
        ...compilerOptions,
        sourceMap: true,
        onError: err => {
          errors.push(err)
        }
      })

the filename is not overwritten(note the order), but the default value Foo.vue is used, which needs to be modified to this:

const { code, ast, map } = compileFn(source, {
        ...compilerOptions,
        filename: 'ExampleTemplate.vue',
        sourceMap: true,
        onError: err => {
          errors.push(err)
        }
      })

In this way, the following code call is valid:

const pos = lastSuccessfulMap.generatedPositionFor({
          source: 'ExampleTemplate.vue',
          line: e.position.lineNumber,
          column: e.position.column - 1
        })