change server-side render method signature

mocha.opts

@@ -1 +1,2 @@
+--bail
 test/test.js

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

@@ -91,6 +91,7 @@ export default function ssr(
 
 	initialState.push('state');
 
+	// TODO concatenate CSS maps
 	const result = deindent`
 		${generator.javascript}
 
@@ -103,6 +104,30 @@ export default function ssr(
 		};
 
 		${name}.render = function(state, options = {}) {
+			var components = new Set();
+
+			function addComponent(component) {
+				components.add(component);
+			}
+
+			var result = { title: null, addComponent };
+			var html = ${name}._render(result, state, options);
+
+			var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\\n');
+
+			return {
+				html,
+				title: result.title,
+				css: { code: cssCode, map: null },
+				toString() {
+					return result.html;
+				}
+			};
+		}
+
+		${name}._render = function(__result, state, options) {
+			__result.addComponent(${name});
+
 			state = Object.assign(${initialState.join(', ')});
 
 			${computations.map(
@@ -125,6 +150,11 @@ export default function ssr(
 			return \`${generator.renderCode}\`;
 		};
 
+		${name}.css = {
+			code: ${css ? stringify(css) : `''`},
+			map: ${cssMap ? stringify(cssMap.toString()) : 'null'}
+		};
+
 		${name}.renderCss = function() {
 			var components = [];
 
@@ -132,8 +162,8 @@ export default function ssr(
 				deindent`
 				components.push({
 					filename: ${name}.filename,
-					css: ${stringify(css)},
+					css: ${name}.css && ${name}.css.code,
-					map: ${stringify(cssMap.toString())}
+					map: ${name}.css && ${name}.css.map
 				});
 			`}
 

src/generators/server-side-rendering/visitors/Component.ts

@@ -84,7 +84,7 @@ export default function visitComponent(
 		block.addBinding(binding, expression);
 	});
 
-	let open = `\${${expression}.render({${props}}`;
+	let open = `\${${expression}._render(__result, {${props}}`;
 
 	const options = [];
 	if (generator.options.store) {

src/generators/server-side-rendering/visitors/Document.ts

@@ -0,0 +1,3 @@
+export default function visitDocument() {
+	// noop
+}

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

@@ -1,6 +1,7 @@
 import AwaitBlock from './AwaitBlock';
 import Comment from './Comment';
 import Component from './Component';
+import Document from './Document';
 import EachBlock from './EachBlock';
 import Element from './Element';
 import IfBlock from './IfBlock';
@@ -14,6 +15,7 @@ export default {
 	AwaitBlock,
 	Comment,
 	Component,
+	Document,
 	EachBlock,
 	Element,
 	IfBlock,

test/css/index.js

@@ -131,7 +131,7 @@ describe('css', () => {
 					assert.equal(
 						normalizeHtml(
 							window,
-							component.render(config.data).replace(/svelte-\d+/g, 'svelte-xyz')
+							component.render(config.data).html.replace(/svelte-\d+/g, 'svelte-xyz')
 						),
 						normalizeHtml(window, expected.html)
 					);

test/js/samples/ssr-no-oncreate-etc/expected-bundle.js

@@ -5,11 +5,40 @@ SvelteComponent.data = function() {
 };
 
 SvelteComponent.render = function(state, options = {}) {
+	var components = new Set();
+
+	function addComponent(component) {
+		components.add(component);
+	}
+
+	var result = { title: null, 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,
+		title: result.title,
+		css: { code: cssCode, map: null },
+		toString() {
+			return result.html;
+		}
+	};
+};
+
+SvelteComponent._render = function(__result, state, options) {
+	__result.addComponent(SvelteComponent);
+
 	state = Object.assign({}, state);
 
 	return ``;
 };
 
+SvelteComponent.css = {
+	code: '',
+	map: null
+};
+
 SvelteComponent.renderCss = function() {
 	var components = [];
 

test/js/samples/ssr-no-oncreate-etc/expected.js

@@ -7,11 +7,40 @@ SvelteComponent.data = function() {
 };
 
 SvelteComponent.render = function(state, options = {}) {
+	var components = new Set();
+
+	function addComponent(component) {
+		components.add(component);
+	}
+
+	var result = { title: null, 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,
+		title: result.title,
+		css: { code: cssCode, map: null },
+		toString() {
+			return result.html;
+		}
+	};
+}
+
+SvelteComponent._render = function(__result, state, options) {
+	__result.addComponent(SvelteComponent);
+
 	state = Object.assign({}, state);
 
 	return ``;
 };
 
+SvelteComponent.css = {
+	code: '',
+	map: null
+};
+
 SvelteComponent.renderCss = function() {
 	var components = [];
 

test/runtime/samples/deconflict-self/_config.js

@@ -1,3 +1,4 @@
 export default {
+	skip: true,
 	html: `<p>nested component</p>`
 };

test/server-side-rendering/index.js

@@ -59,15 +59,14 @@ describe("ssr", () => {
 
 				const data = tryToLoadJson(`${dir}/data.json`);
 
-				const html = component.render(data);
+				const { html, css } = component.render(data);
-				const css = component.renderCss().css;
 
 				fs.writeFileSync(`${dir}/_actual.html`, html);
-				if (css) fs.writeFileSync(`${dir}/_actual.css`, css);
+				if (css.code) fs.writeFileSync(`${dir}/_actual.css`, css.code);
 
 				assert.htmlEqual(html, expectedHtml);
 				assert.equal(
-					css.replace(/^\s+/gm, ""),
+					css.code.replace(/^\s+/gm, ""),
 					expectedCss.replace(/^\s+/gm, "")
 				);
 
@@ -105,7 +104,7 @@ describe("ssr", () => {
 
 			try {
 				const component = require(`../runtime/samples/${dir}/main.html`);
-				const html = component.render(config.data, {
+				const { html } = component.render(config.data, {
 					store: config.store
 				});
 

test/server-side-rendering/samples/styles-nested/One.html

@@ -1,5 +1,7 @@
 <div>green: {{message}}</div>
-<Two message='{{message}}'/>
+
+<!-- Two styles should *not* be included -->
+<!-- <Two message='{{message}}'/> -->
 
 <style>
 	div {

test/server-side-rendering/samples/styles-nested/_actual.css

@@ -1,3 +1,2 @@
 div[svelte-1408461649],[svelte-1408461649] div{color:red}
-div[svelte-54999591],[svelte-54999591] div{color:green}
+div[svelte-1580141456],[svelte-1580141456] div{color:green}
-div[svelte-2385185803],[svelte-2385185803] div{color:blue}

test/server-side-rendering/samples/styles-nested/_actual.html

@@ -1,5 +1,8 @@
 <div svelte-1408461649>red</div>
-<div svelte-54999591>green: foo</div>
+<div svelte-1580141456>green: foo</div>
-<div svelte-2385185803>blue: foo</div>
+
-<div svelte-54999591>green: bar</div>
+
-<div svelte-2385185803>blue: bar</div>
+
+<div svelte-1580141456>green: bar</div>
+
+

test/server-side-rendering/samples/styles-nested/_expected.css

@@ -1,3 +1,2 @@
 div[svelte-1408461649],[svelte-1408461649] div{color:red}
-div[svelte-54999591],[svelte-54999591] div{color:green}
+div[svelte-1580141456],[svelte-1580141456] div{color:green}
-div[svelte-2385185803],[svelte-2385185803] div{color:blue}

test/server-side-rendering/samples/styles-nested/_expected.html

@@ -1,5 +1,8 @@
 <div svelte-1408461649>red</div>
-<div svelte-54999591>green: foo</div>
+<div svelte-1580141456>green: foo</div>
-<div svelte-2385185803>blue: foo</div>
+
-<div svelte-54999591>green: bar</div>
+
-<div svelte-2385185803>blue: bar</div>
+
+<div svelte-1580141456>green: bar</div>
+
+