handle sourcemap.names

src/compiler/utils/string_with_sourcemap.ts

@@ -7,7 +7,7 @@ type MappingSegment =
 
 type SourceMappings = {
 	sources: string[];
-	names: string[]; // names are ignored. might change in future
+	names: string[];
 	mappings: MappingSegment[][];
 };
 
@@ -69,7 +69,7 @@ export class StringWithSourcemap {
 		return {
 			version: 3,
 			sources: this.map.sources.slice(),
-			names: [],
+			names: this.map.names.slice(),
 			mappings: sourcemap_encode(this.map.mappings as any)
 		};
 	}
@@ -79,16 +79,16 @@ export class StringWithSourcemap {
 		if (this.string == '') return other;
 		if (other.string == '') return this;
 
-		// combine sources
+		// combine sources and names
 		const [sources, new_source_idx] = merge_tables(this.map.sources, other.map.sources);
-		//const [names, new_name_idx] = merge_tables(this.map.names, other.map.names);
+		const [names, new_name_idx] = merge_tables(this.map.names, other.map.names);
 
-		// update source refs
+		// update source refs and name refs
 		const other_mappings = other.map.mappings.map((line) =>
 			line.map(seg => {
 				const new_seg = seg.slice() as MappingSegment;
 				if (seg[1]) new_seg[1] = new_source_idx[seg[1]];
-				//if (seg[4]) new_seg[4] = new_name_idx[seg[4]];
+				if (seg[4]) new_seg[4] = new_name_idx[seg[4]];
 				return new_seg;
 			})
 		);
@@ -122,7 +122,7 @@ export class StringWithSourcemap {
 
 		return new StringWithSourcemap(
 			this.string + other.string,
-			{ sources, names: [], mappings }
+			{ sources, names, mappings }
 		);
 	}
 

test/sourcemaps/index.js

@@ -49,9 +49,9 @@ describe("sourcemaps", () => {
 				match => match.replace(/\d/g, "x")
 			);
 
-			fs.writeFileSync(`${outputBase}.html`, preprocessed.code);
+			fs.writeFileSync(`${outputBase}.svelte`, preprocessed.code);
 			if (preprocessed.map) {
-				fs.writeFileSync(`${outputBase}.html.map`, JSON.stringify(preprocessed.map, null, 2));
+				fs.writeFileSync(`${outputBase}.svelte.map`, JSON.stringify(preprocessed.map, null, 2));
 			}
 			fs.writeFileSync(
 				`${outputBase}.js`,
@@ -77,13 +77,16 @@ describe("sourcemaps", () => {
 
 			const { test } = require(`./samples/${dir}/test.js`);
 
-			js.mapConsumer = await new SourceMapConsumer(js.map);
+			preprocessed.mapConsumer = preprocessed.map && await new SourceMapConsumer(preprocessed.map);
+			preprocessed.locate = getLocator(preprocessed.code);
+
+			js.mapConsumer = js.map && await new SourceMapConsumer(js.map);
 			js.locate = getLocator(js.code);
 
 			css.mapConsumer = css.map && await new SourceMapConsumer(css.map);
 			css.locate = getLocator(css.code || "");
 
-			test({ assert, input, js, css });
+			test({ assert, input, preprocessed, js, css });
 
 		});
 	});

test/sourcemaps/samples/sourcemap-names/_config.js

@@ -0,0 +1,50 @@
+import MagicString from 'magic-string';
+
+function replace(search, replace, content, src, options = { storeName: true }) {
+	let idx = -1;
+	while ((idx = content.indexOf(search, idx + 1)) != -1) {
+		src.overwrite(idx, idx + search.length, replace, options);
+	}
+}
+
+function result(src, filename) {
+	return {
+		code: src.toString(),
+		map: src.generateMap({
+			source: filename,
+			hires: true,
+			includeContent: false
+		})
+	};
+}
+
+export default {
+	preprocess: [
+		{
+			markup: ({ content, filename }) => {
+				const src = new MagicString(content);
+				replace('baritone', 'bar', content, src);
+				replace('--bazitone', '--baz', content, src);
+				replace('old_name_1', 'temp_new_name_1', content, src);
+				replace('old_name_2', 'temp_new_name_2', content, src);
+				return result(src, filename);
+			}
+		},
+		{
+			markup: ({ content, filename }) => {
+				const src = new MagicString(content);
+				replace('temp_new_name_1', 'temp_temp_new_name_1', content, src);
+				replace('temp_new_name_2', 'temp_temp_new_name_2', content, src);
+				return result(src, filename);
+			}
+		},
+		{
+			markup: ({ content, filename }) => {
+				const src = new MagicString(content);
+				replace('temp_temp_new_name_1', 'new_name_1', content, src);
+				replace('temp_temp_new_name_2', 'new_name_2', content, src);
+				return result(src, filename);
+			}
+		}
+	]
+};

test/sourcemaps/samples/sourcemap-names/input.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let old_name_1 = { baritone: 5 };
+	let old_name_2 = 'value_2';
+</script>
+<style>
+	div {
+		background-color: var(--bazitone);
+	}
+</style>
+<h1>use-names</h1>
+<div>{old_name_1.baritone}</div>
+<pre style="color: var(--bazitone)">{old_name_2}</pre>

test/sourcemaps/samples/sourcemap-names/test.js

@@ -0,0 +1,42 @@
+// needed for workaround, TODO remove
+import { getLocator } from 'locate-character';
+
+export function test({ assert, input, preprocessed, js, css }) {
+
+	assert.deepEqual(
+		preprocessed.map.names.sort(),
+		['baritone', '--bazitone', 'old_name_1', 'old_name_2'].sort()
+	);
+
+	function test_name(old_name, new_name, where) {
+
+		let loc = { character: -1 };
+		while (loc = where.locate(new_name, loc.character + 1)) {
+			const actualMapping = where.mapConsumer.originalPositionFor({
+				line: loc.line + 1, column: loc.column
+			});
+			if (actualMapping.line === null) {
+				// location is not mapped - ignore
+				continue;
+			}
+			assert.equal(actualMapping.name, old_name);
+		}
+		if (loc === undefined) {
+			// workaround for bug in locate-character, TODO remove
+			// https://github.com/Rich-Harris/locate-character/pull/5
+			where.locate = getLocator(where.code);
+		}
+	}
+
+	test_name('baritone', 'bar', js);
+	test_name('baritone', 'bar', preprocessed);
+
+	test_name('--bazitone', '--baz', css);
+	test_name('--bazitone', '--baz', preprocessed);
+
+	test_name('old_name_1', 'new_name_1', js);
+	test_name('old_name_1', 'new_name_1', preprocessed);
+
+	test_name('old_name_2', 'new_name_2', js);
+	test_name('old_name_2', 'new_name_2', preprocessed);
+}