(fix) adjust sourcemap paths (#1851)

- .svelte.ts -> .svelte
- remove path prefix

Author: dummdidumm

packages/svelte2tsx/src/emitDts.ts

@@ -92,7 +92,10 @@ async function createTsCompilerHost(options: any, svelteMap: SvelteMap) {
     // TypeScript writes the files relative to the found tsconfig/jsconfig
     // which - at least in the case of the tests - is wrong. Therefore prefix
     // the output paths. See Typescript issue #25430 for more.
-    const pathPrefix = path.relative(process.cwd(), path.dirname(options.configFilePath));
+    const pathPrefix = path
+        .relative(process.cwd(), path.dirname(options.configFilePath))
+        .split(path.sep)
+        .join('/');
 
     const svelteSys: ts.System = {
         ...ts.sys,
@@ -123,11 +126,37 @@ async function createTsCompilerHost(options: any, svelteMap: SvelteMap) {
             return ts.sys.readDirectory(path, extensionsWithSvelte, exclude, include, depth);
         },
         writeFile(fileName, data, writeByteOrderMark) {
-            return ts.sys.writeFile(
-                pathPrefix ? path.join(pathPrefix, fileName) : fileName,
-                data,
-                writeByteOrderMark
-            );
+            fileName = pathPrefix ? path.join(pathPrefix, fileName) : fileName;
+            if (fileName.endsWith('d.ts.map')) {
+                data = data.replace(/"sources":\["(.+?)"\]/, (_, sourcePath: string) => {
+                    // Due to our hack of treating .svelte files as .ts files, we need to adjust the extension
+                    if (sourcePath.endsWith('.svelte.ts')) {
+                        sourcePath = sourcePath.slice(0, -3);
+                    }
+                    // The inverse of the pathPrefix adjustment
+                    sourcePath =
+                        pathPrefix && sourcePath.includes(pathPrefix)
+                            ? sourcePath.slice(0, sourcePath.indexOf(pathPrefix)) +
+                              sourcePath.slice(
+                                  sourcePath.indexOf(pathPrefix) + pathPrefix.length + 1
+                              )
+                            : sourcePath;
+                    return `"sources":["${sourcePath}"]`;
+                });
+            } else if (fileName.endsWith('js.map')) {
+                data = data.replace(/"sources":\["(.+?)"\]/, (_, sourcePath: string) => {
+                    // The inverse of the pathPrefix adjustment
+                    sourcePath =
+                        pathPrefix && sourcePath.includes(pathPrefix)
+                            ? sourcePath.slice(0, sourcePath.indexOf(pathPrefix)) +
+                              sourcePath.slice(
+                                  sourcePath.indexOf(pathPrefix) + pathPrefix.length + 1
+                              )
+                            : sourcePath;
+                    return `"sources":["${sourcePath}"]`;
+                });
+            }
+            return ts.sys.writeFile(fileName, data, writeByteOrderMark);
         }
     };
 

packages/svelte2tsx/test/emitDts/index.ts

@@ -18,7 +18,7 @@ async function testEmitDts(sample: string) {
             declarationDir: 'package',
             svelteShimsPath: require.resolve(join(process.cwd(), 'svelte-shims.d.ts')),
             ...config,
-            libRoot: config.libRoot ? join(cwd, config.libRoot) : cwd
+            libRoot: config.libRoot ? join(cwd, config.libRoot) : join(cwd, 'src')
         });
         const expectedFiles = fs.readdirSync(join(cwd, 'expected'));
         const actual_files = fs.readdirSync(join(cwd, 'package'));
@@ -59,6 +59,6 @@ describe('emitDts', async () => {
     let samplesToTest = samples.filter((s) => s.endsWith('.solo'));
     samplesToTest = samplesToTest.length ? samplesToTest : samples;
     for (const sample of samplesToTest) {
-        it(sample, async () => await testEmitDts(sample)).timeout(5000);
+        it(sample, async () => await testEmitDts(sample)).timeout(10000);
     }
 });

packages/svelte2tsx/test/emitDts/samples/typescript-declarationMap/expected/Test.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        astring: string;
+    };
+    events: {
+        event: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            astring: string;
+        };
+    };
+};
+export type TestProps = typeof __propDef.props;
+export type TestEvents = typeof __propDef.events;
+export type TestSlots = typeof __propDef.slots;
+export default class Test extends SvelteComponentTyped<TestProps, TestEvents, TestSlots> {
+    get astring(): string;
+}
+export {};
+//# sourceMappingURL=Test.svelte.d.ts.map

packages/svelte2tsx/test/emitDts/samples/typescript-declarationMap/expected/Test.svelte.d.ts.map

@@ -0,0 +1,2 @@
+export { default as Test } from './Test.svelte';
+//# sourceMappingURL=index.d.ts.map

packages/svelte2tsx/test/emitDts/samples/typescript-declarationMap/expected/index.d.ts

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    export const astring: string;
+
+    const dispatch = createEventDispatcher();
+    dispatch('event', true);
+</script>
+
+<slot {astring} />

packages/svelte2tsx/test/emitDts/samples/typescript-declarationMap/expected/index.d.ts.map

@@ -0,0 +1 @@
+export { default as Test } from './Test.svelte';

packages/svelte2tsx/test/emitDts/samples/typescript-declarationMap/src/Test.svelte

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "moduleResolution": "node",
+        "module": "es2020",
+        "lib": ["es2020", "DOM"],
+        "target": "es2019",
+        "isolatedModules": true,
+        "resolveJsonModule": true,
+        "esModuleInterop": true,
+        "allowJs": true,
+        "checkJs": true,
+        "declarationMap": true
+    },
+    "include": ["./src/**/*.d.ts", "./src/**/*.js", "./src/**/*.ts", "./src/**/*.svelte"]
+}