hydrating static content

src/compiler/compile/nodes/Text.ts

@@ -3,6 +3,18 @@ import Component from '../Component';
 import TemplateScope from './shared/TemplateScope';
 import { INode } from './interfaces';
 
+// Whitespace inside one of these elements will not result in
+// a whitespace node being created in any circumstances. (This
+// list is almost certainly very incomplete)
+const elements_without_text = new Set([
+	'audio',
+	'datalist',
+	'dl',
+	'optgroup',
+	'select',
+	'video',
+]);
+
 export default class Text extends Node {
 	type: 'Text';
 	data: string;
@@ -13,4 +25,21 @@ export default class Text extends Node {
 		this.data = info.data;
 		this.synthetic = info.synthetic || false;
 	}
+
+	should_skip() {
+		if (/\S/.test(this.data)) return false;
+
+		const parent_element = this.find_nearest(/(?:Element|InlineComponent|Head)/);
+		if (!parent_element) return false;
+
+		if (parent_element.type === 'Head') return true;
+		if (parent_element.type === 'InlineComponent') return parent_element.children.length === 1 && this === parent_element.children[0];
+
+		// svg namespace exclusions
+		if (/svg$/.test(parent_element.namespace)) {
+			if (this.prev && this.prev.type === "Element" && this.prev.name === "tspan") return false;
+		}
+
+		return parent_element.namespace || elements_without_text.has(parent_element.name);
+	}
 }

src/compiler/compile/render_dom/wrappers/Element/Attribute.ts

@@ -55,13 +55,9 @@ export default class AttributeWrapper {
 		const element = this.parent;
 		const name = fix_attribute_casing(this.node.name);
 
-		const metadata = this.get_metadata();
-
 		const is_indirectly_bound_value = this.is_indirectly_bound_value();
 
-		const property_name = is_indirectly_bound_value
-			? '__value'
-			: metadata && metadata.property_name;
+		const property_name = this.get_property_name();
 
 		// xlink is a special case... we could maybe extend this to generic
 		// namespaced attributes but I'm not sure that's applicable in
@@ -185,6 +181,14 @@ export default class AttributeWrapper {
 		}
 	}
 
