fix: adjust declaration map paths

closes #7793

.changeset/pretty-lizards-attend.md

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

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

@@ -40,6 +40,10 @@ import Foo from 'your-library/Foo.svelte';
 
 > You should avoid using [SvelteKit-specific modules](modules) like `$app` in your packages unless you intend for them to only be consumable by other SvelteKit projects. E.g. rather than using `import { browser } from '$app/environment'` you could use [`import.meta.env.SSR`](https://vitejs.dev/guide/env-and-mode.html#env-variables) to make the library available to all Vite-based projects or better yet use [Node conditional exports](https://nodejs.org/api/packages.html#conditional-exports) to make it work for all bundlers. You may also wish to pass in things like the current URL or a navigation action as a prop rather than relying directly on `$app/stores`, `$app/navigation`, etc. Writing your app in this more generic fashion will also make it easier to setup tools for testing, UI demos and so on.
 
+## 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.
+
 ## Options
 
 `svelte-package` accepts the following options:

packages/package/package.json

@@ -13,7 +13,7 @@
 		"chokidar": "^3.5.3",
 		"kleur": "^4.1.5",
 		"sade": "^1.8.1",
-		"svelte2tsx": "~0.6.0"
+		"svelte2tsx": "~0.6.1"
 	},
 	"devDependencies": {
 		"@types/node": "^16.18.6",

packages/package/src/typescript.js

@@ -53,8 +53,14 @@ export async function emit_dts(config, cwd, files) {
 		// don't overwrite hand-written .d.ts files
 		if (excluded.has(normalized)) continue;
 
-		const source = fs.readFileSync(path.join(tmp, normalized), 'utf8');
-		write(path.join(config.package.dir, normalized), resolve_lib_alias(normalized, source, config));
+		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 path upwards is one level too much
+			source = source.replace(/"sources":\["\.\.\//, '"sources":["');
+		} else {
+			source = resolve_lib_alias(normalized, source, config);
+		}
+		write(path.join(config.package.dir, normalized), source);
 	}
 
 	rimraf(tmp);

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

@@ -0,0 +1,8 @@
+<script>
+import { createEventDispatcher } from 'svelte';
+export const astring = 'potato';
+const dispatch = createEventDispatcher();
+dispatch('event', true);
+</script>
+
+<slot {astring} />

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from 'svelte';
+declare const __propDef: {
+	props: {
+		astring?: string;
+	};
+	events: {
+		event: CustomEvent<boolean>;
+	} & {
+		[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/package/test/fixtures/typescript-declaration-map/expected/index.d.ts

@@ -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.js

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

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

@@ -0,0 +1,13 @@
+{
+	"name": "typescript-declaration-map",
+	"private": true,
+	"version": "1.0.0",
+	"description": "standard typescript package with declarationMap:true",
+	"type": "module",
+	"exports": {
+		"./package.json": "./package.json",
+		"./Test.svelte": "./Test.svelte",
+		".": "./index.js"
+	},
+	"svelte": "./index.js"
+}

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

@@ -0,0 +1,7 @@
+{
+	"name": "typescript-declaration-map",
+	"private": true,
+	"version": "1.0.0",
+	"description": "standard typescript package with declarationMap:true",
+	"type": "module"
+}

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

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

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

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

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

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

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

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

packages/package/test/index.js

@@ -31,7 +31,7 @@ async function test_make_package(path) {
 
 		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(pwd, file);
 			if (fs.statSync(pathname).isDirectory()) continue;
@@ -60,6 +60,9 @@ async function test_make_package(path) {
  * @param {string} content
  */
 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);
@@ -150,6 +153,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');
+});
+
 // chokidar doesn't fire events in github actions :shrug:
 if (!process.env.CI) {
 	test('watches for changes', async () => {