fix: adjust declaration map paths (#8843)

closes #7793

---------

Co-authored-by: Ben McCann <[email protected]>
Co-authored-by: Tee Ming <[email protected]>

Author: 3 people

.changeset/dirty-doors-hide.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/package': patch
+---
+
+chore: bump `svelte2tsx` dependency for more up-to-date `d.ts` output

.changeset/pretty-lizards-attend.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/package': patch
+---
+
+fix: adjust declaration map paths

documentation/docs/30-advanced/70-packaging.md

@@ -218,6 +218,23 @@ You should think carefully about whether or not the changes you make to your pac
 }
 ```
 
+## Source maps
+
+You can create so-called declaration maps (`d.ts.map` files) by setting `"declarationMap": true` in your `tsconfig.json`. This will allow editors such as VS Code to go to the original `.ts` or `.svelte` file when using features like _Go to Definition_. This means you also need to publish your source files alongside your dist folder in a way that the relative path inside the declaration files leads to a file on disk. Assuming that you have all your library code inside `src/lib` as suggested by Svelte's CLI, this is as simple as adding `src/lib` to `files` in your `package.json`:
+
+```json
+{
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		+++"src/lib",
+		"!src/lib/**/*.test.*",
+		"!src/lib/**/*.spec.*"+++
+	]
+}
+```
+
 ## Options
 
 `svelte-package` accepts the following options:

packages/package/package.json

@@ -24,7 +24,7 @@
 		"kleur": "^4.1.5",
 		"sade": "^1.8.1",
 		"semver": "^7.5.4",
-		"svelte2tsx": "~0.7.16"
+		"svelte2tsx": "~0.7.33"
 	},
 	"devDependencies": {
 		"@sveltejs/vite-plugin-svelte": "^5.0.1",

packages/package/src/index.js

@@ -34,7 +34,7 @@ async function do_build(options, analyse_code) {
 	const files = scan(input, extensions);
 
 	if (options.types) {
-		await emit_dts(input, temp, options.cwd, alias, files, tsconfig);
+		await emit_dts(input, temp, output, options.cwd, alias, files, tsconfig);
 	}
 
 	for (const file of files) {
@@ -137,7 +137,7 @@ export async function watch(options) {
 
 			if (!errored && options.types) {
 				try {
-					await emit_dts(input, output, options.cwd, alias, files, tsconfig);
+					await emit_dts(input, output, output, options.cwd, alias, files, tsconfig);
 					console.log('Updated .d.ts files');
 				} catch (e) {
 					errored = true;

packages/package/src/typescript.js

@@ -14,12 +14,13 @@ import { load_pkg_json } from './config.js';
  *
  * @param {string} input
  * @param {string} output
+ * @param {string} final_output
  * @param {string} cwd
  * @param {Record<string, string>} alias
  * @param {import('./types.js').File[]} files
  * @param {string | undefined} tsconfig
  */
-export async function emit_dts(input, output, cwd, alias, files, tsconfig) {
+export async function emit_dts(input, output, final_output, cwd, alias, files, tsconfig) {
 	const tmp = `${output}/__package_types_tmp__`;
 	rimraf(tmp);
 	mkdirp(tmp);
@@ -54,8 +55,28 @@ export async function emit_dts(input, output, cwd, alias, files, tsconfig) {
 			console.warn(`Using $lib/${normalized} instead of generated .d.ts file`);
 		}
 
-		const source = fs.readFileSync(path.join(tmp, normalized), 'utf8');
-		write(path.join(output, normalized), resolve_aliases(input, normalized, source, alias));
+		let source = fs.readFileSync(path.join(tmp, normalized), 'utf8');
+		if (file.endsWith('.d.ts.map')) {
+			// Because we put the .d.ts files in a temporary directory, the relative path needs to be adjusted
+			const parsed = JSON.parse(source);
+			if (parsed.sources) {
+				parsed.sources = /** @type {string[]} */ (parsed.sources).map((source) =>
+					posixify(
+						path.join(
+							path.relative(
+								path.dirname(path.join(final_output, normalized)),
+								path.dirname(path.join(input, normalized))
+							),
+							path.basename(source)
+						)
+					)
+				);
+				source = JSON.stringify(parsed);
+			}
+		} else {
+			source = resolve_aliases(input, normalized, source, alias);
+		}
+		write(path.join(output, normalized), source);
 	}
 
 	rimraf(tmp);

packages/package/test/fixtures/typescript-declaration-map/expected/Test.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	let { foo } = $props();
+</script>
+
+{foo}

packages/package/test/fixtures/typescript-declaration-map/expected/Test.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+  foo: string;
+};
+declare const Test: import("svelte").Component<$$ComponentProps, {}, "">;
+type Test = ReturnType<typeof Test>;
+export default Test
+//# sourceMappingURL=Test.svelte.d.ts.map

packages/package/test/fixtures/typescript-declaration-map/expected/Test.svelte.d.ts.map

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

packages/package/test/fixtures/typescript-declaration-map/expected/index.d.ts

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

packages/package/test/fixtures/typescript-declaration-map/expected/index.d.ts.map

@@ -0,0 +1,16 @@
+{
+	"name": "typescript-declaration-map",
+	"private": true,
+	"version": "1.0.0",
+	"description": "standard typescript package with declarationMap:true",
+	"type": "module",
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	}
+}

packages/package/test/fixtures/typescript-declaration-map/expected/index.js

@@ -0,0 +1,5 @@
+<script lang="ts">
+	let { foo }: { foo: string } = $props();
+</script>
+
+{foo}

packages/package/test/fixtures/typescript-declaration-map/package.json

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

packages/package/test/fixtures/typescript-declaration-map/src/lib/Test.svelte

@@ -0,0 +1,5 @@
+import preprocess from 'svelte-preprocess';
+
+export default {
+	preprocess: preprocess()
+};

packages/package/test/fixtures/typescript-declaration-map/src/lib/index.ts

@@ -0,0 +1,8 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"declaration": true,
+		"declarationMap": true
+	}
+}

packages/package/test/fixtures/typescript-declaration-map/svelte.config.js

@@ -42,7 +42,7 @@ async function test_make_package(path, options) {
 
 	assert.equal(actual_files, expected_files);
 
-	const extensions = ['.json', '.svelte', '.ts', 'js'];
+	const extensions = ['.json', '.svelte', '.ts', 'js', '.map'];
 	for (const file of actual_files) {
 		const pathname = join(output, file);
 		if (fs.statSync(pathname).isDirectory()) continue;
@@ -68,6 +68,10 @@ async function test_make_package(path, options) {
  * @param {string} content
  */
 async function format(file, content) {
+	if (file.endsWith('.map')) {
+		return content;
+	}
+
 	if (file.endsWith('package.json')) {
 		// For some reason these are ordered differently in different test environments
 		const json = JSON.parse(content);
@@ -152,6 +156,10 @@ test('SvelteKit interop', async () => {
 	await test_make_package('svelte-kit');
 });
 
+test('create package with declaration map', async () => {
+	await test_make_package('typescript-declaration-map');
+});
+
 test('create package with tsconfig specified', async () => {
 	await test_make_package('tsconfig-specified', { tsconfig: 'tsconfig.build.json' });
 });