Source maps include preprocessed source instead of original

[ghost]

Describe the bug
I am using Svelte, TypeScript and Webpack. As far as I understand the source map feature implemented in sveltejs/svelte#5584, Svelte should transform the source map generated by TypeScript (via svelte-preprocess) into the final source map. This is not the case, apparently the source map contains the preprocessed JavaScript output. For example, the following Svelte component:

<script lang="ts">
  let name: string = 'world';

  console.log("This is App.svelte, line 4!");
</script>

<main>
  Hello {name}!
</main>

results in the following content in the sourcemap:

<script lang="ts">let name = 'world';
console.log("This is App.svelte, line 4!");
</script>

<main>
  Hello {name}!
</main>

Logs
The log line in the developer console reads This is App.svelte, line 4! [...] App.svelte:2:8.

To Reproduce
Clone this repository: https://github.com/baileyherbert/svelte-webpack-starter
Update to the latest Svelte version (npm update) and run the server npm run dev. View the source content in the browser console.

Expected behavior
I would expect the original TypeScript source to be contained in the source map. The line/col mappings should refer to the original locations in App.svelte.

Information about your Svelte project:

• Firefox 78.8.0esr
• Debian Linux 10
• Svelte version 3.35.0
• svelte-preprocess 4.6.9
• svelte-loader 3.0.0
• TypeScript 4.2.3
• Webpack 5.26.2

Severity
Severity: Only annoying.

[dummdidumm]

I think the problem is that the source map from preprocessing is not passed into the compiler by svelte-loader. At least I don't see anything in there that hints at this.

[benmccann]

Thanks! Yes, I missed Webpack in the original description. I've transferred this to the svelte-loader repo because I think you're right that the support added to rollup-plugin-svelte was never added to svelte-loader

[non25]

@rtpt-jonaslieb Can you test a fix and tell me if that worked out for you?

yarn add -D svelte-loader@sveltejs/svelte-loader
# or
npm i -D sveltejs/svelte-loader

[ghost]

@non25 Sorry, I just got around to thoroughly test the new feature.
The line mapping seems to be correct now.

There is a regression however: Previously, the preprocessed sourcesContent was included in the source map, now the source map does not include any sourcesContent for Svelte files (or rather: the corresponding entry in sourcesContent is null).
It appears that the issue can be fixed by setting

js.map.sourcesContent = [ source ]

some time after the compilation, as far as I can tell from a minimal project.

Anyways, the line mapping is really helpful, so thanks for the swift implementation.

[dummdidumm]

This sounds like ampproject/remapping#116 , which is used in Svelte core to merge the preprocessed source map and the resulting map. If the preprocessed source map is empty, it happens.

[non25]

Should we fix it in svelte-loader with js.map.sourcesContent = [ source ]?
Or it should be fixed upstream?

[dummdidumm]

There is a draf PR for it upstream in Svelte core sveltejs/svelte#6089 . Does the current behavior cause problems or is it just a "I noticed this" thing?

[ghost]

For my use case, this means that I always need to jump back to the editor to see the actual Svelte code. Ideally, I'd have all of that directly in the browser...