From 154ee7376509d49a30cc108cfa8acad232676482 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Thu, 23 Aug 2018 22:53:17 -0400
Subject: [PATCH] support debug tag in SSR mode - fixes #1659

---
 src/compile/nodes/DebugTag.ts                 | 21 +++++++-
 src/shared/ssr.js                             |  6 +++
 test/js/samples/debug-ssr-foo/_config.js      |  6 +++
 .../samples/debug-ssr-foo/expected-bundle.js  | 46 +++++++++++++++++
 test/js/samples/debug-ssr-foo/expected.js     | 51 +++++++++++++++++++
 test/js/samples/debug-ssr-foo/input.html      |  6 +++
 6 files changed, 135 insertions(+), 1 deletion(-)
 create mode 100644 test/js/samples/debug-ssr-foo/_config.js
 create mode 100644 test/js/samples/debug-ssr-foo/expected-bundle.js
 create mode 100644 test/js/samples/debug-ssr-foo/expected.js
 create mode 100644 test/js/samples/debug-ssr-foo/input.html

diff --git a/src/compile/nodes/DebugTag.ts b/src/compile/nodes/DebugTag.ts
index e70d6a33a2..b73208961a 100644
--- a/src/compile/nodes/DebugTag.ts
+++ b/src/compile/nodes/DebugTag.ts
@@ -4,6 +4,7 @@ import Block from '../dom/Block';
 import Expression from './shared/Expression';
 import deindent from '../../utils/deindent';
 import addToSet from '../../utils/addToSet';
+import { stringify } from '../../utils/stringify';
 
 export default class DebugTag extends Node {
 	expressions: Expression[];
@@ -25,8 +26,8 @@ export default class DebugTag extends Node {
 
 		const { code } = this.compiler;
 
-		// Debug all
 		if (this.expressions.length === 0) {
+			// Debug all
 			code.overwrite(this.start + 1, this.start + 7, 'debugger', {
 				storeName: true
 			});
@@ -67,4 +68,22 @@ export default class DebugTag extends Node {
 			`);
 		}
 	}
+
+	ssr() {
+		if (!this.compiler.options.dev) return;
+
+		const filename = this.compiler.file || null;
+		const { line, column } = this.compiler.locate(this.start + 1);
+
+		const obj = this.expressions.length === 0
+			? `ctx`
+			: `{ ${this.expressions
+				.map(e => e.node.name)
+				.map(name => `${name}: ctx.${name}`)
+				.join(', ')} }`;
+
+		const str = '${@debug(' + `${filename && stringify(filename)}, ${line}, ${column}, ${obj})}`;
+
+		this.compiler.target.append(str);
+	}
 }
\ No newline at end of file
diff --git a/src/shared/ssr.js b/src/shared/ssr.js
index 3e5a4568e6..5031bfa0e5 100644
--- a/src/shared/ssr.js
+++ b/src/shared/ssr.js
@@ -54,4 +54,10 @@ export function validateSsrComponent(component, name) {
 	}
 
 	return component;
+}
+
+export function debug(file, line, column, values) {
+	console.log(`{@debug} ${file ? file + ' ' : ''}(${line}:${column})`);
+	console.log(values);
+	return '';
 }
\ No newline at end of file
diff --git a/test/js/samples/debug-ssr-foo/_config.js b/test/js/samples/debug-ssr-foo/_config.js
new file mode 100644
index 0000000000..39bfbe7e62
--- /dev/null
+++ b/test/js/samples/debug-ssr-foo/_config.js
@@ -0,0 +1,6 @@
+export default {
+	options: {
+		generate: 'ssr',
+		dev: true
+	}
+};
\ No newline at end of file
diff --git a/test/js/samples/debug-ssr-foo/expected-bundle.js b/test/js/samples/debug-ssr-foo/expected-bundle.js
new file mode 100644
index 0000000000..dcfc5c6d02
--- /dev/null
+++ b/test/js/samples/debug-ssr-foo/expected-bundle.js
@@ -0,0 +1,46 @@
+var { debug, each, escape } = require("svelte/shared.js");
+
+var SvelteComponent = {};
+SvelteComponent.data = function() {
+	return {};
+};
+
+SvelteComponent.render = function(state, options = {}) {
+	var components = new Set();
+
+	function addComponent(component) {
+		components.add(component);
+	}
+
+	var result = { head: '', addComponent };
+	var html = SvelteComponent._render(result, state, options);
+
+	var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\n');
+
+	return {
+		html,
+		head: result.head,
+		css: { code: cssCode, map: null },
+		toString() {
+			return html;
+		}
+	};
+};
+
+SvelteComponent._render = function(__result, ctx, options) {
+	__result.addComponent(SvelteComponent);
+
+	ctx = Object.assign({}, ctx);
+
+	return `${ each(ctx.things, item => Object.assign({}, ctx, { thing: item }), ctx => `<span>${escape(ctx.thing.name)}</span>
+	${debug(null, 2, 2, { foo: ctx.foo })}`)}
+
+<p>foo: ${escape(ctx.foo)}</p>`;
+};
+
+SvelteComponent.css = {
+	code: '',
+	map: null
+};
+
+module.exports = SvelteComponent;
diff --git a/test/js/samples/debug-ssr-foo/expected.js b/test/js/samples/debug-ssr-foo/expected.js
new file mode 100644
index 0000000000..43f1be1db6
--- /dev/null
+++ b/test/js/samples/debug-ssr-foo/expected.js
@@ -0,0 +1,51 @@
+"use strict";
+
+var { debug, each, escape } = require("svelte/shared.js");
+
+var SvelteComponent = {};;
+
+SvelteComponent.data = function() {
+	return {};
+};
+
+SvelteComponent.render = function(state, options = {}) {
+	var components = new Set();
+
+	function addComponent(component) {
+		components.add(component);
+	}
+
+	var result = { head: '', addComponent };
+	var html = SvelteComponent._render(result, state, options);
+
+	var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\n');
+
+	return {
+		html,
+		head: result.head,
+		css: { code: cssCode, map: null },
+		toString() {
+			return html;
+		}
+	};
+}
+
+SvelteComponent._render = function(__result, ctx, options) {
+	__result.addComponent(SvelteComponent);
+
+	ctx = Object.assign({}, ctx);
+
+	return `${ each(ctx.things, item => Object.assign({}, ctx, { thing: item }), ctx => `<span>${escape(ctx.thing.name)}</span>
+	${debug(null, 2, 2, { foo: ctx.foo })}`)}
+
+<p>foo: ${escape(ctx.foo)}</p>`;
+};
+
+SvelteComponent.css = {
+	code: '',
+	map: null
+};
+
+var warned = false;
+
+module.exports = SvelteComponent;
\ No newline at end of file
diff --git a/test/js/samples/debug-ssr-foo/input.html b/test/js/samples/debug-ssr-foo/input.html
new file mode 100644
index 0000000000..6e926a4015
--- /dev/null
+++ b/test/js/samples/debug-ssr-foo/input.html
@@ -0,0 +1,6 @@
+{#each things as thing}
+	<span>{thing.name}</span>
+	{@debug foo}
+{/each}
+
+<p>foo: {foo}</p>
\ No newline at end of file