update SSR render method, and introduce <:Head>

src/generators/Generator.ts

@@ -161,9 +161,9 @@ export default class Generator {
 
 		this.computations = [];
 		this.templateProperties = {};
-		this.name = this.alias(name);
 
 		this.walkJs(dom);
+		this.name = this.alias(name);
 
 		if (options.customElement === true) {
 			this.customElement = {
@@ -727,6 +727,9 @@ export default class Generator {
 				} else if (node.name === ':Window') { // TODO do this in parse?
 					node.type = 'Window';
 					node.__proto__ = nodes.Window.prototype;
+				} else if (node.name === ':Head') { // TODO do this in parse?
+					node.type = 'Head';
+					node.__proto__ = nodes.Head.prototype;
 				} else if (node.type === 'Element' && node.name === 'slot' && !generator.customElement) {
 					node.type = 'Slot';
 					node.__proto__ = nodes.Slot.prototype;

src/generators/dom/Block.ts

@@ -132,10 +132,11 @@ export default class Block {
 	) {
 		this.addVariable(name);
 		this.builders.create.addLine(`${name} = ${renderStatement};`);
-		this.builders.claim.addLine(`${name} = ${claimStatement};`);
+		this.builders.claim.addLine(`${name} = ${claimStatement || renderStatement};`);
 
 		if (parentNode) {
 			this.builders.mount.addLine(`@appendNode(${name}, ${parentNode});`);
+			if (parentNode === 'document.head') this.builders.unmount.addLine(`@detachNode(${name});`);
 		} else {
 			this.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`);
 			this.builders.unmount.addLine(`@detachNode(${name});`);
@@ -203,7 +204,7 @@ export default class Block {
 			this.builders.hydrate.addLine(`this.first = ${this.first};`);
 		}
 
-		if (this.builders.create.isEmpty()) {
+		if (this.builders.create.isEmpty() && this.builders.hydrate.isEmpty()) {
 			properties.addBlock(`c: @noop,`);
 		} else {
 			properties.addBlock(deindent`
@@ -215,7 +216,7 @@ export default class Block {
 		}
 
 		if (this.generator.hydratable) {
-			if (this.builders.claim.isEmpty()) {
+			if (this.builders.claim.isEmpty() && this.builders.hydrate.isEmpty()) {
 				properties.addBlock(`l: @noop,`);
 			} else {
 				properties.addBlock(deindent`

src/generators/nodes/Attribute.ts

@@ -77,10 +77,7 @@ export default class Attribute {
 			? '@setXlinkAttribute'
 			: '@setAttribute';
 
-		const isDynamic =
-			(this.value !== true && this.value.length > 1) ||
-			(this.value.length === 1 && this.value[0].type !== 'Text');
-
+		const isDynamic = this.isDynamic();
 		const isLegacyInputType = this.generator.legacy && name === 'type' && this.parent.name === 'input';
 
 		const isDataSet = /^data-/.test(name) && !this.generator.legacy && !node.namespace;
@@ -310,6 +307,12 @@ export default class Attribute {
 			);
 		});
 	}
+
+	isDynamic() {
+		if (this.value === true || this.value.length === 0) return false;
+		if (this.value.length > 1) return true;
+		return this.value[0].type !== 'Text';
+	}
 }
 
 // source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

src/generators/nodes/AwaitBlock.ts

@@ -68,7 +68,7 @@ export default class AwaitBlock extends Node {
 	) {
 		const name = this.var;
 
-		const anchor = this.getOrCreateAnchor(block, parentNode);
+		const anchor = this.getOrCreateAnchor(block, parentNode, parentNodes);
 		const updateMountNode = this.getUpdateMountNode(anchor);
 
 		const params = block.params.join(', ');
@@ -143,9 +143,11 @@ export default class AwaitBlock extends Node {
 			${await_block}.c();
 		`);
 
-		block.builders.claim.addBlock(deindent`
-			${await_block}.l(${parentNodes});
-		`);
+		if (parentNodes) {
+			block.builders.claim.addBlock(deindent`
+				${await_block}.l(${parentNodes});
+			`);
+		}
 
 		const initialMountNode = parentNode || '#target';
 		const anchorNode = parentNode ? 'null' : 'anchor';

src/generators/nodes/Component.ts

@@ -248,7 +248,7 @@ export default class Component extends Node {
 			block.contextualise(this.expression);
 			const { dependencies, snippet } = this.metadata;
 
-			const anchor = this.getOrCreateAnchor(block, parentNode);
+			const anchor = this.getOrCreateAnchor(block, parentNode, parentNodes);
 
 			const params = block.params.join(', ');
 
@@ -281,9 +281,11 @@ export default class Component extends Node {
 				`if (${name}) ${name}._fragment.c();`
 			);
 
-			block.builders.claim.addLine(
-				`if (${name}) ${name}._fragment.l(${parentNodes});`
-			);
+			if (parentNodes) {
+				block.builders.claim.addLine(
+					`if (${name}) ${name}._fragment.l(${parentNodes});`
+				);
+			}
 
 			block.builders.mount.addLine(
 				`if (${name}) ${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`
@@ -350,9 +352,11 @@ export default class Component extends Node {
 
 			block.builders.create.addLine(`${name}._fragment.c();`);
 
-			block.builders.claim.addLine(
-				`${name}._fragment.l(${parentNodes});`
-			);
+			if (parentNodes) {
+				block.builders.claim.addLine(
+					`${name}._fragment.l(${parentNodes});`
+				);
+			}
 
 			block.builders.mount.addLine(
 				`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`

src/generators/nodes/EachBlock.ts

@@ -154,7 +154,7 @@ export default class EachBlock extends Node {
 			block.addElement(
 				anchor,
 				`@createComment()`,
-				`@createComment()`,
+				parentNodes && `@createComment()`,
 				parentNode
 			);
 		}
@@ -263,7 +263,7 @@ export default class EachBlock extends Node {
 			this.block.addElement(
 				this.block.first,
 				`@createComment()`,
-				`@createComment()`,
+				parentNodes && `@createComment()`,
 				null
 			);
 		}
@@ -293,13 +293,15 @@ export default class EachBlock extends Node {
 			}
 		`);
 
-		block.builders.claim.addBlock(deindent`
-			var ${iteration} = ${head};
-			while (${iteration}) {
-				${iteration}.l(${parentNodes});
-				${iteration} = ${iteration}.next;
-			}
-		`);
+		if (parentNodes) {
+			block.builders.claim.addBlock(deindent`
+				var ${iteration} = ${head};
+				while (${iteration}) {
+					${iteration}.l(${parentNodes});
+					${iteration} = ${iteration}.next;
+				}
+			`);
+		}
 
 		block.builders.mount.addBlock(deindent`
 			var ${iteration} = ${head};
@@ -481,11 +483,13 @@ export default class EachBlock extends Node {
 			}
 		`);
 
-		block.builders.claim.addBlock(deindent`
-			for (var #i = 0; #i < ${iterations}.length; #i += 1) {
-				${iterations}[#i].l(${parentNodes});
-			}
-		`);
+		if (parentNodes) {
+			block.builders.claim.addBlock(deindent`
+				for (var #i = 0; #i < ${iterations}.length; #i += 1) {
+					${iterations}[#i].l(${parentNodes});
+				}
+			`);
+		}
 
 		block.builders.mount.addBlock(deindent`
 			for (var #i = 0; #i < ${iterations}.length; #i += 1) {

src/generators/nodes/Element.ts

@@ -163,7 +163,7 @@ export default class Element extends Node {
 
 		const childState = {
 			parentNode: this.var,
-			parentNodes: block.getUniqueName(`${this.var}_nodes`)
+			parentNodes: parentNodes && block.getUniqueName(`${this.var}_nodes`) // if we're in unclaimable territory, i.e. <head>, parentNodes is null
 		};
 
 		const name = this.var;
@@ -175,25 +175,32 @@ export default class Element extends Node {
 			parentNode;
 
 		block.addVariable(name);
+		const renderStatement = getRenderStatement(this.generator, this.namespace, this.name);
 		block.builders.create.addLine(
-			`${name} = ${getRenderStatement(
-				this.generator,
-				this.namespace,
-				this.name
-			)};`
+			`${name} = ${renderStatement};`
 		);
 
 		if (this.generator.hydratable) {
-			block.builders.claim.addBlock(deindent`
-				${name} = ${getClaimStatement(generator, this.namespace, parentNodes, this)};
-				var ${childState.parentNodes} = @children(${name});
-			`);
+			if (parentNodes) {
+				block.builders.claim.addBlock(deindent`
+					${name} = ${getClaimStatement(generator, this.namespace, parentNodes, this)};
+					var ${childState.parentNodes} = @children(${name});
+				`);
+			} else {
+				block.builders.claim.addLine(
+					`${name} = ${renderStatement};`
+				);
+			}
 		}
 
 		if (initialMountNode) {
 			block.builders.mount.addLine(
 				`@appendNode(${name}, ${initialMountNode});`
 			);
+
+			if (initialMountNode === 'document.head') {
+				block.builders.unmount.addLine(`@detachNode(${name});`);
+			}
 		} else {
 			block.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`);
 
@@ -394,9 +401,11 @@ export default class Element extends Node {
 			block.builders.mount.addBlock(this.initialUpdate);
 		}
 
-		block.builders.claim.addLine(
-			`${childState.parentNodes}.forEach(@detachNode);`
-		);
+		if (childState.parentNodes) {
+			block.builders.claim.addLine(
+				`${childState.parentNodes}.forEach(@detachNode);`
+			);
+		}
 
 		function toHTML(node: Element | Text) {
 			if (node.type === 'Text') return node.data;

src/generators/nodes/Head.ts

@@ -0,0 +1,32 @@
+import deindent from '../../utils/deindent';
+import { stringify } from '../../utils/stringify';
+import Node from './shared/Node';
+import Block from '../dom/Block';
+import Attribute from './Attribute';
+
+export default class Head extends Node {
+	type: 'Head';
+	attributes: Attribute[];
+
+	init(
+		block: Block,
+		stripWhitespace: boolean,
+		nextSibling: Node
+	) {
+		this.initChildren(block, true, null);
+	}
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		const { generator } = this;
+
+		this.var = 'document.head';
+
+		this.children.forEach((child: Node) => {
+			child.build(block, 'document.head', null);
+		});
+	}
+}

src/generators/nodes/IfBlock.ts

@@ -133,15 +133,17 @@ export default class IfBlock extends Node {
 
 		block.builders.create.addLine(`${if_name}${name}.c();`);
 
-		block.builders.claim.addLine(
-			`${if_name}${name}.l(${parentNodes});`
-		);
+		if (parentNodes) {
+			block.builders.claim.addLine(
+				`${if_name}${name}.l(${parentNodes});`
+			);
+		}
 
 		if (needsAnchor) {
 			block.addElement(
 				anchor,
 				`@createComment()`,
-				`@createComment()`,
+				parentNodes && `@createComment()`,
 				parentNode
 			);
 		}

src/generators/nodes/MustacheTag.ts

@@ -22,7 +22,7 @@ export default class MustacheTag extends Tag {
 		block.addElement(
 			this.var,
 			`@createText(${init})`,
-			`@claimText(${parentNodes}, ${init})`,
+			parentNodes && `@claimText(${parentNodes}, ${init})`,
 			parentNode
 		);
 	}

src/generators/nodes/RawMustacheTag.ts

@@ -61,7 +61,7 @@ export default class RawMustacheTag extends Tag {
 			block.addElement(
 				anchorBefore,
 				`@createElement('noscript')`,
-				`@createElement('noscript')`,
+				parentNodes && `@createElement('noscript')`,
 				parentNode
 			);
 		}
@@ -70,7 +70,7 @@ export default class RawMustacheTag extends Tag {
 			block.addElement(
 				anchorAfter,
 				`@createElement('noscript')`,
-				`@createElement('noscript')`,
+				parentNodes && `@createElement('noscript')`,
 				parentNode
 			);
 		}

src/generators/nodes/Text.ts

@@ -53,7 +53,7 @@ export default class Text extends Node {
 		block.addElement(
 			this.var,
 			`@createText(${stringify(this.data)})`,
-			`@claimText(${parentNodes}, ${stringify(this.data)})`,
+			parentNodes && `@claimText(${parentNodes}, ${stringify(this.data)})`,
 			parentNode
 		);
 	}

src/generators/nodes/index.ts

@@ -10,6 +10,7 @@ import Element from './Element';
 import ElseBlock from './ElseBlock';
 import EventHandler from './EventHandler';
 import Fragment from './Fragment';
+import Head from './Head';
 import IfBlock from './IfBlock';
 import MustacheTag from './MustacheTag';
 import PendingBlock from './PendingBlock';
@@ -33,6 +34,7 @@ const nodes: Record<string, any> = {
 	ElseBlock,
 	EventHandler,
 	Fragment,
+	Head,
 	IfBlock,
 	MustacheTag,
 	PendingBlock,

src/generators/nodes/shared/Node.ts

@@ -138,7 +138,7 @@ export default class Node {
 		if (this.parent) return this.parent.findNearest(selector);
 	}
 
-	getOrCreateAnchor(block: Block, parentNode: string) {
+	getOrCreateAnchor(block: Block, parentNode: string, parentNodes: string) {
 		// TODO use this in EachBlock and IfBlock — tricky because
 		// children need to be created first
 		const needsAnchor = this.next ? !this.next.isDomNode() : !parentNode || !this.parent.isDomNode();
@@ -150,7 +150,7 @@ export default class Node {
 			block.addElement(
 				anchor,
 				`@createComment()`,
-				`@createComment()`,
+				parentNodes && `@createComment()`,
 				parentNode
 			);
 		}