generate title in SSR compiler

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

@@ -1,3 +1,16 @@
-export default function visitDocument() {
+import { SsrGenerator } from '../index';
-	// noop
+import Block from '../Block';
-}
+import { Node } from '../../../interfaces';
+import stringifyAttributeValue from './shared/stringifyAttributeValue';
+
+export default function visitDocument(
+	generator: SsrGenerator,
+	block: Block,
+	node: Node
+) {
+	const title = node.attributes.find(attribute => attribute.type === 'Attribute' && attribute.name === 'title');
+
+	if (title) {
+		generator.append('${(__result.title = `' + stringifyAttributeValue(block, title.value) + '`, "")}');
+	}
+}

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

@@ -5,22 +5,8 @@ import visit from '../visit';
 import { SsrGenerator } from '../index';
 import Element from '../../nodes/Element';
 import Block from '../Block';
-import { escape } from '../../../utils/stringify';
 import { Node } from '../../../interfaces';
-
+import stringifyAttributeValue from './shared/stringifyAttributeValue';
-function stringifyAttributeValue(block: Block, chunks: Node[]) {
-	return chunks
-		.map((chunk: Node) => {
-			if (chunk.type === 'Text') {
-				return escape(chunk.data).replace(/"/g, '"');
-			}
-
-			block.contextualise(chunk.expression);
-			const { snippet } = chunk.metadata;
-			return '${' + snippet + '}';
-		})
-		.join('');
-}
 
 export default function visitElement(
 	generator: SsrGenerator,

src/generators/server-side-rendering/visitors/shared/stringifyAttributeValue.ts

@@ -0,0 +1,17 @@
+import Block from '../../Block';
+import { escape } from '../../../../utils/stringify';
+import { Node } from '../../../../interfaces';
+
+export default function stringifyAttributeValue(block: Block, chunks: Node[]) {
+	return chunks
+		.map((chunk: Node) => {
+			if (chunk.type === 'Text') {
+				return escape(chunk.data).replace(/"/g, '"');
+			}
+
+			block.contextualise(chunk.expression);
+			const { snippet } = chunk.metadata;
+			return '${' + snippet + '}';
+		})
+		.join('');
+}

test/server-side-rendering/index.js

@@ -59,7 +59,7 @@ describe("ssr", () => {
 
 				const data = tryToLoadJson(`${dir}/data.json`);
 
-				const { html, css } = component.render(data);
+				const { html, css, title } = component.render(data);
 
 				fs.writeFileSync(`${dir}/_actual.html`, html);
 				if (css.code) fs.writeFileSync(`${dir}/_actual.css`, css.code);
@@ -70,6 +70,13 @@ describe("ssr", () => {
 					expectedCss.replace(/^\s+/gm, "")
 				);
 
+				if (fs.existsSync(`${dir}/title.txt`)) {
+					assert.equal(
+						title,
+						fs.readFileSync(`${dir}/title.txt`, 'utf-8')
+					);
+				}
+
 				if (show) showOutput(dir, { generate: 'ssr' });
 			} catch (err) {
 				showOutput(dir, { generate: 'ssr' });

test/server-side-rendering/samples/document-title/data.json

@@ -0,0 +1,3 @@
+{
+	"adjective": "custom"
+}

test/server-side-rendering/samples/document-title/main.html

@@ -0,0 +1 @@
+<:Document title='a {{adjective}} title'/>

test/server-side-rendering/samples/document-title/title.txt

@@ -0,0 +1 @@
+a custom title