+	get_property_name() {
+		const metadata = this.get_metadata();
+		const is_indirectly_bound_value = this.is_indirectly_bound_value();
+		return is_indirectly_bound_value
+			? '__value'
+			: metadata && metadata.property_name;
+	}
+
 	get_metadata() {
 		if (this.parent.node.namespace) return null;
 		const metadata = attribute_lookup[fix_attribute_casing(this.node.name)];

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -384,7 +384,7 @@ export default class ElementWrapper extends Wrapper {
 		this.add_classes(block);
 		this.add_manual_style_scoping(block);
 
-		if (nodes && this.renderer.options.hydratable && !this.void) {
+		if (nodes && this.renderer.options.hydratable && !this.void && !this.can_use_innerhtml) {
 			block.chunks.claim.push(
 				b`${this.node.children.length > 0 ? nodes : children}.forEach(@detach);`
 			);
@@ -405,7 +405,7 @@ export default class ElementWrapper extends Wrapper {
 	get_render_statement(block: Block) {
 		const { name, namespace } = this.node;
 
-		if (namespace === 'http://www.w3.org/2000/svg') {
+		if (namespace === namespaces.svg) {
 			return x`@svg_element("${name}")`;
 		}
 
@@ -422,9 +422,9 @@ export default class ElementWrapper extends Wrapper {
 	}
 
 	get_claim_statement(nodes: Identifier) {
-		const attributes = this.node.attributes
-			.filter((attr) => attr.type === 'Attribute')
-			.map((attr) => p`${attr.name}: true`);
+		const attributes = this.attributes
+			.filter((attr) => attr.node.type === 'Attribute' && !attr.get_property_name())
+			.map((attr) => p`${fix_attribute_casing(attr.node.name)}: true`);
 
 		const name = this.node.namespace
 			? this.node.name

src/compiler/compile/render_dom/wrappers/Fragment.ts

@@ -17,6 +17,7 @@ import { INode } from '../../nodes/interfaces';
 import Renderer from '../Renderer';
 import Block from '../Block';
 import { trim_start, trim_end } from '../../../utils/trim';
+import { link } from '../../../utils/link';
 import { Identifier } from 'estree';
 
 const wrappers = {
@@ -38,11 +39,6 @@ const wrappers = {
 	Window
 };
 
-function link(next: Wrapper, prev: Wrapper) {
-	prev.next = next;
-	if (next) next.prev = prev;
-}
-
 function trimmable_at(child: INode, next_sibling: Wrapper): boolean {
 	// Whitespace is trimmable if one of the following is true:
 	// The child and its sibling share a common nearest each block (not at an each block boundary)

src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts

@@ -53,7 +53,11 @@ export default class RawMustacheTagWrapper extends Tag {
 
 			const update_anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
 
-			block.chunks.hydrate.push(b`${html_tag} = new @HtmlTag(${init}, ${update_anchor});`);
+			block.chunks.create.push(b`${html_tag} = new @HtmlTag(${init});`);
+			if (this.renderer.options.hydratable) {
+				block.chunks.claim.push(b`${html_tag} = @claim_html_tag(${init}, ${_parent_nodes});`);
+			}
+			block.chunks.hydrate.push(b`${html_tag}.b(${update_anchor})`);
 			block.chunks.mount.push(b`${html_tag}.m(${parent_node || '#target'}, ${parent_node ? null : 'anchor'});`);
 
 			if (needs_anchor) {

src/compiler/compile/render_dom/wrappers/Text.ts

@@ -5,36 +5,6 @@ import Wrapper from './shared/Wrapper';
 import { x } from 'code-red';
 import { Identifier } from 'estree';
 
-// Whitespace inside one of these elements will not result in
-// a whitespace node being created in any circumstances. (This
-// list is almost certainly very incomplete)
-const elements_without_text = new Set([
-	'audio',
-	'datalist',
-	'dl',
-	'optgroup',
-	'select',
-	'video',
-]);
-
-// TODO this should probably be in Fragment
-function should_skip(node: Text) {
-	if (/\S/.test(node.data)) return false;
-
-	const parent_element = node.find_nearest(/(?:Element|InlineComponent|Head)/);
-	if (!parent_element) return false;
-
-	if (parent_element.type === 'Head') return true;
-	if (parent_element.type === 'InlineComponent') return parent_element.children.length === 1 && node === parent_element.children[0];
-
-	// svg namespace exclusions
-	if (/svg$/.test(parent_element.namespace)) {
-		if (node.prev && node.prev.type === "Element" && node.prev.name === "tspan") return false;
-	}
-
-	return parent_element.namespace || elements_without_text.has(parent_element.name);
-}
-
 export default class TextWrapper extends Wrapper {
 	node: Text;
 	data: string;
@@ -50,7 +20,7 @@ export default class TextWrapper extends Wrapper {
 	) {
 		super(renderer, block, parent, node);
 
-		this.skip = should_skip(this.node);
+		this.skip = this.node.should_skip();
 		this.data = data;
 		this.var = (this.skip ? null : x`t`) as unknown as Identifier;
 	}

src/compiler/compile/render_dom/wrappers/shared/Wrapper.ts

@@ -35,7 +35,7 @@ export default class Wrapper {
 			}
 		});
 
-		this.can_use_innerhtml = !renderer.options.hydratable;
+		this.can_use_innerhtml = true;
 		this.is_static_content = !renderer.options.hydratable;
 
 		block.wrappers.push(this);

src/compiler/compile/render_ssr/handlers/Element.ts

@@ -4,12 +4,19 @@ import { get_slot_scope } from './shared/get_slot_scope';
 import { boolean_attributes } from './shared/boolean_attributes';
 import Renderer, { RenderOptions } from '../Renderer';
 import Element from '../../nodes/Element';
+import { INode } from '../../nodes/interfaces';
 import { x } from 'code-red';
 import Expression from '../../nodes/shared/Expression';
+import fix_attribute_casing from '../../render_dom/wrappers/Element/fix_attribute_casing';
+import { trim_end, trim_start } from '../../../utils/trim';
+import { link } from '../../../utils/link';
 
 export default function(node: Element, renderer: Renderer, options: RenderOptions & {
 	slot_scopes: Map<any, any>;
 }) {
+
+	const children = remove_whitespace_children(node.children, node.next);
+
 	// awkward special case
 	let node_contents;
 
@@ -51,16 +58,16 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 				if (name === 'value' && node.name.toLowerCase() === 'textarea') {
 					node_contents = get_attribute_value(attribute);
 				} else if (attribute.is_true) {
-					args.push(x`{ ${attribute.name}: true }`);
+					args.push(x`{ ${fix_attribute_casing(attribute.name)}: true }`);
 				} else if (
 					boolean_attributes.has(name) &&
 					attribute.chunks.length === 1 &&
 					attribute.chunks[0].type !== 'Text'
 				) {
 					// a boolean attribute with one non-Text chunk
-					args.push(x`{ ${attribute.name}: ${(attribute.chunks[0] as Expression).node} || null }`);
+					args.push(x`{ ${fix_attribute_casing(attribute.name)}: ${(attribute.chunks[0] as Expression).node} || null }`);
 				} else {
-					args.push(x`{ ${attribute.name}: ${get_attribute_value(attribute)} }`);
+					args.push(x`{ ${fix_attribute_casing(attribute.name)}: ${get_attribute_value(attribute)} }`);
 				}
 			}
 		});
@@ -73,25 +80,25 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 			if (name === 'value' && node.name.toLowerCase() === 'textarea') {
 				node_contents = get_attribute_value(attribute);
 			} else if (attribute.is_true) {
-				renderer.add_string(` ${attribute.name}`);
+				renderer.add_string(` ${fix_attribute_casing(attribute.name)}`);
 			} else if (
 				boolean_attributes.has(name) &&
 				attribute.chunks.length === 1 &&
 				attribute.chunks[0].type !== 'Text'
 			) {
 				// a boolean attribute with one non-Text chunk
 				renderer.add_string(` `);
-				renderer.add_expression(x`${(attribute.chunks[0] as Expression).node} ? "${attribute.name}" : ""`);
+				renderer.add_expression(x`${(attribute.chunks[0] as Expression).node} ? "${fix_attribute_casing(attribute.name)}" : ""`);
 			} else if (name === 'class' && class_expression) {
 				add_class_attribute = false;
-				renderer.add_string(` ${attribute.name}="`);
+				renderer.add_string(` ${fix_attribute_casing(attribute.name)}="`);
 				renderer.add_expression(x`[${get_class_attribute_value(attribute)}, ${class_expression}].join(' ').trim()`);
 				renderer.add_string(`"`);
 			} else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') {
 				const snippet = (attribute.chunks[0] as Expression).node;
-				renderer.add_expression(x`@add_attribute("${attribute.name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`);
+				renderer.add_expression(x`@add_attribute("${fix_attribute_casing(attribute.name)}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`);
 			} else {
-				renderer.add_string(` ${attribute.name}="`);
+				renderer.add_string(` ${fix_attribute_casing(attribute.name)}="`);
 				renderer.add_expression((name === 'class' ? get_class_attribute_value : get_attribute_value)(attribute));
 				renderer.add_string(`"`);
 			}
@@ -133,7 +140,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 	if (node_contents !== undefined) {
 		if (contenteditable) {
 			renderer.push();
-			renderer.render(node.children, options);
+			renderer.render(children, options);
 			const result = renderer.pop();
 
 			renderer.add_expression(x`($$value => $$value === void 0 ? ${result} : $$value)(${node_contents})`);
@@ -145,7 +152,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 			renderer.add_string(`</${node.name}>`);
 		}
 	} else if (slot && nearest_inline_component) {
-		renderer.render(node.children, options);
+		renderer.render(children, options);
 
 		if (!is_void(node.name)) {
 			renderer.add_string(`</${node.name}>`);
@@ -163,10 +170,80 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 			output: renderer.pop()
 		});
 	} else {
-		renderer.render(node.children, options);
+		renderer.render(children, options);
 
 		if (!is_void(node.name)) {
 			renderer.add_string(`</${node.name}>`);
 		}
 	}
 }
+
+// similar logic from `compile/render_dom/wrappers/Fragment`
+// We want to remove trailing whitespace inside an element/component/block,
+// *unless* there is no whitespace between this node and its next sibling
+function remove_whitespace_children(children: INode[], next?: INode): INode[] {
+	const nodes: INode[] = [];
+	let last_child: INode;
+	let i = children.length;
+	while (i--) {
+		const child = children[i];
+
+		if (child.type === 'Text') {
+			if (child.should_skip()) {
+				continue;
+			}
+
+			let { data } = child;
+
+			if (nodes.length === 0) {
+				const should_trim = next
+					? next.type === 'Text' &&
+					  /^\s/.test(next.data) &&
+					  trimmable_at(child, next)
+					: !child.has_ancestor('EachBlock');
+
+				if (should_trim) {
+					data = trim_end(data);
+					if (!data) continue;
+				}
+			}
+
+			// glue text nodes (which could e.g. be separated by comments) together
+			if (last_child && last_child.type === 'Text') {
+				last_child.data = data + last_child.data;
+				continue;
+			}
+
+			nodes.unshift(child);
+			link(last_child, last_child = child);
+		} else {
+			nodes.unshift(child);
+			link(last_child, last_child = child);
+		}
+	}
+
+	const first = nodes[0];
+	if (first && first.type === 'Text') {
+		first.data = trim_start(first.data);
+		if (!first.data) {
+			first.var = null;
+			nodes.shift();
+
+			if (nodes[0]) {
+				nodes[0].prev = null;
+			}
+		}
+	}
+
+	return nodes;
+}
+
+function trimmable_at(child: INode, next_sibling: INode): boolean {
+	// Whitespace is trimmable if one of the following is true:
+	// The child and its sibling share a common nearest each block (not at an each block boundary)
+	// The next sibling's previous node is an each block
+	return (
+		next_sibling.find_nearest(/EachBlock/) ===
+			child.find_nearest(/EachBlock/) || next_sibling.prev.type === 'EachBlock'
+	);
+}

src/compiler/compile/render_ssr/handlers/HtmlTag.ts

@@ -1,6 +1,8 @@
 import Renderer, { RenderOptions } from '../Renderer';
 import RawMustacheTag from '../../nodes/RawMustacheTag';
 
-export default function(node: RawMustacheTag, renderer: Renderer, _options: RenderOptions) {
+export default function(node: RawMustacheTag, renderer: Renderer, options: RenderOptions) {
+	if (options.hydratable) renderer.add_string('<!-- HTML_TAG_START -->');
 	renderer.add_expression(node.expression.node);
+	if (options.hydratable) renderer.add_string('<!-- HTML_TAG_END -->');
 }

src/compiler/utils/link.ts

@@ -0,0 +1,4 @@
+export function link<T extends { next?: T; prev?: T }>(next: T, prev: T) {
+	prev.next = next;
+	if (next) next.prev = prev;
+}