[feat] sourcemap markup (#6427)

* sourcemap markup

* sourcemap textnode

* update test

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -19,7 +19,7 @@ import { add_event_handler } from '../shared/add_event_handlers';
 import { add_action } from '../shared/add_actions';
 import bind_this from '../shared/bind_this';
 import { is_head } from '../shared/is_head';
-import { Identifier } from 'estree';
+import { Identifier, ExpressionStatement, CallExpression } from 'estree';
 import EventHandler from './EventHandler';
 import { extract_names } from 'periscopic';
 import Action from '../../../nodes/Action';
@@ -263,15 +263,23 @@ export default class ElementWrapper extends Wrapper {
 		}
 
 		if (parent_node) {
-			block.chunks.mount.push(
-				b`@append(${parent_node}, ${node});`
-			);
+			const append = b`@append(${parent_node}, ${node});`;
+			((append[0] as ExpressionStatement).expression as CallExpression).callee.loc = {
+				start: this.renderer.locate(this.node.start),
+				end: this.renderer.locate(this.node.end)
+			};
+			block.chunks.mount.push(append);
 
 			if (is_head(parent_node)) {
 				block.chunks.destroy.push(b`@detach(${node});`);
 			}
 		} else {
-			block.chunks.mount.push(b`@insert(#target, ${node}, #anchor);`);
+			const insert = b`@insert(#target, ${node}, #anchor);`;
+			((insert[0] as ExpressionStatement).expression as CallExpression).callee.loc = {
+				start: this.renderer.locate(this.node.start),
+				end: this.renderer.locate(this.node.end)
+			};
+			block.chunks.mount.push(insert);
 
 			// TODO we eventually need to consider what happens to elements
 			// that belong to the same outgroup as an outroing element...

src/compiler/compile/render_dom/wrappers/Text.ts

@@ -44,10 +44,19 @@ export default class TextWrapper extends Wrapper {
 		if (this.skip) return;
 		const use_space = this.use_space();
 
+		const string_literal = {
+			type: 'Literal',
+			value: this.data,
+			loc: {
+				start: this.renderer.locate(this.node.start),
+				end: this.renderer.locate(this.node.end)
+			}
+		};
+
 		block.add_element(
 			this.var,
-			use_space ? x`@space()` : x`@text("${this.data}")`,
-			parent_nodes && (use_space ? x`@claim_space(${parent_nodes})` : x`@claim_text(${parent_nodes}, "${this.data}")`),
+			use_space ? x`@space()` : x`@text(${string_literal})`,
+			parent_nodes && (use_space ? x`@claim_space(${parent_nodes})` : x`@claim_text(${parent_nodes}, ${string_literal})`),
 			parent_node as Identifier
 		);
 	}

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

@@ -3,7 +3,7 @@ import { magic_string_preprocessor_result, magic_string_replace_all } from '../.
 
 export default {
 
-	js_map_sources: [], // test component has no scripts
+	js_map_sources: ['input.svelte'],
 
 	preprocess: {
 		markup: ({ content, filename }) => {

test/sourcemaps/samples/external/_config.js

@@ -10,7 +10,7 @@ export const STYLES = '.awesome { color: orange; }\n';
 
 export default {
 	css_map_sources: ['common.scss', 'styles.scss'],
-	js_map_sources: [],
+	js_map_sources: ['input.svelte'],
 	preprocess: [
 		{
 			style: () => {

test/sourcemaps/samples/markup/input.svelte

@@ -0,0 +1,2 @@
+<h1>decoded-sourcemap</h1>
+<div>replace me</div>

test/sourcemaps/samples/markup/test.js

@@ -0,0 +1,34 @@
+export function test({ assert, input, js }) {
+	let expected;
+
+	let start;
+	let actual;
+
+	start = js.locate('insert(target, h1');
+	expected = input.locate('<h1');
+	actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+
+	start = js.locate('insert(target, div');
+	expected = input.locate('<div');
+	actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+}

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

@@ -15,7 +15,7 @@ span {
 
 export default {
 	css_map_sources: [external_relative_filename],
-	js_map_sources: [],
+	js_map_sources: ['input.svelte'],
 	preprocess: [
 		{
 			style: ({ content, filename }) => {

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

@@ -3,7 +3,7 @@ import { magic_string_bundle } from '../../helpers';
 export const EXTERNAL = 'span { --external-var: 1px; }';
 
 export default {
-	js_map_sources: [],
+	js_map_sources: ['input.svelte'],
 	css_map_sources: ['input.svelte', 'external.css'],
 	preprocess: [
 		{