From 4e467809ceed2e3bae9078e160a60197edae20bc Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Tue, 22 Jun 2021 10:56:11 +0800
Subject: [PATCH] sourcemap markup

---
 .../render_dom/wrappers/Element/index.ts      | 18 +++++++---
 test/sourcemaps/samples/markup/input.svelte   |  2 ++
 test/sourcemaps/samples/markup/test.js        | 34 +++++++++++++++++++
 3 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 test/sourcemaps/samples/markup/input.svelte
 create mode 100644 test/sourcemaps/samples/markup/test.js

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 9363015b1c..20dfed891d 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/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...
diff --git a/test/sourcemaps/samples/markup/input.svelte b/test/sourcemaps/samples/markup/input.svelte
new file mode 100644
index 0000000000..d5baaac693
--- /dev/null
+++ b/test/sourcemaps/samples/markup/input.svelte
@@ -0,0 +1,2 @@
+<h1>decoded-sourcemap</h1>
+<div>replace me</div>
\ No newline at end of file
diff --git a/test/sourcemaps/samples/markup/test.js b/test/sourcemaps/samples/markup/test.js
new file mode 100644
index 0000000000..2c6abfdf41
--- /dev/null
+++ b/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
+	});
+}