Merge pull request sveltejs#1682 from sveltejs/sveltejsgh-1659

support debug tag in SSR mode

Author: Rich-Harris

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);
+	}
 }

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 '';
 }

test/js/samples/debug-ssr-foo/_config.js

@@ -0,0 +1,6 @@
+export default {
+	options: {
+		generate: 'ssr',
+		dev: true
+	}
+};

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;

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;

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>