Merge pull request #853 from sveltejs/gh-823

add debugging comments

src/generators/Generator.ts

@@ -56,6 +56,8 @@ export default class Generator {
 	expectedProperties: Set<string>;
 	usesRefs: boolean;
 
+	locate: (c: number) => { line: number, column: number };
+
 	stylesheet: Stylesheet;
 
 	importedNames: Set<string>;
@@ -86,6 +88,8 @@ export default class Generator {
 		this.bindingGroups = [];
 		this.indirectDependencies = new Map();
 
+		this.locate = getLocator(this.source);
+
 		// track which properties are needed, so we can provide useful info
 		// in dev mode
 		this.expectedProperties = new Set();

src/generators/dom/Block.ts

@@ -1,5 +1,6 @@
 import CodeBuilder from '../../utils/CodeBuilder';
 import deindent from '../../utils/deindent';
+import { escape } from '../../utils/stringify';
 import { DomGenerator } from './index';
 import { Node } from '../../interfaces';
 import shared from './shared';
@@ -9,6 +10,7 @@ export interface BlockOptions {
 	generator?: DomGenerator;
 	expression?: Node;
 	context?: string;
+	comment?: string;
 	key?: string;
 	contexts?: Map<string, string>;
 	indexes?: Map<string, string>;
@@ -27,6 +29,7 @@ export default class Block {
 	name: string;
 	expression: Node;
 	context: string;
+	comment?: string;
 
 	key: string;
 	first: string;
@@ -72,6 +75,7 @@ export default class Block {
 		this.name = options.name;
 		this.expression = options.expression;
 		this.context = options.context;
+		this.comment = options.comment;
 
 		// for keyed each blocks
 		this.key = options.key;
@@ -340,6 +344,7 @@ export default class Block {
 		}
 
 		return deindent`
+			${this.comment && `// ${escape(this.comment)}`}
 			function ${this.name}(${this.params.join(', ')}, #component${this.key ? `, ${localKey}` : ''}) {
 				${this.variables.size > 0 &&
 					`var ${Array.from(this.variables.keys())

src/generators/dom/index.ts

@@ -12,6 +12,7 @@ import Generator from '../Generator';
 import Stylesheet from '../../css/Stylesheet';
 import preprocess from './preprocess';
 import Block from './Block';
+import { version } from '../../../package.json';
 import { Parsed, CompileOptions, Node } from '../../interfaces';
 
 export class DomGenerator extends Generator {
@@ -405,6 +406,8 @@ export default function dom(
 		});
 	}
 
+	result = `/* ${options.filename ? `${options.filename} ` : ``}generated by Svelte v${version} */\n\n${result}`;
+
 	return generator.generate(result, options, {
 		name,
 		format,

src/generators/dom/preprocess.ts

@@ -22,6 +22,25 @@ function getChildState(parent: State, child = {}) {
 	);
 }
 
+function createDebuggingComment(node: Node, generator: DomGenerator) {
+	const { locate, source } = generator;
+
+	let c = node.start;
+	if (node.type === 'ElseBlock') {
+		while (source[c] !== '{') c -= 1;
+		c -= 1;
+	}
+
+	let d = node.expression ? node.expression.end : c;
+	while (source[d] !== '}') d += 1;
+	d += 2;
+
+	const start = locate(c);
+	const loc = `(${start.line + 1}:${start.column})`;
+
+	return `${loc} ${source.slice(c, d)}`.replace(/\n/g, ' ');
+}
+
 // Whitespace inside one of these elements will not result in
 // a whitespace node being created in any circumstances. (This
 // list is almost certainly very incomplete)
@@ -107,6 +126,7 @@ const preprocessors = {
 			block.addDependencies(dependencies);
 
 			node._block = block.child({
+				comment: createDebuggingComment(node, generator),
 				name: generator.getUniqueName(`create_if_block`),
 			});
 
@@ -127,6 +147,7 @@ const preprocessors = {
 				attachBlocks(node.else.children[0]);
 			} else if (node.else) {
 				node.else._block = block.child({
+					comment: createDebuggingComment(node.else, generator),
 					name: generator.getUniqueName(`create_if_block`),
 				});
 
@@ -202,6 +223,7 @@ const preprocessors = {
 		contextDependencies.set(node.context, dependencies);
 
 		node._block = block.child({
+			comment: createDebuggingComment(node, generator),
 			name: generator.getUniqueName('create_each_block'),
 			expression: node.expression,
 			context: node.context,
@@ -231,6 +253,7 @@ const preprocessors = {
 
 		if (node.else) {
 			node.else._block = block.child({
+				comment: createDebuggingComment(node.else, generator),
 				name: generator.getUniqueName(`${node._block.name}_else`),
 			});
 

src/generators/server-side-rendering/index.ts

@@ -103,7 +103,7 @@ export default function ssr(
 
 		var ${name} = {};
 
-		${name}.filename = ${stringify(options.filename)};
+		${options.filename && `${name}.filename = ${stringify(options.filename)}`};
 
 		${name}.data = function() {
 			return ${templateProperties.data ? `@template.data()` : `{}`};

src/index.ts

@@ -12,9 +12,6 @@ function normalizeOptions(options: CompileOptions): CompileOptions {
 		{
 			generate: 'dom',
 
-			// a filename is necessary for sourcemap generation
-			filename: 'SvelteComponent.html',
-
 			onwarn: (warning: Warning) => {
 				if (warning.loc) {
 					console.warn(

test/js/index.js

@@ -71,7 +71,7 @@ describe("js", () => {
 					expectedBundle.trim().replace(/^\s+$/gm, "")
 				);
 			}).catch(err => {
-				console.error(err.loc);
+				if (err.loc) console.error(err.loc);
 				throw err;
 			});
 		});

test/js/samples/collapses-text-around-comments/expected-bundle.js

@@ -175,6 +175,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 var template = (function() {
 	return {
 		data: function () {

test/js/samples/collapses-text-around-comments/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { appendNode, assign, createElement, createText, detachNode, insertNode, noop, proto, setAttribute } from "svelte/shared.js";
 
 var template = (function() {

test/js/samples/computed-collapsed-if/expected-bundle.js

@@ -151,6 +151,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 var template = (function() {
 	return {
 		computed: {

test/js/samples/computed-collapsed-if/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { assign, differs, noop, proto } from "svelte/shared.js";
 
 var template = (function() {

test/js/samples/css-media-query/expected-bundle.js

@@ -171,6 +171,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function encapsulateStyles(node) {
 	setAttribute(node, "svelte-2363328337", "");
 }

test/js/samples/css-media-query/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { appendNode, assign, createElement, detachNode, insertNode, noop, proto, setAttribute } from "svelte/shared.js";
 
 function encapsulateStyles(node) {

test/js/samples/css-shadow-dom-keyframes/expected-bundle.js

@@ -171,6 +171,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var div, text;
 

test/js/samples/css-shadow-dom-keyframes/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { appendNode, assign, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {

test/js/samples/each-block-changed-check/expected-bundle.js

@@ -184,6 +184,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var text, p, text_1;
 
@@ -257,6 +259,7 @@ function create_main_fragment(state, component) {
 	};
 }
 
+// (1:0) {{#each comments as comment, i}}
 function create_each_block(state, each_block_value, comment, i, component) {
 	var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before;
 

test/js/samples/each-block-changed-check/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { appendNode, assign, createElement, createText, destroyEach, detachAfter, detachNode, insertNode, noop, proto } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {
@@ -73,6 +75,7 @@ function create_main_fragment(state, component) {
 	};
 }
 
+// (1:0) {{#each comments as comment, i}}
 function create_each_block(state, each_block_value, comment, i, component) {
 	var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before;
 

test/js/samples/event-handlers-custom/expected-bundle.js

@@ -171,6 +171,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 var template = (function() {
 	return {
 		methods: {

test/js/samples/event-handlers-custom/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { appendNode, assign, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
 
 var template = (function() {

test/js/samples/if-block-no-update/expected-bundle.js

@@ -175,6 +175,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var if_block_anchor;
 
@@ -213,6 +215,7 @@ function create_main_fragment(state, component) {
 	};
 }
 
+// (1:0) {{#if foo}}
 function create_if_block(state, component) {
 	var p, text;
 
@@ -235,6 +238,7 @@ function create_if_block(state, component) {
 	};
 }
 
+// (3:0) {{else}}
 function create_if_block_1(state, component) {
 	var p, text;
 

test/js/samples/if-block-no-update/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { appendNode, assign, createComment, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {
@@ -38,6 +40,7 @@ function create_main_fragment(state, component) {
 	};
 }
 
+// (1:0) {{#if foo}}
 function create_if_block(state, component) {
 	var p, text;
 
@@ -60,6 +63,7 @@ function create_if_block(state, component) {
 	};
 }
 
+// (3:0) {{else}}
 function create_if_block_1(state, component) {
 	var p, text;
 

test/js/samples/if-block-simple/expected-bundle.js

@@ -175,6 +175,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var if_block_anchor;
 
@@ -216,6 +218,7 @@ function create_main_fragment(state, component) {
 	};
 }
 
+// (1:0) {{#if foo}}
 function create_if_block(state, component) {
 	var p, text;
 

test/js/samples/if-block-simple/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { appendNode, assign, createComment, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {
@@ -41,6 +43,7 @@ function create_main_fragment(state, component) {
 	};
 }
 
+// (1:0) {{#if foo}}
 function create_if_block(state, component) {
 	var p, text;
 

test/js/samples/inline-style-optimized-multiple/expected-bundle.js

@@ -167,6 +167,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var div;
 

test/js/samples/inline-style-optimized-multiple/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {

test/js/samples/inline-style-optimized-url/expected-bundle.js

@@ -167,6 +167,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var div;
 

test/js/samples/inline-style-optimized-url/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {

test/js/samples/inline-style-optimized/expected-bundle.js

@@ -167,6 +167,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var div;
 

test/js/samples/inline-style-optimized/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {

test/js/samples/inline-style-unoptimized/expected-bundle.js

@@ -167,6 +167,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var div, text, div_1, div_1_style_value;
 

test/js/samples/inline-style-unoptimized/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { assign, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {

test/js/samples/input-without-blowback-guard/expected-bundle.js

@@ -171,6 +171,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var input;
 

test/js/samples/input-without-blowback-guard/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { addListener, assign, createElement, detachNode, insertNode, proto, removeListener } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {

test/js/samples/legacy-input-type/expected-bundle.js

@@ -169,6 +169,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var input;
 

test/js/samples/legacy-input-type/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { assign, createElement, detachNode, insertNode, noop, proto, setInputType } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {

test/js/samples/legacy-quote-class/expected-bundle.js

@@ -186,6 +186,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var div;
 

test/js/samples/legacy-quote-class/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { assign, children, claimElement, createElement, detachNode, insertNode, noop, proto } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {

test/js/samples/media-bindings/expected-bundle.js

@@ -179,6 +179,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var audio, audio_updating = false, audio_animationframe, audio_paused_value = true;
 

test/js/samples/media-bindings/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { addListener, assign, callAll, createElement, detachNode, insertNode, proto, removeListener, timeRangesToArray } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {

test/js/samples/non-imported-component/expected-bundle.js

@@ -165,6 +165,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 var template = (function() {
 	return {
 		components: {

test/js/samples/non-imported-component/expected.js

@@ -1,5 +1,7 @@
 import Imported from 'Imported.html';
 
+/* generated by Svelte v1.39.2 */
+
 import { assign, callAll, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
 
 var template = (function() {

test/js/samples/onrender-onteardown-rewritten/expected-bundle.js

@@ -151,6 +151,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 var template = (function() {
 	return {
 		// this test should be removed in v2

test/js/samples/onrender-onteardown-rewritten/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { assign, callAll, noop, proto } from "svelte/shared.js";
 
 var template = (function() {

test/js/samples/setup-method/expected-bundle.js

@@ -151,6 +151,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 var template = (function() {
 	return {
 		methods: {

test/js/samples/setup-method/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { assign, noop, proto } from "svelte/shared.js";
 
 var template = (function() {

test/js/samples/use-elements-as-anchors/expected-bundle.js

@@ -175,6 +175,8 @@ var proto = {
 	_unmount: _unmount
 };
 
+/* generated by Svelte v1.39.2 */
+
 function create_main_fragment(state, component) {
 	var div, text, p, text_1, text_2, text_3, text_4, p_1, text_5, text_6, text_8, if_block_4_anchor;
 
@@ -312,6 +314,7 @@ function create_main_fragment(state, component) {
 	};
 }
 
+// (2:1) {{#if a}}
 function create_if_block(state, component) {
 	var p, text;
 
@@ -334,6 +337,7 @@ function create_if_block(state, component) {
 	};
 }
 
+// (8:1) {{#if b}}
 function create_if_block_1(state, component) {
 	var p, text;
 
@@ -356,6 +360,7 @@ function create_if_block_1(state, component) {
 	};
 }
 
+// (12:1) {{#if c}}
 function create_if_block_2(state, component) {
 	var p, text;
 
@@ -378,6 +383,7 @@ function create_if_block_2(state, component) {
 	};
 }
 
+// (18:1) {{#if d}}
 function create_if_block_3(state, component) {
 	var p, text;
 
@@ -400,6 +406,7 @@ function create_if_block_3(state, component) {
 	};
 }
 
+// (25:0) {{#if e}}
 function create_if_block_4(state, component) {
 	var p, text;
 

test/js/samples/use-elements-as-anchors/expected.js

@@ -1,3 +1,5 @@
+/* generated by Svelte v1.39.2 */
+
 import { appendNode, assign, createComment, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
 
 function create_main_fragment(state, component) {
@@ -137,6 +139,7 @@ function create_main_fragment(state, component) {
 	};
 }
 
+// (2:1) {{#if a}}
 function create_if_block(state, component) {
 	var p, text;
 
@@ -159,6 +162,7 @@ function create_if_block(state, component) {
 	};
 }
 
+// (8:1) {{#if b}}
 function create_if_block_1(state, component) {
 	var p, text;
 
@@ -181,6 +185,7 @@ function create_if_block_1(state, component) {
 	};
 }
 
+// (12:1) {{#if c}}
 function create_if_block_2(state, component) {
 	var p, text;
 
@@ -203,6 +208,7 @@ function create_if_block_2(state, component) {
 	};
 }
 
+// (18:1) {{#if d}}
 function create_if_block_3(state, component) {
 	var p, text;
 
@@ -225,6 +231,7 @@ function create_if_block_3(state, component) {
 	};
 }
 
+// (25:0) {{#if e}}
 function create_if_block_4(state, component) {
 	var p, text;