Merge pull request #1501 from sveltejs/gh-1499

add location info to nodes

Author: Rich-Harris

src/compile/Compiler.ts

@@ -117,6 +117,8 @@ export default class Compiler {
 	expectedProperties: Set<string>;
 	usesRefs: boolean;
 
+	file: string;
+	fileVar: string;
 	locate: (c: number) => { line: number, column: number };
 
 	stylesheet: Stylesheet;
@@ -159,6 +161,9 @@ export default class Compiler {
 		this.bindingGroups = [];
 		this.indirectDependencies = new Map();
 
+		this.file = options.filename && (
+			typeof process !== 'undefined' ? options.filename.replace(process.cwd(), '').replace(/^[\/\\]/, '') : options.filename
+		);
 		this.locate = getLocator(this.source);
 
 		// track which properties are needed, so we can provide useful info
@@ -178,6 +183,8 @@ export default class Compiler {
 		this.aliases = new Map();
 		this.usedNames = new Set();
 
+		this.fileVar = options.dev && this.getUniqueName('file');
+
 		this.computations = [];
 		this.templateProperties = {};
 

src/compile/dom/index.ts

@@ -100,6 +100,10 @@ export default function dom(
 		builder.addBlock(compiler.javascript);
 	}
 
+	if (compiler.options.dev) {
+		builder.addLine(`const ${compiler.fileVar} = ${JSON.stringify(compiler.file)};`);
+	}
+
 	const css = compiler.stylesheet.render(options.filename, !compiler.customElement);
 	const styles = compiler.stylesheet.hasStyles && stringify(options.dev ?
 		`${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */` :
@@ -354,12 +358,8 @@ export default function dom(
 
 	let result = builder.toString();
 
-	const filename = options.filename && (
-		typeof process !== 'undefined' ? options.filename.replace(process.cwd(), '').replace(/^[\/\\]/, '') : options.filename
-	);
-
 	return compiler.generate(result, options, {
-		banner: `/* ${filename ? `${filename} ` : ``}generated by Svelte v${"__VERSION__"} */`,
+		banner: `/* ${compiler.file ? `${compiler.file} ` : ``}generated by Svelte v${"__VERSION__"} */`,
 		sharedPath,
 		name,
 		format,

src/compile/nodes/Element.ts

@@ -143,7 +143,7 @@ export default class Element extends Node {
 		stripWhitespace: boolean,
 		nextSibling: Node
 	) {
-		if (this.name === 'slot' || this.name === 'option') {
+		if (this.name === 'slot' || this.name === 'option' || this.compiler.options.dev) {
 			this.cannotUseInnerHTML();
 		}
 
@@ -395,6 +395,13 @@ export default class Element extends Node {
 
 			return `${open}>${node.children.map(toHTML).join('')}</${node.name}>`;
 		}
+
+		if (this.compiler.options.dev) {
+			const loc = this.compiler.locate(this.start);
+			block.builders.hydrate.addLine(
+				`@addLoc(${this.var}, ${this.compiler.fileVar}, ${loc.line}, ${loc.column}, ${this.start});`
+			);
+		}
 	}
 
 	addBindings(

src/shared/utils.js

@@ -18,4 +18,10 @@ export function callAfter(fn, i) {
 	return () => {
 		if (!--i) fn();
 	};
+}
+
+export function addLoc(element, file, line, column, char) {
+	element.__svelte_meta = {
+		loc: { file, line, column, char }
+	};
 }

test/cli/samples/basic/expected/Main.js

@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.5.1 */
+/* src/Main.html generated by Svelte vx.y.z */
 
 function create_main_fragment(component, ctx) {
 	var p;

test/cli/samples/custom-element/expected/Main.js

@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.5.1 */
+/* src/Main.html generated by Svelte vx.y.z */
 
 function create_main_fragment(component, ctx) {
 	var p;

test/cli/samples/dev/expected/Main.js

@@ -1,16 +1,20 @@
-/* src/Main.html generated by Svelte v2.5.1 */
+/* src/Main.html generated by Svelte vx.y.z */
+
+const file = "src/Main.html";
 
 function create_main_fragment(component, ctx) {
-	var p;
+	var p, text;
 
 	return {
 		c: function create() {
 			p = createElement("p");
-			p.textContent = "Hello world!";
+			text = createText("Hello world!");
+			addLoc(p, file, 0, 0, 0);
 		},
 
 		m: function mount(target, anchor) {
 			insertNode(p, target, anchor);
+			appendNode(text, p);
 		},
 
 		p: noop,
@@ -59,10 +63,24 @@ function createElement(name) {
 	return document.createElement(name);
 }
 
+function createText(data) {
+	return document.createTextNode(data);
+}
+
+function addLoc(element, file, line, column, char) {
+	element.__svelte_meta = {
+		loc: { file, line, column, char }
+	};
+}
+
 function insertNode(node, target, anchor) {
 	target.insertBefore(node, anchor);
 }
 
+function appendNode(node, target) {
+	target.appendChild(node);
+}
+
 function noop() {}
 
 function detachNode(node) {

test/cli/samples/dir-sourcemap/expected/Main.js

@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.5.1 */
+/* src/Main.html generated by Svelte vx.y.z */
 import Widget from './widget/Widget.html';
 
 

test/cli/samples/dir-sourcemap/expected/Widget.js

@@ -1,4 +1,4 @@
-/* src/widget/Widget.html generated by Svelte v2.5.1 */
+/* src/widget/Widget.html generated by Svelte vx.y.z */
 
 function create_main_fragment(component, ctx) {
 	var p;

test/cli/samples/dir-subdir/expected/Main.js

@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.5.1 */
+/* src/Main.html generated by Svelte vx.y.z */
 import Widget from './Widget.html';
 
 

test/cli/samples/dir-subdir/expected/widget/Widget.js

@@ -1,4 +1,4 @@
-/* src/Widget.html generated by Svelte v2.5.1 */
+/* src/Widget.html generated by Svelte vx.y.z */
 
 function create_main_fragment(component, ctx) {
 	var p;

test/cli/samples/dir/expected/Main.js

@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.5.1 */
+/* src/Main.html generated by Svelte vx.y.z */
 var Main = (function(answer) { "use strict";
 	answer = (answer && answer.__esModule) ? answer["default"] : answer;
 

test/cli/samples/dir/expected/Widget.js

@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.5.1 */
+/* src/Main.html generated by Svelte vx.y.z */
 
 function create_main_fragment(component, ctx) {
 	var h1, text, text_1;

test/cli/samples/globals/expected/Main.js

@@ -1,10 +1,20 @@
 const sander = require('sander');
+const glob = require('tiny-glob/sync');
 
 process.chdir(__dirname);
 
 sander.readdirSync('samples').forEach(dir => {
 	if (dir[0] === '.') return;
 
 	sander.rimrafSync(`samples/${dir}/expected`);
-	sander.copydirSync(`samples/${dir}/actual`).to(`samples/${dir}/expected`);
+
+	const files = glob(`**`, { cwd: `samples/${dir}/actual`, filesOnly: true });
+	files.forEach(file => {
+		const source = sander.readFileSync(`samples/${dir}/actual/${file}`, { encoding: 'utf-8' });
+
+		sander.writeFileSync(
+			`samples/${dir}/expected/${file}`,
+			source.replace(/generated by Svelte v(\d+\.\d+\.\d+)/, 'generated by Svelte vx.y.z')
+		);
+	});
 });

test/cli/samples/sourcemap-inline/expected/Main.js

@@ -5,6 +5,12 @@ function assign(tar, src) {
 	return tar;
 }
 
+function addLoc(element, file, line, column, char) {
+	element.__svelte_meta = {
+		loc: { file, line, column, char }
+	};
+}
+
 function appendNode(node, target) {
 	target.appendChild(node);
 }
@@ -159,6 +165,8 @@ function bar({ foo }) {
 	return foo * 2;
 }
 
+const file = undefined;
+
 function create_main_fragment(component, ctx) {
 	var p, text_value = ctx.Math.max(0, ctx.foo), text, text_1, text_2;
 
@@ -168,6 +176,7 @@ function create_main_fragment(component, ctx) {
 			text = createText(text_value);
 			text_1 = createText("\n\t");
 			text_2 = createText(ctx.bar);
+			addLoc(p, file, 0, 0, 0);
 		},
 
 		m: function mount(target, anchor) {

test/cli/samples/sourcemap/expected/Main.js

@@ -1,10 +1,12 @@
 /* generated by Svelte vX.Y.Z */
-import { appendNode, assign, createElement, createText, detachNode, init, insertNode, protoDev } from "svelte/shared.js";
+import { addLoc, appendNode, assign, createElement, createText, detachNode, init, insertNode, protoDev } from "svelte/shared.js";
 
 function bar({ foo }) {
 	return foo * 2;
 }
 
+const file = undefined;
+
 function create_main_fragment(component, ctx) {
 	var p, text_value = ctx.Math.max(0, ctx.foo), text, text_1, text_2;
 
@@ -14,6 +16,7 @@ function create_main_fragment(component, ctx) {
 			text = createText(text_value);
 			text_1 = createText("\n\t");
 			text_2 = createText(ctx.bar);
+			addLoc(p, file, 0, 0, 0);
 		},
 
 		m: function mount(target, anchor) {

test/cli/samples/store/expected/Main.js

@@ -0,0 +1,3 @@
+<div>
+	<p>this is a paragraph</p>
+</div>

test/cli/update.js

@@ -0,0 +1,24 @@
+import path from 'path';
+
+export default {
+	dev: true,
+
+	test(assert, component, target) {
+		const h1 = target.querySelector('h1');
+		const p = target.querySelector('p');
+
+		assert.deepEqual(h1.__svelte_meta.loc, {
+			file: path.relative(process.cwd(), path.resolve(__dirname, 'main.html')),
+			line: 0,
+			column: 0,
+			char: 0
+		});
+
+		assert.deepEqual(p.__svelte_meta.loc, {
+			file: path.relative(process.cwd(), path.resolve(__dirname, 'Foo.html')),
+			line: 1,
+			column: 1,
+			char: 7
+		});
+	}
+};

test/js/samples/dev-warning-missing-data-computed/expected-bundle.js

@@ -0,0 +1,10 @@
+<h1>this is a header</h1>
+<Foo/>
+
+<script>
+	export default {
+		components: {
+			Foo: './Foo.html'
+		}
+	};
+</script>